@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/list/Grid/DiagramColumnMockView.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useBem_1 = __importDefault(require("../../../../src/hooks/useBem"));
+var DiagramType;
+(function (DiagramType) {
+    DiagramType["HORIZONTAL"] = "horizontal";
+    DiagramType["VERTICAL"] = "vertical";
+    DiagramType["CIRCLE"] = "circle";
+})(DiagramType || (DiagramType = {}));
+function DiagramColumnView(props) {
+    var _a, _b, _c, _d, _e, _f;
+    var bem = (0, useBem_1["default"])('DiagramColumnView');
+    var isHorizontal = ((_a = props.diagram) === null || _a === void 0 ? void 0 : _a.type) === DiagramType.HORIZONTAL;
+    var isVertical = ((_b = props.diagram) === null || _b === void 0 ? void 0 : _b.type) === DiagramType.VERTICAL;
+    var isCircle = ((_c = props.diagram) === null || _c === void 0 ? void 0 : _c.type) === DiagramType.CIRCLE;
+    var getItemData = function (item) { return ({
+        itemPercentage: props.item[item === null || item === void 0 ? void 0 : item.percentageAttribute],
+        itemColor: item === null || item === void 0 ? void 0 : item.color
+    }); };
+    var renderDiagram = function (diagramItems, hasPercentSign, hasSubtitle, fillingProperty) {
+        var _a;
+        if (fillingProperty === void 0) { fillingProperty = ''; }
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+                size: props.size,
+                type: (_a = props.diagram) === null || _a === void 0 ? void 0 : _a.type
+            })) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('wrapper') }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('wrapper-diagrams') }, { children: diagramItems.map(function (item, itemIndex) {
+                            var _a;
+                            var _b;
+                            var _c = getItemData(item), itemColor = _c.itemColor, itemPercentage = _c.itemPercentage;
+                            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('diagram', {
+                                    type: (_b = props.diagram) === null || _b === void 0 ? void 0 : _b.type
+                                }) }, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: bem.element('diagram-percentage') }, { children: [itemPercentage, hasPercentSign && ' %'] })), (0, jsx_runtime_1.jsx)("div", { className: bem.element('diagram-filling', {
+                                            color: itemColor
+                                        }), style: (_a = {},
+                                            _a[fillingProperty] = "".concat(itemPercentage, "%"),
+                                            _a) })] }), itemIndex));
+                        }) })), hasSubtitle && ((0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('subtitle') }, { children: props.item[props.subtitleAttribute] })))] })) })));
+    };
+    if (isHorizontal) {
+        return (renderDiagram((_d = props.diagram) === null || _d === void 0 ? void 0 : _d.items, true, false, 'width'));
+    }
+    if (isVertical) {
+        return (renderDiagram((_e = props.diagram) === null || _e === void 0 ? void 0 : _e.items, true, false, 'height'));
+    }
+    if (isCircle) {
+        return (renderDiagram((_f = props.diagram) === null || _f === void 0 ? void 0 : _f.items, false, !!props.subtitleAttribute));
+    }
+    return null;
+}
+exports["default"] = DiagramColumnView;

package/tests/ui/list/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/list/Grid/Grid.test.js

