grevlingui 0.1.44 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +204 -72
  3. package/dist/Buttons/MenuButton.d.ts +12 -0
  4. package/dist/Buttons/ResetButton.d.ts +6 -0
  5. package/dist/Buttons/SettingsButton.d.ts +13 -0
  6. package/dist/CheckBox.d.ts +10 -0
  7. package/dist/Loader/Loader.d.ts +6 -0
  8. package/dist/Menu/Menu.d.ts +19 -0
  9. package/dist/NumberSelect/NumberSelect.d.ts +16 -0
  10. package/dist/PaneView/PaneView.d.ts +7 -0
  11. package/dist/Radio/RadioButton.d.ts +8 -0
  12. package/dist/Radio/RadioGroup.d.ts +12 -0
  13. package/dist/Radio/index.d.ts +4 -0
  14. package/dist/index.css +1 -0
  15. package/dist/index.d.ts +18 -0
  16. package/dist/index.js +583 -0
  17. package/package.json +47 -15
  18. package/Buttons/Buttons.css +0 -64
  19. package/Buttons/MenuButton.js +0 -78
  20. package/Buttons/ResetButton.js +0 -56
  21. package/Buttons/SettingsButton.js +0 -97
  22. package/CheckBox.js +0 -143
  23. package/Dots/Dots.css +0 -27
  24. package/Dots/Dots.js +0 -34
  25. package/Loader/Loader.css +0 -26
  26. package/Loader/Loader.js +0 -67
  27. package/Menu/Menu.css +0 -91
  28. package/Menu/Menu.js +0 -103
  29. package/NumberSelect/NumberSelect.css +0 -107
  30. package/NumberSelect/NumberSelect.js +0 -268
  31. package/NumberSliderSelect/NumberSliderSelect.css +0 -110
  32. package/NumberSliderSelect/NumberSliderSelect.js +0 -199
  33. package/PaneView/PaneView.css +0 -31
  34. package/PaneView/PaneView.js +0 -36
  35. package/Radio/RadioButton.js +0 -53
  36. package/Radio/RadioGroup.js +0 -32
  37. package/Radio/index.js +0 -19
  38. package/SunMoon.js +0 -57
  39. package/ToggleSwitch.js +0 -55
  40. package/index.js +0 -117
  41. package/utils/UseEffectOnce.js +0 -12
  42. package/utils/UseEffectPartialDeps.js +0 -12
