flipper-ui 0.25.12 → 0.25.13

package/core/DataTable/DataTable.js

@@ -59,7 +59,8 @@ var defaultPagination = {
   disabled: false,
   showFirstButton: false,
   showLastButton: false,
-  rowsPerPageOptions: [5, 10, 20]
+  rowsPerPageOptions: [5, 10, 20],
+  clickable: false
 };
 
 var sliceData = function sliceData(data, page, rowsPerPage) {

package/core/DataTable/DataTablePaginationActions.d.ts

@@ -8,6 +8,7 @@ interface DataTablePaginationActionsProps {
 interface DataTablePaginationActionsBuilder {
     showFirstButton?: boolean;
     showLastButton?: boolean;
+    clickable?: boolean;
 }
-export declare const makeDataTablePaginationActions: ({ showFirstButton, showLastButton }: DataTablePaginationActionsBuilder) => ({ count, page, rowsPerPage, onChangePage }: DataTablePaginationActionsProps) => JSX.Element;
+export declare const makeDataTablePaginationActions: ({ showFirstButton, showLastButton, clickable }: DataTablePaginationActionsBuilder) => ({ count, page, rowsPerPage, onChangePage }: DataTablePaginationActionsProps) => JSX.Element;
 export {};

package/core/DataTable/DataTablePaginationActions.js

@@ -27,7 +27,8 @@ var PAGINATION_WRAPPER_STYLE = {
 
 var makeDataTablePaginationActions = function makeDataTablePaginationActions(_ref) {
   var showFirstButton = _ref.showFirstButton,
-      showLastButton = _ref.showLastButton;
+      showLastButton = _ref.showLastButton,
+      clickable = _ref.clickable;
   return function (_ref2) {
     var count = _ref2.count,
         page = _ref2.page,
@@ -55,19 +56,19 @@ var makeDataTablePaginationActions = function makeDataTablePaginationActions(_re
       style: PAGINATION_WRAPPER_STYLE
     }, showFirstButton && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       onClick: handleFirstPageButtonClick,
-      disabled: page === 0,
+      disabled: page === 0 || clickable,
       "aria-label": "first page"
     }, /*#__PURE__*/_react["default"].createElement(_FirstPage["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       onClick: handleBackButtonClick,
-      disabled: page === 0,
+      disabled: page === 0 || clickable,
       "aria-label": "previous page"
     }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       onClick: handleNextButtonClick,
-      disabled: page >= totalPages,
+      disabled: page >= totalPages || clickable,
       "aria-label": "next page"
     }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
       onClick: handleLastPageButtonClick,
-      disabled: page >= totalPages,
+      disabled: page >= totalPages || clickable,
       "aria-label": "last page"
     }, /*#__PURE__*/_react["default"].createElement(_LastPage["default"], null)));
   };

package/core/DataTable/DataTableQueryPaginated.d.ts

@@ -0,0 +1,81 @@
+import React, { MutableRefObject, CSSProperties } from 'react';
+import { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
+export declare type DataTableProps<D extends Data, V extends StackView = {}> = {
+    /**
+     * The data to be shown in the table
+     */
+    data: D[];
+    /**
+     * The total elements present in query
+     */
+    totalElements: number;
+    /**
+     * Change current page handler
+     */
+    handleChangePage: (page: number) => void;
+    /**
+     * Per page value
+     */
+    perPage: number;
+    /**
+     * Change page handler
+     */
+    handleChangePerPage: (value: number) => void;
+    /**
+     * Actual page
+     */
+    page: number;
+    /**
+     * Errors as an object where the key is the ID of the row and the value is
+     * a Set with the fields of error
+     */
+    errors?: Errors<D>;
+    /**
+     * The columns specification
+     */
+    columns: ColumnSpec<D>[];
+    /**
+     * Hide the table header
+     */
+    noHeader?: boolean;
+    /**
+     * Component to show when there are no data
+     */
+    componentForEmpty?: React.ReactNode;
+    /**
+     * Custom style to be applied to the table body
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to the table head
+     */
+    headStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to all rows of the table body
+     */
+    bodyRowStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to all rows of the table head
+     */
+    headRowStyle?: CSSProperties;
+    /**
+     * Height of a hidden row, when you need to have some blank space in case
+     * you fill in the pagination.rowsPerPage
+     */
+    hiddenRowHeight?: number;
+    /**
+     * The pagination configuration
+     */
+    pagination?: Partial<PaginationOptions>;
+    /**
+     * A React MutableRefObject for the row controller
+     */
+    controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
+    /**
+     * Custom rowViews used as a Stac
+     */
+    rowViews?: Record<keyof V, RowViewComponent<D>>;
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, rowData: D) => void;
+};
+export declare const DataTableQueryPaginated: <D extends Data, V extends Record<string, unknown>>(props: DataTableProps<D, V>) => JSX.Element;
+export default DataTableQueryPaginated;

