@tecsinapse/react-web-kit 1.3.2 → 1.6.1

package/dist/components/molecules/Select/animations.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transition = exports.defaultStyles = void 0;
+const defaultStyles = {
+  transition: ['transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out'],
+  overflow: 'hidden',
+  visibility: 'hidden'
+};
+exports.defaultStyles = defaultStyles;
+const transition = {
+  entering: {
+    transform: 'translateY(-10%)',
+    opacity: 0,
+    visibility: 'hidden'
+  },
+  entered: {
+    transform: 'translateY(0%)',
+    opacity: 1,
+    visibility: 'visible'
+  },
+  exiting: {
+    transform: 'translateY(0%)',
+    opacity: 1,
+    visibility: 'visible'
+  },
+  exited: {
+    transform: 'translateY(-10%)',
+    opacity: 0,
+    visibility: 'hidden'
+  }
+};
+exports.transition = transition;
+//# sourceMappingURL=animations.js.map

package/dist/components/molecules/Select/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/animations.ts"],"names":["defaultStyles","transition","overflow","visibility","entering","transform","opacity","entered","exiting","exited"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,UAAU,EAAE,CACV,sFADU,CADe;AAI3BC,EAAAA,QAAQ,EAAE,QAJiB;AAK3BC,EAAAA,UAAU,EAAE;AALe,CAAtB;;AAQA,MAAMF,UAAU,GAAG;AACxBG,EAAAA,QAAQ,EAAE;AACRC,IAAAA,SAAS,EAAE,kBADH;AAERC,IAAAA,OAAO,EAAE,CAFD;AAGRH,IAAAA,UAAU,EAAE;AAHJ,GADc;AAMxBI,EAAAA,OAAO,EAAE;AAAEF,IAAAA,SAAS,EAAE,gBAAb;AAA+BC,IAAAA,OAAO,EAAE,CAAxC;AAA2CH,IAAAA,UAAU,EAAE;AAAvD,GANe;AAOxBK,EAAAA,OAAO,EAAE;AAAEH,IAAAA,SAAS,EAAE,gBAAb;AAA+BC,IAAAA,OAAO,EAAE,CAAxC;AAA2CH,IAAAA,UAAU,EAAE;AAAvD,GAPe;AAQxBM,EAAAA,MAAM,EAAE;AAAEJ,IAAAA,SAAS,EAAE,kBAAb;AAAiCC,IAAAA,OAAO,EAAE,CAA1C;AAA6CH,IAAAA,UAAU,EAAE;AAAzD;AARgB,CAAnB","sourcesContent":["export const defaultStyles = {\n  transition: [\n    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',\n  ],\n  overflow: 'hidden',\n  visibility: 'hidden',\n};\n\nexport const transition = {\n  entering: {\n    transform: 'translateY(-10%)',\n    opacity: 0,\n    visibility: 'hidden',\n  },\n  entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n  exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n  exited: { transform: 'translateY(-10%)', opacity: 0, visibility: 'hidden' },\n};\n"],"file":"animations.js"}

package/dist/components/molecules/Select/functions.d.ts

@@ -0,0 +1 @@
+export declare const getDisplayValue: <Data>(type: any, value: any, options: any, placeholder: any, keyExtractor: any, labelExtractor: any) => Data | Data[];

package/dist/components/molecules/Select/functions.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDisplayValue = void 0;
+
+const getDisplayValue = (type, value, options, placeholder, keyExtractor, labelExtractor) => {
+  if (type === 'multi') {
+    if (value.length === 0) return placeholder;else {
+      return options.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
+    }
+  } else {
+    if (value === undefined) return placeholder;
+    const selectedOption = options.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
+    return selectedOption ? labelExtractor(selectedOption) : placeholder;
+  }
+};
+
+exports.getDisplayValue = getDisplayValue;
+//# sourceMappingURL=functions.js.map

