Skip to content
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

Improve customizability of Select component #413

Merged
merged 2 commits into from
Jan 17, 2022
Merged

Improve customizability of Select component #413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d2e78d
add functions
bgptr Dec 22, 2021
b9e4453
use conditioned classes in DropdownIndicator component
bgptr Jan 17, 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
126 changes: 88 additions & 38 deletions src/components/Select/Select.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,37 @@
import React from "react";
import ReactSelect, { components } from "react-select";
import AsyncSelect from "react-select/async";
import CreatableSelect from "react-select/creatable";
import PropTypes from "prop-types";
import { classNames } from "../../utils";
import styles from "./styles.css";

const DropdownIndicator = (props) => {
return (
<components.DropdownIndicator {...props}>
<div
className={classNames(
styles.arrowAnchor,
props.selectProps.menuIsOpen && styles.arrowAnchorOpen
)}
/>
style={{
position: "relative",
height: "100%",
width: "2rem",
}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

<div
style={{
content: "",
width: "0",
height: "0",
border: "0.5rem solid transparent",
borderColor:
"var(--select-anchor-color) transparent transparent transparent",
position: "absolute",
top: "-0.3rem",
right: "0.3rem",
...(props.selectProps.menuIsOpen && {
top: "-0.9rem",
borderColor:
"transparent transparent var(--color-primary) transparent",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

avoid using inline styling, use conditioned classes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@amass01, thanks for your review. I'd prefer the conditioned classes too, but with them, the arrow disappears in decrediton. The divs didn't receive the class definitions. I tried to figure out why, but only this inline styling works. Now, I revisited it without result. Do you have any idea how to solve this?

Copy link
Member

@amass01 amass01 Jan 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hrmm I'm not sure, I guess it related react-select, as the divs are wrapped with
components.DropdownIndicator. I would just leave a comment about the limitation
we can't find a solution or a workaround.

I see in the documentation that there is another classNamePrefix that might work. iirc we already
use that one.
See: https://react-select.com/styles#using-classnames

}),
}}
/>
</div>
</components.DropdownIndicator>
);
};
Expand All @@ -21,75 +40,106 @@ DropdownIndicator.propTypes = {
selectProps: PropTypes.object,
};

const Select = ({ width, isMobile, ...props }) => {
const customStyles = {
const Select = ({
width,
isMobile,
isAsync,
isCreatable,
styles,
customComponents,
...props
}) => {
const defaultStyles = {
indicatorSeparator: () => ({
display: "none",
}),
container: (provided) => ({
...provided,
width: width ? width : provided.width,
padding: "0.2rem 0 0.2rem 0.4rem",
}),
control: (provided) => ({
...provided,
"user-select": "none",
"box-shadow": "none",
"border-radius": "0.2rem",
"min-height": isMobile ? "4.4rem" : "3rem",
"min-width": "6rem",
"border-color": "var(--input-border-color)",
"background-color": "var(--card-background)",
control: () => ({
userSelect: "none",
boxShadow: "none",
borderRadius: "0.2rem",
minHeight: isMobile ? "4.4rem" : "3rem",
minWidth: "6rem",
borderColor: "var(--input-border-color)",
backgroundColor: "var(--card-background)",
"&:hover": {
"border-color": "var(--input-border-color)",
borderColor: "var(--input-border-color)",
},
}),
menu: (provided) => ({
...provided,
"z-index": "999",
"box-shadow": "0px 1rem 2rem rgba(0, 0, 0, 0.16)",
"border-radius": "0.2rem",
"background-color": "var(--card-background)",
menu: () => ({
zIndex: "999",
boxShadow: "0px 1rem 2rem rgba(0, 0, 0, 0.16)",
borderRadius: "0.2rem",
backgroundColor: "var(--card-background)",
}),
menuList: () => ({
padding: "0",
}),
singleValue: (provided) => ({
...provided,
singleValue: () => ({
color: "var(--color-primary-dark)",
}),
option: (provided) => ({
...provided,
option: (_, state) => ({
color: "var(--tab-text-color)",
"background-color": "var(--card-background)",
backgroundColor: state.isFocused
? "var(--color-blue-lighter)"
: "var(--card-background)",

cursor: "pointer",
"&:hover": {
"background-color": "var(--color-blue-lighter)",
},
}),
};

const customStyles = [
...new Set([...Object.keys(defaultStyles), ...Object.keys(styles)]),
]
.map((key) => ({
[key]: (provided, state) => ({
...provided,
...(defaultStyles[key] && defaultStyles[key](provided, state)),
...(styles[key] && styles[key](provided, state)),
}),
}))
.reduce((prev, curr) => ({ ...prev, ...curr }), {});

const SelectComponent = isAsync
? AsyncSelect
: isCreatable
? CreatableSelect
: ReactSelect;

return (
<div>
<ReactSelect
<SelectComponent
styles={customStyles}
components={{ DropdownIndicator }}
components={{
DropdownIndicator,
...(customComponents && customComponents),
}}
{...props}
/>
</div>
);
};

Select.propTypes = {
options: PropTypes.array.isRequired,
options: PropTypes.array,
isSearchable: PropTypes.bool,
width: PropTypes.string,
isCreatable: PropTypes.bool,
width: PropTypes.number,
value: PropTypes.object,
isMobile: PropTypes.bool,
onChange: PropTypes.func,
styles: PropTypes.object,
customComponents: PropTypes.object,
};

Select.defaultProps = {
isSearchable: false,
isCreatable: false,
styles: {},
customComponents: {},
};

export default React.memo(Select);
22 changes: 0 additions & 22 deletions src/components/Select/styles.css
View file
Open in desktop

This file was deleted.

29 changes: 25 additions & 4 deletions src/components/Select/test/__snapshots__/select.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`Select component Matches the snapshot 1`] = `
className="css-1f43avz-a11yText-A11yText"
/>
<div
className=" css-n1d6tz-control"
className=" css-1jhmgce-control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
Expand Down Expand Up @@ -54,7 +54,7 @@ exports[`Select component Matches the snapshot 1`] = `
className=" css-1hb7zxy-IndicatorsContainer"
>
<span
className=" css-1xjgjl1-IndicatorSeparator"
className=" css-43ykx9-indicatorSeparator"
/>
<div
aria-hidden="true"
Expand All @@ -63,8 +63,29 @@ exports[`Select component Matches the snapshot 1`] = `
onTouchEnd={[Function]}
>
<div
className="arrowAnchor"
/>
style={
Object {
"height": "100%",
"position": "relative",
"width": "2rem",
}
}
>
<div
style={
Object {
"border": "0.5rem solid transparent",
"borderColor": "var(--select-anchor-color) transparent transparent transparent",
"content": "",
"height": "0",
"position": "absolute",
"right": "0.3rem",
"top": "-0.3rem",
"width": "0",
}
}
/>
</div>
</div>
</div>
</div>
Expand Down
134 changes: 134 additions & 0 deletions src/docs/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,137 @@ import { Select } from "../index";
);
}}
</Playground>

### Async select

<Playground>
{() => {
const options = [
{
value: "top",
label: "Top",
},
{
value: "new",
label: "New",
},
{
value: "old",
label: "Old",
},
];

const loadOptions = (
inputValue,
callback
) => {
callback(options.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
));
};

return (
<Fragment>
<Select
isAsync
isSearchable
defaultOptions
options={options}
loadOptions={loadOptions}
placeholder=""
/>
</Fragment>
);

}}

</Playground>

### Custom select

<Playground>
{() => {
const options = [
{
value: "top",
label: "Top",
},
{
value: "new",
label: "New",
},
{
value: "old",
label: "Old",
},
];
const [selected, setSelected] = useState({
value: "old",
label: "Old",
});
const selectChangeHandler = (option) => {
setSelected(option);
};

const customStyles = {
control: () => ({
borderRadius: "none",
borderLeft: "none",
borderRight: "none",
borderTop: "none",
}),
dropdownIndicator: () => ({
paddingRight: 0
}),
};
return (
<Fragment>
<Select
options={options}
value={selected}
onChange={selectChangeHandler}
styles={customStyles}
/>
</Fragment>
);

}}

</Playground>

### Creatable select

<Playground>
{() => {
const options = [
{
value: "top",
label: "Top",
},
{
value: "new",
label: "New",
},
{
value: "old",
label: "Old",
},
];
const [selected, setSelected] = useState(null);
const selectChangeHandler = (option) => {
setSelected(option);
};
return (
<Fragment>
<Select
isCreatable
isSearchable
isClearable
options={options}
value={selected}
onChange={selectChangeHandler}
/>
</Fragment>
);
}}
</Playground>