zent/lib/design/components/config/ConfigEditor.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _button = require('../../../button');

var _button2 = _interopRequireDefault(_button);

var _input = require('../../../input');

var _input2 = _interopRequireDefault(_input);

var _colorpicker = require('../../../colorpicker');

var _colorpicker2 = _interopRequireDefault(_colorpicker);

var _DesignEditor2 = require('../../editor/DesignEditor');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var DEFAULT_BACKGROUND = '#f9f9f9'; /* eslint-disable no-script-url */

var ConfigEditor = function (_DesignEditor) {
  (0, _inherits3['default'])(ConfigEditor, _DesignEditor);

  function ConfigEditor(props) {
    (0, _classCallCheck3['default'])(this, ConfigEditor);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (ConfigEditor.__proto__ || Object.getPrototypeOf(ConfigEditor)).call(this, props));

    _this.onColorChange = _this.onCustomInputChange('color');

    _this.onBackgroundChange = function (color) {
      // 因为外层会在组件刷新前调用getPreviewBgColor方法，所以缓存起来
      _this.cachedBackground = color;
      _this.onColorChange(color);
    };

    _this.resetBackground = function () {
      _this.onBackgroundChange(DEFAULT_BACKGROUND);
    };

    _this.getPreviewProps = function () {
      var value = _this.props.value;

      var bg = _this.cachedBackground || getBackground(value);
      _this.cachedBackground = undefined;

      return {
        background: bg
      };
    };

    _this.filterTag = function (item, keyword) {
      return item.text.indexOf(keyword) > -1;
    };

    var design = _this.props.design;

    design.injections.getPreviewProps(_this.getPreviewProps);
    return _this;
  }

  (0, _createClass3['default'])(ConfigEditor, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          value = _props.value,
          prefix = _props.prefix,
          showError = _props.showError,
          validation = _props.validation;


      return _react2['default'].createElement(
        'div',
        { className: prefix + '-design-component-config-editor' },
        _react2['default'].createElement(
          _DesignEditor2.ControlGroup,
          {
            showError: showError || this.getMetaProperty('title', 'touched'),
            error: validation.title,
            required: true,
            label: '\u9875\u9762\u540D\u79F0:'
          },
          _react2['default'].createElement(_input2['default'], {
            value: value.title,
            onChange: this.onInputChange,
            onBlur: this.onInputBlur,
            name: 'title'
          })
        ),
        _react2['default'].createElement(
          _DesignEditor2.ControlGroup,
          {
            showError: showError || this.getMetaProperty('description', 'touched'),
            error: validation.description,
            label: '\u9875\u9762\u63CF\u8FF0:'
          },
          _react2['default'].createElement(_input2['default'], {
            value: value.description,
            onChange: this.onInputChange,
            onBlur: this.onInputBlur,
            name: 'description',
            placeholder: '\u7528\u6237\u901A\u8FC7\u5FAE\u4FE1\u5206\u4EAB\u7ED9\u670B\u53CB\u65F6\uFF0C\u4F1A\u81EA\u52A8\u663E\u793A\u9875\u9762\u63CF\u8FF0'
          })
        ),
        _react2['default'].createElement(
          _DesignEditor2.ControlGroup,
          {
            label: '\u80CC\u666F\u989C\u8272:',
            labelAlign: 'top',
            className: prefix + '-design-component-config-editor__background',
            focusOnLabelClick: false
          },
          _react2['default'].createElement(
            'div',
            {
              className: prefix + '-design-component-config-editor__background-control'
            },
            _react2['default'].createElement(_colorpicker2['default'], {
              color: getBackground(value),
              onChange: this.onBackgroundChange
            }),
            _react2['default'].createElement(
              _button2['default'],
              { onClick: this.resetBackground },
              '\u91CD\u7F6E'
            )
          ),
          _react2['default'].createElement(
            'div',
            {
              className: prefix + '-design-component-config-editor__background-hint'
            },
            '\u80CC\u666F\u989C\u8272\u53EA\u5728\u624B\u673A\u7AEF\u663E\u793A'
          )
        )
      );
    }
  }], [{
    key: 'getInitialValue',
    value: function getInitialValue() {
      return {
        // 标题
        title: '微页面标题',

        //  背景颜色
        color: DEFAULT_BACKGROUND,

        // 页面描述
        description: ''
      };
    }
  }, {
    key: 'validate',
    value: function validate(value) {
      return new Promise(function (resolve) {
        var errors = {};
        var title = value.title;

        if (!title || !title.trim()) {
          errors.title = '请填写页面名称';
        } else if (title.length > 50) {
          errors.title = '页面名称长度不能多于 50 个字';
        }

        resolve(errors);
      });
    }
  }]);
  return ConfigEditor;
}(_DesignEditor2.DesignEditor);

ConfigEditor.designType = 'config';
ConfigEditor.designDescription = '页面配置';
exports['default'] = ConfigEditor;


function getBackground(value) {
  return value && value.color || DEFAULT_BACKGROUND;
}