@addev-be/ui 0.7.0 → 0.7.1

package/dist/components/data/DataGrid/FilterModalContent/index.js

@@ -53,6 +53,13 @@ var react_1 = require("react");
 // import { Select } from '../../Select';
 // import clx from 'classnames';
 var filterOperators = {
+    date: {
+        after: 'Après',
+        before: 'Avant',
+        equals: 'Égal à',
+        notEquals: 'Différent de',
+        inRange: "Dans l'intervalle",
+    },
     number: {
         equals: 'Égal à',
         notEquals: 'Différent de',
@@ -94,15 +101,17 @@ var FilterModalContent = function (_a) {
                                 newValues[0] = String(e.target.value);
                                 onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
                             }
-                        } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)("input", { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', 
-                        // className="text-sm w-24"
-                        onChange: function (e) {
-                            var newValues = __spreadArray([], values, true);
-                            newValues[0] =
-                                type === 'number'
-                                    ? Number(e.target.value)
-                                    : String(e.target.value);
-                            onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                        } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)(forms_1.Input, { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', onChange: function (e) {
+                            if (type === 'number') {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[1] = Number(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
+                            else {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[1] = String(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
                         } })] }))] }));
 };
 exports.FilterModalContent = FilterModalContent;

package/dist/components/data/DataGrid/helpers/columns.d.ts

@@ -1,9 +1,11 @@
 import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
 export declare const isColumnVisible: <R>(obj: DataGridColumn<R> | DataGridSettings) => boolean;
+export declare const buildExcelFormat: (decimals?: number, suffix?: string) => string;
 export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const dateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
 export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;

package/dist/components/data/DataGrid/helpers/columns.js

@@ -14,13 +14,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.isColumnVisible = void 0;
+exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateTimeColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.buildExcelFormat = exports.isColumnVisible = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var numbers_1 = require("../../../../helpers/numbers");
 var filters_1 = require("./filters");
+var numbers_1 = require("../../../../helpers/numbers");
 var moment_1 = __importDefault(require("moment"));
+var lodash_1 = require("lodash");
 var isColumnVisible = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1; };
 exports.isColumnVisible = isColumnVisible;
+var buildExcelFormat = function (decimals, suffix) {
+    if (decimals === void 0) { decimals = 2; }
+    if (suffix === void 0) { suffix = ''; }
+    return "#0".concat(decimals > 0 ? ".".concat((0, lodash_1.repeat)('0', decimals)) : '').concat(suffix);
+};
+exports.buildExcelFormat = buildExcelFormat;
 var textColumn = function (key, title, options) {
     var _a;
     return (_a = {},
@@ -55,10 +62,17 @@ exports.phoneColumn = phoneColumn;
 var dateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return 'dd/mm/yyyy'; }, excelValue: function (date) { var _a; return (_a = (0, moment_1.default)(date).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.dateColumn = dateColumn;
+var dateTimeColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return 'dd/mm/yyyy hh:mm:ss'; }, excelValue: function (date) { var _a; return (_a = (0, moment_1.default)(date).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a);
+};
+exports.dateTimeColumn = dateTimeColumn;
 var monthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
@@ -70,7 +84,7 @@ var numberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: {
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, exports.buildExcelFormat)(decimals); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: {
                 sum: function (_, filteredRows) {
                     return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0), decimals);
                 },
@@ -93,7 +107,7 @@ var moneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, exports.buildExcelFormat)(decimals, ' €'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
                 sum: function (_, filteredRows) {
                     return (0, numbers_1.formatMoney)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0), decimals);
                 },
@@ -116,7 +130,7 @@ var percentageColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, exports.buildExcelFormat)(decimals, '%'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
                 average: function (_, filteredRows) {
                     return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0) /
                         (filteredRows.length || 1), decimals);
