diff --git a/src/components/FilterDrawer/NormalOptions.tsx b/src/components/FilterDrawer/NormalOptions.tsx new file mode 100644 index 00000000..9c5a5a91 --- /dev/null +++ b/src/components/FilterDrawer/NormalOptions.tsx @@ -0,0 +1,59 @@ +import { RadioGroup } from '@navi/web-ui/lib/components'; +import { RadioOptions } from '@navi/web-ui/lib/components/RadioGroup/types'; +import { Checkbox } from '@navi/web-ui/lib/primitives'; +import { ChangeEvent } from 'react'; +import { isOptionChecked } from './utils'; +import styles from './index.module.scss'; +import cx from 'classnames'; +import { INormalOptionValues } from './types'; + +const NormalOptions = (props: INormalOptionValues) => { + const { + filterSchema, + selectedFilter, + selectedOptions, + setSelectedOptions, + handleCheckboxChange, + filteredOptionsData + } = props; + const { isSearchEnabled, multiSelect = true } = filterSchema?.[selectedFilter] || {}; + + return ( +
+ {multiSelect ? ( + filteredOptionsData?.map(option => ( +
+ handleCheckboxChange(e, option)} + title={option?.label as string} + defaultChecked={isOptionChecked( + option?.value as string, + selectedOptions, + selectedFilter + )} + /> +
+ )) + ) : ( + ) => + setSelectedOptions({ ...selectedOptions, [selectedFilter]: [e.target.value] }) + } + className="gap-[20px]" + value={selectedOptions[selectedFilter]?.[0]} + name={selectedFilter} + options={filteredOptionsData as RadioOptions[]} + /> + )} +
+ ); +}; + +export default NormalOptions; diff --git a/src/components/FilterDrawer/RightPanel.tsx b/src/components/FilterDrawer/RightPanel.tsx index 967aa902..18a19dc4 100644 --- a/src/components/FilterDrawer/RightPanel.tsx +++ b/src/components/FilterDrawer/RightPanel.tsx @@ -1,13 +1,13 @@ -import { handleOptionChange, isOptionChecked } from './utils'; +import { handleOptionChange } from './utils'; import { Search } from '@cp/src/utils/search'; import { SearchIcon } from '@navi/web-ui/lib/icons'; -import { BorderedInput, Checkbox, Typography } from '@navi/web-ui/lib/primitives'; +import { BorderedInput, Typography } from '@navi/web-ui/lib/primitives'; import { ChangeEvent, useEffect, useRef, useState } from 'react'; import styles from './index.module.scss'; -import cx from 'classnames'; import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService'; import { IOption, IRightPanel } from './types'; import SectionedOptions from './SectionedOptions'; +import NormalOptions from './NormalOptions'; const RightPanel = (props: IRightPanel) => { const { filterSchema, selectedFilter, selectedOptions, setSelectedOptions, tableName } = props; @@ -87,21 +87,14 @@ const RightPanel = (props: IRightPanel) => { isSearchEnabled={isSearchEnabled} /> ) : ( -
- {filteredOptionsData?.map(option => ( -
- handleCheckboxChange(e, option)} - title={option.label as string} - defaultChecked={isOptionChecked( - option?.value as string, - selectedOptions, - selectedFilter - )} - /> -
- ))} -
+ )} ); diff --git a/src/components/FilterDrawer/index.module.scss b/src/components/FilterDrawer/index.module.scss index 35fb02b4..23a162f3 100644 --- a/src/components/FilterDrawer/index.module.scss +++ b/src/components/FilterDrawer/index.module.scss @@ -66,6 +66,11 @@ padding-top: 16px; } + .singleSelect { + padding: 0 12px; + padding-top: 8px; + } + .inputContainer { width: 100%; margin: 0; diff --git a/src/components/FilterDrawer/types.ts b/src/components/FilterDrawer/types.ts index 8a6fd147..01bf2d82 100644 --- a/src/components/FilterDrawer/types.ts +++ b/src/components/FilterDrawer/types.ts @@ -88,3 +88,12 @@ export interface ISectionedOptionValues { setSelectedOptions: (selectedOptions: ISelectedOptions) => void; isSearchEnabled: boolean; } + +export interface INormalOptionValues { + filteredOptionsData: IOption[]; + filterSchema: Record; + selectedOptions: ISelectedOptions; + selectedFilter: string; + handleCheckboxChange: (e: ChangeEvent, option: IOption) => void; + setSelectedOptions: (selectedOptions: ISelectedOptions) => void; +} diff --git a/src/utils/QueryParamsHelper.ts b/src/utils/QueryParamsHelper.ts index 9b5fe63c..4fa14190 100644 --- a/src/utils/QueryParamsHelper.ts +++ b/src/utils/QueryParamsHelper.ts @@ -112,7 +112,7 @@ export const getTableQueryParams = ( return; } Object.keys(filterSchema).forEach(key => { - if (filterSchema[key] && filterSchema[key]?.multiSelect) { + if (filterSchema[key]) { tableQueryParams[key] = tableQueryParams[key]?.split(',') || []; } if (checkForNestedFilters) {