Skip to content

Select Value Changes #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Raalzz merged 3 commits into from
Oct 13, 2022
Merged

Select Value Changes #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6595a6
changed the value type
saurabhsutar192 Oct 12, 2022
658c632
minor bug fix
saurabhsutar192 Oct 12, 2022
8d59e30
code smell removed
saurabhsutar192 Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions docs/docs/components/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,25 +244,25 @@ const options = [

### Props Reference

| Attributes | Values | Default Value | Optional ? |
| :---------------- | :-----------------------------------------------------------------------------------------------------: | :--------------: | ---------: |
| placeholder | `string` | `Pick one` | Yes |
| options | `Array of` **_Option Object_** | | No |
| value | `string` &#124; `number` <br/> when isMulti is `true` then value is <br/> `(string` &#124; ` number)[]` | | Yes |
| isMulti | `boolean` | `false` | Yes |
| color | `string` | `#2F80ED` | Yes |
| width | `string` | `100%` | Yes |
| isSearchable | `boolean` | `false` | Yes |
| error | `boolean` | `false` | Yes |
| maxDropDownHeight | `string` | `auto` | Yes |
| borderRadius | `string` | `0` | Yes |
| onChange | `(selectedOption,event)=>void` | `()=>{}` | Yes |
| isDisabled | `boolean` | `false` | Yes |
| isClearable | `boolean` | `false` | Yes |
| nothingFoundLabel | `string` &#124; `JSX Element` | `Nothing Found!` | Yes |
| DropIcon | `JSX Element` | | Yes |
| onDropDownOpen | `()=> void ` | | Yes |
| onDropDownClose | `()=> void ` | | Yes |
| Attributes | Values | Default Value | Optional ? |
| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | :--------------: | ---------: |
| placeholder | `string` | `Pick one` | Yes |
| options | `Array of` **_[Options Object](#option-object)_** | | No |
| value | **_[Options Object](#option-object)_** <br/> when isMulti is `true` then value is <br/> Array of **_[Options Object](#option-object)_** | | Yes |
| isMulti | `boolean` | `false` | Yes |
| color | `string` | `#2F80ED` | Yes |
| width | `string` | `100%` | Yes |
| isSearchable | `boolean` | `false` | Yes |
| error | `boolean` | `false` | Yes |
| maxDropDownHeight | `string` | `auto` | Yes |
| borderRadius | `string` | `0` | Yes |
| onChange | `(selectedOption,event)=>void` | `()=>{}` | Yes |
| isDisabled | `boolean` | `false` | Yes |
| isClearable | `boolean` | `false` | Yes |
| nothingFoundLabel | `string` &#124; `JSX Element` | `Nothing Found!` | Yes |
| DropIcon | `JSX Element` | | Yes |
| onDropDownOpen | `()=> void ` | | Yes |
| onDropDownClose | `()=> void ` | | Yes |

### Option Object

Expand Down
104 changes: 54 additions & 50 deletions lib/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const SelectComponent: ForwardRefRenderFunction<
ref
) => {
const [selectValue, setSelectValue] = useState<
string | number | (string | number)[] | undefined
>(value);
OptionsType | OptionsType[] | null
>(null);
const [isDropped, setIsDropped] = useState(false);
const [internalOptions, setInternalOptions] = useState(options);
const [searchText, setSearchText] = useState("");
Expand All @@ -77,13 +77,17 @@ const SelectComponent: ForwardRefRenderFunction<

useEffect(() => {
if (isMulti) {
typeof selectValue === "object" &&
Array.isArray(selectValue) &&
setInternalOptions(
options.filter((option) => !selectValue.includes(option.value))
options.filter(
(option) => !selectValue.find((data) => data.value === option.value)
)
);
} else {
setInternalOptions(options);
setSearchText(getLabel());
selectValue
? !Array.isArray(selectValue) && setSearchText(selectValue?.label)
: setSearchText("");
}
}, [selectValue, isMulti]);

Expand Down Expand Up @@ -118,13 +122,6 @@ const SelectComponent: ForwardRefRenderFunction<
}
}, [isDropped]);

const getLabel = (extValue?: string | number) => {
return (
options.find((option) => option.value === (extValue || selectValue))
?.label || ""
);
};

