Skip to content

Commit

Permalink
chore: add few small toolbar improvements (#25468)
Browse files Browse the repository at this point in the history
* chore: add few small toolbar improvements

* chore: add changes
  • Loading branch information
chpalac authored Nov 1, 2022
1 parent 777800d commit abfb64d
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore: add few small toolbar improvements",
"packageName": "@fluentui/react-toolbar",
"email": "[email protected]",
"dependentChangeType": "none"
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,12 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
}),
};

const [checkedValues, setCheckedValues] = useControllableState({
state: initialState.checkedValues,
defaultState: initialState.defaultCheckedValues,
initialState: {},
const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
checkedValues: props.checkedValues,
defaultCheckedValues: props.defaultCheckedValues,
onCheckedValueChange: props.onCheckedValueChange,
});

const { onCheckedValueChange } = initialState;

const handleToggleButton: ToggableHandler = useEventCallback(
(e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
if (name && value) {
Expand All @@ -57,9 +55,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
} else {
newCheckedItems.push(value);
}

onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });
setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));
}
},
);
Expand All @@ -71,7 +67,6 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
name,
checkedItems: checkedValues?.[name],
});
setCheckedValues(s => ({ ...s, [name]: [value] }));
}
},
);
Expand All @@ -83,3 +78,29 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
checkedValues: checkedValues ?? {},
};
};

/**
* Adds appropriate state values and handlers for selectable items
* i.e checkboxes and radios
*/
const useToolbarSelectableState = (
state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,
) => {
const [checkedValues, setCheckedValues] = useControllableState({
state: state.checkedValues,
defaultState: state.defaultCheckedValues,
initialState: {},
});
const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {
if (onCheckedValueChangeOriginal) {
onCheckedValueChangeOriginal(e, { name, checkedItems });
}

setCheckedValues(s => {
return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
});
});

return [checkedValues, onCheckedValueChange] as const;
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar';

export const ControlledToggleButton = () => {
const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ edit: ['cut', 'paste'] });
const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
textOptions: ['bold', 'italic'],
});
const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
setCheckedValues(s => {
return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
Expand All @@ -12,8 +14,8 @@ export const ControlledToggleButton = () => {

return (
<Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
<ToolbarToggleButton icon={<TextBold24Regular />} name="edit" value="cut" />
<ToolbarToggleButton icon={<TextItalic24Regular />} name="edit" value="paste" />
<ToolbarToggleButton icon={<TextBold24Regular />} name="textOptions" value="bold" />
<ToolbarToggleButton icon={<TextItalic24Regular />} name="textOptions" value="italic" />
</Toolbar>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -128,13 +128,15 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
overflowId="underline-1"
overflowGroupId="1"
appearance="subtle"
aria-label="Italic option ( Group 1 )"
icon={<TextUnderline16Regular />}
/>

<ToolbarOverflowButton
overflowId="bold-1"
overflowGroupId="1"
appearance="subtle"
aria-label="Bold option ( Group 1 )"
icon={<TextBold16Regular />}
/>

Expand All @@ -144,34 +146,39 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
overflowId="underline-2"
overflowGroupId="2"
appearance="subtle"
aria-label="Underline option ( Group 2 )"
icon={<TextUnderline16Regular />}
/>

<ToolbarOverflowButton
overflowId="bold-2"
overflowGroupId="2"
appearance="subtle"
aria-label="Bold option ( Group 2 )"
icon={<TextBold16Regular />}
/>

<ToolbarOverflowButton
overflowId="italic-1"
overflowGroupId="2"
appearance="subtle"
aria-label="Italic option ( Group 2 )"
icon={<TextItalic16Regular />}
/>

<ToolbarOverflowButton
overflowId="underline-3"
overflowGroupId="2"
appearance="subtle"
aria-label="Underline option ( Group 2 )"
icon={<TextUnderline16Regular />}
/>

<ToolbarOverflowButton
overflowId="bold-3"
overflowGroupId="2"
appearance="subtle"
aria-label="Bold option ( Group 2 )"
icon={<TextBold16Regular />}
/>

Expand All @@ -181,20 +188,23 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
overflowId="underline-4"
overflowGroupId="3"
appearance="subtle"
aria-label="Underline option ( Group 3 )"
icon={<TextUnderline16Regular />}
/>

<ToolbarOverflowButton
overflowId="bold-4"
overflowGroupId="3"
appearance="subtle"
aria-label="Bold option ( Group 3 )"
icon={<TextBold16Regular />}
/>

<ToolbarOverflowButton
overflowId="italic-2"
overflowGroupId="3"
appearance="subtle"
aria-label="Italic option ( Group 3 )"
icon={<TextItalic16Regular />}
/>

Expand Down

0 comments on commit abfb64d

Please sign in to comment.