plain-design 1.0.0-beta.98 → 3.0.0

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "@peryl/react-compose";
 import {Input} from "../Input";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {CascadeEmitOptions, CascadePropsOptions, iCascadeCompositionParam} from "./cascade.utils";
@@ -10,10 +10,10 @@ import {createMultipleCascadeRender} from "./createMultipleCascadeRender";
 import {createSingleCascadeRender} from "./createSingleCascadeRender";
 import {createCascadeUtils} from "./createCascadeUtils";
 import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {useStyle} from "../../uses/useStyle";
 import {CascadePanelCustomPropsOption} from "../CascadePanel/cascade-panel.utils";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
 import React from "react";

package/src/packages/components/CascadeKeys/index.tsx

@@ -0,0 +1,5 @@
+import {CascadeKeys} from "../Cascade/CascadeKeys";
+
+export {CascadeKeys};
+
+export default CascadeKeys;

package/src/packages/components/CascadePanel/cascade-panel.utils.ts

@@ -1,9 +1,9 @@
 import {TreePropsOptions} from "../TreeCore/createTreeProps";
-import {ExtractPropTypes, PropType} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import {iTreeCore} from "../TreeCore/createTreeCore";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 /**
  * 级联面板类型，cascade为级联列表，flat为平铺面板

package/src/packages/components/CascadePanel/flat/CascadeFlatPanelNode.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iMouseEvent, useClasses} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, useClasses} from "@peryl/react-compose";
 import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
 import {CascadePanel} from "../index";
 import {Radio} from "../../Radio";

package/src/packages/components/CascadePanel/flat/createCascadeFlatRender.tsx

@@ -1,12 +1,13 @@
 import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
-import {computed, Fragment, getComponentCls} from "plain-design-composition";
+import {Fragment, getComponentCls, globalComputed} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import './cascade-flat-panel.scss';
-import Scroll from "../../Scroll";
-import Icon from "../../Icon";
+import {Scroll} from "../../Scroll";
+import {Icon} from "../../Icon";
 import {CascadeFlatPanelNode} from "./CascadeFlatPanelNode";
-import Loading from "../../Loading";
-import Empty from "../../Empty";
-import i18n from "../../i18n";
+import {Loading} from "../../Loading";
+import {Empty} from "../../Empty";
+import {i18n} from "../../i18n";
 
 export function createCascadeFlatRender(
   {
@@ -17,7 +18,9 @@ export function createCascadeFlatRender(
   }: iCascadePanelItemPublicParam
 ) {
 
-  const headers = computed(() => {
+  const { effects } = createEffects();
+
+  const headers = globalComputed(() => {
     const renderContent = <div className="cascade-panel-flat-header">
       {panels.value.slice(1).map((panel, index) => (
         <Fragment key={index}>
@@ -33,8 +36,9 @@ export function createCascadeFlatRender(
     </div>;
     return () => renderContent;
   });
+  effects.push(() => headers.effect.stop());
 
-  const content = computed(() => {
+  const content = globalComputed(() => {
     const { parent, treeNodes } = panels.value[panels.value.length - 1];
     const renderContent = <div className="cascade-panel-flat-body">
       {(() => {
@@ -68,6 +72,7 @@ export function createCascadeFlatRender(
     </div>;
     return () => renderContent;
   });
+  effects.push(() => content.effect.stop());
 
   const render = () => (
     <div className={getComponentCls('cascade-panel-flat')}>
@@ -78,5 +83,5 @@ export function createCascadeFlatRender(
     </div>
   );
 
-  return { render };
+  return { render, effects };
 }

package/src/packages/components/CascadePanel/index.tsx

@@ -1,9 +1,9 @@
-import {computed, designComponent, getComponentCls, onMounted, useClasses, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onBeforeUnmount, onMounted, useClasses, useStyles} from "@peryl/react-compose";
 import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
 import {createTreeCore} from "../TreeCore/createTreeCore";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import {CascadeListPanelItem} from "./list/CascadeListPanelItem";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
 import {Empty} from "../Empty";
 import {CascadePanelCustomPropsOption, eCascadePanelType, iCascadePanelMeta} from "./cascade-panel.utils";
@@ -11,6 +11,7 @@ import {createCascadeListRender} from "./list/createCascadeListRender";
 import {createCascadeFlatRender} from "./flat/createCascadeFlatRender";
 import {LoadingMask} from "../LoadingMask";
 import {StyleProps, useStyle} from "../../uses/useStyle";
+import {iEffects} from "@peryl/utils/createEffects";
 
 export const CascadePanel = designComponent({
   name: 'cascade-panel',
@@ -155,15 +156,32 @@ export const CascadePanel = designComponent({
      * @author  韦胜健
      * @date    2022.12.12 21:18
      */
