@mirai/ui 1.0.133 → 1.0.135
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/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +11 -10
- package/build/components/Table/Table.ColumnFilter.js +154 -0
- package/build/components/Table/Table.ColumnFilter.js.map +1 -0
- package/build/components/Table/Table.Filter.js +57 -0
- package/build/components/Table/Table.Filter.js.map +1 -0
- package/build/components/Table/Table.Row.js +18 -8
- package/build/components/Table/Table.Row.js.map +1 -1
- package/build/components/Table/Table.js +54 -21
- package/build/components/Table/Table.js.map +1 -1
- package/build/components/Table/Table.module.css +46 -4
- package/build/components/Table/Table.stories.js +12 -1
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Table/Table.stories.module.css +2 -2
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +2587 -713
- package/build/components/Table/helpers/select.js +47 -22
- package/build/components/Table/helpers/select.js.map +1 -1
- package/build/primitives/Checkbox/Checkbox.js +1 -1
- package/build/primitives/Checkbox/Checkbox.js.map +1 -1
- package/build/primitives/Checkbox/Checkbox.module.css +6 -0
- package/build/primitives/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +8 -8
- package/build/primitives/Icon/Icon.constants.js +1 -1
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +2 -6
- package/build/primitives/Radio/Radio.js +2 -1
- package/build/primitives/Radio/Radio.js.map +1 -1
- package/build/primitives/Radio/Radio.module.css +6 -0
- package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap +7 -0
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ exports[`primitive:<InputOption> inherit:className 1`] = `
|
|
|
9
9
|
class="checkbox"
|
|
10
10
|
>
|
|
11
11
|
<input
|
|
12
|
-
class=""
|
|
12
|
+
class="input"
|
|
13
13
|
name="name"
|
|
14
14
|
type="checkbox"
|
|
15
15
|
value=""
|
|
@@ -29,7 +29,7 @@ exports[`primitive:<InputOption> prop:checked && disabled 1`] = `
|
|
|
29
29
|
>
|
|
30
30
|
<input
|
|
31
31
|
checked=""
|
|
32
|
-
class="checked"
|
|
32
|
+
class="checked input"
|
|
33
33
|
disabled=""
|
|
34
34
|
name="name"
|
|
35
35
|
type="checkbox"
|
|
@@ -71,7 +71,7 @@ exports[`primitive:<InputOption> prop:checked 1`] = `
|
|
|
71
71
|
>
|
|
72
72
|
<input
|
|
73
73
|
checked=""
|
|
74
|
-
class="checked"
|
|
74
|
+
class="checked input"
|
|
75
75
|
name="name"
|
|
76
76
|
type="checkbox"
|
|
77
77
|
value=""
|
|
@@ -111,7 +111,7 @@ exports[`primitive:<InputOption> prop:disabled 1`] = `
|
|
|
111
111
|
class="checkbox"
|
|
112
112
|
>
|
|
113
113
|
<input
|
|
114
|
-
class=""
|
|
114
|
+
class="input"
|
|
115
115
|
disabled=""
|
|
116
116
|
name="name"
|
|
117
117
|
type="checkbox"
|
|
@@ -132,7 +132,7 @@ exports[`primitive:<InputOption> prop:indeterminate && disabled 1`] = `
|
|
|
132
132
|
>
|
|
133
133
|
<input
|
|
134
134
|
checked=""
|
|
135
|
-
class="checked"
|
|
135
|
+
class="checked input"
|
|
136
136
|
disabled=""
|
|
137
137
|
name="name"
|
|
138
138
|
type="checkbox"
|
|
@@ -174,7 +174,7 @@ exports[`primitive:<InputOption> prop:indeterminate 1`] = `
|
|
|
174
174
|
>
|
|
175
175
|
<input
|
|
176
176
|
checked=""
|
|
177
|
-
class="checked"
|
|
177
|
+
class="checked input"
|
|
178
178
|
name="name"
|
|
179
179
|
type="checkbox"
|
|
180
180
|
value=""
|
|
@@ -214,7 +214,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
|
|
|
214
214
|
class="checkbox"
|
|
215
215
|
>
|
|
216
216
|
<input
|
|
217
|
-
class=""
|
|
217
|
+
class="input"
|
|
218
218
|
name="name"
|
|
219
219
|
type="checkbox"
|
|
220
220
|
value=""
|
|
@@ -238,7 +238,7 @@ exports[`primitive:<InputOption> prop:required 1`] = `
|
|
|
238
238
|
class="checkbox"
|
|
239
239
|
>
|
|
240
240
|
<input
|
|
241
|
-
class=""
|
|
241
|
+
class="input"
|
|
242
242
|
name="name"
|
|
243
243
|
type="checkbox"
|
|
244
244
|
value=""
|
|
@@ -267,6 +267,7 @@ exports[`primitive:<InputOption> prop:type 1`] = `
|
|
|
267
267
|
class="radio"
|
|
268
268
|
>
|
|
269
269
|
<input
|
|
270
|
+
class="input"
|
|
270
271
|
name="name"
|
|
271
272
|
type="radio"
|
|
272
273
|
value=""
|
|
@@ -293,7 +294,7 @@ exports[`primitive:<InputOption> renders 1`] = `
|
|
|
293
294
|
class="checkbox"
|
|
294
295
|
>
|
|
295
296
|
<input
|
|
296
|
-
class=""
|
|
297
|
+
class="input"
|
|
297
298
|
name="name"
|
|
298
299
|
type="checkbox"
|
|
299
300
|
value=""
|
|
@@ -313,7 +314,7 @@ exports[`primitive:<InputOption> testID 1`] = `
|
|
|
313
314
|
class="checkbox"
|
|
314
315
|
>
|
|
315
316
|
<input
|
|
316
|
-
class=""
|
|
317
|
+
class="input"
|
|
317
318
|
name="name"
|
|
318
319
|
type="checkbox"
|
|
319
320
|
value=""
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ColumnFilter = void 0;
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _helpers = require("../../helpers");
|
|
11
|
+
var _primitives = require("../../primitives");
|
|
12
|
+
var _Button = require("../Button");
|
|
13
|
+
var _InputText = require("../InputText");
|
|
14
|
+
var _Menu = require("../Menu");
|
|
15
|
+
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
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; }
|
|
20
|
+
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; }
|
|
21
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
22
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
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(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; } }
|
|
29
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
30
|
+
var ColumnFilter = function ColumnFilter(_ref) {
|
|
31
|
+
var field = _ref.field,
|
|
32
|
+
_ref$labelCancel = _ref.labelCancel,
|
|
33
|
+
labelCancel = _ref$labelCancel === void 0 ? '$Cancel' : _ref$labelCancel,
|
|
34
|
+
_ref$labelSubmit = _ref.labelSubmit,
|
|
35
|
+
labelSubmit = _ref$labelSubmit === void 0 ? '$Submit' : _ref$labelSubmit,
|
|
36
|
+
_ref$schema = _ref.schema;
|
|
37
|
+
_ref$schema = _ref$schema === void 0 ? {} : _ref$schema;
|
|
38
|
+
var label = _ref$schema.label,
|
|
39
|
+
_ref$schema$type = _ref$schema.type,
|
|
40
|
+
type = _ref$schema$type === void 0 ? 'text' : _ref$schema$type,
|
|
41
|
+
_ref$onSubmit = _ref.onSubmit,
|
|
42
|
+
onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit;
|
|
43
|
+
var _useState = (0, _react.useState)({}),
|
|
44
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
+
form = _useState2[0],
|
|
46
|
+
setForm = _useState2[1];
|
|
47
|
+
var _useState3 = (0, _react.useState)(false),
|
|
48
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
49
|
+
visible = _useState4[0],
|
|
50
|
+
setVisible = _useState4[1];
|
|
51
|
+
(0, _react.useEffect)(function () {
|
|
52
|
+
setForm({});
|
|
53
|
+
}, [visible]);
|
|
54
|
+
var handlePress = function handlePress(event) {
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
setVisible(!visible);
|
|
57
|
+
};
|
|
58
|
+
var handleCancel = function handleCancel() {
|
|
59
|
+
setVisible(false);
|
|
60
|
+
};
|
|
61
|
+
var handleSubmit = function handleSubmit(event) {
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
setVisible(false);
|
|
64
|
+
onSubmit(_objectSpread({
|
|
65
|
+
field: field,
|
|
66
|
+
type: type
|
|
67
|
+
}, form), event);
|
|
68
|
+
};
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
|
|
70
|
+
options: [{
|
|
71
|
+
children: /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
72
|
+
bold: true,
|
|
73
|
+
small: true
|
|
74
|
+
}, label || field),
|
|
75
|
+
divider: true
|
|
76
|
+
}, {
|
|
77
|
+
children: type === 'number' ? /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
78
|
+
row: true,
|
|
79
|
+
className: _TableModule.default.items
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
|
|
81
|
+
label: "min",
|
|
82
|
+
name: "min",
|
|
83
|
+
type: "number",
|
|
84
|
+
value: form.min,
|
|
85
|
+
onChange: function onChange(min) {
|
|
86
|
+
return setForm(_objectSpread(_objectSpread({}, form), {}, {
|
|
87
|
+
min: min
|
|
88
|
+
}));
|
|
89
|
+
},
|
|
90
|
+
className: _TableModule.default.input
|
|
91
|
+
}), /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
|
|
92
|
+
label: "max",
|
|
93
|
+
name: "max",
|
|
94
|
+
type: "number",
|
|
95
|
+
value: form.max,
|
|
96
|
+
onChange: function onChange(max) {
|
|
97
|
+
return setForm(_objectSpread(_objectSpread({}, form), {}, {
|
|
98
|
+
max: max
|
|
99
|
+
}));
|
|
100
|
+
},
|
|
101
|
+
className: _TableModule.default.input
|
|
102
|
+
})) : /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
|
|
103
|
+
name: "search",
|
|
104
|
+
type: "search",
|
|
105
|
+
value: form.value,
|
|
106
|
+
onChange: function onChange(value) {
|
|
107
|
+
return setForm({
|
|
108
|
+
value: value
|
|
109
|
+
});
|
|
110
|
+
},
|
|
111
|
+
className: _TableModule.default.input
|
|
112
|
+
}),
|
|
113
|
+
divider: true
|
|
114
|
+
}, {
|
|
115
|
+
children: /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
116
|
+
row: true,
|
|
117
|
+
wide: true,
|
|
118
|
+
className: _TableModule.default.items
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
120
|
+
secondary: true,
|
|
121
|
+
wide: true,
|
|
122
|
+
onPress: handleCancel
|
|
123
|
+
}, labelCancel), /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
124
|
+
wide: true,
|
|
125
|
+
onPress: handleSubmit
|
|
126
|
+
}, labelSubmit))
|
|
127
|
+
}],
|
|
128
|
+
bottom: true,
|
|
129
|
+
centered: true,
|
|
130
|
+
visible: visible,
|
|
131
|
+
className: _TableModule.default.menuFilter
|
|
132
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
133
|
+
onPress: handlePress,
|
|
134
|
+
style: {
|
|
135
|
+
position: 'relative'
|
|
136
|
+
}
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
138
|
+
value: _primitives.ICON.FILTER,
|
|
139
|
+
className: (0, _helpers.styles)(_TableModule.default.icon, !visible && _TableModule.default.disabled)
|
|
140
|
+
})));
|
|
141
|
+
};
|
|
142
|
+
exports.ColumnFilter = ColumnFilter;
|
|
143
|
+
ColumnFilter.displayName = 'Component:Table:ColumnFilter';
|
|
144
|
+
ColumnFilter.propTypes = {
|
|
145
|
+
field: _propTypes.default.string.isRequired,
|
|
146
|
+
labelCancel: _propTypes.default.string,
|
|
147
|
+
labelSubmit: _propTypes.default.string,
|
|
148
|
+
schema: _propTypes.default.shape({
|
|
149
|
+
label: _propTypes.default.string,
|
|
150
|
+
type: _propTypes.default.string
|
|
151
|
+
}).isRequired,
|
|
152
|
+
onSubmit: _propTypes.default.func.isRequired
|
|
153
|
+
};
|
|
154
|
+
//# sourceMappingURL=Table.ColumnFilter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.ColumnFilter.js","names":["ColumnFilter","field","labelCancel","labelSubmit","schema","label","type","onSubmit","useState","form","setForm","visible","setVisible","useEffect","handlePress","event","preventDefault","handleCancel","handleSubmit","children","divider","style","items","min","input","max","value","menuFilter","position","ICON","FILTER","styles","icon","disabled","displayName","propTypes","PropTypes","string","isRequired","shape","func"],"sources":["../../../src/components/Table/Table.ColumnFilter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { InputText } from '../InputText';\nimport { Menu } from '../Menu';\nimport style from './Table.module.css';\n\nconst ColumnFilter = ({\n field,\n labelCancel = '$Cancel',\n labelSubmit = '$Submit',\n schema: { label, type = 'text' } = {},\n onSubmit = () => {},\n}) => {\n const [form, setForm] = useState({});\n const [visible, setVisible] = useState(false);\n\n useEffect(() => {\n setForm({});\n }, [visible]);\n\n const handlePress = (event) => {\n event.preventDefault();\n setVisible(!visible);\n };\n\n const handleCancel = () => {\n setVisible(false);\n };\n\n const handleSubmit = (event) => {\n event.preventDefault();\n setVisible(false);\n onSubmit({ field, type, ...form }, event);\n };\n\n return (\n <Menu\n options={[\n {\n children: (\n <Text bold small>\n {label || field}\n </Text>\n ),\n divider: true,\n },\n {\n children:\n type === 'number' ? (\n <View row className={style.items}>\n <InputText\n label=\"min\"\n name=\"min\"\n type=\"number\"\n value={form.min}\n onChange={(min) => setForm({ ...form, min })}\n className={style.input}\n />\n <InputText\n label=\"max\"\n name=\"max\"\n type=\"number\"\n value={form.max}\n onChange={(max) => setForm({ ...form, max })}\n className={style.input}\n />\n </View>\n ) : (\n <InputText\n name=\"search\"\n type=\"search\"\n value={form.value}\n onChange={(value) => setForm({ value })}\n className={style.input}\n />\n ),\n divider: true,\n },\n\n {\n children: (\n <View row wide className={style.items}>\n <Button secondary wide onPress={handleCancel}>\n {labelCancel}\n </Button>\n <Button wide onPress={handleSubmit}>\n {labelSubmit}\n </Button>\n </View>\n ),\n },\n ]}\n bottom\n centered\n visible={visible}\n className={style.menuFilter}\n >\n <Pressable onPress={handlePress} style={{ position: 'relative' }}>\n <Icon value={ICON.FILTER} className={styles(style.icon, !visible && style.disabled)} />\n </Pressable>\n </Menu>\n );\n};\n\nColumnFilter.displayName = 'Component:Table:ColumnFilter';\n\nColumnFilter.propTypes = {\n field: PropTypes.string.isRequired,\n labelCancel: PropTypes.string,\n labelSubmit: PropTypes.string,\n schema: PropTypes.shape({\n label: PropTypes.string,\n type: PropTypes.string,\n }).isRequired,\n onSubmit: PropTypes.func.isRequired,\n};\n\nexport { ColumnFilter };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Filter = void 0;
|
|
7
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _primitives = require("../../primitives");
|
|
10
|
+
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
var Filter = function Filter(_ref) {
|
|
13
|
+
var _ref$filter = _ref.filter,
|
|
14
|
+
filter = _ref$filter === void 0 ? [] : _ref$filter,
|
|
15
|
+
_ref$onRemove = _ref.onRemove,
|
|
16
|
+
onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
18
|
+
row: true,
|
|
19
|
+
wide: true,
|
|
20
|
+
className: _TableModule.default.filters
|
|
21
|
+
}, filter.map(function (_ref2, index) {
|
|
22
|
+
var field = _ref2.field,
|
|
23
|
+
value = _ref2.value,
|
|
24
|
+
min = _ref2.min,
|
|
25
|
+
max = _ref2.max;
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
27
|
+
row: true,
|
|
28
|
+
key: index,
|
|
29
|
+
className: _TableModule.default.filter
|
|
30
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
31
|
+
small: true
|
|
32
|
+
}, field), value && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
33
|
+
bold: true,
|
|
34
|
+
small: true
|
|
35
|
+
}, value), min && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
36
|
+
bold: true,
|
|
37
|
+
small: true
|
|
38
|
+
}, "".concat(max ? '' : '≥ ').concat(min)), max && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
39
|
+
bold: true,
|
|
40
|
+
small: true
|
|
41
|
+
}, "".concat(min ? ' - ' : '≤ ').concat(max)), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
42
|
+
onPress: function onPress() {
|
|
43
|
+
return onRemove(index);
|
|
44
|
+
}
|
|
45
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
46
|
+
action: true,
|
|
47
|
+
value: _primitives.ICON.CLOSE
|
|
48
|
+
})));
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
51
|
+
exports.Filter = Filter;
|
|
52
|
+
Filter.displayName = 'Component:Table:Filter';
|
|
53
|
+
Filter.propTypes = {
|
|
54
|
+
filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
|
|
55
|
+
onRemove: _propTypes.default.func.isRequired
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=Table.Filter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.Filter.js","names":["Filter","filter","onRemove","style","filters","map","index","field","value","min","max","ICON","CLOSE","displayName","propTypes","PropTypes","arrayOf","shape","func","isRequired"],"sources":["../../../src/components/Table/Table.Filter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Table.module.css';\n\nconst Filter = ({ filter = [], onRemove = () => {} }) => (\n <View row wide className={style.filters}>\n {filter.map(({ field, value, min, max }, index) => (\n <View row key={index} className={style.filter}>\n <Text small>{field}</Text>\n {value && (\n <Text bold small>\n {value}\n </Text>\n )}\n {min && (\n <Text bold small>\n {`${max ? '' : '≥ '}${min}`}\n </Text>\n )}\n {max && (\n <Text bold small>\n {`${min ? ' - ' : '≤ '}${max}`}\n </Text>\n )}\n <Pressable onPress={() => onRemove(index)}>\n <Icon action value={ICON.CLOSE} />\n </Pressable>\n </View>\n ))}\n </View>\n);\n\nFilter.displayName = 'Component:Table:Filter';\n\nFilter.propTypes = {\n filter: PropTypes.arrayOf(PropTypes.shape({})),\n onRemove: PropTypes.func.isRequired,\n};\n\nexport { Filter };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAAuC;AAEvC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,uBAAMC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;EAAA,oBAChD,6BAAC,gBAAI;IAAC,GAAG;IAAC,IAAI;IAAC,SAAS,EAAEC,oBAAK,CAACC;EAAQ,GACrCH,MAAM,CAACI,GAAG,CAAC,iBAA6BC,KAAK;IAAA,IAA/BC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;MAAEC,GAAG,SAAHA,GAAG;MAAEC,GAAG,SAAHA,GAAG;IAAA,oBACnC,6BAAC,gBAAI;MAAC,GAAG;MAAC,GAAG,EAAEJ,KAAM;MAAC,SAAS,EAAEH,oBAAK,CAACF;IAAO,gBAC5C,6BAAC,gBAAI;MAAC,KAAK;IAAA,GAAEM,KAAK,CAAQ,EACzBC,KAAK,iBACJ,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,GACbA,KAAK,CAET,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVC,GAAG,GAAG,EAAE,GAAG,IAAI,SAAGD,GAAG,EAE5B,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVD,GAAG,GAAG,KAAK,GAAG,IAAI,SAAGC,GAAG,EAE/B,eACD,6BAAC,qBAAS;MAAC,OAAO,EAAE;QAAA,OAAMR,QAAQ,CAACI,KAAK,CAAC;MAAA;IAAC,gBACxC,6BAAC,gBAAI;MAAC,MAAM;MAAC,KAAK,EAAEK,gBAAI,CAACC;IAAM,EAAG,CACxB,CACP;EAAA,CACR,CAAC,CACG;AAAA,CACR;AAAC;AAEFZ,MAAM,CAACa,WAAW,GAAG,wBAAwB;AAE7Cb,MAAM,CAACc,SAAS,GAAG;EACjBb,MAAM,EAAEc,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9Cf,QAAQ,EAAEa,kBAAS,CAACG,IAAI,CAACC;AAC3B,CAAC"}
|
|
@@ -4,14 +4,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.Row = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputOption = require("../InputOption");
|
|
13
|
+
var _Table = require("./Table.ColumnFilter");
|
|
13
14
|
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
14
|
-
var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onPress", "onSelect", "onSort"];
|
|
15
|
+
var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onFilter", "onPress", "onSelect", "onSort"];
|
|
15
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
17
|
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); }
|
|
17
18
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -20,13 +21,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
|
|
|
20
21
|
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; }
|
|
21
22
|
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; }
|
|
22
23
|
var CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];
|
|
23
|
-
var
|
|
24
|
+
var Row = function Row(_ref) {
|
|
24
25
|
var checked = _ref.checked,
|
|
25
26
|
dataSource = _ref.dataSource,
|
|
26
27
|
indeterminate = _ref.indeterminate,
|
|
27
28
|
schema = _ref.schema,
|
|
28
29
|
_ref$sort = _ref.sort,
|
|
29
30
|
sort = _ref$sort === void 0 ? {} : _ref$sort,
|
|
31
|
+
onFilter = _ref.onFilter,
|
|
30
32
|
onPress = _ref.onPress,
|
|
31
33
|
onSelect = _ref.onSelect,
|
|
32
34
|
onSort = _ref.onSort,
|
|
@@ -62,20 +64,28 @@ var TableRow = function TableRow(_ref) {
|
|
|
62
64
|
onChange: function onChange(event) {
|
|
63
65
|
return onSelect(dataSource, event);
|
|
64
66
|
}
|
|
65
|
-
}), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.
|
|
67
|
+
}), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
68
|
+
row: true,
|
|
69
|
+
className: _TableModule.default.icons
|
|
70
|
+
}, onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
66
71
|
value: sort[field] === false ? _primitives.ICON.UP : _primitives.ICON.DOWN,
|
|
67
72
|
className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.disabled)
|
|
68
|
-
})
|
|
73
|
+
}), onFilter && /*#__PURE__*/_react.default.createElement(_Table.ColumnFilter, {
|
|
74
|
+
field: field,
|
|
75
|
+
schema: schema[field],
|
|
76
|
+
onSubmit: onFilter
|
|
77
|
+
}))));
|
|
69
78
|
}));
|
|
70
79
|
};
|
|
71
|
-
exports.
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
exports.Row = Row;
|
|
81
|
+
Row.displayName = 'Component:Table:Row';
|
|
82
|
+
Row.propTypes = {
|
|
74
83
|
checked: _propTypes.default.bool,
|
|
75
84
|
dataSource: _propTypes.default.shape({}),
|
|
76
85
|
indeterminate: _propTypes.default.bool,
|
|
77
86
|
schema: _propTypes.default.shape({}).isRequired,
|
|
78
87
|
sort: _propTypes.default.shape({}),
|
|
88
|
+
onFilter: _propTypes.default.func,
|
|
79
89
|
onPress: _propTypes.default.func,
|
|
80
90
|
onSelect: _propTypes.default.func,
|
|
81
91
|
onSort: _propTypes.default.func
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","
|
|
1
|
+
{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","schema","sort","onFilter","onPress","onSelect","onSort","others","isHead","undefined","testId","handlePress","field","event","target","type","includes","styles","style","selected","Object","keys","filter","map","index","React","createElement","column","selectable","checkbox","label","icons","ICON","UP","DOWN","icon","disabled","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n checked,\n dataSource,\n indeterminate,\n schema,\n sort = {},\n onFilter,\n onPress,\n onSelect,\n onSort,\n ...others\n}) => {\n const isHead = dataSource === undefined;\n const { ['data-testid']: testId } = others;\n\n const handlePress = (field, event) => {\n const { target: { type } = {} } = event;\n if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n isHead ? onSort(field) : onPress && onPress(dataSource, event);\n };\n\n return (\n <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n {Object.keys(schema)\n .filter((field) => schema[field].type !== 'hidden')\n .map((field, index) =>\n React.createElement(\n isHead ? 'th' : 'td',\n {\n ['data-testid']: testId ? `${testId}-${field}` : undefined,\n key: field,\n onClick: (event) => handlePress(field, event),\n },\n <View\n forceRow\n tag=\"span\"\n className={styles(\n style.column,\n onSelect && index === 0 && style.selectable,\n !isHead && !(onSelect && index === 0) && style[schema[field].type || 'text'],\n )}\n >\n {onSelect && index === 0 && (\n <InputOption\n checked={checked}\n data-testid={testId ? `${testId}-checkbox` : undefined}\n indeterminate={indeterminate}\n name=\"checkbox\"\n className={style.checkbox}\n onChange={(event) => onSelect(dataSource, event)}\n />\n )}\n\n {isHead ? schema[field].label : dataSource[field]}\n\n {isHead && onSort && (\n <View row className={style.icons}>\n {onSort && (\n <Icon\n value={sort[field] === false ? ICON.UP : ICON.DOWN}\n className={styles(style.icon, sort[field] === undefined && style.disabled)}\n />\n )}\n {onFilter && <ColumnFilter field={field} schema={schema[field]} onSubmit={onFilter} />}\n </View>\n )}\n </View>,\n ),\n )}\n </tr>\n );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n checked: PropTypes.bool,\n dataSource: PropTypes.shape({}),\n indeterminate: PropTypes.bool,\n schema: PropTypes.shape({}).isRequired,\n sort: PropTypes.shape({}),\n onFilter: PropTypes.func,\n onPress: PropTypes.func,\n onSelect: PropTypes.func,\n onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":"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"}
|
|
@@ -10,9 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _helpers2 = require("./helpers");
|
|
13
|
+
var _Table = require("./Table.Filter");
|
|
13
14
|
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
|
|
14
|
-
var
|
|
15
|
-
var _excluded = ["dataSource", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
|
|
15
|
+
var _Table2 = require("./Table.Row");
|
|
16
|
+
var _excluded = ["dataSource", "filter", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
|
|
16
17
|
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); }
|
|
17
18
|
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; }
|
|
18
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -22,6 +23,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
22
23
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
24
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
24
25
|
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); }
|
|
26
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
27
|
+
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."); }
|
|
28
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
29
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
25
30
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
26
31
|
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."); }
|
|
27
32
|
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); }
|
|
@@ -33,6 +38,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
33
38
|
var Table = function Table(_ref) {
|
|
34
39
|
var _ref$dataSource = _ref.dataSource,
|
|
35
40
|
dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
|
|
41
|
+
_ref$filter = _ref.filter,
|
|
42
|
+
propFilter = _ref$filter === void 0 ? [] : _ref$filter,
|
|
36
43
|
_ref$inline = _ref.inline,
|
|
37
44
|
inline = _ref$inline === void 0 ? true : _ref$inline,
|
|
38
45
|
schema = _ref.schema,
|
|
@@ -43,14 +50,36 @@ var Table = function Table(_ref) {
|
|
|
43
50
|
onScroll = _ref.onScroll,
|
|
44
51
|
onSelect = _ref.onSelect,
|
|
45
52
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
46
|
-
var _useState = (0, _react.useState)(
|
|
53
|
+
var _useState = (0, _react.useState)(propFilter),
|
|
47
54
|
_useState2 = _slicedToArray(_useState, 2),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var _useState3 = (0, _react.useState)(
|
|
55
|
+
filter = _useState2[0],
|
|
56
|
+
setFilter = _useState2[1];
|
|
57
|
+
var _useState3 = (0, _react.useState)(propSelected),
|
|
51
58
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
52
|
-
|
|
53
|
-
|
|
59
|
+
selected = _useState4[0],
|
|
60
|
+
setSelected = _useState4[1];
|
|
61
|
+
var _useState5 = (0, _react.useState)({}),
|
|
62
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
63
|
+
sort = _useState6[0],
|
|
64
|
+
setSort = _useState6[1];
|
|
65
|
+
(0, _react.useEffect)(function () {
|
|
66
|
+
if (JSON.stringify(filter) !== JSON.stringify(propFilter)) setFilter(propFilter);
|
|
67
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
|
+
}, [propFilter]);
|
|
69
|
+
var handleAddFilter = function handleAddFilter(item) {
|
|
70
|
+
setFilter([].concat(_toConsumableArray(filter), [item]));
|
|
71
|
+
};
|
|
72
|
+
var handleRemoveFilter = function handleRemoveFilter(index) {
|
|
73
|
+
filter.splice(index, 1);
|
|
74
|
+
setFilter(_toConsumableArray(filter));
|
|
75
|
+
};
|
|
76
|
+
var handleHeadSelect = function handleHeadSelect(row, event) {
|
|
77
|
+
setSelected(function () {
|
|
78
|
+
var next = selected.length !== dataSource.length ? dataSource : [];
|
|
79
|
+
onSelect(next, event);
|
|
80
|
+
return next;
|
|
81
|
+
});
|
|
82
|
+
};
|
|
54
83
|
var handleSelect = function handleSelect(row, event) {
|
|
55
84
|
setSelected(function () {
|
|
56
85
|
var exists = selected.includes(row);
|
|
@@ -62,13 +91,6 @@ var Table = function Table(_ref) {
|
|
|
62
91
|
return next;
|
|
63
92
|
});
|
|
64
93
|
};
|
|
65
|
-
var handleHeadSelect = function handleHeadSelect(row, event) {
|
|
66
|
-
setSelected(function () {
|
|
67
|
-
var next = selected.length !== dataSource.length ? dataSource : [];
|
|
68
|
-
onSelect(next, event);
|
|
69
|
-
return next;
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
94
|
var handleSort = function handleSort(field) {
|
|
73
95
|
setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
|
|
74
96
|
};
|
|
@@ -76,24 +98,33 @@ var Table = function Table(_ref) {
|
|
|
76
98
|
return /*#__PURE__*/_react.default.createElement(onScroll ? _primitives.ScrollView : !inline ? _primitives.View : _react.Fragment, onScroll || !inline ? _objectSpread(_objectSpread({}, others), {}, {
|
|
77
99
|
onScroll: onScroll,
|
|
78
100
|
className: (0, _helpers.styles)(!inline && _TableModule.default.outlined, others.className)
|
|
79
|
-
}) : undefined, /*#__PURE__*/_react.default.createElement(
|
|
101
|
+
}) : undefined, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filter.length > 0 && /*#__PURE__*/_react.default.createElement(_Table.Filter, {
|
|
102
|
+
filter: filter,
|
|
103
|
+
onRemove: function onRemove(index) {
|
|
104
|
+
return handleRemoveFilter(index);
|
|
105
|
+
}
|
|
106
|
+
}), /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
|
|
80
107
|
className: (0, _helpers.styles)(_TableModule.default.table, !onScroll && !inline && others.className)
|
|
81
|
-
}), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(
|
|
108
|
+
}), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table2.Row, {
|
|
82
109
|
checked: selected.length === dataSource.length,
|
|
83
110
|
indeterminate: selected.length > 0,
|
|
84
111
|
schema: schema,
|
|
85
112
|
sort: sort,
|
|
113
|
+
onFilter: handleAddFilter,
|
|
86
114
|
onSelect: onSelect ? handleHeadSelect : undefined,
|
|
87
115
|
onSort: handleSort,
|
|
88
116
|
"data-testid": testId ? "".concat(testId, "-head") : undefined
|
|
89
117
|
})), /*#__PURE__*/_react.default.createElement("tbody", null, (0, _react.useMemo)(function () {
|
|
90
118
|
return (0, _helpers2.select)(dataSource, {
|
|
119
|
+
filter: filter,
|
|
91
120
|
search: search,
|
|
92
121
|
sort: sort
|
|
93
122
|
});
|
|
94
|
-
}, [dataSource, search, sort]).map(function (row, index) {
|
|
95
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
96
|
-
checked: selected.
|
|
123
|
+
}, [dataSource, filter, search, sort]).map(function (row, index) {
|
|
124
|
+
return /*#__PURE__*/_react.default.createElement(_Table2.Row, {
|
|
125
|
+
checked: !!selected.find(function (item) {
|
|
126
|
+
return JSON.stringify(item) === JSON.stringify(row);
|
|
127
|
+
}),
|
|
97
128
|
dataSource: row,
|
|
98
129
|
key: index,
|
|
99
130
|
schema: schema,
|
|
@@ -101,11 +132,13 @@ var Table = function Table(_ref) {
|
|
|
101
132
|
onSelect: onSelect ? handleSelect : undefined,
|
|
102
133
|
"data-testid": testId ? "".concat(testId, "-").concat(index) : undefined
|
|
103
134
|
});
|
|
104
|
-
}))));
|
|
135
|
+
})))));
|
|
105
136
|
};
|
|
106
137
|
exports.Table = Table;
|
|
138
|
+
Table.displayName = 'Component:Table';
|
|
107
139
|
Table.propTypes = {
|
|
108
140
|
dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
|
|
141
|
+
filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
|
|
109
142
|
inline: _propTypes.default.bool,
|
|
110
143
|
schema: _propTypes.default.shape({}).isRequired,
|
|
111
144
|
search: _propTypes.default.string,
|