package/core/DataTable/DataTableQueryPaginated.js

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DataTableQueryPaginated = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _last = _interopRequireDefault(require("ramda/es/last"));
+
+var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
+
+var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
+
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+
+var _TableContainer = _interopRequireDefault(require("@material-ui/core/TableContainer"));
+
+var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
+
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
+
+var _TableFooter = _interopRequireDefault(require("@material-ui/core/TableFooter"));
+
+var _types = require("./types");
+
+var _useRowsState2 = require("./useRowsState");
+
+var _Rows = require("./Rows");
+
+var _DataTablePaginationActions = require("./DataTablePaginationActions");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var defaultPagination = {
+  rowsPerPage: 10,
+  labelRowsPerPage: 'Rows per page:',
+  labelDisplayedRows: function labelDisplayedRows(_ref) {
+    var from = _ref.from,
+        to = _ref.to,
+        count = _ref.count;
+    return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
+  },
+  disabled: false,
+  showFirstButton: false,
+  showLastButton: false,
+  clickable: true,
+  rowsPerPageOptions: [5, 10, 25, 50]
+};
+
+var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
+  var pagination = _objectSpread(_objectSpread({}, defaultPagination), props.pagination);
+
+  var data = props.data,
+      totalElements = props.totalElements,
+      handleChangePage = props.handleChangePage,
+      perPage = props.perPage,
+      handleChangePerPage = props.handleChangePerPage,
+      columns = props.columns,
+      page = props.page,
+      rowViews = props.rowViews,
+      onRowClick = props.onRowClick,
+      controllerRef = props.controllerRef,
+      noHeader = props.noHeader,
+      bodyRowStyle = props.bodyRowStyle,
+      headRowStyle = props.headRowStyle,
+      errors = props.errors,
+      componentForEmpty = props.componentForEmpty,
+      bodyStyle = props.bodyStyle,
+      headStyle = props.headStyle,
+      hiddenRowHeight = props.hiddenRowHeight;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      newRow = _useState2[0],
+      setNewRow = _useState2[1];
+
+  var rows = (0, _react.useMemo)(function () {
+    if (pagination.disabled) {
+      return data;
+    }
+
+    return data;
+  }, [pagination.disabled, data, perPage, page, newRow]);
+
+  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
+      getRowState = _useRowsState.getRowState,
+      setEditableRowState = _useRowsState.setEditableRowState,
+      setRowState = _useRowsState.setRowState,
+      pushRowView = _useRowsState.pushRowView,
+      popRowView = _useRowsState.popRowView;
+
+  var controller = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var nextController = {
+      editRow: function editRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.Edit
+        });
+      },
+      viewRow: function viewRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.View
+        });
+        setNewRow(undefined);
+      },
+      addRow: function addRow(partial) {
+        handleChangePerPage(0);
+        setNewRow(partial);
+      },
+      getEditedRowData: function getEditedRowData(id) {
+        var _getRowState;
+
+        return _objectSpread({
+          id: id
+        }, (_getRowState = getRowState(id)) === null || _getRowState === void 0 ? void 0 : _getRowState.editableState);
+      },
+      getRowData: function getRowData(id) {
+        var raw = getRowState(id);
+        return {
+          edited: _objectSpread({
+            id: id
+          }, raw === null || raw === void 0 ? void 0 : raw.editableState),
+          current: raw === null || raw === void 0 ? void 0 : raw.currentState
+        };
+      },
+      pushRowView: pushRowView,
+      popRowView: popRowView
+    };
+    controller.current = nextController;
+
+    if (controllerRef) {
+      controllerRef.current = nextController;
+    }
+  }, [setRowState, pushRowView, popRowView, getRowState, controllerRef]);
+  var rowsList = (0, _react.useMemo)(function () {
+    return rows.map(function (row) {
+      var rowState = getRowState(row.id);
+      var lastView = (rowState === null || rowState === void 0 ? void 0 : rowState.stackView) && (0, _last["default"])(rowState.stackView);
+      var view = lastView && (rowViews === null || rowViews === void 0 ? void 0 : rowViews[lastView]);
+      var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || _types.RowMode.View;
+      return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+        key: row.id,
+        "data-id": row.id,
+        style: bodyRowStyle,
+        onClick: function onClick(event) {
+          return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+        }
+      }, view ? view({
+        data: row
+      }) : /*#__PURE__*/_react["default"].createElement(_Rows.StatefulRow, {
+        columns: columns,
+        data: row,
+        errors: errors,
+        mode: mode,
+        onUpdate: setEditableRowState(row.id)
+      }));
+    });
+  }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns]);
+  var columnsList = (0, _react.useMemo)(function () {
+    return columns.map(function (column) {
+      return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        key: column.title,
+        variant: "head",
+        style: column.headerStyle,
+        align: column.align
+      }, column.title);
+    });
+  }, [columns]);
+  var currentRowsNumber = rows.length + (newRow ? 1 : 0);
+  var hiddenRowsNumber = pagination.disabled ? 0 : perPage - currentRowsNumber;
+
+  var hiddenRowFiller = hiddenRowsNumber !== 0 && /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+    style: bodyRowStyle
+  }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    colSpan: columns.length,
+    padding: "none",
+    style: {
+      height: hiddenRowHeight && "".concat(hiddenRowHeight * hiddenRowsNumber, "px")
+    }
+  }));
+
+  var rowsElements = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (newRow === null || newRow === void 0 ? void 0 : newRow.id) && /*#__PURE__*/_react["default"].createElement(_Rows.NewRow, {
+    data: newRow,
+    errors: errors,
+    columns: columns,
+    onUpdate: setEditableRowState(newRow.id)
+  }), rowsList);
+
+  var paginationActionsComponent = (0, _react.useMemo)(function () {
+    return (0, _DataTablePaginationActions.makeDataTablePaginationActions)({
+      showFirstButton: pagination.showFirstButton,
+      showLastButton: pagination.showLastButton,
+      clickable: pagination.clickable
+    });
+  }, [pagination.showFirstButton, pagination.showLastButton, pagination.clickable]);
+  return /*#__PURE__*/_react["default"].createElement(_TableContainer["default"], {
+    component: _Paper["default"]
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, !noHeader && /*#__PURE__*/_react["default"].createElement(_TableHead["default"], {
+    style: headStyle
+  }, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+    style: headRowStyle
+  }, columnsList)), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], {
+    style: bodyStyle
+  }, currentRowsNumber === 0 || pagination.clickable ? componentForEmpty : rowsElements, hiddenRowFiller), !pagination.disabled && /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TablePagination["default"], {
+    count: totalElements,
+    page: page,
+    rowsPerPageOptions: pagination.rowsPerPageOptions,
+    rowsPerPage: perPage,
+    labelRowsPerPage: pagination.labelRowsPerPage,
+    labelDisplayedRows: pagination.labelDisplayedRows,
+    onChangePage: function onChangePage(_, page) {
+      handleChangePage(page);
+    },
+    onChangeRowsPerPage: function onChangeRowsPerPage(event) {
+      handleChangePerPage(parseInt(event.target.value, 10));
+    },
+    ActionsComponent: paginationActionsComponent
+  })))));
+};
+
+exports.DataTableQueryPaginated = DataTableQueryPaginated;
+var _default = DataTableQueryPaginated;
+exports["default"] = _default;

