yy-forms 1.0.0

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

@@ -0,0 +1,57 @@
+.field-wrapper {
+  padding: 20px 8px 0 8px;
+  border: 1px dashed #bbb;
+  margin: 0 0 8px 0;
+}
+
+// 统一编辑区滚动条样式
+.field-wrapper::-webkit-scrollbar {
+  width: 5px;
+  background-color: #0002;
+}
+
+.field-wrapper::-webkit-scrollbar-thumb {
+  background: #0004;
+  border-radius: 5px;
+}
+
+.dnd-container > .field-wrapper {
+  margin: 0;
+}
+
+.fr-generator-container .dnd-container > .field-wrapper > div.fr-field {
+  margin: 0;
+}
+
+.pointer-move {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  height: 24px;
+  width: 24px;
+  color: #fff;
+  background-color: #409eff;
+  cursor: move;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pointer-wrapper {
+  position: absolute;
+  z-index: 20;
+  bottom: -2px;
+  right: -2px;
+  height: 24px;
+  border-top-left-radius: 8px;
+  background: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.pointer {
+  color: #fff;
+  padding: 0 4px;
+}

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

@@ -0,0 +1,171 @@
+import FormRender, { useForm } from 'form-render';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { dataToFlatten, flattenToData } from '../../../utils';
+import { useStore } from '../../../utils/hooks';
+import RenderChildren from './RenderChildren';
+import RenderField from './RenderField';
+import Wrapper from './Wrapper';
+
+const PreviewFR = ({ schema, data }) => {
+  const form = useForm();
+  const { flatten, widgets, mapping, methods, userProps, onFlattenChange } = useStore();
+  const renderSchema = userProps.transformer.to(schema);
+
+  useEffect(() => {
+    form.setValues(data);
+  }, []);
+
+  return (
+    <FormRender
+      schema={renderSchema}
+      form={form}
+      widgets={widgets}
+      mapping={mapping}
+      methods={methods}
+      watch={{
+        '#': formData => {
+          onFlattenChange(dataToFlatten(flatten, formData), 'data');
+        },
+      }}
+    />
+  );
+};
+
+const FR = ({ id = '#', preview, displaySchema }) => {
+  const { flatten, frProps = {} } = useStore();
+  const { t } = useTranslation();
+  if (preview) {
+    const data = flattenToData(flatten);
+    return <PreviewFR schema={displaySchema} data={data} />;
+  }
+
+  const { column } = frProps;
+  const item = flatten[id];
+  if (!item) return null;
+
+  const { schema } = item;
+  const displayType = schema.displayType || frProps.displayType;
+  const isObj = schema.type === 'object';
+  const isList =
+    schema.type === 'array' && schema.enum === undefined && !!schema.items;
+  const isComplex = isObj || isList;
+  const width = schema['width'];
+  let containerClass = `fr-field w-100 ${isComplex ? 'fr-field-complex' : ''} ${
+    schema.className || ''
+  }`;
+  let labelClass = 'fr-label mb2';
+  let contentClass = 'fr-content';
+
+  let columnStyle = {};
+  if (!isComplex && width) {
+    columnStyle = {
+      width,
+      paddingRight: '12px',
+    };
+  } else if (!isComplex && column > 1) {
+    columnStyle = {
+      width: `calc(100% /${column})`,
+      paddingRight: '12px',
+    };
+  } else if ('flex' === schema?.theme) {
+    columnStyle.width = width;
+  }
+
+  // 如果传入自定义样式则覆盖使用，object 外层样式使用 schema.style，内层样式使用 schema.props.style
+  if ('object' === typeof schema?.style) {
+    columnStyle = {
+      ...columnStyle,
+      ...schema.style,
+    };
+  }
+
+  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');
+      }
+  }
+  // 横排时
+  const 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';
+  }
+
+  const fieldProps = {
+    $id: id,
+    item,
+    labelClass,
+    contentClass,
+    isComplex,
+  };
+
+  const childrenElement =
+    item.children && item.children.length > 0 ? (
+      <ul className={`flex flex-wrap pl0`} style={schema?.props?.style}>
+        <RenderChildren children={item.children} />
+      </ul>
+    ) : null;
+
+  const isEmpty = Object.keys(flatten).length < 2; // 只有一个根元素 # 的情况
+  if (isEmpty) {
+    return (
+      <Wrapper style={columnStyle} $id={id} item={item}>
+        <div
+          className={`${containerClass} h-100 f4 black-40 flex items-center justify-center`}
+        >
+          {t('点击/拖拽左侧栏的组件进行添加')}
+        </div>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper style={columnStyle} $id={id} item={item}>
+      <div className={containerClass}>
+        <RenderField {...fieldProps}>
+          {(isObj || isList) && (
+            <Wrapper $id={id} item={item} inside>
+              {childrenElement || <div className="h2" />}
+            </Wrapper>
+          )}
+        </RenderField>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default FR;

package/src/components/Canvas/index.jsx

@@ -0,0 +1,178 @@
+import { Button, Input, message, Modal } from 'antd';
+import copyTOClipboard from 'copy-text-to-clipboard';
+import { useTranslation } from 'react-i18next';
+import React, { useEffect } from 'react';
+import {
+  idToSchema,
+  isObject,
+  looseJsonParse,
+  schemaToState,
+} from '../../utils';
+import { useGlobal, useSet, useStore } from '../../utils/hooks';
+import FR from './core';
+
+const { TextArea } = Input;
+
+const Canvas = ({ onSelect }) => {
+  const { t } = useTranslation();
+  const setGlobal = useGlobal();
+  const {
+    userProps,
+    displaySchema,
+    displaySchemaString,
+    preview,
+    selected,
+    flatten,
+    onChange,
+    onSchemaChange,
+  } = useStore();
+  const [local, setState] = useSet({
+    showModal: false,
+    showModal2: false,
+    schemaForImport: '',
+  });
+
+  const { transformer, extraButtons = [] } = userProps;
+
+  const toggleModal = () => setState({ showModal: !local.showModal });
+  const toggleModal2 = () => setState({ showModal2: !local.showModal2 });
+
+  const onTextareaChange = e => {
+    setState({ schemaForImport: e.target.value });
+  };
+
+  const importSchema = () => {
+    try {
+      const value = transformer.from(looseJsonParse(local.schemaForImport));
+      setGlobal(() => ({
+        selected: undefined,
+        ...schemaToState(value),
+      }));
+      onChange(value.formData || {});
+      onSchemaChange(value);
+    } catch (error) {
+      console.error(error, 'catch');
+      message.info(t('格式不对哦，请重新尝试')); // 可以加个格式哪里不对的提示
+    }
+    toggleModal2();
+  };
+
+  const copySchema = () => {
+    copyTOClipboard(displaySchemaString);
+    message.info(t('复制成功'));
+    toggleModal();
+  };
+
+  const clearSchema = () => {
+    const schema = {
+      type: 'object',
+      properties: {},
+    };
+    setGlobal({
+      schema,
+      formData: {},
+      selected: undefined,
+    });
+    onChange({});
+    onSchemaChange(schema);
+  };
+
+  useEffect(() => {
+    if (!onSelect) return;
+    onSelect(idToSchema(flatten, selected));
+  }, [selected]);
+
+  const _extraButtons = Array.isArray(extraButtons) ? extraButtons : [];
+  const _showDefaultBtns = _extraButtons.filter(item => !isObject(item));
+  const _extraBtns = _extraButtons.filter(item => isObject(item));
+
+  const getDefaultBtnText = (text, defaultText, index) => {
+    if (typeof index === 'number') {
+      if (Array.isArray(text)) return text[index];
+      return defaultText[index];
+    }
+    if (typeof text === 'string') return text;
+    return defaultText;
+  };
+
+  return (
+    <div className="mid-layout pr2">
+      <div className="mv2 mh1">
+        {_showDefaultBtns[0] !== false && (
+          <Button
+            className="mr2 mb1"
+            onClick={() => {
+              setGlobal({ selected: '#', preview: !preview });
+            }}
+          >
+            {getDefaultBtnText(
+              _showDefaultBtns[0],
+              [t('开始编辑'), t('最终展示')],
+              Number(!preview)
+            )}
+          </Button>
+        )}
+        {_showDefaultBtns[1] !== false && (
+          <Button className="mr2" onClick={clearSchema}>
+            {getDefaultBtnText(_showDefaultBtns[1], t('清空'))}
+          </Button>
+        )}
+        {_showDefaultBtns[2] !== false && (
+          <Button className="mr2" onClick={toggleModal2}>
+            {getDefaultBtnText(_showDefaultBtns[2], t('导入'))}
+          </Button>
+        )}
+        {_showDefaultBtns[3] !== false && (
+          <Button type="primary" className="mr2" onClick={toggleModal}>
+            {getDefaultBtnText(_showDefaultBtns[3], t('导出schema'))}
+          </Button>
+        )}
+        {_extraBtns.map((item, idx) => {
+          return (
+            <Button key={idx.toString()} className="mr2" {...item}>
+              {item.text || item.children}
+            </Button>
+          );
+        })}
+      </div>
+      <div className={`dnd-container ${preview ? 'preview' : 'edit'}`}>
+        <div style={{ height: preview ? 33 : 0 }}></div>
+        <FR preview={preview} displaySchema={displaySchema} />
+      </div>
+      <Modal
+        open={local.showModal}
+        onOk={copySchema}
+        onCancel={toggleModal}
+        okText={t('复制')}
+        cancelText={t('取消')}
+      >
+        <div className="mt3">
+          <TextArea
+            style={{ fontSize: 12 }}
+            value={displaySchemaString}
+            autoSize={{ minRows: 10, maxRows: 30 }}
+          />
+        </div>
+      </Modal>
+      <Modal
+        open={local.showModal2}
+        okText={t('导入')}
+        cancelText={t('取消')}
+        onOk={importSchema}
+        onCancel={toggleModal2}
+      >
+        <div className="mt3">
+          <TextArea
+            style={{ fontSize: 12 }}
+            value={local.schemaForImport}
+            placeholder={t('贴入需要导入的schema，模样可点击导出schema参考')}
+            onChange={onTextareaChange}
+            autoSize={{ minRows: 10, maxRows: 30 }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Canvas;

package/src/components/Settings/GlobalSettings.jsx

@@ -0,0 +1,48 @@
+import FormRender, { useForm } from 'form-render';
+import React, { useEffect, useState } from 'react';
+import { defaultGlobalSettings } from '../../settings';
+import { useGlobal, useStore } from '../../utils/hooks';
+
+export default function GlobalSettings({ widgets }) {
+  const form = useForm();
+  const [innerUpdate, setInnerUpdate] = useState(false);
+  const {
+    widgets: globalWidgets,
+    frProps,
+    userProps = {},
+    mapping,
+  } = useStore();
+  const setGlobal = useGlobal();
+  const globalSettings = userProps.globalSettings || defaultGlobalSettings;
+
+  const onDataChange = value => {
+    setInnerUpdate(!!Object.keys(value).length);
+    setGlobal({ frProps: value });
+  };
+
+  useEffect(() => {
+    if (innerUpdate) {
+      setInnerUpdate(false);
+    } else {
+      form.setValues(frProps);
+    }
+  }, [frProps]);
+
+  useEffect(() => {
+    setGlobal({ settingsForm: form });
+  }, []);
+
+  return (
+    <div style={{ paddingRight: 24 }}>
+      <FormRender
+        form={form}
+        schema={globalSettings}
+        watch={{
+          '#': v => onDataChange(v),
+        }}
+        widgets={{ ...globalWidgets, ...widgets }}
+        mapping={mapping}
+      />
+    </div>
+  );
+}

package/src/components/Settings/ItemSettings.jsx

@@ -0,0 +1,143 @@
+import FormRender, { useForm } from 'form-render';
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  advancedElements,
+  baseCommonSettings,
+  defaultCommonSettings,
+  defaultSettings,
+  elements,
+  layouts,
+} from '../../settings';
+import { isObject, mergeInOrder } from '../../utils';
+import { useGlobal, useStore } from '../../utils/hooks';
+import { getWidgetName } from '../../utils/mapping';
+import * as frgWidgets from '../../widgets';
+
+export default function ItemSettings({ widgets }) {
+  const setGlobal = useGlobal();
+  const form = useForm();
+  const isReady = useRef(false);
+  const {
+    selected,
+    flatten,
+    onItemChange,
+    onItemErrorChange,
+    userProps = {},
+    widgets: globalWidgets,
+    mapping: globalMapping,
+  } = useStore();
+
+  const { settings, commonSettings, hideId, validation, transformer } =
+    userProps;
+  const [settingSchema, setSettingSchema] = useState({});
+
+  const _widgets = {
+    ...globalWidgets,
+    ...frgWidgets,
+  };
+
+  const getWidgetList = (settings, commonSettings) => {
+    return settings.reduce((widgetList, setting) => {
+      if (!Array.isArray(setting.widgets)) return widgetList;
+      const basicWidgets = setting.widgets.map(item => {
+        const baseItemSettings = {};
+        if (item.schema.type === 'array' && item.schema.items) {
+          baseItemSettings.items = {
+            type: 'object',
+            hidden: '{{true}}',
+          };
+        }
+        return {
+          ...item,
+          widget:
+            item.widget ||
+            item.schema.widget ||
+            getWidgetName(item.schema, globalMapping),
+          setting: mergeInOrder(
+            baseCommonSettings,
+            commonSettings,
+            baseItemSettings,
+            item.setting
+          ),
+        };
+      });
+      return [...widgetList, ...basicWidgets];
+    }, []);
+  };
+
+  const onDataChange = (value = {}) => {
+    try {
+      if (selected === '#' || !isReady.current || !value.$id) return;
+      const item = {
+        ...flatten[selected],
+        schema: transformer.fromSetting(value),
+      };
+      onItemChange(selected, item, 'schema');
+    } catch (error) {
+      console.error(error, 'catch');
+    }
+  };
+
+  useEffect(() => {
+    // setting 该显示什么的计算，要把选中组件的 schema 和它对应的 widgets 的整体 schema 进行拼接
+    try {
+      isReady.current = false;
+      const item = flatten[selected];
+      if (!item || selected === '#') return;
+      // 算 widgetList
+      const _settings = Array.isArray(settings)
+        ? [
+            ...settings,
+            { widgets: [...elements, ...advancedElements, ...layouts] },
+          ] // TODO: 不是最优解
+        : defaultSettings;
+      const _commonSettings = isObject(commonSettings)
+        ? commonSettings
+        : defaultCommonSettings;
+      const widgetList = getWidgetList(_settings, _commonSettings);
+      const widgetName = getWidgetName(item.schema, globalMapping);
+      const element = widgetList.find(e => e.widget === widgetName) || {}; // 有可能会没有找到
+      const properties = { ...element.setting };
+
+      if (hideId) delete properties.$id;
+
+      setTimeout(() => {
+        setSettingSchema({
+          type: 'object',
+          displayType: 'column',
+          properties,
+        });
+        const 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]);
+
+  useEffect(() => {
+    validation && onItemErrorChange(form?.errorFields);
+  }, [validation, form?.errorFields]);
+
+  useEffect(() => {
+    setGlobal({ settingsForm: form });
+  }, []);
+
+  return (
+    <div style={{ paddingRight: 24 }}>
+      <FormRender
+        form={form}
+        schema={settingSchema}
+        widgets={{ ..._widgets, ...widgets }}
+        mapping={globalMapping}
+        watch={{
+          '#': v => setTimeout(() => onDataChange(v), 0),
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Settings/index.jsx

@@ -0,0 +1,75 @@
+import { RightOutlined } from '@ant-design/icons';
+import { Tabs } from 'antd';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSet, useStore } from '../../utils/hooks';
+import GlobalSettings from './GlobalSettings';
+import './index.less';
+import ItemSettings from './ItemSettings';
+
+const { TabPane } = Tabs;
+
+export default function Settings({ widgets }) {
+  const { t } = useTranslation();
+  const [state, setState] = useSet({
+    tabsKey: 'globalSettings',
+    showRight: true,
+    showItemSettings: false,
+  });
+  const { selected, userProps = {} } = useStore();
+  const { tabsKey, showRight, showItemSettings } = state;
+
+  const toggleRight = () => setState({ showRight: !showRight });
+
+  const ToggleIcon = () => (
+    <div
+      className="absolute top-0 left-0 pointer"
+      style={{ height: 30, width: 30, padding: '8px 0 0 8px' }}
+      onClick={toggleRight}
+    >
+      <RightOutlined style={{color: '#666'}} />
+    </div>
+  );
+
+  const HideRightArrow = () => (
+    <div
+      className="absolute right-0 top-0 h2 flex-center"
+      style={{ width: 40, transform: 'rotate(180deg)' }}
+    >
+      <ToggleIcon />
+    </div>
+  );
+
+  // 如果没有选中任何item，或者是选中了根节点，object、list的内部，显示placeholder
+  useEffect(() => {
+    if ((selected && selected[0] === '0') || selected === '#' || !selected) {
+      setState({ tabsKey: 'globalSettings', showItemSettings: false });
+    } else {
+      setState({ tabsKey: 'itemSettings', showItemSettings: true });
+    }
+  }, [selected]);
+
+  const globalSettingHide =
+    userProps.globalSettings === null ||
+    (userProps.globalSettings && !Object.keys(userProps.globalSettings).length);
+
+  return showRight ? (
+    <div className="right-layout relative pl2">
+      <ToggleIcon />
+      <Tabs activeKey={tabsKey} onChange={key => setState({ tabsKey: key })}>
+        {showItemSettings && (
+          <TabPane tab={t("组件配置")} key="itemSettings">
+            <ItemSettings widgets={widgets} />
+          </TabPane>
+        )}
+        {!globalSettingHide && (
+          <TabPane tab={t("表单配置")} key="globalSettings">
+            <GlobalSettings widgets={widgets} />
+          </TabPane>
+        )}
+      </Tabs>
+    </div>
+  ) : (
+    <HideRightArrow />
+  );
+}

package/src/components/Settings/index.less

@@ -0,0 +1,25 @@
+.fr-generator-container .right-layout {
+  flex-shrink: 0;
+  width: 8rem;
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// 统一左右编辑区滚动条样式
+.fr-generator-container .right-layout ::-webkit-scrollbar {
+  width: 5px;
+  background-color: #0002;
+}
+
+.fr-generator-container .right-layout ::-webkit-scrollbar-thumb {
+  background: #0004;
+  border-radius: 5px;
+}
+
+@media screen and (min-width: 60em) {
+  .fr-generator-container .right-layout {
+    width: 16rem;
+  }
+}