grevlingui 0.1.23 → 0.1.25

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 +13 -94
  2. package/NumberSelect/NumberSelect.js +65 -133
  3. package/NumberSliderSelect/NumberSliderSelect.css +110 -0
  4. package/NumberSliderSelect/NumberSliderSelect.js +177 -0
  5. package/index.js +8 -0
  6. package/package.json +1 -1
package/NumberSelect/NumberSelect.css CHANGED
@@ -1,110 +1,29 @@
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;
7
+ .numberSelect_editing {
8
+ z-index: 2;
9
+ }
21
10
 
11
+ .numberSelect_value {
12
+ position: relative;
22
13
  display: flex;
23
14
  align-items: center;
24
15
  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%);
16
+ border-radius: 100%;
17
+ z-index: 2;
32
18
  }
33
19
 
34
- .numberSelect .pointerShadow {
35
- background-color: #33333390;
36
- }
37
-
38
-
39
- .numberSelect .inputModal {
40
- z-index: 3;
20
+ .numberSelect_increment {
21
+ border-radius: 100%;
41
22
  position: absolute;
42
- border-radius: 1rem;
43
- opacity: 1;
44
- }
45
-
46
- .numberSelect .hidden.inputModal {
47
- opacity: 0;
48
- transition: opacity 300ms linear;
23
+ z-index: 3;
49
24
  }
50
25
 
51
- .numberSelect .fade {
26
+ .numberSelect_blur {
52
27
  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;
68
- }
69
-
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;
28
+ z-index: 1;
110
29
  }
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,89 @@ 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',
44
- pointerShadowColor = '#33333390',
45
- top = -16
32
+ numberBgColor = '#663399',
33
+ selectorColor = '#1E90FF'
46
34
  } = _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'
35
+ const [editing, setEditing] = (0, _react.useState)(false);
36
+ const fullSize = "".concat(size, "rem");
37
+ const incrementorSize = "".concat(size * .8, "rem");
38
+ const incrementorVerticalOffset = "-".concat(size * .9, "rem");
39
+ const incrementorHorizontalOffset = "".concat(size * .1, "rem");
40
+ const minusHalfSize = "-".concat(size / 3, "rem");
41
+ const incrementorStyle = {
42
+ height: incrementorSize,
43
+ width: incrementorSize,
44
+ backgroundColor: selectorColor,
45
+ right: incrementorHorizontalOffset,
46
+ bottom: incrementorHorizontalOffset
82
47
  };
83
48
 
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
- }
49
+ const addStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
50
+ top: incrementorVerticalOffset
51
+ });
52
+
53
+ const subtractStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
54
+ bottom: incrementorVerticalOffset
90
55
  });
91
56
 
92
- const pointerContainerStyle = flip ? {
93
- bottom: "-".concat(size * .4, "px"),
94
- transform: 'rotate(180deg)'
95
- } : {
96
- top: "-".concat(size / 2, "px")
57
+ const blurStyle = {
58
+ background: "radial-gradient(".concat(numberBgColor, "FF, ").concat(numberBgColor, "00, ").concat(numberBgColor, "00)"),
59
+ left: minusHalfSize,
60
+ right: minusHalfSize,
61
+ top: incrementorVerticalOffset,
62
+ bottom: incrementorVerticalOffset
97
63
  };
98
64
 
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
- }))));
65
+ const icon = up => /*#__PURE__*/_react.default.createElement("svg", {
66
+ xmlns: "http://www.w3.org/2000/svg",
67
+ viewBox: "0 -960 960 960",
68
+ fill: color
69
+ }, up ? /*#__PURE__*/_react.default.createElement("path", {
70
+ d: "m283-345-43-43 240-240 240 239-43 43-197-197-197 198Z"
71
+ }) : /*#__PURE__*/_react.default.createElement("path", {
72
+ d: "M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"
73
+ }));
74
+
75
+ const increment = change => () => {
76
+ const nv = change + value;
77
+ if (nv > max || nv < min) return;
78
+ setValue(nv);
79
+ };
80
+
81
+ const renderInputs = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
82
+ className: "numberSelect_increment numberSelect_add ".concat(editing ? 'numberSelect_editing' : ''),
83
+ style: addStyle,
84
+ onClick: increment(1)
85
+ }, icon(true)), /*#__PURE__*/_react.default.createElement("div", {
86
+ className: "numberSelect_blur",
87
+ style: blurStyle
88
+ }), /*#__PURE__*/_react.default.createElement("div", {
89
+ className: "numberSelect_increment numberSelect_subtract",
90
+ style: subtractStyle,
91
+ onClick: increment(-1)
92
+ }, icon()));
165
93
 
166
94
  return /*#__PURE__*/_react.default.createElement("div", {
167
- className: "numberSelectWrapper ".concat(hidden ? 'hidden' : '')
95
+ className: "numberSelect"
168
96
  }, /*#__PURE__*/_react.default.createElement("div", {
169
- className: "numberSelect",
170
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
97
+ className: "numberSelect_value",
98
+ onClick: () => setEditing(pv => !pv),
99
+ style: {
100
+ height: fullSize,
101
+ width: fullSize,
171
102
  color,
172
- backgroundColor: numberBgColor
173
- })
174
- }, value, renderModal()));
103
+ backgroundColor: numberBgColor,
104
+ fontSize: "".concat(size / 2, "rem")
105
+ }
106
+ }, value), editing && renderInputs());
175
107
  };
176
108
 
177
109
  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,6 +1,6 @@
1
1
  {
2
2
  "name": "grevlingui",
3
- "version": "0.1.23",
3
+ "version": "0.1.25",
4
4
  "description": "GUI elements",
5
5
  "module": "index.js",
6
6
  "dependencies": {