yy-forms 1.0.0

package/src/components/Sidebar/Element.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useDrag } from 'react-dnd';
+import { useTranslation } from 'react-i18next';
+import { addItem } from '../../utils';
+import { useGlobal, useStore } from '../../utils/hooks';
+import './Element.less';
+
+const Element = ({ text, name, schema, icon, fixedName }) => {
+  const setGlobal = useGlobal();
+  const {
+    selected,
+    flatten,
+    errorFields,
+    userProps,
+    onFlattenChange,
+    elementRender,
+  } = useStore();
+  const { getId } = userProps;
+  const [{ isDragging }, dragRef] = useDrag({
+    type: 'box',
+    item: {
+      dragItem: {
+        parent: '#',
+        schema,
+        children: [],
+      },
+      $id: fixedName ? `#/${name}` : `#/${getId(name)}`,
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const handleElementClick = async () => {
+    if (errorFields?.length) return;
+    if (selected && !flatten[selected]) {
+      setGlobal({ selected: '#' });
+      return;
+    }
+    const { newId, newFlatten } = addItem({
+      selected,
+      name,
+      schema,
+      flatten,
+      fixedName,
+      getId,
+    });
+    onFlattenChange(newFlatten);
+    setGlobal({ selected: newId });
+  };
+
+  const widgetProps = {
+    text,
+    icon,
+    onClick: handleElementClick,
+  };
+
+  const originNode = <WidgetUI {...widgetProps} />;
+
+  return (
+    <div ref={dragRef}>
+      {elementRender
+        ? elementRender(schema, widgetProps, originNode)
+        : originNode}
+    </div>
+  );
+};
+
+export default Element;
+
+// 目前没有用icon，但是可以补上
+const WidgetUI = ({ onClick, text, icon }) => {
+  const { t } = useTranslation(["components"]);
+  return (
+    <li className="left-item" onClick={onClick}>
+      {icon}
+      {t(text)}
+    </li>
+  );
+};

package/src/components/Sidebar/Element.less

@@ -0,0 +1,18 @@
+.left-item {
+  width: 7.0rem;
+  height: 2.2rem;
+  display: flex;
+  margin: 4px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  background-color: #f5f7fa;
+}
+
+.left-item:hover {
+  border: 1px dashed #ddd;
+  color: #409eff;
+  border: 1px dashed #409eff;
+}

package/src/components/Sidebar/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { defaultSettings } from '../../settings';
+import { useStore } from '../../utils/hooks';
+import Element from './Element';
+import './index.less';
+
+const Sidebar = props => {
+  const { t } = useTranslation();
+  const { userProps = {} } = useStore();
+  const { settings } = userProps;
+  const _settings = Array.isArray(settings) ? settings : defaultSettings;
+
+  return (
+    <div className="left-layout w5-l w4">
+      {Array.isArray(_settings) ? (
+        _settings.map((item, idx) => {
+          if (item && item.show === false) {
+            return null;
+          }
+          return (
+            <div key={idx}>
+              <p className="f6 b">{t(item.title, {ns: 'components'})}</p>
+              <ul className="pl0">
+                {Array.isArray(item.widgets) ? (
+                  item.widgets
+                    .filter(item => item.show !== false)
+                    .map((widget, idx) => {
+                      return (
+                        <Element key={idx.toString()} {...props} {...widget} />
+                      );
+                    })
+                ) : (
+                  <div>{t('此处配置有误')}</div>
+                )}
+              </ul>
+            </div>
+          );
+        })
+      ) : (
+        <div>{t('配置错误：Setting不是数组')}</div>
+      )}
+    </div>
+  );
+};
+
+export default Sidebar;

package/src/components/Sidebar/index.less

@@ -0,0 +1,23 @@
+.left-layout {
+  flex-shrink: 0;
+  padding: 16px 0 0 8px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+// 修复 Windows 滚动条太宽导致两列布局变成一列
+.left-layout::-webkit-scrollbar {
+  width: 5px;
+  background-color: #0002;
+}
+
+.left-layout::-webkit-scrollbar-thumb {
+  background: #0004;
+  border-radius: 5px;
+}
+
+.left-layout ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}

package/src/i18next/index.ts

@@ -0,0 +1,14 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import resources from './locales/resources';
+
+i18n.use(initReactI18next).init({
+  debug: false,
+  resources: resources,
+  lng: 'cn',
+  interpolation: {
+    escapeValue: false, // react already safes from xss
+  },
+});
+
+export default i18n;

package/src/i18next/locales/enUS.json

@@ -0,0 +1,60 @@
+{
+  "translation": {
+    "导入": "Import",
+    "清除": "Clear",
+    "清空": "Clear",
+    "导出schema": "Export Schema",
+    "最终展示": "Preview",
+    "开始编辑": "Edit",
+    "复制": "Copy",
+    "取消": "Cancel",
+    "复制成功": "Copy Success",
+    "贴入需要导入的schema，模样可点击导出schema参考": "Paste the schema. Click export schema reference",
+    "格式不对哦，请重新尝试": "Wrong format, please try again",
+    "点击/拖拽左侧栏的组件进行添加": "Click / Drag the component in the left column to add",
+    "组件配置": "Component Setting",
+    "表单配置": "Form Setting",
+    "此处配置有误": "Incorrect configuration here",
+    "配置错误：Setting不是数组": "Configuration error: setting is not an array"
+  },
+  "components": {
+    "基础组件": "Basic",
+    "高级组件": "Advanced",
+    "布局组件": "Layout",
+    "模板": "Template",
+
+    "输入框": "Input",
+    "大输入框": "Textarea",
+    "日期选择": "Date Picker",
+    "数字输入框": "NumberInput",
+    "是否选择": "Checkbox",
+    "是否switch": "Switch",
+    "下拉单选": "SelectSingle",
+    "点击单选": "Radio",
+    "下拉多选": "SelectMultiple",
+    "点击多选": "CheckboxGroup",
+    "HTML": "HTML",
+
+    "日期范围": "DateRange",
+    "数字（slider）": "Slider",
+    "图片展示": "Image",
+    "颜色选择": "ColorPicker",
+
+    "对象": "Section",
+    "常规列表": "List",
+    "简单列表": "SimpleList",
+    "表格列表": "TableList",
+    "复杂表格列表": "DrawerList",
+    "整体布局":"Grid Columns",
+    "一行一列": "Single Column",
+    "一行二列": "Two Columns",
+    "一行三列": "Three Columns",
+    "默认一行一列":"Single Column by default",
+    "标签宽度":"Form Label Width",
+    "标签展示模式": "Label Alignment",
+    "同行": "Horizontal",
+    "单独一行": "Vertical",
+
+    "复杂结构样例": "Example"
+  }
+}

package/src/i18next/locales/resources.ts

@@ -0,0 +1,7 @@
+import enUS from './enUS.json';
+import zhCN from './zhCN.json';
+
+export default {
+  en: enUS,
+  cn: zhCN
+}

package/src/i18next/locales/zhCN.json

@@ -0,0 +1,3 @@
+{
+  "translation": {}
+}

package/src/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/src/index.js

@@ -0,0 +1,45 @@
+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';
+
+const Generator = forwardRef(
+  (
+    { fixedName, settingsWidgets, onCanvasSelect, locale = 'cn', ...props },
+    ref
+  ) => {
+    const { i18n } = useTranslation();
+    useEffect(() => {
+      i18n.changeLanguage(locale);
+    }, [locale]);
+
+    return (
+      <Provider ref={ref} {...props}>
+        <div className="fr-generator-container">
+          <Sidebar fixedName={fixedName} />
+          <Canvas onSelect={onCanvasSelect} />
+          <Settings widgets={settingsWidgets} />
+        </div>
+      </Provider>
+    );
+  }
+);
+
+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';