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

react development common base package.

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactI18next = require('react-i18next');

var _formRender = require('../../../../form-render');

var _formRender2 = _interopRequireDefault(_formRender);

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

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

var _RenderChildren = require('./RenderChildren');

var _RenderChildren2 = _interopRequireDefault(_RenderChildren);

var _RenderField = require('./RenderField');

var _RenderField2 = _interopRequireDefault(_RenderField);

var _Wrapper = require('./Wrapper');

var _Wrapper2 = _interopRequireDefault(_Wrapper);

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

var PreviewFR = function PreviewFR(_ref) {
  var schema = _ref.schema,
      data = _ref.data;

  var form = (0, _formRender.useForm)();

  var _useStore = (0, _hooks.useStore)(),
      flatten = _useStore.flatten,
      widgets = _useStore.widgets,
      mapping = _useStore.mapping,
      userProps = _useStore.userProps,
      onFlattenChange = _useStore.onFlattenChange;

  var renderSchema = userProps.transformer.to(schema);

  (0, _react.useEffect)(function () {
    form.setValues(data);
  }, []);

  return _react2.default.createElement(_formRender2.default, {
    schema: renderSchema,
    form: form,
    widgets: widgets,
    mapping: mapping,
    watch: {
      '#': function _(formData) {
        onFlattenChange((0, _utils.dataToFlatten)(flatten, formData), 'data');
      }
    }
  });
};

var FR = function FR(_ref2) {
  var _ref2$id = _ref2.id,
      id = _ref2$id === undefined ? '#' : _ref2$id,
      preview = _ref2.preview,
      displaySchema = _ref2.displaySchema;

  var _useStore2 = (0, _hooks.useStore)(),
      flatten = _useStore2.flatten,
      _useStore2$frProps = _useStore2.frProps,
      frProps = _useStore2$frProps === undefined ? {} : _useStore2$frProps;

  var _useTranslation = (0, _reactI18next.useTranslation)(),
      t = _useTranslation.t;

  if (preview) {
    var data = (0, _utils.flattenToData)(flatten);
    return _react2.default.createElement(PreviewFR, { schema: displaySchema, data: data });
  }

  var column = frProps.column;

  var item = flatten[id];
  if (!item) return null;

  var schema = item.schema;

  var displayType = schema.displayType || frProps.displayType;
  var isObj = schema.type === 'object';
  var isList = schema.type === 'array' && schema.enum === undefined && !!schema.items;
  var isComplex = isObj || isList;
  var width = schema['width'];
  var containerClass = 'fr-field w-100 ' + (isComplex ? 'fr-field-complex' : '') + ' ' + (schema.className || '');
  var labelClass = 'fr-label mb2';
  var contentClass = 'fr-content';

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

  switch (schema.type) {
    case 'object':
      if (schema.title) {
        containerClass += ' ba b--black-20 pt4 pr3 pb2 relative mt3 mb4'; // object的margin bottom由内部元素撑起
        labelClass += ' fr-label-object bg-white absolute ph2 top-upper left-1'; // fr-label-object 无默认style，只是占位用于使用者样式覆盖
      }
      containerClass += ' fr-field-object'; // object的margin bottom由内部元素撑起
      if (schema.title) {
        contentClass += ' ml3'; // 缩进
      }
      break;
    case 'array':
      if (isList) {
        labelClass += ' mt2 mb3';
      }
      break;
    case 'boolean':
      if (schema['widget'] !== 'switch') {
        if (schema.title) {
          labelClass += ' ml2';
          labelClass = labelClass.replace('mb2', 'mb0');
        }
        contentClass += ' flex items-center'; // checkbox高度短，需要居中对齐
        containerClass += ' flex items-center flex-row-reverse justify-end';
      }
      break;
    default:
      if (displayType === 'row') {
        labelClass = labelClass.replace('mb2', 'mb0');
      }
  }
  // 横排时
  var isCheckBox = schema.type === 'boolean' && schema['widget'] !== 'switch';
  if (displayType === 'row' && !isComplex && !isCheckBox) {
    containerClass += ' 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 fieldProps = {
    $id: id,
    item: item,
    labelClass: labelClass,
    contentClass: contentClass,
    isComplex: isComplex
  };

  var childrenElement = item.children && item.children.length > 0 ? _react2.default.createElement(
    'ul',
    { className: 'flex flex-wrap pl0' },
    _react2.default.createElement(_RenderChildren2.default, { children: item.children })
  ) : null;

  var isEmpty = Object.keys(flatten).length < 2; // 只有一个根元素 # 的情况
  if (isEmpty) {
    return _react2.default.createElement(
      _Wrapper2.default,
      { style: columnStyle, $id: id, item: item },
      _react2.default.createElement(
        'div',
        {
          className: containerClass + ' h-100 f4 black-40 flex items-center justify-center'
        },
        t('点击/拖拽左侧栏的组件进行添加')
      )
    );
  }

  return _react2.default.createElement(
    _Wrapper2.default,
    { style: columnStyle, $id: id, item: item },
    _react2.default.createElement(
      'div',
      { className: containerClass },
      _react2.default.createElement(
        _RenderField2.default,
        fieldProps,
        (isObj || isList) && _react2.default.createElement(
          _Wrapper2.default,
          { $id: id, item: item, inside: true },
          childrenElement || _react2.default.createElement('div', { className: 'h2' })
        )
      )
    )
  );
};

exports.default = FR;