Skip to content

Commit f713911

Browse files
bishalshrestha013bishalshrestha013
authored
feat(ui): allow to customize select-all label in Select component (#1550)
* refactor: remove hardcoded label * refactor: add translations for description of props * refactor: update helperText translation
1 parent c1a997c commit f713911

5 files changed

Lines changed: 231 additions & 176 deletions

File tree

‎apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx‎

Lines changed: 174 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -13,183 +13,184 @@ type Option<T = string | number> = {
1313
[key: string]: unknown;
1414
};
1515

16-
const data = [
17-
{
18-
id: 1,
19-
prop: "autoSortOptions",
20-
type: "boolean",
21-
default: "true",
22-
description:
23-
"By default, options are sorted alphabetically by label. If set to false, the order of options is preserved.",
24-
},
25-
{
26-
id: 2,
27-
prop: "autoSelectSingleOption",
28-
type: "boolean",
29-
default: "false",
30-
description:
31-
"If true, in case of single option it automatically gets selected.",
32-
},
33-
{
34-
id: 3,
35-
prop: "className",
36-
type: "string",
37-
default: "-",
38-
description: "Additional CSS classes for styling.",
39-
},
40-
{
41-
id: 4,
42-
prop: "disabled",
43-
type: "boolean",
44-
default: "-",
45-
description: "Disables the select component.",
46-
},
47-
{
48-
id: 5,
49-
prop: "disableGroupSelect",
50-
type: "boolean",
51-
default: "-",
52-
description:
53-
"Remove checkbox on group label for selecting all group options.",
54-
},
55-
{
56-
id: 6,
57-
prop: "errorMessage",
58-
type: "string",
59-
default: "-",
60-
description: "Displays an error message below the component.",
61-
},
62-
{
63-
id: 7,
64-
prop: "enableTooltip",
65-
type: "boolean",
66-
default: "false",
67-
description:
68-
"When enableTooltip is true, select component renders the <Tooltip> component for the selected value.",
69-
},
70-
{
71-
id: 8,
72-
prop: "hasError",
73-
type: "boolean",
74-
default: "-",
75-
description: "If true, error in component.",
76-
},
77-
{
78-
id: 9,
79-
prop: "helperText",
80-
type: "string",
81-
default: "-",
82-
description: "Displays an error message below the component.",
83-
},
84-
{
85-
id: 10,
86-
prop: "hideIfSingleOption",
87-
type: "boolean",
88-
default: "false",
89-
description:
90-
"If there is only one option, and multiple is false, the Select component will not render the dropdown at all when set to true.",
91-
},
92-
{
93-
id: 11,
94-
prop: "label",
95-
type: "string",
96-
default: "-",
97-
description: "Label of the component.",
98-
},
99-
{
100-
id: 12,
101-
prop: "labelKey",
102-
type: "string",
103-
default: "-",
104-
description: "The key in option object to use as the display label.",
105-
},
106-
{
107-
id: 13,
108-
prop: "multiple",
109-
type: "boolean",
110-
default: "false",
111-
description: "If true, multiple selection is enabled.",
112-
},
113-
{
114-
id: 14,
115-
prop: "name",
116-
type: "string",
117-
default: "-",
118-
description: "Name of the component.",
119-
},
120-
{
121-
id: 15,
122-
prop: "options",
123-
type: "Option[] | GroupedOption[]",
124-
default: "-",
125-
description: "Options to pass in the select component.",
126-
},
127-
{
128-
id: 16,
129-
prop: "placeholder",
130-
type: "string",
131-
default: "-",
132-
description: "Placeholder in the component.",
133-
},
134-
{
135-
id: 17,
136-
prop: "showRemoveSelection",
137-
type: "boolean",
138-
default: "true",
139-
description: "If true, icon to remove selected options is visible.",
140-
},
141-
{
142-
id: 18,
143-
prop: "tooltipOptions",
144-
type: "TooltipOptions",
145-
default: "-",
146-
description:
147-
"Options to customize the tooltip’s behavior(example: position, offset).",
148-
},
149-
{
150-
id: 19,
151-
prop: "value",
152-
type: "Value",
153-
default: "-",
154-
description: "Selected values of the component.",
155-
},
156-
{
157-
id: 20,
158-
prop: "valueKey",
159-
type: "string",
160-
default: "-",
161-
description: "The key in option object to use as value.",
162-
},
163-
{
164-
id: 21,
165-
prop: "renderOption",
166-
type: "(option: Option<T> | GroupedOption<T>) => React.ReactNode",
167-
default: "-",
168-
description: "Function to be called to render custom select options.",
169-
},
170-
{
171-
id: 22,
172-
prop: "renderValue",
173-
type: `(
174-
value?: T | T[],
175-
options?: Option<T>[] | GroupedOption<T>[]
176-
) => React.ReactNode`,
177-
default: "-",
178-
description: "Function to be called to render custom select value.",
179-
},
180-
{
181-
id: 23,
182-
prop: "onChange",
183-
type: " (newValue: T | T[]) => void",
184-
default: "-",
185-
description: "Function to be called when value changes.",
186-
},
187-
];
188-
18916
export const SelectDemo = () => {
19017
const [t] = useTranslation("ui");
19118
const navigate = useNavigate();
19219

20+
const data = [
21+
{
22+
id: 1,
23+
prop: "autoSortOptions",
24+
type: "boolean",
25+
default: "true",
26+
description: t("select.propertiesDescription.autoSortOptions"),
27+
},
28+
{
29+
id: 2,
30+
prop: "autoSelectSingleOption",
31+
type: "boolean",
32+
default: "false",
33+
description: t("select.propertiesDescription.autoSelectSingleOption"),
34+
},
35+
{
36+
id: 3,
37+
prop: "className",
38+
type: "string",
39+
default: "-",
40+
description: t("select.propertiesDescription.className"),
41+
},
42+
{
43+
id: 4,
44+
prop: "disabled",
45+
type: "boolean",
46+
default: "-",
47+
description: t("select.propertiesDescription.disabled"),
48+
},
49+
{
50+
id: 5,
51+
prop: "disableGroupSelect",
52+
type: "boolean",
53+
default: "-",
54+
description: t("select.propertiesDescription.disableGroupSelect"),
55+
},
56+
{
57+
id: 6,
58+
prop: "errorMessage",
59+
type: "string",
60+
default: "-",
61+
description: t("select.propertiesDescription.errorMessage"),
62+
},
63+
{
64+
id: 7,
65+
prop: "enableTooltip",
66+
type: "boolean",
67+
default: "false",
68+
description: t("select.propertiesDescription.enableTooltip"),
69+
},
70+
{
71+
id: 8,
72+
prop: "hasError",
73+
type: "boolean",
74+
default: "-",
75+
description: t("select.propertiesDescription.hasError"),
76+
},
77+
{
78+
id: 9,
79+
prop: "helperText",
80+
type: "string",
81+
default: "-",
82+
description: t("select.propertiesDescription.helperText"),
83+
},
84+
{
85+
id: 10,
86+
prop: "hideIfSingleOption",
87+
type: "boolean",
88+
default: "false",
89+
description: t("select.propertiesDescription.hideIfSingleOption"),
90+
},
91+
{
92+
id: 11,
93+
prop: "label",
94+
type: "string",
95+
default: "-",
96+
description: t("select.propertiesDescription.label"),
97+
},
98+
{
99+
id: 12,
100+
prop: "labelKey",
101+
type: "string",
102+
default: "-",
103+
description: t("select.propertiesDescription.labelKey"),
104+
},
105+
{
106+
id: 13,
107+
prop: "multiple",
108+
type: "boolean",
109+
default: "false",
110+
description: t("select.propertiesDescription.multiple"),
111+
},
112+
{
113+
id: 14,
114+
prop: "name",
115+
type: "string",
116+
default: "-",
117+
description: t("select.propertiesDescription.name"),
118+
},
119+
{
120+
id: 15,
121+
prop: "options",
122+
type: "Option[] | GroupedOption[]",
123+
default: "-",
124+
description: t("select.propertiesDescription.options"),
125+
},
126+
{
127+
id: 16,
128+
prop: "placeholder",
129+
type: "string",
130+
default: "-",
131+
description: t("select.propertiesDescription.placeholder"),
132+
},
133+
{
134+
id: 17,
135+
prop: "selectAllLabel",
136+
type: "string",
137+
default: "Select all",
138+
description: t("select.propertiesDescription.selectAllLabel"),
139+
},
140+
{
141+
id: 18,
142+
prop: "showRemoveSelection",
143+
type: "boolean",
144+
default: "true",
145+
description: t("select.propertiesDescription.showRemoveSelection"),
146+
},
147+
{
148+
id: 19,
149+
prop: "tooltipOptions",
150+
type: "TooltipOptions",
151+
default: "-",
152+
description: t("select.propertiesDescription.tooltipOptions"),
153+
},
154+
{
155+
id: 20,
156+
prop: "value",
157+
type: "Value",
158+
default: "-",
159+
description: t("select.propertiesDescription.value"),
160+
},
161+
{
162+
id: 21,
163+
prop: "valueKey",
164+
type: "string",
165+
default: "-",
166+
description: t("select.propertiesDescription.valueKey"),
167+
},
168+
{
169+
id: 22,
170+
prop: "renderOption",
171+
type: "(option: Option<T> | GroupedOption<T>) => React.ReactNode",
172+
default: "-",
173+
description: t("select.propertiesDescription.renderOption"),
174+
},
175+
{
176+
id: 23,
177+
prop: "renderValue",
178+
type: `(
179+
value?: T | T[],
180+
options?: Option<T>[] | GroupedOption<T>[]
181+
) => React.ReactNode`,
182+
default: "-",
183+
description: t("select.propertiesDescription.renderValue"),
184+
},
185+
{
186+
id: 24,
187+
prop: "onChange",
188+
type: " (newValue: T | T[]) => void",
189+
default: "-",
190+
description: t("select.propertiesDescription.onChange"),
191+
},
192+
];
193+
193194
const [multiselectValue, setMultiselectValue] = useState<string[]>([]);
194195

195196
const [singleSelectValue, setSingleSelectValue] = useState<string>("");

‎apps/demo/src/locales/en/ui.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,32 @@
375375
"label": "Country",
376376
"multiSelectPlaceholder": "Select countries",
377377
"placeholder": "Select a country",
378+
"propertiesDescription": {
379+
"autoSortOptions": "By default, options are sorted alphabetically by label. If set to false, the order of options is preserved.",
380+
"autoSelectSingleOption": "If true, in case of single option it automatically gets selected.",
381+
"className": "Additional CSS classes for styling.",
382+
"disabled": "Disables the select component.",
383+
"disableGroupSelect": "Remove checkbox on group label for selecting all group options.",
384+
"errorMessage": "Displays an error message below the component.",
385+
"enableTooltip": "When enableTooltip is true, select component renders the <Tooltip> component for the selected value.",
386+
"hasError": "If true, error in component.",
387+
"helperText": "Displays a helper text below the component.",
388+
"hideIfSingleOption": "If there is only one option, and multiple is false, the Select component will not render the dropdown at all when set to true.",
389+
"label": "Label of the component.",
390+
"labelKey": "The key in option object to use as the display label.",
391+
"multiple": "If true, multiple selection is enabled.",
392+
"name": "Name of the component.",
393+
"options": "Options to pass in the select component.",
394+
"placeholder": "Placeholder in the component.",
395+
"selectAllLabel": "Label for select all option.",
396+
"showRemoveSelection": "If true, icon to remove selected options is visible.",
397+
"tooltipOptions": "Options to customize the tooltip’s behavior(example: position, offset).",
398+
"value": "Selected values of the component.",
399+
"valueKey": "The key in option object to use as value.",
400+
"renderOption": "Function to be called to render custom select options.",
401+
"renderValue": "Function to be called to render custom select value.",
402+
"onChange": "Function to be called when value changes."
403+
},
378404
"title": "Select",
379405
"usage": {
380406
"basic": "Basic",

0 commit comments

Comments
 (0)