react-ui-basics 0.0.162 → 0.0.165

package/Table.d.ts

@@ -19,7 +19,7 @@ export interface RowProps<T> {
     setValue: (v: any) => void;
     setEditing: (t: T, i: number, field: string) => void;
 }
-export declare type Formatter<T, V> = ((value?: V, item?: T, format?: string) => ReactElement) | ((value: V, item: T) => ReactElement) | ((value: V) => ReactElement);
+export declare type Formatter<T, V> = ((value?: V, item?: T, format?: string) => ReactElement | string) | ((value: V, item: T) => ReactElement | string) | ((value: V) => ReactElement | string);
 export interface TableColumn<T> {
     field?: string;
     className?: string;
@@ -55,4 +55,12 @@ export interface TableState<T> {
 declare class Table<T> extends Component<TableProps<T>, TableState<T>> {
     constructor(properties: any);
 }
+export interface TableColumnSelect extends TableColumn<any> {
+    editorData?: any;
+    multiSelect?: any;
+    onSelect?: any;
+    editorSelectedComponent?: any;
+    editorChildCompononent?: any;
+    prefilter?: any;
+}
 export default Table;

package/Table.js

@@ -5,11 +5,12 @@ import { jsxs as jsxRuntime_1, jsx as jsxRuntime_2 } from 'react/jsx-runtime';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import './Table.css';
 import { Component } from 'react';
 import TextField from './TextField.js';
 import AutocompleteSelect, { MODE_MULTIPLE_MINI, MODE_DEFAULT } from './AutocompleteSelect.js';
 import Switch from './Switch.js';
-import { setInterval, classNames, isFunction, NOOP, preventDefault, stopPropagation, Comparators, createRef, isString, orNoop } from './Tools.js';
+import { setInterval, classNames, isFunction, NOOP, preventDefault, stopPropagation, Comparators, createRef, createAccessor, isString, orNoop } from './Tools.js';
 import MaterialIcon from './MaterialIcon.js';
 import { stateGSs, componentDidMount, componentDidUpdate, render, componentWillUnmount, PureComponent, propsGetter } from './ReactConstants.js';
 
@@ -33,6 +34,7 @@ var Table = /** @class */ (function (_super) {
             }
         };
         var _a = stateGSs(_this, 5), editingState = _a[0], dataState = _a[1], sortByState = _a[2], sortOrderState = _a[3], comparatorState = _a[4];
+        var comparatorGetter = createAccessor('comparator');
         var cancelEditing = function () {
             editingState(false);
         };
@@ -84,17 +86,15 @@ var Table = /** @class */ (function (_super) {
             setData(dataState(), sortBy, sortOrder, comparator);
         };
         _this[ReactConstants[0]] = function () {
-            var _a;
-            var _b = props(), sortBy = _b.sortBy, _c = _b.sortOrder, sortOrder = _c === void 0 ? SORT_ASC : _c, columns = _b.columns;
-            setData(dataState(), sortBy, sortOrder, (_a = columns.find(function (it) { return it.field === sortBy; })) === null || _a === void 0 ? void 0 : _a.comparator);
+            var _a = props(), sortBy = _a.sortBy, _b = _a.sortOrder, sortOrder = _b === void 0 ? SORT_ASC : _b, columns = _a.columns, data = __data(_a);
+            setData(data, sortBy, sortOrder, comparatorGetter(columns.find(function (it) { return it.field === sortBy; })));
             updateHeaders();
             updateHeadersInterval = setInterval(updateHeaders, 1000);
         };
         _this[ReactConstants[2]] = function (prevProps, prevState, snapshot) {
-            var _a;
-            var _b = props(), sortBy = _b.sortBy, sortOrder = _b.sortOrder, columns = _b.columns, data = __data(_b);
+            var _a = props(), sortBy = _a.sortBy, sortOrder = _a.sortOrder, columns = _a.columns, data = __data(_a);
             if (sortBy !== prevProps.sortBy || sortOrder !== prevProps.sortOrder) {
-                setData(dataState(), sortBy, sortOrder || SORT_ASC, (_a = columns.find(function (it) { return it.field === sortBy; })) === null || _a === void 0 ? void 0 : _a.comparator);
+                setData(dataState(), sortBy, sortOrder || SORT_ASC, comparatorGetter(columns.find(function (it) { return it.field === sortBy; })));
             }
             else if (data !== __data(prevProps)) {
                 setData(data);
@@ -109,7 +109,7 @@ var Table = /** @class */ (function (_super) {
             var data = dataState() || [];
             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) {
                                 var sortable = column.sortable || column.sortable == null;
-                                return (jsxRuntime_1("th", __extends({ [ReactConstants[6]]: function (e) { return sortable && sort(e, column.field, column.comparator); } }, { [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));
+                                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));
                             }) })) }), 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))); }) })] })));
         };
         _this[ReactConstants[1]] = function () {
@@ -143,7 +143,7 @@ var Row = /** @class */ (function (_super) {
                                     preventDefault(e);
                                     onFinishEditing();
                                 }
-                            } })), (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.editorChildCompononRowClickent, onCancel: cancelEditing, prefilter: column.prefilter })), (isEditing || column.displayEditor) && column.editor === editorSwitch && (jsxRuntime_2(Switch, { [ReactConstants[6]]: function (e) {
+                            } })), (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) {
                                 stopPropagation(e);
                                 preventDefault(e);
                                 setValue(!item[column.field]);

package/TextField.js

@@ -4,6 +4,7 @@ import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import './TextField.css';
 import 'react';
 import ReactCreateElement from './ReactCreateElement.js';
 import { classNames, isUndefined, orNoop, addEventListener, getRandomId, createRef, setTimeout } from './Tools.js';

package/Tools.d.ts

@@ -1,6 +1,6 @@
 export declare const WINDOW: any;
 export declare const DOCUMENT: any;
-export declare function classNames(...classes: Array<string | number | boolean | null>): string;
+export declare function classNames(...classes: Array<string | number | boolean | null | void>): string;
 export declare const NOOP: () => void;
 export declare const orNoop: <T>(f: (...a: any) => T) => (() => void) | ((...a: any) => T);
 export declare const getRandomId: (prefix: any) => any;

package/Tools.js

@@ -32,6 +32,9 @@ var createRef = function (initialValue) {
         return v;
     };
 };
+var createAccessor = function (field) { return function (o, value) {
+    return !o ? null : value != UNDEFINED ? o[field] = value : o[field];
+}; };
 var setOf = function (list) { return (list || []).reduce(function (map, key) {
     map[key] = true;
     return map;
@@ -229,5 +232,5 @@ if (process.env.NODE_ENV !== 'production') {
     };
 }
 
-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 };
+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 };
 //# sourceMappingURL=Tools.js.map