grevlingui 0.1.11 → 0.1.12
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.
- package/NumberSelect/NumberSelect.js +26 -21
- package/package.json +1 -1
|
@@ -13,8 +13,6 @@ require("./NumberSelect.css");
|
|
|
13
13
|
|
|
14
14
|
var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
|
|
15
15
|
|
|
16
|
-
var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
|
|
17
|
-
|
|
18
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
17
|
|
|
20
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); }
|
|
@@ -27,10 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
27
25
|
|
|
28
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; }
|
|
29
27
|
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
const refs = [];
|
|
33
|
-
let timeout1, timeout2;
|
|
28
|
+
const cosmos = {};
|
|
34
29
|
|
|
35
30
|
const NumberSelect = _ref => {
|
|
36
31
|
let {
|
|
@@ -49,24 +44,34 @@ const NumberSelect = _ref => {
|
|
|
49
44
|
pointerShadowColor = '#33333390',
|
|
50
45
|
top = -16
|
|
51
46
|
} = _ref;
|
|
47
|
+
const [id] = (0, _react.useState)("id-".concat(Math.random()));
|
|
48
|
+
const [rendered, setRendered] = (0, _react.useState)(false);
|
|
52
49
|
const [showInput, setShowInput] = (0, _react.useState)(false);
|
|
53
50
|
const [hidden, setHidden] = (0, _react.useState)(false);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
console.log('hidden: ', hidden);
|
|
51
|
+
const [timeout1, setTimeout1] = (0, _react.useState)(0);
|
|
52
|
+
const [timeout2, setTimeout2] = (0, _react.useState)(0);
|
|
57
53
|
const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
let cosmoState = cosmos[id];
|
|
55
|
+
(0, _react.useLayoutEffect)(() => {
|
|
56
|
+
cosmoState = cosmos[id] = {
|
|
57
|
+
refs: []
|
|
58
|
+
};
|
|
59
|
+
setRendered(true);
|
|
60
|
+
}, []);
|
|
61
61
|
(0, _UseEffectPartialDeps.default)(() => {
|
|
62
62
|
clearTimeout(timeout1);
|
|
63
|
-
if (showInput) setHidden(false);else
|
|
63
|
+
if (showInput) setHidden(false);else setTimeout1(setTimeout(() => setHidden(true), 320));
|
|
64
64
|
}, [showInput]);
|
|
65
|
-
(0,
|
|
66
|
-
|
|
65
|
+
(0, _UseEffectPartialDeps.default)(() => {
|
|
66
|
+
if (!rendered) return;
|
|
67
|
+
const ref = cosmoState.refs[value + 2 - min];
|
|
67
68
|
if (!ref) return;
|
|
68
69
|
ref.scrollIntoView();
|
|
69
|
-
});
|
|
70
|
+
}, [rendered]);
|
|
71
|
+
if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
|
|
72
|
+
|
|
73
|
+
const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
|
|
74
|
+
|
|
70
75
|
if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
71
76
|
const optionStyle = {
|
|
72
77
|
width: "".concat(size, "px"),
|
|
@@ -103,7 +108,7 @@ const NumberSelect = _ref => {
|
|
|
103
108
|
},
|
|
104
109
|
onTouchEnd: () => {
|
|
105
110
|
clearTimeout(timeout2);
|
|
106
|
-
|
|
111
|
+
setTimeout2(setTimeout(() => setShowInput(false), 800));
|
|
107
112
|
}
|
|
108
113
|
}, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
|
|
109
114
|
className: "pointerContainer",
|
|
@@ -128,7 +133,7 @@ const NumberSelect = _ref => {
|
|
|
128
133
|
}
|
|
129
134
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
130
135
|
className: "scrollSelector ".concat(thin ? 'thin' : ''),
|
|
131
|
-
ref: scrollRef,
|
|
136
|
+
ref: node => cosmoState.scrollRef = node,
|
|
132
137
|
style: {
|
|
133
138
|
width: "".concat(size * 3, "px")
|
|
134
139
|
},
|
|
@@ -144,18 +149,18 @@ const NumberSelect = _ref => {
|
|
|
144
149
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
145
150
|
className: "option",
|
|
146
151
|
style: optionStyle,
|
|
147
|
-
ref: node => refs[0] = node
|
|
152
|
+
ref: node => cosmoState.refs[0] = node
|
|
148
153
|
}), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
|
|
149
154
|
style: _objectSpread(_objectSpread({}, optionStyle), {}, {
|
|
150
155
|
backgroundColor: value === n ? numberBgColor : ''
|
|
151
156
|
}),
|
|
152
157
|
key: n,
|
|
153
|
-
ref: node => refs[i + 1] = node,
|
|
158
|
+
ref: node => cosmoState.refs[i + 1] = node,
|
|
154
159
|
className: 'option'
|
|
155
160
|
}, n)), /*#__PURE__*/_react.default.createElement("div", {
|
|
156
161
|
className: "option",
|
|
157
162
|
style: optionStyle,
|
|
158
|
-
ref: node => refs[options.length + 1] = node
|
|
163
|
+
ref: node => cosmoState.refs[options.length + 1] = node
|
|
159
164
|
}))));
|
|
160
165
|
|
|
161
166
|
return /*#__PURE__*/_react.default.createElement("div", {
|