+    let contentCache: undefined | { type: typeof eCascadePanelType.TYPE, effects: iEffects, render: () => any } = undefined;
     const content = computed(() => {
+
       const param = { props, handleClickNode: handler.handleClickNode, panels, treeCore };
-      return props.panelType === eCascadePanelType.cascade ? createCascadeListRender(param) : createCascadeFlatRender(param);
+      const { panelType } = props;
+
+      if (!!contentCache && contentCache.type === panelType) {return { render: contentCache.render };}
+
+      contentCache?.effects.clear();
+      contentCache = {
+        type: panelType,
+        ...panelType === eCascadePanelType.cascade ? createCascadeListRender(param) : createCascadeFlatRender(param)
+      };
+      return { render: contentCache.render };
     });
 
     onMounted(() => {
-      props.panelType === 'cascade' && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
+      props.panelType === 'cascade' && !props.multiple && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
       treeCore.hooks.onMounted.exec(undefined);
     });
+    onBeforeUnmount(() => {
+      if (!!contentCache) {
+        contentCache.effects.clear();
+        contentCache = undefined;
+      }
+    });
 
     return {
       refer: {

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, onMounted, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, onMounted, useClasses, useRefs} from "@peryl/react-compose";
 import {iTreeNode} from "../../TreeCore/createTreeNode";
 import {CascadeListPanelNode} from "./CascadeListPanelNode";
 import {Scroll} from "../../Scroll";

package/src/packages/components/CascadePanel/list/CascadeListPanelNode.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {computed, designComponent, iHTMLDivElement, useClasses} from "@peryl/react-compose";
 import {iTreeNode} from "../../TreeCore/createTreeNode";
 import {Icon} from "../../Icon";
 import {Empty} from "../../Empty";

package/src/packages/components/CascadePanel/list/createCascadeListRender.tsx

@@ -1,6 +1,7 @@
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
 import {CascadeListPanelItem} from "./CascadeListPanelItem";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export function createCascadeListRender(
   {
@@ -10,6 +11,9 @@ export function createCascadeListRender(
   }: iCascadePanelItemPublicParam
 ) {
 
+  /*没用，仅用于适配类型*/
+  const { effects } = createEffects();
+
   const render = () => (
     panels.value
       .map(({ parent, treeNodes }) => (
@@ -23,5 +27,5 @@ export function createCascadeListRender(
       ))
   );
 
-  return { render };
+  return { render, effects };
 }

package/src/packages/components/Checkbox/index.tsx

@@ -1,14 +1,14 @@
 import './checkbox.scss';
-import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {useClickWave} from "../../directives/ClickWave";
 import {CheckboxInner} from "../CheckboxInner";
 import {CheckboxGroupCollector} from "../CheckboxGroup";
 import {i18n} from "../../i18n";
-import {getKey, KEY} from "../KeyboardService";
+import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
 import {Transition} from "../Transition";
 
 export const Checkbox = designComponent({
@@ -99,7 +99,7 @@ export const Checkbox = designComponent({
         }*/
       },
       keydown: (e: iKeyboardEvent) => {
-        if (getKey(e) === KEY.space) {
+        if (getKeyNameByKeyboardEvent(e) === eKeyboardKeys.space) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);
@@ -125,12 +125,10 @@ export const Checkbox = designComponent({
           onKeyDown={handler.keydown}
           ref={onRef.el}>
           <span className="plain-click-node">
-            <Transition switch name={getComponentCls("transition-fade")} mode="out-in">
-              <CheckboxInner
-                checkStatus={checkStatus.value}
-                key={checkStatus.value}
-                disabled={editComputed.value.disabled!}/>
-            </Transition>
+            <CheckboxInner
+              checkStatus={checkStatus.value}
+              key={checkStatus.value}
+              disabled={editComputed.value.disabled!}/>
           </span>
           {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n.$it('base.select.all').d('全选') : '')}</span>)}
         </div>))

package/src/packages/components/CheckboxGroup/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";

package/src/packages/components/CheckboxInner/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
 import './checkbox-inner.scss';
 import {SVGAttributes} from "react";

package/src/packages/components/Collapse/index.tsx

@@ -1,5 +1,5 @@
-import {createCounter} from "plain-utils/utils/createCounter";
-import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "plain-design-composition";
+import {createCounter} from "@peryl/utils/createCounter";
+import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import CollapseGroup from "../CollapseGroup";
 import Icon from "../Icon";
 import './collapse.scss';

package/src/packages/components/CollapseGroup/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useModel, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, useModel, useRefs} from "@peryl/react-compose";
 
 export const CollapseGroup = designComponent({
   name: 'collapse-group',

package/src/packages/components/CollapseTransition/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "plain-design-composition";
+import {designComponent, getComponentCls, onBeforeMount, onUpdated, useReference, watch} from "@peryl/react-compose";
 import {findDOMNode} from "react-dom";
-import {unit} from "plain-utils/string/unit";
-import {addClass} from "plain-utils/dom/addClass";
-import {delay} from "plain-utils/utils/delay";
-import {removeClass} from "plain-utils/dom/removeClass";
+import {unit} from "@peryl/utils/unit";
+import {addClass} from "@peryl/utils/addClass";
+import {delay} from "@peryl/utils/delay";
+import {removeClass} from "@peryl/utils/removeClass";
 import {ClassWrapper} from "../Reference";
 
 type CollapseElStyles = {

package/src/packages/components/ColorPicker/ColorPanel.tsx

@@ -1,125 +1,146 @@
-import './color-panel.scss';
-import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "plain-design-composition";
-import {ColorSvPanel} from "./sub/ColorSvPanel";
-import {ColorHueSlider} from "./sub/ColorHueSlider";
-import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
-import {PlainColor} from "./utils/PlainColor";
-import {useColorPanelEditor} from "./useColorPanelEditor";
-import {useColorPanelHistory} from "./useColorPanelHistory";
-import {ColorPanelPublicPropOptions} from "./utils/color-picker.utils";
-
-
-export const ColorPanel = designComponent({
-  name: 'color-panel',
-  props: {
-    ...ColorPanelPublicPropOptions
-  },
-  emits: {
-    onUpdateModelValue: (val: any) => true,
-    onDblclickSvPanel: (e: iMouseEvent) => true,
-  },
-  inheritPropsType: HTMLDivElement,
-  setup({ props, event: { emit } }) {
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {
-      onChange: (value) => {
-        const prev = state.colorState;
-        const colorState = utils.getState(value, prev);
-        if (colorState !== prev) {
-          state.colorState = colorState;
-        }
-      },
-    });
-
-    const utils = {
-      getState: (value: string | null | undefined, prev?: iColorState): iColorState => {
-        if (!prev) {
-          return { color: new PlainColor(value || '#FFFFFF'), value };
-        } else {
-          if (prev.value == value) {
-            return prev;
-          } else {
-            return { color: new PlainColor(value || '#FFFFFF'), value };
-          }
-        }
-      },
-    };
-
-    const state = reactive({
-      colorState: utils.getState(model.value)
-    });
-
-    const handler = {
-      svChange: ({ value, saturation }: { value: number, saturation: number }) => {
-        const color = state.colorState.color.useHsva({ v: value, s: saturation });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-      hueChange: (hue: number) => {
-        const color = state.colorState.color.useHsva({ h: hue });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-      alphaChange: (alpha: number) => {
-        const color = state.colorState.color.useHsva({ a: alpha / 100 });
-        state.colorState = { color, value: color.value };
-        model.value = state.colorState.value!;
-      },
-    };
-
-    const editor = useColorPanelEditor({
-      props,
-      getColor: () => state.colorState.color,
-      onChange: color => {
-        state.colorState = { color, value: color.value };
-        model.value = color.value;
-      }
-    });
-
-    const history = useColorPanelHistory({
-      onChange: color => {
-        state.colorState = { color, value: color.value };
-        model.value = color.value;
-      }
-    });
-
-    return {
-      render: () => (
-        <div className={getComponentCls('color-panel')}>
-          <div className="color-panel-card">
-            <ColorSvPanel
-              hue={state.colorState.color.h}
-              modelValue={state.colorState.color.v}
-              saturation={state.colorState.color.s}
-              onChange={handler.svChange}
-              onDblclick={emit.onDblclickSvPanel}
-              disable={props.disableSvPanel}
-            />
-            <div className="color-panel-slider-bar">
-              <div className="color-panel-slider-container">
-                <ColorHueSlider
-                  modelValue={state.colorState.color.h}
-                  onChange={handler.hueChange}
-                />
-                <ColorAlphaSlider
-                  color={state.colorState.color.hex}
-                  modelValue={state.colorState.color.a * 100}
-                  onChange={handler.alphaChange}
-                  disabled={!props.enableAlpha}
-                />
-              </div>
-              <div className="color-panel-slider-color" style={{ backgroundColor: state.colorState.color.hex }}/>
-            </div>
-            {editor.renderContent.value()}
-          </div>
-          {history.renderContent.value()}
-        </div>
-      )
-    };
-  },
-});
-
-interface iColorState {
-  color: PlainColor,
-  value: string | null | undefined
-}
+import './color-panel.scss';
+import {designComponent, getComponentCls, iMouseEvent, reactive, useModel} from "@peryl/react-compose";
+import {ColorSvPanel} from "./sub/ColorSvPanel";
+import {ColorHueSlider} from "./sub/ColorHueSlider";
+import {ColorAlphaSlider} from "./sub/ColorAlphaSlider";
+import {PlainColor} from "./utils/PlainColor";
+import {useColorPanelEditor} from "./useColorPanelEditor";
+import {useColorPanelHistory} from "./useColorPanelHistory";
+import {ColorPanelPublicPropOptions} from "./utils/color-picker.utils";
+import {Icon} from "../Icon";
+import {$message} from "../$message";
+import {i18n} from "../i18n";
+
+
+export const ColorPanel = designComponent({
+  name: 'color-panel',
+  props: {
+    ...ColorPanelPublicPropOptions
+  },
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+    onDblclickSvPanel: (e: iMouseEvent) => true,
+  },
+  inheritPropsType: HTMLDivElement,
+  setup({ props, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {
+      onChange: (value) => {
+        const prev = state.colorState;
+        const colorState = utils.getState(value, prev);
+        if (colorState !== prev) {
+          state.colorState = colorState;
+        }
+      },
+    });
+
+    const utils = {
+      getState: (value: string | null | undefined, prev?: iColorState): iColorState => {
+        if (!prev) {
+          return { color: new PlainColor(value || '#FFFFFF'), value };
+        } else {
+          if (prev.value == value) {
+            return prev;
+          } else {
+            return { color: new PlainColor(value || '#FFFFFF'), value };
+          }
+        }
+      },
+    };
+
+    const state = reactive({
+      colorState: utils.getState(model.value)
+    });
+
+    const handler = {
+      svChange: ({ value, saturation }: { value: number, saturation: number }) => {
+        const color = state.colorState.color.useHsva({ v: value, s: saturation });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      hueChange: (hue: number) => {
+        const color = state.colorState.color.useHsva({ h: hue });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      alphaChange: (alpha: number) => {
+        const color = state.colorState.color.useHsva({ a: alpha / 100 });
+        state.colorState = { color, value: color.value };
+        model.value = state.colorState.value!;
+      },
+      dropColor: () => {
+        if (!('EyeDropper' in window)) {
+          $message.error(i18n.$it('colorPicker.notSupportDropper').d('您的浏览器不支持颜色拾取器，推荐使用谷歌浏览器'));
+          return;
+        }
+        const close = $message(i18n.$it('colorPicker.exitDropperMode').d('按 ESC 键关闭取色吸管'), { time: null });
+        const eyeDropper = new (window as any).EyeDropper();
+        eyeDropper.open().then((result: { sRGBHex: string }) => {
+          state.colorState = utils.getState(result.sRGBHex);
+          model.value = state.colorState.value!;
+          close();
+        }).catch(() => {
+          close();
+        });
+      },
+    };
+
+    const editor = useColorPanelEditor({
+      props,
+      getColor: () => state.colorState.color,
+      onChange: color => {
+        state.colorState = { color, value: color.value };
+        model.value = color.value;
+      }
+    });
+
+    const history = useColorPanelHistory({
+      onChange: color => {
+        state.colorState = { color, value: color.value };
+        model.value = color.value;
+      }
+    });
+
+    return {
+      render: () => (
+        <div className={getComponentCls('color-panel')}>
+          <div className="color-panel-card">
+            <ColorSvPanel
+              hue={state.colorState.color.h}
+              modelValue={state.colorState.color.v}
+              saturation={state.colorState.color.s}
+              onChange={handler.svChange}
+              onDblclick={emit.onDblclickSvPanel}
+              disable={props.disableSvPanel}
+            />
+            <div className="color-panel-slider-bar">
+              <div className="color-panel-dropper" onClick={handler.dropColor}>
+                <Icon icon="ie-dropper"/>
+              </div>
+              <div className="color-panel-slider-container">
+                <ColorHueSlider
+                  modelValue={state.colorState.color.h}
+                  onChange={handler.hueChange}
+                />
+                <ColorAlphaSlider
+                  color={state.colorState.color.hex}
+                  modelValue={state.colorState.color.a * 100}
+                  onChange={handler.alphaChange}
+                  disabled={!props.enableAlpha}
+                />
+              </div>
+              <div className="color-panel-slider-color" style={{ backgroundColor: state.colorState.color.hex }}/>
+            </div>
+            {editor.renderContent.value()}
+          </div>
+          {history.renderContent.value()}
+        </div>
+      )
+    };
+  },
+});
+
+interface iColorState {
+  color: PlainColor,
+  value: string | null | undefined
+}