package/dist/components/molecules/Select/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/functions.ts"],"names":["getDisplayValue","type","value","options","placeholder","keyExtractor","labelExtractor","length","reduce","acc","option","index","find","key","slice","undefined","selectedOption"],"mappings":";;;;;;;AAAO,MAAMA,eAAe,GAAG,CAC7BC,IAD6B,EAE7BC,KAF6B,EAG7BC,OAH6B,EAI7BC,WAJ6B,EAK7BC,YAL6B,EAM7BC,cAN6B,KAOX;AAClB,MAAIL,IAAI,KAAK,OAAb,EAAsB;AACpB,QAAIC,KAAK,CAACK,MAAN,KAAiB,CAArB,EAAwB,OAAOH,WAAP,CAAxB,KACK;AACH,aAAOD,OAAO,CACXK,MADI,CAEH,CAACC,GAAD,EAAMC,MAAN,EAAcC,KAAd,KACET,KAAK,CAACU,IAAN,CACEC,GAAG,IAAIR,YAAY,CAACK,MAAD,EAASC,KAAT,CAAZ,IAA+BN,YAAY,CAACQ,GAAD,EAAMF,KAAN,CADpD,IAGIF,GAAG,GAAGH,cAAc,CAACI,MAAD,CAApB,GAA+B,IAHnC,GAIID,GAPH,EAQH,EARG,EAUJK,KAVI,CAUE,CAVF,EAUK,CAAC,CAVN,CAAP;AAWD;AACF,GAfD,MAeO;AACL,QAAIZ,KAAK,KAAKa,SAAd,EAAyB,OAAOX,WAAP;AACzB,UAAMY,cAAc,GAAGb,OAAO,CAACS,IAAR,CACrB,CAACF,MAAD,EAASC,KAAT,KACEN,YAAY,CAACK,MAAD,EAASC,KAAT,CAAZ,IAA+BN,YAAY,CAACH,KAAD,EAAgBS,KAAhB,CAFxB,CAAvB;AAIA,WAAOK,cAAc,GAAGV,cAAc,CAACU,cAAD,CAAjB,GAAoCZ,WAAzD;AACD;AACF,CA/BM","sourcesContent":["export const getDisplayValue = <Data>(\n  type,\n  value,\n  options,\n  placeholder,\n  keyExtractor,\n  labelExtractor\n): Data | Data[] => {\n  if (type === 'multi') {\n    if (value.length === 0) return placeholder;\n    else {\n      return options\n        .reduce(\n          (acc, option, index) =>\n            value.find(\n              key => keyExtractor(option, index) == keyExtractor(key, index)\n            )\n              ? acc + labelExtractor(option) + ', '\n              : acc,\n          ''\n        )\n        .slice(0, -2);\n    }\n  } else {\n    if (value === undefined) return placeholder;\n    const selectedOption = options.find(\n      (option, index) =>\n        keyExtractor(option, index) == keyExtractor(value as Data, index)\n    );\n    return selectedOption ? labelExtractor(selectedOption) : placeholder;\n  }\n};\n"],"file":"functions.js"}

package/dist/components/molecules/Select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select, SelectProps } from './Select';

