This repository has been archived by the owner on May 13, 2022. It is now read-only.
forked from Faithlife/styled-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
base-components.jsx
87 lines (82 loc) · 1.63 KB
/
base-components.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/* eslint-disable import/no-default-export */
import * as _Bootstrap from 'reactstrap';
import styled from 'styled-components';
import React from 'react';
import { wrapBootstrap } from '../utils';
const inlineComponents = ['Button'];
const supportedComponents = [
'Button',
'ButtonDropdown',
'ButtonGroup',
'ButtonToolbar',
'Dropdown',
'DropdownItem',
'DropdownMenu',
'DropdownToggle',
'Popover',
'PopoverContent',
'PopoverBody',
'PopoverTitle',
'PopoverHeader',
'PopperContent',
'PopperTargetHelper',
'Form',
'FormFeedback',
'FormGroup',
'FormText',
'Input',
'Label',
'CustomInput',
'UncontrolledButtonDropdown',
'UncontrolledDropdown',
'Util',
'Row',
'Col',
'Container',
'Fade',
'UncontrolledTooltip',
'Tooltip',
];
const Components = Object.keys(_Bootstrap)
.filter(x => supportedComponents.includes(x))
.reduce(
(prev, curr) => ({
...prev,
[curr]: wrapBootstrap(_Bootstrap[curr], inlineComponents.includes(curr)),
}),
{},
);
function withGpuAccelerationDisabled(Popover) {
return props => (
<Popover
{...props}
modifiers={{
computeStyle: {
gpuAcceleration: !(
typeof window !== `undefined` &&
window.devicePixelRatio < 1.5 &&
/Win/.test(navigator.platform)
),
},
}}
/>
);
}
export default {
...Components,
Label: styled(_Bootstrap.Label)`
&& {
font-size: 14px;
line-height: 1em;
margin-bottom: 0.375rem;
}
`,
Popover: styled(withGpuAccelerationDisabled(_Bootstrap.Popover))`
&& {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.12);
}
`,
ListGroupItem: styled(_Bootstrap.ListGroupItem)`
padding: 8px 16px;
`,
};