react-ui-basics 0.0.173 → 0.0.174
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/AutocompleteSelect.js +23 -9
- package/FilteredList.d.ts +61 -0
- package/FilteredList.js +139 -234
- package/Table.d.ts +17 -2
- package/Table.js +27 -14
- package/TextField.js +4 -2
- package/bundle.css +515 -515
- package/package.json +4 -4
package/Table.js
CHANGED
|
@@ -10,7 +10,7 @@ import { Component } from 'react';
|
|
|
10
10
|
import TextField from './TextField.js';
|
|
11
11
|
import AutocompleteSelect, { MODE_MULTIPLE_MINI, MODE_DEFAULT } from './AutocompleteSelect.js';
|
|
12
12
|
import Switch from './Switch.js';
|
|
13
|
-
import { setInterval, classNames, isFunction,
|
|
13
|
+
import { setInterval, classNames, isFunction, UNDEFINED, isString, preventDefault, stopPropagation, Comparators, createRef, createAccessor, orNoop, NOOP } from './Tools.js';
|
|
14
14
|
import MaterialIcon from './MaterialIcon.js';
|
|
15
15
|
import { stateGSs, componentDidMount, componentDidUpdate, render, componentWillUnmount, PureComponent, propsGetter } from './ReactConstants.js';
|
|
16
16
|
|
|
@@ -38,9 +38,13 @@ var Table = /** @class */ (function (_super) {
|
|
|
38
38
|
var cancelEditing = function () {
|
|
39
39
|
editingState(false);
|
|
40
40
|
};
|
|
41
|
-
var setEditing = function (item, columnIndex,
|
|
42
|
-
|
|
41
|
+
var setEditing = function (item, columnIndex, value) {
|
|
42
|
+
var columns = props().columns;
|
|
43
|
+
var field = columns[columnIndex].field;
|
|
44
|
+
editingState({ id: item.id, value: (value != null ? value : item[field]), columnIndex: columnIndex, item: item, field: field });
|
|
43
45
|
};
|
|
46
|
+
_this.startEditing = setEditing;
|
|
47
|
+
_this.isEditing = function () { return !!editingState(); };
|
|
44
48
|
var handleInputChange = function (event) {
|
|
45
49
|
var target = __target(event);
|
|
46
50
|
var value = target.type === 'checkbox' ? target.checked : __value(target);
|
|
@@ -49,7 +53,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
49
53
|
var onFinishEditing = function () {
|
|
50
54
|
var _a;
|
|
51
55
|
var editing = editingState();
|
|
52
|
-
if (__value(editing) === null)
|
|
56
|
+
if (!editing || __value(editing) === null)
|
|
53
57
|
return;
|
|
54
58
|
var value = __value(editing);
|
|
55
59
|
if (isString(value))
|
|
@@ -59,6 +63,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
59
63
|
var updated = __extends(__extends({}, editing.item), (_a = {}, _a[editing.field] = value, _a));
|
|
60
64
|
props()[ReactConstants[7]](updated, cancelEditing);
|
|
61
65
|
};
|
|
66
|
+
_this.finishEditing = onFinishEditing;
|
|
62
67
|
var setValue = function (value) {
|
|
63
68
|
editingState(__extends(__extends({}, editingState()), { value: value }), onFinishEditing);
|
|
64
69
|
};
|
|
@@ -102,7 +107,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
102
107
|
updateHeaders();
|
|
103
108
|
};
|
|
104
109
|
_this[ReactConstants[3]] = function () {
|
|
105
|
-
var _a = props(), _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.onRowClick, onRowClick = _c === void 0 ? NOOP : _c, disabled = _a.disabled, className = _a[ReactConstants[5]], rowClassName = _a.rowClassName, _d = _a.toKey, toKey = _d === void 0 ? getId : _d;
|
|
110
|
+
var _a = props(), _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.onRowClick, onRowClick = _c === void 0 ? NOOP : _c, disabled = _a.disabled, className = _a[ReactConstants[5]], rowClassName = _a.rowClassName, _d = _a.toKey, toKey = _d === void 0 ? getId : _d, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
|
|
106
111
|
var sortBy = sortByState();
|
|
107
112
|
var sortOrder = sortOrderState();
|
|
108
113
|
var editing = editingState();
|
|
@@ -110,7 +115,7 @@ var Table = /** @class */ (function (_super) {
|
|
|
110
115
|
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
116
|
var sortable = column.sortable || column.sortable == null;
|
|
112
117
|
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
|
-
}) })) }), 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))); }) })] })));
|
|
118
|
+
}) })) }), jsxRuntime_2("tbody", { [ReactConstants[4]]: data.map(function (item, i) { return (jsxRuntime_2(Row, { i: i, 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, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, toKey(item))); }) })] })));
|
|
114
119
|
};
|
|
115
120
|
_this[ReactConstants[1]] = function () {
|
|
116
121
|
clearInterval(updateHeadersInterval);
|
|
@@ -130,11 +135,19 @@ var Row = /** @class */ (function (_super) {
|
|
|
130
135
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
131
136
|
}
|
|
132
137
|
Row.prototype[ReactConstants[3]] = function () {
|
|
133
|
-
var _a = __props(this), item = _a.item, disabled = _a.disabled, editing = _a.editing, onClick = _a[ReactConstants[6]], className = _a[ReactConstants[5]], columns = _a.columns, setEditing = _a.setEditing, cancelEditing = _a.cancelEditing, onFinishEditing = _a.onFinishEditing, handleInputChange = _a.handleInputChange, setValue = _a.setValue;
|
|
134
|
-
return jsxRuntime_2("tr", __extends({ [ReactConstants[6]]: function (e) { return onClick(item, e); }, [ReactConstants[5]]: classNames(disabled && disabled(item) && 'disabled', className && (isFunction(className) ? className(item) : className)) }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column,
|
|
135
|
-
var isEditing = editing && editing.columnIndex ===
|
|
138
|
+
var _a = __props(this), item = _a.item, i = _a.i, disabled = _a.disabled, editing = _a.editing, onClick = _a[ReactConstants[6]], className = _a[ReactConstants[5]], columns = _a.columns, setEditing = _a.setEditing, cancelEditing = _a.cancelEditing, onFinishEditing = _a.onFinishEditing, handleInputChange = _a.handleInputChange, setValue = _a.setValue, onMouseDown = _a.onMouseDown, onMouseEnter = _a.onMouseEnter, onMouseUp = _a.onMouseUp, onMouseLeave = _a.onMouseLeave;
|
|
139
|
+
return jsxRuntime_2("tr", __extends({ [ReactConstants[6]]: function (e) { return onClick(item, e); }, [ReactConstants[5]]: classNames(disabled && disabled(item) && 'disabled', className && (isFunction(className) ? className(item) : className)) }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column, j) {
|
|
140
|
+
var isEditing = editing && editing.columnIndex === j;
|
|
136
141
|
var editable = isFunction(column.editable) ? column.editable(item) : !!column.editable;
|
|
137
|
-
|
|
142
|
+
var startEditing = !isEditing && editable ? function () { return setEditing(item, j); } : NOOP;
|
|
143
|
+
var onClick = (!!column[ReactConstants[6]] ? function (e) { return column[ReactConstants[6]](e, startEditing, item, column.field, i, j); } : startEditing);
|
|
144
|
+
var displayEditor = isEditing || column.displayEditor;
|
|
145
|
+
var value = item[column.field];
|
|
146
|
+
if (editing) {
|
|
147
|
+
value = __value(editing) != null ? __value(editing) : value;
|
|
148
|
+
value = column.preEditor ? column.preEditor(value) : value;
|
|
149
|
+
}
|
|
150
|
+
return (jsxRuntime_1("td", __extends({ onMouseDown: onMouseDown ? function (e) { return onMouseDown(e, i, j); } : UNDEFINED, onMouseUp: onMouseUp ? function (e) { return onMouseUp(e, i, j); } : UNDEFINED, onMouseEnter: onMouseEnter ? function (e) { return onMouseEnter(e, i, j); } : UNDEFINED, onMouseLeave: onMouseLeave ? function (e) { return onMouseLeave(e, i, j); } : UNDEFINED, [ReactConstants[5]]: classNames(editable ? 'editable' : 'ro', isEditing && 'editing', isString(column[ReactConstants[5]]) && column[ReactConstants[5]], isFunction(column[ReactConstants[5]]) && column[ReactConstants[5]](item, column.field, i, j)), [ReactConstants[6]]: onClick }, { [ReactConstants[4]]: [displayEditor && !column.editor && (jsxRuntime_2(TextField, { value: value, focused: true, onBlur: cancelEditing, [ReactConstants[7]]: handleInputChange, onKeyDown: function (e) {
|
|
138
151
|
if (e.keyCode === 27 /*escape*/) {
|
|
139
152
|
preventDefault(e);
|
|
140
153
|
cancelEditing();
|
|
@@ -143,12 +156,12 @@ var Row = /** @class */ (function (_super) {
|
|
|
143
156
|
preventDefault(e);
|
|
144
157
|
onFinishEditing();
|
|
145
158
|
}
|
|
146
|
-
} })),
|
|
159
|
+
} })), displayEditor && column.editor === editorSelect && (jsxRuntime_2(AutocompleteSelect, { value: value, 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 })), displayEditor && column.editor === editorSwitch && (jsxRuntime_2(Switch, { [ReactConstants[6]]: function (e) {
|
|
147
160
|
stopPropagation(e);
|
|
148
161
|
preventDefault(e);
|
|
149
|
-
setValue(!
|
|
150
|
-
}, value:
|
|
151
|
-
&& column.editor(item, cancelEditing, isEditing), !isEditing && !column.displayEditor && formatValue(item, column)] }),
|
|
162
|
+
setValue(!value);
|
|
163
|
+
}, value: value })), displayEditor && isFunction(column.editor)
|
|
164
|
+
&& column.editor(item, cancelEditing, isEditing), !isEditing && !column.displayEditor && formatValue(item, column)] }), j));
|
|
152
165
|
}) }));
|
|
153
166
|
};
|
|
154
167
|
return Row;
|
package/TextField.js
CHANGED
|
@@ -113,8 +113,10 @@ var TextField = function (_PureComponent) {
|
|
|
113
113
|
var hasValue = !!__value(i);
|
|
114
114
|
isWithValue(hasValue);
|
|
115
115
|
!hasValue && setTimeout(function () {
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
try {
|
|
117
|
+
var matches = i.matches(':-internal-autofill-selected');
|
|
118
|
+
matches && isWithValue(matches);
|
|
119
|
+
} catch (ignored) {}
|
|
118
120
|
}, 100);
|
|
119
121
|
focused && i.focus();
|
|
120
122
|
orNoop(input)(i);
|