feat: add common component select picker with control styling

Author: eshankvaish

src/Assets/Icon/ic-caret-down.svg

@@ -0,0 +1,71 @@
+import ReactSelect, { ControlProps, Props as ReactSelectProps } from 'react-select'
+import { ReactNode, useCallback, useMemo } from 'react'
+import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
+import { getCommonSelectStyle } from './utils'
+import { ControlWithIcon, DropdownIndicator, LoadingIndicator } from './common'
+
+export interface SelectPickerProps
+    extends Pick<
+        ReactSelectProps,
+        | 'isMulti'
+        | 'options'
+        | 'value'
+        | 'onChange'
+        | 'isSearchable'
+        | 'isClearable'
+        | 'isLoading'
+        | 'placeholder'
+        | 'hideSelectedOptions'
+        | 'controlShouldRenderValue'
+        | 'backspaceRemovesValue'
+        | 'closeMenuOnSelect'
+        | 'isDisabled'
+        | 'isLoading'
+        | 'inputId'
+    > {
+    icon?: ReactNode
+    error?: ReactNode
+}
+
+const SelectPicker = ({ error, icon, placeholder = 'Select a option', ...props }: SelectPickerProps) => {
+    const selectStyles = useMemo(
+        () =>
+            getCommonSelectStyle({
+                hasError: !!error,
+            }),
+        [error],
+    )
+
+    const renderControl = useCallback(
+        (controlProps: ControlProps) => <ControlWithIcon {...controlProps} icon={icon} />,
+        [icon],
+    )
+
+    return (
+        <div>
+            <ReactSelect
+                {...props}
+                placeholder={placeholder}
+                components={{
+                    IndicatorSeparator: null,
+                    LoadingIndicator,
+                    DropdownIndicator,
+                    Control: renderControl,
+                    // Option,
+                    // ValueContainer,
+                }}
+                styles={selectStyles}
+            />
+            {error && (
+                <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4">
+                    <div className="dc__no-shrink dc__align-self-start p-2">
+                        <ErrorIcon className="icon-dim-12 form__icon--error" />
+                    </div>
+                    <span>{error}</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default SelectPicker

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

@@ -0,0 +1,27 @@
+import { components, DropdownIndicatorProps, ControlProps } from 'react-select'
+import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
+import { Progressing } from '@Common/Progressing'
+import { SelectPickerProps } from './SelectPicker.component'
+
+export const DropdownIndicator = (props: DropdownIndicatorProps) => {
+    const { isDisabled } = props
+
+    return (
+        <components.DropdownIndicator {...props}>
+            <ICCaretDown className={`icon-dim-16 ${isDisabled ? 'fcn-3' : 'fcn-6'} dc__no-shrink`} />
+        </components.DropdownIndicator>
+    )
+}
+
+export const ControlWithIcon = ({ icon, ...props }: ControlProps & Pick<SelectPickerProps, 'icon'>) => {
+    const { children } = props
+
+    return (
+        <components.Control {...props}>
+            {icon && <div className="p-2 dc__no-shrink flex left">{icon}</div>}
+            {children}
+        </components.Control>
+    )
+}
+
+export const LoadingIndicator = () => <Progressing />

src/Shared/Components/SelectPicker/common.tsx

@@ -0,0 +1 @@
+export { default as SelectPicker } from './SelectPicker.component'

src/Shared/Components/SelectPicker/index.ts

@@ -0,0 +1,107 @@
+export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
+    container: (base, state) => ({
+        ...base,
+        ...(state.isDisabled && {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+        }),
+    }),
+    menuList: (base) => ({
+        ...base,
+        padding: 0,
+        paddingBlock: '4px',
+        cursor: 'pointer',
+    }),
+    control: (base, state) => ({
+        ...base,
+        // Add support for configurable: 36px, 28px
+        minHeight: 'auto',
+        boxShadow: 'none',
+        backgroundColor: state.isDisabled ? 'var(--N100)' : 'var(--N50)',
+        border: `1px solid ${hasError ? 'var(--R500)' : 'var(--N200)'}`,
+        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        padding: '5px 8px',
+        gap: '8px',
+
+        '&:hover': {
+            borderColor: state.isDisabled ? 'var(--N200)' : 'var(--N300)',
+        },
+        '&:focus, &:focus-within': {
+            borderColor: state.isDisabled ? 'var(--N200)' : 'var(--B500)',
+            outline: 'none',
+        },
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        // eslint-disable-next-line no-nested-ternary
+        backgroundColor: state.isSelected ? 'var(--B100)' : state.isFocused ? 'var(--N100)' : 'white',
+        padding: '10px 12px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        lineHeight: '20px',
+        fontWeight: 400,
+
+        ':active': {
+            backgroundColor: 'var(--N100)',
+        },
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N600)',
+        padding: '0',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '0',
+        fontWeight: '400',
+    }),
+    loadingMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    group: (base) => ({
+        ...base,
+        paddingTop: '4px',
+        paddingBottom: 0,
+    }),
+    groupHeading: (base) => ({
+        ...base,
+        fontWeight: 600,
+        fontSize: '12px',
+        color: 'var(--N900)',
+        backgroundColor: 'var(--N100)',
+        marginBottom: 0,
+        padding: '4px 8px',
+        textTransform: 'none',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    }),
+    input: (base) => ({
+        ...base,
+        margin: 0,
+        padding: 0,
+        color: 'var(--N900)',
+        size: '13px',
+        fontWeight: 400,
+        lineHeight: '20px',
+    }),
+    placeholder: (base, state) => ({
+        ...base,
+        color: state.isDisabled ? 'var(--N600)' : 'var(--N500)',
+        fontSize: '13px',
+        lineHeight: '20px',
+        fontWeight: 400,
+        margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    }),
+})