yy-forms 1.0.0

package/es/Provider.js

@@ -0,0 +1,248 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/lib/locale/zh_CN';
+import copyTOClipboard from 'copy-text-to-clipboard';
+import { mapping as defaultMapping, widgets as defaultWidgets } from 'form-render';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { fromSetting, toSetting } from './transformer/form-render';
+import { combineSchema, dataToFlatten, defaultGetId, flattenSchema, flattenToData, idToSchema, newSchemaToOld, schemaToState } from './utils';
+import { Ctx, StoreCtx } from './utils/context';
+import { useSet } from './utils/hooks';
+import { serializeToDraft } from './utils/serialize';
+import list from './widgets/list';
+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,
+    controlButtons = props.controlButtons,
+    _preview = props.preview,
+    hideId = props.hideId,
+    _props$getId = props.getId,
+    getId = _props$getId === void 0 ? defaultGetId : _props$getId,
+    settings = props.settings,
+    commonSettings = props.commonSettings,
+    globalSettings = props.globalSettings,
+    _props$widgets = props.widgets,
+    widgets = _props$widgets === void 0 ? {} : _props$widgets,
+    _props$mapping = props.mapping,
+    mapping = _props$mapping === void 0 ? {} : _props$mapping,
+    _props$methods = props.methods,
+    methods = _props$methods === void 0 ? {} : _props$methods,
+    _props$configProvider = props.configProvider,
+    configProvider = _props$configProvider === void 0 ? {} : _props$configProvider,
+    _props$validation = props.validation,
+    validation = _props$validation === void 0 ? true : _props$validation,
+    children = props.children,
+    fieldRender = props.fieldRender,
+    fieldWrapperRender = props.fieldWrapperRender,
+    elementRender = props.elementRender,
+    prefixCls = props.prefixCls;
+  var transformer = _objectSpread({
+    from: function from(schema) {
+      return schema;
+    },
+    to: function to(schema) {
+      return schema;
+    },
+    fromSetting: fromSetting,
+    toSetting: toSetting
+  }, _transformer);
+  var frwRef = ref || useRef();
+  var _useSet = 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 = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorFields = _useState2[0],
+    setErrorFields = _useState2[1];
+
+  // 收口点 propsSchema 到 schema 的转换 (一共3处，其他两个是 importSchema 和 setValue，在 FRWrapper 文件)
+  useEffect(function () {
+    var schema = defaultValue ? transformer.from(defaultValue) : DEFAULT_SCHEMA;
+    if (schema) setState(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 = _objectSpread(_objectSpread({}, defaultMapping), mapping);
+  var _widgets = _objectSpread(_objectSpread(_objectSpread({}, defaultWidgets), widgets), {}, {
+    list: list
+  });
+  var rootState = {
+    preview: _preview !== null && _preview !== void 0 ? _preview : preview,
+    mapping: _mapping,
+    widgets: _widgets,
+    methods: methods,
+    selected: selected
+  };
+  var userProps = {
+    canDrag: canDrag,
+    canDelete: canDelete,
+    submit: submit,
+    transformer: transformer,
+    isNewVersion: isNewVersion,
+    extraButtons: extraButtons,
+    controlButtons: controlButtons,
+    hideId: hideId,
+    getId: getId,
+    validation: validation,
+    settings: settings,
+    commonSettings: commonSettings,
+    globalSettings: globalSettings
+  };
+  var _schema = {};
+  if (schema) {
+    _schema = combineSchema(_objectSpread(_objectSpread({}, schema), frProps)); // TODO: 要不要判断是否都是object
+  }
+  var flatten = flattenSchema(_schema);
+  var flattenWithData = transformer.from(dataToFlatten(flatten, formData));
+  var onFlattenChange = function onFlattenChange(newFlatten) {
+    var changeSource = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'schema';
+    var newSchema = idToSchema(newFlatten);
+    var newData = 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 = _objectSpread(_objectSpread({}, idToSchema(flattenWithData, '#', true)), frProps);
+    displaySchema = transformer.to(_schema2);
+    if (!isNewVersion) {
+      displaySchema = newSchemaToOld(displaySchema);
+    }
+    // displaySchemaString = JSON.stringify(displaySchema, null, 2);
+    // 支持直接保存函数之后(解决validtor不能正常保存的问题)，这里因为导入导出的问题，序列化也用内置的api序列化
+    displaySchemaString = serializeToDraft(displaySchema);
+  } catch (error) {}
+  var getValue = function getValue() {
+    return displaySchema;
+  };
+  var setValue = function setValue(value) {
+    try {
+      setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selected: undefined
+        }, schemaToState(transformer.from(value)));
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  var copyValue = function copyValue() {
+    copyTOClipboard(displaySchemaString);
+  };
+  var getErrorFields = function getErrorFields() {
+    return errorFields;
+  };
+  var getSettingsForm = function getSettingsForm() {
+    return state.settingsForm;
+  };
+  useImperativeHandle(frwRef, function () {
+    return {
+      getValue: getValue,
+      setValue: setValue,
+      copyValue: copyValue,
+      getErrorFields: getErrorFields,
+      getSettingsForm: getSettingsForm
+    };
+  });
+
+  // TODO: flatten是频繁在变的，应该和其他两个函数分开
+  var store = _objectSpread({
+    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 /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend,
+    context: window
+  }, /*#__PURE__*/React.createElement(ConfigProvider, _extends({
+    locale: zhCN
+  }, configProvider), /*#__PURE__*/React.createElement(Ctx.Provider, {
+    value: setState
+  }, /*#__PURE__*/React.createElement(StoreCtx.Provider, {
+    value: store
+  }, children))));
+}
+export default /*#__PURE__*/forwardRef(Provider);

package/es/index.d.ts

@@ -0,0 +1,145 @@
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+
+export interface Transformer {
+  /** 正向的转换函数 */
+  from?: (schema: any) => any;
+  /** 反向的转换函数 */
+  to?: (schema: any) => any;
+  /** 反向的转换函数 */
+  fromSetting?: (schema: any) => any;
+  /** 反向的转换函数 */
+  toSetting?: (schema: any) => any;
+}
+
+export interface ExtraButton {
+  /** 按钮文案 */
+  text: string;
+  /** 点击回调 */
+  onClick?: (event: any) => void;
+  [key: string]: any;
+}
+
+export interface ControlButton {
+  /** 按钮文案 */
+  text?: string;
+  /** 点击回调 */
+  onClick?: (event: any, schema: any) => void;
+}
+
+export interface SettingWidget {
+  /** 按钮生成的 schema 的 key 值 */
+  name: string;
+  /** 在左侧栏按钮展示文案 */
+  text: string;
+  /** 在左侧栏按钮展示图标 */
+  icon?: string | ReactNode;
+  /** 如果是基本组件，这个字段注明它对应的 widgets */
+  widget?: string;
+  /** 组件对应的 schema 片段 */
+  schema?: any;
+  /** 组件的配置信息，使用 form-render 的 schema 来描述 */
+  setting?: any;
+}
+
+export interface Setting {
+  /** 最外层的分组名称 */
+  title: string;
+  /** 每个组件的配置，在左侧栏是一个按钮 */
+  widgets: SettingWidget[];
+  show?: boolean;
+  useCommon?: boolean;
+}
+
+export interface FRGeneratorProps {
+  getId?: (name: string) => string;
+  /** 国际化配置 */
+  locale?: 'cn' | 'en';
+  /** 隐藏组件 ID */
+  hideId?: boolean;
+  /** 固定 id */
+  fixedName?: boolean;
+  /** 组件删除控制 */
+  canDelete?: boolean | Function;
+  /** 默认一进入编辑器展示的表单对应的 schema */
+  defaultValue?: any;
+  /** 自定义 schema 到 form-render 的 schema 的双向转换函数 */
+  transformer?: Transformer;
+  /** 编辑区顶部的自定义按钮 */
+  extraButtons?: (ExtraButton | boolean | string)[];
+  /** 选中项操作按钮 */
+  controlButtons?: (ControlButton | boolean | Function)[];
+  /** 预览态控制 */
+  preview?: boolean;
+  /** 左右侧栏配置 */
+  settings?: Setting[];
+  /** 通用配置 */
+  commonSettings?: any;
+  /** 全局配置 */
+  globalSettings?: any;
+  /** 自定义组件 */
+  widgets?: any;
+  /** 配置栏自定义组件 */
+  settingsWidgets?: any;
+  /** 组件和 schema 的映射规则 */
+  mapping?: any;
+  /** 配置表单校验 */
+  validation?: boolean;
+  fieldRender?: (
+    schema?: any,
+    widgetProps?: any,
+    children?: ReactNode,
+    originNode?: ReactNode
+  ) => ReactNode;
+  fieldWrapperRender?: (
+    schema?: any,
+    isSelected?: boolean,
+    children?: ReactNode,
+    originNode?: ReactNode
+  ) => ReactNode;
+  elementRender?: (
+    schema?: any,
+    widgetProps?: SettingWidget,
+    originNode?: ReactNode
+  ) => ReactNode;
+  /** 表单 data 变化回调 */
+  onChange?: (data: any) => void;
+  /** 表单 schema 变化回调 */
+  onSchemaChange?: (schema: any) => void;
+  /** 画布组件选择回调 */
+  onCanvasSelect?: (schema: any) => void;
+}
+
+export interface SettingsProps {
+  /** 自定义组件 */
+  widgets?: any;
+}
+export interface CanvasProps {
+  /** 画布组件选择回调 */
+  onCanvasSelect?: (schema: any) => void;
+}
+
+export interface SidebarProps {
+  /** 固定 id */
+  fixedName?: boolean;
+}
+
+export interface Generator
+  extends ForwardRefExoticComponent<
+    FRGeneratorProps & RefAttributes<HTMLElement>
+  > {
+  Provider: FC<FRGeneratorProps>;
+  Settings: FC<SettingsProps>;
+  Canvas: FC<CanvasProps>;
+  Sidebar: FC<SidebarProps>;
+}
+
+declare const FRGenerator: Generator;
+declare const defaultSettings: Setting[];
+declare const defaultCommonSettings: any;
+declare const defaultGlobalSettings: any;
+declare const fromSetting: (schema: any) => any;
+declare const toSetting: (schema: any) => any;
+
+export { defaultSettings, defaultCommonSettings, defaultGlobalSettings };
+export { fromSetting, toSetting };
+export default FRGenerator;

package/es/index.js

@@ -0,0 +1,44 @@
+var _excluded = ["fixedName", "settingsWidgets", "onCanvasSelect", "locale"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useEffect, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Canvas from './components/Canvas';
+import Settings from './components/Settings';
+import Sidebar from './components/Sidebar';
+import Provider from './Provider';
+import './i18next';
+import './styles/index.less';
+var Generator = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var fixedName = _ref.fixedName,
+    settingsWidgets = _ref.settingsWidgets,
+    onCanvasSelect = _ref.onCanvasSelect,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'cn' : _ref$locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
+  useEffect(function () {
+    i18n.changeLanguage(locale);
+  }, [locale]);
+  return /*#__PURE__*/React.createElement(Provider, _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "fr-generator-container"
+  }, /*#__PURE__*/React.createElement(Sidebar, {
+    fixedName: fixedName
+  }), /*#__PURE__*/React.createElement(Canvas, {
+    onSelect: onCanvasSelect
+  }), /*#__PURE__*/React.createElement(Settings, {
+    widgets: settingsWidgets
+  })));
+});
+Generator.Provider = Provider;
+Generator.Sidebar = Sidebar;
+Generator.Canvas = Canvas;
+Generator.Settings = Settings;
+export { defaultCommonSettings, defaultGlobalSettings, defaultSettings } from './settings';
+export { fromSetting, toSetting } from './transformer/form-render';
+export default Generator;
+export * from './utils/serialize';