grevlingui 0.1.22 → 0.1.24

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 (6) hide show
  1. package/NumberSelect/NumberSelect.css +12 -95
  2. package/NumberSelect/NumberSelect.js +64 -131
  3. package/NumberSliderSelect/NumberSliderSelect.css +110 -0
  4. package/NumberSliderSelect/NumberSliderSelect.js +177 -0
  5. package/index.js +8 -0
  6. package/package.json +5 -1
package/NumberSelect/NumberSelect.css CHANGED
@@ -1,110 +1,27 @@
1
- .hidden.numberSelectWrapper {
2
- overflow: hidden;
3
- }
1
+
4
2
 
5
3
  .numberSelect {
6
4
  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
5
  }
16
6
 
17
- .numberSelect .pointerContainer {
18
- position: absolute;
19
- left: 0;
20
- right: 0;
21
-
7
+ .numberSelect_value {
8
+ position: relative;
22
9
  display: flex;
23
10
  align-items: center;
24
11
  justify-content: center;
25
- pointer-events: none;
26
- z-index: 1;
27
- }
28
-
29
- .numberSelect .pointer,
30
- .numberSelect .pointerShadow {
31
- clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
32
- }
33
-
34
- .numberSelect .pointerShadow {
35
- background-color: #33333390;
36
- }
37
-
38
-
39
- .numberSelect .inputModal {
12
+ border-radius: 100%;
40
13
  z-index: 3;
41
- position: absolute;
42
- border-radius: 1rem;
43
- opacity: 1;
44
14
  }
45
15
 
46
- .numberSelect .hidden.inputModal {
47
- opacity: 0;
48
- transition: opacity 300ms linear;
49
- }
50
-
51
- .numberSelect .fade {
16
+ .numberSelect_increment {
17
+ border-radius: 100%;
52
18
  position: absolute;
53
- top: 0;
54
- bottom: 0;
55
- z-index: 5;
56
- height: 100%;
57
- pointer-events: none;
58
- }
59
-
60
- .numberSelect .fade.left {
61
- left: 0;
62
- border-radius: 1rem 0 0 1rem;
63
- }
64
-
65
- .numberSelect .fade.right {
66
- right: 0;
67
- border-radius: 0 1rem 1rem 0;
19
+ z-index: 2;
68
20
  }
69
21
 
70
- .numberSelect .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
- .numberSelect .scrollSelector::-webkit-scrollbar {
78
- display: none;
79
- }
80
-
81
- .numberSelect .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
- .numberSelect .thin.scrollSelector {
92
- padding: 8px 0;
93
- }
94
-
95
- .numberSelect .options {
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
-
100
- }
101
-
102
- .numberSelect .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;
22
+ .numberSelect_blur {
23
+ position: absolute;
24
+ opacity: .5;
25
+ /*background: radial-gradient(#1E90FFFF, #1E90FFFF, #1E90FF00, #1E90FF00, #1E90FF00);*/
26
+ z-index: 1;
110
27
  }
package/NumberSelect/NumberSelect.js CHANGED
@@ -11,10 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  require("./NumberSelect.css");
13
13
 
14
- var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
15
 
20
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,153 +21,90 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
25
21
 
26
22
  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; }
27
23
 
28
- const cosmos = {};
29
-
30
24
  const NumberSelect = _ref => {
31
25
  let {
32
26
  value,
33
27
  setValue,
34
- flip,
35
- thin,
36
28
  min = 1,
37
29
  max = 10,
38
- shadow,
39
- size = 40,
30
+ size = 5,
40
31
  color = 'white',
41
- numberBgColor = '#663399FF',
42
- selectorColor = '#1E90FFFF',
43
- pointerColor = '#6c9fff',
32
+ numberBgColor = '#663399',
33
+ selectorColor = '#1E90FF',
44
34
  pointerShadowColor = '#33333390',
45
35
  top = -16
46
36
  } = _ref;
47
- const [id] = (0, _react.useState)("id-".concat(Math.random()));
48
- const [rendered, setRendered] = (0, _react.useState)(false);
49
- const [showInput, setShowInput] = (0, _react.useState)(false);
50
- const [hidden, setHidden] = (0, _react.useState)(false);
51
- const [timeout1, setTimeout1] = (0, _react.useState)(0);
52
- const [timeout2, setTimeout2] = (0, _react.useState)(0);
53
- const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
54
- let cosmoState = cosmos[id];
55
- (0, _react.useLayoutEffect)(() => {
56
- cosmoState = cosmos[id] = {
57
- refs: []
58
- };
59
- setRendered(true);
60
- }, []);
61
- (0, _UseEffectPartialDeps.default)(() => {
62
- clearTimeout(timeout1);
63
- if (showInput) setHidden(false);else setTimeout1(setTimeout(() => setHidden(true), 320));
64
- }, [showInput]);
65
- (0, _UseEffectPartialDeps.default)(() => {
66
- if (!rendered) return;
67
- const ref = cosmoState.refs[value + 2 - min];
68
- if (!ref) return;
69
- ref.scrollIntoView();
70
- }, [rendered]);
71
- if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
72
-
73
- const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
74
-
75
- if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
76
- const optionStyle = {
77
- width: "".concat(size, "px"),
78
- height: "".concat(size - 1, "px"),
79
- fontSize: "".concat(size * .6, "px"),
80
- borderRadius: "".concat(size, "px"),
81
- paddingBottom: '1px'
37
+ const [editing, setEditing] = (0, _react.useState)(false);
38
+ const fullSize = "".concat(size, "rem");
39
+ const incrementorSize = "".concat(size * .8, "rem");
40
+ const incrementorVerticalOffset = "-".concat(size * .9, "rem");
41
+ const incrementorHorizontalOffset = "".concat(size * .1, "rem");
42
+ const minusHalfSize = "-".concat(size / 3, "rem");
43
+ const incrementorStyle = {
44
+ height: incrementorSize,
45
+ width: incrementorSize,
46
+ backgroundColor: selectorColor,
47
+ right: incrementorHorizontalOffset,
48
+ bottom: incrementorHorizontalOffset
82
49
  };
83
50
 
84
- const renderFade = (side, direction) => /*#__PURE__*/_react.default.createElement("div", {
85
- className: "fade ".concat(side),
86
- style: {
87
- width: "".concat(size * .8, "px"),
88
- backgroundImage: "linear-gradient(to ".concat(direction, ", ").concat(selectorColor, ", ").concat(selectorColor, " , #00000000)")
89
- }
51
+ const addStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
52
+ top: incrementorVerticalOffset
53
+ });
54
+
55
+ const subtractStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
56
+ bottom: incrementorVerticalOffset
90
57
  });
91
58
 
92
- const pointerContainerStyle = flip ? {
93
- bottom: "-".concat(size * .4, "px"),
94
- transform: 'rotate(180deg)'
95
- } : {
96
- top: "-".concat(size / 2, "px")
59
+ const blurStyle = {
60
+ background: "radial-gradient(".concat(selectorColor, "FF, ").concat(selectorColor, "FF, ").concat(selectorColor, "00, ").concat(selectorColor, "00, ").concat(selectorColor, "00)"),
61
+ left: minusHalfSize,
62
+ right: minusHalfSize,
63
+ top: incrementorVerticalOffset,
64
+ bottom: incrementorVerticalOffset
97
65
  };
98
66
 
99
- const renderModal = () => /*#__PURE__*/_react.default.createElement("div", {
100
- className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
101
- style: {
102
- backgroundColor: selectorColor,
103
- top: "".concat(top + (thin ? 8 : 0), "px")
104
- },
105
- onTouchStart: () => {
106
- clearTimeout(timeout2);
107
- setShowInput(true);
108
- },
109
- onTouchEnd: () => {
110
- clearTimeout(timeout2);
111
- setTimeout2(setTimeout(() => setShowInput(false), 800));
112
- }
113
- }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
114
- className: "pointerContainer",
115
- style: pointerContainerStyle
116
- }, /*#__PURE__*/_react.default.createElement("div", {
117
- className: "pointerShadow",
118
- style: {
119
- backgroundColor: pointerShadowColor,
120
- width: "".concat(size / 2, "px"),
121
- height: "".concat(size * 0.8, "px"),
122
- marginTop: "".concat(size / 7, "px")
123
- }
124
- })), /*#__PURE__*/_react.default.createElement("div", {
125
- className: "pointerContainer",
126
- style: pointerContainerStyle
127
- }, /*#__PURE__*/_react.default.createElement("div", {
128
- className: "pointer",
129
- style: {
130
- backgroundColor: pointerColor,
131
- width: "".concat(size / 2, "px"),
132
- height: "".concat(size * 0.8, "px")
133
- }
134
- })), /*#__PURE__*/_react.default.createElement("div", {
135
- className: "scrollSelector ".concat(thin ? 'thin' : ''),
136
- ref: node => cosmoState.scrollRef = node,
137
- style: {
138
- width: "".concat(size * 3, "px")
139
- },
140
- onScroll: () => {
141
- const centerNumber = Math.round(getExactValue());
142
- if (value !== centerNumber) setValue(centerNumber);
143
- }
144
- }, /*#__PURE__*/_react.default.createElement("div", {
145
- className: "options",
146
- style: {
147
- width: "".concat((options.length + 2) * size, "px")
148
- }
149
- }, /*#__PURE__*/_react.default.createElement("div", {
150
- className: "option",
151
- style: optionStyle,
152
- ref: node => cosmoState.refs[0] = node
153
- }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
154
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
155
- backgroundColor: value === n ? numberBgColor : ''
156
- }),
157
- key: n,
158
- ref: node => cosmoState.refs[i + 1] = node,
159
- className: 'option'
160
- }, n)), /*#__PURE__*/_react.default.createElement("div", {
161
- className: "option",
162
- style: optionStyle,
163
- ref: node => cosmoState.refs[options.length + 1] = node
164
- }))));
67
+ const icon = up => /*#__PURE__*/_react.default.createElement("svg", {
68
+ xmlns: "http://www.w3.org/2000/svg",
69
+ viewBox: "0 -960 960 960",
70
+ fill: color
71
+ }, up ? /*#__PURE__*/_react.default.createElement("path", {
72
+ d: "m283-345-43-43 240-240 240 239-43 43-197-197-197 198Z"
73
+ }) : /*#__PURE__*/_react.default.createElement("path", {
74
+ d: "M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"
75
+ }));
76
+
77
+ const increment = change => () => setValue(pv => {
78
+ const nv = change + pv;
79
+ return nv > max || nv < min ? pv : nv;
80
+ });
81
+
82
+ const renderInputs = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
83
+ className: "numberSelect_increment numberSelect_add",
84
+ style: addStyle,
85
+ onClick: increment(1)
86
+ }, icon(true)), /*#__PURE__*/_react.default.createElement("div", {
87
+ className: "numberSelect_blur",
88
+ style: blurStyle
89
+ }), /*#__PURE__*/_react.default.createElement("div", {
90
+ className: "numberSelect_increment numberSelect_subtract",
91
+ style: subtractStyle,
92
+ onClick: increment(-1)
93
+ }, icon()));
165
94
 
