zan-design

zan-design

design 业务组件。

这个包是微商城内的一些 Design 组件，Design 组件的框架在 Zent 里面，不在这里维护。

代码演示

import { Design } from 'zent';
import ConfigEditor from 'zan-design/lib/components/config/ConfigEditor';
import ConfigPreview from 'zan-design/lib/components/config/ConfigPreview';
import { Button, Layout } from 'zent';
 
const components = [
  {
    type: ConfigEditor.designType,
 
    preview: ConfigPreview,
    // previewController: ConfigPreviewController,
    editor: ConfigEditor,
 
    // 是否可以拖拽
    dragable: false,
 
    // 是否出现在底部的添加组件区域
    appendable: false,
 
    // 是否可以编辑，UMP里面有些地方config是不能编辑的
    // editable: true,
 
    configurable: false,
 
    highlightWhenSelect: false
  },
  // 其他组件
];
 
class Simple extends Component {
  state = {
    value: [
      {
        type: ConfigEditor.designType,
        ...ConfigEditor.getInitialValue()
      }
    ]
  };
 
  onChange = newValue => {
    this.setState({
      value: newValue
    });
  };
 
  render() {
    return (
      <div>
        <DesignWithDnd
          ref={this.saveDesign}
          cache
          cacheId="design-test"
          confirmUnsavedLeave={false}
          components={components}
          value={this.state.value}
          onChange={this.onChange}
          globalConfig={window._global}
        />
        <Row className="design-example-actions">
          <Col span={3} offset={1}>
            <Button type="primary" onClick={this.submit}>
              上架
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
 
  saveDesign = instance => {
    this.design = instance.getDecoratedComponentInstance();
  };
 
  triggerDesignValidation() {
    return this.design.validate();
  }
 
  submit = () => {
    this.triggerDesignValidation()
    .then(() => {
    	// submit this.state.value to server
        this.design.markAsSaved();
    })
    .catch(validations => {
      console.log(validations);
    });
  };
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);
 

如何实现新的 Design 组件

每个 Design 都分为两部分：Preview 以及 Editor。

Preview 比较简单，实现一个组件接受 { value: any, globalConfig: any, design: object } 这些 props即可。

Editor 请继承 zan-design/lib/base/editor/DesignEditor，这个基类提供了一些常用的方法（例如 onChange 事件的处理函数），在子类里面可以直接使用。

Editor 接受如下props：{ value: any, onChange: func, showError: boolean, validation: object, design object }。

Editor 必须提供这几个静态属性：designType, designDescription, getInitialValue, validate。

validate(value): Promise 有错误的时候 resolve 一个错误对象出来。

props.design 提供了一下可能有用的方法：例如触发组件的校验等。

一个例子

// Preview
import React, { PureComponent, Component } from 'react';
 
export default class NoticePreview extends (PureComponent || Component) {
  render() {
    const { value } = this.props;
 
    return (
      <div className="rc-design-component-notice-preview">{value}</div>
    );
  }
}
 
// Editor
import React from 'react';
import { Input } from 'zent';
 
import { DesignEditor, ControlGroup } from 'zent/lib/design/editor/DesignEditor';
 
export const PLACEHOLDER = '请填写内容，如果过长，将会在手机上滚动显示';
 
export default class NoticeEditor extends DesignEditor {
  render() {
    const { value, showError, validation } = this.props;
 
    return (
      <div className="rc-design-component-notice-editor">
        <ControlGroup
          label="公告:"
          required
          showError={showError || this.getMetaProperty('content', 'touched')}
          error={validation.content}
        >
          <Input
            name="content"
            placeholder={PLACEHOLDER}
            value={value.content}
            onChange={this.onInputChange}
            onBlur={this.onInputBlur}
          />
        </ControlGroup>
      </div>
    );
  }
 
  static designType = 'notice';
  static designDescription = '公告';
  static getInitialValue() {
    return {
      content: '',
      scrollable: false
    };
  }
 
  static validate(value) {
    return new Promise(resolve => {
      const errors = {};
      const { content } = value;
      if (!content || !content.trim()) {
        errors.content = '请填写公告内容';
      }
 
      resolve(errors);
    });
  }
}

更新日志

4.7.16 (2018-01-18)

• [bug fix] link 组件不支持微页面及商品

4.6.13 (2017-12-14)

• [bug fix] 富文本组件在上传视频之后在 preview 层无法展示的问题

4.6.6 (2017-12-01)

• [bug fix] 秒杀组件展示问题及图片广告组件去掉链接校验

4.4.8 (2017-11-09)

• [bug fix] audio 组件可配置 upload 的参数

4.3.10 (2017-10-28)

• [bug fix] 更正图片广告组件 preview 不能轮播的问题