feat: cascader code optimize

src/cascader/components/Item.tsx

@@ -21,9 +21,9 @@ const props = {
   cascaderContext: {
     type: Object as PropType<CascaderContextType>,
   },
-  onChange: Function as PropType<(node: TreeNode) => void>,
-  onClick: Function as PropType<(node: TreeNode) => void>,
-  onMouseenter: Function as PropType<(node: TreeNode) => void>,
+  onChange: Function as PropType<() => void>,
+  onClick: Function as PropType<() => void>,
+  onMouseenter: Function as PropType<() => void>,
 };
 
 export default defineComponent({
@@ -82,18 +82,17 @@ export default defineComponent({
     }
 
     function RenderCheckBox(node: TreeNode, cascaderContext: CascaderContextType) {
-      const { checkProps, value, max, inputVal, size } = cascaderContext;
+      const { checkProps, value, max, inputVal } = cascaderContext;
       const label = RenderLabelInner(node, cascaderContext);
       return (
         <Checkbox
           checked={node.checked}
           indeterminate={node.indeterminate}
           disabled={node.isDisabled() || ((value as TreeNodeValue[]).length >= max && max !== 0)}
           name={node.value}
-          size={size}
           title={inputVal ? getFullPathLabel(node) : node.label}
           onChange={() => {
-            props.onChange(node);
+            props.onChange();
           }}
           {...checkProps}
         >
@@ -110,11 +109,11 @@ export default defineComponent({
           class={itemClass.value}
           onClick={(e: Event) => {
             e.stopPropagation();
-            props.onClick(node);
+            props.onClick();
           }}
           onMouseenter={(e: Event) => {
             e.stopPropagation();
-            props.onMouseenter(node);
+            props.onMouseenter();
           }}
         >
           {cascaderContext.multiple ? RenderCheckBox(node, cascaderContext) : RenderLabelContent(node, cascaderContext)}

src/cascader/components/Panel.tsx

@@ -37,13 +37,13 @@ export default defineComponent({
         key={node.value}
         node={node}
         cascaderContext={props.cascaderContext}
-        onClick={(node: TreeNode) => {
+        onClick={() => {
           handleExpand(node, 'click');
         }}
-        onMouseenter={(node: TreeNode) => {
+        onMouseenter={() => {
           handleExpand(node, 'hover');
         }}
-        onChange={(node) => {
+        onChange={() => {
           valueChangeEffect(node, props.cascaderContext);
         }}
       />
@@ -80,7 +80,7 @@ export default defineComponent({
           ? renderPanels()
           : renderTNodeJSXDefault(
               'empty',
-              <div class={`${COMPONENT_NAME.value}__panel--empty`}>{t(global.value.empty)}</div>,
+              <div class={`${COMPONENT_NAME.value}__panel--empty`}>{global.value.empty}</div>,
             )}
       </div>
     );

src/cascader/core/effect.ts

@@ -1,7 +1,7 @@
 import isNumber from 'lodash/isNumber';
 import isFunction from 'lodash/isFunction';
 import cloneDeep from 'lodash/cloneDeep';
-import { TreeNode, CascaderContextType, CascaderProps, TreeNodeValue, TreeNodeModel } from '../interface';
+import { TreeNode, CascaderContextType, TdCascaderProps, TreeNodeValue, TreeNodeModel } from '../interface';
 import { getFullPathLabel, getTreeValue } from './helper';
 
 /**
@@ -12,8 +12,8 @@ import { getFullPathLabel, getTreeValue } from './helper';
  * @param cascaderContext
  */
 export function expendClickEffect(
-  propsTrigger: CascaderProps['trigger'],
-  trigger: CascaderProps['trigger'],
+  propsTrigger: TdCascaderProps['trigger'],
+  trigger: TdCascaderProps['trigger'],
   node: TreeNode,
   cascaderContext: CascaderContextType,
 ) {
@@ -129,7 +129,7 @@ export function closeIconClickEffect(cascaderContext: CascaderContextType) {
 export function handleRemoveTagEffect(
   cascaderContext: CascaderContextType,
   index: number,
-  onRemove: CascaderProps['onRemove'],
+  onRemove: TdCascaderProps['onRemove'],
 ) {
   const { disabled, setValue, value, valueType, treeStore } = cascaderContext;
 

src/cascader/core/helper.ts

@@ -2,7 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import {
   TreeNode,
   CascaderContextType,
-  CascaderProps,
+  TdCascaderProps,
   CascaderValue,
   TreeNodeValue,
   TreeOptionData,
@@ -113,7 +113,7 @@ export const getTreeValue = (value: CascaderContextType['value']) => {
  * @param multiple
  * @returns
  */
-export const getCascaderValue = (value: CascaderValue, valueType: CascaderProps['valueType'], multiple: boolean) => {
+export const getCascaderValue = (value: CascaderValue, valueType: TdCascaderProps['valueType'], multiple: boolean) => {
   if (valueType === 'single') {
     return value;
   }

src/cascader/hooks.ts

@@ -16,7 +16,6 @@ import {
   TreeNodeModel,
   CascaderChangeSource,
   CascaderValue,
-  CascaderContextType,
 } from './interface';
 
 // 全局状态
@@ -36,7 +35,7 @@ export const useContext = (
 
   return {
     statusContext,
-    cascaderContext: computed<CascaderContextType>(() => {
+    cascaderContext: computed(() => {
       const {
         size,
         checkStrictly,
@@ -49,7 +48,6 @@ export const useContext = (
         disabled,
         showAllLevels,
         minCollapsedNum,
-        loading,
         valueType,
       } = props;
       return {
@@ -65,7 +63,6 @@ export const useContext = (
         disabled,
         showAllLevels,
         minCollapsedNum,
-        loading,
         valueType,
         visible: innerPopupVisible.value,
         ...statusContext,
@@ -128,7 +125,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
       if (!options.length && !treeStore) return;
 
       if (!treeStore) {
-        const treeStore = new TreeStore({
+        const store = new TreeStore({
           keys: {
             ...keys,
             children: typeof keys.children === 'string' ? keys.children : 'children',
@@ -139,13 +136,13 @@ export const useCascaderContext = (props: TdCascaderProps) => {
           checkStrictly,
           onLoad: () => {
             nextTick(() => {
-              treeStore.refreshNodes();
+              store.refreshNodes();
               updatedTreeNodes();
             });
           },
         });
-        treeStore.append(options);
-        statusContext.treeStore = treeStore;
+        store.append(options);
+        statusContext.treeStore = store;
       } else {
         treeStore.reload(options);
         treeStore.refreshNodes();
@@ -223,7 +220,6 @@ export const useCascaderContext = (props: TdCascaderProps) => {
   );
 
   return {
-    setInnerValue,
     cascaderContext,
     isFilterable,
   };

src/cascader/interface.tsx

@@ -4,8 +4,6 @@ import TreeStore from '../_common/js/tree/tree-store';
 import TreeNode from '../_common/js/tree/tree-node';
 import { TreeNodeModel, TreeNodeValue } from '../_common/js/tree/types';
 
-export type CascaderProps = TdCascaderProps;
-
 export * from './type';
 export interface CascaderContextType
   extends Pick<
@@ -36,39 +34,6 @@ export interface CascaderContextType
   setExpend: (val: TreeNodeValue[]) => void;
 }
 
-export interface CascaderPanelProps extends Pick<TdCascaderProps, 'trigger' | 'empty' | 'onChange'> {
-  cascaderContext: CascaderContextType;
-}
-
-export interface ListenersType {
-  onRemove?: TdCascaderProps['onRemove'];
-  onBlur?: TdCascaderProps['onBlur'];
-  onFocus?: TdCascaderProps['onFocus'];
-  onChange?: TdCascaderProps['onChange'];
-}
-// InputContent component interfaces
-export interface InputContentProps {
-  cascaderContext: CascaderContextType;
-  placeholder: TdCascaderProps['placeholder'];
-  listeners: ListenersType;
-  collapsedItems: TdCascaderProps['collapsedItems'];
-}
-
-export interface ContentProps {
-  cascaderContext: CascaderContextType;
-  placeholder: TdCascaderProps['placeholder'];
-  listeners: InputContentProps['listeners'];
-  isHover: boolean;
-}
-export interface CascaderItemPropsType {
-  node: TreeNode;
-  cascaderContext: CascaderContextType;
-  onClick: (ctx: ContextType) => void;
-  onChange: (ctx: ContextType | { e: boolean; node: TreeNode }) => void;
-  onMouseEnter: (ctx: ContextType) => void;
-}
-
-export type ContextType = { e?: Event; node?: TreeNode };
 export { TreeNode } from '../_common/js/tree/tree-node';
 export type { TreeNodeValue } from '../_common/js/tree/types';
 export type { TreeOptionData } from '../_common/js/common';