@uxf/data-grid 11.0.0-beta.2 → 11.0.0-beta.21

package/styles.css

@@ -0,0 +1,605 @@
+@import url("react-data-grid/lib/styles.css");
+
+@layer rdg.Root {
+    .uxf-data-grid__table {
+        --rdg-color-scheme: light;
+        --rdg-color: theme("colors.lightHigh");
+        --rdg-border-color: theme("colors.lightBorder");
+        --rdg-summary-border-color: theme("colors.lightBorder");
+        --rdg-background-color: theme("colors.white");
+        --rdg-header-background-color: theme("colors.gray.50");
+        --rdg-row-hover-background-color: theme("colors.gray.50");
+        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
+        --rdg-row-selected-hover-background-color: theme("colors.gray.200/.75");
+        --rdg-selection-color: theme("colors.lightBorder");
+        --rdg-font-size: 14px;
+
+        :root .dark & {
+            --rdg-color-scheme: dark;
+            --rdg-color: theme("colors.darkHigh");
+            --rdg-border-color: theme("colors.darkBorder");
+            --rdg-summary-border-color: theme("colors.darkBorder");
+            --rdg-background-color: theme("colors.gray.950");
+            --rdg-header-background-color: theme("colors.gray.900");
+            --rdg-row-hover-background-color: theme("colors.gray.950");
+            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
+            --rdg-row-selected-hover-background-color: theme("colors.gray.800/.75");
+            --rdg-selection-color: theme("colors.darkBorder");
+            --rdg-font-size: 14px;
+        }
+    }
+}
+
+.uxf-data-grid {
+    border: 1px solid var(--rdg-border-color);
+    border-radius: theme("borderRadius.DEFAULT");
+
+    &.no-border {
+        border-style: none;
+    }
+
+    &__action-cell {
+        background-color: var(--rdg-background-color);
+        border-inline-start: 1px solid var(--rdg-border-color);
+        position: sticky;
+        right: 0;
+    }
+
+    &__action-cell-wrapper {
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
+
+        .uxf-icon {
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
+        }
+    }
+
+    &__body-cell {
+        &--boolean {
+            align-items: center;
+            display: flex;
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &__drawer {
+        @apply ease-in-out;
+
+        background-color: theme("colors.gray.900/.25");
+        inset: 0;
+        overflow: hidden;
+        position: fixed;
+        z-index: theme("zIndex.modal");
+
+        :root .dark & {
+            background-color: theme("colors.gray.900/.75");
+        }
+
+        &--open {
+            @apply transition-opacity duration-500;
+
+            opacity: 100;
+            transform: translateX(0);
+        }
+
+        &--closed {
+            @apply transition-all delay-500;
+
+            opacity: 0;
+            transform: translateX(100%);
+        }
+
+        &-body-wrapper {
+            @apply transition-all duration-500 ease-in-out;
+
+            background-color: theme("colors.white");
+            box-shadow: theme("boxShadow.xl");
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            position: absolute;
+            right: 0;
+            transform: translateX(100%);
+            width: theme("width.11/12");
+
+            &--open {
+                transform: translateX(0);
+            }
+        }
+
+        &-body {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            overflow-y: scroll;
+            padding-bottom: theme("spacing.10");
+            position: relative;
+            width: 100%;
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+                color: theme("colors.gray.100");
+            }
+        }
+
+        &-close-button {
+            margin-left: auto;
+            margin-right: theme("spacing.4");
+            margin-top: theme("spacing.4") !important;
+        }
+
+        &-header {
+            font-weight: theme("fontWeight.bold");
+            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
+        }
+
+        &-content {
+            padding: theme("spacing.4");
+        }
+
+        &-backdrop {
+            cursor: pointer;
+            height: 100%;
+            width: 100vw;
+        }
+    }
+
+    &__fallback {
+        align-items: center;
+        color: theme("colors.gray.600"); /* ?? */
+        display: flex;
+        grid-column: 1/-1;
+        justify-content: center;
+        text-align: center;
+    }
+
+    &__filter {
+        &--date {
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        &--interval {
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: 1fr min-content 1fr;
+
+            .uxf-data-grid__filter-gap {
+                align-items: center;
+                display: flex;
+                padding-top: theme("spacing.5");
+            }
+        }
+    }
+
+    &__filters {
+        @apply space-y-4;
+    }
+
+    &__filter-list {
+        @apply space-x-2;
+
+        padding: theme("spacing.2");
+    }
+
+    &__footer {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.4");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
+
+        &.no-border {
+            padding-inline: 0;
+        }
+    }
+
+    &__linear-progress {
+        border-radius: 20px;
+        height: 3px;
+        left: 0;
+        overflow: hidden;
+        position: absolute;
+        right: 0;
+        z-index: 1;
+
+        &.is-loading::before {
+            animation: datagridlineanim 1s linear infinite;
+            background-color: theme("colors.dataGridSecondary");
+            border-radius: inherit;
+            content: "";
+            height: 3px;
+            left: -50%;
+            position: absolute;
+            width: 40%;
+        }
+    }
+
+    &__linear-progress-wrapper {
+        position: relative;
+    }
+
+    &__pagination-counts {
+        @apply text-sm;
+
+        color: theme("colors.lightLow");
+    }
+
+    &__plugin-fulltext {
+        color: theme("colors.gray.400");
+        margin: theme("spacing.2") 0;
+        width: 100%;
+
+        @screen sm {
+            width: auto;
+        }
+
+        .uxf-icon {
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
+        }
+    }
+
+    &__plugin-button {
+        flex-shrink: 0;
+        margin: theme("spacing.2") 0;
+
+        .uxf-icon {
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
+        }
+    }
+
+    &__rows-per-page {
+        @apply text-sm;
+
+        align-items: center;
+        color: theme("colors.lightLow");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
+
+        .uxf-select {
+            width: theme("width.28");
+        }
+    }
+
+    &__select-row-checkbox-wrapper {
+        align-items: center;
+        color: theme("colors.white");
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+    }
+
+    &__selected-rows-toolbar-wrapper {
+        align-items: center;
+        bottom: theme("spacing.8");
+        display: flex;
+        justify-content: center;
+        left: 0;
+        pointer-events: none;
+        position: fixed;
+        right: 0;
+        z-index: theme("zIndex.fixed");
+    }
+
+    &__selected-rows-toolbar {
+        @apply text-sm drop-shadow-xl;
+
+        align-items: center;
+        background-color: theme("colors.dataGridPrimary");
+        border: 1px solid theme("colors.lightBorder");
+        border-radius: 999px;
+        color: theme("colors.white");
+        display: flex;
+        justify-content: center;
+        padding: theme("spacing.2") theme("spacing.6");
+        pointer-events: auto;
+
+        :root .dark & {
+            border-color: theme("colors.darkBorder");
+        }
+    }
+
+    &__selected-rows-toolbar-actions {
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        padding-left: theme("spacing.4");
+    }
+
+    &__table {
+        &::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: theme("colors.lightLow");
+            border-radius: 999px;
+
+            :root .dark & {
+                background-color: theme("colors.darkLow");
+            }
+        }
+    }
+
+    &__toolbar {
+        align-items: center;
+        border-bottom: 1px solid theme("colors.lightBorder");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
+
+        &.no-border {
+            padding-right: 0;
+        }
+
+        :root .dark & {
+            border-bottom-color: theme("colors.darkBorder");
+        }
+
+        @screen md {
+            padding-block: 0;
+            padding-left: 0;
+        }
+    }
+
+    &__toolbar-tab {
+        @apply text-sm;
+
+        align-items: center;
+        border-bottom: 2px solid transparent;
+        color: theme("colors.lightMedium");
+        display: inline-flex;
+        font-weight: theme("fontWeight.medium");
+        padding: theme("spacing.4");
+        white-space: nowrap;
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
+        }
+
+        &.is-active {
+            border-bottom-color: currentcolor;
+            color: theme("colors.dataGridPrimary");
+        }
+    }
+
+    &__toolbar-tabs {
+        align-self: stretch;
+        display: flex;
+        flex: 1;
+
+        &-nav {
+            &--desktop {
+                @apply space-x-4;
+
+                display: none;
+                margin-bottom: -1px;
+
+                @screen md {
+                    display: flex;
+                }
+            }
+
+            &--mobile {
+                align-items: center;
+                display: flex;
+                width: max-content;
+                z-index: theme("zIndex.10");
+
+                @screen md {
+                    display: none;
+                }
+
+                .uxf-data-grid__toolbar-tabs-button {
+                    align-items: center;
+                    display: flex;
+                    margin: 0;
+
+                    &-icon {
+                        color: theme("colors.lightHigh");
+                        margin-left: theme("spacing.1");
+
+                        :root .dark & {
+                            color: theme("colors.darkHigh");
+                        }
+                    }
+                }
+            }
+
+            &-text {
+                color: theme("colors.lightHigh");
+
+                :root .dark & {
+                    color: theme("colors.darkHigh");
+                }
+            }
+        }
+
+        &-modal-content {
+            @apply divide-lightBorder dark:divide-darkBorder divide-y;
+
+            align-items: flex-start;
+            display: flex;
+            flex-direction: column;
+            padding-bottom: theme("spacing.4");
+            padding-top: theme("spacing.1");
+            text-align: left;
+        }
+
+        &-modal-button {
+            border-radius: 0;
+            justify-content: flex-start;
+            width: 100%;
+        }
+
+        &-modal-button-text {
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
+        }
+
+        &-modal-active-tab-icon {
+            color: theme("colors.lightMedium");
+            margin-right: theme("spacing.3");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
+        }
+    }
+
+    &__toolbar-control {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        justify-content: space-between;
+        order: 3;
+        width: 100%;
+
+        @screen xs {
+            order: 2;
+            width: auto;
+        }
+    }
+
+    &__toolbar-customs {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        order: 2;
+
+        @screen xs {
+            order: 2;
+        }
+
+        @screen md {
+            margin-block: theme("spacing.2");
+        }
+
+        &-mobile {
+            display: flex;
+
+            @screen md {
+                display: none;
+            }
+        }
+
+        &-desktop {
+            display: none;
+
+            @screen md {
+                display: flex;
+                gap: theme("spacing.2");
+            }
+        }
+    }
+}
+
+/* TODO: tohle je imo k ničemu, že Vejvis? */
+
+/* .rdg-cell.action {
+    align-items: center;
+    border-right: 0;
+    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
+    display: flex;
+    justify-content: center;
+    position: sticky;
+    right: 0;
+    text-align: right;
+} */
+
+.rdg-header-row {
+    color: theme("colors.lightLow");
+    font-weight: theme("fontWeight.normal");
+
+    :root .dark & {
+        color: theme("colors.darkLow");
+    }
+
+    .rdg-cell {
+        background-color: var(--rdg-header-background-color);
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--rdg-border-color);
+        }
+    }
+}
+
+.rdg-header-sort-name + span {
+    align-items: center;
+    display: flex;
+}
+
+.rdg-cell {
+    border-block-end-width: 1px;
+    border-color: var(--rdg-border-color);
+    border-inline-end: none;
+
+    &.rdg-cell-frozen {
+        box-shadow: none;
+    }
+}
+
+@keyframes datagridlineanim {
+    0% {
+        left: -40%;
+    }
+
+    50% {
+        left: 20%;
+        width: 80%;
+    }
+
+    100% {
+        left: 100%;
+        width: 100%;
+    }
+}

