* picker: add caretClass option to picker.

easysoft · Aug 29, 2024 · a987504 · a987504
1 parent f0cd19e
commit a987504
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/lib/picker/src/component/picker-multi-select.tsx b/lib/picker/src/component/picker-multi-select.tsx
@@ -66,7 +66,7 @@ export class PickerMultiSelect extends PickTrigger<PickerState, PickerSelectProp
     }
 
     protected _renderTrigger(props: PickerSelectProps) {
-        const {state: {selections = [], open, value}, search, placeholder, display, valueList, children} = this.props;
+        const {state: {selections = [], open, value}, search, placeholder, display, valueList, children, caretClass} = this.props;
         const showSearch = open && search;
         let view: ComponentChildren;
         const noSelections = !showSearch && !selections.length;
@@ -89,7 +89,7 @@ export class PickerMultiSelect extends PickTrigger<PickerState, PickerSelectProp
         return [
             view,
             children,
-            <span key="caret" class="caret"></span>,
+            <span key="caret" class={classes('caret', caretClass)}></span>,
         ];
     }
 

diff --git a/lib/picker/src/component/picker-single-select.tsx b/lib/picker/src/component/picker-single-select.tsx
@@ -67,7 +67,7 @@ export class PickerSingleSelect extends PickTrigger<PickerState, PickerSelectPro
     }
 
     protected _renderTrigger(props: PickerSelectProps) {
-        const {children, state: {selections = [], value, open}, placeholder, search, disabled, readonly, clearable, display} = props;
+        const {children, state: {selections = [], value, open}, placeholder, search, disabled, readonly, clearable, display, caretClass} = props;
 
         const [selection] = selections;
         const showSearch = open && search;
@@ -96,7 +96,7 @@ export class PickerSingleSelect extends PickTrigger<PickerState, PickerSelectPro
         const deselectBtnView = (clearable && !showSearch) ? (
             <button key="deselect" type="button" className="btn picker-deselect-btn size-xs square ghost" disabled={disabled} readonly={readonly} onClick={this._handleDeselectClick}><span className="close"></span></button>
         ) : null;
-        const caret = showSearch ? null : <span key="caret" className="caret"></span>;
+        const caret = showSearch ? null : <span key="caret" className={classes('caret flex-none', caretClass)}></span>;
         return [
             view,
             children,

diff --git a/lib/picker/src/component/picker.tsx b/lib/picker/src/component/picker.tsx
@@ -317,6 +317,7 @@ export class Picker<S extends PickerState = PickerState, O extends PickerOptions
             search: props.search,
             display: props.display,
             searchHint: props.searchHint,
+            caretClass: props.caretClass,
             clearable: !!this.valueList.length && !props.required,
             valueList: this.valueList,
             emptyValue: this.firstEmptyValue,

diff --git a/lib/picker/src/types/picker-options.ts b/lib/picker/src/types/picker-options.ts
@@ -2,7 +2,7 @@ import type {PickOptions} from '@zui/pick';
 import type {MenuOptions} from '@zui/menu';
 import type {ToolbarSetting} from '@zui/toolbar';
 import type {SearchTreeOptions, TreeOptions} from '@zui/tree';
-import type {CustomContentType, HotkeysSettings} from '@zui/core';
+import type {ClassNameLike, CustomContentType, HotkeysSettings} from '@zui/core';
 import type {PickerState} from './picker-state';
 import type {PickerItemBasic} from './picker-item-options';
 
@@ -27,6 +27,7 @@ export interface PickerOptions<S extends PickerState = PickerState> extends Pick
     search?: boolean | number;
     searchHint?: string;
     hotkeys?: HotkeysSettings;
+    caretClass?: ClassNameLike;
 
     onDeselect?: (values: string | string[]) => false | void;
     onSelect?: (values: string | string[]) => false | void;

diff --git a/lib/picker/src/types/picker-select-props.ts b/lib/picker/src/types/picker-select-props.ts
@@ -1,6 +1,6 @@
 import type {PickTriggerProps} from '@zui/pick';
 import type {PickerState} from './picker-state';
-import type {HotkeysSettings, CustomContentType} from '@zui/core';
+import type {HotkeysSettings, CustomContentType, ClassNameLike} from '@zui/core';
 import type {PickerItemBasic} from './picker-item-options';
 
 export interface PickerSelectProps<S extends PickerState = PickerState> extends PickTriggerProps<S> {
@@ -14,6 +14,7 @@ export interface PickerSelectProps<S extends PickerState = PickerState> extends
     emptyValue: string;
     hotkeys?: HotkeysSettings;
     display?: string | ((values: string | string[], selections: PickerItemBasic[]) => CustomContentType);
+    caretClass?: ClassNameLike;
 
     onSelect: (values: string | string[]) => void;
     onDeselect: (values: string | string[]) => void;