grevlingui 0.1.10 → 0.1.11

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 +82 -76
  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
@@ -13,6 +13,8 @@ require("./NumberSelect.css");
13
13
 
14
14
  var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
15
15
 
16
+ var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
17
+
16
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
19
 
18
20
  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); }
@@ -28,6 +30,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
28
30
  const scrollRef = /*#__PURE__*/_react.default.createRef();
29
31
 
30
32
  const refs = [];
33
+ let timeout1, timeout2;
31
34
 
32
35
  const NumberSelect = _ref => {
33
36
  let {
@@ -47,16 +50,23 @@ const NumberSelect = _ref => {
47
50
  top = -16
48
51
  } = _ref;
49
52
  const [showInput, setShowInput] = (0, _react.useState)(false);
53
+ const [hidden, setHidden] = (0, _react.useState)(false);
54
+ console.log('');
55
+ console.log('showInput: ', showInput);
56
+ console.log('hidden: ', hidden);
50
57
  const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
51
58
 
52
59
  const getExactValue = () => scrollRef.current.scrollLeft / size + min;
53
60
 
54
61
  (0, _UseEffectPartialDeps.default)(() => {
55
- if (!showInput) return;
62
+ clearTimeout(timeout1);
63
+ if (showInput) setHidden(false);else timeout1 = setTimeout(() => setHidden(true), 320);
64
+ }, [showInput]);
65
+ (0, _UseEffectOnce.default)(() => {
56
66
  const ref = refs[value + 2 - min];
57
67
  if (!ref) return;
58
68
  ref.scrollIntoView();
59
- }, [showInput]);
69
+ });
60
70
  if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
61
71
  const optionStyle = {
62
72
  width: "".concat(size, "px"),
@@ -81,86 +91,82 @@ const NumberSelect = _ref => {
81
91
  top: "-".concat(size / 2, "px")
82
92
  };
83
93
 
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
- };
94
+ const renderModal = () => /*#__PURE__*/_react.default.createElement("div", {
95
+ className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
96
+ style: {
97
+ backgroundColor: selectorColor,
98
+ top: "".concat(top + (thin ? 8 : 0), "px")
99
+ },
100
+ onTouchStart: () => {
101
+ clearTimeout(timeout2);
102
+ setShowInput(true);
103
+ },
104
+ onTouchEnd: () => {
105
+ clearTimeout(timeout2);
106
+ timeout2 = setTimeout(() => setShowInput(false), 800);
107
+ }
108
+ }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
109
+ className: "pointerContainer",
110
+ style: pointerContainerStyle
111
+ }, /*#__PURE__*/_react.default.createElement("div", {
112
+ className: "pointerShadow",
113
+ style: {
114
+ backgroundColor: pointerShadowColor,
115
+ width: "".concat(size / 2, "px"),
116
+ height: "".concat(size * 0.8, "px"),
117
+ marginTop: "".concat(size / 7, "px")
118
+ }
119
+ })), /*#__PURE__*/_react.default.createElement("div", {
120
+ className: "pointerContainer",
121
+ style: pointerContainerStyle
122
+ }, /*#__PURE__*/_react.default.createElement("div", {
123
+ className: "pointer",
124
+ style: {
125
+ backgroundColor: pointerColor,
126
+ width: "".concat(size / 2, "px"),
127
+ height: "".concat(size * 0.8, "px")
128
+ }
129
+ })), /*#__PURE__*/_react.default.createElement("div", {
130
+ className: "scrollSelector ".concat(thin ? 'thin' : ''),
131
+ ref: scrollRef,
132
+ style: {
133
+ width: "".concat(size * 3, "px")
134
+ },
135
+ onScroll: () => {
136
+ const centerNumber = Math.round(getExactValue());
137
+ if (value !== centerNumber) setValue(centerNumber);
138
+ }
139
+ }, /*#__PURE__*/_react.default.createElement("div", {
140
+ className: "options",
141
+ style: {
142
+ width: "".concat((options.length + 2) * size, "px")
143
+ }
144
+ }, /*#__PURE__*/_react.default.createElement("div", {
145
+ className: "option",
146
+ style: optionStyle,
147
+ ref: node => refs[0] = node
148
+ }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
149
+ style: _objectSpread(_objectSpread({}, optionStyle), {}, {
150
+ backgroundColor: value === n ? numberBgColor : ''
151
+ }),
152
+ key: n,
153
+ ref: node => refs[i + 1] = node,
154
+ className: 'option'
155
+ }, n)), /*#__PURE__*/_react.default.createElement("div", {
156
+ className: "option",
157
+ style: optionStyle,
158
+ ref: node => refs[options.length + 1] = node
159
+ }))));
152
160
 
153
161
  return /*#__PURE__*/_react.default.createElement("div", {
162
+ className: "numberSelectWrapper ".concat(hidden ? 'hidden' : '')
163
+ }, /*#__PURE__*/_react.default.createElement("div", {
154
164
  className: "numberSelect",
155
165
  style: _objectSpread(_objectSpread({}, optionStyle), {}, {
156
166
  color,
157
167
  backgroundColor: numberBgColor
158
- }),
159
- onClick: e => {
160
- if (e.target.classList[0] === 'clickOutsideDetector') return;
161
- setShowInput(true);
162
- }
163
- }, value, renderModal());
168
+ })
169
+ }, value, renderModal()));
164
170
  };
165
171
 
166
172
  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.11",
4
4
  "description": "GUI elements",
5
5
  "main": "index.jsx",
6
6
  "repository": {