@ercioko/meblotex-api 0.2.2 → 0.2.4

package/dist/src/components/Table/Table.js

@@ -0,0 +1,498 @@
+function _array_like_to_array(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;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { Spin, Empty } from 'antd';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MultiGrid } from 'react-virtualized';
+import config from '../../config';
+import Spinner from './Spinner';
+import useGetRowCheckbox from './hooks/useGetRowCheckbox';
+import useGetCellRenderer from './hooks/useGetCellRenderer';
+import useGetResizeColumn from './hooks/useGetResizeColumn';
+import useRenderRowActions from './hooks/useRenderRowActions';
+import addIndexToObject from './addIndexToObject';
+import useGetColumnsWithCheckbox from './hooks/useGetColumnsWithCheckbox';
+import useDeleteRow from './hooks/useGetDeleteRow';
+import useResizeColumns from './hooks/useResizeColumns';
+import useLoadDataSource from './hooks/useLoadDataSource';
+import areProvidedColumnsDifferent from './areProvidedColumnsDifferent';
+import useFetchPage from './hooks/useFetchPage';
+import FloatingActions from './FloatingActions';
+import DataTableWrapper from './DataTableWrapper';
+import { DataTable, StyledTable } from './styles';
+import { usePageSize } from './hooks/usePageSize';
+import { OrderProvider, useOrder } from './providers/OrderProvider';
+var ROW_SIZE = config.ROW_SIZE, ROW_SIZE_MOBILE = config.ROW_SIZE_MOBILE, MOBILE_BREAKPOINT = config.MOBILE_BREAKPOINT;
+var getSearchBarCollapsed = function(s) {
+    return s.searchBarCollapsed;
+};
+export var MARGIN_FOR_SPINNER = 55;
+function BaseTable(param) {
+    var style = param.style, providedColumns = param.columns, filters = param.filters, actions = param.actions, loadPage = param.loadPage, onDelete = param.onDelete, added = param.added, dataSource = param.dataSource, withCheckbox = param.withCheckbox, checked = param.checked, setChecked = param.setChecked, selected = param.selected, _param_loadingDataSource = param.loadingDataSource, loadingDataSource = _param_loadingDataSource === void 0 ? false : _param_loadingDataSource, floatingActions = param.floatingActions, suspend = param.suspend, pinned = param.pinned, _param_useData = param.useData, useData = _param_useData === void 0 ? useState : _param_useData, responsive = param.responsive, deleteMessage = param.deleteMessage, idKey = param.idKey;
+    var _main_current, _main_current1;
+    var order = useOrder().order;
+    var _useState = _sliced_to_array(useState(ROW_SIZE), 2), rowSize = _useState[0], setRowSize = _useState[1];
+    var main = useRef(null);
+    var table = useRef(null);
+    var grid = useRef(null);
+    var _useState1 = _sliced_to_array(useState(((_main_current = main.current) === null || _main_current === void 0 ? void 0 : _main_current.offsetWidth) || 0), 2), listWidth = _useState1[0], setListWidth = _useState1[1];
+    var _useState2 = _sliced_to_array(useState((((_main_current1 = main.current) === null || _main_current1 === void 0 ? void 0 : _main_current1.offsetHeight) || 0) - rowSize), 2), listHeight = _useState2[0], setListHeight = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(), 2), hoveredRow = _useState3[0], setHoveredRow = _useState3[1]; // TODO: is it used anywhere?
+    var _useData = _sliced_to_array(useData((dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(addIndexToObject)) || undefined), 2), data = _useData[0], setData = _useData[1];
+    var _useState4 = _sliced_to_array(useState(), 2), total = _useState4[0], setTotal = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(providedColumns), 2), columns = _useState5[0], setColumns = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(false), 2), loading = _useState6[0], setLoading = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(), 2), actionsFor = _useState7[0], setActionsFor = _useState7[1];
+    var _useState8 = _sliced_to_array(useState({
+        top: -20,
+        width: 0,
+        transition: ''
+    }), 2), actionsDimensions = _useState8[0], setActionsDimensions = _useState8[1];
+    var collapsed = useSelector(getSearchBarCollapsed);
+    var menuCollapsed = useSelector(function(state) {
+        return state.menuCollapsed;
+    });
+    useEffect(function() {
+        setLoading(loadingDataSource);
+    }, [
+        loadingDataSource
+    ]);
+    var deleteRow = useDeleteRow({
+        deleteMessage: deleteMessage,
+        onDelete: onDelete,
+        setData: setData,
+        data: data
+    });
+    var resizeCol = useGetResizeColumn({
+        columns: columns,
+        setColumns: setColumns
+    });
+    var CellRenderer = useGetCellRenderer({
+        idKey: idKey,
+        columns: columns,
+        // TODO: improve
+        data: data,
+        actions: actions,
+        resizeCol: resizeCol,
+        setHoveredRow: setHoveredRow,
+        hoveredRow: hoveredRow,
+        selected: (typeof selected === "undefined" ? "undefined" : _type_of(selected)) === 'object' ? selected === null || selected === void 0 ? void 0 : selected.id : selected,
+        checked: checked
+    });
+    var RowActions = useRenderRowActions({
+        data: data,
+        actions: actions,
+        deleteRow: deleteRow
+    });
+    var getColumnsWithActions = useCallback(function(updatedColumns) {
+        var newUpdatedColumns = _to_consumable_array(updatedColumns);
+        if (newUpdatedColumns[newUpdatedColumns.length - 1].key === 'akcje') {
+            newUpdatedColumns[newUpdatedColumns.length - 1] = _object_spread_props(_object_spread({}, newUpdatedColumns[newUpdatedColumns.length - 1]), {
+                render: RowActions
+            });
+        } else if (actions.width) {
+            newUpdatedColumns.push({
+                title: 'Akcja',
+                width: actions.width,
+                key: 'akcje',
+                render: RowActions
+            });
+        }
+        return newUpdatedColumns;
+    }, [
+        RowActions,
+        actions
+    ]);
+    var RowCheckbox = useGetRowCheckbox({
+        checked: checked,
+        setChecked: setChecked
+    });
+    var getColumnsWithCheckbox = useGetColumnsWithCheckbox({
+        data: data,
+        checked: checked,
+        RowCheckbox: RowCheckbox
+    });
+    var addCheckboxAndActions = useCallback(function() {
+        var updatedColumns = _to_consumable_array(columns);
+        if (withCheckbox) {
+            updatedColumns = getColumnsWithCheckbox(updatedColumns);
+        }
+        if (!floatingActions && actions && actions.width) {
+            updatedColumns = getColumnsWithActions(updatedColumns);
+        }
+        if (withCheckbox || !floatingActions && actions && actions.width) {
+            // if (JSON.stringify(updatedColumns) !== JSON.stringify(columns)) {
+            setColumns(updatedColumns);
+        // }
+        }
+    }, [
+        getColumnsWithCheckbox,
+        getColumnsWithActions,
+        // columns,
+        withCheckbox,
+        actions,
+        floatingActions
+    ]);
+    useEffect(function() {
+        addCheckboxAndActions();
+    }, [
+        addCheckboxAndActions,
+        checked,
+        data
+    ]);
+    var resizeColumns = useResizeColumns({
+        providedColumns: providedColumns,
+        columns: columns,
+        main: main,
+        floatingActions: floatingActions,
+        actions: actions,
+        setColumns: setColumns,
+        grid: grid
+    });
+    useEffect(function() {
+        resizeColumns();
+    }, [
+        resizeColumns,
+        columns,
+        collapsed,
+        menuCollapsed,
+        listWidth,
+        listHeight
+    ]);
+    useEffect(function() {
+        var _main_current;
+        setListHeight(((_main_current = main.current) === null || _main_current === void 0 ? void 0 : _main_current.offsetHeight) || 0 - rowSize);
+    }, [
+        collapsed
+    ]);
+    var pageSize = usePageSize({
+        mainRef: main,
+        rowSize: rowSize
+    });
+    var handleResize = useCallback(function() {
+        if (main.current) {
+            if (responsive) {
+                setRowSize(main.current.offsetWidth < MOBILE_BREAKPOINT ? ROW_SIZE_MOBILE : ROW_SIZE);
+            }
+            setListWidth(main.current.offsetWidth);
+            setListHeight(main.current.offsetHeight - rowSize);
+        }
+    }, [
+        main
+    ]);
+    useEffect(function() {
+        handleResize();
+    }, [
+        handleResize,
+        menuCollapsed
+    ]);
+    useEffect(function() {
+        if (main.current) {
+            if (responsive) {
+                setRowSize(main.current.offsetWidth < MOBILE_BREAKPOINT ? ROW_SIZE_MOBILE : ROW_SIZE);
+            }
+            setListWidth(main.current.offsetWidth);
+            setListHeight(main.current.offsetHeight - rowSize);
+        }
+        window.removeEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize);
+        return function() {
+            return window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        handleResize
+    ]);
+    useEffect(function() {
+        if (areProvidedColumnsDifferent(providedColumns, columns)) {
+            setColumns(providedColumns);
+        }
+    }, [
+        providedColumns,
+        columns
+    ]);
+    var floatingButtons = useMemo(function() {
+        if (actions) {
+            return _to_consumable_array(actions.floatingOnly || []).concat(_to_consumable_array(actions.buttons || []));
+        }
+        return undefined;
+    }, [
+        actions
+    ]);
+    var fetchPage = useFetchPage({
+        suspend: suspend,
+        setLoading: setLoading,
+        pageSize: pageSize,
+        loadPage: loadPage,
+        filters: filters,
+        // TODO: improve
+        data: data,
+        pinned: pinned,
+        setData: setData,
+        setTotal: setTotal
+    });
+    useLoadDataSource({
+        filters: filters,
+        added: added,
+        data: data,
+        dataSource: dataSource,
+        setData: setData,
+        fetchPage: fetchPage,
+        pageSize: pageSize,
+        loadPage: loadPage
+    });
+    var hide = useCallback(function(e) {
+        if (!actionsFor) {
+            return;
+        }
+        if (e) {
+            e.stopPropagation();
+        }
+        setActionsFor(undefined);
+        setActionsDimensions(_object_spread_props(_object_spread({}, actionsDimensions), {
+            width: 0,
+            transition: ''
+        }));
+    }, [
+        actionsFor,
+        actionsDimensions
+    ]);
+    var scrolled = useCallback(function(param) {
+        var scrollTop = param.scrollTop, clientHeight = param.clientHeight;
+        if (actionsFor) {
+            hide();
+        }
+        if (dataSource !== undefined || loading || data.length === total) {
+            return;
+        }
+        var page = Math.ceil((data.length - ((pinned === null || pinned === void 0 ? void 0 : pinned.length) || 0)) / pageSize());
+        if (scrollTop < clientHeight * (page - 1)) {
+            return;
+        }
+        fetchPage(page);
+    }, [
+        fetchPage,
+        actionsFor,
+        dataSource,
+        data,
+        loading,
+        total,
+        pageSize,
+        hide,
+        pinned === null || pinned === void 0 ? void 0 : pinned.length
+    ]);
+    useEffect(function() {
+        if (loadPage !== undefined) {
+            fetchPage(0);
+        }
+    }, [
+        order
+    ]);
+    useEffect(function() {
+        window.addEventListener('click', hide);
+        return function() {
+            return window.removeEventListener('click', hide);
+        };
+    }, [
+        hide,
+        actionsFor,
+        actionsDimensions
+    ]);
+    var actionHover = useCallback(function() {
+        if (Array.isArray(floatingButtons)) {
+            setActionsDimensions(_object_spread_props(_object_spread({}, actionsDimensions), {
+                width: floatingButtons.length * 24 + (floatingButtons.length - 1) * 28 + (actions.delete ? 53 : 0) + 98 + (actions.additionalWidth || 0),
+                transition: 'width 150ms ease-in-out'
+            }));
+        }
+    }, [
+        actionsDimensions,
+        floatingButtons,
+        actions
+    ]);
+    var actionLeave = useCallback(function() {
+        if (Array.isArray(floatingButtons) && actionsFor) {
+            setActionsDimensions(_object_spread_props(_object_spread({}, actionsDimensions), {
+                width: floatingButtons.length * 24 + (floatingButtons.length - 1) * 28 + (actions.delete ? 53 : 0) + 74
+            }));
+        }
+    }, [
+        actionsFor,
+        actionsDimensions,
+        floatingButtons,
+        actions
+    ]);
+    var isVisibleCellRenderer = useCallback(function(param) {
+        var columnIndex = param.columnIndex, key = param.key, rowIndex = param.rowIndex, cellStyle = param.style, isVisible = param.isVisible, isScrolling = param.isScrolling;
+        if (isVisible) {
+            return /*#__PURE__*/ React.createElement(CellRenderer, {
+                isVisible: isVisible,
+                columnIndex: columnIndex,
+                key: key,
+                rowKey: key,
+                rowIndex: rowIndex,
+                isScrolling: isScrolling,
+                style: cellStyle
+            });
+        }
+        return null;
+    }, [
+        CellRenderer
+    ]);
+    return /*#__PURE__*/ React.createElement(DataTable, {
+        style: style,
+        className: "data-table",
+        ref: main
+    }, ((actions === null || actions === void 0 ? void 0 : actions.both) || floatingActions) && actions ? /*#__PURE__*/ React.createElement(FloatingActions, {
+        actionsDimensions: actionsDimensions,
+        actionsFor: actionsFor,
+        floatingButtons: floatingButtons,
+        actionHover: actionHover,
+        actionLeave: actionLeave,
+        hide: hide,
+        actions: actions
+    }) : undefined, /*#__PURE__*/ React.createElement(DataTableWrapper, null, /*#__PURE__*/ React.createElement(StyledTable, {
+        className: "table",
+        ref: table
+    }, data && /*#__PURE__*/ React.createElement(MultiGrid, {
+        cellRenderer: isVisibleCellRenderer,
+        height: listHeight,
+        width: listWidth,
+        columnWidth: function(param) {
+            var index = param.index;
+            return columns[index].width;
+        },
+        rowHeight: rowSize,
+        fixedRowCount: 1,
+        columnCount: columns.length,
+        rowCount: data.length + 1,
+        overscanRowCount: 22,
+        styleBottomLeftGrid: {
+            outline: 'none'
+        },
+        styleBottomRightGrid: {
+            outline: 'none'
+        },
+        onScroll: scrolled,
+        ref: grid
+    })), data && loading ? /*#__PURE__*/ React.createElement(Spinner, null) : undefined), !data ? /*#__PURE__*/ React.createElement("div", {
+        className: "data-table-no-data"
+    }, loading ? /*#__PURE__*/ React.createElement(Spin, null) : /*#__PURE__*/ React.createElement(Empty, {
+        description: "Brak danych"
+    })) : undefined);
+}
+function Table(props) {
+    return /*#__PURE__*/ React.createElement(OrderProvider, null, /*#__PURE__*/ React.createElement(BaseTable, props));
+}
+export default Table;

