grevlingui 0.1.9 → 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 (8) hide show
  1. package/Dots/Dots.css +15 -2
  2. package/Dots/Dots.js +7 -6
  3. package/NumberSelect/NumberSelect.css +9 -12
  4. package/NumberSelect/NumberSelect.js +82 -76
  5. package/README.md +1 -1
  6. package/SunMoon.js +62 -0
  7. package/index.js +8 -0
  8. package/package.json +1 -1
package/Dots/Dots.css CHANGED
@@ -7,8 +7,21 @@
7
7
  width: 6rem;
8
8
  }
9
9
 
10
+ .flipped.dots {
11
+ transform: rotate(45deg);
12
+ }
13
+
14
+ .big.dots {
15
+ grid-template-columns: repeat(4, 2rem);
16
+ grid-template-rows: repeat(4, 2rem);
17
+ height: 8rem;
18
+ width: 8rem;
19
+ transform: rotate(135deg);
20
+ }
21
+
10
22
  .dots .dot {
11
- width: 1.6rem;
12
- height: 1.6rem;
23
+ width: 26px;
24
+ height: 26px;
13
25
  border-radius: 100%;
26
+ margin: 3px;
14
27
  }
package/Dots/Dots.js CHANGED
@@ -18,14 +18,15 @@ require("./Dots.css");
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
20
20
  const Dots = _ref => {
21
- var _grids$num;
21
+ var _grids$version$num;
22
22
 
23
23
  let {
24
24
  num,
25
- color
25
+ color,
26
+ version = 0
26
27
  } = _ref;
27
- const grids = [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 3, 5, 6, 8], [0, 2, 3, 4, 5, 6, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]];
28
- const grid = (_grids$num = grids[num]) !== null && _grids$num !== void 0 ? _grids$num : [];
28
+ const grids = [[[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 3, 5, 6, 8], [0, 2, 3, 4, 5, 6, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [8], [4, 8], [2, 6, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [0], [1, 4], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 6, 9], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]], [[], [0], [0, 5], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 5, 10], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 10, 15], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]]];
29
+ const grid = (_grids$version$num = grids[version][num]) !== null && _grids$version$num !== void 0 ? _grids$version$num : [];
29
30
 
30
31
  const renderDot = i => grid.includes(i) ? /*#__PURE__*/_react.default.createElement("div", {
31
32
  key: "dot-".concat(i),
@@ -38,8 +39,8 @@ const Dots = _ref => {
38
39
  });
39
40
 
40
41
  return /*#__PURE__*/_react.default.createElement("div", {
41
- className: "dots"
42
- }, [...Array(9).keys()].map(renderDot));
42
+ className: "dots".concat(version ? ' flipped' : '').concat(version > 2 ? ' big' : '')
43
+ }, [...Array(version > 2 ? 16 : 9).keys()].map(renderDot));
43
44
  };
44
45
 
