form-render/lib/base/asField.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DefaultFieldUI = exports.asField = void 0;

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

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

var _validate = require("./validate");

var _isHidden = require("./isHidden");

var _utils = require("./utils");

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

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// asField拆分成逻辑组件和展示组件，从而可替换展示组件的方式完全插拔fr的样式
var asField = function asField(_ref) {
  var FieldUI = _ref.FieldUI,
      Widget = _ref.Widget;

  var FieldContainer = function FieldContainer(_ref2) {
    var className = _ref2.className,
        column = _ref2.column,
        showValidate = _ref2.showValidate,
        isRoot = _ref2.isRoot,
        hidden = _ref2.hidden,
        props = _ref2.props,
        showDescIcon = _ref2.showDescIcon,
        width = _ref2.width,
        labelWidth = _ref2.labelWidth,
        disabled = _ref2.disabled,
        readonly = _ref2.readonly,
        options = _ref2.options,
        schema = _ref2.schema,
        rest = _objectWithoutProperties(_ref2, ["className", "column", "showValidate", "isRoot", "hidden", "props", "showDescIcon", "width", "labelWidth", "disabled", "readonly", "options", "schema"]);

    var displayType = rest.displayType,
        _rest$rootValue = rest.rootValue,
        rootValue = _rest$rootValue === void 0 ? {} : _rest$rootValue,
        _rest$formData = rest.formData,
        formData = _rest$formData === void 0 ? {} : _rest$formData,
        dependShow = rest.dependShow; // most key of schema, disabled, readonly, options, hidden, support for function expression

    var convertValue = function convertValue(item) {
      if (typeof item === 'function') {
        return item(formData, rootValue);
      } else if (typeof item === 'string' && (0, _utils.isFunction)(item) !== false) {
        var _item = (0, _utils.isFunction)(item);

        try {
          return (0, _utils.evaluateString)(_item, formData, rootValue);
        } catch (error) {
          console.error(error.message);
          console.error("happen at ".concat(item));
          return item;
        }
      }

      return item;
    };

    hidden = convertValue(hidden);
    disabled = convertValue(disabled);
    readonly = convertValue(readonly);
    options = convertValue(options); // iterate over schema, and convert every key

    var _schema = _objectSpread({}, schema);

    Object.keys(schema).forEach(function (key) {
      var availableKey = ['title', 'description', 'format', 'pattern', 'message', 'min', 'max', 'step', 'enum', 'enumNames']; // TODO: need to cover more

      if (availableKey.indexOf(key) > -1) {
        _schema[key] = convertValue(schema[key]);
      }
    }); // "ui:hidden": true, hide formItem
    // after "convertValue" being stable, this api will be discarded

    if (hidden && (0, _isHidden.isHidden)({
      hidden: hidden,
      rootValue: rootValue,
      formData: formData
    })) {
      return null;
    } // 传入组件的值


    var _rest = _objectSpread(_objectSpread({}, rest), {}, {
      schema: _schema,
      disabled: disabled,
      readonly: readonly,
      options: options,
      formData: formData || {},
      rootValue: rootValue || {}
    }); // 不建议使用ui:dependShow, 一般一律使用ui:hidden。ui:dependShow可以做复杂、跨结构的校验


    if ((0, _isHidden.isDependShow)({
      formData: formData,
      dependShow: dependShow
    })) {
      return null;
    }

    var isComplex = _schema.type === 'object' || _schema.type === 'array' && _schema.enum === undefined;
    var isModal = options && (options.modal || options.drawer);

    if (isModal) {
      isComplex = false;
    }

    var validateText = (0, _validate.getValidateText)(_rest); // 必填*，label，描述，竖排时的校验语，只要存在一个，label就不为空

    var showLabel = _schema.title || rest.description || rest.required || displayType !== 'row' && showValidate && validateText;
    var columnStyle = {};

    if (!isComplex && width) {
      columnStyle = {
        width: width,
        paddingRight: '12px'
      };
    } else if (!isComplex && column > 1) {
      columnStyle = {
        width: "calc(100% /".concat(column, ")"),
        paddingRight: '12px'
      };
    }

    var fieldProps = {
      className: className,
      columnStyle: columnStyle,
      displayType: displayType,
      isComplex: isComplex,
      isRequired: rest.required,
      isRoot: isRoot,
      schema: _schema,
      showDescIcon: showDescIcon,
      showLabel: showLabel,
      showValidate: showValidate,
      validateText: validateText,
      labelWidth: labelWidth
    };
    return /*#__PURE__*/_react.default.createElement(FieldUI, fieldProps, /*#__PURE__*/_react.default.createElement(Widget, _extends({}, _rest, {
      invalid: showValidate && validateText
    })));
  };

  FieldContainer.propTypes = {
    showValidate: _propTypes.default.bool,
    column: _propTypes.default.number,
    isRoot: _propTypes.default.bool,
    props: _propTypes.default.object,
    showDescIcon: _propTypes.default.bool,
    displayType: _propTypes.default.string
  };
  FieldContainer.defaultProps = {
    showValidate: true,
    column: 1,
    isRoot: false,
    props: {},
    showDescIcon: false,
    displayType: 'column'
  };
  return FieldContainer;
};