package/table/components/action-cell-wrapper.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function ActionCellWrapper(props: PropsWithChildren): React.JSX.Element;

package/table/components/{action-cell-base.js → action-cell-wrapper.js}

@@ -23,11 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionCellBase = exports.ActionCellWrapper = void 0;
-const button_1 = require("@uxf/ui/button");
-const icon_1 = require("@uxf/ui/icon");
+exports.ActionCellWrapper = void 0;
 const react_1 = __importStar(require("react"));
-const ActionCellWrapper = (props) => {
+function ActionCellWrapper(props) {
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         var _a;
@@ -56,29 +54,5 @@ const ActionCellWrapper = (props) => {
         };
     }, []);
     return (react_1.default.createElement("div", { className: "uxf-data-grid__action-cell-wrapper", ref: innerRef }, props.children));
-};
+}
 exports.ActionCellWrapper = ActionCellWrapper;
-const Button = (props) => {
-    if (props.getUrl) {
-        const href = props.getUrl(props.row);
-        if (!href) {
-            return null;
-        }
-        return (react_1.default.createElement(button_1.Button, { href: href, title: props.title, variant: "white", size: "sm", isIconButton: true },
-            react_1.default.createElement(icon_1.Icon, { name: props.icon })));
-    }
-    if (props.onClick) {
-        return (react_1.default.createElement(button_1.Button, { variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.row); }, isIconButton: true },
-            react_1.default.createElement(icon_1.Icon, { name: props.icon })));
-    }
-    return null;
-};
-const ActionCellBase = (props) => {
-    const onRemove = props.onRemove;
-    const handleRemove = onRemove ? () => onRemove(props.row, props.reload) : undefined;
-    return (react_1.default.createElement(exports.ActionCellWrapper, null,
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" }),
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onEdit, getUrl: props.getEditUrl, icon: "pen", title: "Upravit" }),
-        react_1.default.createElement(Button, { row: props.row, onClick: handleRemove, getUrl: undefined, icon: "trash", title: "Smazat" })));
-};
-exports.ActionCellBase = ActionCellBase;

