Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit f9856a4

Browse files
gregbergegregberge
committed
docs: trick propTypes & defaultProps
1 parent 43d4d7f commit f9856a4

25 files changed

+300
-236
lines changed

‎src/Alert.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import createComponent from './internal/createComponent'
34

45
const variants = [
@@ -12,7 +13,7 @@ const variants = [
1213
'dark',
1314
]
1415

15-
const Alert = createComponent(({ th, mixin, css, classNames, PropTypes }) => ({
16+
const Alert = createComponent(({ th, mixin, css, classNames }) => ({
1617
name: 'alert',
1718
render: ({ Component, className, variant, ...props }) => (
1819
<Component

‎src/Box.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import { css } from 'styled-components'
34
import createComponent from './internal/createComponent'
45

@@ -9,7 +10,7 @@ const addProp = (propName, attribute, transform = x => x) => props =>
910
`
1011
: null
1112

12-
const Box = createComponent(({ PropTypes }) => ({
13+
const Box = createComponent(() => ({
1314
name: 'box',
1415
render: ({
1516
Component,

‎src/Button.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import createComponent from './internal/createComponent'
34

45
const variants = [
@@ -12,7 +13,7 @@ const variants = [
1213
'dark',
1314
]
1415

15-
const Button = createComponent(({ classNames, css, th, mixin, PropTypes }) => ({
16+
const Button = createComponent(({ classNames, css, th, mixin }) => ({
1617
name: 'button',
1718
defaultComponent: 'button',
1819
render: ({ className, Component, size, variant, ...props }) => (

‎src/Checkbox.js‎

Lines changed: 94 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,114 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import InnerSwitch from './internal/InnerSwitch'
34
import createComponent from './internal/createComponent'
45

5-
const Checkbox = createComponent(
6-
({ css, mixin, th, classNames, PropTypes }) => ({
7-
name: 'checkbox',
8-
render: ({ Component, className, size, ...props }) => (
9-
<Component
10-
className={classNames(className, {
11-
'sui-checkbox-disabled': props.disabled,
12-
[`sui-checkbox-${size}`]: size,
13-
})}
14-
>
15-
<InnerSwitch inputType="checkbox" {...props}>
16-
{({ checked, focused, disabled }) => (
17-
<div
18-
className={classNames('sui-checkbox-content', {
19-
checked,
20-
focused,
21-
disabled,
22-
})}
23-
>
24-
<svg viewBox="0 0 10 8">
25-
<path
26-
d="M3.7 7.3L.3 4l1-.8 2.4 2.3 5-4.8 1 1"
27-
fill="#fff"
28-
fillRule="evenodd"
29-
/>
30-
</svg>
31-
</div>
32-
)}
33-
</InnerSwitch>
34-
</Component>
35-
),
36-
style: css`
37-
display: inline-block;
38-
position: relative;
39-
width: 1.5rem;
40-
height: 1.5rem;
41-
z-index: ${th('zIndexControl')};
6+
const Checkbox = createComponent(({ css, mixin, th, classNames }) => ({
7+
name: 'checkbox',
8+
render: ({ Component, className, size, ...props }) => (
9+
<Component
10+
className={classNames(className, {
11+
'sui-checkbox-disabled': props.disabled,
12+
[`sui-checkbox-${size}`]: size,
13+
})}
14+
>
15+
<InnerSwitch inputType="checkbox" {...props}>
16+
{({ checked, focused, disabled }) => (
17+
<div
18+
className={classNames('sui-checkbox-content', {
19+
checked,
20+
focused,
21+
disabled,
22+
})}
23+
>
24+
<svg viewBox="0 0 10 8">
25+
<path
26+
d="M3.7 7.3L.3 4l1-.8 2.4 2.3 5-4.8 1 1"
27+
fill="#fff"
28+
fillRule="evenodd"
29+
/>
30+
</svg>
31+
</div>
32+
)}
33+
</InnerSwitch>
34+
</Component>
35+
),
36+
style: css`
37+
display: inline-block;
38+
position: relative;
39+
width: 1.5rem;
40+
height: 1.5rem;
41+
z-index: ${th('zIndexControl')};
4242
43-
.sui-checkbox-content {
44-
display: flex;
45-
align-items: center;
46-
justify-content: center;
47-
width: 1rem;
48-
height: 1rem;
49-
background-color: ${th('inputBgColor')};
50-
border-radius: ${th('borderRadius')};
51-
border-style: solid;
52-
border-width: ${th('inputBorderWidth')};
53-
border-color: ${th('inputBorderColor')};
54-
transition: ${th('transitionBase')};
55-
56-
&.checked {
57-
background-color: ${th('primary')};
58-
border-color: transparent;
43+
.sui-checkbox-content {
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
width: 1rem;
48+
height: 1rem;
49+
background-color: ${th('inputBgColor')};
50+
border-radius: ${th('borderRadius')};
51+
border-style: solid;
52+
border-width: ${th('inputBorderWidth')};
53+
border-color: ${th('inputBorderColor')};
54+
transition: ${th('transitionBase')};
5955
60-
svg {
61-
transform: scale(1);
62-
}
63-
}
56+
&.checked {
57+
background-color: ${th('primary')};
58+
border-color: transparent;
6459
65-
&.focused {
66-
${mixin('controlFocus')};
60+
svg {
61+
transform: scale(1);
6762
}
63+
}
6864
69-
&.disabled {
70-
background-color: ${th('inputDisabledBgColor')};
71-
}
65+
&.focused {
66+
${mixin('controlFocus')};
7267
}
7368
74-
svg {
75-
width: 0.75rem;
76-
pointer-events: none;
77-
transform: scale(0);
78-
transition: ${th('transitionBase')};
69+
&.disabled {
70+
background-color: ${th('inputDisabledBgColor')};
7971
}
72+
}
8073
81-
&.sui-checkbox-sm {
82-
.sui-checkbox-content {
83-
border-radius: ${th('borderRadiusSm')};
84-
width: 0.875rem;
85-
height: 0.875rem;
86-
}
74+
svg {
75+
width: 0.75rem;
76+
pointer-events: none;
77+
transform: scale(0);
78+
transition: ${th('transitionBase')};
79+
}
8780
88-
svg {
89-
width: 0.65rem;
90-
}
81+
&.sui-checkbox-sm {
82+
.sui-checkbox-content {
83+
border-radius: ${th('borderRadiusSm')};
84+
width: 0.875rem;
85+
height: 0.875rem;
9186
}
9287
93-
&.sui-checkbox-lg {
94-
.sui-checkbox-content {
95-
border-radius: ${th('borderRadiusLg')};
96-
width: 1.25rem;
97-
height: 1.25rem;
98-
}
88+
svg {
89+
width: 0.65rem;
90+
}
91+
}
9992
100-
svg {
101-
width: 0.9375rem;
102-
}
93+
&.sui-checkbox-lg {
94+
.sui-checkbox-content {
95+
border-radius: ${th('borderRadiusLg')};
96+
width: 1.25rem;
97+
height: 1.25rem;
98+
}
99+
100+
svg {
101+
width: 0.9375rem;
103102
}
104-
`,
105-
propTypes: {
106-
checked: PropTypes.bool,
107-
disabled: PropTypes.bool,
108-
onChange: PropTypes.func,
109-
size: PropTypes.oneOf(['sm', 'lg']),
110-
value: PropTypes.string,
111-
},
112-
}),
113-
)
103+
}
104+
`,
105+
propTypes: {
106+
checked: PropTypes.bool,
107+
disabled: PropTypes.bool,
108+
onChange: PropTypes.func,
109+
size: PropTypes.oneOf(['sm', 'lg']),
110+
value: PropTypes.string,
111+
},
112+
}))
114113

115114
export default Checkbox

‎src/Col.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import { css } from 'styled-components'
34
import createComponent from './internal/createComponent'
45

@@ -45,7 +46,7 @@ function generateBreakPoint(breakpoint) {
4546
`
4647
}
4748

48-
const Col = createComponent(({ css, classNames, PropTypes }) => ({
49+
const Col = createComponent(({ css, classNames }) => ({
4950
name: 'col',
5051
render: ({ Component, className, xs, sm, md, lg, xl, ...props }) => (
5152
<Component

‎src/ControlFeedback.js‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import createComponent from './internal/createComponent'
34

4-
const ControlFeedback = createComponent(
5-
({ css, classNames, th, PropTypes }) => ({
6-
name: 'control-feedback',
7-
render: ({ Component, className, valid, ...props }) => (
8-
<Component
9-
className={classNames(
10-
className,
11-
{
12-
'sui-is-valid': valid === true,
13-
'sui-is-invalid': valid === false,
14-
},
15-
className,
16-
)}
17-
{...props}
18-
/>
19-
),
20-
style: css`
21-
width: 100%;
22-
margin-top: 0.25rem;
23-
font-size: 80%;
5+
const ControlFeedback = createComponent(({ css, classNames, th }) => ({
6+
name: 'control-feedback',
7+
render: ({ Component, className, valid, ...props }) => (
8+
<Component
9+
className={classNames(
10+
className,
11+
{
12+
'sui-is-valid': valid === true,
13+
'sui-is-invalid': valid === false,
14+
},
15+
className,
16+
)}
17+
{...props}
18+
/>
19+
),
20+
style: css`
21+
width: 100%;
22+
margin-top: 0.25rem;
23+
font-size: 80%;
2424
25-
&.sui-is-valid {
26-
color: ${th('success')};
27-
}
25+
&.sui-is-valid {
26+
color: ${th('success')};
27+
}
2828
29-
&.sui-is-invalid {
30-
color: ${th('danger')};
31-
}
32-
`,
33-
propTypes: {
34-
children: PropTypes.node,
35-
valid: PropTypes.bool.isRequired,
36-
},
37-
}),
38-
)
29+
&.sui-is-invalid {
30+
color: ${th('danger')};
31+
}
32+
`,
33+
propTypes: {
34+
children: PropTypes.node,
35+
valid: PropTypes.bool.isRequired,
36+
},
37+
}))
3938

4039
export default ControlFeedback

‎src/FormCheck.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import createComponent from './internal/createComponent'
34

4-
const FormCheck = createComponent(({ css, classNames, PropTypes }) => ({
5+
const FormCheck = createComponent(({ css, classNames }) => ({
56
name: 'form-check',
67
render: ({ Component, className, inline, ...props }) => (
78
<Component

‎src/FormCheckLabel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import PropTypes from 'prop-types'
12
import createComponent from './internal/createComponent'
23

3-
const FormCheckLabel = createComponent(({ css, th, PropTypes }) => ({
4+
const FormCheckLabel = createComponent(({ css, th }) => ({
45
name: 'form-check-label',
56
defaultComponent: 'label',
67
style: css`

‎src/FormGroup.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import PropTypes from 'prop-types'
12
import createComponent from './internal/createComponent'
23

3-
const FormGroup = createComponent(({ css, PropTypes }) => ({
4+
const FormGroup = createComponent(({ css }) => ({
45
name: 'form-group',
56
style: css`
67
margin-bottom: 1rem;

‎src/Input.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import createComponent from './internal/createComponent'
34

4-
const Input = createComponent(({ css, th, mixin, classNames, PropTypes }) => ({
5+
const Input = createComponent(({ css, th, mixin, classNames }) => ({
56
name: 'input',
67
defaultComponent: 'input',
78
render: ({ Component, className, control, size, valid, ...props }) => (

0 commit comments

Comments
 (0)