grevlingui 0.1.45 → 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 -263
  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
package/Menu/Menu.css DELETED
@@ -1,91 +0,0 @@
1
- .xburgerMenuButton {
2
- font-size: 1.3em;
3
- padding: 0;
4
- cursor: pointer;
5
- height: 50px;
6
- width: 50px;
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
- outline: none;
11
- border: none;
12
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
13
- border-radius: .5rem;
14
- }
15
-
16
- .xburgerMenu {
17
- padding-top: 80px;
18
- position: absolute;
19
- top: 0;
20
- bottom: 0;
21
- }
22
-
23
- .xburgerMenu.fader {
24
- left: 0;
25
- right: 0;
26
- }
27
-
28
- .slider.xburgerMenu {
29
- left: calc(100vw + 20px);
30
- right: calc(-80vw - 20px);
31
- }
32
-
33
- .left.slider.xburgerMenu {
34
- left: calc(-80vw - 20px);
35
- right: calc(100vw + 20px);
36
- }
37
-
38
- .button {
39
- position: absolute;
40
- top: 1rem;
41
- }
42
-
43
- .button:not(.left) {
44
- right: 1rem;
45
- }
46
-
47
- .left.button {
48
- left: 1rem;
49
- }
50
-
51
- .xburgerTouchOutsideSensor {
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- right: 0;
56
- bottom: 0;
57
- opacity: 0;
58
- pointer-events: none;
59
- }
60
-
61
- .xburgerTouchOutsideSensor.show {
62
- opacity: 1;
63
- pointer-events: unset;
64
- }
65
-
66
- .slider.xburgerMenu.show {
67
- left: 0;
68
- right: 0;
69
- }
70
-
71
- .partial.slider.xburgerMenu.show:not(.left) {
72
- left: 20vw;
73
- }
74
-
75
- .partial.left.slider.xburgerMenu.show {
76
- right: 20vw;
77
- }
78
-
79
-
80
- .xburgerMenu a * {
81
- pointer-events: none; /* allow menu item click detection to close menu*/
82
- }
83
-
84
- .fader.xburgerMenu {
85
- opacity: 1;
86
- }
87
-
88
- .fader.xburgerMenu:not(.show) {
89
- opacity: 0;
90
- pointer-events: none;
91
- }
package/Menu/Menu.js DELETED
@@ -1,103 +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.constructor.js");
9
- require("core-js/modules/esnext.iterator.filter.js");
10
- require("core-js/modules/esnext.iterator.for-each.js");
11
- require("core-js/modules/web.dom-collections.iterator.js");
12
- Object.defineProperty(exports, "__esModule", {
13
- value: true
14
- });
15
- exports.Menu = void 0;
16
- var _react = _interopRequireWildcard(require("react"));
17
- require("./Menu.css");
18
- var _MenuButton = require("../Buttons/MenuButton");
19
- var _SettingsButton = require("../Buttons/SettingsButton");
20
- 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); }
21
- 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; }
22
- 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; }
23
- 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; }
24
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
25
- 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); }
26
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
27
- 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."); }
28
- 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; } }
29
- 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; }
30
- 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; } }
31
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
32
- const Menu = _ref => {
33
- let children = _ref.children,
34
- onCloseClickOverride = _ref.onCloseClickOverride,
35
- shouldCloseOnClick = _ref.shouldCloseOnClick,
36
- _ref$transitionTime = _ref.transitionTime,
37
- transitionTime = _ref$transitionTime === void 0 ? 300 : _ref$transitionTime,
38
- _ref$zIndex = _ref.zIndex,
39
- zIndex = _ref$zIndex === void 0 ? 2 : _ref$zIndex,
40
- color = _ref.color,
41
- bgColor = _ref.bgColor,
42
- menuBgColor = _ref.menuBgColor,
43
- _ref$backdropColor = _ref.backdropColor,
44
- backdropColor = _ref$backdropColor === void 0 ? '#e3e6e850' : _ref$backdropColor,
45
- settings = _ref.settings,
46
- renderButton = _ref.renderButton,
47
- className = _ref.className,
48
- fullSlider = _ref.fullSlider,
49
- fader = _ref.fader,
50
- left = _ref.left;
51
- const _useState = (0, _react.useState)(false),
52
- _useState2 = _slicedToArray(_useState, 2),
53
- show = _useState2[0],
54
- setShow = _useState2[1];
55
- let button;
56
- if (renderButton) button = renderButton(show, setShow, transitionTime, color, bgColor);else {
57
- const Button = settings ? _SettingsButton.SettingsButton : _MenuButton.MenuButton;
58
- button = /*#__PURE__*/_react.default.createElement(Button, {
59
- className: "button ".concat(left ? 'left' : ''),
60
- open: !!(show || onCloseClickOverride),
61
- setOpen: v => {
62
- if (onCloseClickOverride) onCloseClickOverride();else setShow(v);
63
- },
64
- transitionTime: transitionTime,
65
- stageDelay: transitionTime * .3,
66
- color: color,
67
- backgroundColor: bgColor,
68
- styles: {
69
- zIndex: zIndex + 2,
70
- backgroundColor: bgColor
71
- }
72
- });
73
- }
74
- let container;
75
- const style = {
76
- zIndex: zIndex + 1,
77
- color,
78
- backgroundColor: menuBgColor !== null && menuBgColor !== void 0 ? menuBgColor : bgColor
79
- };
80
- if (fader) container = /*#__PURE__*/_react.default.createElement("div", {
81
- className: "xburgerMenu fader ".concat(show ? ' show' : '', " ").concat(className),
82
- onClick: e => shouldCloseOnClick && shouldCloseOnClick(e) && setShow(false),
83
- style: _objectSpread(_objectSpread({}, style), {}, {
84
- transition: "opacity ".concat(transitionTime, "ms ease-out")
85
- })
86
- }, children);else container = /*#__PURE__*/_react.default.createElement("div", {
87
- className: "xburgerMenu slider ".concat(fullSlider ? '' : 'partial', " ").concat(show ? ' show' : '', " ").concat(left ? 'left' : '', " ").concat(className),
88
- onClick: e => shouldCloseOnClick && shouldCloseOnClick(e) && setShow(false),
89
- style: _objectSpread(_objectSpread({}, style), {}, {
90
- transition: "left ".concat(transitionTime, "ms ease-out, right ").concat(transitionTime, "ms ease-out")
91
- })
92
- }, children);
93
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !fullSlider && !fader && /*#__PURE__*/_react.default.createElement("div", {
94
- className: "xburgerTouchOutsideSensor ".concat(show ? ' show' : ''),
95
- onClick: () => setShow(false),
96
- style: {
97
- transition: "opacity ".concat(transitionTime, "ms ease-out"),
98
- zIndex,
99
- backgroundColor: backdropColor
100
- }
101
- }), button, container);
102
- };
103
- exports.Menu = Menu;
@@ -1,107 +0,0 @@
1
-
2
-
3
- .numberSelect {
4
- position: relative;
5
- z-index: 2;
6
- }
7
-
8
- .swipeBlobContainer {
9
- position: absolute;
10
- top: 0;
11
- left: 0;
12
- right: 0;
13
- bottom: 0;
14
-
15
- /*display: flex;*/
16
- /*align-items: center;*/
17
- /*justify-content: center;*/
18
- }
19
-
20
- .swipeBlobContainer .swipeBlob {
21
- /*background-color: hotpink;*/
22
- position: absolute;
23
- /*border-radius: 100%;*/
24
- /*clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);*/
25
- /*clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);*/
26
- /*clip-path: polygon(15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%);*/
27
- /*clip-path: polygon(15% 25%, 50% 0, 85% 25%, 100% 50%, 75% 85%, 50% 100%, 25% 85%, 0 50%);*/
28
- clip-path: polygon(15% 20%, 50% 0, 85% 20%, 100% 50%, 80% 85%, 50% 100%, 20% 85%, 0 50%);
29
- }
30
-
31
- .plusMinus {
32
- position: absolute;
33
- left: 0;
34
- right: 0;
35
- text-align: center;
36
- z-index: 3;
37
- color: white;
38
-
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
-
43
- /*background-color: hotpink!important;*/
44
- }
45
-
46
- .plusMinus svg {
47
- margin: 0
48
- }
49
-
50
- .plusMinus.plus{
51
- /*top: 0;*/
52
- }
53
-
54
- .plusMinus.minus{
55
- /*bottom: 0;*/
56
- }
57
-
58
- .numberSelect_doneClosing {
59
- z-index: 1;
60
- }
61
-
62
- .numberSelect_value {
63
- position: relative;
64
- display: flex;
65
- align-items: center;
66
- justify-content: center;
67
- border-radius: 100%;
68
- z-index: 2;
69
- }
70
-
71
- .numberSelect_input {
72
- opacity: 1;
73
- z-index: 1;
74
- transition: opacity 200ms linear;
75
- }
76
-
77
- .numberSelect_input-hidden {
78
- opacity: 0;
79
- pointer-events: none;
80
- }
81
-
82
- .numberSelect_increment {
83
- border-radius: 100%;
84
- position: absolute;
85
- z-index: 2;
86
- transition: top 200ms linear, bottom 200ms linear;
87
- }
88
-
89
- .numberSelect_blur {
90
- position: absolute;
91
- pointer-events: none;
92
- z-index: 1;
93
- opacity: 1;
94
- transition: opacity 200ms linear;
95
- }
96
-
97
- .numberSelect_input-hidden .numberSelect_blur {
98
- opacity: 0;
99
- }
100
-
101
- .numberSelect_add svg path {
102
- translate: 0 -2rem;
103
- }
104
-
105
- .numberSelect_subtract svg path {
106
- translate: 0 2rem;
107
- }
@@ -1,263 +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.constructor.js");
9
- require("core-js/modules/esnext.iterator.filter.js");
10
- require("core-js/modules/esnext.iterator.for-each.js");
11
- require("core-js/modules/web.dom-collections.iterator.js");
12
- Object.defineProperty(exports, "__esModule", {
13
- value: true
14
- });
15
- exports.NumberSelect = void 0;
16
- var _react = _interopRequireWildcard(require("react"));
17
- require("./NumberSelect.css");
18
- 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); }
19
- 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; }
20
- 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; }
21
- 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; }
22
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
23
- 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); }
24
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
25
- 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."); }
26
- 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; } }
27
- 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; }
28
- 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; } }
29
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
30
- const NumberSelect = _ref => {
31
- let value = _ref.value,
32
- setValue = _ref.setValue,
33
- _ref$min = _ref.min,
34
- min = _ref$min === void 0 ? 1 : _ref$min,
35
- _ref$max = _ref.max,
36
- max = _ref$max === void 0 ? 10 : _ref$max,
37
- _ref$size = _ref.size,
38
- size = _ref$size === void 0 ? 5 : _ref$size,
39
- _ref$color = _ref.color,
40
- color = _ref$color === void 0 ? 'white' : _ref$color,
41
- _ref$numberBgColor = _ref.numberBgColor,
42
- numberBgColor = _ref$numberBgColor === void 0 ? '#663399' : _ref$numberBgColor,
43
- _ref$selectorColor = _ref.selectorColor,
44
- selectorColor = _ref$selectorColor === void 0 ? '#1E90FF' : _ref$selectorColor,
45
- _ref$timeout = _ref.timeout,
46
- timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout,
47
- onOpenInput = _ref.onOpenInput,
48
- closed = _ref.closed,
49
- _ref$invert = _ref.invert,
50
- invert = _ref$invert === void 0 ? false : _ref$invert,
51
- _ref$noFlick = _ref.noFlick,
52
- noFlick = _ref$noFlick === void 0 ? false : _ref$noFlick;
53
- const _useState = (0, _react.useState)(false),
54
- _useState2 = _slicedToArray(_useState, 2),
55
- editing = _useState2[0],
56
- setEditing = _useState2[1];
57
- const _useState3 = (0, _react.useState)(true),
58
- _useState4 = _slicedToArray(_useState3, 2),
59
- doneClosing = _useState4[0],
60
- setDoneClosing = _useState4[1];
61
- const _useState5 = (0, _react.useState)(),
62
- _useState6 = _slicedToArray(_useState5, 2),
63
- closeTimeout = _useState6[0],
64
- setCloseTimeout = _useState6[1];
65
- const _useState7 = (0, _react.useState)(),
66
- _useState8 = _slicedToArray(_useState7, 2),
67
- doneClosingTimeout = _useState8[0],
68
- setDoneClosingTimeout = _useState8[1];
69
- const _useState9 = (0, _react.useState)(),
70
- _useState0 = _slicedToArray(_useState9, 2),
71
- touchStartPosition = _useState0[0],
72
- setTouchStartPosition = _useState0[1];
73
- const _useState1 = (0, _react.useState)(0),
74
- _useState10 = _slicedToArray(_useState1, 2),
75
- verticalDistanceSwiped = _useState10[0],
76
- setVerticalDistanceSwiped = _useState10[1];
77
- const close = () => {
78
- clearTimeout(closeTimeout);
79
- setEditing(false);
80
- setCloseTimeout(undefined);
81
- startDoneClosingTimeout();
82
- };
83
- (0, _react.useEffect)(() => {
84
- if (closed) close();
85
- // eslint-disable-next-line react-hooks/exhaustive-deps
86
- }, [closed]);
87
- const startCloseTimeout = () => {
88
- if (!timeout) return;
89
- clearTimeout(closeTimeout);
90
- setCloseTimeout(setTimeout(close, timeout));
91
- };
92
- const startDoneClosingTimeout = () => {
93
- clearTimeout(doneClosingTimeout);
94
- setDoneClosingTimeout(setTimeout(() => {
95
- setDoneClosing(true);
96
- setDoneClosingTimeout(undefined);
97
- }, 200));
98
- };
99
- const fullSize = "".concat(size, "rem");
100
- const incrementorSize = "".concat(size * .8, "rem");
101
- const incrementorVerticalOffset = "-".concat(size * .9, "rem");
102
- const incrementorHorizontalOffset = "".concat(size * .1, "rem");
103
- const minusHalfSize = "-".concat(size / 3, "rem");
104
- const incrementorStyle = {
105
- height: incrementorSize,
106
- width: incrementorSize,
107
- backgroundColor: selectorColor,
108
- right: incrementorHorizontalOffset,
109
- bottom: incrementorHorizontalOffset
110
- };
111
- const addStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
112
- top: editing ? incrementorVerticalOffset : 0
113
- });
114
- const subtractStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
115
- bottom: editing ? incrementorVerticalOffset : 0
116
- });
117
- const blurStyle = {
118
- background: "radial-gradient(".concat(numberBgColor, "FF, ").concat(numberBgColor, "00, ").concat(numberBgColor, "00)"),
119
- left: minusHalfSize,
120
- right: minusHalfSize,
121
- top: incrementorVerticalOffset,
122
- bottom: incrementorVerticalOffset
123
- };
124
- const icon = up => /*#__PURE__*/_react.default.createElement("svg", {
125
- xmlns: "http://www.w3.org/2000/svg",
126
- viewBox: "0 -960 960 960",
127
- fill: color
128
- }, up ? /*#__PURE__*/_react.default.createElement("path", {
129
- d: "m283-345-43-43 240-240 240 239-43 43-197-197-197 198Z"
130
- }) : /*#__PURE__*/_react.default.createElement("path", {
131
- d: "M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"
132
- }));
133
- const increment = (change, flick) => () => {
134
- const realChange = invert ? -1 * change : change;
135
- if (!flick) startCloseTimeout();
136
- const nv = realChange + value;
137
- if (nv > max || nv < min) return;
138
- setValue(nv);
139
- };
140
- const renderInputs = () => /*#__PURE__*/_react.default.createElement("div", {
141
- className: "numberSelect_input ".concat(editing ? '' : 'numberSelect_input-hidden')
142
- }, /*#__PURE__*/_react.default.createElement("div", {
143
- className: 'numberSelect_increment numberSelect_add',
144
- style: addStyle,
145
- onClick: increment(1)
146
- }, icon(true)), /*#__PURE__*/_react.default.createElement("div", {
147
- className: "numberSelect_blur",
148
- style: blurStyle
149
- }), /*#__PURE__*/_react.default.createElement("div", {
150
- className: "numberSelect_increment numberSelect_subtract",
151
- style: subtractStyle,
152
- onClick: increment(-1)
153
- }, icon()));
154
- const gety = e => e.touches[0].clientY;
155
- const onTouchStart = e => {
156
- if (noFlick) return;
157
- setTouchStartPosition(gety(e));
158
- };
159
- const onTouchMove = e => {
160
- if (noFlick) return;
161
- const newVal = touchStartPosition - gety(e);
162
- const bottom = min === value && !invert || max === value && invert;
163
- const top = max === value && !invert || min === value && invert;
164
- if (bottom && newVal < 0 || top && newVal > 0) {
165
- return;
166
- }
167
- if (min === value && newVal < 0) return;
168
- setVerticalDistanceSwiped(touchStartPosition - gety(e));
169
- };
170
- const swipeDistance = 30;
171
- const onTouchEnd = () => {
172
- if (noFlick || editing) return;
173
- if (Math.abs(verticalDistanceSwiped) > swipeDistance) {
174
- increment(verticalDistanceSwiped > 0 ? 1 : -1, true)();
175
- }
176
- setVerticalDistanceSwiped(0);
177
- // do haptix?
178
- };
179
- const offset = Math.min(Math.max(verticalDistanceSwiped, swipeDistance * -1), swipeDistance) / swipeDistance;
180
- let top = 0,
181
- bottom = 0;
182
- if (offset !== 0) {
183
- const absValue = Math.abs(offset);
184
- const distance = size / 5 * absValue;
185
- const boop = "-".concat(distance, "rem");
186
- if (offset > 0) {
187
- top = boop;
188
- } else {
189
- bottom = boop;
190
- }
191
- }
192
- let blobStyle = {
193
- top,
194
- bottom
195
- };
196
-
197
- // const florp = Math.max(0, Math.abs(offset) - 0.3) * 1.5;
198
- const florp = Math.max(0, Math.abs(offset) - 0.5) * 1.5;
199
- return /*#__PURE__*/_react.default.createElement("div", {
200
- onTouchStart: onTouchStart,
201
- onTouchMove: onTouchMove,
202
- onTouchEnd: onTouchEnd,
203
- className: "numberSelect ".concat(editing ? 'numberSelect_editing' : '', " ").concat(doneClosing ? 'numberSelect_doneClosing' : '')
204
- }, /*#__PURE__*/_react.default.createElement("div", {
205
- className: "plusMinus plus",
206
- style: {
207
- top: "-".concat(size / 5, "rem"),
208
- opacity: offset > 0 ? florp : 0,
209
- height: "".concat(size / 3, "rem")
210
- }
211
- }, /*#__PURE__*/_react.default.createElement("svg", {
212
- height: "".concat(size / 4, "rem"),
213
- viewBox: "0 0 271 153",
214
- xmlns: "http://www.w3.org/2000/svg"
215
- }, /*#__PURE__*/_react.default.createElement("path", {
216
- d: "M136.68 19.1619L17.4993 133.606H47.2944L136.68 64.9149L226.065 133.606H255.86L136.68 19.1619Z",
217
- fill: color
218
- }))), /*#__PURE__*/_react.default.createElement("div", {
219
- className: "plusMinus minus",
220
- style: {
221
- bottom: "-".concat(size / 5, "rem"),
222
- opacity: offset < 0 ? florp : 0,
223
- height: "".concat(size / 3, "rem")
224
- }
225
- }, /*#__PURE__*/_react.default.createElement("svg", {
226
- height: "".concat(size / 4, "rem"),
227
- viewBox: "0 0 271 153",
228
- xmlns: "http://www.w3.org/2000/svg"
229
- }, /*#__PURE__*/_react.default.createElement("path", {
230
- d: "M136.68 133.606L17.4993 19.1621H47.2944L136.68 87.8532L226.065 19.1621H255.86L136.68 133.606Z",
231
- fill: color
232
- }))), /*#__PURE__*/_react.default.createElement("div", {
233
- className: "swipeBlobContainer"
234
- }, /*#__PURE__*/_react.default.createElement("div", {
235
- className: "swipeBlob",
236
- style: _objectSpread({
237
- left: "".concat(size * 0.02, "rem"),
238
- right: "".concat(size * 0.02, "rem"),
239
- backgroundColor: numberBgColor
240
- }, blobStyle)
241
- })), /*#__PURE__*/_react.default.createElement("div", {
242
- className: "numberSelect_value",
243
- onClick: () => {
244
- if (!noFlick) return;
245
- if (!editing) {
246
- startCloseTimeout();
247
- onOpenInput === null || onOpenInput === void 0 || onOpenInput();
248
- setDoneClosing(false);
249
- setEditing(true);
250
- } else {
251
- close();
252
- }
253
- },
254
- style: {
255
- height: fullSize,
256
- width: fullSize,
257
- color,
258
- backgroundColor: numberBgColor,
259
- fontSize: "".concat(size / 2, "rem")
260
- }
261
- }, value), renderInputs());
262
- };
263
- exports.NumberSelect = NumberSelect;
@@ -1,110 +0,0 @@
1
- .hidden.NumberSliderSelectWrapper {
2
- overflow: hidden;
3
- }
4
-
5
- .NumberSliderSelect {
6
- position: relative;
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
-
11
- cursor: default;
12
- -webkit-user-select: none; /* Safari */
13
- -ms-user-select: none; /* IE 10 and IE 11 */
14
- user-select: none; /* Standard syntax */
15
- }
16
-
17
- .NumberSliderSelect .pointerContainer {
18
- position: absolute;
19
- left: 0;
20
- right: 0;
21
-
22
- display: flex;
23
- align-items: center;
24
- justify-content: center;
25
- pointer-events: none;
26
- z-index: 1;
27
- }
28
-
29
- .NumberSliderSelect .pointer,
30
- .NumberSliderSelect .pointerShadow {
31
- clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
32
- }
33
-
34
- .NumberSliderSelect .pointerShadow {
35
- background-color: #33333390;
36
- }
37
-
38
-
39
- .NumberSliderSelect .inputModal {
40
- z-index: 3;
41
- position: absolute;
42
- border-radius: 1rem;
43
- opacity: 1;
44
- }
45
-
46
- .NumberSliderSelect .hidden.inputModal {
47
- opacity: 0;
48
- transition: opacity 300ms linear;
49
- }
50
-
51
- .NumberSliderSelect .fade {
52
- position: absolute;
53
- top: 0;
54
- bottom: 0;
55
- z-index: 5;
56
- height: 100%;
57
- pointer-events: none;
58
- }
59
-
60
- .NumberSliderSelect .fade.left {
61
- left: 0;
62
- border-radius: 1rem 0 0 1rem;
63
- }
64
-
65
- .NumberSliderSelect .fade.right {
66
- right: 0;
67
- border-radius: 0 1rem 1rem 0;
68
- }
69
-
70
- .NumberSliderSelect .inputModal.shadow {
71
- box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
72
- -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
73
- -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
74
- }
75
-
76
-
77
- .NumberSliderSelect .scrollSelector::-webkit-scrollbar {
78
- display: none;
79
- }
80
-
81
- .NumberSliderSelect .scrollSelector {
82
- position: relative;
83
- width: 90px;
84
- overflow: auto;
85
- overscroll-behavior: contain;
86
- padding: 1rem 0;
87
-
88
- scroll-snap-type: x mandatory;
89
- }
90
-
91
- .NumberSliderSelect .thin.scrollSelector {
92
- padding: 8px 0;
93
- }
94
-
95
- .NumberSliderSelect .options {
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
-
100
- }
101
-
102
- .NumberSliderSelect .option {
103
- border-radius: 2rem;
104
- display: flex;
105
- align-items: center;
106
- justify-content: center;
107
-
108
- scroll-snap-align: start;
109
- scroll-snap-stop: always;
110
- }