@cashub/ui 0.43.8 → 0.43.10

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 (3) hide show
  1. package/form/FormItem.js +6 -1
  2. package/form/SearchSelect.js +43 -80
  3. package/package.json +1 -1
package/form/FormItem.js CHANGED
@@ -8,5 +8,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject;
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
10
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const FormItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-bottom: var(--spacing);\n"])));
11
+ const FormItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-bottom: var(--spacing);\n\n ", "\n"])), _ref => {
12
+ let {
13
+ alignCenter
14
+ } = _ref;
15
+ return alignCenter && "\n display: flex;\n align-items: center;\n ";
16
+ });
12
17
  var _default = exports.default = FormItem;
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
- options,
29
- outerStatus = 'idle',
30
- placeholder = 'Search',
31
- onInnerSearch,
32
- onOuterSearch,
33
- onOuterReset,
34
- onToggleOptions
35
- } = _ref,
36
- props = _objectWithoutProperties(_ref, _excluded);
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 = async (keyword, target) => {
43
- const hasResult = target === 'outer' ? await onOuterSearch(keyword) : await onInnerSearch(keyword);
44
- if (hasResult) {
45
- if (target === 'outer') {
46
- setOuterKeyword('');
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 handleKeyUp = (event, target) => {
54
- if (event.key !== 'Enter') return;
55
- const keyword = target === 'outer' ? outerKeyword : innerKeyword;
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, _objectSpread(_objectSpread({
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: () => handleSearch(outerKeyword, 'outer')
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: event => setOuterKeyword(event.target.value),
98
- onKeyUp: event => handleKeyUp(event, 'outer'),
99
- onFocus: () => setShowDropdown(true),
100
- value: outerKeyword
101
- }), onOuterReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdClose, {
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: outerStatus === 'empty' ? 'visible' : 'hidden'
91
+ visibility: status === 'empty' ? 'visible' : 'hidden'
105
92
  }
106
93
  })]
107
- })), showDropdown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropdown, {
94
+ }), (showDropdown || status === 'empty') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropdown, {
108
95
  style: {
109
96
  width: dropdownWidth
110
97
  },
111
- children: [onOuterReset && outerStatus === 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageWrapper, {
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
- }), outerStatus !== 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
116
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
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-background1);\n border-radius: var(--border-radius-l);\n padding: var(--spacing-s);\n margin: var(--spacing-xs);\n gap: var(--spacing-xs);\n\n > svg {\n color: var(--font-on-mute);\n }\n\n ", "\n\n ", "\n\n ", "\n"])), _ref2 => {
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-bottom: var(--spacing-xs);\n overflow-y: auto;\n max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n ", "\n"])), _scrollbar.default);
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 margin-top: var(--spacing-xs);\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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.43.8",
3
+ "version": "0.43.10",
4
4
  "private": false,
5
5
  "author": "CasHUB Team",
6
6
  "description": "CasHUB UI components library",