package/table/components/action-cell.d.ts

@@ -0,0 +1,7 @@
+import { ButtonListProps } from "@uxf/ui/button-list";
+import React from "react";
+export interface ActionCellProps {
+    buttons: ButtonListProps["buttons"];
+    visibleButtonsCount: ButtonListProps["visibleButtonsCount"];
+}
+export declare function ActionCell(props: ActionCellProps): React.JSX.Element;

package/table/components/action-cell.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = void 0;
+const button_list_1 = require("@uxf/ui/button-list");
+const react_1 = __importDefault(require("react"));
+const action_cell_wrapper_1 = require("./action-cell-wrapper");
+function ActionCell(props) {
+    return (react_1.default.createElement(action_cell_wrapper_1.ActionCellWrapper, null,
+        react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, visibleButtonsCount: props.visibleButtonsCount, variant: "white", size: "xs" })));
+}
+exports.ActionCell = ActionCell;

package/{hooks → table/hooks}/use-rdg-visuals.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { DataGridHandle } from "react-data-grid";
-import { BaseGridType, DataGridBaseProps } from "../types";
+import { DataGridBaseProps } from "../../types/data-grid-props";
+import { BaseGridType } from "../../types/schema";
 export declare function useRdgVisuals(props: {
     headerRowHeight?: DataGridBaseProps<BaseGridType, any>["headerRowHeight"];
-    mode?: DataGridBaseProps<BaseGridType, any>["mode"];
     rowHeight?: DataGridBaseProps<BaseGridType, any>["rowHeight"];
     rows: any[];
 }): {

package/{hooks → table/hooks}/use-rdg-visuals.js

@@ -9,7 +9,7 @@ function useRdgVisuals(props) {
     const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
     const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
     const contentHeight = typeof rowHeight === "function"
-        ? props.rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        ? props.rows.reduce((prev, curr) => prev + rowHeight(curr))
         : rowHeight * props.rows.length;
     const ref = (0, react_1.useRef)(null);
     const size = {
@@ -36,7 +36,7 @@ function useRdgVisuals(props) {
         return () => observer.disconnect();
     }, [mounted, storedSize]);
     return {
-        className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`,
+        className: "uxf-data-grid__table rdg-light",
         headerRowHeight,
         ready: mounted,
         ref,

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -1,3 +1,4 @@
 import { Column } from "react-data-grid";
+import { DataGridState } from "../../types";
 import { TableProps } from "../types";
-export declare function useReactDataGridColumns(props: TableProps<any>): Column<any>[];
+export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState): Column<any>[];