@txdfe/at/lib/form/item.js

一个设计体系组件库

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _grid = _interopRequireDefault(require("../grid"));

var _util = require("../util");

var _error = _interopRequireDefault(require("./error"));

var _enhance = require("./enhance");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Row = _grid["default"].Row,
    Col = _grid["default"].Col;
/** Form.Item
 *  @description 手动传递了 wrapCol labelCol 会使用 Grid 辅助布局; labelAlign='top' 会强制禁用 Grid
 *  @order 1
 */

var Item = /*#__PURE__*/function (_React$Component) {
  _inherits(Item, _React$Component);

  var _super = _createSuper(Item);

  function Item() {
    _classCallCheck(this, Item);

    return _super.apply(this, arguments);
  }

  _createClass(Item, [{
    key: "getNames",
    value:
    /**
     * 从子元素里面提取表单组件
     */
    function getNames() {
      var children = _react["default"].Children.toArray(this.props.children);

      return children.filter(function (c) {
        return c.props && ('name' in c.props || 'data-meta' in c.props);
      }).map(function (c) {
        return c.props.name || c.props.id;
      });
    }
  }, {
    key: "getHelper",
    value: function getHelper() {
      var help = this.props.help;
      var _formField = this.context._formField;
      return /*#__PURE__*/_react["default"].createElement(_error["default"], {
        name: help === undefined ? this.getNames() : undefined,
        field: _formField
      }, help);
    }
  }, {
    key: "getState",
    value: function getState() {
      var validateState = this.props.validateState;

      if (validateState) {
        return validateState;
      }

      if (this.context._formField) {
        var getState = this.context._formField.getState;
        var names = this.getNames();

        if (!names.length) {
          return '';
        } // get first name


        return getState(names[0]);
      }

      return undefined;
    }
  }, {
    key: "getSize",
    value: function getSize() {
      return this.props.size || this.context._formSize;
    }
  }, {
    key: "getItemLabel",
    value: function getItemLabel() {
      var _classNames;

      var _this$props = this.props,
          id = _this$props.id,
          required = _this$props.required,
          _this$props$asterisk = _this$props.asterisk,
          asterisk = _this$props$asterisk === void 0 ? required : _this$props$asterisk,
          label = _this$props.label,
          labelCol = _this$props.labelCol,
          wrapperCol = _this$props.wrapperCol,
          prefix = _this$props.prefix,
          labelAlign = _this$props.labelAlign,
          labelTextAlign = _this$props.labelTextAlign;

      if (!label) {
        return null;
      }

      var ele = /*#__PURE__*/_react["default"].createElement("label", {
        htmlFor: id || this.getNames()[0],
        required: asterisk,
        key: "label"
      }, label);

      var cls = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "form-item-label"), true), _defineProperty(_classNames, "".concat(prefix, "left"), labelTextAlign === 'left'), _classNames));

      if ((wrapperCol || labelCol) && labelAlign !== 'top') {
        return /*#__PURE__*/_react["default"].createElement(Col, _extends({}, labelCol, {
          className: cls
        }), ele);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: cls
      }, ele);
    }
  }, {
    key: "getItemWrapper",
    value: function getItemWrapper() {
      var _this = this;

      var _this$props2 = this.props,
          hasFeedback = _this$props2.hasFeedback,
          labelCol = _this$props2.labelCol,
          wrapperCol = _this$props2.wrapperCol,
          children = _this$props2.children,
          extra = _this$props2.extra,
          labelAlign = _this$props2.labelAlign,
          prefix = _this$props2.prefix;
      var state = this.getState();
      var childrenProps = {
        size: this.getSize()
      };

      if (state && (state === 'error' || hasFeedback)) {
        childrenProps.state = state;
      }

      if (labelAlign === 'inset') {
        childrenProps.label = this.getItemLabel();
      }

      var childrenNode = children;

      if (typeof children === 'function' && this.context._formField) {
        childrenNode = children(this.context._formField.getValues());
      }

      var ele = _react["default"].Children.map(childrenNode, function (child) {
        if (child && typeof child.type === 'function' && child.type._typeMark !== 'form_item' && child.type._typeMark !== 'form_error') {
          var extraProps = childrenProps;

          if (_this.context._formField && 'name' in child.props && !('data-meta' in child.props)) {
            extraProps = _this.context._formField.init(child.props.name, _objectSpread(_objectSpread({}, (0, _enhance.getFieldInitCfg)(_this.props, child.type.displayName)), {}, {
              props: _objectSpread(_objectSpread({}, child.props), {}, {
                ref: child.ref
              })
            }), childrenProps);
          } else {
            extraProps = _extends({}, child.props, extraProps);
          }

          return /*#__PURE__*/_react["default"].cloneElement(child, extraProps);
        }

        return child;
      });

      var help = this.getHelper();

      if ((wrapperCol || labelCol) && labelAlign !== 'top') {
        return /*#__PURE__*/_react["default"].createElement(Col, _extends({}, wrapperCol, {
          className: "".concat(prefix, "form-item-control"),
          key: "item"
        }), ele, help, extra ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "form-item-extra")
        }, extra) : null);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "form-item-control")
      }, ele, help, extra ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "form-item-extra")
      }, extra) : null);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames2;

      var _this$props3 = this.props,
          className = _this$props3.className,
          labelAlign = _this$props3.labelAlign,
          style = _this$props3.style,
          prefix = _this$props3.prefix,
          wrapperCol = _this$props3.wrapperCol,
          labelCol = _this$props3.labelCol,
          help = _this$props3.help;
      var state = this.getState();
      var size = this.getSize();
      var itemClassName = (0, _classnames["default"])((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "form-item"), true), _defineProperty(_classNames2, "".concat(prefix).concat(labelAlign), labelAlign), _defineProperty(_classNames2, "has-".concat(state), !!state), _defineProperty(_classNames2, 'has-help', !!help), _defineProperty(_classNames2, "".concat(prefix).concat(size), !!size), _defineProperty(_classNames2, "".concat(className), !!className), _classNames2)); // 垂直模式并且左对齐才用到

      var Tag = (wrapperCol || labelCol) && labelAlign !== 'top' ? Row : 'div';
      var label = labelAlign === 'inset' ? null : this.getItemLabel();
      return /*#__PURE__*/_react["default"].createElement(Tag, _extends({}, _util.obj.pickOthers(Item.propTypes, this.props), {
        className: itemClassName,
        style: style
      }), label, this.getItemWrapper());
    }
  }]);

  return Item;
}(_react["default"].Component);

