* picker: refactor and support to use readonly property.

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

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/lib/picker/dev.ts b/lib/picker/dev.ts
@@ -62,7 +62,7 @@ onPageUpdate(() => {
         multiple: true,
         items: '/lib/picker/dev/nested-items.json',
         tree: true,
-        disabled: true,
+        readonly: true,
         menu: {
             itemProps: {
                 avatarClass: 'size-sm',

diff --git a/lib/picker/src/component/picker-multi-select.tsx b/lib/picker/src/component/picker-multi-select.tsx
@@ -34,7 +34,6 @@ export class PickerMultiSelect extends PickTrigger<PickerState, PickerSelectProp
         return classes(
             super._getClass(props),
             'picker-select picker-select-multi form-control',
-            props.disabled ? 'disabled' : '',
         );
     }
 
@@ -43,7 +42,7 @@ export class PickerMultiSelect extends PickTrigger<PickerState, PickerSelectProp
         return (
             <div className="picker-multi-selection" key={selection.value} title={typeof text === 'string' ? text : undefined}>
                 <span className="text"><CustomContent content={text} /></span>
-                {this.props.disabled ? null : <div className="picker-deselect-btn btn size-xs ghost" onClick={this._handleDeselectClick} data-value={selection.value}><span className="close"></span></div>}
+                {(this.props.disabled || this.props.readonly) ? null : <div className="picker-deselect-btn btn size-xs ghost" onClick={this._handleDeselectClick} data-value={selection.value}><span className="close"></span></div>}
             </div>
         );
     };
@@ -79,14 +78,14 @@ export class PickerMultiSelect extends PickTrigger<PickerState, PickerSelectProp
     }
 
     protected _renderValue(props: PickerSelectProps) {
-        const {name, state: {value = ''}, disabled, id, valueList, emptyValue} = props;
+        const {name, state: {value = ''}, disabled, readonly, id, valueList, emptyValue} = props;
         if (name) {
             if (this.hasInput) {
                 $(`#${id}`).val(value);
             } else {
                 const values = valueList.length ? valueList : [emptyValue];
                 return (
-                    <select id={id} multiple className="pick-value" name={name.endsWith('[]') ? name : `${name}[]`} disabled={disabled} style={{display: 'none'}}>
+                    <select id={id} multiple className="pick-value" name={name.endsWith('[]') ? name : `${name}[]`} disabled={disabled} readonly={readonly} style={{display: 'none'}}>
                         {values.map(x => <option key={x} value={x}>{x}</option>)}
                     </select>
                 );

diff --git a/lib/picker/src/component/picker-single-select.tsx b/lib/picker/src/component/picker-single-select.tsx
@@ -46,7 +46,6 @@ export class PickerSingleSelect extends PickTrigger<PickerState, PickerSelectPro
         return classes(
             super._getClass(props),
             'picker-select picker-select-single form-control',
-            props.disabled ? 'disabled' : '',
         );
     }
 
@@ -64,7 +63,7 @@ export class PickerSingleSelect extends PickTrigger<PickerState, PickerSelectPro
     }
 
     protected _renderTrigger(props: PickerSelectProps) {
-        const {children, state: {selections = [], open}, placeholder, search, disabled, clearable} = props;
+        const {children, state: {selections = [], open}, placeholder, search, disabled, readonly, clearable} = props;
 
         const [selection] = selections;
         const showSearch = open && search;
@@ -82,7 +81,7 @@ export class PickerSingleSelect extends PickTrigger<PickerState, PickerSelectPro
             view = <span key="main" className="picker-select-placeholder">{placeholder}</span>;
         }
         const deselectBtnView = (clearable && !showSearch) ? (
-            <button key="deselect" type="button" className="btn picker-deselect-btn size-sm square ghost" disabled={disabled} onClick={this._handleDeselectClick}><span className="close"></span></button>
+            <button key="deselect" type="button" className="btn picker-deselect-btn size-sm 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>;
 

diff --git a/lib/picker/src/style/picker-select.css b/lib/picker/src/style/picker-select.css
@@ -34,6 +34,9 @@
 .picker-multi-selection {
   @apply -flex -items-center -border -bg-surface -pl-2 -rounded-full -max-w-full;
 }
+.readonly .picker-multi-selection {
+  @apply -pr-2;
+}
 .picker-multi-selection > .text {
   @apply -max-w-[180px] -whitespace-nowrap -overflow-clip;
 }