Skip to content

Commit

Permalink
Split out popover and flyout examples into their own subcomponents fo…
Browse files Browse the repository at this point in the history
…r readability
  • Loading branch information
cee-chen committed Apr 15, 2024
1 parent d751965 commit 2476f38
Showing 1 changed file with 89 additions and 69 deletions.
158 changes: 89 additions & 69 deletions src-docs/src/views/selectable/selectable_sizing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
EuiPopoverFooter,
EuiPopoverTitle,
EuiSelectable,
EuiSelectableOption,
type EuiSelectableOption,
type EuiSelectableProps,
EuiSpacer,
EuiTitle,
EuiInputPopover,
Expand Down Expand Up @@ -59,55 +60,103 @@ const OPTIONS: EuiSelectableOption[] = [
];

export default () => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

const [options, setOptions] = useState<EuiSelectableOption[]>(OPTIONS);
const onChange = (options: EuiSelectableOption[]) => {
setOptions(options);
};

return (
<>
<EuiPopover
panelPaddingSize="none"
button={
<EuiButton
iconType="arrowDown"
iconSide="right"
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
>
Show popover
</EuiButton>
}
isOpen={isPopoverOpen}
closePopover={() => setIsPopoverOpen(false)}
<SelectablePopover options={options} onChange={onChange} />
<EuiSpacer />

<SelectableFlyout options={options} onChange={onChange} />
<EuiSpacer />

<EuiTitle size="xxs">
<h4>In an input popover</h4>
</EuiTitle>
<EuiSpacer size="s" />
<SelectableInputPopover />
<EuiSpacer />

<EuiTitle size="xxs">
<h4>
Using <EuiCode language="js">listProps.bordered=true</EuiCode> and{' '}
<EuiCode language="js">
listProps.paddingSize=&quot;none&quot;
</EuiCode>
</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiSelectable
aria-label="Bordered selectable example"
options={options}
onChange={onChange}
style={{ width: 300 }}
listProps={{ bordered: true, paddingSize: 'none' }}
>
<EuiSelectable
searchable
searchProps={{
placeholder: 'Filter list',
compressed: true,
}}
options={options}
onChange={onChange}
{(list) => list}
</EuiSelectable>
</>
);
};

const SelectablePopover = (
props: Pick<EuiSelectableProps, 'options' | 'onChange'>
) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const { options, onChange } = props;

return (
<EuiPopover
panelPaddingSize="none"
button={
<EuiButton
iconType="arrowDown"
iconSide="right"
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
>
{(list, search) => (
<div style={{ width: 240 }}>
<EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
{list}
<EuiPopoverFooter paddingSize="s">
<EuiButton size="s" fullWidth>
Manage this list
</EuiButton>
</EuiPopoverFooter>
</div>
)}
</EuiSelectable>
</EuiPopover>
Show popover
</EuiButton>
}
isOpen={isPopoverOpen}
closePopover={() => setIsPopoverOpen(false)}
>
<EuiSelectable
aria-label="Selectable + popover example"
searchable
searchProps={{
placeholder: 'Filter list',
compressed: true,
}}
options={options}
onChange={onChange}
>
{(list, search) => (
<div style={{ width: 240 }}>
<EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
{list}
<EuiPopoverFooter paddingSize="s">
<EuiButton size="s" fullWidth>
Manage this list
</EuiButton>
</EuiPopoverFooter>
</div>
)}
</EuiSelectable>
</EuiPopover>
);
};

<EuiSpacer />
const SelectableFlyout = (
props: Pick<EuiSelectableProps, 'options' | 'onChange'>
) => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const { options, onChange } = props;

return (
<>
<EuiButton onClick={() => setIsFlyoutVisible(true)}>
Show flyout
</EuiButton>
Expand All @@ -119,7 +168,7 @@ export default () => {
aria-labelledby="selectableFlyout"
>
<EuiSelectable
aria-label="Popover example"
aria-label="Selectable + flyout example"
searchable
options={options}
onChange={onChange}
Expand All @@ -145,35 +194,6 @@ export default () => {
</EuiFlyoutFooter>
</EuiFlyout>
)}

<EuiSpacer />

<EuiTitle size="xxs">
<h4>In an input popover</h4>
</EuiTitle>
<EuiSpacer size="s" />
<SelectableInputPopover />
<EuiSpacer />

<EuiTitle size="xxs">
<h4>
Using <EuiCode language="js">listProps.bordered=true</EuiCode> and{' '}
<EuiCode language="js">
listProps.paddingSize=&quot;none&quot;
</EuiCode>
</h4>
</EuiTitle>
<EuiSpacer size="s" />

<EuiSelectable
aria-label="Bordered selectable example"
options={options}
onChange={onChange}
style={{ width: 300 }}
listProps={{ bordered: true, paddingSize: 'none' }}
>
{(list) => list}
</EuiSelectable>
</>
);
};
Expand Down

0 comments on commit 2476f38

Please sign in to comment.