package/dist/components/molecules/Select/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "SelectProps", {
+  enumerable: true,
+  get: function () {
+    return _Select.SelectProps;
+  }
+});
+
+var _Select = _interopRequireWildcard(require("./Select"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Select, SelectProps } from './Select';\n"],"file":"index.js"}

package/dist/components/molecules/Select/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/molecules/Select/styled.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledInputContainer = exports.StyledContainer = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledContainer = (0, _styled.default)('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+exports.StyledContainer = StyledContainer;
+const StyledInputContainer = (0, _styled.default)('div')`
+  width: 100%;
+  z-index: ${({
+  theme
+}) => theme.zIndex.input};
+`;
+exports.StyledInputContainer = StyledInputContainer;
+//# sourceMappingURL=styled.js.map

package/dist/components/molecules/Select/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["StyledContainer","StyledInputContainer","theme","zIndex","input"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,CAPO;;AASA,MAAMC,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,MAAN,CAAaC,KAAM;AAC/C,CAHO","sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledInputContainer = styled('div')<Partial<StyleProps>>`\n  width: 100%;\n  z-index: ${({ theme }) => theme.zIndex.input};\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/Snackbar/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "SnackbarWebProps", {
 
 var _Snackbar = _interopRequireWildcard(require("./Snackbar"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Snackbar/styled.js

@@ -9,9 +9,9 @@ var _native = _interopRequireWildcard(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const SnackbarStyled = (0, _native.default)(_reactCore.Snackbar)(() => [(0, _native.css)({
   left: '50%',

package/dist/components/organisms/DataGrid/DataGrid.d.ts

@@ -0,0 +1,28 @@
+import React, { CSSProperties } from 'react';
+import { HeadersType } from './types';
+export interface DataGridProps<Data> {
+    headers: HeadersType<Data>[];
+    data: Data[];
+    rowKeyExtractor: (data: Data) => string;
+    toolbarRightIcons?: React.ReactNode;
+    toolbarFooter?: React.ReactNode;
+    toolbarTitle: string;
+    selectable?: boolean;
+    selectedRows?: Data[];
+    onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;
+    pagination?: boolean;
+    rowsPerPage?: number;
+    onRowsPerPageChange?: (value: number) => void;
+    rowsPerPageOptions?: number[];
+    rowsPerPageLabel?: (value: number) => string;
+    exportLabel?: string;
+    exportFunction?: () => void;
+    rowsCount?: number;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    loading?: boolean;
+    skeletonComponent?: React.ReactNode;
+    style?: CSSProperties;
+}
+declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, style, }: DataGridProps<Data>) => JSX.Element;
+export default DataGrid;

package/dist/components/organisms/DataGrid/DataGrid.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Table = require("../../atoms/Table");
+
+var _Header = require("./Header");
+
+var _Row = require("./Row");
+
+var _Footer = require("./Footer");
+
+var _Skeleton = require("../../atoms/Skeleton");
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DataGrid = ({
+  headers,
+  data,
+  rowKeyExtractor,
+  toolbarTitle,
+  toolbarFooter,
+  toolbarRightIcons,
+  selectable = false,
+  selectedRows = [],
+  onSelectedRows,
+  pagination = false,
+  rowsPerPage = 10,
+  onRowsPerPageChange,
+  rowsPerPageOptions: _rowsPerPageOptions,
+  rowsPerPageLabel: _rowsPerPageLabel,
+  exportLabel = 'Exportar',
+  exportFunction,
+  rowsCount,
+  page = 0,
+  onPageChange,
+  loading = false,
+  skeletonComponent,
+  style
+}) => {
+  if (selectable && (!selectedRows || !onSelectedRows)) {
+    throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
+  }
+
+  const rowsPerPageLabel = _react.default.useCallback(value => _rowsPerPageLabel ? _rowsPerPageLabel(value) : `Exibir por página: ${value} itens`, [_rowsPerPageLabel]);
+
+  const rowsPerPageOptions = _react.default.useMemo(() => _rowsPerPageOptions ?? [10, 25, 50], [_rowsPerPageOptions]);
+
+  const handleSelect = _react.default.useCallback((current, checked) => {
+    if (checked) {
+      onSelectedRows === null || onSelectedRows === void 0 ? void 0 : onSelectedRows(prevState => [...prevState, current]);
+      return;
+    }
+
+    onSelectedRows === null || onSelectedRows === void 0 ? void 0 : onSelectedRows(prevState => {
+      const idx = prevState.findIndex(el => rowKeyExtractor(el) === rowKeyExtractor(current));
+      return [...(0, _utils.removeElement)(prevState, idx)];
+    });
+  }, [onSelectedRows, rowKeyExtractor]);
+
+  return _react.default.createElement(_Table.TableContainer, {
+    style: style
+  }, _react.default.createElement(_Table.TableToolbar, {
+    title: toolbarTitle,
+    rightIcons: toolbarRightIcons,
+    footer: toolbarFooter
+  }), _react.default.createElement(_Table.Table, null, _react.default.createElement(_Header.Header, {
+    selectable: selectable,
+    headers: headers,
+    data: data,
+    rowsCount: rowsCount ?? data.length,
+    rowKeyExtractor: rowKeyExtractor,
+    selectedRows: selectedRows,
+    onSelected: onSelectedRows
+  }), !loading ? _react.default.createElement(_Table.TBody, null, (0, _utils.getData)(data, rowsCount, page, rowsPerPage).map(item => _react.default.createElement(_Row.Row, {
+    key: rowKeyExtractor(item),
+    rowKeyExtractor: rowKeyExtractor,
+    handleSelect: handleSelect,
+    selectable: selectable,
+    headers: headers,
+    data: item,
+    checked: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.some(sel => rowKeyExtractor(sel) === rowKeyExtractor(item))
+  }))) : _react.default.createElement(_Table.TBody, null, [...Array(rowsPerPage).keys()].map(idx => _react.default.createElement(_Table.Tr, {
+    key: `skeleton-${idx}`
+  }, _react.default.createElement(_Table.Td, {
+    colSpan: 99,
+    style: {
+      padding: 0
+    }
+  }, skeletonComponent ?? _react.default.createElement(_Skeleton.Skeleton, {
+    height: 55,
+    radius: "mili",
+    animation: "wave"
+  }, _react.default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  })))))), _react.default.createElement(_Footer.Footer, {
+    exportFunction: exportFunction,
+    exportLabel: exportLabel,
+    rowsPerPageLabel: rowsPerPageLabel,
+    rowsPerPage: rowsPerPage,
+    onRowsPerPageChange: onRowsPerPageChange,
+    rowsPerPageOptions: rowsPerPageOptions,
+    rowsCount: rowsCount ?? data.length,
+    page: page,
+    onPageChange: onPageChange,
+    pagination: pagination
+  })));
+};
+
+var _default = DataGrid;
+exports.default = _default;
+//# sourceMappingURL=DataGrid.js.map

package/dist/components/organisms/DataGrid/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","style","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** CSS style spread to TableContainer */\n  style?: CSSProperties;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  style,\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer style={style}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {getData(data, rowsCount, page, rowsPerPage).map(item => (\n              <Row\n                key={rowKeyExtractor(item)}\n                rowKeyExtractor={rowKeyExtractor}\n                handleSelect={handleSelect}\n                selectable={selectable}\n                headers={headers}\n                data={item}\n                checked={selectedRows?.some(\n                  sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                )}\n              />\n            ))}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        <Footer\n          exportFunction={exportFunction}\n          exportLabel={exportLabel}\n          rowsPerPageLabel={rowsPerPageLabel}\n          rowsPerPage={rowsPerPage}\n          onRowsPerPageChange={onRowsPerPageChange}\n          rowsPerPageOptions={rowsPerPageOptions}\n          rowsCount={rowsCount ?? data.length}\n          page={page}\n          onPageChange={onPageChange}\n          pagination={pagination}\n        />\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}

package/dist/components/organisms/DataGrid/Footer/Footer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface DataGridFooterProps {
+    rowsPerPage: number;
+    onRowsPerPageChange?: (value: number) => void;
+    rowsPerPageOptions: number[];
+    rowsPerPageLabel: (value: number) => string;
+    exportLabel?: string;
+    exportFunction?: () => void;
+    rowsCount: number;
+    page: number;
+    onPageChange?: (page: number) => void;
+    pagination: boolean;
+}
+declare const _default: React.NamedExoticComponent<DataGridFooterProps>;
+export default _default;

package/dist/components/organisms/DataGrid/Footer/Footer.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactWebKit = require("@tecsinapse/react-web-kit");
+
+var _Table = require("../../../atoms/Table");
+
+var _styled = require("./styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Footer = ({
+  rowsPerPage,
+  onRowsPerPageChange,
+  rowsPerPageOptions,
+  rowsPerPageLabel,
+  exportFunction,
+  exportLabel,
+  rowsCount,
+  page,
+  onPageChange,
+  pagination
+}) => {
+  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
+    throw new Error('[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)');
+  }
+
+  const getPaginationSlice = () => {
+    const totalPages = Math.ceil(rowsCount / rowsPerPage);
+
+    if (totalPages < 4) {
+      return {
+        start: 0,
+        end: totalPages
+      };
+    }
+
+    if (page === 0) {
+      return {
+        start: page,
+        end: page + 3
+      };
+    }
+
+    if (page === totalPages - 1) {
+      return {
+        start: page - 2,
+        end: page + 1
+      };
+    }
+
+    return {
+      start: page - 1,
+      end: page + 2
+    };
+  };
+
+  return _react.default.createElement(_Table.TFoot, null, _react.default.createElement(_Table.Tr, null, _react.default.createElement(_styled.TdFooterStyled, {
+    colSpan: 99
+  }, _react.default.createElement(_styled.FooterContainer, null, _react.default.createElement(_styled.FooterContainerStart, null, pagination && _react.default.createElement(_styled.SelectContainer, null, _react.default.createElement(_reactWebKit.Select, {
+    options: rowsPerPageOptions,
+    onSelect: value => onRowsPerPageChange === null || onRowsPerPageChange === void 0 ? void 0 : onRowsPerPageChange(value),
+    value: rowsPerPage,
+    type: 'single',
+    keyExtractor: value => String(value),
+    labelExtractor: rowsPerPageLabel
+  })), exportFunction && _react.default.createElement(_styled.HoveredText, null, _react.default.createElement(_reactWebKit.Button, {
+    variant: "outlined",
+    onPress: () => exportFunction()
+  }, _react.default.createElement(_reactWebKit.Text, {
+    fontColor: "orange",
+    fontWeight: "bold"
+  }, exportLabel)))), pagination && _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
+    onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1),
+    disabled: page === 0
+  }, _react.default.createElement(_reactWebKit.Icon, {
+    name: 'chevron-left',
+    type: 'material-community',
+    fontColor: 'light'
+  })), _react.default.createElement(_styled.PagesContainer, null, [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(getPaginationSlice().start, getPaginationSlice().end).map(value => _react.default.createElement(_styled.HoveredText, {
+    key: `page-${value}`
+  }, _react.default.createElement(_styled.PageButton, {
+    variant: page === value ? 'outlined' : 'text',
+    onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(value)
+  }, _react.default.createElement(_reactWebKit.Text, {
+    fontColor: "medium",
+    fontWeight: "bold"
+  }, value + 1))))), _react.default.createElement(_styled.NavigationButton, {
+    onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page + 1),
+    disabled: page === Math.ceil(rowsCount / rowsPerPage) - 1
+  }, _react.default.createElement(_reactWebKit.Icon, {
+    name: 'chevron-right',
+    type: 'material-community',
+    fontColor: 'light'
+  })))))));
+};
+
+var _default = _react.default.memo(Footer);
+
+exports.default = _default;
+//# sourceMappingURL=Footer.js.map

package/dist/components/organisms/DataGrid/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","Error","getPaginationSlice","totalPages","Math","ceil","start","end","value","String","Array","keys","slice","map","React","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';\nimport { TFoot, Tr } from '../../../atoms/Table';\nimport {\n  FooterContainer,\n  FooterContainerEnd,\n  FooterContainerStart,\n  HoveredText,\n  NavigationButton,\n  PageButton,\n  PagesContainer,\n  SelectContainer,\n  TdFooterStyled,\n} from './styled';\n\ninterface DataGridFooterProps {\n  rowsPerPage: number;\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions: number[];\n  rowsPerPageLabel: (value: number) => string;\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements */\n  rowsCount: number;\n  page: number;\n  onPageChange?: (page: number) => void;\n  pagination: boolean;\n}\n\nconst Footer: React.FC<DataGridFooterProps> = ({\n  rowsPerPage,\n  onRowsPerPageChange,\n  rowsPerPageOptions,\n  rowsPerPageLabel,\n  exportFunction,\n  exportLabel,\n  rowsCount,\n  page,\n  onPageChange,\n  pagination,\n}) => {\n  if (pagination && (!onPageChange || !onRowsPerPageChange)) {\n    throw new Error(\n      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'\n    );\n  }\n\n  const getPaginationSlice = (): { start: number; end: number } => {\n    const totalPages = Math.ceil(rowsCount / rowsPerPage);\n    if (totalPages < 4) {\n      return { start: 0, end: totalPages };\n    }\n    if (page === 0) {\n      return { start: page, end: page + 3 };\n    }\n    if (page === totalPages - 1) {\n      return { start: page - 2, end: page + 1 };\n    }\n    return { start: page - 1, end: page + 2 };\n  };\n\n  return (\n    <TFoot>\n      <Tr>\n        <TdFooterStyled colSpan={99}>\n          <FooterContainer>\n            <FooterContainerStart>\n              {pagination && (\n                <SelectContainer>\n                  <Select\n                    options={rowsPerPageOptions}\n                    onSelect={value => onRowsPerPageChange?.(value as number)}\n                    value={rowsPerPage}\n                    type={'single'}\n                    keyExtractor={value => String(value)}\n                    labelExtractor={rowsPerPageLabel}\n                  />\n                </SelectContainer>\n              )}\n              {exportFunction && (\n                <HoveredText>\n                  <Button variant=\"outlined\" onPress={() => exportFunction()}>\n                    <Text fontColor=\"orange\" fontWeight=\"bold\">\n                      {exportLabel}\n                    </Text>\n                  </Button>\n                </HoveredText>\n              )}\n            </FooterContainerStart>\n            {pagination && (\n              <FooterContainerEnd>\n                <NavigationButton\n                  onPress={() => onPageChange?.(page - 1)}\n                  disabled={page === 0}\n                >\n                  <Icon\n                    name={'chevron-left'}\n                    type={'material-community'}\n                    fontColor={'light'}\n                  />\n                </NavigationButton>\n                <PagesContainer>\n                  {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]\n                    .slice(getPaginationSlice().start, getPaginationSlice().end)\n                    .map(value => (\n                      <HoveredText key={`page-${value}`}>\n                        <PageButton\n                          variant={page === value ? 'outlined' : 'text'}\n                          onPress={() => onPageChange?.(value)}\n                        >\n                          <Text fontColor=\"medium\" fontWeight=\"bold\">\n                            {value + 1}\n                          </Text>\n                        </PageButton>\n                      </HoveredText>\n                    ))}\n                </PagesContainer>\n                <NavigationButton\n                  onPress={() => onPageChange?.(page + 1)}\n                  disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}\n                >\n                  <Icon\n                    name={'chevron-right'}\n                    type={'material-community'}\n                    fontColor={'light'}\n                  />\n                </NavigationButton>\n              </FooterContainerEnd>\n            )}\n          </FooterContainer>\n        </TdFooterStyled>\n      </Tr>\n    </TFoot>\n  );\n};\n\nexport default React.memo(Footer);\n"],"file":"Footer.js"}