@cashub/ui 0.6.4 → 0.6.6
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/heading/Heading1.js +1 -1
- package/heading/Heading2.js +1 -1
- package/heading/Heading3.js +1 -1
- package/index.js +11 -14
- package/package.json +1 -1
- package/select/InputSelect.js +383 -0
- package/select/ListBox.js +1 -1
- package/select/index.js +8 -0
package/heading/Heading1.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var Heading1 = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h1);\n word-break: break-word;\n white-space: pre;\n\n ", "\n"])), function (_ref) {
|
|
16
|
+
var Heading1 = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h1);\n word-break: break-word;\n white-space: pre-wrap;\n\n ", "\n"])), function (_ref) {
|
|
17
17
|
var center = _ref.center;
|
|
18
18
|
return center && 'text-align: center;';
|
|
19
19
|
});
|
package/heading/Heading2.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var Heading2 = _styledComponents.default.h2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h2);\n word-break: break-word;\n white-space: pre;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
16
|
+
var Heading2 = _styledComponents.default.h2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h2);\n word-break: break-word;\n white-space: pre-wrap;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
17
17
|
var center = _ref.center;
|
|
18
18
|
return center && 'text-align: center;';
|
|
19
19
|
}, function (_ref2) {
|
package/heading/Heading3.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n word-break: break-word;\n white-space: pre;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
16
|
+
var Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n word-break: break-word;\n white-space: pre-wrap;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
17
17
|
var center = _ref.center;
|
|
18
18
|
return center && 'text-align: center;';
|
|
19
19
|
}, function (_ref2) {
|
package/index.js
CHANGED
|
@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
var _exportNames = {
|
|
9
|
-
Dropdown: true
|
|
9
|
+
Dropdown: true,
|
|
10
|
+
Tab: true
|
|
10
11
|
};
|
|
11
12
|
Object.defineProperty(exports, "Dropdown", {
|
|
12
13
|
enumerable: true,
|
|
@@ -14,6 +15,12 @@ Object.defineProperty(exports, "Dropdown", {
|
|
|
14
15
|
return _dropdown.default;
|
|
15
16
|
}
|
|
16
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "Tab", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _Tab.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
17
24
|
|
|
18
25
|
var _animate = require("./animate");
|
|
19
26
|
|
|
@@ -477,19 +484,7 @@ Object.keys(_table).forEach(function (key) {
|
|
|
477
484
|
});
|
|
478
485
|
});
|
|
479
486
|
|
|
480
|
-
var _Tab = require("./Tab");
|
|
481
|
-
|
|
482
|
-
Object.keys(_Tab).forEach(function (key) {
|
|
483
|
-
if (key === "default" || key === "__esModule") return;
|
|
484
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
485
|
-
if (key in exports && exports[key] === _Tab[key]) return;
|
|
486
|
-
Object.defineProperty(exports, key, {
|
|
487
|
-
enumerable: true,
|
|
488
|
-
get: function get() {
|
|
489
|
-
return _Tab[key];
|
|
490
|
-
}
|
|
491
|
-
});
|
|
492
|
-
});
|
|
487
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
493
488
|
|
|
494
489
|
var _tagify = require("./tagify");
|
|
495
490
|
|
|
@@ -575,6 +570,8 @@ Object.keys(_wizard).forEach(function (key) {
|
|
|
575
570
|
});
|
|
576
571
|
});
|
|
577
572
|
|
|
573
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
574
|
+
|
|
578
575
|
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); }
|
|
579
576
|
|
|
580
577
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
package/package.json
CHANGED
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
|
|
11
|
+
|
|
12
|
+
var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
|
|
13
|
+
|
|
14
|
+
var _keycode = _interopRequireDefault(require("../utils/aria/keycode"));
|
|
15
|
+
|
|
16
|
+
var _Input = _interopRequireDefault(require("../form/Input"));
|
|
17
|
+
|
|
18
|
+
var _ListBox = _interopRequireDefault(require("./ListBox"));
|
|
19
|
+
|
|
20
|
+
var _Option = _interopRequireDefault(require("./Option"));
|
|
21
|
+
|
|
22
|
+
var _Options = _interopRequireDefault(require("./Options"));
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
var _excluded = ["options", "onSelect", "value", "disabled", "onChange"];
|
|
27
|
+
|
|
28
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
+
|
|
30
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
+
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
36
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
37
|
+
|
|
38
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
39
|
+
|
|
40
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
41
|
+
|
|
42
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
43
|
+
|
|
44
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
45
|
+
|
|
46
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
47
|
+
|
|
48
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
49
|
+
|
|
50
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
51
|
+
|
|
52
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
53
|
+
|
|
54
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
55
|
+
|
|
56
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
57
|
+
|
|
58
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
59
|
+
|
|
60
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
61
|
+
|
|
62
|
+
var InputSelect = function InputSelect(_ref) {
|
|
63
|
+
var _ref$options = _ref.options,
|
|
64
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
65
|
+
onSelect = _ref.onSelect,
|
|
66
|
+
value = _ref.value,
|
|
67
|
+
disabled = _ref.disabled,
|
|
68
|
+
_onChange = _ref.onChange,
|
|
69
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
70
|
+
|
|
71
|
+
var _useState = (0, _react.useState)(false),
|
|
72
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
73
|
+
displayListBox = _useState2[0],
|
|
74
|
+
setDisplayListBox = _useState2[1];
|
|
75
|
+
|
|
76
|
+
var _useState3 = (0, _react.useState)([]),
|
|
77
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
78
|
+
filteredOptions = _useState4[0],
|
|
79
|
+
setFilteredOptions = _useState4[1]; // render時使用的資料
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
var _useState5 = (0, _react.useState)([]),
|
|
83
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
84
|
+
optionList = _useState6[0],
|
|
85
|
+
setOptionList = _useState6[1];
|
|
86
|
+
|
|
87
|
+
var _useState7 = (0, _react.useState)(null),
|
|
88
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
89
|
+
focusedOption = _useState8[0],
|
|
90
|
+
setFocusedOption = _useState8[1];
|
|
91
|
+
|
|
92
|
+
var optionsElementRef = (0, _react.useRef)(null);
|
|
93
|
+
|
|
94
|
+
var _useState9 = (0, _react.useState)(null),
|
|
95
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
96
|
+
listBoxElement = _useState10[0],
|
|
97
|
+
setListBoxElement = _useState10[1];
|
|
98
|
+
|
|
99
|
+
var _useState11 = (0, _react.useState)(null),
|
|
100
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
101
|
+
dropdownElement = _useState12[0],
|
|
102
|
+
setDropdownElement = _useState12[1];
|
|
103
|
+
|
|
104
|
+
var _useState13 = (0, _react.useState)(0),
|
|
105
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
106
|
+
listBoxWidth = _useState14[0],
|
|
107
|
+
setListBoxWidth = _useState14[1];
|
|
108
|
+
|
|
109
|
+
var _useCustomPopper = (0, _useCustomPopper2.default)(listBoxElement, dropdownElement),
|
|
110
|
+
styles = _useCustomPopper.styles,
|
|
111
|
+
attributes = _useCustomPopper.attributes,
|
|
112
|
+
state = _useCustomPopper.state,
|
|
113
|
+
update = _useCustomPopper.update;
|
|
114
|
+
|
|
115
|
+
var handleKeyUp = function handleKeyUp(e) {
|
|
116
|
+
var key = e.keyCode;
|
|
117
|
+
|
|
118
|
+
switch (key) {
|
|
119
|
+
case _keycode.default.ENTER:
|
|
120
|
+
if (!displayListBox) {
|
|
121
|
+
handleDisplay();
|
|
122
|
+
} else if (focusedOption) {
|
|
123
|
+
handleClickOption(focusedOption.id);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
break;
|
|
127
|
+
|
|
128
|
+
case _keycode.default.ESCAPE:
|
|
129
|
+
setDisplayListBox(false);
|
|
130
|
+
break;
|
|
131
|
+
|
|
132
|
+
case _keycode.default.UP:
|
|
133
|
+
{
|
|
134
|
+
if (!focusedOption) return;
|
|
135
|
+
var previousItem = findPreviousItem(focusedOption);
|
|
136
|
+
|
|
137
|
+
if (previousItem) {
|
|
138
|
+
handleFocusItem(previousItem);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
case _keycode.default.DOWN:
|
|
145
|
+
{
|
|
146
|
+
if (!focusedOption) return;
|
|
147
|
+
var nextItem = findNextItem(focusedOption);
|
|
148
|
+
|
|
149
|
+
if (nextItem) {
|
|
150
|
+
handleFocusItem(nextItem);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
break;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
case _keycode.default.HOME:
|
|
157
|
+
e.preventDefault();
|
|
158
|
+
focusFirstItem();
|
|
159
|
+
break;
|
|
160
|
+
|
|
161
|
+
case _keycode.default.END:
|
|
162
|
+
{
|
|
163
|
+
e.preventDefault();
|
|
164
|
+
var lastItem = dropdownElement.querySelectorAll('[role="option"]');
|
|
165
|
+
|
|
166
|
+
if (lastItem.length) {
|
|
167
|
+
handleFocusItem(lastItem[lastItem.length - 1]);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
break;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
default:
|
|
174
|
+
break;
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
179
|
+
var key = e.keyCode;
|
|
180
|
+
|
|
181
|
+
switch (key) {
|
|
182
|
+
case _keycode.default.ENTER:
|
|
183
|
+
case _keycode.default.ESCAPE:
|
|
184
|
+
case _keycode.default.UP:
|
|
185
|
+
case _keycode.default.DOWN:
|
|
186
|
+
case _keycode.default.END:
|
|
187
|
+
case _keycode.default.HOME:
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
break;
|
|
190
|
+
|
|
191
|
+
default:
|
|
192
|
+
break;
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
var findPreviousItem = (0, _react.useCallback)(function (currentItem) {
|
|
197
|
+
var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
|
|
198
|
+
|
|
199
|
+
var currentItemIndex = allItem.indexOf(currentItem);
|
|
200
|
+
var previousItem = null;
|
|
201
|
+
|
|
202
|
+
if (currentItemIndex !== -1 && currentItemIndex > 0) {
|
|
203
|
+
previousItem = allItem[currentItemIndex - 1];
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
return previousItem;
|
|
207
|
+
}, [dropdownElement]);
|
|
208
|
+
var findNextItem = (0, _react.useCallback)(function (currentItem) {
|
|
209
|
+
var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
|
|
210
|
+
|
|
211
|
+
var currentItemIndex = allItem.indexOf(currentItem);
|
|
212
|
+
var nextItem = null;
|
|
213
|
+
|
|
214
|
+
if (currentItemIndex !== -1 && currentItemIndex !== allItem.length - 1) {
|
|
215
|
+
nextItem = allItem[currentItemIndex + 1];
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
return nextItem;
|
|
219
|
+
}, [dropdownElement]); //set focused option
|
|
220
|
+
|
|
221
|
+
var handleFocusItem = (0, _react.useCallback)(function (element) {
|
|
222
|
+
if (!optionsElementRef.current) return;
|
|
223
|
+
setFocusedOption(element);
|
|
224
|
+
}, []);
|
|
225
|
+
var focusFirstItem = (0, _react.useCallback)(function () {
|
|
226
|
+
var firstItem = dropdownElement.querySelector('[role="option"]');
|
|
227
|
+
|
|
228
|
+
if (firstItem) {
|
|
229
|
+
handleFocusItem(firstItem);
|
|
230
|
+
}
|
|
231
|
+
}, [dropdownElement, handleFocusItem]);
|
|
232
|
+
var setupFocus = (0, _react.useCallback)(function () {
|
|
233
|
+
if (!dropdownElement) return;
|
|
234
|
+
var selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
|
|
235
|
+
|
|
236
|
+
if (selectedItem) {
|
|
237
|
+
handleFocusItem(selectedItem);
|
|
238
|
+
} else if (optionList.length > 0) {
|
|
239
|
+
focusFirstItem();
|
|
240
|
+
}
|
|
241
|
+
}, [dropdownElement, focusFirstItem, handleFocusItem, optionList]);
|
|
242
|
+
|
|
243
|
+
var handleDisplay = function handleDisplay() {
|
|
244
|
+
if (filteredOptions.length > 0) {
|
|
245
|
+
setDisplayListBox(true);
|
|
246
|
+
update();
|
|
247
|
+
}
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
var handleClickOption = (0, _react.useCallback)(function (packageName) {
|
|
251
|
+
if (disabled === true) return;
|
|
252
|
+
onSelect(packageName);
|
|
253
|
+
setDisplayListBox(false);
|
|
254
|
+
}, [onSelect, disabled]); // all option
|
|
255
|
+
|
|
256
|
+
var optionItem = (0, _react.useMemo)(function () {
|
|
257
|
+
return optionList.map(function (option) {
|
|
258
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
|
|
259
|
+
role: "option",
|
|
260
|
+
tabIndex: "0",
|
|
261
|
+
id: option.package_name,
|
|
262
|
+
selected: option.selected,
|
|
263
|
+
"aria-selected": option.selected,
|
|
264
|
+
onClick: function onClick() {
|
|
265
|
+
handleClickOption(option.package_name);
|
|
266
|
+
},
|
|
267
|
+
focus: focusedOption && focusedOption.id === option.package_name.toString(),
|
|
268
|
+
children: option.package_name
|
|
269
|
+
}, option.package_name);
|
|
270
|
+
});
|
|
271
|
+
}, [optionList, handleClickOption, focusedOption]); // parse all value to string
|
|
272
|
+
// for subsequently determine whether it is a selected item
|
|
273
|
+
|
|
274
|
+
var parsedSelected = (0, _react.useMemo)(function () {
|
|
275
|
+
if (value || value === 0) {
|
|
276
|
+
return value.toString();
|
|
277
|
+
}
|
|
278
|
+
}, [value]); // observe element resized
|
|
279
|
+
|
|
280
|
+
(0, _react.useEffect)(function () {
|
|
281
|
+
if (!listBoxElement) return;
|
|
282
|
+
setListBoxWidth(listBoxElement.clientWidth);
|
|
283
|
+
}, [listBoxElement]); //過濾搜尋關鍵字資料
|
|
284
|
+
|
|
285
|
+
(0, _react.useEffect)(function () {
|
|
286
|
+
if (!options.length) return;
|
|
287
|
+
var tmpFilteredChildOptions = options.filter(function (option) {
|
|
288
|
+
return option.package_name.toLowerCase().includes(value.toLowerCase());
|
|
289
|
+
});
|
|
290
|
+
setFilteredOptions(tmpFilteredChildOptions);
|
|
291
|
+
}, [options, value]);
|
|
292
|
+
(0, _react.useEffect)(function () {
|
|
293
|
+
if (update) {
|
|
294
|
+
setTimeout(function () {
|
|
295
|
+
update();
|
|
296
|
+
}, 100);
|
|
297
|
+
}
|
|
298
|
+
}, [update, listBoxWidth]); // observe element resized
|
|
299
|
+
|
|
300
|
+
(0, _react.useEffect)(function () {
|
|
301
|
+
if (!listBoxElement) return;
|
|
302
|
+
var resizeObserverInstance = new ResizeObserver(function (entries) {
|
|
303
|
+
var _iterator = _createForOfIteratorHelper(entries),
|
|
304
|
+
_step;
|
|
305
|
+
|
|
306
|
+
try {
|
|
307
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
308
|
+
var entry = _step.value;
|
|
309
|
+
|
|
310
|
+
if (entry.target) {
|
|
311
|
+
var borderBoxSize = entry.target.clientWidth;
|
|
312
|
+
setListBoxWidth(borderBoxSize);
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
} catch (err) {
|
|
316
|
+
_iterator.e(err);
|
|
317
|
+
} finally {
|
|
318
|
+
_iterator.f();
|
|
319
|
+
}
|
|
320
|
+
});
|
|
321
|
+
resizeObserverInstance.observe(listBoxElement);
|
|
322
|
+
return function () {
|
|
323
|
+
resizeObserverInstance.unobserve(listBoxElement);
|
|
324
|
+
};
|
|
325
|
+
}, [listBoxElement]);
|
|
326
|
+
(0, _react.useEffect)(function () {
|
|
327
|
+
var selected = false;
|
|
328
|
+
setOptionList(filteredOptions.map(function (option) {
|
|
329
|
+
if (parsedSelected === option.package_name) {
|
|
330
|
+
selected = true;
|
|
331
|
+
} else {
|
|
332
|
+
selected = false;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
return _objectSpread(_objectSpread({}, option), {}, {
|
|
336
|
+
selected: selected
|
|
337
|
+
});
|
|
338
|
+
}));
|
|
339
|
+
}, [filteredOptions, parsedSelected]);
|
|
340
|
+
(0, _react.useEffect)(function () {
|
|
341
|
+
if (displayListBox) {
|
|
342
|
+
setupFocus();
|
|
343
|
+
}
|
|
344
|
+
}, [displayListBox, setupFocus, value]);
|
|
345
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
|
|
346
|
+
onOutsideClick: function onOutsideClick() {
|
|
347
|
+
setDisplayListBox(false);
|
|
348
|
+
},
|
|
349
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
|
|
350
|
+
autoComplete: "off"
|
|
351
|
+
}, props), {}, {
|
|
352
|
+
onChange: function onChange(e) {
|
|
353
|
+
_onChange(e);
|
|
354
|
+
|
|
355
|
+
if (!displayListBox) setDisplayListBox(true);
|
|
356
|
+
},
|
|
357
|
+
value: value,
|
|
358
|
+
ref: setListBoxElement
|
|
359
|
+
}, attributes.popper), {}, {
|
|
360
|
+
placement: state && state.placement,
|
|
361
|
+
onClick: handleDisplay,
|
|
362
|
+
onKeyUp: handleKeyUp,
|
|
363
|
+
onFocus: function onFocus() {
|
|
364
|
+
setDisplayListBox(true);
|
|
365
|
+
},
|
|
366
|
+
onKeyDown: handleKeyDown
|
|
367
|
+
})), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
|
|
368
|
+
style: styles.popper,
|
|
369
|
+
$display: displayListBox,
|
|
370
|
+
ref: setDropdownElement,
|
|
371
|
+
width: listBoxWidth,
|
|
372
|
+
onKeyUp: handleKeyUp,
|
|
373
|
+
onKeyDown: handleKeyDown,
|
|
374
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
|
|
375
|
+
ref: optionsElementRef,
|
|
376
|
+
children: optionItem
|
|
377
|
+
})
|
|
378
|
+
})]
|
|
379
|
+
});
|
|
380
|
+
};
|
|
381
|
+
|
|
382
|
+
var _default = InputSelect;
|
|
383
|
+
exports.default = _default;
|
package/select/ListBox.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n visibility: ", ";\n background: var(--color-background1);\n color: var(--color-white);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n width: ", "px;\n z-index:
|
|
16
|
+
var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n visibility: ", ";\n background: var(--color-background1);\n color: var(--color-white);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n width: ", "px;\n z-index: 31;\n"])), function (_ref) {
|
|
17
17
|
var $display = _ref.$display;
|
|
18
18
|
return $display ? 'visible' : 'hidden';
|
|
19
19
|
}, function (_ref2) {
|
package/select/index.js
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "InputSelect", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _InputSelect.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
6
12
|
Object.defineProperty(exports, "Select", {
|
|
7
13
|
enumerable: true,
|
|
8
14
|
get: function get() {
|
|
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "Select", {
|
|
|
12
18
|
|
|
13
19
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
14
20
|
|
|
21
|
+
var _InputSelect = _interopRequireDefault(require("./InputSelect"));
|
|
22
|
+
|
|
15
23
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|