@cashub/ui 0.43.7 → 0.43.9
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/datetimePicker/DatetimePicker.js +1 -1
- package/form/SearchSelect.js +43 -80
- package/package.json +1 -1
|
@@ -43,7 +43,7 @@ const DatetimePicker = _ref => {
|
|
|
43
43
|
selected: selected ? new Date(Date.parse(selected)) : '',
|
|
44
44
|
minDate: minDate ? new Date(Date.parse(minDate)) : '',
|
|
45
45
|
maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
|
|
46
|
-
isClearable: allowClear && selected,
|
|
46
|
+
isClearable: allowClear && selected && !disabled,
|
|
47
47
|
shouldCloseOnSelect
|
|
48
48
|
};
|
|
49
49
|
if (showTimeInput) {
|
package/form/SearchSelect.js
CHANGED
|
@@ -13,51 +13,33 @@ var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPla
|
|
|
13
13
|
var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
16
|
-
const _excluded = ["options", "outerStatus", "placeholder", "onInnerSearch", "onOuterSearch", "onOuterReset", "onToggleOptions"];
|
|
17
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
17
|
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
19
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
22
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
23
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
24
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
25
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
26
18
|
const SearchSelect = _ref => {
|
|
27
19
|
let {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
20
|
+
keyword,
|
|
21
|
+
onSearch,
|
|
22
|
+
onSearchReset,
|
|
23
|
+
onToggleOptions,
|
|
24
|
+
options,
|
|
25
|
+
placeholder = 'Search',
|
|
26
|
+
setKeyword,
|
|
27
|
+
status = 'idle'
|
|
28
|
+
} = _ref;
|
|
37
29
|
const containerRef = (0, _react.useRef)();
|
|
38
|
-
const [outerKeyword, setOuterKeyword] = (0, _react.useState)('');
|
|
39
|
-
const [innerKeyword, setInnerKeyword] = (0, _react.useState)('');
|
|
40
30
|
const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
|
|
41
31
|
const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(0);
|
|
42
|
-
const handleSearch =
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (target === 'inner') {
|
|
49
|
-
setInnerKeyword('');
|
|
50
|
-
}
|
|
32
|
+
const handleSearch = event => {
|
|
33
|
+
if (event) {
|
|
34
|
+
onSearch(event.target.value);
|
|
35
|
+
setKeyword(event.target.value);
|
|
36
|
+
} else {
|
|
37
|
+
onSearch(keyword);
|
|
51
38
|
}
|
|
52
39
|
};
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
handleSearch(keyword, target);
|
|
57
|
-
};
|
|
58
|
-
const handleOuterReset = () => {
|
|
59
|
-
setOuterKeyword('');
|
|
60
|
-
onOuterReset();
|
|
40
|
+
const handleSearchReset = () => {
|
|
41
|
+
setKeyword('');
|
|
42
|
+
onSearchReset();
|
|
61
43
|
};
|
|
62
44
|
|
|
63
45
|
// close dropdown when click outside of the component
|
|
@@ -73,6 +55,11 @@ const SearchSelect = _ref => {
|
|
|
73
55
|
return () => document.removeEventListener('click', handleClick);
|
|
74
56
|
}, [showDropdown]);
|
|
75
57
|
|
|
58
|
+
// close dropdown when no options
|
|
59
|
+
(0, _react.useEffect)(() => {
|
|
60
|
+
setShowDropdown(options.length > 0);
|
|
61
|
+
}, [options.length]);
|
|
62
|
+
|
|
76
63
|
// align container width to dropdown
|
|
77
64
|
(0, _react.useEffect)(() => {
|
|
78
65
|
if (!containerRef.current) return;
|
|
@@ -85,44 +72,35 @@ const SearchSelect = _ref => {
|
|
|
85
72
|
}, []);
|
|
86
73
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
87
74
|
ref: containerRef,
|
|
88
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper,
|
|
89
|
-
noMargin: true,
|
|
90
|
-
onClick: () => setShowDropdown(true)
|
|
91
|
-
}, props), {}, {
|
|
75
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
|
|
92
76
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaSearch, {
|
|
93
|
-
onClick: () =>
|
|
77
|
+
onClick: () => {
|
|
78
|
+
if (keyword.trim()) {
|
|
79
|
+
handleSearch();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
94
82
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
|
|
95
83
|
type: "text",
|
|
96
84
|
placeholder: placeholder,
|
|
97
|
-
onChange:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
onClick: handleOuterReset,
|
|
85
|
+
onChange: handleSearch,
|
|
86
|
+
onFocus: () => setShowDropdown(options.length > 0),
|
|
87
|
+
value: keyword
|
|
88
|
+
}), onSearchReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdClose, {
|
|
89
|
+
onClick: handleSearchReset,
|
|
103
90
|
style: {
|
|
104
|
-
visibility:
|
|
91
|
+
visibility: status === 'empty' ? 'visible' : 'hidden'
|
|
105
92
|
}
|
|
106
93
|
})]
|
|
107
|
-
})
|
|
94
|
+
}), (showDropdown || status === 'empty') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropdown, {
|
|
108
95
|
style: {
|
|
109
96
|
width: dropdownWidth
|
|
110
97
|
},
|
|
111
|
-
children: [
|
|
98
|
+
children: [onSearchReset && status === 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageWrapper, {
|
|
112
99
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
|
|
113
100
|
children: "Data Not Found"
|
|
114
101
|
})
|
|
115
|
-
}),
|
|
116
|
-
children:
|
|
117
|
-
border: true,
|
|
118
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaSearch, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
|
|
119
|
-
type: "text",
|
|
120
|
-
placeholder: "Search",
|
|
121
|
-
onChange: event => setInnerKeyword(event.target.value),
|
|
122
|
-
onKeyUp: event => handleKeyUp(event, 'inner'),
|
|
123
|
-
value: innerKeyword
|
|
124
|
-
})]
|
|
125
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionList, {
|
|
102
|
+
}), status !== 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
103
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionList, {
|
|
126
104
|
children: options.map((option, index) => {
|
|
127
105
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
|
|
128
106
|
onClick: () => onToggleOptions(index),
|
|
@@ -135,32 +113,17 @@ const SearchSelect = _ref => {
|
|
|
135
113
|
})
|
|
136
114
|
}, index);
|
|
137
115
|
})
|
|
138
|
-
})
|
|
116
|
+
})
|
|
139
117
|
})]
|
|
140
118
|
})]
|
|
141
119
|
});
|
|
142
120
|
};
|
|
143
121
|
const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n min-width: 160px;\n max-width: 320px;\n"])));
|
|
144
|
-
const InputWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 36px;\n background: var(--color-
|
|
145
|
-
let {
|
|
146
|
-
backgroundReverse
|
|
147
|
-
} = _ref2;
|
|
148
|
-
return backgroundReverse && 'background: var(--color-background2);';
|
|
149
|
-
}, _ref3 => {
|
|
150
|
-
let {
|
|
151
|
-
border
|
|
152
|
-
} = _ref3;
|
|
153
|
-
return border && 'border: var(--border-width) solid var(--border-color);';
|
|
154
|
-
}, _ref4 => {
|
|
155
|
-
let {
|
|
156
|
-
noMargin
|
|
157
|
-
} = _ref4;
|
|
158
|
-
return noMargin && 'margin: 0;';
|
|
159
|
-
});
|
|
122
|
+
const InputWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 36px;\n background: var(--color-background2);\n border-radius: var(--border-radius-l);\n padding: var(--spacing-s);\n margin: 0;\n gap: var(--spacing-xs);\n\n > svg {\n color: var(--font-on-mute);\n }\n"])));
|
|
160
123
|
const Input = _styledComponents.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: transparent;\n border: none;\n font-size: var(--font-body1);\n color: var(--font-on-background);\n outline: none;\n flex:1;\n min-width: 0;\n\n ", "\n"])), (0, _inputPlaceholder.default)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: var(--font-on-mute);\n "]))));
|
|
161
|
-
const Dropdown = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n inset: 44px auto auto 0px;\n background: var(--color-background1);\n color: var(--font-on-background);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n z-index: 1;\n padding
|
|
124
|
+
const Dropdown = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n inset: 44px auto auto 0px;\n background: var(--color-background1);\n color: var(--font-on-background);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n z-index: 1;\n padding: var(--spacing-xs) 0;\n overflow-y: auto;\n max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n ", "\n"])), _scrollbar.default);
|
|
162
125
|
const OptionList = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
|
|
163
126
|
const Option = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 12px var(--spacing-s);\n cursor: pointer;\n\n &:hover {\n background: var(--color-hover);\n }\n"])));
|
|
164
|
-
const MessageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%;\n text-align: center;\n
|
|
127
|
+
const MessageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%;\n text-align: center;\n"])));
|
|
165
128
|
const Message = _styledComponents.default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: 0;\n padding: 12px var(--spacing-s);\n"])));
|
|
166
129
|
var _default = exports.default = SearchSelect;
|