package/dist/src/components/Table/addIndexToObject.js

@@ -0,0 +1,57 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+export default function addIndexToObject(e, i) {
+    return _object_spread_props(_object_spread({}, e), {
+        index: i + 1
+    });
+}

package/dist/src/components/Table/areProvidedColumnsDifferent.js

@@ -0,0 +1,19 @@
+export default function areProvidedColumnsDifferent(providedColumns, currentColumns) {
+    var providedKeys = providedColumns.map(function(c) {
+        return String(c.key).toLowerCase();
+    });
+    var currentKeys = currentColumns.map(function(c) {
+        return String(c.key).toLowerCase();
+    });
+    var currentHasActions = currentKeys.includes('akcje');
+    var providedHasActions = providedKeys.includes('akcje');
+    var currentHasCheckbox = currentKeys.includes('checkbox');
+    var providedHasCheckbox = providedKeys.includes('checkbox');
+    var providedKeysWithAdditional = providedKeys.concat(currentHasActions && !providedHasActions ? [
+        'akcje'
+    ] : []);
+    if (currentHasCheckbox && !providedHasCheckbox) {
+        providedKeysWithAdditional.unshift('checkbox');
+    }
+    return JSON.stringify(providedKeysWithAdditional) !== JSON.stringify(currentKeys);
+}

package/dist/src/components/Table/clicked.js

@@ -0,0 +1,12 @@
+import { displayActions } from './displayActions';
+var clicked = function(e, row, type) {
+    if (type === 0) {
+        // Left-click
+        if (actionsFor) hide();
+        else if (withCheckbox) onChecked(row, checked.indexOf(row) === -1);
+    } else if (type === 1) {
+        var _actions;
+        // Right-click
+        if (((_actions = actions) === null || _actions === void 0 ? void 0 : _actions.both) || floatingActions) displayActions(e, row);
+    }
+};

package/dist/src/components/Table/displayActions.js

@@ -0,0 +1,11 @@
+// TODO: remove?
+import { ROW_SIZE } from './index';
+export default function displayActions(e, row) {
+    if (actionsFor) e.stopPropagation();
+    setActionsFor(row);
+    setActionsDimensions({
+        top: (data ? (ROW_SIZE + 1) * data.indexOf(row) - 50 : -50) - wrapper.current.scrollTop,
+        width: floatingButtons.length * 24 + (floatingButtons.length - 1) * 28 + (actions.delete ? 53 : 0) + 74,
+        transition: actionsFor ? 'top 150ms ease-in-out' : undefined
+    });
+}