exports.asField = asField;

var DefaultFieldUI = function DefaultFieldUI(_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      columnStyle = _ref3.columnStyle,
      displayType = _ref3.displayType,
      isComplex = _ref3.isComplex,
      isRequired = _ref3.isRequired,
      isRoot = _ref3.isRoot,
      schema = _ref3.schema,
      showDescIcon = _ref3.showDescIcon,
      showLabel = _ref3.showLabel,
      showValidate = _ref3.showValidate,
      validateText = _ref3.validateText,
      labelWidth = _ref3.labelWidth;
  // field 整体 label 标签 content 内容
  var title = schema.title,
      type = schema.type,
      _enum = schema.enum,
      _schema$description = schema.description,
      description = _schema$description === void 0 ? '' : _schema$description,
      widget = schema['ui:widget'],
      options = schema['ui:options'];
  var isCheckbox = type === 'boolean' && widget !== 'switch';
  var isModal = options && (options.modal || options.drawer);
  var fieldClass = "fr-field w-100 ".concat(isComplex ? 'fr-field-complex' : '');
  var labelClass = 'fr-label mb2';
  var contentClass = 'fr-content';

  switch (type) {
    case 'object':
      if (isModal) {
        break;
      }

      if (title) {
        labelClass += ' fr-label-object bb b--black-20 pb1 mt2 mb3'; // fr-label-object 无默认style，只是占位用于使用者样式覆盖
      }

      if (!isRoot) {
        fieldClass += ' fr-field-object'; // object的margin bottom由内部元素撑起

        if (title) {
          contentClass += ' ml3'; // 缩进
        }
      }

      break;

    case 'array':
      if (isModal) {
        break;
      }

      if (title && !_enum) {
        labelClass += ' fr-label-array mt2 mb3';
      }

      break;

    case 'boolean':
      if (isCheckbox) {
        if (title) {
          labelClass += ' ml2';
          labelClass = labelClass.replace('mb2', 'mb0');
        }

        contentClass += ' flex items-center'; // checkbox高度短，需要居中对齐

        fieldClass += ' flex items-center flex-row-reverse justify-end';
      }

      break;

    default:
      if (displayType === 'row') {
        labelClass = labelClass.replace('mb2', 'mb0');
      }

  } // 横排时


  if (displayType === 'row' && !isComplex && !isCheckbox) {
    fieldClass += ' flex items-center';
    labelClass += ' flex-shrink-0 fr-label-row';
    labelClass = labelClass.replace('mb2', 'mb0');
    contentClass += ' flex-grow-1 relative';
  } // 横排的checkbox


  if (displayType === 'row' && isCheckbox) {
    contentClass += ' flex justify-end pr2';
  }

  var _labelWidth = (0, _utils.isLooselyNumber)(labelWidth) ? Number(labelWidth) : (0, _utils.isCssLength)(labelWidth) ? labelWidth : 110; // 默认是 110px 的长度


  var labelStyle = {
    width: _labelWidth
  };

  if (isCheckbox) {
    labelStyle = {
      flexGrow: 1
    };
  } else if (isComplex || displayType === 'column') {
    labelStyle = {
      flexGrow: 1
    };
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: className ? "".concat(className, " ").concat(fieldClass) : fieldClass,
    style: columnStyle
  }, showLabel && /*#__PURE__*/_react.default.createElement("div", {
    className: labelClass,
    style: labelStyle
  }, /*#__PURE__*/_react.default.createElement("label", {
    className: "fr-label-title ".concat(isCheckbox || displayType === 'column' ? 'no-colon' : '') // boolean不带冒号
    ,
    title: title
  }, isRequired && /*#__PURE__*/_react.default.createElement("span", {
    className: "fr-label-required"
  }, " *"), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(isComplex ? 'b' : '', " ").concat(displayType === 'column' ? 'flex-none' : '')
  }, title), description && (showDescIcon ? /*#__PURE__*/_react.default.createElement("span", {
    className: "fr-tooltip-toggle",
    "aria-label": description
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "fr-tooltip-icon"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "fr-tooltip-container"
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "fr-tooltip-triangle"
  }), description)) : /*#__PURE__*/_react.default.createElement("span", {
    className: "fr-desc ml2"
  }, "(\xA0", description, "\xA0)")), displayType !== 'row' && showValidate && validateText && /*#__PURE__*/_react.default.createElement("span", {
    className: "fr-validate"
  }, validateText))), /*#__PURE__*/_react.default.createElement("div", {
    className: contentClass,
    style: isCheckbox ? displayType === 'row' ? {
      marginLeft: _labelWidth
    } : {} : {
      flexGrow: 1
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex ".concat(isComplex ? 'flex-column' : 'items-center')
  }, children), displayType === 'row' && showValidate && validateText && /*#__PURE__*/_react.default.createElement("span", {
    className: "fr-validate fr-validate-row ".concat(isComplex ? 'relative' : 'absolute')
  }, validateText)));
};

exports.DefaultFieldUI = DefaultFieldUI;