react-ui-basics 0.0.162 → 0.0.163
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/Table.d.ts +8 -0
- package/Table.js +8 -9
- package/Tools.d.ts +1 -1
- package/Tools.js +4 -1
- package/bundle.css +761 -761
- package/package.json +1 -1
- package/store/Store.js +1 -0
- package/store/Store.js.map +1 -1
package/Table.d.ts
CHANGED
|
@@ -55,4 +55,12 @@ export interface TableState<T> {
|
|
|
55
55
|
declare class Table<T> extends Component<TableProps<T>, TableState<T>> {
|
|
56
56
|
constructor(properties: any);
|
|
57
57
|
}
|
|
58
|
+
export interface TableColumnSelect extends TableColumn<any> {
|
|
59
|
+
editorData?: any;
|
|
60
|
+
multiSelect?: any;
|
|
61
|
+
onSelect?: any;
|
|
62
|
+
editorSelectedComponent?: any;
|
|
63
|
+
editorChildCompononent?: any;
|
|
64
|
+
prefilter?: any;
|
|
65
|
+
}
|
|
58
66
|
export default Table;
|
package/Table.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Component } from 'react';
|
|
|
9
9
|
import TextField from './TextField.js';
|
|
10
10
|
import AutocompleteSelect, { MODE_MULTIPLE_MINI, MODE_DEFAULT } from './AutocompleteSelect.js';
|
|
11
11
|
import Switch from './Switch.js';
|
|
12
|
-
import { setInterval, classNames, isFunction, NOOP, preventDefault, stopPropagation, Comparators, createRef, isString, orNoop } from './Tools.js';
|
|
12
|
+
import { setInterval, classNames, isFunction, NOOP, preventDefault, stopPropagation, Comparators, createRef, createAccessor, isString, orNoop } from './Tools.js';
|
|
13
13
|
import MaterialIcon from './MaterialIcon.js';
|
|
14
14
|
import { stateGSs, componentDidMount, componentDidUpdate, render, componentWillUnmount, PureComponent, propsGetter } from './ReactConstants.js';
|
|
15
15
|
|
|
@@ -33,6 +33,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
var _a = stateGSs(_this, 5), editingState = _a[0], dataState = _a[1], sortByState = _a[2], sortOrderState = _a[3], comparatorState = _a[4];
|
|
36
|
+
var comparatorGetter = createAccessor('comparator');
|
|
36
37
|
var cancelEditing = function () {
|
|
37
38
|
editingState(false);
|
|
38
39
|
};
|
|
@@ -84,17 +85,15 @@ var Table = /** @class */ (function (_super) {
|
|
|
84
85
|
setData(dataState(), sortBy, sortOrder, comparator);
|
|
85
86
|
};
|
|
86
87
|
_this[ReactConstants[0]] = function () {
|
|
87
|
-
var _a;
|
|
88
|
-
|
|
89
|
-
setData(dataState(), sortBy, sortOrder, (_a = columns.find(function (it) { return it.field === sortBy; })) === null || _a === void 0 ? void 0 : _a.comparator);
|
|
88
|
+
var _a = props(), sortBy = _a.sortBy, _b = _a.sortOrder, sortOrder = _b === void 0 ? SORT_ASC : _b, columns = _a.columns;
|
|
89
|
+
setData(dataState(), sortBy, sortOrder, comparatorGetter(columns.find(function (it) { return it.field === sortBy; })));
|
|
90
90
|
updateHeaders();
|
|
91
91
|
updateHeadersInterval = setInterval(updateHeaders, 1000);
|
|
92
92
|
};
|
|
93
93
|
_this[ReactConstants[2]] = function (prevProps, prevState, snapshot) {
|
|
94
|
-
var _a;
|
|
95
|
-
var _b = props(), sortBy = _b.sortBy, sortOrder = _b.sortOrder, columns = _b.columns, data = __data(_b);
|
|
94
|
+
var _a = props(), sortBy = _a.sortBy, sortOrder = _a.sortOrder, columns = _a.columns, data = __data(_a);
|
|
96
95
|
if (sortBy !== prevProps.sortBy || sortOrder !== prevProps.sortOrder) {
|
|
97
|
-
setData(dataState(), sortBy, sortOrder || SORT_ASC, (
|
|
96
|
+
setData(dataState(), sortBy, sortOrder || SORT_ASC, comparatorGetter(columns.find(function (it) { return it.field === sortBy; })));
|
|
98
97
|
}
|
|
99
98
|
else if (data !== __data(prevProps)) {
|
|
100
99
|
setData(data);
|
|
@@ -109,7 +108,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
109
108
|
var data = dataState() || [];
|
|
110
109
|
return (jsxRuntime_1("table", __extends({ [ReactConstants[5]]: classNames("Table", className) }, { [ReactConstants[4]]: [jsxRuntime_2("thead", { [ReactConstants[4]]: jsxRuntime_2("tr", __extends({ ref: headers }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column, i) {
|
|
111
110
|
var sortable = column.sortable || column.sortable == null;
|
|
112
|
-
return (jsxRuntime_1("th", __extends({ [ReactConstants[6]]: function (e) { return sortable && sort(e, column.field, column
|
|
111
|
+
return (jsxRuntime_1("th", __extends({ [ReactConstants[6]]: function (e) { return sortable && sort(e, column.field, comparatorGetter(column)); } }, { [ReactConstants[4]]: [jsxRuntime_1("div", __extends({ [ReactConstants[5]]: classNames('hidden', sortable && 'sortable', sortBy === column.field && 'active') }, { [ReactConstants[4]]: [column.header, column.header && sortBy === column.field && sortOrder === SORT_ASC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_up' })), column.header && sortBy === column.field && sortOrder === SORT_DESC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_down' }))] })), jsxRuntime_1("div", __extends({ [ReactConstants[5]]: classNames('fixed', sortable && 'sortable', sortBy === column.field && 'active') }, { [ReactConstants[4]]: [column.header, column.header && sortBy === column.field && sortOrder === SORT_ASC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_up' })), column.header && sortBy === column.field && sortOrder === SORT_DESC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_down' }))] }))] }), i));
|
|
113
112
|
}) })) }), jsxRuntime_2("tbody", { [ReactConstants[4]]: data.map(function (item) { return (jsxRuntime_2(Row, { item: item, disabled: disabled, editing: editing && editing.id === toKey(item) ? editing : null, [ReactConstants[6]]: onRowClick, [ReactConstants[5]]: rowClassName, columns: columns, setEditing: setEditing, cancelEditing: cancelEditing, onFinishEditing: onFinishEditing, handleInputChange: handleInputChange, setValue: setValue }, toKey(item))); }) })] })));
|
|
114
113
|
};
|
|
115
114
|
_this[ReactConstants[1]] = function () {
|
|
@@ -143,7 +142,7 @@ var Row = /** @class */ (function (_super) {
|
|
|
143
142
|
preventDefault(e);
|
|
144
143
|
onFinishEditing();
|
|
145
144
|
}
|
|
146
|
-
} })), (isEditing || column.displayEditor) && column.editor === editorSelect && (jsxRuntime_2(AutocompleteSelect, { value: column.preEditor ? column.preEditor(__value(editing)) : __value(editing), data: column.editorData, focused: true, withArrow: false, withFilter: false, selectedMode: 'inline', selectedComponent: column.editorSelectedComponent, mode: column.multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT, [ReactConstants[7]]: column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), onSelect: !column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), childComponent: column.
|
|
145
|
+
} })), (isEditing || column.displayEditor) && column.editor === editorSelect && (jsxRuntime_2(AutocompleteSelect, { value: column.preEditor ? column.preEditor(__value(editing)) : __value(editing), data: column.editorData, focused: true, withArrow: false, withFilter: false, selectedMode: 'inline', selectedComponent: column.editorSelectedComponent, mode: column.multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT, [ReactConstants[7]]: column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), onSelect: !column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), childComponent: column.editorChildCompononent, onCancel: cancelEditing, prefilter: column.prefilter })), (isEditing || column.displayEditor) && column.editor === editorSwitch && (jsxRuntime_2(Switch, { [ReactConstants[6]]: function (e) {
|
|
147
146
|
stopPropagation(e);
|
|
148
147
|
preventDefault(e);
|
|
149
148
|
setValue(!item[column.field]);
|
package/Tools.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const WINDOW: any;
|
|
2
2
|
export declare const DOCUMENT: any;
|
|
3
|
-
export declare function classNames(...classes: Array<string | number | boolean | null>): string;
|
|
3
|
+
export declare function classNames(...classes: Array<string | number | boolean | null | void>): string;
|
|
4
4
|
export declare const NOOP: () => void;
|
|
5
5
|
export declare const orNoop: <T>(f: (...a: any) => T) => (() => void) | ((...a: any) => T);
|
|
6
6
|
export declare const getRandomId: (prefix: any) => any;
|
package/Tools.js
CHANGED
|
@@ -32,6 +32,9 @@ var createRef = function (initialValue) {
|
|
|
32
32
|
return v;
|
|
33
33
|
};
|
|
34
34
|
};
|
|
35
|
+
var createAccessor = function (field) { return function (o, value) {
|
|
36
|
+
return !o ? null : value != UNDEFINED ? o[field] = value : o[field];
|
|
37
|
+
}; };
|
|
35
38
|
var setOf = function (list) { return (list || []).reduce(function (map, key) {
|
|
36
39
|
map[key] = true;
|
|
37
40
|
return map;
|
|
@@ -229,5 +232,5 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
229
232
|
};
|
|
230
233
|
}
|
|
231
234
|
|
|
232
|
-
export { Comparators, DOCUMENT, NOOP, UNDEFINED, WINDOW, addEventListener, allPropsExcept, classNames, clearInterval, clearTimeout, continuousIncludes, createRef, debounce, getRandomId, isDifferent, isFunction, isObject, isString, isUndefined, memo, orNoop, preventDefault, ref, removeEventListener, requestAnimationFrame, setInterval, setOf, setTimeout, stopPropagation, typeOf };
|
|
235
|
+
export { Comparators, DOCUMENT, NOOP, UNDEFINED, WINDOW, addEventListener, allPropsExcept, classNames, clearInterval, clearTimeout, continuousIncludes, createAccessor, createRef, debounce, getRandomId, isDifferent, isFunction, isObject, isString, isUndefined, memo, orNoop, preventDefault, ref, removeEventListener, requestAnimationFrame, setInterval, setOf, setTimeout, stopPropagation, typeOf };
|
|
233
236
|
//# sourceMappingURL=Tools.js.map
|