mirror of
https://github.com/apache/superset.git
synced 2026-08-04 13:02:41 +00:00
feat(build): migrate from Prettier to Oxfmt for docs
Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
hainenber
@@ -33,129 +33,130 @@ A versatile select component supporting single and multi-select modes, search fi
|
||||
<StoryWithControls
|
||||
component="Select"
|
||||
props={{
|
||||
mode: "single",
|
||||
placeholder: "Select ...",
|
||||
showSearch: true,
|
||||
allowNewOptions: false,
|
||||
allowClear: false,
|
||||
allowSelectAll: true,
|
||||
disabled: false,
|
||||
invertSelection: false,
|
||||
oneLine: false,
|
||||
maxTagCount: 4,
|
||||
options: [
|
||||
{
|
||||
label: "Such an incredibly awesome long long label",
|
||||
value: "long-label-1"
|
||||
},
|
||||
{
|
||||
label: "Another incredibly awesome long long label",
|
||||
value: "long-label-2"
|
||||
},
|
||||
{
|
||||
label: "Option A",
|
||||
value: "A"
|
||||
},
|
||||
{
|
||||
label: "Option B",
|
||||
value: "B"
|
||||
},
|
||||
{
|
||||
label: "Option C",
|
||||
value: "C"
|
||||
},
|
||||
{
|
||||
label: "Option D",
|
||||
value: "D"
|
||||
},
|
||||
{
|
||||
label: "Option E",
|
||||
value: "E"
|
||||
},
|
||||
{
|
||||
label: "Option F",
|
||||
value: "F"
|
||||
},
|
||||
{
|
||||
label: "Option G",
|
||||
value: "G"
|
||||
},
|
||||
{
|
||||
label: "Option H",
|
||||
value: "H"
|
||||
},
|
||||
{
|
||||
label: "Option I",
|
||||
value: "I"
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "mode",
|
||||
label: "Mode",
|
||||
type: "inline-radio",
|
||||
mode: 'single',
|
||||
placeholder: 'Select ...',
|
||||
showSearch: true,
|
||||
allowNewOptions: false,
|
||||
allowClear: false,
|
||||
allowSelectAll: true,
|
||||
disabled: false,
|
||||
invertSelection: false,
|
||||
oneLine: false,
|
||||
maxTagCount: 4,
|
||||
options: [
|
||||
"single",
|
||||
"multiple"
|
||||
{
|
||||
label: 'Such an incredibly awesome long long label',
|
||||
value: 'long-label-1',
|
||||
},
|
||||
{
|
||||
label: 'Another incredibly awesome long long label',
|
||||
value: 'long-label-2',
|
||||
},
|
||||
{
|
||||
label: 'Option A',
|
||||
value: 'A',
|
||||
},
|
||||
{
|
||||
label: 'Option B',
|
||||
value: 'B',
|
||||
},
|
||||
{
|
||||
label: 'Option C',
|
||||
value: 'C',
|
||||
},
|
||||
{
|
||||
label: 'Option D',
|
||||
value: 'D',
|
||||
},
|
||||
{
|
||||
label: 'Option E',
|
||||
value: 'E',
|
||||
},
|
||||
{
|
||||
label: 'Option F',
|
||||
value: 'F',
|
||||
},
|
||||
{
|
||||
label: 'Option G',
|
||||
value: 'G',
|
||||
},
|
||||
{
|
||||
label: 'Option H',
|
||||
value: 'H',
|
||||
},
|
||||
{
|
||||
label: 'Option I',
|
||||
value: 'I',
|
||||
},
|
||||
],
|
||||
description: "Whether to allow selection of a single option or multiple."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text",
|
||||
description: "Placeholder text when no option is selected."
|
||||
},
|
||||
{
|
||||
name: "showSearch",
|
||||
label: "Show Search",
|
||||
type: "boolean",
|
||||
description: "Whether to show a search input for filtering."
|
||||
},
|
||||
{
|
||||
name: "allowNewOptions",
|
||||
label: "Allow New Options",
|
||||
type: "boolean",
|
||||
description: "Whether users can create new options by typing a value not in the list."
|
||||
},
|
||||
{
|
||||
name: "allowClear",
|
||||
label: "Allow Clear",
|
||||
type: "boolean",
|
||||
description: "Whether to show a clear button to reset the selection."
|
||||
},
|
||||
{
|
||||
name: "allowSelectAll",
|
||||
label: "Allow Select All",
|
||||
type: "boolean",
|
||||
description: "Whether to show a \"Select All\" option in multiple mode."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the select is disabled."
|
||||
},
|
||||
{
|
||||
name: "invertSelection",
|
||||
label: "Invert Selection",
|
||||
type: "boolean",
|
||||
description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
|
||||
},
|
||||
{
|
||||
name: "oneLine",
|
||||
label: "One Line",
|
||||
type: "boolean",
|
||||
description: "Forces tags onto one line with overflow count. Requires multiple mode."
|
||||
},
|
||||
{
|
||||
name: "maxTagCount",
|
||||
label: "Max Tag Count",
|
||||
type: "number",
|
||||
description: "Maximum number of tags to display in multiple mode before showing an overflow count."
|
||||
}
|
||||
]}
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: 'mode',
|
||||
label: 'Mode',
|
||||
type: 'inline-radio',
|
||||
options: ['single', 'multiple'],
|
||||
description: 'Whether to allow selection of a single option or multiple.',
|
||||
},
|
||||
{
|
||||
name: 'placeholder',
|
||||
label: 'Placeholder',
|
||||
type: 'text',
|
||||
description: 'Placeholder text when no option is selected.',
|
||||
},
|
||||
{
|
||||
name: 'showSearch',
|
||||
label: 'Show Search',
|
||||
type: 'boolean',
|
||||
description: 'Whether to show a search input for filtering.',
|
||||
},
|
||||
{
|
||||
name: 'allowNewOptions',
|
||||
label: 'Allow New Options',
|
||||
type: 'boolean',
|
||||
description:
|
||||
'Whether users can create new options by typing a value not in the list.',
|
||||
},
|
||||
{
|
||||
name: 'allowClear',
|
||||
label: 'Allow Clear',
|
||||
type: 'boolean',
|
||||
description: 'Whether to show a clear button to reset the selection.',
|
||||
},
|
||||
{
|
||||
name: 'allowSelectAll',
|
||||
label: 'Allow Select All',
|
||||
type: 'boolean',
|
||||
description: 'Whether to show a "Select All" option in multiple mode.',
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
label: 'Disabled',
|
||||
type: 'boolean',
|
||||
description: 'Whether the select is disabled.',
|
||||
},
|
||||
{
|
||||
name: 'invertSelection',
|
||||
label: 'Invert Selection',
|
||||
type: 'boolean',
|
||||
description:
|
||||
'Shows a stop icon instead of a checkmark on selected options, indicating deselection on click.',
|
||||
},
|
||||
{
|
||||
name: 'oneLine',
|
||||
label: 'One Line',
|
||||
type: 'boolean',
|
||||
description:
|
||||
'Forces tags onto one line with overflow count. Requires multiple mode.',
|
||||
},
|
||||
{
|
||||
name: 'maxTagCount',
|
||||
label: 'Max Tag Count',
|
||||
type: 'number',
|
||||
description:
|
||||
'Maximum number of tags to display in multiple mode before showing an overflow count.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
@@ -280,19 +281,19 @@ function OneLineDemo() {
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
|
||||
| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
|
||||
| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
|
||||
| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
|
||||
| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
|
||||
| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the select is disabled. |
|
||||
| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
|
||||
| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
|
||||
| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
|
||||
| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
|
||||
| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
|
||||
| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
|
||||
| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
|
||||
| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
|
||||
| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
|
||||
| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the select is disabled. |
|
||||
| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
|
||||
| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
|
||||
| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
|
||||
| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
Reference in New Issue
Block a user