grevlingui 0.1.10 → 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.
Files changed (4) hide show
  1. package/NumberSelect/NumberSelect.css +9 -12
  2. package/NumberSelect/NumberSelect.js +94 -83
  3. package/README.md +1 -1
  4. package/package.json +1 -1
package/NumberSelect/NumberSelect.css CHANGED
@@ -1,3 +1,6 @@
1
+ .hidden.numberSelectWrapper {
2
+ overflow: hidden;
3
+ }
1
4
 
2
5
  .numberSelect {
3
6
  position: relative;
@@ -32,14 +35,17 @@
32
35
  background-color: #33333390;
33
36
  }
34
37
 
35
- .numberSelect .hidden.inputModal {
36
- display: none;
37
- }
38
38
 
39
39
  .numberSelect .inputModal {
40
40
  z-index: 3;
41
41
  position: absolute;
42
42
  border-radius: 1rem;
43
+ opacity: 1;
44
+ }
45
+
46
+ .numberSelect .hidden.inputModal {
47
+ opacity: 0;
48
+ transition: opacity 300ms linear;
43
49
  }
44
50
 
45
51
  .numberSelect .fade {
@@ -100,13 +106,4 @@
100
106
 
101
107
  scroll-snap-align: start;
102
108
  scroll-snap-stop: always;
103
- }
104
-
105
- .numberSelect .clickOutsideDetector {
106
- position: fixed;
107
- top: 0;
108
- left: 0;
109
- right: 0;
110
- bottom: 0;
111
- z-index: 1;
112
109
  }
package/NumberSelect/NumberSelect.js CHANGED
@@ -25,9 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
25
25
 
26
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
27
 
28
- const scrollRef = /*#__PURE__*/_react.default.createRef();
29
-
30
- const refs = [];
28
+ const cosmos = {};
31
29
 
32
30
  const NumberSelect = _ref => {
33
31
  let {
@@ -46,17 +44,34 @@ const NumberSelect = _ref => {
46
44
  pointerShadowColor = '#33333390',
47
45
  top = -16
48
46
  } = _ref;
47
+ const [id] = (0, _react.useState)("id-".concat(Math.random()));
48
+ const [rendered, setRendered] = (0, _react.useState)(false);
49
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);
50
53
  const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
51
-
52
- const getExactValue = () => scrollRef.current.scrollLeft / size + min;
53
-
54
+ let cosmoState = cosmos[id];
55
+ (0, _react.useLayoutEffect)(() => {
56
+ cosmoState = cosmos[id] = {
57
+ refs: []
58
+ };
59
+ setRendered(true);
60
+ }, []);
54
61
  (0, _UseEffectPartialDeps.default)(() => {
55
- if (!showInput) return;
56
- const ref = refs[value + 2 - min];
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];
57
68
  if (!ref) return;
58
69
  ref.scrollIntoView();
59
- }, [showInput]);
70
+ }, [rendered]);
71
+ if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
72
+
73
+ const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
74
+
60
75
  if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
61
76
  const optionStyle = {
62
77
  width: "".concat(size, "px"),
@@ -81,86 +96,82 @@ const NumberSelect = _ref => {
81
96
  top: "-".concat(size / 2, "px")
82
97
  };
83
98
 
84
- const renderModal = () => {
85
- if (!showInput) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
86
- const optionsWidth = (options.length + 2) * size;
87
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showInput && /*#__PURE__*/_react.default.createElement("div", {
88
- className: "clickOutsideDetector",
89
- onClick: () => {
90
- setShowInput(false);
91
- }
92
- }), /*#__PURE__*/_react.default.createElement("div", {
93
- className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
94
- style: {
95
- backgroundColor: selectorColor,
96
- top: "".concat(top + (thin ? 8 : 0), "px")
97
- }
98
- }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
99
- className: "pointerContainer",
100
- style: pointerContainerStyle
101
- }, /*#__PURE__*/_react.default.createElement("div", {
102
- className: "pointerShadow",
103
- style: {
104
- backgroundColor: pointerShadowColor,
105
- width: "".concat(size / 2, "px"),
106
- height: "".concat(size * 0.8, "px"),
107
- marginTop: "".concat(size / 7, "px")
108
- }
109
- })), /*#__PURE__*/_react.default.createElement("div", {
110
- className: "pointerContainer",
111
- style: pointerContainerStyle
112
- }, /*#__PURE__*/_react.default.createElement("div", {
113
- className: "pointer",
114
- style: {
115
- backgroundColor: pointerColor,
116
- width: "".concat(size / 2, "px"),
117
- height: "".concat(size * 0.8, "px")
118
- }
119
- })), /*#__PURE__*/_react.default.createElement("div", {
120
- className: "scrollSelector ".concat(thin ? 'thin' : ''),
121
- ref: scrollRef,
122
- style: {
123
- width: "".concat(size * 3, "px")
124
- },
125
- onScroll: () => {
126
- const centerNumber = Math.round(getExactValue());
127
- if (value !== centerNumber) setValue(centerNumber);
128
- } // onTouchEnd={onScrollEnd}
129
-
130
- }, /*#__PURE__*/_react.default.createElement("div", {
131
- className: "options",
132
- style: {
133
- width: "".concat(optionsWidth, "px")
134
- }
135
- }, /*#__PURE__*/_react.default.createElement("div", {
136
- className: "option",
137
- style: optionStyle,
138
- ref: node => refs[0] = node
139
- }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
140
- style: _objectSpread(_objectSpread({}, optionStyle), {}, {
141
- backgroundColor: value === n ? numberBgColor : ''
142
- }),
143
- key: n,
144
- ref: node => refs[i + 1] = node,
145
- className: 'option'
146
- }, n)), /*#__PURE__*/_react.default.createElement("div", {
147
- className: "option",
148
- style: optionStyle,
149
- ref: node => refs[options.length + 1] = node
150
- })))));
151
- };
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
+ }))));
152
165
 
153
166
  return /*#__PURE__*/_react.default.createElement("div", {
167
+ className: "numberSelectWrapper ".concat(hidden ? 'hidden' : '')
168
+ }, /*#__PURE__*/_react.default.createElement("div", {
154
169
  className: "numberSelect",
155
170
  style: _objectSpread(_objectSpread({}, optionStyle), {}, {
156
171
  color,
157
172
  backgroundColor: numberBgColor
158
- }),
159
- onClick: e => {
160
- if (e.target.classList[0] === 'clickOutsideDetector') return;
161
- setShowInput(true);
162
- }
163
- }, value, renderModal());
173
+ })
174
+ }, value, renderModal()));
164
175
  };
165
176
 
166
177
  exports.NumberSelect = NumberSelect;
package/README.md CHANGED
@@ -20,7 +20,7 @@ Some are passed down to child components
20
20
  - onCloseClickOverride
21
21
  - callback function allowing reuse of close menu button
22
22
  - shouldCloseOnClick
23
- - callback function to "validete" whether the click should cause the menu to close
23
+ - callback function to "validate" whether the click should cause the menu to close
24
24
  - transitionTime
25
25
  - default 400
26
26
  - zIndex
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "grevlingui",
3
- "version": "0.1.10",
3
+ "version": "0.1.12",
4
4
  "description": "GUI elements",
5
5
  "main": "index.jsx",
6
6
  "repository": {