* pick: add readonly property to pick.

easysoft · Nov 24, 2023 · 3263365 · 3263365
1 parent 3bcb5d9
commit 3263365
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 5 deletions.
diff --git a/lib/pick/src/components/pick-trigger.tsx b/lib/pick/src/components/pick-trigger.tsx
@@ -42,13 +42,14 @@ export class PickTrigger<S extends PickState = PickState, P extends PickTriggerP
     }
 
     protected _getClass(props: RenderableProps<P>) {
-        const {state, className, disabled} = props;
+        const {state, className, disabled, readonly} = props;
         const {open: opened} = state;
         return classes(
             'pick',
             className,
             opened && 'is-open focus',
             disabled && 'disabled',
+            readonly && 'readonly',
         );
     }
 
@@ -70,13 +71,12 @@ export class PickTrigger<S extends PickState = PickState, P extends PickTriggerP
     }
 
     protected _renderValue(props: RenderableProps<P>): ComponentChildren {
-        const {name, state: {value = ''}, disabled, id} = props;
+        const {name, state: {value = ''}, disabled, readonly, id} = props;
         if (name) {
             if (this._hasInput) {
                 $(`#${id}`).val(value);
             } else {
-                return <input id={id} type="hidden" className="pick-value" name={name} value={value} disabled={disabled} />;
-
+                return <input id={id} type="hidden" className="pick-value" name={name} value={value} readonly={readonly} disabled={disabled} />;
             }
         }
         return null;

diff --git a/lib/pick/src/components/pick.tsx b/lib/pick/src/components/pick.tsx
@@ -62,7 +62,7 @@ export class Pick<S extends PickState = PickState, O extends PickOptions<S> = Pi
     }
 
     toggle = async (open?: boolean, state?: Partial<S>): Promise<S> => {
-        if (this.props.disabled) {
+        if (this.props.disabled || this.props.readonly) {
             open = false;
         }
         const {state: currentState} = this;
@@ -125,6 +125,7 @@ export class Pick<S extends PickState = PickState, O extends PickOptions<S> = Pi
             tagName: props.tagName,
             attrs: props.attrs,
             disabled: props.disabled,
+            readonly: props.readonly,
             clickType: props.clickType,
             onClick: props.onClick,
             changeState: this.changeState,
@@ -139,6 +140,7 @@ export class Pick<S extends PickState = PickState, O extends PickOptions<S> = Pi
             className: props.popClass,
             style: props.popStyle,
             disabled: props.disabled,
+            readonly: props.readonly,
             changeState: this.changeState,
             togglePop: this.toggle,
             placement: props.popPlacement,

diff --git a/lib/pick/src/types/pick-options.ts b/lib/pick/src/types/pick-options.ts
@@ -22,6 +22,7 @@ export interface PickOptions<S extends PickState = PickState> {
 
     defaultValue?: string;
     disabled?: boolean;
+    readonly?: boolean;
     name?: string;
     onChange?: (value: string, oldValue: string) => void;
     onClick?: (event: MouseEvent) => void | boolean;

diff --git a/lib/pick/src/types/pick-pop-props.ts b/lib/pick/src/types/pick-pop-props.ts
@@ -7,6 +7,7 @@ export interface PickPopProps<S extends PickState = PickState> {
     id: string;
     state: S;
     disabled?: boolean;
+    readonly?: boolean;
     changeState: PickerStateChanger<S>;
     togglePop: (open?: boolean, state?: Partial<S>) => Promise<S>;
 

diff --git a/lib/pick/src/types/pick-trigger-props.ts b/lib/pick/src/types/pick-trigger-props.ts
@@ -6,6 +6,7 @@ export interface PickTriggerProps<S extends PickState = PickState> {
     id: string;
     state: S;
     disabled?: boolean;
+    readonly?: boolean;
     changeState: PickerStateChanger<S>;
     togglePop: (open?: boolean, state?: Partial<S>) => Promise<S>;
     onClick?: (event: MouseEvent) => void | boolean;