Skip to content

Commit 1f9993d

Browse files
jphawkElena Kazakova
jphawk
and
Elena Kazakova
authored
Add Multiselect (#95)
* Add Multiselect * Fix Select naming * Add color tags * Delete console.log Co-authored-by: Elena Kazakova <[email protected]>
1 parent 937cedf commit 1f9993d

File tree

9 files changed

+16590
-2
lines changed

9 files changed

+16590
-2
lines changed

‎package-lock.json‎

Lines changed: 72 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,18 @@
2020
"@types/react": "^16.9.0",
2121
"@types/react-dom": "^16.9.0",
2222
"@types/react-modal": "^3.10.5",
23+
"@types/react-select": "^3.0.13",
2324
"@types/storybook__addon-info": "^5.2.1",
2425
"@types/styled-components": "^5.1.0",
2526
"@types/styled-system": "^5.1.7",
27+
"chroma-js": "^2.1.0",
2628
"mini-svg-data-uri": "^1.1.3",
2729
"polished": "^3.4.4",
2830
"react": "^16.12.0",
2931
"react-awesome-styled-grid": "^3.0.5",
3032
"react-dom": "^16.12.0",
3133
"react-modal": "^3.11.2",
34+
"react-select": "^3.1.0",
3235
"react-scripts": "3.4.1",
3336
"react-snowstorm": "^0.0.3",
3437
"reset": "^0.1.0",

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ export * from "./heading";
2626
export * from "./sidebar";
2727
export * from "./tabs";
2828
export * from "./spinner";
29+
export * from "./multiselect";
2930
export * from "./selectbutton";

‎src/components/multiselect/Multiselect.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React, { FunctionComponent } from "react";
2+
import styled from "styled-components";
3+
import theme from "../../theme";
4+
import {default as ReactSelect} from 'react-select';
5+
6+
export interface SelectProps {
7+
options?:any;
8+
styles?:any;
9+
}
10+
11+
const SelectContainer = styled.div<SelectProps>`
12+
.react-select {
13+
&-container {
14+
& > div {
15+
background: ${theme.colors.white};
16+
border: ${theme.borders.disabled};
17+
&:hover {
18+
border: ${theme.borders.lightenGrey};
19+
}
20+
&:focus {
21+
border: 1px solid ${theme.colors.darks[4]};
22+
}
23+
}
24+
}
25+
&__value-container {
26+
color: ${theme.colors.primary};
27+
}
28+
&__multi-value {
29+
padding: 0 0.125rem 0 ${theme.spacing.spacing02};
30+
margin: ${theme.spacing.spacing01};
31+
border-radius: 1rem;
32+
color: ${theme.colors.lights[0]};
33+
align-items:center;
34+
height:1.5rem;
35+
36+
&__label {
37+
color: ${theme.colors.white};
38+
padding-left:0;
39+
padding-right: 0.375rem;
40+
font-size:${theme.fontSizes.small};
41+
}
42+
43+
&__remove {
44+
width:1.125rem;
45+
height:1.125rem;
46+
border-radius:50%;
47+
align-items:center;
48+
justify-content:center;
49+
background-color: rgba(255, 255, 255, 0.3);
50+
&:hover {
51+
background-color: rgba(255, 255, 255, 0.5);
52+
}
53+
svg {
54+
color:${theme.colors.white};
55+
width: 0.75rem;
56+
height:0.75rem;
57+
}
58+
}
59+
}
60+
&__placeholder {
61+
color: ${theme.colors.darks[4]};
62+
}
63+
&__single-value {
64+
color: ${theme.colors.primary};
65+
font-size: ${theme.fontSizes[2]};
66+
line-height: 1.5rem;
67+
}
68+
&__menu {
69+
box-shadow: ${theme.shadow.shadow04};
70+
}
71+
&__option {
72+
color: ${theme.colors.primary};
73+
&--is-selected {
74+
background-color: ${theme.colors.lights[2]};
75+
&.react-select__option--is-focused {
76+
background-color: ${theme.colors.lights[2]};
77+
}
78+
}
79+
&--is-focused {
80+
background-color: ${theme.colors.lights[1]};
81+
}
82+
}
83+
84+
}
85+
`;
86+
87+
export const Select: FunctionComponent<SelectProps> = ({
88+
options,
89+
styles,
90+
...props
91+
}) => {
92+
return (
93+
<SelectContainer>
94+
<ReactSelect
95+
className="react-select-container"
96+
classNamePrefix="react-select"
97+
options={options}
98+
styles={styles}
99+
theme={theme => ({
100+
...theme,
101+
colors: {
102+
...theme.colors,
103+
neutral10: "#161632",
104+
},
105+
})}
106+
{...props}>
107+
</ReactSelect>
108+
</SelectContainer>
109+
);
110+
};

‎src/components/multiselect/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Multiselect';

‎src/components/navigation/Navigation.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React, { FunctionComponent } from "react";
21
import styled, { css } from "styled-components";
32
import theme from "../../theme";
43

‎src/components/tag/Tag.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
2+
import styled from "styled-components";
33
import theme from "../../theme";
44

55
interface TagProps {

‎src/stories/Multiselect.stories.mdx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
2+
import { useState } from "react";
3+
import { Select } from "../components/multiselect";
4+
import theme from "../theme";
5+
import chroma from 'chroma-js';
6+
7+
<Meta title="Components/Select" component={Select} />
8+
9+
# Multiselect
10+
11+
#### Props
12+
13+
```typescript
14+
export interface SelectProps {
15+
options?:any;
16+
}
17+
```
18+
19+
### Basic Select
20+
21+
<Preview>
22+
<Story name="basic modal">
23+
{() => {
24+
const options = [
25+
{ value: 'chocolate', label: 'Chocolate' },
26+
{ value: 'strawberry', label: 'Strawberry' },
27+
{ value: 'vanilla', label: 'Vanilla' }
28+
];
29+
return (
30+
<div style={{height: '150px'}}>
31+
<Select options={options}></Select>
32+
</div>
33+
);
34+
}}
35+
</Story>
36+
</Preview>
37+
38+
### Multiselect
39+
40+
<Preview>
41+
<Story name="multiselect">
42+
{() => {
43+
const options = [
44+
{ value: 'chocolate', label: 'Chocolate' },
45+
{ value: 'strawberry', label: 'Strawberry' },
46+
{ value: 'vanilla', label: 'Vanilla' }
47+
];
48+
return (
49+
<div style={{height: '150px'}}>
50+
<Select
51+
isMulti
52+
defaultValue={[options[1], options[2]]}
53+
options={options}
54+
>
55+
</Select>
56+
</div>
57+
);
58+
}}
59+
</Story>
60+
</Preview>
61+
62+
### Multiselect: colors
63+
64+
<Preview>
65+
<Story name="colors">
66+
{() => {
67+
const options = [
68+
{ value: 'chocolate',
69+
label: 'Chocolate'
70+
},
71+
{ value: 'strawberry',
72+
label: 'Strawberry',
73+
color: `${theme.colors.notification}`
74+
},
75+
{ value: 'vanilla',
76+
label: 'Vanilla',
77+
color: `${theme.colors.danger}`
78+
}
79+
];
80+
const colorStyles = {
81+
multiValue: (styles, { data }) => {
82+
const color = data.color;
83+
return {
84+
...styles,
85+
backgroundColor: color ? color : theme.colors.primary,
86+
};
87+
},
88+
};
89+
return (
90+
<div style={{height: '150px'}}>
91+
<Select
92+
isMulti
93+
defaultValue={[options[1], options[2]]}
94+
options={options}
95+
styles={colorStyles}
96+
>
97+
</Select>
98+
</div>
99+
);
100+
}}
101+
</Story>
102+
</Preview>

0 commit comments

Comments
 (0)