166
95
  return /*#__PURE__*/_react.default.createElement("div", {
167
- className: "numberSelectWrapper ".concat(hidden ? 'hidden' : '')
96
+ className: "numberSelect"
168
97
  }, /*#__PURE__*/_react.default.createElement("div", {
169
- className: "numberSelect",
170
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
98
+ className: "numberSelect_value",
99
+ onClick: () => setEditing(pv => !pv),
100
+ style: {
101
+ height: fullSize,
102
+ width: fullSize,
171
103
  color,
172
- backgroundColor: numberBgColor
173
- })
174
- }, value, renderModal()));
104
+ backgroundColor: numberBgColor,
105
+ fontSize: "".concat(size / 2, "rem")
106
+ }
107
+ }, value), editing && renderInputs());
175
108
  };
176
109
 
177
110
  exports.NumberSelect = NumberSelect;
package/NumberSliderSelect/NumberSliderSelect.css ADDED
@@ -0,0 +1,110 @@
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
+ }
package/NumberSliderSelect/NumberSliderSelect.js ADDED
@@ -0,0 +1,177 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.NumberSliderSelect = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ require("./NumberSliderSelect.css");
13
+
14
+ var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
+
20
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
+
22
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
+
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
+
26
+ 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; }
27
+
28
+ const cosmos = {};
29
+
30
+ const NumberSliderSelect = _ref => {
31
+ let {
32
+ value,
33
+ setValue,
34
+ flip,
35
+ thin,
36
+ min = 1,
37
+ max = 10,
38
+ shadow,
39
+ size = 40,
40
+ color = 'white',
41
+ numberBgColor = '#663399FF',
42
+ selectorColor = '#1E90FFFF',
43
+ pointerColor = '#6c9fff',
44
+ pointerShadowColor = '#33333390',
45
+ top = -16
46
+ } = _ref;
47
+ const [id] = (0, _react.useState)("id-".concat(Math.random()));
48
+ const [rendered, setRendered] = (0, _react.useState)(false);
49
+ const [showInput, setShowInput] = (0, _react.useState)(false);
50
+ const [hidden, setHidden] = (0, _react.useState)(false);
51
+ const [timeout1, setTimeout1] = (0, _react.useState)(0);
52
+ const [timeout2, setTimeout2] = (0, _react.useState)(0);
53
+ const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
54
+ let cosmoState = cosmos[id];
55
+ (0, _react.useLayoutEffect)(() => {
56
+ cosmoState = cosmos[id] = {
57
+ refs: []
58
+ };
59
+ setRendered(true);
60
+ }, []);
61
+ (0, _UseEffectPartialDeps.default)(() => {
62
+ clearTimeout(timeout1);
63
+ if (showInput) setHidden(false);else setTimeout1(setTimeout(() => setHidden(true), 320));
64
+ }, [showInput]);
65
+ (0, _UseEffectPartialDeps.default)(() => {
66
+ if (!rendered) return;
67
+ const ref = cosmoState.refs[value + 2 - min];
68
+ if (!ref) return;
69
+ ref.scrollIntoView();
70
+ }, [rendered]);
71
+ if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
72
+
73
+ const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
74
+
75
+ if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
76
+ const optionStyle = {
77
+ width: "".concat(size, "px"),
78
+ height: "".concat(size - 1, "px"),
79
+ fontSize: "".concat(size * .6, "px"),
80
+ borderRadius: "".concat(size, "px"),
81
+ paddingBottom: '1px'
82
+ };
83
+
84
+ const renderFade = (side, direction) => /*#__PURE__*/_react.default.createElement("div", {
85
+ className: "fade ".concat(side),
86
+ style: {
87
+ width: "".concat(size * .8, "px"),
88
+ backgroundImage: "linear-gradient(to ".concat(direction, ", ").concat(selectorColor, ", ").concat(selectorColor, " , #00000000)")
89
+ }
90
+ });
91
+
92
+ const pointerContainerStyle = flip ? {
93
+ bottom: "-".concat(size * .4, "px"),
94
+ transform: 'rotate(180deg)'
95
+ } : {
96
+ top: "-".concat(size / 2, "px")
97
+ };
98
+
99
+ const renderModal = () => /*#__PURE__*/_react.default.createElement("div", {
100
+ className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
101
+ style: {
102
+ backgroundColor: selectorColor,
103
+ top: "".concat(top + (thin ? 8 : 0), "px")
104
+ },
105
+ onTouchStart: () => {
106
+ clearTimeout(timeout2);
107
+ setShowInput(true);
108
+ },
109
+ onTouchEnd: () => {
110
+ clearTimeout(timeout2);
111
+ setTimeout2(setTimeout(() => setShowInput(false), 800));
112
+ }
113
+ }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
114
+ className: "pointerContainer",
115
+ style: pointerContainerStyle
116
+ }, /*#__PURE__*/_react.default.createElement("div", {
117
+ className: "pointerShadow",
118
+ style: {
119
+ backgroundColor: pointerShadowColor,
120
+ width: "".concat(size / 2, "px"),
121
+ height: "".concat(size * 0.8, "px"),
122
+ marginTop: "".concat(size / 7, "px")
123
+ }
124
+ })), /*#__PURE__*/_react.default.createElement("div", {
125
+ className: "pointerContainer",
126
+ style: pointerContainerStyle
127
+ }, /*#__PURE__*/_react.default.createElement("div", {
128
+ className: "pointer",
129
+ style: {
130
+ backgroundColor: pointerColor,
131
+ width: "".concat(size / 2, "px"),
132
+ height: "".concat(size * 0.8, "px")
133
+ }
134
+ })), /*#__PURE__*/_react.default.createElement("div", {
135
+ className: "scrollSelector ".concat(thin ? 'thin' : ''),
136
+ ref: node => cosmoState.scrollRef = node,
137
+ style: {
138
+ width: "".concat(size * 3, "px")
139
+ },
140
+ onScroll: () => {
141
+ const centerNumber = Math.round(getExactValue());
142
+ if (value !== centerNumber) setValue(centerNumber);
143
+ }
144
+ }, /*#__PURE__*/_react.default.createElement("div", {
145
+ className: "options",
146
+ style: {
147
+ width: "".concat((options.length + 2) * size, "px")
148
+ }
149
+ }, /*#__PURE__*/_react.default.createElement("div", {
150
+ className: "option",
151
+ style: optionStyle,
152
+ ref: node => cosmoState.refs[0] = node
153
+ }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
154
+ style: _objectSpread(_objectSpread({}, optionStyle), {}, {
155
+ backgroundColor: value === n ? numberBgColor : ''
156
+ }),
157
+ key: n,
158
+ ref: node => cosmoState.refs[i + 1] = node,
159
+ className: 'option'
160
+ }, n)), /*#__PURE__*/_react.default.createElement("div", {
161
+ className: "option",
162
+ style: optionStyle,
163
+ ref: node => cosmoState.refs[options.length + 1] = node
164
+ }))));
165
+
166
+ return /*#__PURE__*/_react.default.createElement("div", {
167
+ className: "NumberSliderSelectWrapper ".concat(hidden ? 'hidden' : '')
168
+ }, /*#__PURE__*/_react.default.createElement("div", {
169
+ className: "NumberSliderSelect",
170
+ style: _objectSpread(_objectSpread({}, optionStyle), {}, {
171
+ color,
172
+ backgroundColor: numberBgColor
173
+ })
174
+ }, value, renderModal()));
175
+ };
176
+
177
+ exports.NumberSliderSelect = NumberSliderSelect;
package/index.js CHANGED
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "NumberSelect", {
33
33
  return _NumberSelect.NumberSelect;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "NumberSliderSelect", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _NumberSliderSelect.NumberSliderSelect;
40
+ }
41
+ });
36
42
  Object.defineProperty(exports, "PaneView", {
37
43
  enumerable: true,
38
44
  get: function get() {
@@ -110,6 +116,8 @@ var _SunMoon = require("./SunMoon");
110
116
 
111
117
  var _ToggleSwitch = require("./ToggleSwitch");
112
118
 
119
+ var _NumberSliderSelect = require("./NumberSliderSelect/NumberSliderSelect");
120
+
113
121
  var _NumberSelect = require("./NumberSelect/NumberSelect");
114
122
 
115
123
  var _PaneView = require("./PaneView/PaneView");
package/package.json CHANGED
@@ -1,8 +1,11 @@
1
1
  {
2
2
  "name": "grevlingui",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "description": "GUI elements",
5
5
  "module": "index.js",
6
+ "dependencies": {
7
+ "core-js": "^3.30.1"
8
+ },
6
9
  "repository": {
7
10
  "type": "git",
8
11
  "url": "https://github.com/sGrevling/gui"
@@ -21,3 +24,4 @@
21
24
  "author": "Sigve Grevling",
22
25
  "license": "MIT"
23
26
  }
27
+