app-base-react/lib/library/generator/Provider.js

react development common base package.

'use strict';

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

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"); } }; }();

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; }; // import { ConfigProvider } from 'antd';
// import zhCN from 'antd/lib/locale/zh_CN';


var _copyTextToClipboard = require('copy-text-to-clipboard');

var _copyTextToClipboard2 = _interopRequireDefault(_copyTextToClipboard);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDnd = require('react-dnd');

var _reactDndHtml5Backend = require('react-dnd-html5-backend');

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

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

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

var _context = require('./utils/context');

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

var _serialize = require('./utils/serialize');

var _list = require('./widgets/list');

var _list2 = _interopRequireDefault(_list);

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

var DEFAULT_SCHEMA = {
  type: 'object',
  properties: {}
};

// TODO: formData 不存在的时候会报错：can't find # of undefined
function Provider(props, ref) {
  var defaultValue = props.defaultValue,
      canDrag = props.canDrag,
      canDelete = props.canDelete,
      submit = props.submit,
      _transformer = props.transformer,
      extraButtons = props.extraButtons,
      showDefaultForm = props.showDefaultForm,
      controlButtons = props.controlButtons,
      _preview = props.preview,
      hideId = props.hideId,
      _props$getId = props.getId,
      getId = _props$getId === undefined ? _utils.defaultGetId : _props$getId,
      settings = props.settings,
      commonSettings = props.commonSettings,
      globalSettings = props.globalSettings,
      _props$widgets = props.widgets,
      widgets = _props$widgets === undefined ? {} : _props$widgets,
      _props$mapping = props.mapping,
      mapping = _props$mapping === undefined ? {} : _props$mapping,
      _props$validation = props.validation,
      validation = _props$validation === undefined ? true : _props$validation,
      children = props.children,
      fieldRender = props.fieldRender,
      fieldWrapperRender = props.fieldWrapperRender,
      elementRender = props.elementRender;


  var transformer = _extends({
    from: function from(schema) {
      return schema;
    },
    to: function to(schema) {
      return schema;
    },
    fromSetting: _formRender2.fromSetting,
    toSetting: _formRender2.toSetting
  }, _transformer);

  var frwRef = ref || (0, _react.useRef)();

  var _useSet = (0, _hooks.useSet)({
    formData: {},
    frProps: {}, // form-render 的全局 props 等
    isNewVersion: true, // 用schema字段，还是用propsSchema字段，这是一个问题
    preview: false, // preview = false 是编辑模式
    schema: {},
    selected: undefined, // 被选中的$id, 如果object/array的内部，以首字母0标识
    settingsForm: null
  }),
      _useSet2 = _slicedToArray(_useSet, 2),
      state = _useSet2[0],
      setState = _useSet2[1];

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      errorFields = _useState2[0],
      setErrorFields = _useState2[1];

  // 收口点 propsSchema 到 schema 的转换 (一共3处，其他两个是 importSchema 和 setValue，在 FRWrapper 文件)


  (0, _react.useEffect)(function () {
    var schema = defaultValue ? transformer.from(defaultValue) : DEFAULT_SCHEMA;
    if (schema) setState((0, _utils.schemaToState)(schema));
  }, [defaultValue]);

  var formData = state.formData,
      frProps = state.frProps,
      isNewVersion = state.isNewVersion,
      preview = state.preview,
      schema = state.schema,
      selected = state.selected;


  var onChange = function onChange(data) {
    setState({ formData: data });
    props.onChange && props.onChange(data);
  };

  var onSchemaChange = function onSchemaChange(newSchema) {
    setState({ schema: newSchema });
    if (props.onSchemaChange) {
      setTimeout(function () {
        if (!frwRef.current) return;
        var pureSchema = frwRef.current.getValue();
        props.onSchemaChange(pureSchema);
      }, 0);
    }
  };

  var _mapping = _extends({}, _formRender.mapping, mapping);
  var _widgets = _extends({}, _formRender.widgets, widgets, { list: _list2.default });

  var rootState = {
    preview: _preview === null || _preview === undefined ? preview : _preview,
    mapping: _mapping,
    widgets: _widgets,
    selected: selected
  };

  var userProps = {
    canDrag: canDrag,
    canDelete: canDelete,
    submit: submit,
    transformer: transformer,
    isNewVersion: isNewVersion,
    extraButtons: extraButtons,
    showDefaultForm: showDefaultForm,
    controlButtons: controlButtons,
    hideId: hideId,
    getId: getId,
    validation: validation,
    settings: settings,
    commonSettings: commonSettings,
    globalSettings: globalSettings
  };

  var _schema = {};
  if (schema) {
    _schema = (0, _utils.combineSchema)(schema); // TODO: 要不要判断是否都是object
  }
  var flatten = (0, _utils.flattenSchema)(_schema);
  var flattenWithData = transformer.from((0, _utils.dataToFlatten)(flatten, formData));

  var onFlattenChange = function onFlattenChange(newFlatten) {
    var changeSource = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'schema';

    var newSchema = (0, _utils.idToSchema)(newFlatten);
    var newData = (0, _utils.flattenToData)(newFlatten);
    // 判断只有schema变化时才调用，一般需求的用户不需要
    if (changeSource === 'schema') {
      onSchemaChange(newSchema);
    }
    // schema 变化大都会触发 data 变化
    onChange(newData);
  };

  var onItemChange = function onItemChange(key, value, changeSource) {
    flattenWithData[key] = value;
    onFlattenChange(flattenWithData, changeSource);
  };

  var displaySchema = {};
  var displaySchemaString = '';
  try {
    var _schema2 = _extends({}, (0, _utils.idToSchema)(flattenWithData, '#', true), frProps);
    displaySchema = transformer.to(_schema2);
    if (!isNewVersion) {
      displaySchema = (0, _utils.newSchemaToOld)(displaySchema);
    }
    // displaySchemaString = JSON.stringify(displaySchema, null, 2);
    // 支持直接保存函数之后(解决validtor不能正常保存的问题)，这里因为导入导出的问题，序列化也用内置的api序列化
    displaySchemaString = (0, _serialize.serializeToDraft)(displaySchema);
  } catch (error) {}

  var getValue = function getValue() {
    return displaySchema;
  };

  var setValue = function setValue(value) {
    try {
      setState(function (state) {
        return _extends({}, state, {
          selected: undefined
        }, (0, _utils.schemaToState)(transformer.from(value)));
      });
    } catch (error) {
      console.error(error);
    }
  };

  var copyValue = function copyValue() {
    (0, _copyTextToClipboard2.default)(displaySchemaString);
  };

  var getErrorFields = function getErrorFields() {
    return errorFields;
  };

  var getSettingsForm = function getSettingsForm() {
    return state.settingsForm;
  };

  (0, _react.useImperativeHandle)(frwRef, function () {
    return {
      getValue: getValue,
      setValue: setValue,
      copyValue: copyValue,
      getErrorFields: getErrorFields,
      getSettingsForm: getSettingsForm
    };
  });

  // TODO: flatten是频繁在变的，应该和其他两个函数分开
  var store = _extends({
    flatten: flattenWithData, // schema + formData = flattenWithData
    onFlattenChange: onFlattenChange, // onChange + onSchemaChange = onFlattenChange
    onItemChange: onItemChange, // onFlattenChange 里只改一个item的flatten，使用这个方法
    onSchemaChange: onSchemaChange,
    onChange: onChange,
    errorFields: errorFields,
    onItemErrorChange: setErrorFields,
    userProps: userProps,
    frProps: frProps,
    displaySchema: displaySchema,
    displaySchemaString: displaySchemaString,
    fieldRender: fieldRender,
    fieldWrapperRender: fieldWrapperRender,
    elementRender: elementRender
  }, rootState);

  return _react2.default.createElement(
    _reactDnd.DndProvider,
    { backend: _reactDndHtml5Backend.HTML5Backend, context: window },
    _react2.default.createElement(
      _context.Ctx.Provider,
      { value: setState },
      _react2.default.createElement(
        _context.StoreCtx.Provider,
        { value: store },
        children
      )
    )
  );
}

exports.default = (0, _react.forwardRef)(Provider);