@@ -0,0 +1,364 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var react_1 = require("@testing-library/react");
+var CheckboxColumnMockView_1 = __importDefault(require("./CheckboxColumnMockView"));
+var ContentColumnMockView_1 = __importDefault(require("./ContentColumnMockView"));
+var DiagramColumnMockView_1 = __importDefault(require("./DiagramColumnMockView"));
+var GridMockView_1 = __importDefault(require("./GridMockView"));
+var InputField_1 = __importDefault(require("../../../../src/ui/form/InputField/InputField"));
+var Grid_1 = __importDefault(require("../../../../src/ui/list/Grid/Grid"));
+var helpers_1 = require("../../../helpers");
+describe('Grid tests', function () {
+    var expectedGridClass = 'GridView';
+    var expectedContentColumnClass = 'ContentColumnView';
+    var expectedColumnsCount = 1;
+    var item = {
+        id: 1,
+        name: 'Ivan',
+        secondName: 'Ivanov',
+        icon: 'mockIcon',
+        url: 'https://kozhindev.com',
+        pic: 'https://i.ibb.co/ZSSgW75/image-9.jpg'
+    };
+    var items = [
+        item,
+    ];
+    var props = {
+        items: items,
+        view: GridMockView_1["default"],
+        hasAlternatingColors: true,
+        size: 'md'
+    };
+    it('should be in the document', function () {
+        var columns = [{
+                label: 'Name',
+                attribute: 'name'
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { columns: columns, listId: 'test1' }))).container;
+        var grid = (0, helpers_1.getElementByClassName)(container, expectedGridClass);
+        var columnElements = container.querySelectorAll(".".concat(expectedGridClass, "__column"));
+        expect(grid).toBeInTheDocument();
+        expect(columnElements.length).toBe(expectedColumnsCount);
+    });
+    it('should have correct classes', function () {
+        var columns = [{
+                label: 'Name',
+                attribute: 'name'
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test2', columns: columns }))).container;
+        var gridSize = (0, helpers_1.getElementByClassName)(container, "".concat(expectedGridClass, "_size_md"));
+        var alternatingColors = (0, helpers_1.getElementByClassName)(container, "".concat(expectedGridClass, "_alternatingColors"));
+        expect(gridSize).toBeInTheDocument();
+        expect(alternatingColors).toBeInTheDocument();
+    });
+    it('should be checkbox column', function () {
+        var columns = [{
+                label: 'Checkbox',
+                attribute: 'name',
+                valueView: CheckboxColumnMockView_1["default"]
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test3', columns: columns }))).container;
+        var expectedCheckboxFieldClass = 'CheckboxFieldView';
+        var checkboxField = (0, helpers_1.getElementByClassName)(container, expectedCheckboxFieldClass);
+        expect(checkboxField).toBeInTheDocument();
+    });
+    it('should be icon column', function () {
+        var columns = [{
+                label: 'Icon',
+                icon: {
+                    attribute: 'icon',
+                    isLeft: true
+                },
+                valueView: ContentColumnMockView_1["default"]
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test4', columns: columns }))).container;
+        var iconColumns = container.querySelectorAll(".".concat(expectedContentColumnClass, "__icon"));
+        expect(iconColumns.length).toBe(expectedColumnsCount);
+    });
+    it('should be link column', function () {
+        var columns = [{
+                label: 'Link',
+                link: {
+                    attribute: 'name',
+                    urlAttribute: 'url'
+                },
+                valueView: ContentColumnMockView_1["default"]
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test5', columns: columns }))).container;
+        var linkColumn = (0, helpers_1.getElementByClassName)(container, "".concat(expectedContentColumnClass, "__link"));
+        expect(linkColumn).toBeInTheDocument();
+        expect(linkColumn).toHaveAttribute('href', item.url);
+    });
+    it('should be subtitle column', function () {
+        var columns = [{
+                label: 'Subtitle',
+                attribute: 'name',
+                subtitleAttribute: 'secondName',
+                valueView: ContentColumnMockView_1["default"]
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test6', columns: columns }))).container;
+        var columnValue = (0, helpers_1.getElementByClassName)(container, "".concat(expectedContentColumnClass, "__value"));
+        var columnSubtitle = (0, helpers_1.getElementByClassName)(container, "".concat(expectedContentColumnClass, "__subtitle"));
+        expect(columnValue).toBeInTheDocument();
+        expect(columnSubtitle).toBeInTheDocument();
+    });
+    it('should be picture column', function () {
+        var columns = [{
+                label: 'With picture left',
+                attribute: 'name',
+                picture: {
+                    attribute: 'pic',
+                    isLeft: true
+                },
+                valueView: ContentColumnMockView_1["default"]
+            }];
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test7', columns: columns }))).container;
+        var pictureColumn = (0, helpers_1.getElementByClassName)(container, "".concat(expectedContentColumnClass, "__picture"));
+        var isLeftContent = (0, helpers_1.getElementByClassName)(container, "".concat(expectedContentColumnClass, "_isLeft"));
+        expect(pictureColumn).toBeInTheDocument();
+        expect(isLeftContent).toBeInTheDocument();
+    });
+    it('should have other props', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var paginationItems, columns, searchForm, _a, container, getByText, rerender, indexingHead, searchFormElement;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    paginationItems = [
+                        {
+                            id: 1,
+                            name: 'Max'
+                        },
+                        {
+                            id: 2,
+                            name: 'Eva'
+                        },
+                        {
+                            id: 3,
+                            name: 'Sam'
+                        },
+                    ];
+                    columns = [{
+                            attribute: 'name'
+                        }];
+                    searchForm = {
+                        layout: 'table',
+                        fields: [
+                            {
+                                label: 'Name',
+                                attribute: 'name',
+                                component: InputField_1["default"]
+                            },
+                        ]
+                    };
+                    _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test8', columns: columns, items: paginationItems, itemsIndexing: true, searchForm: searchForm, pagination: true, paginationSize: {
+                            enable: false,
+                            defaultValue: 2,
+                            sizes: [1, 2, 3]
+                        } }))), container = _a.container, getByText = _a.getByText, rerender = _a.rerender;
+                    indexingHead = getByText('№');
+                    searchFormElement = (0, helpers_1.getElementByClassName)(container, 'InputFieldView');
+                    expect(indexingHead).toBeInTheDocument();
+                    expect(searchFormElement).toBeInTheDocument();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            var pagination = (0, helpers_1.getElementByClassName)(container, 'PaginationButtonView');
+                            expect(pagination).toBeInTheDocument();
+                        })];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('should be diagram column', function () {
+        var expectedDiagramColumnClassName = 'DiagramColumnView';
+        it('should be horizontal diagrams', function () {
+            var horizontalItems = [
+                {
+                    id: 1,
+                    percentage: 50
+                },
+                {
+                    id: 2,
+                    percentage: 30
+                },
+            ];
+            var horizontalColumns = [
+                {
+                    label: 'Horizontal',
+                    valueView: 'DiagramColumnView',
+                    diagram: {
+                        type: 'horizontal',
+                        items: [
+                            {
+                                color: 'secondary',
+                                percentageAttribute: 'percentage'
+                            },
+                        ]
+                    }
+                },
+            ];
+            var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { items: horizontalItems, columns: horizontalColumns, valueView: DiagramColumnMockView_1["default"], listId: 'test9' }))).container;
+            var diagrams = container.querySelectorAll(".".concat(expectedDiagramColumnClassName));
+            expect(diagrams.length).toBe(horizontalItems.length);
+            diagrams.forEach(function (diagram) {
+                expect(diagram).toHaveClass("".concat(expectedDiagramColumnClassName, "_type_horizontal"));
+            });
+        });
+        it('should be vertical diagrams', function () {
+            var verticalItems = [
+                {
+                    id: 1,
+                    health: 25,
+                    hunger: 35,
+                    damage: 45,
+                    mana: 55
+                },
+                {
+                    id: 2,
+                    health: 25,
+                    hunger: 35,
+                    damage: 45,
+                    mana: 55
+                },
+            ];
+            var verticalColumns = [
+                {
+                    label: 'Vertical',
+                    valueView: 'DiagramColumnView',
+                    diagram: {
+                        type: 'vertical',
+                        items: [
+                            {
+                                color: 'success',
+                                percentageAttribute: 'health'
+                            },
+                            {
+                                color: 'warning',
+                                percentageAttribute: 'hunger'
+                            },
+                            {
+                                color: 'danger',
+                                percentageAttribute: 'damage'
+                            },
+                            {
+                                color: 'secondary',
+                                percentageAttribute: 'mana'
+                            },
+                        ]
+                    }
+                },
+            ];
+            var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { items: verticalItems, columns: verticalColumns, valueView: DiagramColumnMockView_1["default"], listId: 'test10' }))).container;
+            var diagrams = container.querySelectorAll(".".concat(expectedDiagramColumnClassName));
+            expect(diagrams.length).toBe(verticalItems.length);
+            diagrams.forEach(function (diagram) {
+                expect(diagram).toHaveClass("".concat(expectedDiagramColumnClassName, "_type_vertical"));
+            });
+        });
+        it('should be circle diagrams', function () {
+            var circleItems = [
+                {
+                    id: 1,
+                    name: 'John',
+                    health: 25,
+                    hunger: 35,
+                    damage: 45,
+                    mana: 55
+                },
+                {
+                    id: 2,
+                    name: 'John',
+                    health: 25,
+                    hunger: 35,
+                    damage: 45,
+                    mana: 55
+                },
+            ];
+            var circleColumns = [
+                {
+                    label: 'Circle with subtitle',
+                    valueView: 'DiagramColumnView',
+                    diagram: {
+                        type: 'circle',
+                        items: [
+                            {
+                                color: 'success',
+                                percentageAttribute: 'health'
+                            },
+                            {
+                                color: 'warning',
+                                percentageAttribute: 'hunger'
+                            },
+                            {
+                                color: 'danger',
+                                percentageAttribute: 'damage'
+                            },
+                            {
+                                color: 'secondary',
+                                percentageAttribute: 'mana'
+                            },
+                        ]
+                    },
+                    subtitleAttribute: 'name'
+                },
+            ];
+            var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Grid_1["default"], __assign(__assign({}, props), { listId: 'test11', items: circleItems, columns: circleColumns, valueView: DiagramColumnMockView_1["default"] }))).container;
+            var diagrams = container.querySelectorAll(".".concat(expectedDiagramColumnClassName));
+            expect(diagrams.length).toBe(circleItems.length);
+            diagrams.forEach(function (diagram) {
+                expect(diagram).toHaveClass("".concat(expectedDiagramColumnClassName, "_type_circle"));
+            });
+        });
+    });
+});

