1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.default = void 0;
|
7 |
|
8 | var _react = _interopRequireDefault(require("react"));
|
9 |
|
10 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
11 |
|
12 | var _Loader = _interopRequireDefault(require("./Loader"));
|
13 |
|
14 | var _Shimmer = _interopRequireDefault(require("./Shimmer"));
|
15 |
|
16 | var _Icon = _interopRequireDefault(require("./Icon"));
|
17 |
|
18 | var _withStyles = require("../helpers/withStyles");
|
19 |
|
20 | var _reactWithStyles = require("react-with-styles");
|
21 |
|
22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
23 |
|
24 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
25 |
|
26 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
27 |
|
28 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
29 |
|
30 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
31 |
|
32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
33 |
|
34 | var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
|
35 | disabled: _propTypes.default.bool,
|
36 | loading: _propTypes.default.bool,
|
37 | icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
38 | inverse: _propTypes.default.bool,
|
39 | large: _propTypes.default.bool,
|
40 | mono: _propTypes.default.bool,
|
41 | primary: _propTypes.default.bool,
|
42 | secondary: _propTypes.default.bool,
|
43 | shimmer: _propTypes.default.bool,
|
44 | small: _propTypes.default.bool,
|
45 | shadowLevel: _propTypes.default.oneOf([0, 1, 2, 3]),
|
46 | soft: _propTypes.default.bool,
|
47 | square: _propTypes.default.bool,
|
48 | transparent: _propTypes.default.bool,
|
49 | children: _propTypes.default.node
|
50 | });
|
51 |
|
52 | var defaultProps = {
|
53 | shadowLevel: 0
|
54 | };
|
55 |
|
56 | var FlatButton = function FlatButton(_ref) {
|
57 | var styles = _ref.styles,
|
58 | children = _ref.children,
|
59 | disabled = _ref.disabled,
|
60 | loading = _ref.loading,
|
61 | icon = _ref.icon,
|
62 | inverse = _ref.inverse,
|
63 | mono = _ref.mono,
|
64 | soft = _ref.soft,
|
65 | primary = _ref.primary,
|
66 | secondary = _ref.secondary,
|
67 | shimmer = _ref.shimmer,
|
68 | transparent = _ref.transparent,
|
69 | theme = _ref.theme,
|
70 | css = _ref.css,
|
71 | href = _ref.href,
|
72 | large = _ref.large,
|
73 | noWrap = _ref.noWrap,
|
74 | shadowLevel = _ref.shadowLevel,
|
75 | small = _ref.small,
|
76 | props = _objectWithoutProperties(_ref, ["styles", "children", "disabled", "loading", "icon", "inverse", "mono", "soft", "primary", "secondary", "shimmer", "transparent", "theme", "css", "href", "large", "noWrap", "shadowLevel", "small"]);
|
77 |
|
78 | return _react.default.createElement("button", _extends({}, props, css(styles.button, loading && styles.button_loading, disabled && styles.button_disabled, inverse && styles.button_inverse, mono && styles.button_mono, small && styles.button_small, soft && styles.button_soft, primary && styles.button_primary, secondary && styles.button_secondary, transparent && styles.button_transparent), {
|
79 | disabled: disabled || loading,
|
80 | type: "button"
|
81 | }), loading && shimmer && _react.default.createElement("div", css(styles.shimmer), _react.default.createElement(_Shimmer.default, {
|
82 | height: "100%",
|
83 | width: "100%"
|
84 | })), _react.default.createElement("div", css(styles.button__content, loading && styles.button__content_loading), typeof icon === 'string' ? _react.default.createElement(_Icon.default, {
|
85 | name: icon,
|
86 | small: small,
|
87 | large: large
|
88 | }) : icon), loading && _react.default.createElement("div", css(styles.button__loader), !shimmer && _react.default.createElement(_Loader.default, {
|
89 | small: true,
|
90 | primary: inverse && soft,
|
91 | secondary: secondary,
|
92 | mono: mono
|
93 | })));
|
94 | };
|
95 |
|
96 | FlatButton.propTypes = propTypes;
|
97 | FlatButton.defaultProps = defaultProps;
|
98 | var FlatButtonWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
|
99 | var color = _ref2.color,
|
100 | units = _ref2.units,
|
101 | radius = _ref2.radius,
|
102 | font = _ref2.font;
|
103 | return {
|
104 | button: {
|
105 | appearance: 'none',
|
106 | borderWidth: 0,
|
107 | background: color.secondary,
|
108 | height: units(2.5),
|
109 | width: units(2.5),
|
110 | padding: 0,
|
111 | borderRadius: '50%',
|
112 | color: color.white,
|
113 | fill: color.white,
|
114 | outline: 0,
|
115 | position: 'relative',
|
116 | margin: 0,
|
117 | fontWeight: 500,
|
118 | fontFamily: font.default,
|
119 | cursor: 'pointer',
|
120 | boxSizing: 'border-box',
|
121 | overflow: 'hidden',
|
122 | ':hover': {
|
123 | background: color.secondarySaturated
|
124 | },
|
125 | ':active': {
|
126 | background: color.secondaryDarker
|
127 | }
|
128 | },
|
129 | button_small: {
|
130 | width: units(1.75),
|
131 | height: units(1.75)
|
132 | },
|
133 | button_soft: {
|
134 | background: color.blueGrayLighter,
|
135 | color: color.primary,
|
136 | fill: color.primary,
|
137 | ':hover': {
|
138 | background: color.blueGrayLight
|
139 | },
|
140 | ':active': {
|
141 | background: color.blueGray
|
142 | }
|
143 | },
|
144 | button_loading: {
|
145 | opacity: 1,
|
146 | pointerEvents: 'none'
|
147 | },
|
148 | button_disabled: {
|
149 | opacity: .5,
|
150 | pointerEvents: 'none'
|
151 | },
|
152 | button_mono: {
|
153 | background: color.transparent,
|
154 | borderColor: color.black,
|
155 | borderWidth: 1,
|
156 | borderStyle: 'solid',
|
157 | color: color.black,
|
158 | fill: color.black,
|
159 | ':hover': {
|
160 | background: 'none'
|
161 | },
|
162 | ':active': {
|
163 | background: color.grayLighter
|
164 | }
|
165 | },
|
166 | button_primary: {
|
167 | background: color.primary,
|
168 | ':hover': {
|
169 | background: color.primarySaturated
|
170 | },
|
171 | ':active': {
|
172 | background: color.primaryDarker
|
173 | }
|
174 | },
|
175 | button_secondary: {
|
176 | background: color.transparent,
|
177 | borderColor: color.secondary,
|
178 | borderWidth: 1,
|
179 | borderStyle: 'solid',
|
180 | color: color.secondary,
|
181 | fill: color.secondary,
|
182 | ':hover': {
|
183 | color: color.secondarySaturated,
|
184 | fill: color.secondarySaturated,
|
185 | background: color.grayLightest
|
186 | },
|
187 | ':active': {
|
188 | borderColor: color.secondaryDarker,
|
189 | background: color.grayLighter
|
190 | }
|
191 | },
|
192 | button_inverse: {
|
193 | background: color.white,
|
194 | color: color.primary,
|
195 | fill: color.primary,
|
196 | borderWidth: 0,
|
197 | ':hover': {
|
198 | background: color.blueGrayLight
|
199 | },
|
200 | ':active': {
|
201 | background: color.blueGray
|
202 | }
|
203 | },
|
204 | button_transparent: {
|
205 | background: color.transparent,
|
206 | color: color.primary,
|
207 | fill: color.primary,
|
208 | ':hover': {
|
209 | background: color.shadowWeakest
|
210 | },
|
211 | ':active': {
|
212 | background: color.shadowWeaker
|
213 | }
|
214 | },
|
215 | button_square: {
|
216 | borderRadius: radius
|
217 | },
|
218 | button__content: {
|
219 | display: 'flex',
|
220 | alignItems: 'center',
|
221 | justifyContent: 'center',
|
222 | opacity: 1,
|
223 | transition: 'opacity .2s',
|
224 | whiteSpace: 'nowrap',
|
225 | userSelect: 'none'
|
226 | },
|
227 | button__content_loading: {
|
228 | opacity: 0
|
229 | },
|
230 | button__loader: {
|
231 | position: 'absolute',
|
232 | top: 0,
|
233 | right: 0,
|
234 | bottom: 0,
|
235 | left: 0,
|
236 | display: 'flex',
|
237 | alignItems: 'center',
|
238 | justifyContent: 'center'
|
239 | },
|
240 | shimmer: {
|
241 | position: 'absolute',
|
242 | width: '100%',
|
243 | height: '100%',
|
244 | top: 0,
|
245 | right: 0,
|
246 | bottom: 0,
|
247 | left: 0
|
248 | }
|
249 | };
|
250 | })(FlatButton);
|
251 | var _default = FlatButtonWithStyles;
|
252 | exports.default = _default; |
\ | No newline at end of file |