fix: Select's storybook (#27785)
This commit is contained in:
Michael S. Molina
GitHub
parent
356b0d8ee5
commit
5b1d6b2850
|
|
@ -17,9 +17,9 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { StoryObj } from '@storybook/react';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
import { SelectOptionsType, SelectProps } from './types';
|
||||
|
||||
import Select from './Select';
|
||||
|
||||
export default {
|
||||
|
|
@ -74,87 +74,6 @@ const selectPositions = [
|
|||
},
|
||||
];
|
||||
|
||||
const ARG_TYPES = {
|
||||
options: {
|
||||
defaultValue: options,
|
||||
description: `It defines the options of the Select.
|
||||
The options can be static, an array of options.
|
||||
The options can also be async, a promise that returns an array of options.
|
||||
`,
|
||||
},
|
||||
ariaLabel: {
|
||||
description: `It adds the aria-label tag for accessibility standards.
|
||||
Must be plain English and localized.
|
||||
`,
|
||||
},
|
||||
labelInValue: {
|
||||
defaultValue: true,
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
notFoundContent: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
mappedMode: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
mode: {
|
||||
description: `It defines whether the Select should allow for
|
||||
the selection of multiple options or single. Single by default.
|
||||
`,
|
||||
defaultValue: 'single',
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['single', 'multiple'],
|
||||
},
|
||||
},
|
||||
allowNewOptions: {
|
||||
description: `It enables the user to create new options.
|
||||
Can be used with standard or async select types.
|
||||
Can be used with any mode, single or multiple. False by default.
|
||||
`,
|
||||
},
|
||||
invertSelection: {
|
||||
description: `It shows a stop-outlined icon at the far right of a selected
|
||||
option instead of the default checkmark.
|
||||
Useful to better indicate to the user that by clicking on a selected
|
||||
option it will be de-selected. False by default.
|
||||
`,
|
||||
},
|
||||
optionFilterProps: {
|
||||
description: `It allows to define which properties of the option object
|
||||
should be looked for when searching.
|
||||
By default label and value.
|
||||
`,
|
||||
},
|
||||
oneLine: {
|
||||
defaultValue: false,
|
||||
description: `Sets maxTagCount to 1. The overflow tag is always displayed in
|
||||
the same line, line wrapping is disabled.
|
||||
When the dropdown is open, sets maxTagCount to 0,
|
||||
displays only the overflow tag.
|
||||
Requires '"mode=multiple"'.
|
||||
`,
|
||||
},
|
||||
maxTagCount: {
|
||||
defaultValue: 4,
|
||||
description: `Sets maxTagCount attribute. The overflow tag is displayed in
|
||||
place of the remaining items.
|
||||
Requires '"mode=multiple"'.
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
||||
const mountHeader = (type: String) => {
|
||||
let header;
|
||||
if (type === 'text') {
|
||||
|
|
@ -186,67 +105,143 @@ const generateOptions = (opts: SelectOptionsType, count: number) => {
|
|||
return generated.slice(0, count);
|
||||
};
|
||||
|
||||
export const InteractiveSelect = ({
|
||||
header,
|
||||
options,
|
||||
optionsCount,
|
||||
...args
|
||||
}: SelectProps & { header: string; optionsCount: number }) => (
|
||||
<div
|
||||
style={{
|
||||
width: DEFAULT_WIDTH,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
{...args}
|
||||
options={
|
||||
Array.isArray(options)
|
||||
? generateOptions(options, optionsCount)
|
||||
: options
|
||||
}
|
||||
header={mountHeader(header)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
InteractiveSelect.args = {
|
||||
autoFocus: true,
|
||||
allowNewOptions: false,
|
||||
allowClear: false,
|
||||
autoClearSearchValue: false,
|
||||
allowSelectAll: true,
|
||||
showSearch: true,
|
||||
disabled: false,
|
||||
invertSelection: false,
|
||||
placeholder: 'Select ...',
|
||||
optionFilterProps: ['value', 'label', 'custom'],
|
||||
oneLine: false,
|
||||
maxTagCount: 4,
|
||||
};
|
||||
|
||||
InteractiveSelect.argTypes = {
|
||||
...ARG_TYPES,
|
||||
optionsCount: {
|
||||
defaultValue: options.length,
|
||||
control: {
|
||||
type: 'number',
|
||||
export const InteractiveSelect: StoryObj = {
|
||||
render: ({
|
||||
header,
|
||||
options,
|
||||
optionsCount,
|
||||
...args
|
||||
}: SelectProps & { header: string; optionsCount: number }) => (
|
||||
<div
|
||||
style={{
|
||||
width: DEFAULT_WIDTH,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
{...args}
|
||||
options={
|
||||
Array.isArray(options)
|
||||
? generateOptions(options, optionsCount)
|
||||
: options
|
||||
}
|
||||
header={mountHeader(header)}
|
||||
mode="multiple"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
autoFocus: true,
|
||||
allowNewOptions: false,
|
||||
allowClear: false,
|
||||
autoClearSearchValue: false,
|
||||
allowSelectAll: true,
|
||||
disabled: false,
|
||||
header: 'none',
|
||||
invertSelection: false,
|
||||
labelInValue: true,
|
||||
maxTagCount: 4,
|
||||
mode: 'single',
|
||||
oneLine: false,
|
||||
options,
|
||||
optionsCount: options.length,
|
||||
optionFilterProps: ['value', 'label', 'custom'],
|
||||
placeholder: 'Select ...',
|
||||
showSearch: true,
|
||||
},
|
||||
argTypes: {
|
||||
options: {
|
||||
description: `It defines the options of the Select.
|
||||
The options can be static, an array of options.
|
||||
The options can also be async, a promise that returns an array of options.
|
||||
`,
|
||||
},
|
||||
},
|
||||
header: {
|
||||
defaultValue: 'none',
|
||||
description: `It adds a header on top of the Select. Can be any ReactNode.`,
|
||||
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
|
||||
},
|
||||
pageSize: {
|
||||
description: `It defines how many results should be included in the query response.
|
||||
ariaLabel: {
|
||||
description: `It adds the aria-label tag for accessibility standards.
|
||||
Must be plain English and localized.
|
||||
`,
|
||||
},
|
||||
labelInValue: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
notFoundContent: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
mappedMode: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
mode: {
|
||||
description: `It defines whether the Select should allow for
|
||||
the selection of multiple options or single. Single by default.
|
||||
`,
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['single', 'multiple'],
|
||||
},
|
||||
},
|
||||
allowNewOptions: {
|
||||
description: `It enables the user to create new options.
|
||||
Can be used with standard or async select types.
|
||||
Can be used with any mode, single or multiple. False by default.
|
||||
`,
|
||||
},
|
||||
invertSelection: {
|
||||
description: `It shows a stop-outlined icon at the far right of a selected
|
||||
option instead of the default checkmark.
|
||||
Useful to better indicate to the user that by clicking on a selected
|
||||
option it will be de-selected. False by default.
|
||||
`,
|
||||
},
|
||||
optionFilterProps: {
|
||||
description: `It allows to define which properties of the option object
|
||||
should be looked for when searching.
|
||||
By default label and value.
|
||||
`,
|
||||
},
|
||||
oneLine: {
|
||||
description: `Sets maxTagCount to 1. The overflow tag is always displayed in
|
||||
the same line, line wrapping is disabled.
|
||||
When the dropdown is open, sets maxTagCount to 0,
|
||||
displays only the overflow tag.
|
||||
Requires '"mode=multiple"'.
|
||||
`,
|
||||
},
|
||||
maxTagCount: {
|
||||
description: `Sets maxTagCount attribute. The overflow tag is displayed in
|
||||
place of the remaining items.
|
||||
Requires '"mode=multiple"'.
|
||||
`,
|
||||
},
|
||||
optionsCount: {
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
header: {
|
||||
description: `It adds a header on top of the Select. Can be any ReactNode.`,
|
||||
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
|
||||
},
|
||||
pageSize: {
|
||||
description: `It defines how many results should be included in the query response.
|
||||
Works in async mode only (See the options property).
|
||||
`,
|
||||
},
|
||||
fetchOnlyOnSearch: {
|
||||
description: `It fires a request against the server only after searching.
|
||||
},
|
||||
fetchOnlyOnSearch: {
|
||||
description: `It fires a request against the server only after searching.
|
||||
Works in async mode only (See the options property).
|
||||
Undefined by default.
|
||||
`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue