fix: cascader loading icon (#1075)

* fix: cascader loading icon * feat: select-input restore readonly * feat: cascader code optimize * fix: lint * fix: isFilterable.value
Tencent · Jun 27, 2022 · 2486928 · 2486928
1 parent 6968b8a
commit 2486928
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 82 deletions.
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
@@ -86,7 +86,8 @@ export default defineComponent({
           }}
           {...(props.selectInputProps as TdSelectInputProps)}
           onInputChange={(value) => {
-            setInputVal(value);
+            if (!isFilterable.value) return;
+            setInputVal(`${value}`);
           }}
           onTagChange={(val: CascaderValue, ctx) => {
             handleRemoveTagEffect(cascaderContext.value, ctx.index, props.onRemove);
@@ -95,7 +96,19 @@ export default defineComponent({
             if (disabled.value) return;
             setVisible(val, context);
           }}
-          onClear={({ e }) => {
+          onBlur={(val, context) => {
+            props.onBlur?.({
+              value: cascaderContext.value.value,
+              e: context.e,
+            });
+          }}
+          onFocus={(val, context) => {
+            props.onFocus?.({
+              value: cascaderContext.value.value,
+              e: context.e,
+            });
+          }}
+          onClear={() => {
             closeIconClickEffect(cascaderContext.value);
           }}
           v-slots={{

diff --git a/src/cascader/components/Item.tsx b/src/cascader/components/Item.tsx
@@ -21,17 +21,16 @@ 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({
   name: 'TCascaderItem',
   props,
   setup(props) {
     const liRef = ref<HTMLElement>();
-    const liRef2 = ref<HTMLElement>();
     useRipple(liRef);
 
     const COMPONENT_NAME = usePrefixClass('cascader__item');
@@ -72,7 +71,6 @@ export default defineComponent({
       const labelCont = (
         <span
           title={cascaderContext.inputVal ? getFullPathLabel(node) : node.label}
-          ref={liRef2}
           class={[`${COMPONENT_NAME.value}-label`, `${COMPONENT_NAME.value}-label--ellipsis`]}
           role="label"
         >
@@ -84,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}
         >
@@ -112,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)}

diff --git a/src/cascader/components/Panel.tsx b/src/cascader/components/Panel.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref, computed, watch, nextTick } from 'vue';
+import { defineComponent, PropType, computed } from 'vue';
 
 import Item from './Item';
 import { TreeNode, CascaderContextType } from '../interface';
@@ -15,10 +15,6 @@ export default defineComponent({
     empty: CascaderProps.empty,
     trigger: CascaderProps.trigger,
     onChange: CascaderProps.onChange,
-    visible: {
-      type: Boolean,
-      default: true,
-    },
     cascaderContext: {
       type: Object as PropType<CascaderContextType>,
     },
@@ -28,7 +24,6 @@ export default defineComponent({
     const renderTNodeJSXDefault = useTNodeDefault();
     const COMPONENT_NAME = usePrefixClass('cascader');
     const { global, t } = useConfig('cascader');
-    const itemShow = ref(props.visible);
 
     const panels = computed(() => getPanels(props.cascaderContext.treeNodes));
 
@@ -37,27 +32,18 @@ export default defineComponent({
       expendClickEffect(propsTrigger, trigger, node, cascaderContext);
     };
 
-    watch(
-      () => props.visible,
-      () => {
-        nextTick(() => {
-          itemShow.value = props.visible;
-        });
-      },
-    );
-
     const renderItem = (node: TreeNode) => (
       <Item
         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);
         }}
       />
@@ -94,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>
     );

diff --git a/src/cascader/core/className.ts b/src/cascader/core/className.ts
@@ -94,5 +94,5 @@ export function getCascaderItemIconClass(
   STATUS: Record<string, string>,
   cascaderContext: CascaderContextType,
 ) {
-  return [`${prefix}-cascader__item-icon`, ...getNodeStatusClass(node, STATUS, cascaderContext)];
+  return [`${prefix}-cascader__item-icon`, `${prefix}-icon`, ...getNodeStatusClass(node, STATUS, cascaderContext)];
 }
diff --git a/src/cascader/core/effect.ts b/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;
 

diff --git a/src/cascader/core/helper.ts b/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;
   }

diff --git a/src/cascader/hooks.ts b/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,
   };

diff --git a/src/cascader/interface.tsx b/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';

diff --git a/test/unit/watermark/index.test.jsx b/test/unit/watermark/index.test.jsx
@@ -1,10 +1,12 @@
 import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
 import Watermark from '@/src/watermark/index.ts';
 
 // every component needs four parts: props/events/slots/functions.
 describe('Watermark', () => {
   // test props api
   describe(':props', () => {
+    HTMLCanvasElement.prototype.getContext = vi.fn();
     it('', () => {
       const wrapper = mount({
         render() {