Skip to content
This repository was archived by the owner on Feb 28, 2019. It is now read-only.

Commit 1c99b01

Browse files
Michiel87Michiel87
committed
Fixed checkbox
1 parent e7815d9 commit 1c99b01

File tree

7 files changed

+43
-88
lines changed

7 files changed

+43
-88
lines changed

‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
"react-scripts": "2.1.5",
1515
"react-window": "^1.5.2",
1616
"storybook-addon-styled-component-theme": "^1.1.1",
17-
"styled-components": "^4.1.3",
18-
"superagent": "^4.1.0"
17+
"styled-components": "^4.1.3"
1918
},
2019
"scripts": {
2120
"start": "node pre-storybook.js && start-storybook -p 9009 -s public",
@@ -50,7 +49,6 @@
5049
"@types/react-window": "^1.5.1",
5150
"@types/storybook__addon-actions": "^3.4.2",
5251
"@types/styled-components": "^4.1.10",
53-
"@types/superagent": "^3.8.6",
5452
"babel-loader": "^8.0.5",
5553
"enzyme": "^3.9.0",
5654
"enzyme-adapter-react-16": "^1.9.1",

‎src/Checkbox/index.tsx

+25-16
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const CheckboxWrapper = styled.div`
2424
display: block;
2525
width: 6px;
2626
height: 12px;
27-
pointer-events: none;
27+
cursor: pointer;
2828
}
2929
`}
3030
`
@@ -36,25 +36,34 @@ export interface ICheckboxProps {
3636
className?: string
3737
}
3838

39-
export const Checkbox: React.FC<ICheckboxProps> = ({ checked, onClick, className, onChange }) => {
39+
const WRAPPER_ID = 'ex-checkbox-wrapper'
40+
export const Checkbox: React.FC<ICheckboxProps> = ({ checked, onClick, className, onChange, ...props }) => {
4041
return (
41-
<CheckboxWrapper checked={checked}>
42-
<input
43-
className={className}
44-
type='checkbox'
45-
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
46-
const checked = (e.target as HTMLInputElement).checked
47-
onClick && onClick(checked)
48-
}}
49-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
50-
onChange && onChange(e.target.checked)
51-
}}
52-
checked={checked}/>
53-
</CheckboxWrapper>
42+
<CheckboxWrapper id={WRAPPER_ID} checked={checked} onClickCapture={(event) => {
43+
const targetId = (event.target as HTMLElement).id
44+
if (targetId === WRAPPER_ID) {
45+
event.stopPropagation()
46+
onClick && onClick(!checked)
47+
onChange && onChange(!checked)
48+
}
49+
}}>
50+
<input
51+
className={className}
52+
type='checkbox'
53+
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
54+
const checked = (e.target as HTMLInputElement).checked
55+
onClick && onClick(checked)
56+
}}
57+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
58+
onChange && onChange(e.target.checked)
59+
}}
60+
checked={checked}
61+
{...props}
62+
/>
63+
</CheckboxWrapper>
5464
)
5565
}
5666

57-
5867
export default styled(Checkbox)`
5968
width: 20px;
6069
height: 20px;

‎src/stories/input.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default storiesOf('Input', module)
3939
storiesOf('Checkbox', module)
4040
.addDecorator(withState(true))
4141
.add('Checkbox', ({ state, storeState }) => {
42-
return <Checkbox checked={state} onChange={storeAndAction(storeState, 'toggle checkbox')}/>
42+
return <Checkbox checked={state} onClick={storeAndAction(storeState, 'toggle checkbox')}/>
4343
})
4444

