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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.117",
+  "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/Layout/index.tsx

@@ -4,7 +4,8 @@ import './layout.scss';
 export const Layout = designComponent({
   name: 'layout',
   props: {
-    vertical: { type: Boolean }
+    vertical: { type: Boolean },
+    fullHeight: { type: Boolean },
   },
   provideRefer: true,
   slots: ['default'],
@@ -14,6 +15,7 @@ export const Layout = designComponent({
       getComponentCls('layout'),
       {
         'layout-vertical': props.vertical,
+        'layout-full-height': props.fullHeight,
       }
     ]);
 

package/src/packages/components/Layout/layout.scss

@@ -9,6 +9,10 @@ $resize-width: 12px;
     flex-direction: column;
   }
 
+  &.layout-full-height {
+    height: 100%;
+  }
+
   & > .#{componentName(layout-section)} {
     &.layout-section-position-center {
       flex: 1;

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/entry.tsx

@@ -57,6 +57,7 @@ export {TabGroup} from './components/TabGroup';
 export {Tab} from './components/Tab';
 export {Tag} from './components/Tag';
 export {Tree} from './components/Tree';
+export type {iTreeDragChangeData} from './components/TreeCore/createTreeProps';
 export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
 export {ColorPicker} from './components/ColorPicker';
 export {TimePicker} from './components/TimePicker';

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();
     });
   });