package/core/DataTable/types.d.ts

@@ -53,6 +53,7 @@ export declare type PaginationOptions = {
     showFirstButton?: boolean;
     showLastButton?: boolean;
     disabled: boolean;
+    clickable: boolean;
 };
 export declare type RowAction<D> = {
     type: 'add' | 'delete' | 'update';

package/core/DataTable/usePaginated.d.ts

@@ -0,0 +1,18 @@
+export interface IDataProps {
+    id: string;
+    product: string;
+    price: number;
+    quantity: number;
+    date: Date;
+}
+export declare const generateRandomDate: (size: number) => IDataProps[];
+export declare const usePaginated: () => {
+    data: IDataProps[];
+    setData: (data: any) => void;
+    totalElements: number;
+    actualPage: number;
+    size: number;
+    handleChangePage: (newPage: number) => void;
+    handleChangePerPage: (value: number) => void;
+    loading: boolean;
+};

package/core/DataTable/usePaginated.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginated = exports.generateRandomDate = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _faker = _interopRequireDefault(require("faker"));
+
+var _splitEvery = _interopRequireDefault(require("ramda/es/splitEvery"));
+
+var _react = require("react");
+
+var _uuid = require("uuid");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var generateRandomDate = function generateRandomDate(size) {
+  var content = [];
+
+  for (var i = 0; i < size; i++) {
+    content.push({
+      id: (0, _uuid.v4)(),
+      product: _faker["default"].vehicle.model(),
+      price: _faker["default"].datatype["float"]({
+        min: 0,
+        max: 100000
+      }),
+      quantity: _faker["default"].datatype.number({
+        min: 0,
+        max: 30
+      }),
+      date: _faker["default"].date.recent(2)
+    });
+  }
+
+  return content;
+};
+
+exports.generateRandomDate = generateRandomDate;
+var MOCK_DELAY_VALUE = 1000;
+var DEFAULT_PAGE_SIZE = 5;
+var DEFAULT_MOCK_LENGTH = 35;
+var mockData = generateRandomDate(DEFAULT_MOCK_LENGTH);
+var INITIAL_STATE = {
+  items: [],
+  size: DEFAULT_PAGE_SIZE,
+  actualPage: 0,
+  totalItens: 0
+};
+
+var usePaginated = function usePaginated() {
+  var _useState = (0, _react.useState)(INITIAL_STATE),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var splitData = (0, _react.useMemo)(function () {
+    return (0, _splitEvery["default"])(state.size, mockData);
+  }, [state.size]);
+  (0, _react.useEffect)(function () {
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        totalItens: mockData.length
+      });
+    });
+    setTimeout(function () {
+      setLoading(false);
+    }, MOCK_DELAY_VALUE);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (splitData[state.actualPage]) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          items: splitData[state.actualPage]
+        });
+      });
+    } else {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          items: splitData[0],
+          actualPage: 0
+        });
+      });
+    }
+  }, [state.size]);
+  (0, _react.useEffect)(function () {
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        items: splitData[state.actualPage]
+      });
+    });
+  }, [state.actualPage]);
+
+  var handleChangePage = function handleChangePage(newPage) {
+    setLoading(true);
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        actualPage: newPage
+      });
+    });
+    setTimeout(function () {
+      setLoading(false);
+    }, MOCK_DELAY_VALUE);
+  };
+
+  var handleChangePerPage = function handleChangePerPage(value) {
+    setLoading(true);
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        size: value
+      });
+    });
+    setTimeout(function () {
+      setLoading(false);
+    }, MOCK_DELAY_VALUE);
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  var setData = function setData(data) {
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        items: data
+      });
+    });
+  };
+
+  return {
+    data: state.items,
+    setData: setData,
+    totalElements: state.totalItens,
+    actualPage: state.actualPage,
+    size: state.size,
+    handleChangePage: handleChangePage,
+    handleChangePerPage: handleChangePerPage,
+    loading: loading
+  };
+};
+
+exports.usePaginated = usePaginated;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.25.12",
+    "version": "0.25.13",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -31,10 +31,12 @@
         "@material-ui/lab": "4.0.0-alpha.54",
         "@material-ui/pickers": "3.2.6",
         "date-fns": "2.4.1",
