Skip to content

Commit 37ff6a9

Browse files
novykhnovykh
committed
Fixed select.
1 parent 823c72b commit 37ff6a9

File tree

3 files changed

+85
-103
lines changed

3 files changed

+85
-103
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"react-beautiful-dnd": "^13.1.0",
4444
"react-filter-box": "^3.4.3",
4545
"react-portal": "^4.2.2",
46-
"react-select": "^5.4.0",
46+
"react-select": "^5.7.0",
4747
"react-table": "^7.8.0",
4848
"react-use": "^17.4.0",
4949
"react-window": "^1.8.7",

‎src/components/select/index.js‎

Lines changed: 46 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,53 @@
1-
import React from "react"
1+
import React, { useMemo } from "react"
22
import styled from "styled-components"
33
import ReactSelect, { components as defaultComponents } from "react-select"
4-
import { capitalizeFirstLetter } from "src/utils"
54

6-
const withDataAttrs =
7-
(Component, { ga, testId }, hasInnerProps = true) =>
8-
({ innerProps, ...rest }) => {
9-
const dataProps = {
10-
...(ga ? { "data-ga": ga } : {}),
11-
...(testId ? { "data-testid": testId } : {}),
12-
}
13-
const props = {
14-
...rest,
15-
...(hasInnerProps ? { innerProps: { ...innerProps, ...dataProps } } : { ...dataProps }),
16-
}
17-
return <Component {...props} />
18-
}
5+
const withDataAttrs = Component => props => {
6+
const { "data-ga": dataGA, "data-testid": dataTestId } = props.selectProps
197

20-
const makeDataAttrs = (ga, testId) => type => {
21-
const dataAttrs = {}
8+
const ga = useMemo(() => {
9+
if (!dataGA) return dataGA
2210

23-
if (ga) {
24-
const gaParts = ga.split("::")
25-
gaParts[1] = `${gaParts[1]}-${type}`
26-
dataAttrs.ga = gaParts.join("::")
27-
}
11+
const gaParts = dataGA.split("::")
12+
if (!gaParts[1]) return dataGA
2813

29-
if (testId) {
30-
dataAttrs.testId = `${testId}${capitalizeFirstLetter(type)}`
31-
}
14+
gaParts[1] = `${gaParts[1]}-${Component.displayName}`
15+
return gaParts.join("::")
16+
}, [dataGA])
3217

33-
return dataAttrs
18+
const testId = `${dataTestId || ""}${Component.displayName}`
19+
20+
return <Component data-ga={ga} data-testid={testId} {...props} />
3421
}
3522

36-
const makeCustomComponents = (components, makeComponentDataAttrs) => ({
23+
const customComponents = {
3724
...defaultComponents,
38-
ClearIndicator: withDataAttrs(
39-
defaultComponents.ClearIndicator,
40-
makeComponentDataAttrs("clearIndicator")
41-
),
42-
Control: withDataAttrs(defaultComponents.Control, makeComponentDataAttrs("clearIndicator")),
43-
DropdownIndicator: withDataAttrs(
44-
defaultComponents.DropdownIndicator,
45-
makeComponentDataAttrs("dropdownIndicator")
46-
),
47-
DownChevron: withDataAttrs(defaultComponents.DownChevron, makeComponentDataAttrs("downChevron")),
48-
CrossIcon: withDataAttrs(defaultComponents.CrossIcon, makeComponentDataAttrs("crossIcon")),
49-
Group: withDataAttrs(defaultComponents.Group, makeComponentDataAttrs("group")),
50-
GroupHeading: withDataAttrs(
51-
defaultComponents.GroupHeading,
52-
makeComponentDataAttrs("groupHeading")
53-
),
54-
IndicatorsContainer: withDataAttrs(
55-
defaultComponents.IndicatorsContainer,
56-
makeComponentDataAttrs("indicatorsContainer")
57-
),
58-
IndicatorSeparator: withDataAttrs(
59-
defaultComponents.IndicatorSeparator,
60-
makeComponentDataAttrs("indicatorSeparator")
61-
),
62-
Input: withDataAttrs(defaultComponents.Input, makeComponentDataAttrs("input"), false),
63-
LoadingIndicator: withDataAttrs(
64-
defaultComponents.LoadingIndicator,
65-
makeComponentDataAttrs("loadingIndicator")
66-
),
67-
Menu: withDataAttrs(defaultComponents.Menu, makeComponentDataAttrs("menu")),
68-
MenuList: withDataAttrs(defaultComponents.MenuList, makeComponentDataAttrs("menuList")),
69-
MenuPortal: withDataAttrs(defaultComponents.MenuPortal, makeComponentDataAttrs("menuPortal")),
70-
LoadingMessage: withDataAttrs(
71-
defaultComponents.LoadingMessage,
72-
makeComponentDataAttrs("loadingMessage")
73-
),
74-
NoOptionsMessage: withDataAttrs(
75-
defaultComponents.NoOptionsMessage,
76-
makeComponentDataAttrs("noOptionsMessage")
77-
),
78-
MultiValue: withDataAttrs(defaultComponents.MultiValue, makeComponentDataAttrs("multiValue")),
79-
MultiValueContainer: withDataAttrs(
80-
defaultComponents.MultiValueContainer,
81-
makeComponentDataAttrs("multiValueContainer")
82-
),
83-
MultiValueLabel: withDataAttrs(
84-
defaultComponents.MultiValueLabel,
85-
makeComponentDataAttrs("multiValueLabel")
86-
),
87-
MultiValueRemove: withDataAttrs(
88-
defaultComponents.MultiValueRemove,
89-
makeComponentDataAttrs("multiValueRemove")
90-
),
91-
Option: withDataAttrs(defaultComponents.Option, makeComponentDataAttrs("option")),
92-
Placeholder: withDataAttrs(defaultComponents.Placeholder, makeComponentDataAttrs("placeholder")),
93-
SelectContainer: withDataAttrs(
94-
defaultComponents.SelectContainer,
95-
makeComponentDataAttrs("selectContainer")
96-
),
97-
SingleValue: withDataAttrs(defaultComponents.SingleValue, makeComponentDataAttrs("singleValue")),
98-
ValueContainer: withDataAttrs(
99-
defaultComponents.ValueContainer,
100-
makeComponentDataAttrs("valueContainer")
101-
),
102-
...components,
103-
})
25+
ClearIndicator: withDataAttrs(defaultComponents.ClearIndicator),
26+
Control: withDataAttrs(defaultComponents.Control),
27+
DropdownIndicator: withDataAttrs(defaultComponents.DropdownIndicator),
28+
DownChevron: withDataAttrs(defaultComponents.DownChevron),
29+
CrossIcon: withDataAttrs(defaultComponents.CrossIcon),
30+
Group: withDataAttrs(defaultComponents.Group),
31+
GroupHeading: withDataAttrs(defaultComponents.GroupHeading),
32+
IndicatorsContainer: withDataAttrs(defaultComponents.IndicatorsContainer),
33+
IndicatorSeparator: withDataAttrs(defaultComponents.IndicatorSeparator),
34+
Input: withDataAttrs(defaultComponents.Input),
35+
LoadingIndicator: withDataAttrs(defaultComponents.LoadingIndicator),
36+
Menu: withDataAttrs(defaultComponents.Menu),
37+
MenuList: withDataAttrs(defaultComponents.MenuList),
38+
MenuPortal: withDataAttrs(defaultComponents.MenuPortal),
39+
LoadingMessage: withDataAttrs(defaultComponents.LoadingMessage),
40+
NoOptionsMessage: withDataAttrs(defaultComponents.NoOptionsMessage),
41+
MultiValue: withDataAttrs(defaultComponents.MultiValue),
42+
MultiValueContainer: withDataAttrs(defaultComponents.MultiValueContainer),
43+
MultiValueLabel: withDataAttrs(defaultComponents.MultiValueLabel),
44+
MultiValueRemove: withDataAttrs(defaultComponents.MultiValueRemove),
45+
Option: withDataAttrs(defaultComponents.Option),
46+
Placeholder: withDataAttrs(defaultComponents.Placeholder),
47+
SelectContainer: withDataAttrs(defaultComponents.SelectContainer),
48+
SingleValue: withDataAttrs(defaultComponents.SingleValue),
49+
ValueContainer: withDataAttrs(defaultComponents.ValueContainer),
50+
}
10451

10552
const makeCustomTheme = theme => selectTheme => {
10653
return {
@@ -212,13 +159,11 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
212159
...providedStyles,
213160
})
214161

215-
const Select = styled(ReactSelect).attrs(
216-
({ "data-ga": ga, "data-testid": testId, components, ...props }) => ({
217-
...props,
218-
components: makeCustomComponents(components, makeDataAttrs(ga, testId)),
219-
theme: makeCustomTheme(props.theme),
220-
styles: makeCustomStyles(props.theme, props.styles),
221-
})
222-
)``
162+
const Select = styled(ReactSelect).attrs(props => ({
163+
...props,
164+
components: { ...customComponents, ...props.components },
165+
theme: makeCustomTheme(props.theme),
166+
styles: makeCustomStyles(props.theme, props.styles),
167+
}))``
223168

224169
export default Select

‎yarn.lock‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1451,6 +1451,18 @@
14511451
minimatch "^3.1.2"
14521452
strip-json-comments "^3.1.1"
14531453

1454+
"@floating-ui/core@^1.2.0":
1455+
version "1.2.0"
1456+
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.0.tgz#ae7ae7923d41f3d84cb2fd88740a89436610bbec"
1457+
integrity sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==
1458+
1459+
"@floating-ui/dom@^1.0.1":
1460+
version "1.2.0"
1461+
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.0.tgz#a60212069cc58961c478037c30eba4b191c75316"
1462+
integrity sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==
1463+
dependencies:
1464+
"@floating-ui/core" "^1.2.0"
1465+
14541466
"@gar/promisify@^1.0.1":
14551467
version "1.1.3"
14561468
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -10139,6 +10151,11 @@ memfs@^3.1.2, memfs@^3.2.2:
1013910151
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
1014010152
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
1014110153

10154+
memoize-one@^6.0.0:
10155+
version "6.0.0"
10156+
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
10157+
integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
10158+
1014210159
memoizerific@^1.11.3:
1014310160
version "1.11.3"
1014410161
resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -12032,7 +12049,7 @@ react-select@^3.2.0:
1203212049
react-input-autosize "^3.0.0"
1203312050
react-transition-group "^4.3.0"
1203412051

12035-
react-select@^5.0.0, react-select@^5.4.0:
12052+
react-select@^5.0.0:
1203612053
version "5.4.0"
1203712054
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.4.0.tgz#81f6ac73906126706f104751ee14437bd16798f4"
1203812055
integrity sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==
@@ -12045,6 +12062,21 @@ react-select@^5.0.0, react-select@^5.4.0:
1204512062
prop-types "^15.6.0"
1204612063
react-transition-group "^4.3.0"
1204712064

12065+
react-select@^5.7.0:
12066+
version "5.7.0"
12067+
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.0.tgz#82921b38f1fcf1471a0b62304da01f2896cd8ce6"
12068+
integrity sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==
12069+
dependencies:
12070+
"@babel/runtime" "^7.12.0"
12071+
"@emotion/cache" "^11.4.0"
12072+
"@emotion/react" "^11.8.1"
12073+
"@floating-ui/dom" "^1.0.1"
12074+
"@types/react-transition-group" "^4.4.0"
12075+
memoize-one "^6.0.0"
12076+
prop-types "^15.6.0"
12077+
react-transition-group "^4.3.0"
12078+
use-isomorphic-layout-effect "^1.1.2"
12079+
1204812080
react-sizeme@^3.0.1:
1204912081
version "3.0.2"
1205012082
resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4"
@@ -14275,6 +14307,11 @@ use-callback-ref@^1.3.0:
1427514307
dependencies:
1427614308
tslib "^2.0.0"
1427714309

14310+
use-isomorphic-layout-effect@^1.1.2:
14311+
version "1.1.2"
14312+
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
14313+
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
14314+
1427814315
use-memo-one@^1.1.1:
1427914316
version "1.1.2"
1428014317
resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"

0 commit comments

Comments
 (0)