const focusElement = (pointer: number) => {
const optionsList = getOptionsRefAsArray();
optionsList?.map((option, index) => {
Expand Down Expand Up @@ -157,23 +154,21 @@ const SelectComponent: ForwardRefRenderFunction<
) => {
if (isMulti) {
setSearchText("");
const multiValue =
typeof selectValue === "object" ? [...selectValue] : [];
multiValue.push(option.value);
if (value !== undefined) {
onChange(multiValue, event);
} else {
setSelectValue(multiValue);
}
const multiValue = Array.isArray(selectValue) ? [...selectValue] : [];
multiValue.push(option);
onChange(multiValue, event);
setSelectValue(multiValue);
} else {
if (value !== undefined) {
isClearable && option.value === selectValue
? onChange("", event)
: onChange(option.value, event);
if (
isClearable &&
!Array.isArray(selectValue) &&
option.value === selectValue?.value
) {
setSelectValue(null);
onChange(null, event);
} else {
isClearable && option.value === selectValue
? setSelectValue("")
: setSelectValue(option.value);
setSelectValue(option);
onChange(option, event);
}
setIsDropped(false);
setInternalOptions(options);
Expand All @@ -185,8 +180,10 @@ const SelectComponent: ForwardRefRenderFunction<
event.stopPropagation();
const text = event.target.value;
const mainOptions =
isMulti && typeof selectValue === "object"
? options.filter((option) => !selectValue.includes(option.value))
isMulti && Array.isArray(selectValue)
? options.filter(
(option) => !selectValue.find((data) => data.value === option.value)
)
: options;
setIsDropped(true);
setSearchText(text);
Expand All @@ -204,10 +201,12 @@ const SelectComponent: ForwardRefRenderFunction<
const handleIconClick = (event: MouseEvent<HTMLDivElement>) => {
event.stopPropagation();
if (isClearable) {
if (value !== undefined) {
isMulti ? onChange([], event) : onChange("", event);
if (isMulti) {
onChange([], event);
setSelectValue([]);
} else {
isMulti ? setSelectValue([]) : setSelectValue("");
onChange(null, event);
setSelectValue(null);
}
} else {
setIsDropped(!isDropped);
Expand All @@ -224,21 +223,18 @@ const SelectComponent: ForwardRefRenderFunction<
clearValue: string | number,
event: MouseEvent<SVGSVGElement> | KeyboardEvent<HTMLDivElement>
) => {
let tempArr = typeof selectValue === "object" ? [...selectValue] : [];
tempArr = tempArr.filter((arr) => arr !== clearValue);
if (value !== undefined) {
onChange(tempArr, event);
} else {
setSelectValue(tempArr);
}
let tempArr = Array.isArray(selectValue) ? [...selectValue] : [];
tempArr = tempArr.filter((arr) => arr.value !== clearValue);
onChange(tempArr, event);
setSelectValue(tempArr);
setIsDropped(true);
};

const checkIfAllValuesSelected = () => {
return (
typeof selectValue === "object" &&
Array.isArray(selectValue) &&
selectValue.length === options.length &&
options.every((el) => selectValue.includes(el.value))
options.every((el) => selectValue.find((data) => data.value === el.value))
);
};

Expand Down Expand Up @@ -274,10 +270,10 @@ const SelectComponent: ForwardRefRenderFunction<
isMulti &&
event.code === "Backspace" &&
searchText === "" &&
typeof selectValue === "object"
Array.isArray(selectValue)
) {
let lastValue = selectValue[selectValue.length - 1];
clearPill(lastValue, event);
clearPill(lastValue?.value, event);
}

if (event.key === "Enter" || event.code === "Space") {
Expand Down Expand Up @@ -420,12 +416,13 @@ const SelectComponent: ForwardRefRenderFunction<
alignItems="center"
>
{isMulti &&
(typeof selectValue === "object" && selectValue.length !== 0
? selectValue?.map((arr) => {
(Array.isArray(selectValue) && selectValue.length !== 0
? selectValue?.map((arr, ind) => {
return (
<Pill
value={getLabel(arr)}
clearValue={(event) => clearPill(arr, event)}
key={ind}
value={arr.label}
clearValue={(event) => clearPill(arr.value, event)}
/>
);
})
Expand All @@ -446,7 +443,8 @@ const SelectComponent: ForwardRefRenderFunction<
)}
{!isMulti &&
!isSearchable &&
(getLabel() || (
!Array.isArray(selectValue) &&
(selectValue?.label || (
<div className={selectPlaceholder}>
{placeholder || "Pick one"}
</div>
Expand Down Expand Up @@ -476,15 +474,21 @@ const SelectComponent: ForwardRefRenderFunction<
internalOptions.map((option, ind) => {
const selectListClass = selectListRecipe({
disabled: option.disabled,
active: !isMulti && option.value === selectValue,
active:
!isMulti &&
!Array.isArray(selectValue) &&
option.value === selectValue?.value,
});
return (
<div
key={ind}
ref={option.ref}
role="option"
data-value={option.value}
aria-selected={option.value === selectValue}
aria-selected={
!Array.isArray(selectValue) &&
option.value === selectValue?.value
}
className={selectListClass}
onClick={(event) =>
!option.disabled && internalClickHandler(option, event)
Expand Down
4 changes: 2 additions & 2 deletions lib/src/components/Select/select.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ type divType = Omit<JSX.IntrinsicElements["div"], "onChange">;
export type SelectPropsType = divType & {
placeholder?: string;
options: OptionsType[];
value?: string | number | (string | number)[];
value?: OptionsType | OptionsType[] | null;
width?: string;
onChange?: (
value: string | number | (string | number)[],
value: OptionsType | OptionsType[] | null,
event?:
| MouseEvent<HTMLDivElement>
| KeyboardEvent<HTMLDivElement>
Expand Down