@unbxd-ui/unbxd-react-components 0.2.220 → 0.3.0
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/README.md +17 -1
- package/components/Accordian/Accordian.js +14 -11
- package/components/Accordian/Accordian.stories.js +141 -118
- package/components/Accordian/index.js +1 -1
- package/components/Button/Button.js +4 -4
- package/components/Button/Button.stories.js +168 -62
- package/components/Button/DropdownButton.js +5 -6
- package/components/Button/buttonTheme.css +1 -1
- package/components/Button/index.js +2 -3
- package/components/DataLoader/DataLoader.js +6 -7
- package/components/DataLoader/DataLoader.stories.js +244 -58
- package/components/DataLoader/index.js +1 -1
- package/components/Form/Checkbox.js +12 -11
- package/components/Form/DragDropFileUploader.js +6 -7
- package/components/Form/Dropdown.js +14 -12
- package/components/Form/FileUploader.js +3 -4
- package/components/Form/Form.js +6 -7
- package/components/Form/FormElementWrapper.js +1 -1
- package/components/Form/Input.js +24 -15
- package/components/Form/RadioList.js +8 -9
- package/components/Form/RangeSlider.js +12 -13
- package/components/Form/SearchableDropdown.js +563 -0
- package/components/Form/ServerPaginatedDDList.js +56 -41
- package/components/Form/Textarea.js +26 -10
- package/components/Form/Toggle.js +6 -7
- package/components/Form/formCore.css +1 -1
- package/components/Form/formTheme.css +1 -1
- package/components/Form/index.js +8 -1
- package/components/Form/stories/Checkbox.stories.js +139 -40
- package/components/Form/stories/Dropdown.stories.js +323 -92
- package/components/Form/stories/FileUploader.stories.js +178 -19
- package/components/Form/stories/Input.stories.js +115 -0
- package/components/Form/stories/RangeSlider.stories.js +162 -64
- package/components/Form/stories/SearchableDropdown.stories.js +189 -0
- package/components/Form/stories/ServerPaginatedDropdown.stories.js +365 -0
- package/components/Form/stories/Textarea.stories.js +113 -34
- package/components/Form/stories/Toggle.stories.js +193 -14
- package/components/Form/variables.css +0 -0
- package/components/InlineModal/InlineModal.js +119 -21
- package/components/InlineModal/InlineModal.stories.js +239 -45
- package/components/InlineModal/index.js +1 -2
- package/components/InlineModal/inlineModalCore.css +1 -1
- package/components/List/List.js +11 -8
- package/components/List/List.stories.js +238 -0
- package/components/List/index.js +1 -1
- package/components/Modal/Modal.js +67 -20
- package/components/Modal/Modal.stories.js +257 -38
- package/components/Modal/index.js +1 -1
- package/components/Modal/modalCore.css +1 -1
- package/components/NoDataPlaceholder/NoDataPlaceholder.js +41 -0
- package/components/NoDataPlaceholder/NoDataPlaceholder.stories.js +42 -0
- package/components/NoDataPlaceholder/index.js +9 -0
- package/components/NoDataPlaceholder/noDataPlaceholderCore.css +1 -0
- package/components/NotificationComponent/NotificationComponent.js +20 -10
- package/components/NotificationComponent/NotificationComponent.stories.js +171 -19
- package/components/NotificationComponent/index.js +1 -1
- package/components/NotificationComponent/notificationTheme.css +1 -1
- package/components/PageLoader/PageLoader.js +84 -0
- package/components/PageLoader/PageLoader.stories.js +276 -0
- package/components/PageLoader/index.js +9 -0
- package/components/PageLoader/pageLoaderCore.css +1 -0
- package/components/ProgressBar/ProgressBar.css +0 -0
- package/components/ProgressBar/ProgressBar.js +1 -1
- package/components/ProgressBar/ProgressBar.stories.js +203 -10
- package/components/ProgressBar/index.js +1 -1
- package/components/ProgressBar/progressBarCore.css +1 -1
- package/components/Table/BaseTable.js +86 -342
- package/components/Table/PaginationComponent.js +4 -4
- package/components/Table/Table.js +7 -326
- package/components/Table/Table.stories.js +2117 -158
- package/components/Table/TableChild.js +383 -0
- package/components/Table/TableConstants.js +15 -0
- package/components/Table/hooks/usePrevious.js +14 -0
- package/components/Table/index.js +14 -1
- package/components/Table/tableCore.css +1 -1
- package/components/TableOld/BaseTable.js +373 -0
- package/components/TableOld/PaginationComponent.js +86 -0
- package/components/TableOld/TableOld.js +367 -0
- package/components/TableOld/index.js +15 -0
- package/components/TabsComponent/TabsComponent.js +6 -7
- package/components/TabsComponent/TabsComponent.stories.js +291 -53
- package/components/TabsComponent/index.js +1 -1
- package/components/ToastNotification/ToastNotificationWrapper.js +212 -0
- package/components/ToastNotification/ToastNotificationWrapper.stories.js +554 -0
- package/components/ToastNotification/index.js +40 -0
- package/components/ToastNotification/toastNotificationCore.css +1 -0
- package/components/Tooltip/Tooltip.js +231 -56
- package/components/Tooltip/Tooltip.stories.js +380 -15
- package/components/Tooltip/index.js +1 -1
- package/components/Tooltip/tooltipCore.css +1 -1
- package/components/Tooltip/tooltipTheme.css +1 -1
- package/components/common/NoDataDropdown.js +50 -0
- package/components/common/common.css +1 -0
- package/components/core.css +2 -3
- package/components/core.scss +20 -1
- package/components/index.js +66 -3
- package/components/theme.css +2 -3
- package/core/Validators.js +1 -1
- package/core/customHooks.js +4 -4
- package/core/dataLoader.js +58 -17
- package/core/index.js +1 -1
- package/core/utils.js +15 -4
- package/index.js +54 -0
- package/package.json +41 -28
- package/components/Button/DropdownButton.stories.js +0 -49
- package/components/Form/stories/DragDropFileUploader.stories.js +0 -25
- package/components/Form/stories/FormDefault.stories.js +0 -115
- package/components/Form/stories/RadioList.stories.js +0 -53
- package/components/Form/stories/TextInput.stories.js +0 -76
- package/components/Form/stories/form.stories.js +0 -233
- package/components/List/list.stories.js +0 -35
- package/core/dataLoader.stories.js +0 -119
|
@@ -1,360 +1,104 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports["default"] = void 0;
|
|
8
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactDataTableComponent = _interopRequireDefault(require("react-data-table-component"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
function
|
|
13
|
-
function
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
24
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
|
-
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."); }
|
|
26
|
-
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); }
|
|
27
|
-
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; }
|
|
28
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
29
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
30
|
-
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); }
|
|
31
|
-
var DEFAULT_CHECKBOX_CONFIG = {
|
|
32
|
-
enabled: false,
|
|
33
|
-
showInHeader: true
|
|
34
|
-
};
|
|
35
|
-
var DefaultNoDataComponent = function DefaultNoDataComponent() {
|
|
36
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
|
-
className: "RCB-no-data"
|
|
38
|
-
}, "No data found");
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
/* eslint-disable react/prop-types */
|
|
42
|
-
|
|
43
|
-
var getTDValue = function getTDValue(_ref) {
|
|
44
|
-
var columnValue = _ref.columnValue,
|
|
45
|
-
_ref$rowData = _ref.rowData,
|
|
46
|
-
rowData = _ref$rowData === void 0 ? {} : _ref$rowData,
|
|
47
|
-
_ref$columnConfig = _ref.columnConfig,
|
|
48
|
-
columnConfig = _ref$columnConfig === void 0 ? {} : _ref$columnConfig,
|
|
49
|
-
_ref$tdProps = _ref.tdProps,
|
|
50
|
-
tdProps = _ref$tdProps === void 0 ? {} : _ref$tdProps;
|
|
51
|
-
var key = columnConfig.key,
|
|
52
|
-
valueFormatter = columnConfig.valueFormatter,
|
|
53
|
-
ColumnComponent = columnConfig.ColumnComponent,
|
|
54
|
-
_columnConfig$compone = columnConfig.componentProps,
|
|
55
|
-
componentProps = _columnConfig$compone === void 0 ? {} : _columnConfig$compone;
|
|
56
|
-
var tdValue = columnValue;
|
|
57
|
-
if (typeof valueFormatter === "function") {
|
|
58
|
-
tdValue = valueFormatter({
|
|
59
|
-
value: columnValue,
|
|
60
|
-
record: rowData
|
|
61
|
-
});
|
|
62
|
-
} else if (ColumnComponent) {
|
|
63
|
-
tdValue = /*#__PURE__*/_react["default"].createElement(ColumnComponent, _extends({
|
|
64
|
-
record: rowData
|
|
65
|
-
}, componentProps));
|
|
66
|
-
}
|
|
67
|
-
return /*#__PURE__*/_react["default"].createElement("td", _extends({
|
|
68
|
-
key: key
|
|
69
|
-
}, tdProps), tdValue);
|
|
70
|
-
};
|
|
71
|
-
var ExpandableTR = function ExpandableTR(props) {
|
|
72
|
-
var rowIndex = props.rowIndex,
|
|
73
|
-
rowData = props.rowData,
|
|
74
|
-
columnConfigs = props.columnConfigs,
|
|
75
|
-
isEven = props.isEven,
|
|
76
|
-
ExpandedRowComponent = props.ExpandedRowComponent,
|
|
77
|
-
showCheckbox = props.showCheckbox,
|
|
78
|
-
checkboxChangeCounter = props.checkboxChangeCounter,
|
|
79
|
-
checkboxValue = props.checkboxValue,
|
|
80
|
-
onSelectionChange = props.onSelectionChange;
|
|
81
|
-
var _useState = (0, _react.useState)(checkboxValue || false),
|
|
82
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
83
|
-
selected = _useState2[0],
|
|
84
|
-
setSelected = _useState2[1];
|
|
85
|
-
var _useState3 = (0, _react.useState)(false),
|
|
86
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
87
|
-
isExpanded = _useState4[0],
|
|
88
|
-
setIsExpanded = _useState4[1];
|
|
89
|
-
var onChange = function onChange(value) {
|
|
90
|
-
setSelected(value);
|
|
91
|
-
onSelectionChange(rowData, value);
|
|
92
|
-
};
|
|
93
|
-
(0, _react.useEffect)(function () {
|
|
94
|
-
setSelected(checkboxValue);
|
|
95
|
-
}, [checkboxChangeCounter, checkboxValue]);
|
|
96
|
-
var toggleExpanded = function toggleExpanded() {
|
|
97
|
-
setIsExpanded(!isExpanded);
|
|
98
|
-
};
|
|
99
|
-
var className = "RCB-tr RCB-parent-row " + (isEven ? "RCB-even-tr" : "RCB-odd-tr");
|
|
100
|
-
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", {
|
|
101
|
-
className: className
|
|
102
|
-
}, getTDValue({
|
|
103
|
-
columnValue: "",
|
|
104
|
-
columnConfig: {
|
|
105
|
-
key: "expandIcon"
|
|
106
|
-
},
|
|
107
|
-
tdProps: {
|
|
108
|
-
onClick: toggleExpanded,
|
|
109
|
-
className: isExpanded ? "expand-open" : "expand-close"
|
|
10
|
+
var _excluded = ["customStyles", "fixedHeader", "pagination", "dense", "data", "onChangePage", "paginationServer"];
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
14
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
15
|
+
var customStyles = {
|
|
16
|
+
table: {
|
|
17
|
+
borderRadius: '8px',
|
|
18
|
+
overflow: 'hidden'
|
|
19
|
+
},
|
|
20
|
+
rows: {
|
|
21
|
+
style: {
|
|
22
|
+
border: 'none'
|
|
110
23
|
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
onChange: onChange,
|
|
118
|
-
value: selected
|
|
119
|
-
})), columnConfigs.map(function (configObj) {
|
|
120
|
-
var key = configObj.key;
|
|
121
|
-
return getTDValue({
|
|
122
|
-
columnValue: rowData[key],
|
|
123
|
-
rowData: rowData,
|
|
124
|
-
columnConfig: configObj,
|
|
125
|
-
tdProps: {
|
|
126
|
-
onClick: toggleExpanded
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
})), isExpanded && /*#__PURE__*/_react["default"].createElement("tr", {
|
|
130
|
-
className: "RCB-expanded-row"
|
|
131
|
-
}, /*#__PURE__*/_react["default"].createElement("td", {
|
|
132
|
-
colSpan: columnConfigs.length + 1
|
|
133
|
-
}, /*#__PURE__*/_react["default"].createElement(ExpandedRowComponent, {
|
|
134
|
-
parentRecord: rowData
|
|
135
|
-
}))));
|
|
136
|
-
};
|
|
137
|
-
ExpandableTR.propTypes = {
|
|
138
|
-
ExpandedRowComponent: _propTypes["default"].any.isRequired // TODO : check for a React Component
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
var TR = function TR(props) {
|
|
142
|
-
var rowIndex = props.rowIndex,
|
|
143
|
-
rowData = props.rowData,
|
|
144
|
-
columnConfigs = props.columnConfigs,
|
|
145
|
-
isEven = props.isEven,
|
|
146
|
-
showCheckbox = props.showCheckbox,
|
|
147
|
-
checkboxChangeCounter = props.checkboxChangeCounter,
|
|
148
|
-
checkboxValue = props.checkboxValue,
|
|
149
|
-
onSelectionChange = props.onSelectionChange;
|
|
150
|
-
var _useState5 = (0, _react.useState)(checkboxValue || false),
|
|
151
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
152
|
-
selected = _useState6[0],
|
|
153
|
-
setSelected = _useState6[1];
|
|
154
|
-
var className = "RCB-tr " + (isEven ? "RCB-even-tr" : "RCB-odd-tr");
|
|
155
|
-
var onChange = function onChange(value) {
|
|
156
|
-
setSelected(value);
|
|
157
|
-
onSelectionChange(rowData, value);
|
|
158
|
-
};
|
|
159
|
-
(0, _react.useEffect)(function () {
|
|
160
|
-
setSelected(checkboxValue);
|
|
161
|
-
}, [checkboxChangeCounter, checkboxValue]);
|
|
162
|
-
return /*#__PURE__*/_react["default"].createElement("tr", {
|
|
163
|
-
className: className
|
|
164
|
-
}, showCheckbox && /*#__PURE__*/_react["default"].createElement("td", {
|
|
165
|
-
key: "checkbox-colum-".concat(rowIndex)
|
|
166
|
-
}, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
|
|
167
|
-
name: "checkbox".concat(rowIndex),
|
|
168
|
-
type: "checkbox",
|
|
169
|
-
className: "table-checkbox",
|
|
170
|
-
onChange: onChange,
|
|
171
|
-
value: selected
|
|
172
|
-
})), columnConfigs.map(function (configObj) {
|
|
173
|
-
var key = configObj.key;
|
|
174
|
-
return getTDValue({
|
|
175
|
-
columnValue: rowData[key],
|
|
176
|
-
rowData: rowData,
|
|
177
|
-
columnConfig: configObj
|
|
178
|
-
});
|
|
179
|
-
}));
|
|
180
|
-
};
|
|
181
|
-
var BaseTable = function BaseTable(props, ref) {
|
|
182
|
-
var className = props.className,
|
|
183
|
-
records = props.records,
|
|
184
|
-
columnConfigs = props.columnConfigs,
|
|
185
|
-
idAttribute = props.idAttribute,
|
|
186
|
-
checkboxConfig = props.checkboxConfig,
|
|
187
|
-
isExpandableTable = props.isExpandableTable,
|
|
188
|
-
ExpandedRowComponent = props.ExpandedRowComponent,
|
|
189
|
-
noDataComponent = props.noDataComponent,
|
|
190
|
-
sortByConfig = props.sortByConfig,
|
|
191
|
-
resetPageNo = props.resetPageNo,
|
|
192
|
-
pageNo = props.pageNo,
|
|
193
|
-
tbodyClassName = props.tbodyClassName;
|
|
194
|
-
var _DEFAULT_CHECKBOX_CON = _objectSpread(_objectSpread({}, DEFAULT_CHECKBOX_CONFIG), checkboxConfig || {}),
|
|
195
|
-
showCheckbox = _DEFAULT_CHECKBOX_CON.enabled,
|
|
196
|
-
showInHeader = _DEFAULT_CHECKBOX_CON.showInHeader;
|
|
197
|
-
var sortBy = sortByConfig.sortBy,
|
|
198
|
-
sortOrder = sortByConfig.sortOrder;
|
|
199
|
-
var _useState7 = (0, _react.useState)(false),
|
|
200
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
201
|
-
checkboxValue = _useState8[0],
|
|
202
|
-
setCheckboxValue = _useState8[1];
|
|
203
|
-
var _useState9 = (0, _react.useState)(0),
|
|
204
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
205
|
-
checkboxChangeCounter = _useState10[0],
|
|
206
|
-
setChangeCounter = _useState10[1];
|
|
207
|
-
var _useState11 = (0, _react.useState)([]),
|
|
208
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
209
|
-
selected = _useState12[0],
|
|
210
|
-
setSelected = _useState12[1];
|
|
211
|
-
var RowComponent = isExpandableTable ? ExpandableTR : TR;
|
|
212
|
-
var onSelectionChange = function onSelectionChange(record, checked) {
|
|
213
|
-
if (checked) {
|
|
214
|
-
/* add to selected array */
|
|
215
|
-
setSelected([].concat(_toConsumableArray(selected), [record]));
|
|
216
|
-
} else {
|
|
217
|
-
/* remove from selected array */
|
|
218
|
-
var newSelected = selected.filter(function (obj) {
|
|
219
|
-
return obj[idAttribute] !== record[idAttribute];
|
|
220
|
-
});
|
|
221
|
-
setSelected(newSelected);
|
|
24
|
+
},
|
|
25
|
+
headCells: {
|
|
26
|
+
style: {
|
|
27
|
+
borderRight: '1px solid rgb(224 224 224)',
|
|
28
|
+
borderTop: '1px solid rgb(224 224 224)',
|
|
29
|
+
padding: '16px'
|
|
222
30
|
}
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
var resetSelected = function resetSelected() {
|
|
232
|
-
updateCheckboxValue(false);
|
|
233
|
-
setSelected([]);
|
|
234
|
-
};
|
|
235
|
-
var toggleSelectAll = function toggleSelectAll() {
|
|
236
|
-
var checked = !checkboxValue;
|
|
237
|
-
updateCheckboxValue(checked);
|
|
238
|
-
if (checked) {
|
|
239
|
-
setSelected(records);
|
|
240
|
-
} else {
|
|
241
|
-
setSelected([]);
|
|
31
|
+
},
|
|
32
|
+
cells: {
|
|
33
|
+
style: {
|
|
34
|
+
borderRight: '1px solid rgb(224 224 224)',
|
|
35
|
+
padding: '8px 16px 8px 16px',
|
|
36
|
+
fontSize: '14px',
|
|
37
|
+
fontWeight: '400',
|
|
38
|
+
color: '#273251'
|
|
242
39
|
}
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
};
|
|
250
|
-
});
|
|
251
|
-
if (records.length === 0) {
|
|
252
|
-
if (pageNo === 1) {
|
|
253
|
-
return noDataComponent;
|
|
254
|
-
} else {
|
|
255
|
-
var LoaderComponent = _utils["default"].getDefaultConfig("DefaultLoader") || "";
|
|
256
|
-
return /*#__PURE__*/_react["default"].createElement(LoaderComponent, null);
|
|
40
|
+
},
|
|
41
|
+
pagination: {
|
|
42
|
+
style: {
|
|
43
|
+
borderBottom: '1px solid rgb(224 224 224)',
|
|
44
|
+
borderRight: '1px solid rgb(224 224 224)',
|
|
45
|
+
borderLeft: '1px solid rgb(224 224 224)'
|
|
257
46
|
}
|
|
258
|
-
} else {
|
|
259
|
-
return /*#__PURE__*/_react["default"].createElement("table", {
|
|
260
|
-
className: "RCB-table ".concat(className)
|
|
261
|
-
}, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, isExpandableTable && /*#__PURE__*/_react["default"].createElement("th", {
|
|
262
|
-
key: "expandIcon",
|
|
263
|
-
className: "RCB-th RCB-expand-column"
|
|
264
|
-
}), showCheckbox && (showInHeader ? /*#__PURE__*/_react["default"].createElement("th", {
|
|
265
|
-
key: "headerCheckbox"
|
|
266
|
-
}, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
|
|
267
|
-
name: "headerCheckbox",
|
|
268
|
-
type: "checkbox",
|
|
269
|
-
className: "table-checkbox",
|
|
270
|
-
value: checkboxValue,
|
|
271
|
-
onChange: toggleSelectAll
|
|
272
|
-
})) : /*#__PURE__*/_react["default"].createElement("th", null)), columnConfigs.map(function (columnObj) {
|
|
273
|
-
var key = columnObj.key,
|
|
274
|
-
label = columnObj.label,
|
|
275
|
-
sortable = columnObj.sortable,
|
|
276
|
-
headerClassName = columnObj.headerClassName;
|
|
277
|
-
var className = "RCB-th";
|
|
278
|
-
var thAttrs = {};
|
|
279
|
-
if (sortable) {
|
|
280
|
-
className += " RCB-th-sortable";
|
|
281
|
-
if (sortBy === key) {
|
|
282
|
-
className += " RCB-th-".concat(sortOrder.toLowerCase());
|
|
283
|
-
} else {
|
|
284
|
-
className += " RCB-th-sort";
|
|
285
|
-
}
|
|
286
|
-
thAttrs = {
|
|
287
|
-
onClick: function onClick() {
|
|
288
|
-
props.onSort(columnObj);
|
|
289
|
-
}
|
|
290
|
-
};
|
|
291
|
-
}
|
|
292
|
-
if (headerClassName) {
|
|
293
|
-
className += " ".concat(headerClassName);
|
|
294
|
-
}
|
|
295
|
-
return /*#__PURE__*/_react["default"].createElement("th", _extends({
|
|
296
|
-
className: className,
|
|
297
|
-
key: key
|
|
298
|
-
}, thAttrs), label);
|
|
299
|
-
}))), /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
300
|
-
className: tbodyClassName
|
|
301
|
-
}, records.map(function (rowData, index) {
|
|
302
|
-
return /*#__PURE__*/_react["default"].createElement(RowComponent, {
|
|
303
|
-
key: rowData[idAttribute],
|
|
304
|
-
isEven: _utils["default"].isEven(index),
|
|
305
|
-
rowIndex: index,
|
|
306
|
-
rowData: rowData,
|
|
307
|
-
columnConfigs: columnConfigs,
|
|
308
|
-
ExpandedRowComponent: ExpandedRowComponent,
|
|
309
|
-
showCheckbox: showCheckbox,
|
|
310
|
-
checkboxValue: checkboxValue,
|
|
311
|
-
checkboxChangeCounter: checkboxChangeCounter,
|
|
312
|
-
onSelectionChange: onSelectionChange
|
|
313
|
-
});
|
|
314
|
-
})));
|
|
315
47
|
}
|
|
316
48
|
};
|
|
317
|
-
BaseTable =
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
}
|
|
49
|
+
var BaseTable = function BaseTable(props) {
|
|
50
|
+
var overrideStyles = props.customStyles,
|
|
51
|
+
fixedHeader = props.fixedHeader,
|
|
52
|
+
pagination = props.pagination,
|
|
53
|
+
dense = props.dense,
|
|
54
|
+
data = props.data,
|
|
55
|
+
onChangePage = props.onChangePage,
|
|
56
|
+
paginationServer = props.paginationServer,
|
|
57
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
58
|
+
var rowAnimations = [{
|
|
59
|
+
when: function when() {
|
|
60
|
+
return true;
|
|
61
|
+
},
|
|
62
|
+
style: {
|
|
63
|
+
animation: "fadeInUp 0.4s ease-in-out"
|
|
333
64
|
}
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
65
|
+
}];
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(_reactDataTableComponent["default"], _extends({
|
|
67
|
+
customStyles: overrideStyles || customStyles,
|
|
68
|
+
fixedHeader: fixedHeader,
|
|
69
|
+
pagination: pagination,
|
|
70
|
+
dense: dense,
|
|
71
|
+
data: data,
|
|
72
|
+
conditionalRowStyles: rowAnimations,
|
|
73
|
+
paginationServer: paginationServer,
|
|
74
|
+
onChangePage: onChangePage
|
|
75
|
+
}, restProps));
|
|
76
|
+
};
|
|
77
|
+
BaseTable.propTypes = {
|
|
78
|
+
/** DataTable column definitions*/
|
|
79
|
+
columns: _propTypes["default"].array,
|
|
80
|
+
/**data which u want to show in table */
|
|
81
|
+
data: _propTypes["default"].array,
|
|
82
|
+
/**unique identifier for table by default its id */
|
|
83
|
+
keyField: _propTypes["default"].string,
|
|
84
|
+
/**The title displayed in the Table Header. If you do not provide the title property the Table Header will not be rendered */
|
|
85
|
+
title: _propTypes["default"].string,
|
|
86
|
+
/**Makes the table horizontally scrollable on smaller screen widths */
|
|
87
|
+
responsive: _propTypes["default"].bool,
|
|
88
|
+
/**Stripe/band color the odd rows */
|
|
89
|
+
striped: _propTypes["default"].bool,
|
|
90
|
+
/** custom css */
|
|
91
|
+
customStyles: _propTypes["default"].object,
|
|
92
|
+
/**direction */
|
|
93
|
+
direction: _propTypes["default"].string
|
|
352
94
|
};
|
|
353
95
|
BaseTable.defaultProps = {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
96
|
+
columns: [],
|
|
97
|
+
data: [],
|
|
98
|
+
keyField: "id",
|
|
99
|
+
responsive: true,
|
|
100
|
+
striped: false,
|
|
101
|
+
customStyles: customStyles,
|
|
102
|
+
direction: "auto"
|
|
359
103
|
};
|
|
360
104
|
var _default = exports["default"] = BaseTable;
|
|
@@ -8,13 +8,13 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _Dropdown = _interopRequireDefault(require("../Form/Dropdown"));
|
|
10
10
|
var _utils = _interopRequireDefault(require("../../core/utils"));
|
|
11
|
-
function _interopRequireDefault(
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
12
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
13
13
|
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; }
|
|
14
14
|
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; }
|
|
15
|
-
function _defineProperty(
|
|
16
|
-
function _toPropertyKey(
|
|
17
|
-
function _toPrimitive(
|
|
15
|
+
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; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
17
|
+
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); }
|
|
18
18
|
var PaginationComponent = function PaginationComponent(props) {
|
|
19
19
|
var pageSizeList = props.pageSizeList,
|
|
20
20
|
pageConfig = props.pageConfig,
|