refactor: add disabled API to dropdown to simplify code (#2307)

dream-num · May 24, 2024 · 3a7f97c · 3a7f97c
1 parent a5a7b33
commit 3a7f97c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 56 deletions.
diff --git a/packages/design/src/components/dropdown/Dropdown.tsx b/packages/design/src/components/dropdown/Dropdown.tsx
@@ -74,20 +74,26 @@ export interface IDropdownProps {
      * @param visible
      */
     onVisibleChange?: (visible: boolean) => void;
+
+    /** Disable dropdown from showing up. */
+    disabled?: boolean;
 }
 
 export function Dropdown(props: IDropdownProps) {
     const {
         className,
-        trigger = ['click'],
         placement,
         children,
         overlay,
         alignPoint = false,
         align,
+        disabled,
         onVisibleChange,
     } = props;
 
+    // eslint-disable-next-line react/prefer-destructuring-assignment
+    const trigger = disabled ? [] : (props.trigger || ['click']);
+
     const { mountContainer } = useContext(ConfigContext);
 
     return mountContainer && (

diff --git a/packages/ui/src/views/components/doc-bars/ToolbarItem.tsx b/packages/ui/src/views/components/doc-bars/ToolbarItem.tsx
@@ -70,7 +70,7 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
         if (isObservable(selections)) {
             return selections;
         } else {
-            return new Observable< typeof selections>((subscribe) => {
+            return new Observable<typeof selections>((subscribe) => {
                 subscribe.next(selections);
             });
         }
@@ -81,7 +81,7 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
         if (isObservable(icon)) {
             return icon;
         } else {
-            return new Observable< typeof icon>((subscribe) => {
+            return new Observable<typeof icon>((subscribe) => {
                 const v = options?.find((o) => o.value === value)?.icon ?? icon;
                 subscribe.next(v);
             });
@@ -127,6 +127,7 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
 
         return menuType === MenuItemType.BUTTON_SELECTOR
             ? (
+                // Button Selector
                 <div
                     className={clsx(styles.toolbarItemSelectButton, {
                         [styles.toolbarItemSelectButtonDisabled]: disabled,
@@ -143,66 +144,31 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
                             onChange={handleChange}
                         />
                     </div>
-                    {!disabled
-                        ? (
-                            <Dropdown
-                                overlay={<Menu overViewport="scroll" menuType={id} options={options} onOptionSelect={handleSelect} value={value} />}
-                                onVisibleChange={handleDropdownVisibleChange}
-                            >
-                                <div
-                                    className={clsx(styles.toolbarItemSelectButtonArrow, {
-                                        [styles.toolbarItemSelectButtonArrowDisabled]: disabled,
-                                        [styles.toolbarItemSelectButtonArrowActivated]: activated,
-                                    })}
-                                    data-disabled={disabled}
-                                >
-                                    <MoreDownSingle />
-                                </div>
-                            </Dropdown>
-                        )
-                        : (
-                            <div
-                                className={clsx(styles.toolbarItemSelectButtonArrow, {
-                                    [styles.toolbarItemSelectButtonArrowDisabled]: disabled,
-                                    [styles.toolbarItemSelectButtonArrowActivated]: activated,
-                                })}
-                                data-disabled={disabled}
-                            >
-                                <MoreDownSingle />
-                            </div>
-                        )}
-                </div>
-            )
-            : !disabled
-                ? (
                     <Dropdown
                         overlay={<Menu overViewport="scroll" menuType={id} options={options} onOptionSelect={handleSelect} value={value} />}
                         onVisibleChange={handleDropdownVisibleChange}
+                        disabled={disabled}
                     >
                         <div
-                            className={clsx(styles.toolbarItemSelect, {
-                                [styles.toolbarItemSelectDisabled]: disabled,
-                                [styles.toolbarItemSelectActivated]: activated,
+                            className={clsx(styles.toolbarItemSelectButtonArrow, {
+                                [styles.toolbarItemSelectButtonArrowDisabled]: disabled,
+                                [styles.toolbarItemSelectButtonArrowActivated]: activated,
                             })}
+                            data-disabled={disabled}
                         >
-                            <CustomLabel
-                                icon={iconToDisplay}
-                                title={title!}
-                                value={value}
-                                label={label}
-                                onChange={handleChange}
-                            />
-                            <div
-                                className={clsx(styles.toolbarItemSelectArrow, {
-                                    [styles.toolbarItemSelectArrowDisabled]: disabled,
-                                })}
-                            >
-                                <MoreDownSingle />
-                            </div>
+                            <MoreDownSingle />
                         </div>
                     </Dropdown>
-                )
-                : (
+
+                </div>
+            )
+            : (
+                // Selector
+                <Dropdown
+                    overlay={<Menu overViewport="scroll" menuType={id} options={options} onOptionSelect={handleSelect} value={value} />}
+                    onVisibleChange={handleDropdownVisibleChange}
+                    disabled={disabled}
+                >
                     <div
                         className={clsx(styles.toolbarItemSelect, {
                             [styles.toolbarItemSelectDisabled]: disabled,
@@ -219,13 +185,13 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
                         <div
                             className={clsx(styles.toolbarItemSelectArrow, {
                                 [styles.toolbarItemSelectArrowDisabled]: disabled,
-                                [styles.toolbarItemSelectArrowActivated]: activated,
                             })}
                         >
                             <MoreDownSingle />
                         </div>
                     </div>
-                );
+                </Dropdown>
+            );
     }
 
     function renderButtonType() {