QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Select's storybook (#27785)

Browse Source
This commit is contained in:
Michael S. Molina
2024-03-29 14:41:54 -03:00
committed by GitHub
parent 356b0d8ee5
commit 5b1d6b2850
1 changed files with 132 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
superset-frontend/src/components/Select/Select.stories.tsx
View File

@@ -17,9 +17,9 @@
* under the License. * under the License.
*/ */
import React from 'react'; import React from 'react';
import { StoryObj } from '@storybook/react';
import ControlHeader from 'src/explore/components/ControlHeader'; import ControlHeader from 'src/explore/components/ControlHeader';
import { SelectOptionsType, SelectProps } from './types'; import { SelectOptionsType, SelectProps } from './types';
import Select from './Select'; import Select from './Select';
export default { 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) => { const mountHeader = (type: String) => {
let header; let header;
if (type === 'text') { if (type === 'text') {
@@ -186,67 +105,143 @@ const generateOptions = (opts: SelectOptionsType, count: number) => {
return generated.slice(0, count); return generated.slice(0, count);
}; };
export const InteractiveSelect = ({ export const InteractiveSelect: StoryObj = {
header, render: ({
options, header,
optionsCount, options,
...args optionsCount,
}: SelectProps & { header: string; optionsCount: number }) => ( ...args
<div }: SelectProps & { header: string; optionsCount: number }) => (
style={{ <div
width: DEFAULT_WIDTH, style={{
}} width: DEFAULT_WIDTH,
> }}
<Select >
{...args} <Select
options={ {...args}
Array.isArray(options) options={
? generateOptions(options, optionsCount) Array.isArray(options)
: options ? generateOptions(options, optionsCount)
} : options
header={mountHeader(header)} }
/> header={mountHeader(header)}
</div> mode="multiple"
); />
</div>
InteractiveSelect.args = { ),
autoFocus: true, args: {
allowNewOptions: false, autoFocus: true,
allowClear: false, allowNewOptions: false,
autoClearSearchValue: false, allowClear: false,
allowSelectAll: true, autoClearSearchValue: false,
showSearch: true, allowSelectAll: true,
disabled: false, disabled: false,
invertSelection: false, header: 'none',
placeholder: 'Select ...', invertSelection: false,
optionFilterProps: ['value', 'label', 'custom'], labelInValue: true,
oneLine: false, maxTagCount: 4,
maxTagCount: 4, mode: 'single',
}; oneLine: false,
options,
InteractiveSelect.argTypes = { optionsCount: options.length,
...ARG_TYPES, optionFilterProps: ['value', 'label', 'custom'],
optionsCount: { placeholder: 'Select ...',
defaultValue: options.length, showSearch: true,
control: { },
type: 'number', 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.
`,
}, },
}, ariaLabel: {
header: { description: `It adds the aria-label tag for accessibility standards.
defaultValue: 'none', Must be plain English and localized.
description: `It adds a header on top of the Select. Can be any ReactNode.`, `,
control: { type: 'inline-radio', options: ['none', 'text', 'control'] }, },
}, labelInValue: {
pageSize: { table: {
description: `It defines how many results should be included in the query response. 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). Works in async mode only (See the options property).
`, `,
}, },
fetchOnlyOnSearch: { fetchOnlyOnSearch: {
description: `It fires a request against the server only after searching. description: `It fires a request against the server only after searching.
Works in async mode only (See the options property). Works in async mode only (See the options property).
Undefined by default. Undefined by default.
`, `,
},
}, },
}; };