+        "faker": "5.5.3",
         "material-table": "1.69.3",
         "material-ui-chip-input": "2.0.0-beta.2",
         "ramda": "0.25.0",
-        "react-number-format": "4.4.1"
+        "react-number-format": "4.4.1",
+        "uuid": "9.0.0"
     },
     "devDependencies": {
         "@babel/cli": "7.10.0",
@@ -48,11 +50,13 @@
         "@storybook/addon-links": "6.3.12",
         "@storybook/react": "6.3.12",
         "@testing-library/react": "9.3.2",
+        "@types/faker": "5.5.3",
         "@types/jest": "24.0.22",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
         "@types/react": "16.8.18",
         "@types/styled-components": "4.4.2",
+        "@types/uuid": "8.3.4",
         "@typescript-eslint/eslint-plugin": "1.6.0",
         "@typescript-eslint/parser": "1.6.0",
         "babel-loader": "8.2.3",

package/stories/DataTableQueryPaginated.stories.js

@@ -0,0 +1,583 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Crud = exports.NoHeader = exports.Empty = exports.Default = exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _lab = require("@material-ui/lab");
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _DataTableAction = require("../core/DataTable/DataTableAction");
+
+var _DataTableQueryPaginated = _interopRequireDefault(require("../core/DataTable/DataTableQueryPaginated"));
+
+var _types = require("../core/DataTable/types");
+
+var _usePaginated5 = require("../core/DataTable/usePaginated");
+
+var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'DataTableQueryPaginated',
+  component: _DataTableQueryPaginated["default"]
+};
+exports["default"] = _default;
+var columnsData = [{
+  title: 'Product',
+  type: 'text',
+  field: 'product',
+  cellStyle: {
+    maxWidth: '72px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  editable: true
+}, {
+  title: 'Price (R$)',
+  field: 'price',
+  type: 'numeric-float',
+  editable: false,
+  getValue: function getValue(value) {
+    return value.toFixed(2).replace('.', ',');
+  }
+}, {
+  title: 'Quantity',
+  field: 'quantity',
+  type: 'numeric-int',
+  editable: true,
+  cellStyle: {
+    width: '82px'
+  }
+}, {
+  title: 'Date',
+  field: 'date',
+  type: 'datetime',
+  editable: true,
+  getValue: function getValue(value) {
+    return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+  },
+  cellStyle: {
+    width: '200px'
+  }
+}];
+
+var generateSkeleton = function generateSkeleton(size, columns) {
+  var result = [];
+
+  for (var i = 0; i < size; i++) {
+    var table = /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+      key: "skeleton-".concat(i),
+      style: {
+        width: '10px'
+      }
+    }, columns.map(function (column) {
+      return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        align: column.align,
+        key: column.title,
+        style: column.cellStyle
+      }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, null));
+    }));
+
+    result.push(table);
+  }
+
+  return result;
+};
+
+var Default = function Default() {
+  var _usePaginated = (0, _usePaginated5.usePaginated)(),
+      data = _usePaginated.data,
+      totalElements = _usePaginated.totalElements,
+      actualPage = _usePaginated.actualPage,
+      size = _usePaginated.size,
+      handleChangePerPage = _usePaginated.handleChangePerPage,
+      handleChangePage = _usePaginated.handleChangePage,
+      loading = _usePaginated.loading;
+
+  var LoadNode = (0, _react.useMemo)(function () {
+    return generateSkeleton(size, columnsData);
+  }, [size]);
+  return /*#__PURE__*/_react["default"].createElement(_DataTableQueryPaginated["default"], {
+    data: data,
+    totalElements: totalElements,
+    handleChangePage: handleChangePage,
+    handleChangePerPage: handleChangePerPage,
+    perPage: size,
+    componentForEmpty: LoadNode,
+    page: actualPage,
+    pagination: {
+      rowsPerPage: size,
+      labelRowsPerPage: 'Row per page ',
+      clickable: loading
+    },
+    columns: columnsData
+  });
+};
+
+exports.Default = Default;
+
+var Empty = function Empty() {
+  var _usePaginated2 = (0, _usePaginated5.usePaginated)(),
+      totalElements = _usePaginated2.totalElements,
+      actualPage = _usePaginated2.actualPage,
+      size = _usePaginated2.size,
+      handleChangePerPage = _usePaginated2.handleChangePerPage,
+      handleChangePage = _usePaginated2.handleChangePage,
+      loading = _usePaginated2.loading;
+
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }];
+
+  var componentForEmpty = /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      boxSizing: 'border-box'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Empty DataTable"))));
+
+  var LoadNode = loading ? generateSkeleton : componentForEmpty;
+  return /*#__PURE__*/_react["default"].createElement(_DataTableQueryPaginated["default"], {
+    data: [],
+    bodyStyle: {
+      position: 'relative'
+    },
+    hiddenRowHeight: 53,
+    handleChangePage: handleChangePage,
+    handleChangePerPage: handleChangePerPage,
+    totalElements: totalElements,
+    page: actualPage,
+    perPage: size,
+    componentForEmpty: LoadNode,
+    pagination: {
+      rowsPerPage: 5,
+      labelRowsPerPage: 'Row per page'
+    },
+    columns: columns
+  });
+};
+
+exports.Empty = Empty;
+
+var NoHeader = function NoHeader() {
+  var _usePaginated3 = (0, _usePaginated5.usePaginated)(),
+      totalElements = _usePaginated3.totalElements,
+      actualPage = _usePaginated3.actualPage,
+      size = _usePaginated3.size,
+      handleChangePerPage = _usePaginated3.handleChangePerPage,
+      handleChangePage = _usePaginated3.handleChangePage,
+      loading = _usePaginated3.loading,
+      data = _usePaginated3.data;
+
+  var LoadNode = (0, _react.useMemo)(function () {
+    return generateSkeleton(size, columnsData);
+  }, [size]);
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }];
+  return /*#__PURE__*/_react["default"].createElement(_DataTableQueryPaginated["default"], {
+    data: data,
+    handleChangePage: handleChangePage,
+    handleChangePerPage: handleChangePerPage,
+    totalElements: totalElements,
+    page: actualPage,
+    perPage: size,
+    noHeader: true,
+    hiddenRowHeight: 53,
+    componentForEmpty: LoadNode,
+    pagination: {
+      rowsPerPage: 5,
+      labelRowsPerPage: 'Row per page',
+      clickable: loading
+    },
+    columns: columns
+  });
+};
+
+exports.NoHeader = NoHeader;
+
+var Crud = function Crud() {
+  var _usePaginated4 = (0, _usePaginated5.usePaginated)(),
+      totalElements = _usePaginated4.totalElements,
+      actualPage = _usePaginated4.actualPage,
+      size = _usePaginated4.size,
+      handleChangePerPage = _usePaginated4.handleChangePerPage,
+      handleChangePage = _usePaginated4.handleChangePage,
+      loading = _usePaginated4.loading,
+      data = _usePaginated4.data,
+      setData = _usePaginated4.setData;
+
+  var newData = [].concat(columnsData, [{
+    title: 'Actions',
+    type: 'text',
+    field: 'product',
+    cellStyle: {
+      maxWidth: '30px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }]);
+  var LoadNode = (0, _react.useMemo)(function () {
+    return generateSkeleton(size, newData);
+  }, [size]);
+
+  var date = function date() {
+    return new Date();
+  };
+
+  var controllerRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      errors = _useState2[0],
+      setErrors = _useState2[1];
+
+  var randomId = function randomId() {
+    return Math.random().toString(36).substr(0, 12);
+  };
+
+  var handleAdd = function handleAdd() {
+    controllerRef.current.addRow({
+      id: randomId(),
+      date: date()
+    });
+  };
+
+  var handleEdit = function handleEdit(id) {
+    return function () {
+      controllerRef.current.editRow(id);
+    };
+  };
+
+  var handleDelete = function handleDelete(id) {
+    return function () {
+      controllerRef.current.pushRowView(id, 'confirmDelete');
+    };
+  };
+
+  var handleView = function handleView(id) {
+    return function () {
+      controllerRef.current.viewRow(id);
+    };
+  };
+
+  var isNullable = function isNullable(x) {
+    return x == null;
+  };
+
+  var isNotPositive = function isNotPositive(x) {
+    return x <= 0;
+  };
+
+  var isAfterNow = function isAfterNow(x) {
+    return +x > +new Date();
+  };
+
+  var isEmpty = function isEmpty(x) {
+    return x.trim().length === 0;
+  };
+
+  var handleErrors = function handleErrors(id) {
+    var nextItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isPartial = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var errorFields = [{
+      field: 'quantity',
+      isErrorIf: [isNaN, isNotPositive]
+    }, {
+      field: 'date',
+      isErrorIf: [isAfterNow]
+    }, {
+      field: 'product',
+      isErrorIf: [isEmpty]
+    }, {
+      field: 'price',
+      isErrorIf: [isNaN, isNotPositive]
+    }].filter(function (_ref) {
+      var field = _ref.field,
+          isErrorIf = _ref.isErrorIf;
+      var value = nextItem[field];
+
+      if (isNullable(value)) {
+        if (isPartial) {
+          return false;
+        }
+
+        return true;
+      }
+
+      return isErrorIf.some(function (cond) {
+        return cond(value);
+      });
+    }).map(function (_ref2) {
+      var field = _ref2.field;
+      return field;
+    });
+    setErrors(function (errors) {
+      return _objectSpread(_objectSpread({}, errors), {}, (0, _defineProperty2["default"])({}, id, new Set(errorFields)));
+    });
+    return errorFields.length > 0;
+  };
+
+  var handleSave = function handleSave(id) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return function () {
+      var nextItem = controllerRef.current.getEditedRowData(id);
+
+      if (!nextItem) {
+        return;
+      }
+
+      if (handleErrors(id, nextItem, !isNew)) {
+        return;
+      }
+
+      if (isNew) {
+        setData([nextItem].concat((0, _toConsumableArray2["default"])(data)));
+      } else {
+        setData(data.map(function (item) {
+          if (item.id === id) {
+            return _objectSpread(_objectSpread({}, item), nextItem);
+          }
+
+          return item;
+        }));
+      }
+
+      controllerRef.current.viewRow(id);
+    };
+  };
+
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      width: '120px'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: true,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }, {
+    title: 'Actions',
+    type: 'actions',
+    align: 'center',
+    cellStyle: {
+      width: '60px'
+    },
+    renderCell: function renderCell(_ref3) {
+      var id = _ref3.data.id,
+          rowMode = _ref3.rowMode,
+          _ref3$isNew = _ref3.isNew,
+          isNew = _ref3$isNew === void 0 ? false : _ref3$isNew;
+
+      if (rowMode === _types.RowMode.View) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Save",
+        onClick: handleSave(id, isNew)
+      }, /*#__PURE__*/_react["default"].createElement(_Save["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Cancel",
+        onClick: handleView(id)
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)));
+    }
+  }];
+  var rowViews = {
+    confirmDelete: function confirmDelete(_ref4) {
+      var data = _ref4.data;
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        colSpan: 5
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          padding: '16px',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Confirm Delete \"", data.product, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CheckIcon",
+        onClick: function onClick() {
+          controllerRef.current.popRowView(data.id);
+          setData(function (dataList) {
+            return dataList.filter(function (item) {
+              return item.id !== data.id;
+            });
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CancelIcon",
+        onClick: function onClick() {
+          controllerRef.current.popRowView(data.id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleAdd
+  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTableQueryPaginated["default"], {
+    data: data,
+    controllerRef: controllerRef,
+    errors: errors,
+    handleChangePage: handleChangePage,
+    handleChangePerPage: handleChangePerPage,
+    componentForEmpty: LoadNode,
+    totalElements: totalElements,
+    page: actualPage,
+    perPage: size,
+    pagination: {
+      rowsPerPage: 5,
+      clickable: loading,
+      showFirstButton: true,
+      showLastButton: true,
+      labelRowsPerPage: 'Rows per page:',
+      labelDisplayedRows: function labelDisplayedRows(_ref5) {
+        var from = _ref5.from,
+            to = _ref5.to,
+            count = _ref5.count;
+        return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
+      }
+    },
+    rowViews: rowViews,
+    columns: columns
+  }));
+};
+
+exports.Crud = Crud;