@unbxd-ui/unbxd-react-components 0.2.101-beta.4 → 0.2.101-beta.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/components/Accordian/Accordian.js +13 -45
- package/components/Accordian/Accordian.stories.js +6 -25
- package/components/Accordian/index.js +0 -3
- package/components/Button/Button.js +9 -26
- package/components/Button/Button.stories.js +1 -14
- package/components/Button/DropdownButton.js +9 -31
- package/components/Button/DropdownButton.stories.js +6 -23
- package/components/Button/index.js +1 -8
- package/components/DataLoader/DataLoader.js +10 -40
- package/components/DataLoader/DataLoader.stories.js +5 -30
- package/components/DataLoader/index.js +0 -3
- package/components/Form/Checkbox.js +14 -42
- package/components/Form/DragDropFileUploader.js +12 -42
- package/components/Form/Dropdown.js +77 -172
- package/components/Form/FileUploader.js +10 -32
- package/components/Form/Form.js +15 -45
- package/components/Form/FormElementWrapper.js +2 -7
- package/components/Form/Input.js +27 -72
- package/components/Form/RadioList.js +17 -48
- package/components/Form/RangeSlider.js +32 -72
- package/components/Form/ServerPaginatedDDList.js +74 -125
- package/components/Form/Textarea.js +18 -43
- package/components/Form/Toggle.js +16 -48
- package/components/Form/index.js +18 -30
- package/components/Form/stories/Checkbox.stories.js +1 -12
- package/components/Form/stories/DragDropFileUploader.stories.js +0 -8
- package/components/Form/stories/Dropdown.stories.js +6 -24
- package/components/Form/stories/FileUploader.stories.js +0 -8
- package/components/Form/stories/FormDefault.stories.js +1 -21
- package/components/Form/stories/RadioList.stories.js +1 -12
- package/components/Form/stories/RangeSlider.stories.js +1 -15
- package/components/Form/stories/TextInput.stories.js +3 -19
- package/components/Form/stories/Textarea.stories.js +1 -12
- package/components/Form/stories/Toggle.stories.js +0 -7
- package/components/Form/stories/form.stories.js +3 -40
- package/components/InlineModal/InlineModal.js +14 -51
- package/components/InlineModal/InlineModal.stories.js +2 -14
- package/components/InlineModal/index.js +1 -6
- package/components/List/List.js +9 -24
- package/components/List/index.js +0 -3
- package/components/List/list.stories.js +0 -10
- package/components/Modal/Modal.js +17 -49
- package/components/Modal/Modal.stories.js +1 -15
- package/components/Modal/index.js +0 -3
- package/components/NotificationComponent/NotificationComponent.js +11 -34
- package/components/NotificationComponent/NotificationComponent.stories.js +0 -6
- package/components/NotificationComponent/index.js +0 -3
- package/components/ProgressBar/ProgressBar.js +2 -11
- package/components/ProgressBar/ProgressBar.stories.js +0 -6
- package/components/ProgressBar/index.js +0 -3
- package/components/Table/BaseTable.js +69 -134
- package/components/Table/PaginationComponent.js +11 -23
- package/components/Table/Table.js +68 -149
- package/components/Table/Table.stories.js +22 -67
- package/components/Table/index.js +0 -4
- package/components/TabsComponent/TabsComponent.js +20 -57
- package/components/TabsComponent/TabsComponent.stories.js +0 -16
- package/components/TabsComponent/index.js +0 -3
- package/components/Tooltip/Tooltip.js +15 -46
- package/components/Tooltip/Tooltip.stories.js +0 -6
- package/components/Tooltip/index.js +0 -3
- package/components/index.js +1 -17
- package/core/Validators.js +1 -5
- package/core/customHooks.js +4 -14
- package/core/dataLoader.js +28 -67
- package/core/dataLoader.stories.js +12 -42
- package/core/index.js +6 -10
- package/core/utils.js +10 -18
- package/index.js +0 -4
- package/package.json +2 -2
|
@@ -1,63 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
4
|
-
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = exports.DefaultDropdownItem = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _InlineModal = _interopRequireWildcard(require("../InlineModal"));
|
|
15
|
-
|
|
16
11
|
var _List = _interopRequireDefault(require("../List"));
|
|
17
|
-
|
|
18
12
|
var _Form = require("./Form");
|
|
19
|
-
|
|
20
13
|
var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
|
|
21
|
-
|
|
22
14
|
var _ServerPaginatedDDList = _interopRequireDefault(require("./ServerPaginatedDDList"));
|
|
23
|
-
|
|
24
15
|
var _utils = _interopRequireDefault(require("../../core/utils"));
|
|
25
|
-
|
|
26
16
|
var _excluded = ["items", "selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "ListHeaderItem"],
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
_excluded2 = ["halign", "label", "showLabel", "name", "SelectionSummary", "className", "value", "defaultValue", "onChange", "disabled", "options", "showSearch", "searchPlaceholder", "idAttribute", "nameAttribute", "noSelectionLabel", "appearance", "multiSelect", "DropdownItem", "validations", "paginationType", "requestId", "requestParams", "pageNoKey", "perPageKey", "pageSize", "searchAttribute", "maxHeight", "responseFormatter", "getUrlParams", "showCreateCTA", "createCTAComponent", "onCreateCTAClick", "serverListClassName", "showClear", "onClear", "minPageNo", "ListHeaderItem", "onSearchChange"];
|
|
29
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
30
|
-
|
|
31
19
|
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); }
|
|
32
|
-
|
|
33
20
|
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; }
|
|
34
|
-
|
|
35
21
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
36
|
-
|
|
37
22
|
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."); }
|
|
38
|
-
|
|
39
23
|
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); }
|
|
40
|
-
|
|
41
|
-
function
|
|
42
|
-
|
|
43
|
-
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; }
|
|
44
|
-
|
|
24
|
+
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; }
|
|
25
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
45
26
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
46
|
-
|
|
47
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
48
|
-
|
|
27
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
49
28
|
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; }
|
|
50
|
-
|
|
51
29
|
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; }
|
|
52
|
-
|
|
53
30
|
var convertToArray = function convertToArray(value) {
|
|
54
31
|
if (!value) {
|
|
55
32
|
return [];
|
|
56
33
|
}
|
|
57
|
-
|
|
58
34
|
return Array.isArray(value) ? value : [value];
|
|
59
35
|
};
|
|
60
|
-
|
|
61
36
|
var getFilteredOptions = function getFilteredOptions() {
|
|
62
37
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
63
38
|
var searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
|
|
@@ -67,26 +42,23 @@ var getFilteredOptions = function getFilteredOptions() {
|
|
|
67
42
|
return nameValue.indexOf(searchQuery.toLowerCase()) !== -1;
|
|
68
43
|
});
|
|
69
44
|
};
|
|
70
|
-
/* eslint-disable react/prop-types */
|
|
71
|
-
|
|
72
45
|
|
|
46
|
+
/* eslint-disable react/prop-types */
|
|
73
47
|
var DefaultSelectionSummary = function DefaultSelectionSummary(_ref) {
|
|
74
48
|
var _ref$selectedItems = _ref.selectedItems,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
49
|
+
selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
|
|
50
|
+
multiSelect = _ref.multiSelect,
|
|
51
|
+
noSelectionLabel = _ref.noSelectionLabel,
|
|
52
|
+
nameAttribute = _ref.nameAttribute,
|
|
53
|
+
showClear = _ref.showClear,
|
|
54
|
+
clearSelectedItems = _ref.clearSelectedItems;
|
|
81
55
|
var summaryString = "";
|
|
82
56
|
var selectedCount = selectedItems.length;
|
|
83
|
-
|
|
84
57
|
if (multiSelect) {
|
|
85
58
|
summaryString = selectedCount ? "".concat(selectedCount, " selected") : noSelectionLabel;
|
|
86
59
|
} else {
|
|
87
60
|
summaryString = selectedCount ? selectedItems[0][nameAttribute] : noSelectionLabel;
|
|
88
61
|
}
|
|
89
|
-
|
|
90
62
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
91
63
|
className: "RCB-dd-label"
|
|
92
64
|
}, summaryString), /*#__PURE__*/_react["default"].createElement("span", {
|
|
@@ -98,14 +70,13 @@ var DefaultSelectionSummary = function DefaultSelectionSummary(_ref) {
|
|
|
98
70
|
className: "RCB-select-arrow"
|
|
99
71
|
})));
|
|
100
72
|
};
|
|
101
|
-
|
|
102
73
|
var DefaultDropdownItem = function DefaultDropdownItem(props) {
|
|
103
74
|
var itemData = props.itemData,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
75
|
+
selectItem = props.selectItem,
|
|
76
|
+
_props$selectedItems = props.selectedItems,
|
|
77
|
+
selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
|
|
78
|
+
idAttribute = props.idAttribute,
|
|
79
|
+
nameAttribute = props.nameAttribute;
|
|
109
80
|
var idValue = itemData[idAttribute];
|
|
110
81
|
var name = itemData[nameAttribute];
|
|
111
82
|
var isSelected = selectedItems.find(function (obj) {
|
|
@@ -119,7 +90,6 @@ var DefaultDropdownItem = function DefaultDropdownItem(props) {
|
|
|
119
90
|
className: className
|
|
120
91
|
}, name);
|
|
121
92
|
};
|
|
122
|
-
|
|
123
93
|
exports.DefaultDropdownItem = DefaultDropdownItem;
|
|
124
94
|
DefaultDropdownItem.propTypes = {
|
|
125
95
|
itemData: _propTypes["default"].object.isRequired,
|
|
@@ -128,18 +98,16 @@ DefaultDropdownItem.propTypes = {
|
|
|
128
98
|
idAttribute: _propTypes["default"].string,
|
|
129
99
|
nameAttribute: _propTypes["default"].string
|
|
130
100
|
};
|
|
131
|
-
|
|
132
101
|
var NormalList = function NormalList(_ref2) {
|
|
133
102
|
var _ref2$items = _ref2.items,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
103
|
+
items = _ref2$items === void 0 ? [] : _ref2$items,
|
|
104
|
+
selectedItems = _ref2.selectedItems,
|
|
105
|
+
selectItem = _ref2.selectItem,
|
|
106
|
+
idAttribute = _ref2.idAttribute,
|
|
107
|
+
nameAttribute = _ref2.nameAttribute,
|
|
108
|
+
DropdownItem = _ref2.DropdownItem,
|
|
109
|
+
ListHeaderItem = _ref2.ListHeaderItem,
|
|
110
|
+
restProps = _objectWithoutProperties(_ref2, _excluded);
|
|
143
111
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, items.length ? ListHeaderItem : "", /*#__PURE__*/_react["default"].createElement(_List["default"], _extends({
|
|
144
112
|
items: items
|
|
145
113
|
}, restProps, {
|
|
@@ -151,99 +119,87 @@ var NormalList = function NormalList(_ref2) {
|
|
|
151
119
|
nameAttribute: nameAttribute
|
|
152
120
|
})));
|
|
153
121
|
};
|
|
154
|
-
|
|
155
122
|
NormalList.defaultProps = {
|
|
156
123
|
DropdownItem: DefaultDropdownItem
|
|
157
124
|
};
|
|
125
|
+
|
|
158
126
|
/* eslint-enable react/prop-types */
|
|
159
127
|
|
|
160
128
|
var Dropdown = function Dropdown(props, ref) {
|
|
161
129
|
var halign = props.halign,
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
130
|
+
label = props.label,
|
|
131
|
+
showLabel = props.showLabel,
|
|
132
|
+
name = props.name,
|
|
133
|
+
SelectionSummary = props.SelectionSummary,
|
|
134
|
+
className = props.className,
|
|
135
|
+
value = props.value,
|
|
136
|
+
defaultValue = props.defaultValue,
|
|
137
|
+
onChange = props.onChange,
|
|
138
|
+
disabled = props.disabled,
|
|
139
|
+
options = props.options,
|
|
140
|
+
showSearch = props.showSearch,
|
|
141
|
+
searchPlaceholder = props.searchPlaceholder,
|
|
142
|
+
idAttribute = props.idAttribute,
|
|
143
|
+
nameAttribute = props.nameAttribute,
|
|
144
|
+
noSelectionLabel = props.noSelectionLabel,
|
|
145
|
+
appearance = props.appearance,
|
|
146
|
+
multiSelect = props.multiSelect,
|
|
147
|
+
DropdownItem = props.DropdownItem,
|
|
148
|
+
validations = props.validations,
|
|
149
|
+
paginationType = props.paginationType,
|
|
150
|
+
requestId = props.requestId,
|
|
151
|
+
requestParams = props.requestParams,
|
|
152
|
+
pageNoKey = props.pageNoKey,
|
|
153
|
+
perPageKey = props.perPageKey,
|
|
154
|
+
pageSize = props.pageSize,
|
|
155
|
+
searchAttribute = props.searchAttribute,
|
|
156
|
+
maxHeight = props.maxHeight,
|
|
157
|
+
responseFormatter = props.responseFormatter,
|
|
158
|
+
getUrlParams = props.getUrlParams,
|
|
159
|
+
showCreateCTA = props.showCreateCTA,
|
|
160
|
+
createCTAComponent = props.createCTAComponent,
|
|
161
|
+
onCreateCTAClick = props.onCreateCTAClick,
|
|
162
|
+
serverListClassName = props.serverListClassName,
|
|
163
|
+
showClear = props.showClear,
|
|
164
|
+
onClear = props.onClear,
|
|
165
|
+
minPageNo = props.minPageNo,
|
|
166
|
+
ListHeaderItem = props.ListHeaderItem,
|
|
167
|
+
propSearchChange = props.onSearchChange,
|
|
168
|
+
restProps = _objectWithoutProperties(props, _excluded2);
|
|
202
169
|
var _useState = (0, _react.useState)(""),
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
170
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
171
|
+
searchQuery = _useState2[0],
|
|
172
|
+
setSearchQuery = _useState2[1];
|
|
207
173
|
var debouncedFn = (0, _react.useRef)();
|
|
208
174
|
var searchIpRef = (0, _react.useRef)();
|
|
209
175
|
var initialSelected = [];
|
|
210
176
|
var initialValue = typeof onChange === "function" ? value : defaultValue;
|
|
211
|
-
|
|
212
177
|
if (typeof initialValue !== "undefined") {
|
|
213
178
|
initialSelected = convertToArray(initialValue);
|
|
214
179
|
}
|
|
215
|
-
/* array of selected item objects */
|
|
216
|
-
|
|
217
180
|
|
|
181
|
+
/* array of selected item objects */
|
|
218
182
|
var _useState3 = (0, _react.useState)(initialSelected),
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
183
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
184
|
+
selectedItems = _useState4[0],
|
|
185
|
+
setSelectedItems = _useState4[1];
|
|
223
186
|
var _useContext = (0, _react.useContext)(_Form.FormContext),
|
|
224
|
-
|
|
225
|
-
|
|
187
|
+
onValueChange = _useContext.onValueChange;
|
|
226
188
|
var inlineModalRef = (0, _react.useRef)();
|
|
227
|
-
|
|
228
189
|
var hideModal = function hideModal() {
|
|
229
190
|
inlineModalRef.current.hideModal();
|
|
230
191
|
};
|
|
231
|
-
|
|
232
192
|
var postFormValueChange = function postFormValueChange(value) {
|
|
233
193
|
var _utils$checkIfValid = _utils["default"].checkIfValid(value, validations),
|
|
234
|
-
|
|
235
|
-
|
|
194
|
+
error = _utils$checkIfValid.error;
|
|
236
195
|
typeof onValueChange === "function" && onValueChange(name, value, error);
|
|
237
196
|
};
|
|
238
|
-
|
|
239
197
|
var selectItem = function selectItem(item) {
|
|
240
198
|
var id = item[idAttribute];
|
|
241
|
-
|
|
242
199
|
if (multiSelect) {
|
|
243
200
|
var isPresent = selectedItems.find(function (obj) {
|
|
244
201
|
return obj[idAttribute] === id;
|
|
245
202
|
});
|
|
246
|
-
|
|
247
203
|
if (!isPresent) {
|
|
248
204
|
selectedItems.push(item);
|
|
249
205
|
postFormValueChange(selectedItems);
|
|
@@ -254,44 +210,33 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
254
210
|
postFormValueChange(item);
|
|
255
211
|
typeof onChange === "function" && onChange(item);
|
|
256
212
|
/* close the dropdown */
|
|
257
|
-
|
|
258
213
|
hideModal();
|
|
259
214
|
}
|
|
260
|
-
|
|
261
215
|
setSelectedItems(selectedItems);
|
|
262
216
|
};
|
|
263
|
-
|
|
264
217
|
(0, _react.useEffect)(function () {
|
|
265
218
|
/* set the initial form element value in the form context */
|
|
266
219
|
var postValue = typeof onChange === "function" ? value : defaultValue;
|
|
267
|
-
|
|
268
220
|
if (typeof postValue !== "undefined") {
|
|
269
221
|
var arrayPostValue = convertToArray(postValue);
|
|
270
222
|
postValue = multiSelect ? arrayPostValue : postValue;
|
|
271
223
|
setSelectedItems(arrayPostValue);
|
|
272
224
|
}
|
|
273
|
-
|
|
274
225
|
postFormValueChange(postValue);
|
|
275
226
|
}, [value, defaultValue]);
|
|
276
|
-
|
|
277
227
|
var debouncedSearchChange = function debouncedSearchChange(value) {
|
|
278
228
|
setSearchQuery(value);
|
|
279
|
-
|
|
280
229
|
if (typeof propSearchChange === "function") {
|
|
281
230
|
propSearchChange(value);
|
|
282
231
|
}
|
|
283
232
|
};
|
|
284
|
-
|
|
285
233
|
var onSearchChange = function onSearchChange(event) {
|
|
286
234
|
event.persist();
|
|
287
|
-
|
|
288
235
|
if (!debouncedFn.current) {
|
|
289
236
|
debouncedFn.current = _utils["default"].debounce(debouncedSearchChange, 300);
|
|
290
237
|
}
|
|
291
|
-
|
|
292
238
|
return debouncedFn.current(event.target.value);
|
|
293
239
|
};
|
|
294
|
-
|
|
295
240
|
var onModalStateChange = function onModalStateChange(isModalOpen) {
|
|
296
241
|
if (isModalOpen && showSearch) {
|
|
297
242
|
searchIpRef.current && searchIpRef.current.focus();
|
|
@@ -300,17 +245,14 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
300
245
|
setSearchQuery("");
|
|
301
246
|
}
|
|
302
247
|
};
|
|
303
|
-
|
|
304
248
|
var clearSelectedItems = function clearSelectedItems(evnt) {
|
|
305
249
|
evnt.stopPropagation();
|
|
306
250
|
setSelectedItems([]);
|
|
307
251
|
typeof onClear === "function" && onClear();
|
|
308
252
|
typeof onChange === "function" && onChange(null);
|
|
309
253
|
/** Close modal after reset */
|
|
310
|
-
|
|
311
254
|
hideModal();
|
|
312
255
|
};
|
|
313
|
-
|
|
314
256
|
var commonAttributes = {
|
|
315
257
|
selectedItems: selectedItems,
|
|
316
258
|
selectItem: selectItem,
|
|
@@ -374,86 +316,65 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
374
316
|
className: "RCB-dd-create-cta",
|
|
375
317
|
onClick: onCreateCTAClick
|
|
376
318
|
}, createCTAComponent))));
|
|
377
|
-
};
|
|
319
|
+
};
|
|
320
|
+
|
|
321
|
+
// const VALUE_SHAPE = PropTypes.shape({
|
|
378
322
|
// id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
379
323
|
// name: PropTypes.string
|
|
380
324
|
// });
|
|
381
325
|
|
|
382
|
-
|
|
383
326
|
Dropdown = /*#__PURE__*/(0, _react.forwardRef)(Dropdown);
|
|
384
327
|
Dropdown.propTypes = {
|
|
385
328
|
/** Pass any additional classNames to Dropdown component */
|
|
386
329
|
className: _propTypes["default"].string,
|
|
387
|
-
|
|
388
330
|
/** Pass infinite fixed list classname to Dropdown component */
|
|
389
331
|
serverListClassName: _propTypes["default"].string,
|
|
390
|
-
|
|
391
332
|
/** Horizontal alignment of the dropdown body */
|
|
392
333
|
halign: _propTypes["default"].oneOf(["left", "right"]),
|
|
393
|
-
|
|
394
334
|
/** Label for the dropdown element */
|
|
395
335
|
label: _propTypes["default"].string,
|
|
396
|
-
|
|
397
336
|
/** indicates whether to show or hide label */
|
|
398
337
|
showLabel: _propTypes["default"].bool,
|
|
399
|
-
|
|
400
338
|
/** Unique ID for the input element */
|
|
401
339
|
name: _propTypes["default"].string.isRequired,
|
|
402
|
-
|
|
403
340
|
/** Label for dropdown activator */
|
|
404
341
|
noSelectionLabel: _propTypes["default"].string,
|
|
405
|
-
|
|
406
342
|
/** Selection items list */
|
|
407
343
|
options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
408
344
|
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
409
345
|
name: _propTypes["default"].string
|
|
410
346
|
})),
|
|
411
|
-
|
|
412
347
|
/** array of selected item objects, only considered if onChange event is given */
|
|
413
348
|
value: _propTypes["default"].any,
|
|
414
|
-
|
|
415
349
|
/** array of default selected item objects */
|
|
416
350
|
defaultValue: _propTypes["default"].any,
|
|
417
351
|
onChange: _propTypes["default"].func,
|
|
418
|
-
|
|
419
352
|
/** pass true if dropdown has to be disabled */
|
|
420
353
|
disabled: _propTypes["default"].bool,
|
|
421
|
-
|
|
422
354
|
/* set to true if you want search ability for dropdown items */
|
|
423
355
|
showSearch: _propTypes["default"].bool,
|
|
424
|
-
|
|
425
356
|
/* placeholder to show in the search box */
|
|
426
357
|
searchPlaceholder: _propTypes["default"].string,
|
|
427
|
-
|
|
428
358
|
/** Is dropdown multi select or single select */
|
|
429
359
|
multiSelect: _propTypes["default"].bool,
|
|
430
|
-
|
|
431
360
|
/** ID attribute key to use when rendering the dropdown items, if the ID attribute is other than "id" */
|
|
432
361
|
idAttribute: _propTypes["default"].string,
|
|
433
|
-
|
|
434
362
|
/** name attribute key to use when rendering the dropdown items, if the name attribute is other than "name" */
|
|
435
363
|
nameAttribute: _propTypes["default"].string,
|
|
436
|
-
|
|
437
364
|
/** Provide a custom element for rendering dropdown item */
|
|
438
365
|
DropdownItem: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(Element), _propTypes["default"].func]),
|
|
439
|
-
|
|
440
366
|
/** Pass true to show a create CTA at the end of the dropdown */
|
|
441
367
|
showCreateCTA: _propTypes["default"].bool,
|
|
442
|
-
|
|
443
368
|
/** Customize the create CTA HTML by passing a createCTAComponent */
|
|
444
369
|
createCTAComponent: _propTypes["default"].any,
|
|
445
|
-
|
|
446
370
|
/** Callback that gets called when Create CTA button is clicked */
|
|
447
371
|
onCreateCTAClick: _propTypes["default"].func,
|
|
448
|
-
|
|
449
372
|
/** Pass this component to customise the selection summary HTML.
|
|
450
373
|
* The array of selected item objects will be sent as props
|
|
451
374
|
*/
|
|
452
375
|
SelectionSummary: _propTypes["default"].func,
|
|
453
|
-
|
|
454
376
|
/** Define the appearance of the form element. Accepted values are either "inline" or "block" */
|
|
455
377
|
appearance: _propTypes["default"].oneOf(["inline", "block"]),
|
|
456
|
-
|
|
457
378
|
/** Array of validations to perform on the form element value.
|
|
458
379
|
* If the validation fails, you will get an "error" field in the form onSubmit event */
|
|
459
380
|
validations: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
@@ -461,41 +382,30 @@ Dropdown.propTypes = {
|
|
|
461
382
|
message: _propTypes["default"].string.isRequired,
|
|
462
383
|
validator: _propTypes["default"].func
|
|
463
384
|
})),
|
|
464
|
-
|
|
465
385
|
/** Type of pagination for the dropdown list items. Send "SERVER" for server side pagination */
|
|
466
386
|
paginationType: _propTypes["default"].oneOf(["NONE", "SERVER"]),
|
|
467
|
-
|
|
468
387
|
/** If paginationType is "SERVER", pass the requestId for the server request */
|
|
469
388
|
requestId: function requestId(props, propName) {
|
|
470
389
|
if (props["paginationType"] == "SERVER" && (!props[propName] || typeof props[propName] === "undefined")) {
|
|
471
390
|
return new Error("Please provide a requestId for paginationType 'SERVER'!");
|
|
472
391
|
}
|
|
473
392
|
},
|
|
474
|
-
|
|
475
393
|
/** If paginationType is "SERVER", pass any additional params to be sent to the server request */
|
|
476
394
|
requestParams: _propTypes["default"].object,
|
|
477
|
-
|
|
478
395
|
/** If paginationType is "SERVER", pass the pageNo. attribute to be sent to the server request */
|
|
479
396
|
pageNoKey: _propTypes["default"].string,
|
|
480
|
-
|
|
481
397
|
/** If paginationType is "SERVER", pass the pageSize attribute to be sent to the server request */
|
|
482
398
|
perPageKey: _propTypes["default"].string,
|
|
483
|
-
|
|
484
399
|
/** If paginationType is "SERVER", max height of the dropdown container */
|
|
485
400
|
maxHeight: _propTypes["default"].number,
|
|
486
|
-
|
|
487
401
|
/** If paginationType is "SERVER", height of each dropdown item */
|
|
488
402
|
ddItemHeight: _propTypes["default"].number,
|
|
489
|
-
|
|
490
403
|
/** If paginationType is "SERVER", max number of items to show for one page in the dropdown container */
|
|
491
404
|
pageSize: _propTypes["default"].number,
|
|
492
|
-
|
|
493
405
|
/** Default page number to use for server paginated list */
|
|
494
406
|
minPageNo: _propTypes["default"].number,
|
|
495
|
-
|
|
496
407
|
/** If paginationType is "SERVER" & showSearch is true, pass the search attribute to be sent to the server request */
|
|
497
408
|
searchAttribute: _propTypes["default"].string,
|
|
498
|
-
|
|
499
409
|
/** If paginationType is "SERVER",
|
|
500
410
|
* component expects the response to be of the form
|
|
501
411
|
* { [pageNoKey]: <pageNo>, [perPageKey]: <pageSize>, total: <totalCount>, entries: [{}] }
|
|
@@ -503,19 +413,14 @@ Dropdown.propTypes = {
|
|
|
503
413
|
* Input to this function is the response received from your API
|
|
504
414
|
* */
|
|
505
415
|
responseFormatter: _propTypes["default"].func,
|
|
506
|
-
|
|
507
416
|
/** If paginationType is "SERVER", function that is expected to return the URL Params object */
|
|
508
417
|
getUrlParams: _propTypes["default"].func,
|
|
509
|
-
|
|
510
418
|
/** Show the optional clear button for resetting selections */
|
|
511
419
|
showClear: _propTypes["default"].bool,
|
|
512
|
-
|
|
513
420
|
/** Custom on clear function */
|
|
514
421
|
onClear: _propTypes["default"].func,
|
|
515
|
-
|
|
516
422
|
/** Callback on query search in dropdown */
|
|
517
423
|
onSearchChange: _propTypes["default"].func,
|
|
518
|
-
|
|
519
424
|
/** List header Component */
|
|
520
425
|
ListHeaderItem: _propTypes["default"].string
|
|
521
426
|
};
|
|
@@ -1,51 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
4
|
-
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _Form = require("./Form");
|
|
15
|
-
|
|
16
11
|
var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
-
|
|
20
13
|
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); }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
-
|
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
26
16
|
var FileUploader = function FileUploader(props) {
|
|
27
17
|
var label = props.label,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
name = props.name,
|
|
19
|
+
multiple = props.multiple,
|
|
20
|
+
accept = props.accept,
|
|
21
|
+
className = props.className,
|
|
22
|
+
appearance = props.appearance,
|
|
23
|
+
onChange = props.onChange,
|
|
24
|
+
children = props.children;
|
|
36
25
|
var _useContext = (0, _react.useContext)(_Form.FormContext),
|
|
37
|
-
|
|
38
|
-
|
|
26
|
+
onValueChange = _useContext.onValueChange;
|
|
39
27
|
var onFileChange = function onFileChange(event) {
|
|
40
28
|
var value = event.target.files;
|
|
41
|
-
|
|
42
29
|
if (typeof onChange === "function") {
|
|
43
30
|
onChange(value);
|
|
44
31
|
}
|
|
45
|
-
|
|
46
32
|
typeof onValueChange === "function" && onValueChange(name, value);
|
|
47
33
|
};
|
|
48
|
-
|
|
49
34
|
var inputProps = {
|
|
50
35
|
type: "file",
|
|
51
36
|
label: label,
|
|
@@ -70,26 +55,19 @@ var FileUploader = function FileUploader(props) {
|
|
|
70
55
|
className: "RCB-no-pointer"
|
|
71
56
|
}, children)));
|
|
72
57
|
};
|
|
73
|
-
|
|
74
58
|
FileUploader.propTypes = {
|
|
75
59
|
/** Pass any additional classNames to Input component */
|
|
76
60
|
className: _propTypes["default"].string,
|
|
77
|
-
|
|
78
61
|
/** Label for the input element */
|
|
79
62
|
label: _propTypes["default"].string,
|
|
80
|
-
|
|
81
63
|
/** Unique ID for the input element */
|
|
82
64
|
name: _propTypes["default"].string.isRequired,
|
|
83
|
-
|
|
84
65
|
/** set to true to upload multiple files at once */
|
|
85
66
|
multiple: _propTypes["default"].bool,
|
|
86
|
-
|
|
87
67
|
/** mime type of the acceptable files */
|
|
88
68
|
accept: _propTypes["default"].string,
|
|
89
|
-
|
|
90
69
|
/** Define the appearance of the form element. Accepted values are either "inline" or "block" */
|
|
91
70
|
appearance: _propTypes["default"].oneOf(["inline", "block"]),
|
|
92
|
-
|
|
93
71
|
/** Becomes a controlled component if onChange function is given */
|
|
94
72
|
onChange: _propTypes["default"].func
|
|
95
73
|
};
|