grevlingui 0.1.32 → 0.1.34
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/CheckBox.js
CHANGED
|
@@ -14,8 +14,19 @@ const CheckBox = _ref => {
|
|
|
14
14
|
checked,
|
|
15
15
|
setChecked,
|
|
16
16
|
label,
|
|
17
|
-
color
|
|
17
|
+
color,
|
|
18
|
+
v2,
|
|
19
|
+
time = 200
|
|
18
20
|
} = _ref;
|
|
21
|
+
|
|
22
|
+
const getStyle = (opening, i) => ({
|
|
23
|
+
// transition: `height ${time}ms, width ${time}ms ${opening ? 'ease-in' : 'ease-out'}`,
|
|
24
|
+
transition: "height ".concat(time, "ms, width ").concat(time, "ms"),
|
|
25
|
+
transitionDelay: "".concat(i * time / 5, "ms"),
|
|
26
|
+
fill: color
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const twoPhaseDiff = 1;
|
|
19
30
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
20
31
|
style: {
|
|
21
32
|
display: 'inline-block'
|
|
@@ -33,7 +44,94 @@ const CheckBox = _ref => {
|
|
|
33
44
|
viewBox: "0 0 132.29166 132.29167",
|
|
34
45
|
height: "35",
|
|
35
46
|
width: "35"
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement("
|
|
47
|
+
}, v2 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("mask", {
|
|
48
|
+
id: "checkMask"
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
50
|
+
x: "0",
|
|
51
|
+
y: "0",
|
|
52
|
+
width: "1000",
|
|
53
|
+
height: "1000",
|
|
54
|
+
fill: "white"
|
|
55
|
+
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
56
|
+
d: "M135.658 141.294H-5.65894V-6.66338H135.658V141.294ZM21.7649 9.06612C18.2495 9.06619 15.2401 10.3177 12.7366 12.821C10.233 15.3246 8.98076 18.3346 8.98071 21.8503V111.342C8.98079 114.858 10.233 117.867 12.7366 120.371C15.2401 122.874 18.2493 124.127 21.7649 124.127H111.257C114.773 124.127 117.783 122.874 120.286 120.371C122.79 117.867 124.041 114.858 124.041 111.342V21.8503C124.041 18.3346 122.79 15.3246 120.286 12.821C117.783 10.3174 114.773 9.06617 111.257 9.06612H21.7649Z",
|
|
57
|
+
fill: "black"
|
|
58
|
+
})), /*#__PURE__*/_react.default.createElement("g", {
|
|
59
|
+
mask: "url(#checkMask)",
|
|
60
|
+
className: "transformers"
|
|
61
|
+
}, checked ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("rect", {
|
|
62
|
+
style: getStyle(true, 0),
|
|
63
|
+
x: "72.3839",
|
|
64
|
+
y: "-31.2401",
|
|
65
|
+
width: "76.3103",
|
|
66
|
+
height: "88.4339",
|
|
67
|
+
transform: "rotate(50 72.3839 -31.2401)"
|
|
68
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
69
|
+
style: getStyle(true, 1),
|
|
70
|
+
x: "71.5962",
|
|
71
|
+
y: "148.092",
|
|
72
|
+
width: "48.1662",
|
|
73
|
+
height: "103.342",
|
|
74
|
+
transform: "rotate(-130 71.5962 148.092)"
|
|
75
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
76
|
+
style: getStyle(true, 2),
|
|
77
|
+
x: "35.078",
|
|
78
|
+
y: "136.193",
|
|
79
|
+
width: "65.7519",
|
|
80
|
+
height: "35.4406",
|
|
81
|
+
transform: "rotate(-130 35.078 136.193)"
|
|
82
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
83
|
+
style: getStyle(true, 3 + twoPhaseDiff),
|
|
84
|
+
x: "98.5041",
|
|
85
|
+
y: "2.19794",
|
|
86
|
+
width: "56.3159",
|
|
87
|
+
height: "27.3439",
|
|
88
|
+
transform: "rotate(50 98.5041 2.19794)"
|
|
89
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
90
|
+
style: getStyle(true, 4 + twoPhaseDiff),
|
|
91
|
+
x: "18.2496",
|
|
92
|
+
y: "78.9046",
|
|
93
|
+
width: "32.653",
|
|
94
|
+
height: "31.6319",
|
|
95
|
+
transform: "rotate(-130 18.2496 78.9046)"
|
|
96
|
+
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("rect", {
|
|
97
|
+
style: getStyle(false, 4 + twoPhaseDiff),
|
|
98
|
+
x: "72.3839",
|
|
99
|
+
y: "-31.2401",
|
|
100
|
+
width: "7.42665",
|
|
101
|
+
height: "88.4339",
|
|
102
|
+
transform: "rotate(50 72.3839 -31.2401)"
|
|
103
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
104
|
+
style: getStyle(false, 3 + twoPhaseDiff),
|
|
105
|
+
x: "71.5962",
|
|
106
|
+
y: "148.092",
|
|
107
|
+
width: "1.70323",
|
|
108
|
+
height: "103.342",
|
|
109
|
+
transform: "rotate(-130 71.5962 148.092)"
|
|
110
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
111
|
+
style: getStyle(false, 2 + twoPhaseDiff),
|
|
112
|
+
x: "35.078",
|
|
113
|
+
y: "136.193",
|
|
114
|
+
width: "65.7519",
|
|
115
|
+
height: "2.75196",
|
|
116
|
+
transform: "rotate(-130 35.078 136.193)"
|
|
117
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
118
|
+
style: getStyle(false, 1),
|
|
119
|
+
x: "98.5041",
|
|
120
|
+
y: "2.19794",
|
|
121
|
+
width: "56.3159",
|
|
122
|
+
height: "1.80076",
|
|
123
|
+
transform: "rotate(50 98.5041 2.19794)"
|
|
124
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
125
|
+
style: getStyle(false, 0),
|
|
126
|
+
x: "18.2496",
|
|
127
|
+
y: "78.9046",
|
|
128
|
+
width: "32.653",
|
|
129
|
+
height: "3.88451",
|
|
130
|
+
transform: "rotate(-130 18.2496 78.9046)"
|
|
131
|
+
})), /*#__PURE__*/_react.default.createElement("path", {
|
|
132
|
+
d: "M21.7652 147.556C14.7876 147.556 -13.189 118.32 -13.189 111.342V21.8505C-13.189 14.8729 14.7876 -12.096 21.7652 -12.096H111.257C118.234 -12.096 141.928 14.8729 141.928 21.8505V111.342C141.928 118.32 118.234 147.556 111.257 147.556H21.7652ZM111.257 111.317V21.8505H21.7652V111.317C56.197 111.317 76.8251 111.317 111.257 111.317Z",
|
|
133
|
+
fill: color
|
|
134
|
+
}))) : /*#__PURE__*/_react.default.createElement("path", {
|
|
37
135
|
style: {
|
|
38
136
|
transition: 'd 250ms'
|
|
39
137
|
},
|
|
@@ -42,7 +140,8 @@ const CheckBox = _ref => {
|
|
|
42
140
|
className: 'mainShape'
|
|
43
141
|
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
44
142
|
style: {
|
|
45
|
-
marginLeft: '10px'
|
|
143
|
+
marginLeft: '10px',
|
|
144
|
+
color
|
|
46
145
|
}
|
|
47
146
|
}, label)));
|
|
48
147
|
};
|
|
@@ -33,15 +33,13 @@ const NumberSelect = _ref => {
|
|
|
33
33
|
selectorColor = '#1E90FF',
|
|
34
34
|
timeout = 1000,
|
|
35
35
|
onOpenInput,
|
|
36
|
-
closed
|
|
36
|
+
closed,
|
|
37
|
+
invert = false
|
|
37
38
|
} = _ref;
|
|
38
39
|
const [editing, setEditing] = (0, _react.useState)(false);
|
|
39
40
|
const [doneClosing, setDoneClosing] = (0, _react.useState)(true);
|
|
40
41
|
const [closeTimeout, setCloseTimeout] = (0, _react.useState)();
|
|
41
42
|
const [doneClosingTimeout, setDoneClosingTimeout] = (0, _react.useState)();
|
|
42
|
-
(0, _react.useEffect)(() => {
|
|
43
|
-
if (closed) close();
|
|
44
|
-
}, [closed]);
|
|
45
43
|
|
|
46
44
|
const close = () => {
|
|
47
45
|
clearTimeout(closeTimeout);
|
|
@@ -50,6 +48,10 @@ const NumberSelect = _ref => {
|
|
|
50
48
|
startDoneClosingTimeout();
|
|
51
49
|
};
|
|
52
50
|
|
|
51
|
+
(0, _react.useEffect)(() => {
|
|
52
|
+
if (closed) close(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
53
|
+
}, [closed]);
|
|
54
|
+
|
|
53
55
|
const startCloseTimeout = () => {
|
|
54
56
|
if (!timeout) return;
|
|
55
57
|
clearTimeout(closeTimeout);
|
|
@@ -115,14 +117,14 @@ const NumberSelect = _ref => {
|
|
|
115
117
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
116
118
|
className: 'numberSelect_increment numberSelect_add',
|
|
117
119
|
style: addStyle,
|
|
118
|
-
onClick: increment(1)
|
|
120
|
+
onClick: increment(invert ? -1 : 1)
|
|
119
121
|
}, icon(true)), /*#__PURE__*/_react.default.createElement("div", {
|
|
120
122
|
className: "numberSelect_blur",
|
|
121
123
|
style: blurStyle
|
|
122
124
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
123
125
|
className: "numberSelect_increment numberSelect_subtract",
|
|
124
126
|
style: subtractStyle,
|
|
125
|
-
onClick: increment(-1)
|
|
127
|
+
onClick: increment(invert ? 1 : -1)
|
|
126
128
|
}, icon()));
|
|
127
129
|
|
|
128
130
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -53,6 +53,7 @@ const NumberSliderSelect = _ref => {
|
|
|
53
53
|
const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
|
|
54
54
|
let cosmoState = cosmos[id];
|
|
55
55
|
(0, _react.useLayoutEffect)(() => {
|
|
56
|
+
// eslint-disable-next-line
|
|
56
57
|
cosmoState = cosmos[id] = {
|
|
57
58
|
refs: []
|
|
58
59
|
};
|