app-base-react/lib/library/generator/components/Settings/ItemSettings.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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.default = ItemSettings;

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

var _formRender2 = _interopRequireDefault(_formRender);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _settings2 = require('../../settings');

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

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

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

var _widgets2 = require('../../widgets');

var frgWidgets = _interopRequireWildcard(_widgets2);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function ItemSettings(_ref) {
  var widgets = _ref.widgets;

  var setGlobal = (0, _hooks.useGlobal)();
  var form = (0, _formRender.useForm)();
  var isReady = (0, _react.useRef)(false);

  var _useStore = (0, _hooks.useStore)(),
      selected = _useStore.selected,
      flatten = _useStore.flatten,
      onItemChange = _useStore.onItemChange,
      onItemErrorChange = _useStore.onItemErrorChange,
      _useStore$userProps = _useStore.userProps,
      userProps = _useStore$userProps === undefined ? {} : _useStore$userProps,
      globalWidgets = _useStore.widgets,
      globalMapping = _useStore.mapping;

  var settings = userProps.settings,
      commonSettings = userProps.commonSettings,
      hideId = userProps.hideId,
      validation = userProps.validation,
      transformer = userProps.transformer;

  var _useState = (0, _react.useState)({}),
      _useState2 = _slicedToArray(_useState, 2),
      settingSchema = _useState2[0],
      setSettingSchema = _useState2[1];

  var _widgets = _extends({}, globalWidgets, frgWidgets);

  var getWidgetList = function getWidgetList(settings, commonSettings) {
    return settings.reduce(function (widgetList, setting) {
      if (!Array.isArray(setting.widgets)) return widgetList;
      var basicWidgets = setting.widgets.map(function (item) {
        var baseItemSettings = {};
        if (item.schema.type === 'array' && item.schema.items) {
          baseItemSettings.items = {
            type: 'object',
            hidden: '{{true}}'
          };
        }
        return _extends({}, item, {
          widget: item.widget || item.schema.widget || (0, _mapping.getWidgetName)(item.schema, globalMapping),
          setting: (0, _utils.mergeInOrder)(_settings2.baseCommonSettings, commonSettings, baseItemSettings, item.setting)
        });
      });
      return [].concat(_toConsumableArray(widgetList), _toConsumableArray(basicWidgets));
    }, []);
  };

  var onDataChange = function onDataChange() {
    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    try {
      if (selected === '#' || !isReady.current || !value.$id) return;
      var item = _extends({}, flatten[selected], {
        schema: transformer.fromSetting(value)
      });
      onItemChange(selected, item, 'schema');
    } catch (error) {
      console.error(error, 'catch');
    }
  };

  (0, _react.useEffect)(function () {
    // setting 该显示什么的计算，要把选中组件的 schema 和它对应的 widgets 的整体 schema 进行拼接
    try {
      isReady.current = false;
      var item = flatten[selected];
      if (!item || selected === '#') return;
      // 算 widgetList
      var _settings = Array.isArray(settings) ? [].concat(_toConsumableArray(settings), [{ widgets: [].concat(_toConsumableArray(_settings2.elements), _toConsumableArray(_settings2.advancedElements), _toConsumableArray(_settings2.layouts)) }]) // TODO: 不是最优解
      : _settings2.defaultSettings;
      var _commonSettings = (0, _utils.isObject)(commonSettings) ? commonSettings : _settings2.defaultCommonSettings;
      var widgetList = getWidgetList(_settings, _commonSettings);
      var widgetName = (0, _mapping.getWidgetName)(item.schema, globalMapping);
      var element = widgetList.find(function (e) {
        return e.widget === widgetName;
      }) || {}; // 有可能会没有找到
      var properties = _extends({}, element.setting);

      if (hideId) delete properties.$id;

      setTimeout(function () {
        setSettingSchema({
          type: 'object',
          displayType: 'column',
          properties: properties
        });
        var value = transformer.toSetting(item.schema);
        form.setValues(value);
        onDataChange(form.getValues());
        validation && form.submit();
        isReady.current = true;
      }, 0);
    } catch (error) {
      isReady.current = true;
      console.error(error);
    }
  }, [selected]);

  (0, _react.useEffect)(function () {
    validation && onItemErrorChange(form.errorFields);
  }, [validation, form.errorFields]);

  (0, _react.useEffect)(function () {
    setGlobal({ settingsForm: form });
  }, []);
  return _react2.default.createElement(
    'div',
    { style: { paddingRight: 24 } },
    _react2.default.createElement(_formRender2.default, {
      form: form,
      schema: settingSchema,
      widgets: _extends({}, _widgets, widgets),
      mapping: globalMapping,
      watch: {
        '#': function _(v) {
          return setTimeout(function () {
            return onDataChange(v);
          }, 0);
        }
      }
    })
  );
}