app-base-react/lib/library/generator/components/Canvas/core/RenderField.js

react development common base package.

'use strict';

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _hooks = require('../../../utils/hooks');

var _mapping = require('../../../utils/mapping');

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

var RenderField = function RenderField(_ref) {
  var $id = _ref.$id,
      item = _ref.item,
      labelClass = _ref.labelClass,
      contentClass = _ref.contentClass,
      isComplex = _ref.isComplex,
      children = _ref.children;
  var schema = item.schema,
      data = item.data;

  var _useStore = (0, _hooks.useStore)(),
      onItemChange = _useStore.onItemChange,
      flatten = _useStore.flatten,
      widgets = _useStore.widgets,
      mapping = _useStore.mapping,
      _useStore$frProps = _useStore.frProps,
      frProps = _useStore$frProps === undefined ? {} : _useStore$frProps,
      fieldRender = _useStore.fieldRender;

  var labelWidth = frProps.labelWidth,
      displayType = frProps.displayType,
      showValidate = frProps.showValidate;
  var title = schema.title,
      description = schema.description,
      required = schema.required;


  var widgetName = (0, _mapping.getWidgetName)(schema, mapping);
  var customWidget = schema['widget'];
  if (customWidget && widgets[customWidget]) {
    widgetName = customWidget;
  }
  var Widget = widgets[widgetName];
  // 如果不存在，比如有外部的自定义组件名称，使用默认展示组件
  if (!Widget) {
    var defaultSchema = _extends({}, schema);
    delete defaultSchema['widget'];
    widgetName = (0, _mapping.getWidgetName)(defaultSchema, mapping);
    Widget = widgets[widgetName] || 'input';
  }
  // 真正有效的label宽度需要从现在所在item开始一直往上回溯（设计成了继承关系），找到的第一个有值的 labelWidth
  var effectiveLabelWidth = (0, _utils.getParentProps)('labelWidth', $id, flatten) || labelWidth;
  var _labelWidth = (0, _utils.isLooselyNumber)(effectiveLabelWidth) ? Number(effectiveLabelWidth) : (0, _utils.isCssLength)(effectiveLabelWidth) ? effectiveLabelWidth : 110; // 默认是 110px 的长度

  var labelStyle = { width: _labelWidth };
  if (widgetName === 'checkbox') {
    labelStyle = { flexGrow: 1 };
  } else if (isComplex || displayType === 'column') {
    labelStyle = { flexGrow: 1 };
  }

  var onChange = function onChange(value) {
    var newItem = _extends({}, item);
    if (item.schema.type === 'boolean' && item.schema.widget === 'checkbox') {
      newItem.data = !value;
    } else {
      newItem.data = value;
    }
    onItemChange($id, newItem, 'data');
  };

  var contentStyle = {};
  if (widgetName === 'checkbox' && displayType === 'row') {
    contentStyle.marginLeft = effectiveLabelWidth;
  }

  // TODO: useMemo
  // 改为直接使用form-render内部自带组件后不需要再包一层options
  var usefulWidgetProps = (0, _utils.transformProps)(_extends({
    value: data || schema.default,
    checked: data,
    disabled: schema.disabled,
    readOnly: schema.readOnly,
    format: schema.format,
    onChange: onChange,
    schema: schema
  }, schema['props']));

  var originNode = _react2.default.createElement(
    _react.Fragment,
    null,
    schema.title ? _react2.default.createElement(
      'div',
      { className: labelClass, style: labelStyle },
      _react2.default.createElement(
        'label',
        {
          className: 'fr-label-title ' + (widgetName === 'checkbox' || displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号
          , title: title
        },
        required && _react2.default.createElement(
          'span',
          { className: 'fr-label-required' },
          ' *'
        ),
        _react2.default.createElement(
          'span',
          {
            className: (isComplex ? 'b' : '') + ' ' + (displayType === 'column' ? 'flex-none' : '')
          },
          _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: title } })
        ),
        description && _react2.default.createElement(
          'span',
          { className: 'fr-desc ml2' },
          '(\xA0',
          description,
          '\xA0)'
        ),
        displayType !== 'row' && showValidate && _react2.default.createElement(
          'span',
          { className: 'fr-validate' },
          'validation'
        )
      )
    ) : null,
    _react2.default.createElement(
      'div',
      { className: contentClass, style: contentStyle },
      _react2.default.createElement(
        _react.Suspense,
        { fallback: _react2.default.createElement('div', null) },
        _react2.default.createElement(
          Widget,
          usefulWidgetProps,
          children || null
        )
      )
    )
  );

  if (!fieldRender) return originNode;
  return fieldRender(schema, usefulWidgetProps, children, originNode);
};

exports.default = RenderField;