exports["default"] = Item;

_defineProperty(Item, "propTypes", {
  /**
   * 样式前缀
   */
  prefix: _propTypes["default"].string,
  rtl: _propTypes["default"].bool,

  /**
   * label 标签的文本
   */
  label: _propTypes["default"].node,

  /**
   * label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效
   */
  labelCol: _propTypes["default"].object,

  /**
   * 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
   */
  wrapperCol: _propTypes["default"].object,

  /**
   * 自定义提示信息，如不设置，则会根据校验规则自动生成.
   */
  help: _propTypes["default"].node,

  /**
   * 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面
   */
  extra: _propTypes["default"].node,

  /**
   * 校验状态，如不设置，则会根据校验规则自动生成
   * @enumdesc 成功, 失败, 校验中
   */
  validateState: _propTypes["default"].oneOf(['error', 'success', 'loading']),

  /**
   * 配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持
   */
  hasFeedback: _propTypes["default"].bool,
  //TODO: hasFeedback => validateStatus=[error,success,loading]

  /**
   * 自定义内联样式
   */
  style: _propTypes["default"].object,
  id: _propTypes["default"].string,

  /**
   * node 或者 function(values)
   */
  children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),

  /**
   * 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
   */
  size: _propTypes["default"].oneOf(['small', 'medium']),

  /**
   * 标签的位置
   * @enumdesc 上, 左, 内
   */
  labelAlign: _propTypes["default"].oneOf(['top', 'left', 'inset']),

  /**
   * 标签的左右对齐方式
   * @enumdesc 左, 右
   */
  labelTextAlign: _propTypes["default"].oneOf(['left', 'right']),

  /**
   * 扩展class
   */
  className: _propTypes["default"].string,

  /**
   * [表单校验] 不能为空
   */
  required: _propTypes["default"].bool,

  /**
   * required 的星号是否显示
   */
  asterisk: _propTypes["default"].bool,

  /**
   * required 自定义错误信息
   */
  requiredMessage: _propTypes["default"].string,

  /**
   * required 自定义触发方式
   */
  requiredTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * [表单校验] 最小值
   */
  min: _propTypes["default"].number,

  /**
   * [表单校验] 最大值
   */
  max: _propTypes["default"].number,

  /**
   * min/max 自定义错误信息
   */
  minmaxMessage: _propTypes["default"].string,

  /**
   * min/max 自定义触发方式
   */
  minmaxTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * [表单校验] 字符串最小长度 / 数组最小个数
   */
  minLength: _propTypes["default"].number,

  /**
   * [表单校验] 字符串最大长度 / 数组最大个数
   */
  maxLength: _propTypes["default"].number,

  /**
   * minLength/maxLength 自定义错误信息
   */
  minmaxLengthMessage: _propTypes["default"].string,

  /**
   * minLength/maxLength 自定义触发方式
   */
  minmaxLengthTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * [表单校验] 字符串精确长度 / 数组精确个数
   */
  length: _propTypes["default"].number,

  /**
   * length 自定义错误信息
   */
  lengthMessage: _propTypes["default"].string,

  /**
   * length 自定义触发方式
   */
  lengthTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 正则校验
   */
  pattern: _propTypes["default"].any,

  /**
   * pattern 自定义错误信息
   */
  patternMessage: _propTypes["default"].string,

  /**
   * pattern 自定义触发方式
   */
  patternTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * [表单校验] 四种常用的 pattern
   */
  format: _propTypes["default"].oneOf(['number', 'email', 'url', 'tel']),

  /**
   * format 自定义错误信息
   */
  formatMessage: _propTypes["default"].string,

  /**
   * format 自定义触发方式
   */
  formatTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * [表单校验] 自定义校验函数
   */
  validator: _propTypes["default"].func,

  /**
   * validator 自定义触发方式
   */
  validatorTrigger: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 是否修改数据时自动触发校验
   */
  autoValidate: _propTypes["default"].bool
});

_defineProperty(Item, "defaultProps", {
  prefix: 'next-',
  hasFeedback: false
});

_defineProperty(Item, "contextTypes", {
  _formField: _propTypes["default"].object,
  _formSize: _propTypes["default"].oneOf(['small', 'medium'])
});

_defineProperty(Item, "_typeMark", 'form_item');