Skip to content

Commit 367a18e

Browse files
veekaysveekays
authored
Merge pull request #2682 from innovaccer/develop
Develop
2 parents e8c9285 + 09a5404 commit 367a18e

File tree

12 files changed

+287
-192
lines changed

12 files changed

+287
-192
lines changed

‎core/common.type.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@ export type PositionType =
117117
export type OptionType = {
118118
label: string;
119119
value: any;
120+
/**
121+
* Optional unique identifier for distinguishing options when labels repeat.
122+
*/
123+
id?: string | number;
120124
isSelectedOption?: boolean;
121125
};
122126

‎core/components/organisms/select/Select.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface SelectProps extends BaseProps {
2525
* OptionType: {
2626
* label: string;
2727
* value: any;
28+
* id?: string | number;
2829
* }
2930
* </pre>
3031
*/
@@ -60,6 +61,7 @@ export interface SelectProps extends BaseProps {
6061
* OptionType: {
6162
* label: string;
6263
* value: any;
64+
* id?: string | number;
6365
* }
6466
* </pre>
6567
*/

‎core/components/organisms/select/SelectOption.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@ export interface SelectOptionProps extends BaseProps {
1616
children: React.ReactNode;
1717
/**
1818
* The data associated with the option.
19+
* <pre style="font-family: monospace; font-size: 13px; background: #f8f8f8">
20+
* OptionType: {
21+
* label: string;
22+
* value: any;
23+
* id?: string | number;
24+
* }
25+
* </pre>
1926
*/
2027
option: OptionType;
2128
/**

‎core/components/organisms/select/__stories__/multiselect/multiselect.story.jsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ import { action } from '@/utils/action';
55
// CSF format story
66
export const multiSelect = () => {
77
const medicineList = [
8-
{ label: 'Aspirin', value: 'Aspirin' },
9-
{ label: 'Paracetamol', value: 'Paracetamol' },
10-
{ label: 'Lisinopril', value: 'Lisinopril' },
11-
{ label: 'Simvastatin', value: 'Simvastatin' },
12-
{ label: 'Amoxicillin', value: 'Amoxicillin' },
13-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
14-
{ label: 'Metformin', value: 'Metformin' },
15-
{ label: 'Omeprazole', value: 'Omeprazole' },
16-
{ label: 'Diazepam', value: 'Diazepam' },
17-
{ label: 'Levothyroxine', value: 'Levothyroxine' },
8+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
9+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' },
10+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril' },
11+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin' },
12+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin' },
13+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
14+
{ id: 'metformin', label: 'Metformin', value: 'Metformin' },
15+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole' },
16+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam' },
17+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine' },
1818
];
1919

2020
const onSelectHandler = (selectedOption) => {
@@ -30,9 +30,9 @@ export const multiSelect = () => {
3030
return (
3131
<Select triggerOptions={{ setLabel: setLableHandler }} onSelect={onSelectHandler} multiSelect={true}>
3232
<Select.List>
33-
{medicineList.map((item, key) => {
33+
{medicineList.map((item) => {
3434
return (
35-
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
35+
<Select.Option key={item.id} option={{ label: item.label, value: item.value, id: item.id }}>
3636
{item.label}
3737
</Select.Option>
3838
);
@@ -44,16 +44,16 @@ export const multiSelect = () => {
4444

4545
const customCode = `() => {
4646
const medicineList = [
47-
{ label: 'Aspirin', value: 'Aspirin' },
48-
{ label: 'Paracetamol', value: 'Paracetamol' },
49-
{ label: 'Lisinopril', value: 'Lisinopril' },
50-
{ label: 'Simvastatin', value: 'Simvastatin' },
51-
{ label: 'Amoxicillin', value: 'Amoxicillin' },
52-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
53-
{ label: 'Metformin', value: 'Metformin' },
54-
{ label: 'Omeprazole', value: 'Omeprazole' },
55-
{ label: 'Diazepam', value: 'Diazepam' },
56-
{ label: 'Levothyroxine', value: 'Levothyroxine' },
47+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
48+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' },
49+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril' },
50+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin' },
51+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin' },
52+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
53+
{ id: 'metformin', label: 'Metformin', value: 'Metformin' },
54+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole' },
55+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam' },
56+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine' },
5757
];
5858
5959
@@ -70,14 +70,14 @@ const customCode = `() => {
7070
return (
7171
<Select triggerOptions={{ setLabel: setLableHandler }} onSelect={onSelectHandler} multiSelect={true} >
7272
<Select.List>
73-
{medicineList.map((item, key) => {
74-
return (
75-
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
76-
{item.label}
77-
</Select.Option>
78-
);
79-
})}
80-
</Select.List>
73+
{medicineList.map((item) => {
74+
return (
75+
<Select.Option key={item.id} option={{ label: item.label, value: item.value, id: item.id }}>
76+
{item.label}
77+
</Select.Option>
78+
);
79+
})}
80+
</Select.List>
8181
</Select>
8282
);
8383
}`;

‎core/components/organisms/select/__stories__/multiselect/preFilledValue.story.jsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ import { action } from '@/utils/action';
55
// CSF format story
66
export const preFilledValue = () => {
77
const medicineList = [
8-
{ label: 'Aspirin', value: 'Aspirin' },
9-
{ label: 'Paracetamol', value: 'Paracetamol' },
10-
{ label: 'Lisinopril', value: 'Lisinopril' },
11-
{ label: 'Simvastatin', value: 'Simvastatin' },
12-
{ label: 'Amoxicillin', value: 'Amoxicillin' },
13-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
14-
{ label: 'Metformin', value: 'Metformin' },
15-
{ label: 'Omeprazole', value: 'Omeprazole' },
16-
{ label: 'Diazepam', value: 'Diazepam' },
17-
{ label: 'Levothyroxine', value: 'Levothyroxine' },
8+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
9+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' },
10+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril' },
11+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin' },
12+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin' },
13+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
14+
{ id: 'metformin', label: 'Metformin', value: 'Metformin' },
15+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole' },
16+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam' },
17+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine' },
1818
];
1919

2020
const onSelectHandler = (selectedOption) => {
@@ -31,16 +31,16 @@ export const preFilledValue = () => {
3131
<Select
3232
triggerOptions={{ setLabel: setLableHandler }}
3333
value={[
34-
{ label: 'Aspirin', value: 'Aspirin' },
35-
{ label: 'Paracetamol', value: 'Paracetamol' },
34+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
35+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' },
3636
]}
3737
onSelect={onSelectHandler}
3838
multiSelect={true}
3939
>
4040
<Select.List>
41-
{medicineList.map((item, key) => {
41+
{medicineList.map((item) => {
4242
return (
43-
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
43+
<Select.Option key={item.id} option={{ label: item.label, value: item.value, id: item.id }}>
4444
{item.label}
4545
</Select.Option>
4646
);
@@ -52,16 +52,16 @@ export const preFilledValue = () => {
5252

5353
const customCode = `() => {
5454
const medicineList = [
55-
{ label: 'Aspirin', value: 'Aspirin' },
56-
{ label: 'Paracetamol', value: 'Paracetamol' },
57-
{ label: 'Lisinopril', value: 'Lisinopril' },
58-
{ label: 'Simvastatin', value: 'Simvastatin' },
59-
{ label: 'Amoxicillin', value: 'Amoxicillin' },
60-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
61-
{ label: 'Metformin', value: 'Metformin' },
62-
{ label: 'Omeprazole', value: 'Omeprazole' },
63-
{ label: 'Diazepam', value: 'Diazepam' },
64-
{ label: 'Levothyroxine', value: 'Levothyroxine' },
55+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
56+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' },
57+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril' },
58+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin' },
59+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin' },
60+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin' },
61+
{ id: 'metformin', label: 'Metformin', value: 'Metformin' },
62+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole' },
63+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam' },
64+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine' },
6565
];
6666
6767
@@ -79,16 +79,16 @@ const customCode = `() => {
7979
<Select
8080
triggerOptions={{ setLabel: setLableHandler }}
8181
value={[
82-
{ label: 'Aspirin', value: 'Aspirin' },
83-
{ label: 'Paracetamol', value: 'Paracetamol' }
82+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin' },
83+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol' }
8484
]}
8585
onSelect={onSelectHandler}
8686
multiSelect={true}
8787
>
8888
<Select.List>
89-
{medicineList.map((item, key) => {
89+
{medicineList.map((item) => {
9090
return (
91-
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
91+
<Select.Option key={item.id} option={{ label: item.label, value: item.value, id: item.id }}>
9292
{item.label}
9393
</Select.Option>
9494
);

‎core/components/organisms/select/__stories__/multiselect/selectedItem.story.jsx‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,25 @@ import { action } from '@/utils/action';
55
// CSF format story
66
export const selectedItem = () => {
77
const medicineList = [
8-
{ label: 'Aspirin', value: 'Aspirin', group: 'Painkillers' },
9-
{ label: 'Paracetamol', value: 'Paracetamol', group: 'Painkillers' },
10-
{ label: 'Lisinopril', value: 'Lisinopril', group: 'Hypertension' },
11-
{ label: 'Simvastatin', value: 'Simvastatin', group: 'Antibiotics' },
12-
{ label: 'Amoxicillin', value: 'Amoxicillin', group: 'Antibiotics' },
13-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin', group: 'Antibiotics' },
14-
{ label: 'Omeprazole', value: 'Omeprazole', group: 'Painkillers' },
15-
{ label: 'Diazepam', value: 'Diazepam', group: 'Antibiotics' },
16-
{ label: 'Levothyroxine', value: 'Levothyroxine', group: 'Antibiotics' },
17-
{ label: 'Ibuprofen', value: 'Ibuprofen', group: 'Painkillers' },
18-
{ label: 'Prednisone', value: 'Prednisone', group: 'Painkillers' },
19-
{ label: 'Metoprolol', value: 'Metoprolol', group: 'Hypertension' },
8+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin', group: 'Painkillers' },
9+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol', group: 'Painkillers' },
10+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril', group: 'Hypertension' },
11+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin', group: 'Antibiotics' },
12+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin', group: 'Antibiotics' },
13+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin', group: 'Antibiotics' },
14+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole', group: 'Painkillers' },
15+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam', group: 'Antibiotics' },
16+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine', group: 'Antibiotics' },
17+
{ id: 'ibuprofen', label: 'Ibuprofen', value: 'Ibuprofen', group: 'Painkillers' },
18+
{ id: 'prednisone', label: 'Prednisone', value: 'Prednisone', group: 'Painkillers' },
19+
{ id: 'metoprolol', label: 'Metoprolol', value: 'Metoprolol', group: 'Hypertension' },
2020
];
2121

2222
const [selectedOptions, setSelectedOptions] = React.useState([]);
2323
const selectRef = React.useRef(null);
2424

25+
const getOptionIdentifier = (option) => option?.id ?? option?.value;
26+
2527
const handleSelect = (selectedOption) => {
2628
action('selectedOption', selectedOption);
2729
selectRef.current.setFocusFirstItem();
@@ -33,7 +35,10 @@ export const selectedItem = () => {
3335
};
3436

3537
const groupedMedicine = medicineList.reduce((acc, item) => {
36-
const groupKey = selectedOptions.find((opt) => opt.value === item.value) ? 'Selected Items' : item.group;
38+
const itemIdentifier = getOptionIdentifier(item);
39+
const groupKey = selectedOptions.find((opt) => getOptionIdentifier(opt) === itemIdentifier)
40+
? 'Selected Items'
41+
: item.group;
3742
if (!acc[groupKey]) {
3843
acc[groupKey] = [];
3944
}
@@ -56,7 +61,7 @@ export const selectedItem = () => {
5661
Selected Items
5762
</Text>
5863
{selectedOptions.map((option) => (
59-
<Select.Option key={option.value} option={option}>
64+
<Select.Option key={getOptionIdentifier(option)} option={option}>
6065
{option.label}
6166
</Select.Option>
6267
))}
@@ -71,7 +76,10 @@ export const selectedItem = () => {
7176
{group}
7277
</Text>
7378
{groupedMedicine[group].map((item) => (
74-
<Select.Option key={item.value} option={{ label: item.label, value: item.value }}>
79+
<Select.Option
80+
key={getOptionIdentifier(item)}
81+
option={{ label: item.label, value: item.value, id: item.id }}
82+
>
7583
{item.label}
7684
</Select.Option>
7785
))}
@@ -85,18 +93,18 @@ export const selectedItem = () => {
8593

8694
const customCode = `() => {
8795
const medicineList = [
88-
{ label: 'Aspirin', value: 'Aspirin', group: 'Painkillers' },
89-
{ label: 'Paracetamol', value: 'Paracetamol', group: 'Painkillers' },
90-
{ label: 'Lisinopril', value: 'Lisinopril', group: 'Hypertension' },
91-
{ label: 'Simvastatin', value: 'Simvastatin', group: 'Antibiotics' },
92-
{ label: 'Amoxicillin', value: 'Amoxicillin', group: 'Antibiotics' },
93-
{ label: 'Ciprofloxacin', value: 'Ciprofloxacin', group: 'Antibiotics' },
94-
{ label: 'Omeprazole', value: 'Omeprazole', group: 'Painkillers' },
95-
{ label: 'Diazepam', value: 'Diazepam', group: 'Antibiotics' },
96-
{ label: 'Levothyroxine', value: 'Levothyroxine', group: 'Antibiotics' },
97-
{ label: 'Ibuprofen', value: 'Ibuprofen', group: 'Painkillers' },
98-
{ label: 'Prednisone', value: 'Prednisone', group: 'Painkillers' },
99-
{ label: 'Metoprolol', value: 'Metoprolol', group: 'Hypertension' },
96+
{ id: 'aspirin', label: 'Aspirin', value: 'Aspirin', group: 'Painkillers' },
97+
{ id: 'paracetamol', label: 'Paracetamol', value: 'Paracetamol', group: 'Painkillers' },
98+
{ id: 'lisinopril', label: 'Lisinopril', value: 'Lisinopril', group: 'Hypertension' },
99+
{ id: 'simvastatin', label: 'Simvastatin', value: 'Simvastatin', group: 'Antibiotics' },
100+
{ id: 'amoxicillin', label: 'Amoxicillin', value: 'Amoxicillin', group: 'Antibiotics' },
101+
{ id: 'ciprofloxacin', label: 'Ciprofloxacin', value: 'Ciprofloxacin', group: 'Antibiotics' },
102+
{ id: 'omeprazole', label: 'Omeprazole', value: 'Omeprazole', group: 'Painkillers' },
103+
{ id: 'diazepam', label: 'Diazepam', value: 'Diazepam', group: 'Antibiotics' },
104+
{ id: 'levothyroxine', label: 'Levothyroxine', value: 'Levothyroxine', group: 'Antibiotics' },
105+
{ id: 'ibuprofen', label: 'Ibuprofen', value: 'Ibuprofen', group: 'Painkillers' },
106+
{ id: 'prednisone', label: 'Prednisone', value: 'Prednisone', group: 'Painkillers' },
107+
{ id: 'metoprolol', label: 'Metoprolol', value: 'Metoprolol', group: 'Hypertension' },
100108
];
101109
102110
const [selectedOptions, setSelectedOptions] = React.useState([]);
@@ -112,8 +120,13 @@ const customCode = `() => {
112120
setSelectedOptions([]);
113121
};
114122
123+
const getOptionIdentifier = (option) => option?.id ?? option?.value;
124+
115125
const groupedMedicine = medicineList.reduce((acc, item) => {
116-
const groupKey = selectedOptions.find((opt) => opt.value === item.value) ? 'Selected Items' : item.group;
126+
const itemIdentifier = getOptionIdentifier(item);
127+
const groupKey = selectedOptions.find((opt) => getOptionIdentifier(opt) === itemIdentifier)
128+
? 'Selected Items'
129+
: item.group;
117130
if (!acc[groupKey]) {
118131
acc[groupKey] = [];
119132
}
@@ -136,7 +149,7 @@ const customCode = `() => {
136149
Selected Items
137150
</Text>
138151
{selectedOptions.map((option) => (
139-
<Select.Option key={option.value} option={option}>
152+
<Select.Option key={getOptionIdentifier(option)} option={option}>
140153
{option.label}
141154
</Select.Option>
142155
))}
@@ -155,7 +168,10 @@ const customCode = `() => {
155168
{group}
156169
</Text>
157170
{groupedMedicine[group].map((item) => (
158-
<Select.Option key={item.value} option={{ label: item.label, value: item.value }}>
171+
<Select.Option
172+
key={getOptionIdentifier(item)}
173+
option={{ label: item.label, value: item.value, id: item.id }}
174+
>
159175
{item.label}
160176
</Select.Option>
161177
))}

0 commit comments

Comments
 (0)