feat(toolbar): add property to show custom hint when action is disabl…

…ed (#193) - property `disabledPopoverVisible` in the `ToolbarItemData` type is marked as deprecated - add a new `hintWhenDisabled` property for the `ToolbarItemData` type, which allows to display a custom message in hint when the action is disabled
gravity-ui · Feb 16, 2024 · f08366a · f08366a
1 parent 42be1aa
commit f08366a
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 9 deletions.
diff --git a/src/i18n/menubar/en.json b/src/i18n/menubar/en.json
@@ -19,6 +19,7 @@
   "olist": "Ordered list",
   "list__action_sink": "Sink item",
   "list__action_lift": "Lift item",
+  "list_action_disabled": "Contradicts the logic of the list",
   "checkbox": "Checkbox",
   "quote": "Quote",
   "cut": "Cut",

diff --git a/src/i18n/menubar/ru.json b/src/i18n/menubar/ru.json
@@ -19,6 +19,7 @@
   "olist": "Нумерованный список",
   "list__action_sink": "Увеличить отступ",
   "list__action_lift": "Уменьшить отступ",
+  "list_action_disabled": "Противоречит логике списка",
   "checkbox": "Контрольный список",
   "quote": "Цитата",
   "cut": "Кат",

diff --git a/src/toolbar/ToolbarButton.tsx b/src/toolbar/ToolbarButton.tsx
@@ -23,6 +23,7 @@ export function ToolbarButton<E>({
     editor,
     icon,
     disabledPopoverVisible = true,
+    hintWhenDisabled,
     exec,
     focus,
     onClick,
@@ -35,11 +36,18 @@ export function ToolbarButton<E>({
     const buttonRef = useRef<HTMLElement>(null);
 
     const titleText: string = isFunction(title) ? title() : title;
+    const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
+    const hintWhenDisabledText =
+        typeof hintWhenDisabled === 'string'
+            ? hintWhenDisabled
+            : typeof hintWhenDisabled === 'function'
+              ? hintWhenDisabled()
+              : i18n('toolbar_action_disabled');
 
     return (
         <Popover
-            content={i18n('toolbar_action_disabled')}
-            disabled={!disabledPopoverVisible || !disabled}
+            content={hintWhenDisabledText}
+            disabled={hideHintWhenDisabled}
             tooltipContentClassName={b('action-disabled-tooltip')}
             placement={['bottom']}
         >

diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
@@ -93,17 +93,40 @@ export function ToolbarListButton<E>({
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data
-                        .map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => {
+                        .map((data) => {
+                            const {
+                                id,
+                                title,
+                                icon,
+                                hotkey,
+                                isActive,
+                                isEnable,
+                                exec,
+                                hint,
+                                hintWhenDisabled,
+                                disabledPopoverVisible = true,
+                            } = data;
+
                             const titleText = isFunction(title) ? title() : title;
                             const hintText = isFunction(hint) ? hint() : hint;
                             const disabled = !isEnable(editor);
+
+                            const hideHintWhenDisabled =
+                                hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
+                            const hintWhenDisabledText =
+                                typeof hintWhenDisabled === 'string'
+                                    ? hintWhenDisabled
+                                    : typeof hintWhenDisabled === 'function'
+                                      ? hintWhenDisabled()
+                                      : i18n('toolbar_action_disabled');
+
                             return (
                                 <Popover
                                     className={b('action-disabled-popover')}
                                     tooltipContentClassName={b('action-disabled-tooltip')}
-                                    content={i18n('toolbar_action_disabled')}
+                                    content={hintWhenDisabledText}
                                     placement={'left'}
-                                    disabled={!disabled}
+                                    disabled={hideHintWhenDisabled}
                                     key={id}
                                 >
                                     <Menu.Item

diff --git a/src/toolbar/config/wysiwyg.ts b/src/toolbar/config/wysiwyg.ts
@@ -29,7 +29,7 @@ export const wHistoryGroupConfig: WToolbarGroupData = [
         title: i18n.bind(null, 'undo'),
         icon: icons.undo,
         hotkey: f.toView(A.Undo),
-        disabledPopoverVisible: true,
+        disabledPopoverVisible: false,
         exec: (e) => e.actions.undo.run(),
         isActive: (e) => e.actions.undo.isActive(),
         isEnable: (e) => e.actions.undo.isEnable(),
@@ -40,7 +40,7 @@ export const wHistoryGroupConfig: WToolbarGroupData = [
         title: i18n.bind(null, 'redo'),
         icon: icons.redo,
         hotkey: f.toView(A.Redo),
-        disabledPopoverVisible: true,
+        hintWhenDisabled: false,
         exec: (e) => e.actions.redo.run(),
         isActive: (e) => e.actions.redo.isActive(),
         isEnable: (e) => e.actions.redo.isEnable(),
@@ -204,7 +204,7 @@ export const wListsListConfig: WToolbarListButtonData = {
             title: i18n.bind(null, 'list__action_sink'),
             icon: icons.sink,
             hotkey: f.toView(A.SinkListItem),
-            disabledPopoverVisible: true,
+            hintWhenDisabled: () => i18n('list_action_disabled'),
             exec: (e) => e.actions.sinkListItem.run(),
             isActive: (e) => e.actions.sinkListItem.isActive(),
             isEnable: (e) => e.actions.sinkListItem.isEnable(),
@@ -214,7 +214,7 @@ export const wListsListConfig: WToolbarListButtonData = {
             title: i18n.bind(null, 'list__action_lift'),
             icon: icons.lift,
             hotkey: f.toView(A.LiftListItem),
-            disabledPopoverVisible: true,
+            hintWhenDisabled: () => i18n('list_action_disabled'),
             exec: (e) => e.actions.liftListItem.run(),
             isActive: (e) => e.actions.liftListItem.isActive(),
             isEnable: (e) => e.actions.liftListItem.isEnable(),

diff --git a/src/toolbar/types.ts b/src/toolbar/types.ts
@@ -18,7 +18,20 @@ export type ToolbarItemData<E> = {
     title: string | (() => string);
     hint?: string | (() => string);
     hotkey?: HotkeyProps['value'];
+    /** @deprecated Use _hintWhenDisabled_ setting instead */
     disabledPopoverVisible?: boolean;
+    /**
+     * Show hint when _isEnable()_ returns false
+     *
+     * `false` – don't show hint;
+     *
+     * `true` – show default hint;
+     *
+     * `string` or `() => string` – show hint with custom message.
+     *
+     * @default true
+     */
+    hintWhenDisabled?: boolean | string | (() => string);
     exec(editor: E): void;
     isActive(editor: E): boolean;
     isEnable(editor: E): boolean;