4545
storiesOf('Dropdown', module).addDecorator(withState(false)).add('Dropdown', ({ state, storeState }) => {

‎src/useExpandableList/index.test.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ test('noCollapsedParents returns true', () => {
8484
test('noCollapsedParents returns false', () => {
8585
const one = { key: '1', expanded: false, originalIndex: 0 }
8686
const two = { key: '2', expanded: true, originalIndex: 1, [PARENT]: one }
87-
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two}
87+
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two }
8888
const four = { key: '4', originalIndex: 3, [PARENT]: three }
8989

9090
const list = [
@@ -101,7 +101,7 @@ test('noCollapsedParents returns false', () => {
101101
test('getVisibleItems filters items of which all parents are expanded', () => {
102102
const one = { key: '1', expanded: true, originalIndex: 0 }
103103
const two = { key: '2', expanded: false, originalIndex: 1, [PARENT]: one }
104-
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two}
104+
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two }
105105
const four = { key: '4', originalIndex: 3, [PARENT]: three }
106106

107107
const list = [
@@ -117,7 +117,7 @@ test('getVisibleItems filters items of which all parents are expanded', () => {
117117
test('getVisibleItems returns all if all parents are expanded', () => {
118118
const one = { key: '1', expanded: true, originalIndex: 0 }
119119
const two = { key: '2', expanded: true, originalIndex: 1, [PARENT]: one }
120-
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two}
120+
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two }
121121
const four = { key: '4', originalIndex: 3, [PARENT]: three }
122122

123123
const list = [
@@ -133,7 +133,7 @@ test('getVisibleItems returns all if all parents are expanded', () => {
133133
test('enrichItems enriches item from list with expand function', () => {
134134
const one = { key: '1', expanded: true, originalIndex: 0 }
135135
const two = { key: '2', expanded: true, originalIndex: 1, [PARENT]: one }
136-
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two}
136+
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two }
137137
const four = { key: '4', expanded: true, originalIndex: 3, [PARENT]: three }
138138

139139
const expandMock = jest.fn()
@@ -158,7 +158,7 @@ test('enrichItems enriches item from list with expand function', () => {
158158
test('Expand mock should return a new copy of the original list', () => {
159159
const one = { key: '1', expanded: true, originalIndex: 0 }
160160
const two = { key: '2', expanded: true, originalIndex: 1, [PARENT]: one }
161-
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two}
161+
const three = { key: '3', expanded: true, originalIndex: 2, [PARENT]: two }
162162
const four = { key: '4', expanded: true, originalIndex: 3, [PARENT]: three }
163163

164164
const expandMock = jest.fn(result => result)
@@ -186,7 +186,7 @@ test('memoizeCreateParentChildrenMap creates a map by keys', () => {
186186
{ key: '1' , parentId: null },
187187
{ key: '2', parentId: '1' },
188188
{ key: '3', parentId: '2' },
189-
{ key: '4', parentId: '3' }
189+
{ key: '4', parentId: '3' }
190190
]
191191

192192
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)
@@ -202,7 +202,7 @@ test('memoizeCreateParentChildrenMap creates a map with a parent reference', ()
202202
{ key: '1' , parentId: null },
203203
{ key: '2', parentId: '1' },
204204
{ key: '3', parentId: '2' },
205-
{ key: '4', parentId: '3' }
205+
{ key: '4', parentId: '3' }
206206
]
207207

208208
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)
@@ -218,7 +218,7 @@ test('memoizeCreateParentChildrenMap creates a map with child references', () =>
218218
{ key: '1' , parentId: null },
219219
{ key: '2', parentId: '1' },
220220
{ key: '3', parentId: '2' },
221-
{ key: '4', parentId: '3' }
221+
{ key: '4', parentId: '3' }
222222
]
223223

224224
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)
@@ -234,7 +234,7 @@ test('transformAndOrder creates a list from a map', () => {
234234
{ key: '1' , parentId: null },
235235
{ key: '2', parentId: '1' },
236236
{ key: '3', parentId: '2' },
237-
{ key: '4', parentId: '3' }
237+
{ key: '4', parentId: '3' }
238238
]
239239

240240
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)
@@ -248,7 +248,7 @@ test('transformAndOrder orders children directly under their parents', () => {
248248
{ key: '1' , parentId: null },
249249
{ key: '2', parentId: '3' },
250250
{ key: '3', parentId: '1' },
251-
{ key: '4', parentId: '2' }
251+
{ key: '4', parentId: '2' }
252252
]
253253

254254
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)
@@ -265,7 +265,7 @@ test('transformAndOrder extends items with expand attribute', () => {
265265
{ key: '1', parentId: null },
266266
{ key: '2', parentId: '3' },
267267
{ key: '3', parentId: '1' },
268-
{ key: '4', parentId: '2' }
268+
{ key: '4', parentId: '2' }
269269
]
270270

271271
const map = memoizeCreateParentChildrenMap(list, (item) => item.parentId)

‎src/utils/reassignNestedProp.ts

-7
This file was deleted.

‎src/utils/updateTheme.ts

-7
This file was deleted.

‎yarn.lock

+5-43
Original file line numberDiff line numberDiff line change
@@ -1408,11 +1408,6 @@
14081408
resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6"
14091409
integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg==
14101410

1411-
"@types/cookiejar@*":
1412-
version "2.1.1"
1413-
resolved "https://registry.yarnpkg.com/@types/cookiejar/-/cookiejar-2.1.1.tgz#90b68446364baf9efd8e8349bb36bd3852b75b80"
1414-
integrity sha512-aRnpPa7ysx3aNW60hTiCtLHlQaIFsXFCgQlpakNgDNVFzbtusSY8PwjAQgRWfSk0ekNoBjO51eQRB6upA9uuyw==
1415-
14161411
"@types/enzyme-adapter-react-16@^1.0.4":
14171412
version "1.0.4"
14181413
resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz#27722d28dcc814a99be7f557f3e364a1e889773a"
@@ -1526,14 +1521,6 @@
15261521
"@types/react-native" "*"
15271522
csstype "^2.2.0"
15281523

1529-
"@types/superagent@^3.8.6":
1530-
version "3.8.6"
1531-
resolved "https://registry.yarnpkg.com/@types/superagent/-/superagent-3.8.6.tgz#3676d8920d8979ea4ca57513f27995064f92dc43"
1532-
integrity sha512-YQjdsk27MLb6uyXjjywGyYeuqavwV3CirHt6btBz00HkKJyowdB8gjjB1zIZxrOybDRqO8FLjTZeEtmtC2hqxA==
1533-
dependencies:
1534-
"@types/cookiejar" "*"
1535-
"@types/node" "*"
1536-
15371524
"@types/[email protected]":
15381525
version "1.0.2"
15391526
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd"
@@ -3964,7 +3951,7 @@ commondir@^1.0.1:
39643951
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
39653952
integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
39663953

3967-
component-emitter@^1.2.0, component-emitter@^1.2.1:
3954+
component-emitter@^1.2.1:
39683955
version "1.2.1"
39693956
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
39703957
integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
@@ -4083,11 +4070,6 @@ [email protected]:
40834070
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
40844071
integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
40854072

4086-
cookiejar@^2.1.2:
4087-
version "2.1.2"
4088-
resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.2.tgz#dd8a235530752f988f9a0844f3fc589e3111125c"
4089-
integrity sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==
4090-
40914073
copy-concurrently@^1.0.0:
40924074
version "1.0.5"
40934075
resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -5915,7 +5897,7 @@ [email protected]:
59155897
resolve "^1.5.0"
59165898
tapable "^1.0.0"
59175899

5918-
form-data@^2.3.3, form-data@~2.3.2:
5900+
form-data@~2.3.2:
59195901
version "2.3.3"
59205902
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
59215903
integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
@@ -5929,11 +5911,6 @@ format@^0.2.2:
59295911
resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
59305912
integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
59315913

5932-
formidable@^1.2.0:
5933-
version "1.2.1"
5934-
resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.1.tgz#70fb7ca0290ee6ff961090415f4b3df3d2082659"
5935-
integrity sha512-Fs9VRguL0gqGHkXS5GQiMCr1VhZBxz0JnJs4JmMp/2jL18Fmbzvv7vOFRU+U8TBkHEE/CX1qDXzJplVULgsLeg==
5936-
59375914
forwarded@~0.1.2:
59385915
version "0.1.2"
59395916
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -8477,7 +8454,7 @@ merge@^1.2.0:
84778454
resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
84788455
integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
84798456

8480-
methods@^1.1.1, methods@~1.1.2:
8457+
methods@~1.1.2:
84818458
version "1.1.2"
84828459
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
84838460
integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
@@ -8550,7 +8527,7 @@ [email protected]:
85508527
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
85518528
integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
85528529

8553-
mime@^2.0.3, mime@^2.3.1, mime@^2.4.0:
8530+
mime@^2.0.3, mime@^2.3.1:
85548531
version "2.4.0"
85558532
resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6"
85568533
integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==
@@ -10480,7 +10457,7 @@ [email protected], qs@~6.5.2:
1048010457
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
1048110458
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
1048210459

10483-
qs@^6.5.2, qs@^6.6.0:
10460+
qs@^6.5.2:
1048410461
version "6.6.0"
1048510462
resolved "https://registry.yarnpkg.com/qs/-/qs-6.6.0.tgz#a99c0f69a8d26bf7ef012f871cdabb0aee4424c2"
1048610463
integrity sha512-KIJqT9jQJDQx5h5uAVPimw6yVg2SekOKu959OCtktD3FjzbpvaPr8i4zzg07DOMz+igA4W/aNM7OV8H37pFYfA==
@@ -12213,21 +12190,6 @@ stylis@^3.5.0:
1221312190
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
1221412191
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
1221512192

12216-
superagent@^4.1.0:
12217-
version "4.1.0"
12218-
resolved "https://registry.yarnpkg.com/superagent/-/superagent-4.1.0.tgz#c465c2de41df2b8d05c165cbe403e280790cdfd5"
12219-
integrity sha512-FT3QLMasz0YyCd4uIi5HNe+3t/onxMyEho7C3PSqmti3Twgy2rXT4fmkTz6wRL6bTF4uzPcfkUCa8u4JWHw8Ag==
12220-
dependencies:
12221-
component-emitter "^1.2.0"
12222-
cookiejar "^2.1.2"
12223-
debug "^4.1.0"
12224-
form-data "^2.3.3"
12225-
formidable "^1.2.0"
12226-
methods "^1.1.1"
12227-
mime "^2.4.0"
12228-
qs "^6.6.0"
12229-
readable-stream "^3.0.6"
12230-
1223112193
supports-color@^2.0.0:
1223212194
version "2.0.0"
1223312195
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

0 commit comments

Comments
 (0)