plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/Cascade/createMultipleCascadeRender.tsx

@@ -1,156 +1,156 @@
-import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
-import {Tree} from "../Tree";
-import {iCascadeCompositionParam} from "./cascade.utils";
-import {Input} from "../Input";
-import {PlainObject} from "@peryl/utils/event";
-import {inputScrollEnd} from "../Input/input.utils";
-import {createCascadePopper} from "./createCascadePopper";
-import i18n from "../i18n";
-
-export function createMultipleCascadeRender(
-  {
-    model,
-    treeProps,
-    hooks,
-    getPublicPopperAttrs,
-    classes,
-    utils,
-    event,
-    props,
-    editControl,
-    scopeSlots,
-    panelHeight,
-    cascadeProps,
-    styleComputed,
-  }: iCascadeCompositionParam) {
-  const { effects, effectComputed } = createEffectsOfReaction();
-
-  const { refs, onRef } = useRefs({
-    tree: Tree,
-    input: Input,
-  });
-
-  /**
-   * 给多值输入框的显示文本时数组
-   * @author  韦胜健
-   * @date    2022/10/24 20:27
-   */
-  const label = effectComputed(() => {
-    if (model.value == null || model.value.length === 0) {return null;}
-    return (model.value as PlainObject[]).map(i => utils.getLabel.value(i));
-  });
-
-  const state = reactive({
-    /*当前是否获取输入焦点*/
-    isFocus: false,
-    /*搜索关键词*/
-    searchText: null as null | string
-  });
-
-  const inputHandler = {
-    onFocus: (e: FocusEvent) => {
-      event.emit.onFocus(e);
-      props.inputAttrs?.onFocus?.(e);
-      state.isFocus = true;
-      state.searchText = null;
-    },
-    onBlur: (e: FocusEvent) => {
-      event.emit.onBlur(e);
-      props.inputAttrs?.onBlur?.(e);
-      state.isFocus = false;
-    },
-    onUpdateMultipleText: async (val: any) => {
-      state.searchText = val;
-      await nextTick();
-      /*当搜索关键词变化的时候自动展开所有树节点*/
-      refs.tree?.methods.expandAll();
-    },
-    clearHandler: () => {
-      model.value = null;
-      state.searchText = null;
-    },
-    handleAddTag: () => { return new Promise<void>(() => null);},
-    handleRemoveTag: (data: { index: number, val: string }) => {
-      /*如果不是严格多选，则不做任何处理，一定要用户手动点击取消选中某个节点*/
-      if (!props.checkStrictly) {return;}
-      const value = [...model.value];
-      value.splice(data.index, 1);
-      model.value = value;
-    },
-  };
-
-  effects.push(hooks.onRender.use(() => {
-    return (
-      <Input
-        ref={onRef.input}
-        suffixIcon="pi-mind-mapping"
-        multiple
-        modelValue={label.value}
-        multipleText={state.searchText}
-        customReadonly={props.disableFilter || props.lazy}
-        placeholder={editControl.editComputed.value.placeholder!}
-        {...mergeAttrs(
-          { class: classes.value, },
-          props.inputAttrs,
-          inputHandler,
-        )}
-      />
-    );
-  }));
-
-  const treeHandler = {
-    onModelValueChange: async (val: any) => {
-      model.value = val;
-      /*树组件绑定值变化之后，input多值滚动到底部*/
-      nextTick().then(() => {inputScrollEnd(() => refs.input?.refs.el);});
-    },
-  };
-
-  const { popper } = createCascadePopper({
-    getPublicPopperAttrs,
-    styleComputed,
-    onPopperClose: () => {
-      state.searchText = null;
-      refs.tree?.methods.collapseAll();
-    },
-    editControl,
-    refs,
-    scopeSlots,
-    panelHeight,
-    props,
-    getTreeAttrs: () => {
-      return {
-        modelValue: model.value,
-        onUpdateModelValue: treeHandler.onModelValueChange,
-        ref: onRef.tree,
-        scroll: true,
-        ...treeProps.value,
-        filterText: state.searchText,
-      };
-    },
-    getCascadeAttrs: () => ({
-      modelValue: model.value,
-      onUpdateModelValue: treeHandler.onModelValueChange,
-      ...cascadeProps.value,
-      ...treeProps.value,
-      filterText: state.searchText,
-    }),
-    getPlcTreeAttrs: () => {
-      const { labelField, ..._treeProps } = treeProps.value;
-      return ({
-        fixed: 'left',
-        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
-        modelValue: model.value,
-        onUpdateModelValue: treeHandler.onModelValueChange,
-        field: labelField,
-        ..._treeProps,
-        filterText: state.searchText,
-        singleValueType: _treeProps.singleValueType || 'all',
-      });
-    }
-  });
-
-  effects.push(() => popper.methods.dispose());
-
-  return effects.clear;
-}
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
+import {Tree} from "../Tree";
+import {iCascadeCompositionParam} from "./cascade.utils";
+import {Input} from "../Input";
+import {PlainObject} from "@peryl/utils/event";
+import {inputScrollEnd} from "../Input/input.utils";
+import {createCascadePopper} from "./createCascadePopper";
+import i18n from "../i18n";
+
+export function createMultipleCascadeRender(
+  {
+    model,
+    treeProps,
+    hooks,
+    getPublicPopperAttrs,
+    classes,
+    utils,
+    event,
+    props,
+    editControl,
+    scopeSlots,
+    panelHeight,
+    cascadeProps,
+    styleComputed,
+  }: iCascadeCompositionParam) {
+  const { effects, effectComputed } = createEffectsOfReaction();
+
+  const { refs, onRef } = useRefs({
+    tree: Tree,
+    input: Input,
+  });
+
+  /**
+   * 给多值输入框的显示文本时数组
+   * @author  韦胜健
+   * @date    2022/10/24 20:27
+   */
+  const label = effectComputed(() => {
+    if (model.value == null || model.value.length === 0) {return null;}
+    return (model.value as PlainObject[]).map(i => utils.getLabel.value(i));
+  });
+
+  const state = reactive({
+    /*当前是否获取输入焦点*/
+    isFocus: false,
+    /*搜索关键词*/
+    searchText: null as null | string
+  });
+
+  const inputHandler = {
+    onFocus: (e: FocusEvent) => {
+      event.emit.onFocus(e);
+      props.inputAttrs?.onFocus?.(e);
+      state.isFocus = true;
+      state.searchText = null;
+    },
+    onBlur: (e: FocusEvent) => {
+      event.emit.onBlur(e);
+      props.inputAttrs?.onBlur?.(e);
+      state.isFocus = false;
+    },
+    onUpdateMultipleText: async (val: any) => {
+      state.searchText = val;
+      await nextTick();
+      /*当搜索关键词变化的时候自动展开所有树节点*/
+      refs.tree?.methods.expandAll();
+    },
+    clearHandler: () => {
+      model.value = null;
+      state.searchText = null;
+    },
+    handleAddTag: () => { return new Promise<void>(() => null);},
+    handleRemoveTag: (data: { index: number, val: string }) => {
+      /*如果不是严格多选，则不做任何处理，一定要用户手动点击取消选中某个节点*/
+      if (!props.checkStrictly) {return;}
+      const value = [...model.value];
+      value.splice(data.index, 1);
+      model.value = value;
+    },
+  };
+
+  effects.push(hooks.onRender.use(() => {
+    return (
+      <Input
+        ref={onRef.input}
+        suffixIcon="pi-mind-mapping"
+        multiple
+        modelValue={label.value}
+        multipleText={state.searchText}
+        customReadonly={props.disableFilter || props.lazy}
+        placeholder={editControl.editComputed.value.placeholder!}
+        {...mergeAttrs(
+          { class: classes.value, },
+          props.inputAttrs,
+          inputHandler,
+        )}
+      />
+    );
+  }));
+
+  const treeHandler = {
+    onModelValueChange: async (val: any) => {
+      model.value = val;
+      /*树组件绑定值变化之后，input多值滚动到底部*/
+      nextTick().then(() => {inputScrollEnd(() => refs.input?.refs.el);});
+    },
+  };
+
+  const { popper } = createCascadePopper({
+    getPublicPopperAttrs,
+    styleComputed,
+    onPopperClose: () => {
+      state.searchText = null;
+      refs.tree?.methods.collapseAll();
+    },
+    editControl,
+    refs,
+    scopeSlots,
+    panelHeight,
+    props,
+    getTreeAttrs: () => {
+      return {
+        modelValue: model.value,
+        onUpdateModelValue: treeHandler.onModelValueChange,
+        ref: onRef.tree,
+        scroll: true,
+        ...treeProps.value,
+        filterText: state.searchText,
+      };
+    },
+    getCascadeAttrs: () => ({
+      modelValue: model.value,
+      onUpdateModelValue: treeHandler.onModelValueChange,
+      ...cascadeProps.value,
+      ...treeProps.value,
+      filterText: state.searchText,
+    }),
+    getPlcTreeAttrs: () => {
+      const { labelField, ..._treeProps } = treeProps.value;
+      return ({
+        fixed: 'left',
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
+        modelValue: model.value,
+        onUpdateModelValue: treeHandler.onModelValueChange,
+        field: labelField,
+        ..._treeProps,
+        filterText: state.searchText,
+        singleValueType: _treeProps.singleValueType || 'all',
+      });
+    }
+  });
+
+  effects.push(() => popper.methods.dispose());
+
+  return effects.clear;
+}

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -1,175 +1,175 @@
-import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
-import {Tree} from "../Tree";
-import {iCascadeCompositionParam} from "./cascade.utils";
-import {Input} from "../Input";
-import {PlainObject} from "@peryl/utils/event";
-import {createCascadePopper} from "./createCascadePopper";
-import {PlcTree} from "../Table/standard/PlcTree/PlcTree";
-import i18n from "../i18n";
-
-/**
- * 级联单选
- * @author  韦胜健
- * @date    2022/10/24 19:36
- */
-export function createSingleCascadeRender(
-  {
-    hooks,
-    classes,
-    props,
-    event,
-    model,
-    utils,
-    treeProps,
-    getPublicPopperAttrs,
-    editControl,
-    scopeSlots,
-    panelHeight,
-    cascadeProps,
-    styleComputed,
-  }: iCascadeCompositionParam) {
-
-  const { effects, effectComputed } = createEffectsOfReaction();
-
-  /**
-   * input输入框显示值
-   * @author  韦胜健
-   * @date    2022/10/24 20:29
-   */
-  const label = effectComputed(() => {
-    if (model.value == null) {return null;}
-    if (props.multiple) {return; }
-    return Array.isArray(model.value) ? (model.value as PlainObject[]).map(i => utils.getLabel.value(i)).join('/') : utils.getLabel.value(model.value as PlainObject);
-  });
-
-  const state = reactive({
-    /*当前是否获取输入焦点*/
-    isFocus: false,
-    searchText: null as null | string,
-    inputValue: label.value as null | string,
-  });
-
-  const { refs, onRef } = useRefs({
-    tree: Tree,
-    plcTree: PlcTree,
-    input: Input,
-  });
-
-  const inputHandler = {
-    onFocus: (e: FocusEvent) => {
-      event.emit.onFocus(e);
-      props.inputAttrs?.onFocus?.(e);
-      state.isFocus = true;
-      state.inputValue = null;
-    },
-    onBlur: (e: FocusEvent) => {
-      if (!event.emit) {return;}
-      event.emit.onBlur(e);
-      props.inputAttrs?.onBlur?.(e);
-      state.isFocus = false;
-    },
-    clearHandler: () => {
-      model.value = null;
-      state.inputValue = null;
-      state.searchText = null;
-    },
-    onUpdateModelValue: (val: any) => {
-      state.inputValue = val;
-      state.searchText = val;
-      /*搜索关键词输入变化之后，如果有值则展开所有节点，没有值则关闭所有节点*/
-      nextTick().then(() => {
-        if (state.searchText != null && String(state.searchText).trim().length > 0) {
-          refs.tree?.methods.expandAll();
-          refs.plcTree?.methods.expandAll();
-        } else {
-          refs.tree?.methods.collapseAll();
-          refs.plcTree?.methods.collapseAll();
-        }
-      });
-    },
-  };
-
-  effects.push(hooks.onRender.use(() => (
-    <Input
-      ref={onRef.input}
-      className={classes.value}
-      suffixIcon="pi-mind-mapping"
-      customReadonly={props.disableFilter || props.lazy}
-      {...mergeAttrs(
-        { class: classes.value, },
-        {
-          ...props.inputAttrs,
-          ...inputHandler,
-          ...state.isFocus && !props.disableFilter ?
-            {
-              modelValue: state.inputValue, placeholder: (label.value || editControl.editComputed.value.placeholder!)
-            } : {
-              modelValue: label.value, placeholder: editControl.editComputed.value.placeholder!
-            }
-        }
-      )}
-    />
-  )));
-
-  const treeHandler = {
-    onModelValueChange: async (val: any) => {
-      model.value = val;
-      await nextTick();
-      state.inputValue = label.value;
-      popper.methods.hide();
-    },
-  };
-
-  const { popper } = createCascadePopper({
-    getPublicPopperAttrs,
-    styleComputed,
-    onPopperClose: () => {
-      state.inputValue = label.value;
-      state.searchText = null;
-      refs.tree?.methods.collapseAll();
-    },
-    onPopperShow: () => {
-      state.inputValue = null;
-    },
-    editControl,
-    refs,
-    scopeSlots,
-    props,
-    panelHeight,
-    getTreeAttrs: () => {
-      return {
-        modelValue: model.value,
-        onUpdateModelValue: treeHandler.onModelValueChange,
-        ref: onRef.tree,
-        scroll: true,
-        ...treeProps.value,
-        filterText: state.searchText,
-      };
-    },
-    getCascadeAttrs: () => ({
-      modelValue: model.value,
-      onUpdateModelValue: treeHandler.onModelValueChange,
-      ...cascadeProps.value,
-      ...treeProps.value,
-      filterText: state.searchText,
-    }),
-    getPlcTreeAttrs: () => {
-      const { labelField, ..._treeProps } = treeProps.value;
-      return ({
-        ref: onRef.plcTree,
-        fixed: 'left',
-        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
-        modelValue: model.value,
-        onUpdateModelValue: treeHandler.onModelValueChange,
-        field: labelField,
-        ..._treeProps,
-        filterText: state.searchText,
-        singleValueType: _treeProps.singleValueType || 'all',
-      });
-    }
-  });
-
-  effects.push(() => popper.methods.dispose());
-
-  return effects.clear;
-}
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
+import {Tree} from "../Tree";
+import {iCascadeCompositionParam} from "./cascade.utils";
+import {Input} from "../Input";
+import {PlainObject} from "@peryl/utils/event";
+import {createCascadePopper} from "./createCascadePopper";
+import {PlcTree} from "../Table/standard/PlcTree/PlcTree";
+import i18n from "../i18n";
+
+/**
+ * 级联单选
+ * @author  韦胜健
+ * @date    2022/10/24 19:36
+ */
+export function createSingleCascadeRender(
+  {
+    hooks,
+    classes,
+    props,
+    event,
+    model,
+    utils,
+    treeProps,
+    getPublicPopperAttrs,
+    editControl,
+    scopeSlots,
+    panelHeight,
+    cascadeProps,
+    styleComputed,
+  }: iCascadeCompositionParam) {
+
+  const { effects, effectComputed } = createEffectsOfReaction();
+
+  /**
+   * input输入框显示值
+   * @author  韦胜健
+   * @date    2022/10/24 20:29
+   */
+  const label = effectComputed(() => {
+    if (model.value == null) {return null;}
+    if (props.multiple) {return; }
+    return Array.isArray(model.value) ? (model.value as PlainObject[]).map(i => utils.getLabel.value(i)).join('/') : utils.getLabel.value(model.value as PlainObject);
+  });
+
+  const state = reactive({
+    /*当前是否获取输入焦点*/
+    isFocus: false,
+    searchText: null as null | string,
+    inputValue: label.value as null | string,
+  });
+
+  const { refs, onRef } = useRefs({
+    tree: Tree,
+    plcTree: PlcTree,
+    input: Input,
+  });
+
+  const inputHandler = {
+    onFocus: (e: FocusEvent) => {
+      event.emit.onFocus(e);
+      props.inputAttrs?.onFocus?.(e);
+      state.isFocus = true;
+      state.inputValue = null;
+    },
+    onBlur: (e: FocusEvent) => {
+      if (!event.emit) {return;}
+      event.emit.onBlur(e);
+      props.inputAttrs?.onBlur?.(e);
+      state.isFocus = false;
+    },
+    clearHandler: () => {
+      model.value = null;
+      state.inputValue = null;
+      state.searchText = null;
+    },
+    onUpdateModelValue: (val: any) => {
+      state.inputValue = val;
+      state.searchText = val;
+      /*搜索关键词输入变化之后，如果有值则展开所有节点，没有值则关闭所有节点*/
+      nextTick().then(() => {
+        if (state.searchText != null && String(state.searchText).trim().length > 0) {
+          refs.tree?.methods.expandAll();
+          refs.plcTree?.methods.expandAll();
+        } else {
+          refs.tree?.methods.collapseAll();
+          refs.plcTree?.methods.collapseAll();
+        }
+      });
+    },
+  };
+
+  effects.push(hooks.onRender.use(() => (
+    <Input
+      ref={onRef.input}
+      className={classes.value}
+      suffixIcon="pi-mind-mapping"
+      customReadonly={props.disableFilter || props.lazy}
+      {...mergeAttrs(
+        { class: classes.value, },
+        {
+          ...props.inputAttrs,
+          ...inputHandler,
+          ...state.isFocus && !props.disableFilter ?
+            {
+              modelValue: state.inputValue, placeholder: (label.value || editControl.editComputed.value.placeholder!)
+            } : {
+              modelValue: label.value, placeholder: editControl.editComputed.value.placeholder!
+            }
+        }
+      )}
+    />
+  )));
+
+  const treeHandler = {
+    onModelValueChange: async (val: any) => {
+      model.value = val;
+      await nextTick();
+      state.inputValue = label.value;
+      popper.methods.hide();
+    },
+  };
+
+  const { popper } = createCascadePopper({
+    getPublicPopperAttrs,
+    styleComputed,
+    onPopperClose: () => {
+      state.inputValue = label.value;
+      state.searchText = null;
+      refs.tree?.methods.collapseAll();
+    },
+    onPopperShow: () => {
+      state.inputValue = null;
+    },
+    editControl,
+    refs,
+    scopeSlots,
+    props,
+    panelHeight,
+    getTreeAttrs: () => {
+      return {
+        modelValue: model.value,
+        onUpdateModelValue: treeHandler.onModelValueChange,
+        ref: onRef.tree,
+        scroll: true,
+        ...treeProps.value,
+        filterText: state.searchText,
+      };
+    },
+    getCascadeAttrs: () => ({
+      modelValue: model.value,
+      onUpdateModelValue: treeHandler.onModelValueChange,
+      ...cascadeProps.value,
+      ...treeProps.value,
+      filterText: state.searchText,
+    }),
+    getPlcTreeAttrs: () => {
+      const { labelField, ..._treeProps } = treeProps.value;
+      return ({
+        ref: onRef.plcTree,
+        fixed: 'left',
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
+        modelValue: model.value,
+        onUpdateModelValue: treeHandler.onModelValueChange,
+        field: labelField,
+        ..._treeProps,
+        filterText: state.searchText,
+        singleValueType: _treeProps.singleValueType || 'all',
+      });
+    }
+  });
+
+  effects.push(() => popper.methods.dispose());
+
+  return effects.clear;
+}