@@ -138,7 +152,7 @@ exports.percentageColumn = percentageColumn;
 var checkboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
                 count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
                 checked: function (_, filteredRows) {
                     return "".concat(filteredRows.filter(function (row) { return !!row[key]; }).length, " coch\u00E9s");

package/dist/components/data/DataGrid/helpers/filters.d.ts

@@ -12,6 +12,7 @@ export declare const defaultValueParsers: {
 export declare const groupDatesByYearAndMonth: (dates: any[]) => Record<string, Record<string, any[]>>;
 export declare const getDateGroups: (dates: any[]) => DataGridFilterGroup[];
 export declare const defaultRendererAndFormatter: (value: any) => string;
-export declare const getCheckboxes: (values: DataGridFilterValue[], renderer: DataGridFilterRenderer, formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup[], level?: number) => DataGridFilterCheckbox[];
+export declare const getCheckboxes: (values: DataGridFilterValue[], displayValue: DataGridFilterValue, renderer: DataGridFilterRenderer, formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup[], level?: number) => DataGridFilterCheckbox[];
+export declare const dateFilter: (key: string) => DataGridFilter<"date">;
 export declare const textFilter: (key: string) => DataGridFilter<"text">;
 export declare const numberFilter: (key: string) => DataGridFilter<"number">;

package/dist/components/data/DataGrid/helpers/filters.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.numberFilter = exports.textFilter = exports.getCheckboxes = exports.defaultRendererAndFormatter = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
+exports.numberFilter = exports.textFilter = exports.dateFilter = exports.getCheckboxes = exports.defaultRendererAndFormatter = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
 var moment_1 = __importDefault(require("moment"));
 var escapeRegExp = function (s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); };
 var textContainsPredicate = function () {
@@ -141,7 +141,67 @@ var numberInArrayPredicate = function () {
     }
     return function (valueToVerify) { return filterValues.includes(valueToVerify); };
 };
+var dateBeforePredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    var limitDate = (0, moment_1.default)(filterValues[0]);
+    return function (valueToVerify) { return (0, moment_1.default)(valueToVerify).isBefore(limitDate); };
+};
+var dateAfterPredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    var limitDate = (0, moment_1.default)(filterValues[0]);
+    return function (valueToVerify) { return (0, moment_1.default)(valueToVerify).isAfter(limitDate); };
+};
+var dateEqualsPredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    var date = (0, moment_1.default)(filterValues[0]);
+    return function (valueToVerify) { return (0, moment_1.default)(valueToVerify).isSame(date); };
+};
+var dateNotEqualsPredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    var date = (0, moment_1.default)(filterValues[0]);
+    return function (valueToVerify) { return !(0, moment_1.default)(valueToVerify).isSame(date); };
+};
+var dateInRangePredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    var date1 = (0, moment_1.default)(filterValues[0]);
+    var date2 = (0, moment_1.default)(filterValues[1]);
+    var startDate = date1.isBefore(date2) ? date1 : date2;
+    var endDate = date1.isBefore(date2) ? date2 : date1;
+    return function (valueToVerify) {
+        return (0, moment_1.default)(valueToVerify).isBetween(startDate, endDate, 'days', '[]');
+    };
+};
+var dateInArrayPredicate = function () {
+    var filterValues = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        filterValues[_i] = arguments[_i];
+    }
+    return function (valueToVerify) { return filterValues.includes(valueToVerify); };
+};
 exports.filtersPredicates = {
+    date: {
+        before: dateBeforePredicate,
+        after: dateAfterPredicate,
+        equals: dateEqualsPredicate,
+        notEquals: dateNotEqualsPredicate,
+        inRange: dateInRangePredicate,
+        inArray: dateInArrayPredicate,
+    },
     text: {
         contains: textContainsPredicate,
         notContains: textNotContainsPredicate,
@@ -179,10 +239,12 @@ var defaultFilterGetter = function (row, columnKey) {
 };
 exports.defaultFilterGetter = defaultFilterGetter;
 exports.defaultFilterValues = {
+    date: '',
     text: '',
     number: 0,
 };
 exports.defaultValueParsers = {
+    date: function (value) { return (0, moment_1.default)(value).format('YYYY-MM-DD'); },
     text: function (value) { return value; },
     number: function (value) { return parseFloat(value); },
 };
@@ -192,7 +254,7 @@ var groupDatesByYearAndMonth = function (dates) {
         if (!acc[year]) {
             acc[year] = {};
         }
-        var yearAndMonth = (0, moment_1.default)(date).format("YYYY-MM");
+        var yearAndMonth = (0, moment_1.default)(date).format("MM/YYYY");
         if (!acc[year][yearAndMonth]) {
             acc[year][yearAndMonth] = [];
         }
@@ -207,10 +269,12 @@ var getDateGroups = function (dates) {
         var year = _a[0], months = _a[1];
         return ({
             name: year,
+            displayValue: year,
             values: Object.values(months).flat(),
             groups: Object.entries(months).map(function (_a) {
                 var month = _a[0], dates = _a[1];
                 return ({
+                    displayValue: month,
                     name: month,
                     values: dates,
                 });
@@ -223,21 +287,37 @@ var defaultRendererAndFormatter = function (value) {
     return String(value !== null && value !== void 0 ? value : '').trim() || '(Vides)';
 };
 exports.defaultRendererAndFormatter = defaultRendererAndFormatter;
-var getCheckboxes = function (values, renderer, formatter, groups, level) {
+var getCheckboxes = function (values, displayValue, renderer, formatter, groups, level) {
     if (level === void 0) { level = 0; }
-    return __spreadArray(__spreadArray([], (groups !== null && groups !== void 0 ? groups : [])
-        .map(function (group) {
-        var _a;
-        return (0, exports.getCheckboxes)((_a = group.values) !== null && _a !== void 0 ? _a : [], renderer, formatter, group.groups, level + 1);
-    })
-        .flat(), true), values.map(function (value) { return ({
-        displayValue: renderer(value),
-        title: formatter(value),
-        value: value !== null && value !== void 0 ? value : '',
-        level: level,
-    }); }), true);
+    return groups
+        ? groups
+            .map(function (group) {
+            var _a, _b;
+            return __spreadArray([
+                {
+                    displayValue: group.displayValue,
+                    title: formatter(group.displayValue),
+                    values: (_a = group.values) !== null && _a !== void 0 ? _a : [],
+                    level: level,
+                }
+            ], (0, exports.getCheckboxes)((_b = group.values) !== null && _b !== void 0 ? _b : [], group.displayValue, renderer, formatter, group.groups, level + 1), true);
+        })
+            .flat()
+        : values.map(function (value) { return ({
+            displayValue: renderer(value),
+            title: formatter(value),
+            values: [value !== null && value !== void 0 ? value : ''],
+            level: level,
+        }); });
 };
 exports.getCheckboxes = getCheckboxes;
+var dateFilter = function (key) { return ({
+    type: 'date',
+    operator: 'before',
+    values: [''],
+    getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+}); };
+exports.dateFilter = dateFilter;
 var textFilter = function (key) { return ({
     type: 'text',
     operator: 'contains',

package/dist/components/data/DataGrid/hooks/useDataGrid.js

@@ -59,20 +59,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGrid = void 0;
-var styles_1 = require("../styles");
 var react_1 = require("react");
 var _1 = require(".");
 var helpers_1 = require("../helpers");
 var lodash_1 = require("lodash");
 var useDataGridSettings_1 = require("./useDataGridSettings");
-var hooks_1 = require("../../../../hooks");
 var useDataGrid = function (props, override) {
     var _a;
-    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _b = props.rowHeight, rowHeight = _b === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _b, onVisibleRowsChange = props.onVisibleRowsChange, onSelectionChange = props.onSelectionChange, selectable = props.selectable, initialSorts = props.initialSorts;
-    var _c = (0, react_1.useState)(props.columns), columns = _c[0], setColumns = _c[1];
+    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, onSelectionChange = props.onSelectionChange, onSelectedRowsChanged = props.onSelectedRowsChanged, selectable = props.selectable, initialSorts = props.initialSorts;
+    var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
     var visibleColumns = (0, _1.useSortedColumns)(columns);
     /** SETTINGS */
-    var _d = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _d.settings, setSettings = _d.setSettings, saveSettings = _d.saveSettings;
+    var _c = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _c.settings, setSettings = _c.setSettings, saveSettings = _c.saveSettings;
     var setColumnWidth = (0, react_1.useCallback)(function (key, width) {
         setSettings(function (prev) {
             var _a;
@@ -80,7 +78,7 @@ var useDataGrid = function (props, override) {
         });
     }, [setSettings]);
     var gridTemplateColumns = (0, react_1.useMemo)(function () {
-        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-10)'] : []), true), visibleColumns.map(function (_a) {
+        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-8)'] : []), true), visibleColumns.map(function (_a) {
             var _b;
             var col = _a[1];
             return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
@@ -96,14 +94,25 @@ var useDataGrid = function (props, override) {
             ? props.rowKey
             : function (row) { return String(row === null || row === void 0 ? void 0 : row[props.rowKey]); };
     }, [props.rowKey]);
-    var _e = (0, react_1.useState)([]), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var _d = (0, react_1.useState)([]), selectedKeys = _d[0], setSelectedKeys = _d[1];
     var selectedRows = (0, react_1.useMemo)(function () { return props.rows.filter(function (row) { return selectedKeys.includes(rowKeyGetter(row)); }); }, [props.rows, rowKeyGetter, selectedKeys]);
     (0, react_1.useEffect)(function () {
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedKeys);
     }, [onSelectionChange, selectedKeys]);
+    (0, react_1.useEffect)(function () {
+        onSelectedRowsChanged === null || onSelectedRowsChanged === void 0 ? void 0 : onSelectedRowsChanged(selectedRows);
+    }, [onSelectedRowsChanged, selectedRows]);
+    var toggleSelection = (0, react_1.useCallback)(function (key) {
+        if (selectedKeys.includes(key)) {
+            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
+        }
+        else {
+            setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
+        }
+    }, [selectedKeys, setSelectedKeys]);
     /** ROWS FILTERING **/
-    var _f = (0, react_1.useState)({}), filters = _f[0], setFilters = _f[1];
-    var _g = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _g[0], setFilteredRows = _g[1];
+    var _e = (0, react_1.useState)({}), filters = _e[0], setFilters = _e[1];
+    var _f = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _f[0], setFilteredRows = _f[1];
     (0, react_1.useEffect)(function () {
         onFiltersChanged === null || onFiltersChanged === void 0 ? void 0 : onFiltersChanged(filters);
     }, [filters, onFiltersChanged]);
@@ -117,10 +126,10 @@ var useDataGrid = function (props, override) {
         setFilteredRows(filteredRows !== null && filteredRows !== void 0 ? filteredRows : []);
     }, [filters, props.filter, rows]);
     /** CELL EDITING */
-    var _h = (0, react_1.useState)([-1, -1]), editingCell = _h[0], setEditingCell = _h[1];
+    var _g = (0, react_1.useState)([-1, -1]), editingCell = _g[0], setEditingCell = _g[1];
     /** ROWS SORTING **/
-    var _j = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _j[0], setSorts = _j[1];
-    var _k = (0, react_1.useState)(rows), sortedRows = _k[0], setSortedRows = _k[1];
+    var _h = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _h[0], setSorts = _h[1];
+    var _j = (0, react_1.useState)(rows), sortedRows = _j[0], setSortedRows = _j[1];
     (0, react_1.useEffect)(function () {
         var sortedRows = __spreadArray([], filteredRows, true);
         if (props.sort !== false) {
@@ -148,25 +157,8 @@ var useDataGrid = function (props, override) {
     }, [sorts, onSortsChanged]);
     /** VIRTUAL SCROLLING */
     var scrollableRef = (0, react_1.useRef)(null);
-    var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
-    var _l = (0, react_1.useState)(0), scrollTop = _l[0], setScrollTop = _l[1];
-    var _m = 
-    // props.showAllRows ? [0, sortedRows.length] :
-    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)], index = _m[0], length = _m[1];
-    var onScroll = (0, react_1.useCallback)(function (e) {
-        var target = e.target;
-        setScrollTop(target.scrollTop);
-    }, []);
-    var indexWithTolerance = Math.max(0, index - styles_1.VIRTUAL_SCROLL_TOLERANCE);
-    var lengthWithTolerance = length + 2 * styles_1.VIRTUAL_SCROLL_TOLERANCE;
-    var visibleRows = sortedRows.slice(indexWithTolerance, indexWithTolerance + lengthWithTolerance);
-    (0, react_1.useEffect)(function () {
-        onVisibleRowsChange === null || onVisibleRowsChange === void 0 ? void 0 : onVisibleRowsChange(indexWithTolerance, lengthWithTolerance);
-    }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
-    /** COPYING */
-    var copyTable = (0, _1.useDataGridCopy)(sortedRows, columns, loadCopyRows).copyTable;
     /** FOOTERS */
-    var _o = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _o[0], setFooters = _o[1];
+    var _k = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _k[0], setFooters = _k[1];
     var footerFunctions = (0, react_1.useMemo)(function () {
         return Object.entries(footers).reduce(function (acc, _a) {
             var columnKey = _a[0], footerKey = _a[1];
@@ -178,13 +170,21 @@ var useDataGrid = function (props, override) {
                 acc[columnKey] = column.footer;
             }
             else if (typeof column.footer === 'object' &&
-                typeof column.footer[footerKey] === 'function') {
+                typeof column.footer[footerKey] === 'function' &&
+                column.footer[footerKey] !== null) {
                 acc[columnKey] = column.footer[footerKey];
             }
             return acc;
         }, {});
     }, [columns, footers]);
-    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions }), override)); }, [
+    /** COPYING */
+    var copyTable = (0, _1.useDataGridCopy)({
+        rows: rows,
+        visibleColumns: visibleColumns,
+        footerFunctions: footerFunctions,
+        loadCopyRows: loadCopyRows,
+    }).copyTable;
+    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, scrollableRef: scrollableRef, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions, toggleSelection: toggleSelection }), override)); }, [
         props,
         columns,
         visibleColumns,
@@ -199,14 +199,12 @@ var useDataGrid = function (props, override) {
         settings,
         setSettings,
         saveSettings,
-        visibleRows,
-        onScroll,
-        index,
-        length,
+        scrollableRef,
         rowKeyGetter,
         gridTemplateColumns,
         footers,
         footerFunctions,
+        toggleSelection,
         override,
     ]);
     var context = (0, react_1.useMemo)(function () {
@@ -231,14 +229,11 @@ var useDataGrid = function (props, override) {
             saveSettings: function () { },
             settings: {},
             setSettings: function () { },
-            visibleRows: [],
-            scrollableRef: { current: null },
-            onScroll: function () { },
-            index: 0,
             length: 0,
             gridTemplateColumns: '',
             footers: {},
             setFooters: function () { },
+            toggleSelection: function () { },
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);

package/dist/components/data/DataGrid/hooks/useDataGridCopy.d.ts

@@ -1,4 +1,4 @@
-import { DataGridColumns } from '../types';
-export declare const useDataGridCopy: <R>(rows: R[], columns: DataGridColumns<R>, loadCopyRows?: () => Promise<R[]>) => {
+import { DataGridContextProps } from '../types';
+export declare const useDataGridCopy: <R>({ rows, visibleColumns, loadCopyRows, footerFunctions, }: Pick<DataGridContextProps<R>, "rows" | "visibleColumns" | "loadCopyRows" | "footerFunctions">) => {
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
 };