package/tests/ui/list/Grid/GridMockView.d.ts

@@ -0,0 +1,3 @@
+import { IGridViewProps } from '../../../../src/ui/list/Grid/Grid';
+export declare const getFormId: (props: any) => any;
+export default function GridView(props: IGridViewProps): any;

package/tests/ui/list/Grid/GridMockView.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getFormId = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var get_1 = __importDefault(require("lodash-es/get"));
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var keyBy_1 = __importDefault(require("lodash-es/keyBy"));
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Button_1 = __importDefault(require("../../../../src/ui/form/Button"));
+var Field_1 = __importDefault(require("../../../../src/ui/form/Field"));
+var getFormId = function (props) { return (0, get_1["default"])(props, 'searchForm.formId', props.listId); };
+exports.getFormId = getFormId;
+function GridView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('GridView');
+    var renderInsideSearchForm = (0, react_1.useCallback)(function () {
+        if (!props.searchForm || !props.searchForm.fields || props.searchForm.layout !== 'table') {
+            return null;
+        }
+        var fields = (0, keyBy_1["default"])(props.searchForm.fields.map(function (column) { return (0, isString_1["default"])(column) ? {
+            attribute: column
+        } : column; }), 'attribute');
+        return ((0, jsx_runtime_1.jsx)("tr", { children: props.columns.map(function (column, columnIndex) {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)("td", __assign({ className: column.headerClassName }, { children: column.attribute && fields[column.attribute] && ((0, jsx_runtime_1.jsx)(Field_1["default"], __assign({ size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute]))) }), columnIndex));
+            }) }));
+    }, [props.searchForm, props.columns]);
+    var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {
+        var _a;
+        var sortKey = (direction === 'desc' ? '-' : '') + attribute;
+        var isActive = [].concat(((_a = props.list) === null || _a === void 0 ? void 0 : _a.sort) || []).includes(sortKey);
+        return ((0, jsx_runtime_1.jsx)(Button_1["default"], { icon: direction === 'asc' ? 'long-arrow-alt-up' : 'long-arrow-alt-down', className: bem.element('sort-button', {
+                'is-active': isActive
+            }), link: true, onClick: function (e) {
+                e.preventDefault();
+                props.onSort(!isActive ? sortKey : null);
+            } }));
+    }, [bem, props]);
+    var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
+    return props.renderList((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading),
+            size: props.size,
+            alternatingColors: props.hasAlternatingColors
+        }), props.className) }, { children: [props.renderSearchForm(), props.renderPaginationSize(), (0, jsx_runtime_1.jsxs)("table", __assign({ className: bem.element('table') }, { children: [(0, jsx_runtime_1.jsxs)("thead", { children: [(0, jsx_runtime_1.jsx)("tr", { children: props.columns.map(function (column, columnIndex) { return ((0, jsx_runtime_1.jsxs)("th", __assign({ className: column.headerClassName }, { children: [column.label, column.sortable && column.attribute && ((0, jsx_runtime_1.jsxs)("span", { children: [column.label && (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }), renderSortButton(column.attribute, 'asc'), renderSortButton(column.attribute, 'desc')] }))] }), columnIndex)); }) }), renderInsideSearchForm()] }), (0, jsx_runtime_1.jsxs)("tbody", { children: [props.items && props.items.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)("tr", { children: props.columns.map(function (column, columnIndex) { return ((0, jsx_runtime_1.jsx)("td", __assign({ className: bem(bem.element('column'), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, { children: props.renderValue(item, column) }), columnIndex)); }) }, item[props.primaryKey] || rowIndex)); }), emptyContent && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", __assign({ colSpan: props.columns.length }, { children: emptyContent })) }))] })] })), props.renderPagination()] })));
+}
+exports["default"] = GridView;

package/tests/ui/list/List/List.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/list/List/List.test.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+var react_1 = require("@testing-library/react");
+var ListMockView_1 = __importDefault(require("./ListMockView"));
+var InputField_1 = __importDefault(require("../../../../src/ui/form/InputField/InputField"));
+var List_1 = __importDefault(require("../../../../src/ui/list/List/List"));
+var helpers_1 = require("../../../helpers");
+var items = [
+    {
+        id: 1,
+        name: 'Ivan'
+    },
+    {
+        id: 2,
+        name: 'Petr'
+    },
+];
+var searchForm = {
+    className: 'class-test',
+    style: {
+        fontSize: '4rem'
+    },
+    fields: [
+        {
+            attribute: 'name',
+            component: InputField_1["default"]
+        },
+    ]
+};
+describe('searchForm tests', function () {
+    var propsList = {
+        view: ListMockView_1["default"],
+        listId: 'ListDemoSearch',
+        items: items,
+        searchForm: searchForm,
+        pagination: {
+            position: 'mockPosition'
+        },
+        className: 'list-group',
+        itemView: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'list-group-item' }, { children: (0, jsx_runtime_1.jsx)("div", { children: props.item.name }) }))); }
+    };
+    var expectedSearchFormClass = 'FormView';
+    var expectedInputFieldClass = 'InputFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(List_1["default"], propsList)).container;
+        var SearchForm = (0, helpers_1.getElementByClassName)(container, expectedSearchFormClass);
+        expect(SearchForm).toBeInTheDocument();
+    });
+    it('should have correct className and style', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(List_1["default"], propsList)).container;
+        var SearchForm = (0, helpers_1.getElementByClassName)(container, expectedSearchFormClass);
+        expect(SearchForm).toHaveClass(searchForm.className);
+        expect(SearchForm).toHaveStyle(searchForm.style);
+    });
+    it('should have correct fields count', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(List_1["default"], propsList)).container;
+        var fieldsCount = container.querySelectorAll(".".concat(expectedInputFieldClass)).length;
+        expect(fieldsCount).toBe(searchForm.fields.length);
+    });
+    it('should must be correct filtered items', function () {
+        var nameToFilter = items[0].name;
+        var nameToRemove = items[1].name;
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(List_1["default"], propsList)), container = _a.container, getByText = _a.getByText, queryByText = _a.queryByText;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        var button = (0, helpers_1.getElementByTag)(container, 'button');
+        var itemToRemove = getByText(nameToRemove);
+        expect(itemToRemove).toBeInTheDocument();
+        react_1.fireEvent.change(input, {
+            target: {
+                value: nameToFilter
+            }
+        });
+        react_1.fireEvent.click(button);
+        (0, react_1.waitFor)(function () {
+            expect(queryByText(nameToRemove)).not.toBeInTheDocument();
+        });
+    });
+});

package/tests/ui/list/List/ListMockView.d.ts

@@ -0,0 +1,2 @@
+import { IListViewProps } from '../../../../src/ui/list/List/List';
+export default function ListView(props: IListViewProps): any;

package/tests/ui/list/List/ListMockView.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../../../src/hooks");
+function ListView(props) {
+    var bem = (0, hooks_1.useBem)('ListView');
+    if (!props.list) {
+        return null;
+    }
+    var renderPagination = function (pagination, paginationSize, layout) {
+        if (!pagination && !paginationSize && !layout) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('pagination') }, { children: [pagination && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('pagination-button') }, { children: pagination }))), paginationSize && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('pagination-sizes') }, { children: paginationSize }))), layout && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('pagination-layout') }, { children: layout })))] })));
+    };
+    return props.renderList((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            loading: props.isLoading || props.list.isLoading
+        }), props.className) }, { children: [props.renderSearchForm(), renderPagination(['top', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['top', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['top', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()), (0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.element('content'), props.contentClassName) }, { children: props.content })), renderPagination(['bottom', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['bottom', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['bottom', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()), props.renderEmpty()] })));
+}
+exports["default"] = ListView;

package/tests/ui/list/Pagination/Pagination.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';