yy-forms 1.0.0

package/src/Provider.jsx

@@ -0,0 +1,239 @@
+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';
+
+const DEFAULT_SCHEMA = {
+  type: 'object',
+  properties: {},
+};
+
+// TODO: formData 不存在的时候会报错：can't find # of undefined
+function Provider(props, ref) {
+  const {
+    defaultValue,
+    canDrag,
+    canDelete,
+    submit,
+    transformer: _transformer,
+    extraButtons,
+    controlButtons,
+    preview: _preview,
+    hideId,
+    getId = defaultGetId,
+    settings,
+    commonSettings,
+    globalSettings,
+    widgets = {},
+    mapping = {},
+    methods = {},
+    configProvider = {},
+    validation = true,
+    children,
+    fieldRender,
+    fieldWrapperRender,
+    elementRender,
+    prefixCls,
+  } = props;
+
+  const transformer = {
+    from: schema => schema,
+    to: schema => schema,
+    fromSetting,
+    toSetting,
+    ..._transformer,
+  };
+
+  const frwRef = ref || useRef();
+  const [state, setState] = useSet({
+    formData: {},
+    frProps: {}, // form-render 的全局 props 等
+    isNewVersion: true, // 用schema字段，还是用propsSchema字段，这是一个问题
+    preview: false, // preview = false 是编辑模式
+    schema: {},
+    selected: undefined, // 被选中的$id, 如果object/array的内部，以首字母0标识
+    settingsForm: null,
+  });
+  const [errorFields, setErrorFields] = useState([]);
+
+  // 收口点 propsSchema 到 schema 的转换 (一共3处，其他两个是 importSchema 和 setValue，在 FRWrapper 文件)
+  useEffect(() => {
+    const schema = defaultValue
+      ? transformer.from(defaultValue)
+      : DEFAULT_SCHEMA;
+    if (schema) setState(schemaToState(schema));
+  }, [defaultValue]);
+
+  const { formData, frProps, isNewVersion, preview, schema, selected } = state;
+
+  const onChange = data => {
+    setState({ formData: data });
+    props.onChange && props.onChange(data);
+  };
+
+  const onSchemaChange = newSchema => {
+    setState({ schema: newSchema });
+    if (props.onSchemaChange) {
+      setTimeout(() => {
+        if (!frwRef.current) return;
+        const pureSchema = frwRef.current.getValue();
+        props.onSchemaChange(pureSchema);
+      }, 0);
+    }
+  };
+
+  const _mapping = { ...defaultMapping, ...mapping };
+  const _widgets = { ...defaultWidgets, ...widgets, list };
+
+  const rootState = {
+    preview: _preview ?? preview,
+    mapping: _mapping,
+    widgets: _widgets,
+    methods,
+    selected,
+  };
+
+  const userProps = {
+    canDrag,
+    canDelete,
+    submit,
+    transformer,
+    isNewVersion,
+    extraButtons,
+    controlButtons,
+    hideId,
+    getId,
+    validation,
+    settings,
+    commonSettings,
+    globalSettings,
+  };
+
+  let _schema = {};
+  if (schema) {
+    _schema = combineSchema({ ...schema, ...frProps }); // TODO: 要不要判断是否都是object
+  }
+  const flatten = flattenSchema(_schema);
+  const flattenWithData = transformer.from(dataToFlatten(flatten, formData));
+
+  const onFlattenChange = (newFlatten, changeSource = 'schema') => {
+    const newSchema = idToSchema(newFlatten);
+    const newData = flattenToData(newFlatten);
+    // 判断只有schema变化时才调用，一般需求的用户不需要
+    if (changeSource === 'schema') {
+      onSchemaChange(newSchema);
+    }
+    // schema 变化大都会触发 data 变化
+    onChange(newData);
+  };
+
+  const onItemChange = (key, value, changeSource) => {
+    flattenWithData[key] = value;
+    onFlattenChange(flattenWithData, changeSource);
+  };
+
+  let displaySchema = {};
+  let displaySchemaString = '';
+  try {
+    const _schema = {
+      ...idToSchema(flattenWithData, '#', true),
+      ...frProps,
+    };
+    displaySchema = transformer.to(_schema);
+    if (!isNewVersion) {
+      displaySchema = newSchemaToOld(displaySchema);
+    }
+    // displaySchemaString = JSON.stringify(displaySchema, null, 2);
+    // 支持直接保存函数之后(解决validtor不能正常保存的问题)，这里因为导入导出的问题，序列化也用内置的api序列化
+    displaySchemaString = serializeToDraft(displaySchema);
+  } catch (error) {}
+
+  const getValue = () => displaySchema;
+
+  const setValue = value => {
+    try {
+      setState(state => ({
+        ...state,
+        selected: undefined,
+        ...schemaToState(transformer.from(value)),
+      }));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const copyValue = () => {
+    copyTOClipboard(displaySchemaString);
+  };
+
+  const getErrorFields = () => errorFields;
+
+  const getSettingsForm = () => state.settingsForm;
+
+  useImperativeHandle(frwRef, () => ({
+    getValue,
+    setValue,
+    copyValue,
+    getErrorFields,
+    getSettingsForm,
+  }));
+
+  // TODO: flatten是频繁在变的，应该和其他两个函数分开
+  const store = {
+    flatten: flattenWithData, // schema + formData = flattenWithData
+    onFlattenChange, // onChange + onSchemaChange = onFlattenChange
+    onItemChange, // onFlattenChange 里只改一个item的flatten，使用这个方法
+    onSchemaChange,
+    onChange,
+    errorFields,
+    onItemErrorChange: setErrorFields,
+    userProps,
+    frProps,
+    displaySchema,
+    displaySchemaString,
+    fieldRender,
+    fieldWrapperRender,
+    elementRender,
+    ...rootState,
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend} context={window}>
+      <ConfigProvider locale={zhCN} {...configProvider}>
+        <Ctx.Provider value={setState}>
+          <StoreCtx.Provider value={store}>{children}</StoreCtx.Provider>
+        </Ctx.Provider>
+      </ConfigProvider>
+    </DndProvider>
+  );
+}
+
+export default forwardRef(Provider);

package/src/components/Canvas/core/RenderChildren.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import FR from './index';
+
+const RenderChildren = ({ children = [], preview }) => {
+  return (
+    <>
+      {children.map((child, i) => {
+        const FRProps = {
+          id: child,
+          preview,
+        };
+        return <FR key={i.toString()} {...FRProps} />;
+      })}
+    </>
+  );
+};
+
+export default RenderChildren;

package/src/components/Canvas/core/RenderField.jsx

@@ -0,0 +1,129 @@
+import React, { Suspense } from 'react';
+import {
+  getParentProps,
+  isCssLength,
+  isLooselyNumber,
+  transformProps,
+} from '../../../utils';
+import { useStore } from '../../../utils/hooks';
+import { getWidgetName } from '../../../utils/mapping';
+import cn from 'classnames';
+
+const RenderField = ({
+  $id,
+  item,
+  labelClass,
+  contentClass,
+  isComplex,
+  children,
+}) => {
+  const { schema, data } = item;
+  const {
+    onItemChange,
+    flatten,
+    widgets,
+    mapping,
+    frProps = {},
+    fieldRender,
+  } = useStore();
+  const { labelWidth, displayType, showValidate } = frProps;
+  const { title, description, required } = schema;
+
+  let widgetName = getWidgetName(schema, mapping);
+  const customWidget = schema['widget'];
+  if (customWidget && widgets[customWidget]) {
+    widgetName = customWidget;
+  }
+  let Widget = widgets[widgetName];
+  // 如果不存在，比如有外部的自定义组件名称，使用默认展示组件
+  if (!Widget) {
+    const defaultSchema = { ...schema };
+    delete defaultSchema['widget'];
+    widgetName = getWidgetName(defaultSchema, mapping);
+    Widget = widgets[widgetName] || 'input';
+  }
+  // 真正有效的label宽度需要从现在所在item开始一直往上回溯（设计成了继承关系），找到的第一个有值的 labelWidth
+  const effectiveLabelWidth =
+    getParentProps('labelWidth', $id, flatten) || labelWidth;
+  const _labelWidth = isLooselyNumber(effectiveLabelWidth)
+    ? Number(effectiveLabelWidth)
+    : isCssLength(effectiveLabelWidth)
+    ? effectiveLabelWidth
+    : 110; // 默认是 110px 的长度
+
+  let labelStyle = { width: _labelWidth };
+  if (widgetName === 'checkbox') {
+    labelStyle = { flexGrow: 1 };
+  } else if (isComplex || displayType === 'column') {
+    labelStyle = { flexGrow: 1 };
+  }
+
+  const onChange = value => {
+    const newItem = { ...item };
+    if (item.schema.type === 'boolean' && item.schema.widget === 'checkbox') {
+      newItem.data = !value;
+    } else {
+      newItem.data = value;
+    }
+    onItemChange($id, newItem, 'data');
+  };
+
+  let contentStyle = {};
+  if (widgetName === 'checkbox' && displayType === 'row') {
+    contentStyle.marginLeft = effectiveLabelWidth;
+  }
+
+  // TODO: useMemo
+  // 改为直接使用form-render内部自带组件后不需要再包一层options
+  const usefulWidgetProps = transformProps({
+    value: data || schema.default,
+    checked: data,
+    disabled: schema.disabled,
+    readOnly: schema.readOnly,
+    format: schema.format,
+    onChange,
+    schema,
+    ...schema['props'],
+  });
+
+  const originNode = (
+    <>
+      {schema.title ? (
+        <div className={labelClass} style={labelStyle}>
+          <label
+            className={cn('fr-label-title', {
+              'no-colon': widgetName === 'checkbox' || displayType === 'column',
+            })} // checkbox不带冒号
+            title={title}
+          >
+            {required && <span className="fr-label-required"> *</span>}
+            <span
+              className={cn({
+                b: isComplex,
+                'flex-none': displayType === 'column',
+              })}
+            >
+              <span dangerouslySetInnerHTML={{ __html: title }} />
+            </span>
+            {description && (
+              <span className="fr-desc ml2">(&nbsp;{description}&nbsp;)</span>
+            )}
+            {displayType !== 'row' && showValidate && (
+              <span className="fr-validate">validation</span>
+            )}
+          </label>
+        </div>
+      ) : null}
+      <div className={contentClass} style={contentStyle}>
+        <Suspense fallback={<div></div>}>
+          <Widget {...usefulWidgetProps}>{children || null}</Widget>
+        </Suspense>
+      </div>
+    </>
+  );
+
+  if (!fieldRender) return originNode;
+  return fieldRender(schema, usefulWidgetProps, children, originNode);
+};
+
+export default RenderField;

package/src/components/Canvas/core/Wrapper.jsx

@@ -0,0 +1,298 @@
+import { CopyOutlined, DeleteOutlined, DragOutlined } from '@ant-design/icons';
+import React, { useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import {
+  copyItem,
+  dropItem,
+  getKeyFromUniqueId,
+  isObject,
+} from '../../../utils';
+import { useGlobal, useStore } from '../../../utils/hooks';
+import './Wrapper.less';
+
+function Wrapper({ $id, item, inside = false, children, style }) {
+  const [position, setPosition] = useState();
+  const {
+    flatten,
+    onFlattenChange,
+    selected,
+    userProps,
+    errorFields,
+    fieldWrapperRender,
+  } = useStore();
+  const {
+    controlButtons,
+    canDrag = true,
+    canDelete = true,
+    hideId,
+    getId,
+  } = userProps;
+  const setGlobal = useGlobal();
+  const { schema } = item;
+  const { type } = schema;
+  const boxRef = useRef(null);
+
+  const [{ isDragging }, dragRef, dragPreview] = useDrag({
+    type: 'box',
+    item: { $id: inside ? 0 + $id : $id },
+    canDrag: () => (typeof canDrag === 'function' ? canDrag(schema) : canDrag),
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [{ canDrop, isOver }, dropRef] = useDrop({
+    accept: 'box',
+    drop: async (item, monitor) => {
+      // 如果 children 已经作为了 drop target，不处理
+      const didDrop = monitor.didDrop();
+
+      if (didDrop || errorFields?.length) {
+        return;
+      }
+
+      const [newFlatten, newId] = dropItem({
+        dragId: item.$id, // 内部拖拽用dragId
+        dragItem: item.dragItem, // 从左边栏过来的，用dragItem
+        dropId: $id,
+        position,
+        flatten,
+      });
+      onFlattenChange(newFlatten);
+      setGlobal({ selected: newId });
+    },
+    hover: (item, monitor) => {
+      // 只检查被hover的最小元素
+      const didHover = monitor.isOver({ shallow: true });
+      if (didHover) {
+        // Determine rectangle on screen
+        const hoverBoundingRect =
+          boxRef.current && boxRef.current.getBoundingClientRect();
+        // Get vertical middle
+        const hoverMiddleY =
+          (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        // Determine mouse position
+        // const clientOffset = monitor.getClientOffset();
+        const dragOffset = monitor.getSourceClientOffset();
+        // Get pixels to the top
+        const hoverClientY = dragOffset.y - hoverBoundingRect.top;
+        // Only perform the move when the mouse has crossed half of the items height
+        // When dragging downwards, only move when the cursor is below 50%
+        // When dragging upwards, only move when the cursor is above 50%
+        // Dragging downwards
+        if (inside) {
+          setPosition('inside');
+        } else {
+          if (hoverClientY <= hoverMiddleY) {
+            setPosition('up');
+          }
+          // Dragging upwards
+          if (hoverClientY > hoverMiddleY) {
+            setPosition('down');
+          }
+        }
+      }
+    },
+    collect: monitor => ({
+      isOver: monitor.isOver({ shallow: true }),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+
+  const isActive = canDrop && isOver;
+  dragPreview(dropRef(boxRef));
+
+  const handleClick = async e => {
+    e.stopPropagation();
+    if (errorFields?.length) return;
+    const _id = inside ? '0' + $id : $id;
+    setGlobal({ selected: _id });
+  };
+
+  const deleteItem = async e => {
+    e.stopPropagation();
+    const newFlatten = { ...flatten };
+    let newSelect = '#';
+    // 计算删除后新被选中的元素：
+    // 1. 如果是第一个，选第二个
+    // 2. 如果不是第一，选它前一个
+    // 3. 如果同级元素没了，选parent
+    try {
+      const parent = newFlatten[$id].parent;
+      const siblings = newFlatten[parent].children;
+      const idx = siblings.indexOf($id);
+      if (idx > 0) {
+        newSelect = siblings[idx - 1];
+      } else {
+        newSelect = siblings[1] || parent;
+      }
+    } catch (error) {
+      console.error(error, 'catch');
+    }
+    let _canDelete = canDelete;
+    if (typeof canDelete === 'function') {
+      _canDelete = await Promise.resolve(canDelete(newFlatten[$id].schema));
+    }
+    if (!_canDelete) return;
+    delete newFlatten[$id];
+    onFlattenChange(newFlatten);
+    setGlobal({ selected: newSelect });
+  };
+
+  const handleItemCopy = e => {
+    e.stopPropagation();
+    if (errorFields?.length) return;
+    const [newFlatten, newId] = copyItem(flatten, $id, getId);
+    onFlattenChange(newFlatten);
+    setGlobal({ selected: newId });
+  };
+
+  // 一些computed
+  let isSelected = selected === $id && !inside;
+  if (selected && selected[0] === '0') {
+    isSelected = selected.substring(1) === $id && inside;
+  }
+
+  let overwriteStyle = {
+    backgroundColor: '#fff',
+    opacity: isDragging ? 0 : 1,
+  };
+  if (inside) {
+    overwriteStyle = {
+      ...overwriteStyle,
+      borderColor: '#777',
+      // marginLeft: 12,
+      padding: '12px 12px 0',
+      backgroundColor: '#f6f5f6',
+    };
+  } else if ($id === '#') {
+    overwriteStyle = {
+      ...overwriteStyle,
+      borderColor: '#777',
+      padding: 12,
+      height: '100%',
+      overflow: 'auto',
+      backgroundColor: '#f6f5f6',
+    };
+  } else if (type === 'object') {
+    overwriteStyle = { ...overwriteStyle, paddingTop: 12 };
+  }
+  if (isActive) {
+    if (inside) {
+      overwriteStyle = {
+        ...overwriteStyle,
+        boxShadow: '0 -3px 0 red',
+      };
+    } else if (position === 'up') {
+      overwriteStyle = {
+        ...overwriteStyle,
+        boxShadow: '0 -3px 0 red',
+      };
+    } else if (position === 'down') {
+      overwriteStyle = {
+        ...overwriteStyle,
+        boxShadow: '0 3px 0 red',
+      };
+    }
+  }
+  if (isSelected) {
+    overwriteStyle = {
+      ...overwriteStyle,
+      outline: '2px solid #409eff',
+      borderColor: '#fff',
+      zIndex: 1,
+    };
+  }
+  if (style && typeof style === 'object') {
+    overwriteStyle = {
+      ...overwriteStyle,
+      ...style,
+    };
+  }
+
+  if ($id === '#' && inside) return children;
+
+  // 展示的id
+  const shownId = getKeyFromUniqueId(schema.$id);
+
+  // 操作按钮
+  const _controlButtons = Array.isArray(controlButtons)
+    ? controlButtons
+    : [true, true];
+  const _showDefaultBtns = _controlButtons
+    .filter(item => ['boolean', 'function'].includes(typeof item))
+    .map(item => {
+      if (typeof item === 'boolean') return item;
+      return item(schema);
+    });
+  const _extraBtns = _controlButtons.filter(
+    item => isObject(item) && (item.text || item.children)
+  );
+  const { length: _numOfBtns } = _showDefaultBtns
+    .concat(_extraBtns)
+    .filter(Boolean);
+
+  const hasDuplicateId =
+    Object.keys(flatten)
+      .map(key => flatten[key].schema.$id)
+      .filter(key => key === schema.$id).length > 1;
+
+  const originNode = (
+    <div
+      ref={boxRef}
+      style={overwriteStyle}
+      className={`field-wrapper ${
+        $id !== '#' && isSelected ? 'selected-field-wrapper' : ''
+      } relative w-100`}
+      onClick={handleClick}
+    >
+      {children}
+
+      <div className="absolute top-0 right-1 f7">
+        {!inside && $id !== '#' && !hideId && (
+          <span className={hasDuplicateId ? 'red' : 'blue'}>{shownId}</span>
+        )}
+        {schema.hidden && (
+          <span style={{ color: '#666', marginLeft: '6px' }}>[hidden]</span>
+        )}
+      </div>
+
+      {!inside && $id !== '#' && isSelected && (
+        <div className="pointer-move" ref={dragRef}>
+          <DragOutlined />
+        </div>
+      )}
+
+      {!inside && $id !== '#' && isSelected && _numOfBtns > 0 && (
+        <div className="pointer-wrapper">
+          {_showDefaultBtns[0] !== false && (
+            <div className="pointer" onClick={deleteItem}>
+              <DeleteOutlined />
+            </div>
+          )}
+          {_showDefaultBtns[1] !== false && (
+            <div className="pointer" onClick={handleItemCopy}>
+              <CopyOutlined />
+            </div>
+          )}
+          {_extraBtns.map((item, idx) => {
+            return (
+              <div
+                key={idx.toString()}
+                className="pointer"
+                onClick={e => item.onClick && item.onClick(e, schema)}
+              >
+                {item.text || item.children}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+
+  if (!fieldWrapperRender) return originNode;
+  return fieldWrapperRender(schema, isSelected, children, originNode);
+}
+
+export default Wrapper;