form-driver 0.3.13 → 0.4.0

package/src/ui/widget/SortDrag.tsx

@@ -0,0 +1,145 @@
+import React, { memo, useRef, useEffect, useState, ReactNode } from "react";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { Button } from "antd";
+import { HolderOutlined } from "@ant-design/icons";
+import clsx from "clsx";
+
+import "./SortDrag.less";
+
+type SortDragProps = {
+  changeOriginDataSource: (value: any) => void;
+  sortList: Array<{
+    cpn: ReactNode;
+    id: string;
+    isChecked: boolean;
+    label: string;
+    checkedIndex: number;
+  }>;
+};
+
+const SortDrag: React.FC<SortDragProps> = memo((props) => {
+  const { sortList, changeOriginDataSource } = props;
+  const [items, setItems] = useState<SortDragProps["sortList"]>([]);
+
+  // 记录当前拖拽的 item id
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  // 记录当前 hover 的 Id
+  const [droppingId, setDroppingId] = useState<string | null>(null);
+  // refs 用于绑定每个 item 的 DOM
+  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  // 修改：为每个 item 单独管理 dragHandle ref
+  const dragHandleRefs = useRef<Record<string, HTMLSpanElement | null>>({});
+
+  // 注册拖拽和 drop target
+  useEffect(() => {
+    // 清理函数集合
+    const cleanups: (() => void)[] = [];
+    items.forEach((item, idx) => {
+      const el = itemRefs.current[item.id];
+      if (!el) return;
+      // 注册为 draggable
+      cleanups.push(
+        draggable({
+          element: el,
+          dragHandle: dragHandleRefs.current[item.id],
+          canDrag: () => item.isChecked,
+          getInitialData: () => ({
+            id: item.id,
+            index: idx,
+            label: item.label,
+          }),
+          onDragStart: () => setDraggingId(item.id),
+          onDrop: () => setDraggingId(null),
+        })
+      );
+      // 注册为 drop target
+      cleanups.push(
+        dropTargetForElements({
+          element: el,
+          canDrop: () => item.isChecked,
+          onDragEnter: (args) => {
+            const fromIdx = items.findIndex(
+              (i) => i.id === args.source.data.id
+            );
+            if (fromIdx === idx) return;
+            console.log("当前hover元素", item.id);
+            console.log("当前拖拽元素", args);
+            setDroppingId(item.id);
+          },
+          onDragLeave: () => {
+            setDroppingId(null);
+          },
+          onDrop: ({ source }) => {
+            // console.log("当前拖拽元素", source);
+            if (!source) return;
+            const fromIdx = items.findIndex((i) => i.id === source.data.id);
+            const toIdx = idx;
+            if (fromIdx === -1 || fromIdx === toIdx) return;
+            const newItems = [...items];
+            const [moved] = newItems.splice(fromIdx, 1);
+            newItems.splice(toIdx, 0, moved);
+            console.log("排序之后的数据", newItems);
+            setItems(newItems);
+
+            changeOriginDataSource(newItems);
+            setDroppingId(null);
+          },
+        })
+      );
+    });
+    // 监听全局拖拽，拖拽结束时清理 draggingId
+    const monitorCleanup = monitorForElements({
+      onDrop: () => setDraggingId(null),
+    });
+    cleanups.push(monitorCleanup);
+    return () => {
+      cleanups.forEach((fn) => fn());
+    };
+  }, [items]);
+
+  useEffect(() => {
+    const checkedItems = sortList
+      .filter((item) => item.isChecked)
+      .sort((a, b) => a.checkedIndex - b.checkedIndex);
+    const unCheckedItems = sortList.filter((item) => !item.isChecked);
+    console.log("DRAG: 排序之后实际展示的数据", {
+      sortList,
+      checkedItems,
+      unCheckedItems,
+    });
+    setItems([...checkedItems, ...unCheckedItems]);
+  }, [sortList]);
+
+  return (
+    <div className="sortDrag">
+      {items.map((item, index) => {
+        const itemClass = clsx("dragItem", {
+          dragging: draggingId === item.id,
+          dropping: droppingId === item.id,
+        });
+
+        return (
+          <div
+            className={itemClass}
+            ref={(el) => (itemRefs.current[item.id] = el)}
+            key={item.id}
+          >
+            <div className="dragBody">{item.cpn}</div>
+            <div>
+              {item.isChecked ? (
+                <HolderOutlined
+                  ref={(el) => (dragHandleRefs.current[item.id] = el)}
+                  style={{ cursor: "grab", marginLeft: "8px" }}
+                />
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+export default SortDrag;

package/types/framework/Assembly.d.ts

@@ -1,8 +1,8 @@
 import { ClassType } from "react";
 import { MFieldSchemaAnonymity, MProp, MValidationFail } from './Schema';
 import { MType, PluginType } from "../types/MType";
-export declare type MORPH = "readable" | "editor";
-export declare type VIEWER = ClassType<MProp, any, any>;
+export type MORPH = "readable" | "editor";
+export type VIEWER = ClassType<MProp, any, any>;
 /** 统一的视觉样式 */
 export interface MTheme {
     /** 数据未知时展示 */

package/types/framework/M3.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { M3Prop } from './MViewer';
+import React from "react";
+import { M3Prop } from "./MViewer";
 declare const M3: (props: React.PropsWithChildren<M3Prop & {
     debug?: boolean;
 }>) => JSX.Element;

package/types/framework/MUtil.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import moment from "moment";
-import { M3UISpec, MEnumField, MFieldSchema, MFieldSchemaAnonymity, MValidationFail } from './Schema';
-import { JSONSchema6 } from 'json-schema';
-export declare type HideMap = {
+import { M3UISpec, MEnumField, MFieldSchema, MFieldSchemaAnonymity, MValidationFail } from "./Schema";
+import { JSONSchema6 } from "json-schema";
+export type HideMap = {
     [fieldName: string]: boolean;
 };
 export declare let MUtil: {
@@ -79,7 +79,7 @@ export declare let MUtil: {
      * 计算 showIf 的值
      * @returns Boolean
      * @param database
-      * @param objectFields
+     * @param objectFields
      */
     isShow: (database: any, objectFields: MFieldSchema[], showIfExpr: string) => any;
     scoreOf: (f: MFieldSchema, database: any) => number;
@@ -174,7 +174,7 @@ export declare let MUtil: {
     isEquals: (v1: any, v2: any, tolerate: boolean) => boolean;
 };
 /** 压缩数组，如果只有一个元素时，它是数据本身，多于一个元素时才是数组 */
-export declare type CompactArrayType<T> = T | T[];
+export type CompactArrayType<T> = T | T[];
 export declare let CompactArray: {
     indexOf: <T>(ca?: CompactArrayType<T>, d?: T) => -1 | number;
 };

package/types/framework/MViewer.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { AFTER_CHANGE_CALLBACK, CHANGE_SCHEMA_CALLBACK, MFieldSchema, M3UISpec } from "../framework/Schema";
 import "./MViewer.less";
-import { MORPH } from './Assembly';
+import { MORPH } from "./Assembly";
 import { PersistantConf } from "./Persistant";
 export interface MViewerProp {
     schema: MFieldSchema;

package/types/framework/Schema.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MORPH, VIEWER, Assembly } from './Assembly';
-export declare type ValueConst = string | boolean | number;
+import { MORPH, VIEWER, Assembly } from "./Assembly";
+export type ValueConst = string | boolean | number;
 export interface MEnumField {
     /** 选项文案 */
     label?: string;
@@ -12,24 +12,26 @@ export interface MEnumField {
     value: ValueConst;
     exclusive?: string;
     score?: number;
+    remark?: string;
     children?: MEnumField[];
 }
 /** 匿名的MFieldSchema，没有name字段 */
-export declare type MFieldSchemaAnonymity = Omit<MFieldSchema, "name">;
+export type MFieldSchemaAnonymity = Omit<MFieldSchema, "name">;
 /** JS表达式 */
-export declare type JSEXPR = string;
+export type JSEXPR = string;
 /** 如何适配屏幕 */
-export declare type SCREEN_ADAPTION = 
+export type SCREEN_ADAPTION = 
 /** 强制使用适应大屏的控件 */
-"big" | 
+"big"
 /** 强制使用适应小屏的控件 */
-"phone";
+ | "phone";
 /** M3 单元的 schema */
 export interface MFieldSchema {
     type?: string;
     name: string;
     label?: string;
     labelTip?: string;
+    value?: number;
     /** 编辑器，editor:<viewer名字> 是 viewerFor: {morph:"editor", name:<viewer名字>} 的简写 */
     editor?: string | VIEWER;
     /** 查看器，readable:<viewer名字> 是 viewerFor: {morph:"readable", name:<viewer名字>} 的简写 */
@@ -138,7 +140,7 @@ export interface MFieldSchema {
         showTime?: boolean;
     };
     /** 数据格式 */
-    dataFormat?: "x" | "YYYYMMDD" | /** 用于时间日期类型字段的数据格式，参考moment，例如x表示数据是时间戳，YYYYMMDD表示数据是形如19990130的字符串 */ string;
+    dataFormat?: "x" | "YYYYMMDD" /** 用于时间日期类型字段的数据格式，参考moment，例如x表示数据是时间戳，YYYYMMDD表示数据是形如19990130的字符串 */ | string;
     /**
      * 例如：
      * 4.5 与去年同期(2019 年 1 月初-6 月底)相比，您的收入
@@ -249,8 +251,8 @@ export interface MFieldSchema {
  * final=false表示回调是因为用户操作导致的，不处理的话也不会导致最终数据不一致，因为后续会有final=true的回调。
  * 对于暂存表单等比较重的操作，应该仅在final=true时触发，以减少调用次数
  */
-export declare type AFTER_CHANGE_CALLBACK = (path: string, v: any, final: boolean) => void;
-export declare type CHANGE_SCHEMA_CALLBACK = (v: any) => void;
+export type AFTER_CHANGE_CALLBACK = (path: string, v: any, final: boolean) => void;
+export type CHANGE_SCHEMA_CALLBACK = (v: any) => void;
 export interface MProp {
     /** database的数据描述 */
     schema: MFieldSchemaAnonymity;
@@ -315,4 +317,4 @@ export interface MValidationFail {
  * pass: 直接通过校验，不再经过下一个校验器了（例如 required=false时，数值是nil, 可以直接pass，否则之后的校验器都要处理nil）
  * undefined: 表示让下一个校验器再校验
  */
-export declare type MValidationResult = MValidationFail | "pass" | undefined;
+export type MValidationResult = MValidationFail | "pass" | undefined;

package/types/framework/Validator.d.ts

@@ -1,6 +1,6 @@
 import { Assembly } from './Assembly';
 import { MFieldSchemaAnonymity, MValidationResult } from './Schema';
-export declare type VALIDATOR = (a: Assembly, schema: MFieldSchemaAnonymity, value: any, path: string) => MValidationResult;
+export type VALIDATOR = (a: Assembly, schema: MFieldSchemaAnonymity, value: any, path: string) => MValidationResult;
 /**
  * 非空校验，数据不能是null/undefined/""/NaN/[]
  * 要在其他条件之前，以便required=false时短路掉nil的数据，否则后面的校验全都得处理nil

package/types/types/MDecorationType.d.ts

@@ -1,7 +1,7 @@
 /** HTML装饰物，并不修改数据 */
 export declare const MDecorationType: {
     validators: any[];
-    createDefaultValue: (assembly: import("..").Assembly, s: Pick<import("..").MFieldSchema, "type" | "label" | "labelTip" | "editor" | "readable" | "option" | "enumFields" | "setFields" | "openOption" | "enumOpen" | "setOpen" | "defaultValue" | "props" | "stringLines" | "min" | "max" | "required" | "showIf" | "column" | "toReadable" | "tolerate" | "screenAdaption" | "postfix" | "popoverDesc" | "requiredMessage" | "placeholder" | "objectFields" | "objectLabelFields" | "stringAllowSpaceOnly" | "matrix" | "arrayMember" | "copyFields" | "autoValue" | "arrayAddLabel" | "experience" | "dateRange" | "dataFormat" | "intDiff" | "css" | "removeConfirm" | "mcs" | "uispec" | "hpOrg" | "ossFile" | "decoration" | "remote" | "a" | "style" | "layoutHint" | "options" | "bizData">) => any;
-    standardValue: (assembly: import("..").Assembly, s: Pick<import("..").MFieldSchema, "type" | "label" | "labelTip" | "editor" | "readable" | "option" | "enumFields" | "setFields" | "openOption" | "enumOpen" | "setOpen" | "defaultValue" | "props" | "stringLines" | "min" | "max" | "required" | "showIf" | "column" | "toReadable" | "tolerate" | "screenAdaption" | "postfix" | "popoverDesc" | "requiredMessage" | "placeholder" | "objectFields" | "objectLabelFields" | "stringAllowSpaceOnly" | "matrix" | "arrayMember" | "copyFields" | "autoValue" | "arrayAddLabel" | "experience" | "dateRange" | "dataFormat" | "intDiff" | "css" | "removeConfirm" | "mcs" | "uispec" | "hpOrg" | "ossFile" | "decoration" | "remote" | "a" | "style" | "layoutHint" | "options" | "bizData">, v: any, strict: boolean) => any;
-    toReadable: (assembly: import("..").Assembly, s: Pick<import("..").MFieldSchema, "type" | "label" | "labelTip" | "editor" | "readable" | "option" | "enumFields" | "setFields" | "openOption" | "enumOpen" | "setOpen" | "defaultValue" | "props" | "stringLines" | "min" | "max" | "required" | "showIf" | "column" | "toReadable" | "tolerate" | "screenAdaption" | "postfix" | "popoverDesc" | "requiredMessage" | "placeholder" | "objectFields" | "objectLabelFields" | "stringAllowSpaceOnly" | "matrix" | "arrayMember" | "copyFields" | "autoValue" | "arrayAddLabel" | "experience" | "dateRange" | "dataFormat" | "intDiff" | "css" | "removeConfirm" | "mcs" | "uispec" | "hpOrg" | "ossFile" | "decoration" | "remote" | "a" | "style" | "layoutHint" | "options" | "bizData">, vs: any) => string;
+    createDefaultValue: (assembly: import("..").Assembly, s: import("..").MFieldSchemaAnonymity) => any;
+    standardValue: (assembly: import("..").Assembly, s: import("..").MFieldSchemaAnonymity, v: any, strict: boolean) => any;
+    toReadable: (assembly: import("..").Assembly, s: import("..").MFieldSchemaAnonymity, vs: any) => string;
 };

package/types/types/MSetType.d.ts

@@ -1,7 +1,7 @@
 import { MFieldSchemaAnonymity } from "../framework/Schema";
 import { MType } from "./MType";
 export declare const MSetType: MType & {
-    change: (isAdd: boolean, newValue: any, value: any[], s: MFieldSchemaAnonymity) => any[];
+    change: (isAdd: boolean, newValue: any, value: any[], s: MFieldSchemaAnonymity, isNeedSkipHandleOpenValue?: boolean) => any[];
     openValueIndex: (s: MFieldSchemaAnonymity, vs: any[]) => number;
     clearOpenValue: (s: MFieldSchemaAnonymity, vs: any[], keepOne: boolean) => any[];
 };

package/types/ui/editor/basic/ACheckBox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { BaseViewer } from '../../BaseViewer';
-import { MEnumField, MProp, ValueConst } from '../../../framework/Schema';
+import { BaseViewer } from "../../BaseViewer";
+import { MEnumField, MProp, ValueConst } from "../../../framework/Schema";
 /**
  * 多选
  * 示例：{label:"1.13 除爱人/对象之外，目前和您一起生活的家庭成员包括(多选):",name:"familyAccompany",type:"set", option: "父亲 母亲 孩子 爱人/对象的父亲 爱人/对象的母亲 兄弟姐妹"},

package/types/ui/editor/basic/ARangePicker.d.ts

@@ -3,8 +3,12 @@ import moment from "moment";
 import { RangePickerProps } from "antd/lib/date-picker";
 import { Viewer, ViewerState } from '../../BaseViewer';
 import { MProp } from "../../../framework/Schema";
-export declare type ARangePickerData = [string | null | undefined, string | null | undefined, boolean | null | undefined];
-declare type AntData = [moment.Moment | null, moment.Moment | null];
+export type ARangePickerData = [
+    string | null | undefined,
+    string | null | undefined,
+    boolean | null | undefined
+];
+type AntData = [moment.Moment | null, moment.Moment | null];
 interface State extends ViewerState {
     mobileDlg: boolean;
 }

package/types/ui/editor/complex/ACheckDrag.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Viewer } from "../../BaseViewer";
+import { MEnumField, MProp, ValueConst } from "../../../framework/Schema";
+import { ViewerState } from "../../BaseViewer";
+interface ACheckDragState extends ViewerState {
+    data: any[];
+}
+/**
+ * 多选
+ * 示例：{label:"1.13 除爱人/对象之外，目前和您一起生活的家庭成员包括(多选):",name:"familyAccompany",type:"set", option: "父亲 母亲 孩子 爱人/对象的父亲 爱人/对象的母亲 兄弟姐妹"},
+ * 值：["孩子", "父亲"]
+ */
+export declare class ACheckDrag extends Viewer<ACheckDragState> {
+    _enumFields: MEnumField[];
+    _enumValues: ValueConst[];
+    /** 这个是开放输入框的值 */
+    _inputBoxValue: ValueConst;
+    timer: any;
+    inputRef: React.RefObject<HTMLInputElement>;
+    checkFields: MEnumField[];
+    checkValues: ValueConst[];
+    dataRef: any;
+    constructor(p: MProp);
+    _createBr(): JSX.Element;
+    componentDidUpdate(prevProps: Readonly<MProp>, prevState: Readonly<ACheckDragState>, snapshot?: any): void;
+    element(ctx: any): JSX.Element;
+}
+export {};

package/types/ui/editor/complex/JsonEditor.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
 /**
  * 用文本框编辑json object或者json array
  */

package/types/ui/widget/DIYCheckbox.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { CheckboxProps } from "antd";
+import "./DIYCheckbox.less";
+export interface DIYCheckboxProps extends Omit<CheckboxProps, "children"> {
+    /** 自定义选中时的图标 */
+    checkedIcon?: ReactNode;
+    /** 自定义未选中时的图标 */
+    uncheckedIcon?: ReactNode;
+    /** 自定义半选中时的图标 */
+    indeterminateIcon?: ReactNode;
+    /** 子元素内容 */
+    children?: ReactNode;
+    /** 图标大小 */
+    iconSize?: number;
+    /** 图标颜色 */
+    iconColor?: string;
+}
+declare const DIYCheckbox: React.FC<DIYCheckboxProps>;
+export default DIYCheckbox;

package/types/ui/widget/SegmentEditSwitch.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type SegmentEditSwitchState = 
+export type SegmentEditSwitchState = 
 /** 只有一个可以按的【编辑】按钮 */
 "readable" | 
 /** 只有一个disable的编辑按钮 */

package/types/ui/widget/SortDrag.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import "./SortDrag.less";
+type SortDragProps = {
+    changeOriginDataSource: (value: any) => void;
+    sortList: Array<{
+        cpn: ReactNode;
+        id: string;
+        isChecked: boolean;
+        label: string;
+        checkedIndex: number;
+    }>;
+};
+declare const SortDrag: React.FC<SortDragProps>;
+export default SortDrag;