@@ -1,199 +0,0 @@
1
- "use strict";
2
-
3
- require("core-js/modules/es.symbol.description.js");
4
- require("core-js/modules/es.regexp.exec.js");
5
- require("core-js/modules/es.regexp.test.js");
6
- require("core-js/modules/es.regexp.to-string.js");
7
- require("core-js/modules/es.weak-map.js");
8
- require("core-js/modules/esnext.iterator.filter.js");
9
- require("core-js/modules/esnext.iterator.for-each.js");
10
- Object.defineProperty(exports, "__esModule", {
11
- value: true
12
- });
13
- exports.NumberSliderSelect = void 0;
14
- require("core-js/modules/esnext.iterator.constructor.js");
15
- require("core-js/modules/esnext.iterator.map.js");
16
- require("core-js/modules/web.dom-collections.iterator.js");
17
- var _react = _interopRequireWildcard(require("react"));
18
- require("./NumberSliderSelect.css");
19
- var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
20
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
22
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
25
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
26
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
27
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
28
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
30
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
31
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
32
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
33
- const cosmos = {};
34
- const NumberSliderSelect = _ref => {
35
- let value = _ref.value,
36
- setValue = _ref.setValue,
37
- flip = _ref.flip,
38
- thin = _ref.thin,
39
- _ref$min = _ref.min,
40
- min = _ref$min === void 0 ? 1 : _ref$min,
41
- _ref$max = _ref.max,
42
- max = _ref$max === void 0 ? 10 : _ref$max,
43
- shadow = _ref.shadow,
44
- _ref$size = _ref.size,
45
- size = _ref$size === void 0 ? 40 : _ref$size,
46
- _ref$color = _ref.color,
47
- color = _ref$color === void 0 ? 'white' : _ref$color,
48
- _ref$numberBgColor = _ref.numberBgColor,
49
- numberBgColor = _ref$numberBgColor === void 0 ? '#663399FF' : _ref$numberBgColor,
50
- _ref$selectorColor = _ref.selectorColor,
51
- selectorColor = _ref$selectorColor === void 0 ? '#1E90FFFF' : _ref$selectorColor,
52
- _ref$pointerColor = _ref.pointerColor,
53
- pointerColor = _ref$pointerColor === void 0 ? '#6c9fff' : _ref$pointerColor,
54
- _ref$pointerShadowCol = _ref.pointerShadowColor,
55
- pointerShadowColor = _ref$pointerShadowCol === void 0 ? '#33333390' : _ref$pointerShadowCol,
56
- _ref$top = _ref.top,
57
- top = _ref$top === void 0 ? -16 : _ref$top;
58
- const _useState = (0, _react.useState)("id-".concat(Math.random())),
59
- _useState2 = _slicedToArray(_useState, 1),
60
- id = _useState2[0];
61
- const _useState3 = (0, _react.useState)(false),
62
- _useState4 = _slicedToArray(_useState3, 2),
63
- rendered = _useState4[0],
64
- setRendered = _useState4[1];
65
- const _useState5 = (0, _react.useState)(false),
66
- _useState6 = _slicedToArray(_useState5, 2),
67
- showInput = _useState6[0],
68
- setShowInput = _useState6[1];
69
- const _useState7 = (0, _react.useState)(false),
70
- _useState8 = _slicedToArray(_useState7, 2),
71
- hidden = _useState8[0],
72
- setHidden = _useState8[1];
73
- const _useState9 = (0, _react.useState)(0),
74
- _useState0 = _slicedToArray(_useState9, 2),
75
- timeout1 = _useState0[0],
76
- setTimeout1 = _useState0[1];
77
- const _useState1 = (0, _react.useState)(0),
78
- _useState10 = _slicedToArray(_useState1, 2),
79
- timeout2 = _useState10[0],
80
- setTimeout2 = _useState10[1];
81
- const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
82
- let cosmoState = cosmos[id];
83
- (0, _react.useLayoutEffect)(() => {
84
- // eslint-disable-next-line
85
- cosmoState = cosmos[id] = {
86
- refs: []
87
- };
88
- setRendered(true);
89
- }, []);
90
- (0, _UseEffectPartialDeps.default)(() => {
91
- clearTimeout(timeout1);
92
- if (showInput) setHidden(false);else setTimeout1(setTimeout(() => setHidden(true), 320));
93
- }, [showInput]);
94
- (0, _UseEffectPartialDeps.default)(() => {
95
- if (!rendered) return;
96
- const ref = cosmoState.refs[value + 2 - min];
97
- if (!ref) return;
98
- ref.scrollIntoView();
99
- }, [rendered]);
100
- if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
101
- const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
102
- if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
103
- const optionStyle = {
104
- width: "".concat(size, "px"),
105
- height: "".concat(size - 1, "px"),
106
- fontSize: "".concat(size * .6, "px"),
107
- borderRadius: "".concat(size, "px"),
108
- paddingBottom: '1px'
109
- };
110
- const renderFade = (side, direction) => /*#__PURE__*/_react.default.createElement("div", {
111
- className: "fade ".concat(side),
112
- style: {
113
- width: "".concat(size * .8, "px"),
114
- backgroundImage: "linear-gradient(to ".concat(direction, ", ").concat(selectorColor, ", ").concat(selectorColor, " , #00000000)")
115
- }
116
- });
117
- const pointerContainerStyle = flip ? {
118
- bottom: "-".concat(size * .4, "px"),
119
- transform: 'rotate(180deg)'
120
- } : {
121
- top: "-".concat(size / 2, "px")
122
- };
123
- const renderModal = () => /*#__PURE__*/_react.default.createElement("div", {
124
- className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
125
- style: {
126
- backgroundColor: selectorColor,
127
- top: "".concat(top + (thin ? 8 : 0), "px")
128
- },
129
- onTouchStart: () => {
130
- clearTimeout(timeout2);
131
- setShowInput(true);
132
- },
133
- onTouchEnd: () => {
134
- clearTimeout(timeout2);
135
- setTimeout2(setTimeout(() => setShowInput(false), 800));
136
- }
137
- }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
138
- className: "pointerContainer",
139
- style: pointerContainerStyle
140
- }, /*#__PURE__*/_react.default.createElement("div", {
141
- className: "pointerShadow",
142
- style: {
143
- backgroundColor: pointerShadowColor,
144
- width: "".concat(size / 2, "px"),
145
- height: "".concat(size * 0.8, "px"),
146
- marginTop: "".concat(size / 7, "px")
147
- }
148
- })), /*#__PURE__*/_react.default.createElement("div", {
149
- className: "pointerContainer",
150
- style: pointerContainerStyle
151
- }, /*#__PURE__*/_react.default.createElement("div", {
152
- className: "pointer",
153
- style: {
154
- backgroundColor: pointerColor,
155
- width: "".concat(size / 2, "px"),
156
- height: "".concat(size * 0.8, "px")
157
- }
158
- })), /*#__PURE__*/_react.default.createElement("div", {
159
- className: "scrollSelector ".concat(thin ? 'thin' : ''),
160
- ref: node => cosmoState.scrollRef = node,
161
- style: {
162
- width: "".concat(size * 3, "px")
163
- },
164
- onScroll: () => {
165
- const centerNumber = Math.round(getExactValue());
166
- if (value !== centerNumber) setValue(centerNumber);
167
- }
168
- }, /*#__PURE__*/_react.default.createElement("div", {
169
- className: "options",
170
- style: {
171
- width: "".concat((options.length + 2) * size, "px")
172
- }
173
- }, /*#__PURE__*/_react.default.createElement("div", {
174
- className: "option",
175
- style: optionStyle,
176
- ref: node => cosmoState.refs[0] = node
177
- }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
178
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
179
- backgroundColor: value === n ? numberBgColor : ''
180
- }),
181
- key: n,
182
- ref: node => cosmoState.refs[i + 1] = node,
183
- className: 'option'
184
- }, n)), /*#__PURE__*/_react.default.createElement("div", {
185
- className: "option",
186
- style: optionStyle,
187
- ref: node => cosmoState.refs[options.length + 1] = node
188
- }))));
189
- return /*#__PURE__*/_react.default.createElement("div", {
190
- className: "NumberSliderSelectWrapper ".concat(hidden ? 'hidden' : '')
191
- }, /*#__PURE__*/_react.default.createElement("div", {
192
- className: "NumberSliderSelect",
193
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
194
- color,
195
- backgroundColor: numberBgColor
196
- })
197
- }, value, renderModal()));
198
- };
199
- exports.NumberSliderSelect = NumberSliderSelect;
@@ -1,31 +0,0 @@
1
- .grevlingPaneView {
2
- position: absolute;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- overflow: auto;
8
- scroll-snap-type: x mandatory;
9
-
10
- -ms-overflow-style: none; /* for Internet Explorer, Edge */
11
- scrollbar-width: none; /* for Firefox */
12
- overflow-y: scroll;
13
- }
14
-
15
- .grevlingPaneView::-webkit-scrollbar {
16
- display: none; /* for Chrome, Safari, and Opera */
17
- }
18
-
19
- .grevlingPaneViewScrollyContent {
20
- height: 100%;
21
- width: 100%;
22
- display: flex;
23
- }
24
-
25
- .grevlingPaneViewPane {
26
- scroll-snap-align: start;
27
- scroll-snap-stop: always;
28
-
29
- max-height: 100%;
30
- min-width: 100%;
31
- }
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PaneView = void 0;
7
- require("core-js/modules/esnext.iterator.constructor.js");
8
- require("core-js/modules/esnext.iterator.map.js");
9
- var _react = _interopRequireDefault(require("react"));
10
- require("./PaneView.css");
11
- var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
12
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
- let startPaneRef;
14
- const PaneView = _ref => {
15
- let children = _ref.children,
16
- styleOverride = _ref.styleOverride,
17
- _ref$startOnPane = _ref.startOnPane,
18
- startOnPane = _ref$startOnPane === void 0 ? 0 : _ref$startOnPane;
19
- (0, _UseEffectOnce.default)(() => {
20
- setTimeout(() => startPaneRef && startPaneRef.scrollIntoView(), 1);
21
- });
22
- const renderPane = (content, i) => /*#__PURE__*/_react.default.createElement("div", {
23
- ref: node => {
24
- if (startOnPane === i) startPaneRef = node;
25
- },
26
- key: "pane".concat(i),
27
- className: "grevlingPaneViewPane"
28
- }, content);
29
- return /*#__PURE__*/_react.default.createElement("div", {
30
- className: "grevlingPaneView",
31
- style: styleOverride
32
- }, /*#__PURE__*/_react.default.createElement("div", {
33
- className: "grevlingPaneViewScrollyContent"
34
- }, Array.isArray(children) ? children.map(renderPane) : renderPane(children)));
35
- };
36
- exports.PaneView = PaneView;
@@ -1,53 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.RadioButton = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- const RadioButton = _ref => {
10
- let active = _ref.active,
11
- text = _ref.text,
12
- className = _ref.className,
13
- color = _ref.color;
14
- const renderCircle = (r, className, mask, fill) => /*#__PURE__*/_react.default.createElement("circle", {
15
- style: {
16
- transition: "r 300ms"
17
- },
18
- cx: "67",
19
- cy: "67",
20
- r: r,
21
- fill: fill,
22
- className: className,
23
- mask: mask
24
- });
25
- return /*#__PURE__*/_react.default.createElement("div", {
26
- style: {
27
- display: 'flex',
28
- alignItems: 'center',
29
- justifyContent: 'flex-start',
30
- cursor: 'default'
31
- },
32
- className: "radioButton ".concat(active ? ' active' : '')
33
- }, /*#__PURE__*/_react.default.createElement("svg", {
34
- className: "".concat(className || ''),
35
- viewBox: "0 0 132.29 132.29",
36
- height: "35",
37
- width: "35"
38
- }, /*#__PURE__*/_react.default.createElement("mask", {
39
- id: "mask"
40
- }, /*#__PURE__*/_react.default.createElement("rect", {
41
- x: "0",
42
- y: "0",
43
- width: "200",
44
- height: "200",
45
- fill: "white"
46
- }), renderCircle(55, 'black', undefined, '#000')), renderCircle(65, 'mainShape', 'url(#mask)', color), renderCircle(active ? 40 : 0, 'mainShape', undefined, color)), /*#__PURE__*/_react.default.createElement("span", {
47
- style: {
48
- marginLeft: '10px',
49
- color
50
- }
51
- }, text));
52
- };
53
- exports.RadioButton = RadioButton;
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.RadioGroup = void 0;
7
- require("core-js/modules/esnext.iterator.constructor.js");
8
- require("core-js/modules/esnext.iterator.map.js");
9
- var _react = _interopRequireDefault(require("react"));
10
- var _RadioButton = require("./RadioButton");
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
- const RadioGroup = _ref => {
13
- let options = _ref.options,
14
- selected = _ref.selected,
15
- onSelect = _ref.onSelect,
16
- color = _ref.color;
17
- return /*#__PURE__*/_react.default.createElement("div", {
18
- className: "radioGroup"
19
- }, options.map((option, i) => /*#__PURE__*/_react.default.createElement("div", {
20
- key: i
21
- }, /*#__PURE__*/_react.default.createElement("div", {
22
- onClick: () => onSelect(option.key),
23
- style: {
24
- display: 'inline-block'
25
- }
26
- }, /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, {
27
- active: option.key === selected,
28
- text: option.label,
29
- color: color
30
- })))));
31
- };
32
- exports.RadioGroup = RadioGroup;
package/Radio/index.js DELETED
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "RadioButton", {
7
- enumerable: true,
8
- get: function get() {
9
- return _RadioButton.RadioButton;
10
- }
11
- });
12
- Object.defineProperty(exports, "RadioGroup", {
13
- enumerable: true,
14
- get: function get() {
15
- return _RadioGroup.RadioGroup;
16
- }
17
- });
18
- var _RadioButton = require("./RadioButton");
19
- var _RadioGroup = require("./RadioGroup");
package/SunMoon.js DELETED
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SunMoon = void 0;
7
- require("core-js/modules/esnext.iterator.constructor.js");
8
- require("core-js/modules/esnext.iterator.map.js");
9
- var _react = _interopRequireDefault(require("react"));
10
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
- const SunMoon = _ref => {
12
- let sun = _ref.sun,
13
- _ref$color = _ref.color,
14
- color = _ref$color === void 0 ? 'white' : _ref$color,
15
- _ref$tt = _ref.tt,
16
- tt = _ref$tt === void 0 ? 300 : _ref$tt,
17
- _ref$size = _ref.size,
18
- size = _ref$size === void 0 ? 32 : _ref$size,
19
- onClick = _ref.onClick;
20
- const transition = keys => keys.map(key => "".concat(key, " ").concat(tt, "ms linear")).join(', ');
21
- const path = d => /*#__PURE__*/_react.default.createElement("path", {
22
- d: d,
23
- fill: color,
24
- style: {
25
- transition: transition(['d', 'fill'])
26
- }
27
- });
28
- const circle = (cx, cy, r, fill) => /*#__PURE__*/_react.default.createElement("circle", {
29
- cx: cx,
30
- cy: cy,
31
- r: r,
32
- fill: fill,
33
- style: {
34
- transition: transition(['r', 'cy', 'cx', 'fill'])
35
- }
36
- });
37
- return /*#__PURE__*/_react.default.createElement("svg", {
38
- width: size,
39
- height: size,
40
- viewBox: "0 0 120 120",
41
- fill: color,
42
- xmlns: "http://www.w3.org/2000/svg",
43
- style: {
44
- transition: "fill ".concat(tt, "ms linear")
45
- },
46
- onClick: onClick
47
- }, /*#__PURE__*/_react.default.createElement("mask", {
48
- id: "moonMask"
49
- }, /*#__PURE__*/_react.default.createElement("rect", {
50
- height: "10000",
51
- width: "10000",
52
- fill: "white"
53
- }), sun ? circle("91", "43", "0", "black") : circle("73", "53", "35", "black")), /*#__PURE__*/_react.default.createElement("g", {
54
- mask: "url(#moonMask)"
55
- }, sun ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 2L68 18H52L60 2Z"), path("M60 118L52 102L68 102L60 118Z"), path("M89 9.77053L87.9282 27.6269L74.0718 19.6269L89 9.77053Z"), path("M31 110.229L32.0718 92.3731L45.9282 100.373L31 110.229Z"), path("M110.229 31L100.373 45.9282L92.3731 32.0718L110.229 31Z"), path("M9.77053 89L19.6269 74.0718L27.6269 87.9282L9.77053 89Z"), path("M118 60L102 68L102 52L118 60Z"), path("M2 60L18 52L18 68L2 60Z"), path("M110.229 89L92.3731 87.9282L100.373 74.0718L110.229 89Z"), path("M9.77052 31L27.6269 32.0718L19.6269 45.9282L9.77052 31Z"), path("M89 110.229L74.0718 100.373L87.9282 92.3731L89 110.229Z"), path("M31 9.77053L45.9282 19.6269L32.0718 27.6269L31 9.77053Z"), circle("60", "60", "35", color)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 15L68 31H52L60 15Z"), path("M60 105L52 89L68 89L60 105Z"), path("M82.5 21.0289L81.4282 38.8853L67.5718 30.8853L82.5 21.0289Z"), path("M37.5 98.9711L38.5718 81.1147L52.4282 89.1147L37.5 98.9711Z"), path("M98.9712 37.5L89.1148 52.4282L81.1148 38.5718L98.9712 37.5Z"), path("M21.0289 82.5L30.8853 67.5718L38.8853 81.4282L21.0289 82.5Z"), path("M105 60L89 68L89 52L105 60Z"), path("M15 60L31 52L31 68L15 60Z"), path("M98.9711 82.5L81.1147 81.4282L89.1147 67.5718L98.9711 82.5Z"), path("M21.0288 37.5L38.8852 38.5718L30.8852 52.4282L21.0288 37.5Z"), path("M82.5 98.9711L67.5718 89.1147L81.4282 81.1147L82.5 98.9711Z"), path("M37.5 21.0289L52.4282 30.8853L38.5718 38.8853L37.5 21.0289Z"), circle("60", "60", "45", color))));
56
- };
57
- exports.SunMoon = SunMoon;
package/ToggleSwitch.js DELETED
@@ -1,55 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ToggleSwitch = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- const ToggleSwitch = _ref => {
10
- let active = _ref.active,
11
- onChange = _ref.onChange,
12
- label = _ref.label,
13
- transitionTime = _ref.transitionTime,
14
- easing = _ref.easing,
15
- color = _ref.color;
16
- const tt = transitionTime || 100,
17
- e = easing || 'ease-out';
18
- return /*#__PURE__*/_react.default.createElement("div", {
19
- style: {
20
- display: 'inline-block'
21
- }
22
- }, /*#__PURE__*/_react.default.createElement("div", {
23
- className: "toggleSwitch ".concat(active ? 'active' : ''),
24
- style: {
25
- display: 'flex',
26
- alignItems: 'center',
27
- justifyContent: 'flex-start',
28
- cursor: 'default'
29
- },
30
- onClick: () => onChange(!active)
31
- }, /*#__PURE__*/_react.default.createElement("svg", {
32
- viewBox: "0 0 132.29166 132.29167",
33
- height: "55",
34
- width: "55"
35
- // height="35" width="35"
36
- }, /*#__PURE__*/_react.default.createElement("path", {
37
- d: "m 38.052687,47.864419 h 54.916086 c 27.034327,2.305319 25.559797,39.054731 0,40.30747 H 38.075448 C 10.11119,87.499017 11.297192,48.014766 38.052687,47.864419 Z",
38
- className: 'track'
39
- }), /*#__PURE__*/_react.default.createElement("circle", {
40
- className: "toggleSwitch ".concat(active ? 'active' : ''),
41
- fill: active ? 'dodgerblue' : 'grey',
42
- cx: active ? 94.778557 : 35.651833,
43
- cy: "68.430901",
44
- r: "34",
45
- style: {
46
- transition: "cx ".concat(tt, "ms ").concat(e, ", fill ").concat(tt, "ms ").concat(e)
47
- }
48
- })), /*#__PURE__*/_react.default.createElement("span", {
49
- style: {
50
- marginLeft: '10px',
51
- color
52
- }
53
- }, label)));
54
- };
55
- exports.ToggleSwitch = ToggleSwitch;
package/index.js DELETED
@@ -1,117 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "CheckBox", {
7
- enumerable: true,
8
- get: function get() {
9
- return _CheckBox.CheckBox;
10
- }
11
- });
12
- Object.defineProperty(exports, "Dots", {
13
- enumerable: true,
14
- get: function get() {
15
- return _Dots.Dots;
16
- }
17
- });
18
- Object.defineProperty(exports, "Loader", {
19
- enumerable: true,
20
- get: function get() {
21
- return _Loader.Loader;
22
- }
23
- });
24
- Object.defineProperty(exports, "Menu", {
25
- enumerable: true,
26
- get: function get() {
27
- return _Menu.Menu;
28
- }
29
- });
30
- Object.defineProperty(exports, "MenuButton", {
31
- enumerable: true,
32
- get: function get() {
33
- return _MenuButton.MenuButton;
34
- }
35
- });
36
- Object.defineProperty(exports, "NumberSelect", {
37
- enumerable: true,
38
- get: function get() {
39
- return _NumberSelect.NumberSelect;
40
- }
41
- });
42
- Object.defineProperty(exports, "NumberSliderSelect", {
43
- enumerable: true,
44
- get: function get() {
45
- return _NumberSliderSelect.NumberSliderSelect;
46
- }
47
- });
48
- Object.defineProperty(exports, "PaneView", {
49
- enumerable: true,
50
- get: function get() {
51
- return _PaneView.PaneView;
52
- }
53
- });
54
- Object.defineProperty(exports, "RadioButton", {
55
- enumerable: true,
56
- get: function get() {
57
- return _Radio.RadioButton;
58
- }
59
- });
60
- Object.defineProperty(exports, "RadioGroup", {
61
- enumerable: true,
62
- get: function get() {
63
- return _Radio.RadioGroup;
64
- }
65
- });
66
- Object.defineProperty(exports, "ResetButton", {
67
- enumerable: true,
68
- get: function get() {
69
- return _ResetButton.ResetButton;
70
- }
71
- });
72
- Object.defineProperty(exports, "SettingsButton", {
73
- enumerable: true,
74
- get: function get() {
75
- return _SettingsButton.SettingsButton;
76
- }
77
- });
78
- Object.defineProperty(exports, "SunMoon", {
79
- enumerable: true,
80
- get: function get() {
81
- return _SunMoon.SunMoon;
82
- }
83
- });
84
- Object.defineProperty(exports, "ToggleSwitch", {
85
- enumerable: true,
86
- get: function get() {
87
- return _ToggleSwitch.ToggleSwitch;
88
- }
89
- });
90
- Object.defineProperty(exports, "UseEffectOnce", {
91
- enumerable: true,
92
- get: function get() {
93
- return _UseEffectOnce.default;
94
- }
95
- });
96
- Object.defineProperty(exports, "UseEffectPartialDeps", {
97
- enumerable: true,
98
- get: function get() {
99
- return _UseEffectPartialDeps.default;
100
- }
101
- });
102
- var _UseEffectOnce = _interopRequireDefault(require("./utils/UseEffectOnce"));
103
- var _UseEffectPartialDeps = _interopRequireDefault(require("./utils/UseEffectPartialDeps"));
104
- var _Menu = require("./Menu/Menu");
105
- var _SettingsButton = require("./Buttons/SettingsButton");
106
- var _MenuButton = require("./Buttons/MenuButton");
107
- var _ResetButton = require("./Buttons/ResetButton");
108
- var _Radio = require("./Radio");
109
- var _CheckBox = require("./CheckBox");
110
- var _Dots = require("./Dots/Dots");
111
- var _SunMoon = require("./SunMoon");
112
- var _ToggleSwitch = require("./ToggleSwitch");
113
- var _NumberSliderSelect = require("./NumberSliderSelect/NumberSliderSelect");
114
- var _NumberSelect = require("./NumberSelect/NumberSelect");
115
- var _PaneView = require("./PaneView/PaneView");
116
- var _Loader = require("./Loader/Loader");
117
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- const useEffectOnce = effect => {
9
- // eslint-disable-next-line react-hooks/exhaustive-deps
10
- (0, _react.useEffect)(effect, []);
11
- };
12
- var _default = exports.default = useEffectOnce;
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- const useEffectPartialDeps = (effect, deps) => {
9
- // eslint-disable-next-line react-hooks/exhaustive-deps
10
- (0, _react.useEffect)(effect, deps);
11
- };
12
- var _default = exports.default = useEffectPartialDeps;