45
46
  exports.Dots = Dots;
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/SunMoon.js ADDED
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SunMoon = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ const SunMoon = _ref => {
13
+ let {
14
+ sun,
15
+ color = 'white',
16
+ tt = 300,
17
+ size = 32,
18
+ onClick
19
+ } = _ref;
20
+
21
+ const transition = keys => keys.map(key => "".concat(key, " ").concat(tt, "ms linear")).join(', ');
22
+
23
+ const path = d => /*#__PURE__*/_react.default.createElement("path", {
24
+ d: d,
25
+ fill: color,
26
+ style: {
27
+ transition: transition(['d', 'fill'])
28
+ }
29
+ });
30
+
31
+ const circle = (cx, cy, r, fill) => /*#__PURE__*/_react.default.createElement("circle", {
32
+ cx: cx,
33
+ cy: cy,
34
+ r: r,
35
+ fill: fill,
36
+ style: {
37
+ transition: transition(['r', 'cy', 'cx', 'fill'])
38
+ }
39
+ });
40
+
41
+ return /*#__PURE__*/_react.default.createElement("svg", {
42
+ width: size,
43
+ height: size,
44
+ viewBox: "0 0 120 120",
45
+ fill: color,
46
+ xmlns: "http://www.w3.org/2000/svg",
47
+ style: {
48
+ transition: "fill ".concat(tt, "ms linear")
49
+ },
50
+ onClick: onClick
51
+ }, /*#__PURE__*/_react.default.createElement("mask", {
52
+ id: "moonMask"
53
+ }, /*#__PURE__*/_react.default.createElement("rect", {
54
+ height: "10000",
55
+ width: "10000",
56
+ fill: "white"
57
+ }), sun ? circle("91", "43", "0", "black") : circle("73", "53", "35", "black")), /*#__PURE__*/_react.default.createElement("g", {
58
+ mask: "url(#moonMask)"
59
+ }, sun ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 2L68 18H52L60 2Z"), path("M60 118L52 102L68 102L60 118Z"), path("M89 9.77053L87.9282 27.6269L74.0718 19.6269L89 9.77053Z"), path("M31 110.229L32.0718 92.3731L45.9282 100.373L31 110.229Z"), path("M110.229 31L100.373 45.9282L92.3731 32.0718L110.229 31Z"), path("M9.77053 89L19.6269 74.0718L27.6269 87.9282L9.77053 89Z"), path("M118 60L102 68L102 52L118 60Z"), path("M2 60L18 52L18 68L2 60Z"), path("M110.229 89L92.3731 87.9282L100.373 74.0718L110.229 89Z"), path("M9.77052 31L27.6269 32.0718L19.6269 45.9282L9.77052 31Z"), path("M89 110.229L74.0718 100.373L87.9282 92.3731L89 110.229Z"), path("M31 9.77053L45.9282 19.6269L32.0718 27.6269L31 9.77053Z"), circle("60", "60", "35", color)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 15L68 31H52L60 15Z"), path("M60 105L52 89L68 89L60 105Z"), path("M82.5 21.0289L81.4282 38.8853L67.5718 30.8853L82.5 21.0289Z"), path("M37.5 98.9711L38.5718 81.1147L52.4282 89.1147L37.5 98.9711Z"), path("M98.9712 37.5L89.1148 52.4282L81.1148 38.5718L98.9712 37.5Z"), path("M21.0289 82.5L30.8853 67.5718L38.8853 81.4282L21.0289 82.5Z"), path("M105 60L89 68L89 52L105 60Z"), path("M15 60L31 52L31 68L15 60Z"), path("M98.9711 82.5L81.1147 81.4282L89.1147 67.5718L98.9711 82.5Z"), path("M21.0288 37.5L38.8852 38.5718L30.8852 52.4282L21.0288 37.5Z"), path("M82.5 98.9711L67.5718 89.1147L81.4282 81.1147L82.5 98.9711Z"), path("M37.5 21.0289L52.4282 30.8853L38.5718 38.8853L37.5 21.0289Z"), circle("60", "60", "45", color))));
60
+ };
61
+
62
+ exports.SunMoon = SunMoon;
package/index.js CHANGED
@@ -57,6 +57,12 @@ Object.defineProperty(exports, "SettingsButton", {
57
57
  return _SettingsButton.SettingsButton;
58
58
  }
59
59
  });
60
+ Object.defineProperty(exports, "SunMoon", {
61
+ enumerable: true,
62
+ get: function get() {
63
+ return _SunMoon.SunMoon;
64
+ }
65
+ });
60
66
  Object.defineProperty(exports, "ToggleSwitch", {
61
67
  enumerable: true,
62
68
  get: function get() {
@@ -94,6 +100,8 @@ var _CheckBox = require("./CheckBox");
94
100
 
95
101
  var _Dots = require("./Dots/Dots");
96
102
 
103
+ var _SunMoon = require("./SunMoon");
104
+
97
105
  var _ToggleSwitch = require("./ToggleSwitch");
98
106
 
99
107
  var _NumberSelect = require("./NumberSelect/NumberSelect");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "grevlingui",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "description": "GUI elements",
5
5
  "main": "index.jsx",
6
6
  "repository": {