Skip to content

Commit 15450b6

Browse files
eshankvaisheshankvaish
committed
refactor: improve typing
1 parent 2765b54 commit 15450b6

File tree

5 files changed

+126
-115
lines changed

5 files changed

+126
-115
lines changed

‎src/Shared/Components/SelectPicker/SelectPicker.component.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,13 @@ const SelectPicker = ({
123123
menuSize,
124124
variant = SelectPickerVariantType.DEFAULT,
125125
disableDescriptionEllipsis = false,
126-
getIsOptionValid = () => true,
127-
isCreatable = false,
128-
isGroupHeadingSelectable = false,
126+
multiSelectProps = {},
129127
isMulti,
130128
...props
131129
}: SelectPickerProps) => {
132130
const { inputId, required, isDisabled, controlShouldRenderValue } = props
131+
const { isCreatable = false, isGroupHeadingSelectable = false, getIsOptionValid = () => true } = multiSelectProps
132+
133133
// Only large variant is supported for multi select picker
134134
const selectSize = isMulti && !controlShouldRenderValue ? ComponentSizeType.large : size
135135
const shouldShowSelectedOptionIcon = !isMulti && showSelectedOptionIcon

‎src/Shared/Components/SelectPicker/common.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const SelectPickerMenuList = ({
164164
export const MultiValueLabel = ({
165165
getIsOptionValid,
166166
...props
167-
}: MultiValueProps<SelectPickerOptionType, true> & Pick<SelectPickerProps, 'getIsOptionValid'>) => {
167+
}: MultiValueProps<SelectPickerOptionType, true> & Pick<SelectPickerProps['multiSelectProps'], 'getIsOptionValid'>) => {
168168
const { data, selectProps } = props
169169
const isOptionValid = getIsOptionValid(data)
170170
const iconToDisplay = isOptionValid ? data.startIcon || data.endIcon : <ICErrorExclamation />
@@ -194,7 +194,8 @@ export const MultiValueRemove = (props: MultiValueRemoveProps) => (
194194
export const SelectPickerGroupHeading = ({
195195
isGroupHeadingSelectable,
196196
...props
197-
}: GroupHeadingProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'isGroupHeadingSelectable'>) => {
197+
}: GroupHeadingProps<SelectPickerOptionType> &
198+
Pick<SelectPickerProps['multiSelectProps'], 'isGroupHeadingSelectable'>) => {
198199
const { data, selectProps } = props
199200

200201
if (!data.label) {

‎src/Shared/Components/SelectPicker/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
export { default as SelectPicker } from './SelectPicker.component'
2-
export { default as MultiSelectPicker } from './MultiSelectPicker.component'
32
export * from './type'

‎src/Shared/Components/SelectPicker/type.ts

Lines changed: 115 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -25,108 +25,118 @@ export enum SelectPickerVariantType {
2525

2626
type SelectProps = ReactSelectProps<SelectPickerOptionType>
2727

28-
export interface SelectPickerProps
29-
extends Pick<
30-
SelectProps,
31-
| 'options'
32-
| 'value'
33-
| 'onChange'
34-
| 'isSearchable'
35-
| 'isClearable'
36-
| 'isLoading'
37-
| 'hideSelectedOptions'
38-
| 'controlShouldRenderValue'
39-
| 'closeMenuOnSelect'
40-
| 'isDisabled'
41-
| 'isLoading'
42-
| 'required'
43-
| 'isOptionDisabled'
44-
| 'placeholder'
45-
| 'isMulti'
46-
| 'getOptionLabel'
47-
| 'getOptionValue'
48-
| 'isOptionSelected'
49-
| 'isOptionDisabled'
50-
>,
51-
Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
52-
/**
53-
* Icon to be rendered in the control
54-
*/
55-
icon?: ReactElement
56-
/**
57-
* Error message for the select
58-
*/
59-
error?: ReactNode
60-
/**
61-
* Render function for the footer at the bottom of menu list. It is sticky by default
62-
*/
63-
renderMenuListFooter?: () => ReactNode
64-
/**
65-
* Info text for the select, if any
66-
*/
67-
helperText?: ReactNode
68-
/**
69-
* Label for the select. if required is added, the corresponding * is also added
70-
*/
71-
label?: ReactNode
72-
/**
73-
* If true, the selected option icon is shown in the container.
74-
* startIcon has higher priority than endIcon.
75-
*
76-
* @default 'true'
77-
*/
78-
showSelectedOptionIcon?: boolean
79-
/**
80-
* Height of the dropdown
81-
*
82-
* @default 'ComponentSizeType.medium'
83-
*/
84-
size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
85-
/**
86-
* Content to be shown in a tippy when disabled
87-
*/
88-
disabledTippyContent?: ReactNode
89-
/**
90-
* If true, the selected options count is shown in a chip inside ValueContainer
91-
*
92-
* @default 'false'
93-
*/
94-
showSelectedOptionsCount?: boolean
95-
/**
96-
* Width of the menu list
97-
*
98-
* Note: the overflow needs to be handled explicitly for non-small variants
99-
*
100-
* @default 'ComponentSizeType.small'
101-
*/
102-
menuSize?: ComponentSizeType
103-
/**
104-
* Variant of the select.
105-
*
106-
* @default SelectPickerVariantType.DEFAULT
107-
*/
108-
variant?: SelectPickerVariantType
109-
/**
110-
* Disables the ellipsis on description, it will be shown in full width, wrapped if required.
111-
*
112-
* @default false
113-
*/
114-
disableDescriptionEllipsis?: boolean
115-
getIsOptionValid?: (option: SelectPickerOptionType) => boolean
116-
/**
117-
* If true, the select picker creates the new option
118-
* Only applicable for isMulti: true
119-
*
120-
* @default false
121-
*/
122-
isCreatable?: boolean
123-
/**
124-
* If true, the group heading can be selected
125-
*
126-
* Only applicable for isMulti: true
127-
*
128-
* @default false
129-
*/
130-
isGroupHeadingSelectable?: boolean
131-
// TODO: Improve typing and add support for custom option list; isMenuOpen prop expose?
132-
}
28+
export type SelectPickerProps = Pick<
29+
SelectProps,
30+
| 'options'
31+
| 'value'
32+
| 'onChange'
33+
| 'isSearchable'
34+
| 'isClearable'
35+
| 'isLoading'
36+
| 'hideSelectedOptions'
37+
| 'controlShouldRenderValue'
38+
| 'closeMenuOnSelect'
39+
| 'isDisabled'
40+
| 'isLoading'
41+
| 'required'
42+
| 'isOptionDisabled'
43+
| 'placeholder'
44+
| 'getOptionLabel'
45+
| 'getOptionValue'
46+
| 'isOptionSelected'
47+
> &
48+
Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> & {
49+
/**
50+
* Icon to be rendered in the control
51+
*/
52+
icon?: ReactElement
53+
/**
54+
* Error message for the select
55+
*/
56+
error?: ReactNode
57+
/**
58+
* Render function for the footer at the bottom of menu list. It is sticky by default
59+
*/
60+
renderMenuListFooter?: () => ReactNode
61+
/**
62+
* Info text for the select, if any
63+
*/
64+
helperText?: ReactNode
65+
/**
66+
* Label for the select. if required is added, the corresponding * is also added
67+
*/
68+
label?: ReactNode
69+
/**
70+
* If true, the selected option icon is shown in the container.
71+
* startIcon has higher priority than endIcon.
72+
*
73+
* @default 'true'
74+
*/
75+
showSelectedOptionIcon?: boolean
76+
/**
77+
* Height of the dropdown
78+
*
79+
* @default 'ComponentSizeType.medium'
80+
*/
81+
size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
82+
/**
83+
* Content to be shown in a tippy when disabled
84+
*/
85+
disabledTippyContent?: ReactNode
86+
/**
87+
* If true, the selected options count is shown in a chip inside ValueContainer
88+
*
89+
* @default 'false'
90+
*/
91+
showSelectedOptionsCount?: boolean
92+
/**
93+
* Width of the menu list
94+
*
95+
* Note: the overflow needs to be handled explicitly for non-small variants
96+
*
97+
* @default 'ComponentSizeType.small'
98+
*/
99+
menuSize?: ComponentSizeType
100+
/**
101+
* Variant of the select.
102+
*
103+
* @default SelectPickerVariantType.DEFAULT
104+
*/
105+
variant?: SelectPickerVariantType
106+
/**
107+
* Disables the ellipsis on description, it will be shown in full width, wrapped if required.
108+
*
109+
* @default false
110+
*/
111+
disableDescriptionEllipsis?: boolean
112+
// TODO: Improve typing and add support for custom option list; isMenuOpen prop expose?
113+
} & (
114+
| {
115+
isMulti?: never
116+
multiSelectProps?: never
117+
}
118+
| {
119+
isMulti: boolean
120+
multiSelectProps?: {
121+
/**
122+
* If true, the select picker creates the new option
123+
* Only applicable for isMulti: true
124+
*
125+
* @default false
126+
*/
127+
isCreatable?: boolean
128+
/**
129+
* If true, the group heading can be selected
130+
*
131+
* Only applicable for isMulti: true
132+
*
133+
* @default false
134+
*/
135+
isGroupHeadingSelectable?: boolean
136+
/**
137+
* Callback handler to check if the given selection is valid or not
138+
*/
139+
getIsOptionValid?: (option: SelectPickerOptionType) => boolean
140+
}
141+
}
142+
)

‎src/Shared/Components/SelectPicker/utils.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,11 @@ export const getCommonSelectStyle = ({
5757
variant,
5858
getIsOptionValid,
5959
isGroupHeadingSelectable,
60-
}: Pick<
61-
SelectPickerProps,
62-
'error' | 'size' | 'menuSize' | 'variant' | 'getIsOptionValid' | 'isGroupHeadingSelectable'
63-
>): StylesConfig<SelectPickerOptionType> => ({
60+
}: Pick<SelectPickerProps, 'error' | 'size' | 'menuSize' | 'variant'> &
61+
Pick<
62+
SelectPickerProps['multiSelectProps'],
63+
'getIsOptionValid' | 'isGroupHeadingSelectable'
64+
>): StylesConfig<SelectPickerOptionType> => ({
6465
container: (base, state) => ({
6566
...base,
6667
...(state.isDisabled && {

0 commit comments

Comments
 (0)