feat(Cascader): highlight selected items, close #990

ksc-fe · Apr 12, 2024 · 4b99078 · 4b99078
1 parent 25bcd81
commit 4b99078
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/components/cascader/demos/filterable.md b/components/cascader/demos/filterable.md
@@ -11,12 +11,15 @@ import {Cascader} from 'kpc';
 
 <div>
     <Cascader data={this.get('data')} v-model="value" filterable />
+    <br /><br />
+    <Cascader data={this.get('data')} v-model="values" filterable multiple />
 </div>
 ```
 
 ```ts
 interface Props {
     value?: string[] | null
+    values?: string[][] | null
 }
 
 export default class extends Component<Props> {
@@ -25,6 +28,7 @@ export default class extends Component<Props> {
     static defaults() {
         return {
             value: [] as string[],
+            values: [] as string[][],
             data: [
                 {
                     value: 'beijing',

diff --git a/components/cascader/index.ts b/components/cascader/index.ts
@@ -80,7 +80,8 @@ export class Cascader<
     private filterable = useFilterable(
         this.input.keywords,
         this.value.setValue,
-        this.fields
+        this.fields,
+        this.value.values
     );
     private positionObj = {my: 'left top', at: 'right top', collisionDirection: ['left']};
 

diff --git a/components/cascader/index.vdt b/components/cascader/index.vdt
@@ -69,7 +69,7 @@ const Options = (data, level, loaded, parentSelected) => {
     });
 }
 
-const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
+const {filter, keywords: {value: keywords}, selectByFilter, isSelectedItem} = this.filterable;
 <t:super class={`${k}-cascader`}>
     <b:base-menu>
         <DropdownMenu 
@@ -94,6 +94,8 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
                 return <DropdownItem v-for={items}
                     ev-select={selectByFilter.bind(null, $value)}
                     disabled={$value.disabled}
+                    hideOnSelect={!multiple}
+                    class={{[`${k}-selected`]: isSelectedItem($value)}}
                 >
                     {(() => {
                         // highlight keywords

diff --git a/components/cascader/styles.ts b/components/cascader/styles.ts
@@ -77,5 +77,8 @@ export const makeFilterMenuStyles = cache(function makeFilterMenuStyles(k: strin
             font-style: normal;
             color: ${cascader.filter.highlightColor};
         }
+        .${k}-dropdown-item.${k}-selected {
+            color: ${cascader.selectedColor};
+        }
     `;
 });
diff --git a/components/cascader/useFilterable.ts b/components/cascader/useFilterable.ts
@@ -3,11 +3,13 @@ import type {Cascader, CascaderData, BaseCascaderData} from './';
 import {State} from '../../hooks/useState';
 import type {Value} from './useValue';
 import type {useFields} from './useFields';
+import { isEqualArray } from '../utils';
 
 export function useFilterable(
     keywords: State<string>,
     setValue: (value: Value) => void, 
-    getField: ReturnType<typeof useFields>
+    getField: ReturnType<typeof useFields>,
+    values: State<Value[]>
 ) {
     const instance = useInstance() as Cascader;
 
@@ -48,9 +50,16 @@ export function useFilterable(
     }
 
     function selectByFilter(data: CascaderData<any>[]) {
-        const value = data.map(item => getField(item, 'value'));
-        setValue(value);
+        setValue(getValue(data));
     }
 
-    return {filter, selectByFilter, keywords};
+    function isSelectedItem(data: CascaderData<any>[]) {
+        return !!values.value.find((value) => isEqualArray(value, getValue(data)));
+    }
+
+    function getValue(data: CascaderData<any>[]) {
+        return data.map(item => getField(item, 'value'));
+    }
+
+    return {filter, selectByFilter, keywords, isSelectedItem};
 }