mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
chore: Add docs to the Select component props (#17171)
* Add docs * Add overall description * Remove trailing space
This commit is contained in:
parent
cf284ba3c7
commit
48fd3c185c
@ -75,14 +75,15 @@ const selectPositions = [
|
|||||||
const ARG_TYPES = {
|
const ARG_TYPES = {
|
||||||
options: {
|
options: {
|
||||||
defaultValue: options,
|
defaultValue: options,
|
||||||
table: {
|
description: `It defines the options of the Select.
|
||||||
disable: true,
|
The options can be static, an array of options.
|
||||||
},
|
The options can also be async, a promise that returns an array of options.
|
||||||
|
`,
|
||||||
},
|
},
|
||||||
ariaLabel: {
|
ariaLabel: {
|
||||||
table: {
|
description: `It adds the aria-label tag for accessibility standards.
|
||||||
disable: true,
|
Must be plain English and localized.
|
||||||
},
|
`,
|
||||||
},
|
},
|
||||||
labelInValue: {
|
labelInValue: {
|
||||||
defaultValue: true,
|
defaultValue: true,
|
||||||
@ -101,12 +102,34 @@ const ARG_TYPES = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mode: {
|
mode: {
|
||||||
|
description: `It defines whether the Select should allow for
|
||||||
|
the selection of multiple options or single. Single by default.
|
||||||
|
`,
|
||||||
defaultValue: 'single',
|
defaultValue: 'single',
|
||||||
control: {
|
control: {
|
||||||
type: 'inline-radio',
|
type: 'inline-radio',
|
||||||
options: ['single', 'multiple'],
|
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.
|
||||||
|
`,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const mountHeader = (type: String) => {
|
const mountHeader = (type: String) => {
|
||||||
@ -149,17 +172,19 @@ InteractiveSelect.argTypes = {
|
|||||||
...ARG_TYPES,
|
...ARG_TYPES,
|
||||||
header: {
|
header: {
|
||||||
defaultValue: 'none',
|
defaultValue: 'none',
|
||||||
|
description: `It adds a header on top of the Select. Can be any ReactNode.`,
|
||||||
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
|
control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
|
||||||
},
|
},
|
||||||
pageSize: {
|
pageSize: {
|
||||||
table: {
|
description: `It defines how many results should be included in the query response.
|
||||||
disable: true,
|
Works in async mode only (See the options property).
|
||||||
},
|
`,
|
||||||
},
|
},
|
||||||
fetchOnlyOnSearch: {
|
fetchOnlyOnSearch: {
|
||||||
table: {
|
description: `It fires a request against the server only after searching.
|
||||||
disable: true,
|
Works in async mode only (See the options property).
|
||||||
},
|
Undefined by default.
|
||||||
|
`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -82,17 +82,80 @@ export type OptionsPagePromise = (
|
|||||||
) => Promise<OptionsTypePage>;
|
) => Promise<OptionsTypePage>;
|
||||||
|
|
||||||
export interface SelectProps extends PickedSelectProps {
|
export interface SelectProps extends PickedSelectProps {
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
* */
|
||||||
allowNewOptions?: boolean;
|
allowNewOptions?: boolean;
|
||||||
|
/**
|
||||||
|
* It adds the aria-label tag for accessibility standards.
|
||||||
|
* Must be plain English and localized.
|
||||||
|
*/
|
||||||
ariaLabel: string;
|
ariaLabel: string;
|
||||||
|
/**
|
||||||
|
* It adds a header on top of the Select.
|
||||||
|
* Can be any ReactNode.
|
||||||
|
*/
|
||||||
header?: ReactNode;
|
header?: ReactNode;
|
||||||
|
/**
|
||||||
|
* It fires a request against the server after
|
||||||
|
* the first interaction and not on render.
|
||||||
|
* Works in async mode only (See the options property).
|
||||||
|
* True by default.
|
||||||
|
*/
|
||||||
lazyLoading?: boolean;
|
lazyLoading?: boolean;
|
||||||
|
/**
|
||||||
|
* It defines whether the Select should allow for the
|
||||||
|
* selection of multiple options or single.
|
||||||
|
* Single by default.
|
||||||
|
*/
|
||||||
mode?: 'single' | 'multiple';
|
mode?: 'single' | 'multiple';
|
||||||
|
/**
|
||||||
|
* Deprecated.
|
||||||
|
* Prefer ariaLabel instead.
|
||||||
|
*/
|
||||||
name?: string; // discourage usage
|
name?: string; // discourage usage
|
||||||
|
/**
|
||||||
|
* It allows to define which properties of the option object
|
||||||
|
* should be looked for when searching.
|
||||||
|
* By default label and value.
|
||||||
|
*/
|
||||||
optionFilterProps?: string[];
|
optionFilterProps?: string[];
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
options: OptionsType | OptionsPagePromise;
|
options: OptionsType | OptionsPagePromise;
|
||||||
|
/**
|
||||||
|
* It defines how many results should be included
|
||||||
|
* in the query response.
|
||||||
|
* Works in async mode only (See the options property).
|
||||||
|
*/
|
||||||
pageSize?: number;
|
pageSize?: number;
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
invertSelection?: boolean;
|
invertSelection?: boolean;
|
||||||
|
/**
|
||||||
|
* It fires a request against the server only after
|
||||||
|
* searching.
|
||||||
|
* Works in async mode only (See the options property).
|
||||||
|
* Undefined by default.
|
||||||
|
*/
|
||||||
fetchOnlyOnSearch?: boolean;
|
fetchOnlyOnSearch?: boolean;
|
||||||
|
/**
|
||||||
|
* It provides a callback function when an error
|
||||||
|
* is generated after a request is fired.
|
||||||
|
* Works in async mode only (See the options property).
|
||||||
|
*/
|
||||||
onError?: (error: string) => void;
|
onError?: (error: string) => void;
|
||||||
sortComparator?: (a: AntdLabeledValue, b: AntdLabeledValue) => number;
|
sortComparator?: (a: AntdLabeledValue, b: AntdLabeledValue) => number;
|
||||||
}
|
}
|
||||||
@ -193,6 +256,20 @@ export const propertyComparator = (property: string) => (
|
|||||||
return (a[property] as number) - (b[property] as number);
|
return (a[property] as number) - (b[property] as number);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This component is a customized version of the Antdesign 4.X Select component
|
||||||
|
* https://ant.design/components/select/.
|
||||||
|
* The aim of the component was to combine all the instances of select components throughout the
|
||||||
|
* project under one and to remove the react-select component entirely.
|
||||||
|
* This Select component provides an API that is tested against all the different use cases of Superset.
|
||||||
|
* It limits and overrides the existing Antdesign API in order to keep their usage to the minimum
|
||||||
|
* and to enforce simplification and standardization.
|
||||||
|
* It is divided into two macro categories, Static and Async.
|
||||||
|
* The Static type accepts a static array of options.
|
||||||
|
* The Async type accepts a promise that will return the options.
|
||||||
|
* Each of the categories come with different abilities. For a comprehensive guide please refer to
|
||||||
|
* the storybook in src/components/Select/Select.stories.tsx.
|
||||||
|
*/
|
||||||
const Select = ({
|
const Select = ({
|
||||||
allowNewOptions = false,
|
allowNewOptions = false,
|
||||||
ariaLabel,
|
ariaLabel,
|
||||||
|
Loading…
Reference in New Issue
Block a user