Zan-design NPM

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);
    });
  }
}