1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var slicedToArray = require('./slicedToArray-ef426d0f.js');
|
8 | require('./unsupportedIterableToArray-8a00e599.js');
|
9 | var React = require('react');
|
10 | var React__default = _interopDefault(React);
|
11 | require('./_commonjsHelpers-72d386ba.js');
|
12 | var index = require('./index-b0606964.js');
|
13 | require('./defineProperty-0921a47c.js');
|
14 | require('./toConsumableArray-7f36359f.js');
|
15 | var _styled = require('styled-components');
|
16 | var _styled__default = _interopDefault(_styled);
|
17 | require('./getPrototypeOf-e2d1e599.js');
|
18 | require('./color.js');
|
19 | require('./components.js');
|
20 | require('./contains-component.js');
|
21 | require('./css.js');
|
22 | require('./dayjs.min-aa59a48e.js');
|
23 | require('./date.js');
|
24 | var miscellaneous = require('./miscellaneous.js');
|
25 | require('./environment.js');
|
26 | require('./font.js');
|
27 | require('./math-ecfd5d91.js');
|
28 | require('./characters.js');
|
29 | require('./format.js');
|
30 | require('./keycodes.js');
|
31 | require('./url.js');
|
32 | require('./web3.js');
|
33 | var constants = require('./constants.js');
|
34 | require('./breakpoints.js');
|
35 | var springs = require('./springs.js');
|
36 | require('./text-styles.js');
|
37 | require('./theme-dark.js');
|
38 | require('./theme-light.js');
|
39 | var Theme = require('./Theme.js');
|
40 | var FocusVisible = require('./FocusVisible.js');
|
41 | require('./objectWithoutPropertiesLoose-1af20ad0.js');
|
42 | require('react-dom');
|
43 | var web = require('./web-d0294535.js');
|
44 |
|
45 | var BORDER = 1;
|
46 | var WRAPPER_WIDTH = 5 * constants.GU;
|
47 | var WRAPPER_HEIGHT = 2.25 * constants.GU;
|
48 |
|
49 | var _StyledSpan = _styled__default("span").withConfig({
|
50 | displayName: "Switch___StyledSpan",
|
51 | componentId: "sc-1f0jw9z-0"
|
52 | })(["position:relative;display:inline-block;width:", "px;height:", "px;border:", "px solid ", ";border-radius:", "px;background-color:", ";cursor:", ";", " ", ";"], WRAPPER_WIDTH, WRAPPER_HEIGHT, BORDER, function (p) {
|
53 | return p._css;
|
54 | }, WRAPPER_HEIGHT, function (p) {
|
55 | return p._css2;
|
56 | }, function (p) {
|
57 | return p._css3;
|
58 | }, function (p) {
|
59 | return p._css4;
|
60 | }, function (p) {
|
61 | return p._css5;
|
62 | });
|
63 |
|
64 | var _StyledInput = _styled__default("input").withConfig({
|
65 | displayName: "Switch___StyledInput",
|
66 | componentId: "sc-1f0jw9z-1"
|
67 | })(["opacity:0;pointer-events:none;"]);
|
68 |
|
69 | var _StyledAnimatedSpan = _styled__default(web.extendedAnimated.span).withConfig({
|
70 | displayName: "Switch___StyledAnimatedSpan",
|
71 | componentId: "sc-1f0jw9z-2"
|
72 | })(["position:absolute;left:0;z-index:1;top:", "px;width:", "px;height:", "px;border-radius:", "px;background-color:", ";box-shadow:", ";"], BORDER, function (p) {
|
73 | return p._css6;
|
74 | }, function (p) {
|
75 | return p._css7;
|
76 | }, function (p) {
|
77 | return p._css8;
|
78 | }, function (p) {
|
79 | return p._css9;
|
80 | }, function (p) {
|
81 | return p._css10;
|
82 | });
|
83 |
|
84 | function Switch(_ref) {
|
85 | var checked = _ref.checked,
|
86 | disabled = _ref.disabled,
|
87 | onChange = _ref.onChange;
|
88 | var theme = Theme.useTheme();
|
89 |
|
90 | var _useState = React.useState(false),
|
91 | _useState2 = slicedToArray._slicedToArray(_useState, 2),
|
92 | isFocused = _useState2[0],
|
93 | setIsFocused = _useState2[1];
|
94 |
|
95 | var handleChange = disabled ? miscellaneous.noop : function () {
|
96 | return onChange(!checked);
|
97 | };
|
98 | return React__default.createElement(FocusVisible.default, null, function (_ref2) {
|
99 | var focusVisible = _ref2.focusVisible,
|
100 | _onFocus = _ref2.onFocus;
|
101 | return React__default.createElement(_StyledSpan, {
|
102 | onClick: function onClick(e) {
|
103 | e.preventDefault();
|
104 | handleChange();
|
105 | },
|
106 | _css: theme.border,
|
107 | _css2: disabled ? theme.controlBorder : checked ? theme.selected : theme.control,
|
108 | _css3: disabled ? 'default' : 'pointer',
|
109 | _css4: disabled ? '' : "\n &:active {\n border-color: ".concat(theme.controlBorderPressed, ";\n }\n "),
|
110 | _css5: isFocused && focusVisible ? "\n &:after {\n content: '';\n position: absolute;\n left: ".concat(-BORDER * 2, "px;\n top: ").concat(-BORDER * 2, "px;\n width: ").concat(WRAPPER_WIDTH + BORDER * 2, "px;\n height: ").concat(WRAPPER_HEIGHT + BORDER * 2, "px;\n border-radius: ").concat(WRAPPER_HEIGHT, "px;\n border: 2px solid ").concat(theme.focus, ";\n }\n ") : ''
|
111 | }, React__default.createElement(_StyledInput, {
|
112 | type: "checkbox",
|
113 | onFocus: function onFocus() {
|
114 | setIsFocused(true);
|
115 |
|
116 | _onFocus();
|
117 | },
|
118 | onBlur: function onBlur() {
|
119 | return setIsFocused(false);
|
120 | },
|
121 | checked: checked,
|
122 | disabled: disabled,
|
123 | onChange: handleChange
|
124 | }), React__default.createElement(web.Spring, {
|
125 | to: {
|
126 | progress: checked ? WRAPPER_WIDTH - WRAPPER_HEIGHT + BORDER : BORDER
|
127 | },
|
128 | config: springs.springs.smooth,
|
129 | native: true
|
130 | }, function (_ref3) {
|
131 | var progress = _ref3.progress;
|
132 | return React__default.createElement(_StyledAnimatedSpan, {
|
133 | style: {
|
134 | transform: progress.interpolate(function (v) {
|
135 | return "translate3d(".concat(v, "px, 0, 0)");
|
136 | })
|
137 | },
|
138 | _css6: WRAPPER_HEIGHT - BORDER * 4,
|
139 | _css7: WRAPPER_HEIGHT - BORDER * 4,
|
140 | _css8: WRAPPER_HEIGHT - BORDER * 4,
|
141 | _css9: theme.controlSurface,
|
142 | _css10: disabled ? 'none' : '0px 1px 3px rgba(0, 0, 0, 0.15)'
|
143 | });
|
144 | }));
|
145 | });
|
146 | }
|
147 |
|
148 | Switch.propTypes = {
|
149 | checked: index.PropTypes.bool,
|
150 | disabled: index.PropTypes.bool,
|
151 | onChange: index.PropTypes.func
|
152 | };
|
153 | Switch.defaultProps = {
|
154 | checked: false,
|
155 | disabled: false,
|
156 | onChange: miscellaneous.noop
|
157 | };
|
158 |
|
159 | exports.default = Switch;
|
160 |
|