plain-design 1.0.0-beta.118 → 1.0.0-beta.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.118",
+  "version": "1.0.0-beta.119",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -40,7 +40,7 @@
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@peryl/react-compose": "0.0.215",
+    "@peryl/react-compose": "0.0.219",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-class-properties": "7.23.3",
     "@babel/preset-env": "7.23.7",

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

@@ -1,12 +1,13 @@
 import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
-import {computed, Fragment, getComponentCls} from "@peryl/react-compose";
+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,4 +1,4 @@
-import {computed, designComponent, getComponentCls, onMounted, useClasses, useStyles} from "@peryl/react-compose";
+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";
@@ -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' && !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/createCascadeListRender.tsx

@@ -1,6 +1,7 @@
 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/DatePicker/createDateRender.multiple.tsx

@@ -16,7 +16,7 @@ import {createPopupEditor} from "../usePopupEditor";
  */
 export function createDateRenderMultiple({ props, emit, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, slots, displayPattern, today, hooks, maxmin, }: tDateCompositionPublicParams) {
   const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const { getReference, renderReference } = useRenderReference();
 
   const format = effectComputed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));

package/src/packages/components/DatePicker/createDateRender.single.tsx

@@ -16,7 +16,7 @@ import {createPopupEditor} from "../usePopupEditor";
 export function createDateRenderSingle({ props, emit, slots, hooks, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin }: tDateCompositionPublicParams) {
 
   const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
 
   const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
 

package/src/packages/components/DatePicker/useRangeDateRender.tsx

@@ -29,7 +29,7 @@ export function useRangeDateRender(
     getEndPopper?: () => iPopupEditor,
   }) {
   const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, }, { effects });
   const reference = useRenderReference();
   const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
   const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);

package/src/packages/components/Input/useMultipleInput.tsx

@@ -19,7 +19,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
 
   const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText, undefined, effects);
 
-  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement });
+  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement }, { effects });
 
   const handler = {
     onRef: (input: typeof AutoWidthInput.use.class | null) => hooks.onRefInput.exec(input?.refs.input || null),

package/src/packages/components/Object/createObjectRender.multiple.tsx

@@ -33,7 +33,7 @@ export function createObjectRenderMultiple(
     }
   }, effects);
 
-  const { refs, onRef } = useRefs({ select: Select });
+  const { refs, onRef } = useRefs({ select: Select }, { effects });
 
   const publicHandler = {
     /**

package/src/packages/components/Object/createObjectRender.single.tsx

@@ -16,7 +16,7 @@ export function createObjectRenderSingle(
 ) {
   const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
 
-  const { refs, onRef } = useRefs({ select: Select });
+  const { refs, onRef } = useRefs({ select: Select }, { effects });
 
   const publicHandler = {
     /**

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -102,7 +102,7 @@ export function createPublicSelectRender(
     input: Input,
     /*用来上移下移hover元素的时候滚动到目标位置，如果用的是虚拟列表，则不会有这个对象，暂定虚拟列表不支持滚动*/
     scroll: Scroll,
-  });
+  }, { effects });
 
   const reference = useRenderReference();
 

package/src/packages/components/TimePicker/createSingleTimeRender.tsx

@@ -12,7 +12,7 @@ import {createPopupEditor} from "../usePopupEditor";
 export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
 
   const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const reference = useRenderReference();
   const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
   const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));

package/src/packages/components/TimePicker/useRangeTimeRender.tsx

@@ -11,7 +11,7 @@ import {useRenderReference} from "../../uses/useRenderReference";
 
 export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
   const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, }, { effects });
   const reference = useRenderReference();
   const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
   const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);

package/src/packages/uses/useStyle.tsx

@@ -48,7 +48,7 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   const styleComputed = computed(() => {
     if (ctx.isDestroyed) {return {} as UseStyleProvideData;}
-    
+
     const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
 
     const { shape, size, status, inputMode } = ctx.props;
@@ -72,8 +72,6 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   onBeforeUnmount(() => {
     setTimeout(() => {
-      (styleComputed.value as any).ctx = null;
-      (styleComputed.value as any).parent = null;
       styleComputed.effect.stop();
     });
   });