@krowdy-ui/views
Version:
React components that implement Google's Material Design.
861 lines (822 loc) • 30.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import XDate from 'xdate';
import { Paper, TableBody, TableCell, TableHead, TableSortLabel, TablePagination, TableRow, Checkbox, Typography, MenuItem, FormGroup, FormControlLabel, Box, InputAdornment, TextField, Button, Select, Popover, makeStyles, Input } from '@krowdy-ui/core'; // import KeyboardDatePicker from '@material-ui/lab/'
import { Table as MuiTable, TableContainer, IconButton } from '@krowdy-ui/core/';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import SearchIcon from '@material-ui/icons/Search';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
import Autocomplete from '@material-ui/lab/Autocomplete';
var useStyles = makeStyles(function (theme) {
return {
addCell: {
color: theme.palette.primary.main,
cursor: 'pointer',
textAlign: 'right'
},
alignCheckBox: {
display: 'flex',
justifyContent: 'center'
},
buttonFooter: {
fontSize: 12,
width: '100px'
},
checkImage: {},
checkRoot: {
'& $checkbox': {
display: 'none'
},
'&:hover': {
'& $checkImage': {
display: 'none'
},
'& $checkbox': {
display: 'inline-flex'
}
}
},
checkbox: {},
container: {
flex: 1,
overflow: 'auto'
},
containerHeaderTable: {
padding: theme.spacing(2)
},
containerSearch: {
display: 'flex',
justifyContent: 'space-between'
},
containerTable: {
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
width: '100%'
},
customBottomAdd: {
border: 'dashed 1px',
margin: '2px 10px',
textTransform: 'initial'
},
customCheckbox: {
'& svg': {
height: 18,
width: 18
}
},
customMenuHead: {
padding: theme.spacing(2)
},
customMenuHeadTitle: {
color: theme.palette.grey[800],
fontWeight: 'bold',
marginBottom: 12
},
disableText: {},
editableCell: {
display: 'flex'
},
emptyComponent: {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
width: 'auto'
},
emptyContainer: {
alignItems: 'center',
display: 'flex',
flex: 1,
justifyContent: 'center',
justifyItems: 'center',
paddingTop: theme.spacing(1.5)
},
flexEnd: {
justifyContent: 'flex-end'
},
focusRow: {
backgroundColor: theme.palette.primary[10]
},
headerTable: {
fontWeight: 'bold'
},
hiddenCheck: {
'& $checkImage': {
display: 'none'
},
'& $checkbox': {
display: 'inline-flex'
}
},
iconAdd: {
'&:nth-last-child(1)': {
marginLeft: theme.spacing(1)
},
cursor: 'pointer',
fontSize: 18
},
inputSearch: {
'& * input': {
fontSize: 14,
padding: '12px 10px !important'
},
'& > div': {
padding: '0 14px 0 0 !important'
},
margin: '2px 0'
},
menuItem: {
fontSize: 14
},
optionSelect: {
fontSize: 14
},
searchIcon: {
cursor: 'pointer'
},
sizeIcon: {
height: 30,
width: 30
},
spaceBetween: {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between'
},
stickyHeader: {
left: 'inherit'
},
tableHead: {
backgroundColor: theme.palette.grey[100]
},
textAmount: {
'&$disableText': {
color: theme.palette.grey[500]
},
color: theme.palette.primary.main,
fontWeight: 'bold'
},
textTotal: {
fontWeight: 'bold',
lineHeight: '20px',
marginRight: 5
},
titleTable: {
fontWeight: 'bold'
}
};
}, {
name: 'KrowdyTable'
});
var _ref3 = /*#__PURE__*/React.createElement(SearchIcon, null);
var _ref5 = /*#__PURE__*/React.createElement(MoreVertIcon, null);
var _ref12 = /*#__PURE__*/React.createElement(TableCell, null);
var Table = function Table(_ref) {
var _ref$checkIcons = _ref.checkIcons,
checkIcons = _ref$checkIcons === void 0 ? [] : _ref$checkIcons,
titleTable = _ref.titleTable,
titleButton = _ref.titleButton,
paymentAmount = _ref.paymentAmount,
iconButton = _ref.iconButton,
_ref$maxHeight = _ref.maxHeight,
maxHeight = _ref$maxHeight === void 0 ? 'auto' : _ref$maxHeight,
_ref$maxWidth = _ref.maxWidth,
maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
_ref$pagination = _ref.pagination,
pagination = _ref$pagination === void 0 ? {} : _ref$pagination,
_ref$newCellProps = _ref.newCellProps,
newCellProps = _ref$newCellProps === void 0 ? {} : _ref$newCellProps,
_ref$sortTable = _ref.sortTable,
sortTable = _ref$sortTable === void 0 ? {} : _ref$sortTable,
_ref$columns = _ref.columns,
columns = _ref$columns === void 0 ? [] : _ref$columns,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? [] : _ref$rows,
_ref$searchSuggestion = _ref.searchSuggestions,
searchSuggestions = _ref$searchSuggestion === void 0 ? [] : _ref$searchSuggestion,
_ref$stickyHeader = _ref.stickyHeader,
stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
_ref$withFooter = _ref.withFooter,
withFooter = _ref$withFooter === void 0 ? false : _ref$withFooter,
_ref$withCheckbox = _ref.withCheckbox,
withCheckbox = _ref$withCheckbox === void 0 ? false : _ref$withCheckbox,
_ref$withPagination = _ref.withPagination,
withPagination = _ref$withPagination === void 0 ? false : _ref$withPagination,
_ref$withHeader = _ref.withHeader,
withHeader = _ref$withHeader === void 0 ? false : _ref$withHeader,
_ref$withMenuColumns = _ref.withMenuColumns,
withMenuColumns = _ref$withMenuColumns === void 0 ? false : _ref$withMenuColumns,
_ref$withOrder = _ref.withOrder,
withOrder = _ref$withOrder === void 0 ? false : _ref$withOrder,
_ref$withSearch = _ref.withSearch,
withSearch = _ref$withSearch === void 0 ? true : _ref$withSearch,
_ref$withAutocomplete = _ref.withAutocomplete,
withAutocomplete = _ref$withAutocomplete === void 0 ? false : _ref$withAutocomplete,
_ref$withButton = _ref.withButton,
withButton = _ref$withButton === void 0 ? false : _ref$withButton,
_ref$enableAddCell = _ref.enableAddCell,
enableAddCell = _ref$enableAddCell === void 0 ? false : _ref$enableAddCell,
_ref$currency = _ref.currency,
currency = _ref$currency === void 0 ? 'S/' : _ref$currency,
_ref$addNewCell = _ref.addNewCell,
addNewCell = _ref$addNewCell === void 0 ? false : _ref$addNewCell,
_ref$onHandleSortTabl = _ref.onHandleSortTable,
onHandleSortTable = _ref$onHandleSortTabl === void 0 ? function () {
return false;
} : _ref$onHandleSortTabl,
_ref$onHandleSearch = _ref.onHandleSearch,
onHandleSearch = _ref$onHandleSearch === void 0 ? function () {
return false;
} : _ref$onHandleSearch,
_ref$onHandleBtnActio = _ref.onHandleBtnAction,
onHandleBtnAction = _ref$onHandleBtnActio === void 0 ? function () {
return false;
} : _ref$onHandleBtnActio,
_ref$onHandleChangePa = _ref.onHandleChangePage,
onHandleChangePage = _ref$onHandleChangePa === void 0 ? function () {
return false;
} : _ref$onHandleChangePa,
_ref$onHandleChangeRo = _ref.onHandleChangeRowsPerPage,
onHandleChangeRowsPerPage = _ref$onHandleChangeRo === void 0 ? function () {
return false;
} : _ref$onHandleChangeRo,
_ref$onHandleSelectAl = _ref.onHandleSelectAll,
onHandleSelectAll = _ref$onHandleSelectAl === void 0 ? function () {
return false;
} : _ref$onHandleSelectAl,
_ref$onHandleSelectIt = _ref.onHandleSelectItem,
onHandleSelectItem = _ref$onHandleSelectIt === void 0 ? function () {
return false;
} : _ref$onHandleSelectIt,
_ref$onHandlePaymentB = _ref.onHandlePaymentButton,
onHandlePaymentButton = _ref$onHandlePaymentB === void 0 ? function () {
return false;
} : _ref$onHandlePaymentB,
_ref$onHandleToggleCo = _ref.onHandleToggleColumnTable,
onHandleToggleColumnTable = _ref$onHandleToggleCo === void 0 ? function () {
return false;
} : _ref$onHandleToggleCo,
_ref$onHandleAddNewCe = _ref.onHandleAddNewCell,
onHandleAddNewCell = _ref$onHandleAddNewCe === void 0 ? function () {
return false;
} : _ref$onHandleAddNewCe,
_ref$onHandleSendNewC = _ref.onHandleSendNewCell,
onHandleSendNewCell = _ref$onHandleSendNewC === void 0 ? function () {
return false;
} : _ref$onHandleSendNewC,
_ref$onHandleClickRow = _ref.onHandleClickRow,
onHandleClickRow = _ref$onHandleClickRow === void 0 ? function () {
return false;
} : _ref$onHandleClickRow,
_ref$onHandleSelectAu = _ref.onHandleSelectAutocomplete,
onHandleSelectAutocomplete = _ref$onHandleSelectAu === void 0 ? function () {
return false;
} : _ref$onHandleSelectAu;
var _sortTable$orderBy = sortTable.orderBy,
orderBy = _sortTable$orderBy === void 0 ? '' : _sortTable$orderBy,
_sortTable$sort = sortTable.sort,
sort = _sortTable$sort === void 0 ? 'asc' : _sortTable$sort;
var _pagination$totalPage = pagination.totalPages,
totalPages = _pagination$totalPage === void 0 ? 0 : _pagination$totalPage,
_pagination$totalItem = pagination.totalItems,
totalItems = _pagination$totalItem === void 0 ? 0 : _pagination$totalItem,
page = pagination.page,
perPage = pagination.perPage,
_pagination$rowsPerPa = pagination.rowsPerPageOptions,
rowsPerPageOptions = _pagination$rowsPerPa === void 0 ? [10, 25, 50, 100] : _pagination$rowsPerPa;
var validateNewCellProps = Object.keys(newCellProps).length;
var classes = useStyles();
var inputSearch = useRef(null);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
openMenu = _useState2[0],
setOpenMenu = _useState2[1];
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
localNewCellProps = _useState4[0],
setLocalNewCellProps = _useState4[1];
var visibleColumns = columns.filter(function (_ref2) {
var _ref2$visible = _ref2.visible,
visible = _ref2$visible === void 0 ? true : _ref2$visible;
return visible;
});
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
validNewCell = _useState6[0],
setValidNewCell = _useState6[1];
useEffect(function () {
if (!addNewCell) setLocalNewCellProps({});
}, [addNewCell]);
useEffect(function () {
var localCellLength = Object.keys(localNewCellProps).length;
if (validateNewCellProps && !localCellLength) {
var cell = {};
for (var key in newCellProps) {
cell[key] = _typeof(newCellProps[key]) !== 'object' && newCellProps[key] !== '' ? newCellProps[key] : '';
}
setLocalNewCellProps(cell);
}
}, [localNewCellProps, newCellProps, validateNewCellProps]);
useEffect(function () {
var isValid = Object.values(localNewCellProps).every(function (once) {
return once !== '';
});
if (isValid && !validNewCell) setValidNewCell(true);else if (!isValid && validNewCell) setValidNewCell(false);
}, [localNewCellProps, validNewCell]);
var _handleClickOpenMenu = function _handleClickOpenMenu(event) {
setOpenMenu(event.currentTarget);
};
var _handleClickClose = function _handleClickClose() {
setOpenMenu(null);
};
var _handleSearchValidate = function _handleSearchValidate(e) {
var value = e.target.value;
if (e.keyCode === 13) onHandleSearch(value);
};
var _handleSortTable = function _handleSortTable(id, ref) {
var orderBy = ref.orderBy,
sort = ref.sort;
var invertSort = sort === 'asc' ? 'desc' : 'asc';
if (id !== orderBy) return onHandleSortTable({
orderBy: id,
sort: 'asc'
});
return onHandleSortTable({
orderBy: id,
sort: invertSort
});
};
var _handleRemoveCell = function _handleRemoveCell() {
onHandleAddNewCell();
setLocalNewCellProps({});
};
var _handleChangeNewCell = function _handleChangeNewCell(value, source) {
setLocalNewCellProps(function (prevState) {
return _extends({}, prevState, _defineProperty({}, source, value));
});
};
var _handleSendNewCell = function _handleSendNewCell() {
onHandleSendNewCell(localNewCellProps);
};
var _handleAddNewCell = function _handleAddNewCell() {
onHandleAddNewCell();
};
var _handleClickTableRow = function _handleClickTableRow(id) {
onHandleClickRow(id);
};
var _handleClickSelectItem = function _handleClickSelectItem(e, id) {
e.stopPropagation();
onHandleSelectItem(id);
};
var _handleChangePage = function _handleChangePage(currentPage) {
onHandleChangePage(parseInt(currentPage));
};
return /*#__PURE__*/React.createElement(Paper, {
className: classes.containerTable,
variant: "outlined"
}, withHeader ? /*#__PURE__*/React.createElement("div", {
className: clsx(classes.containerHeaderTable, titleTable && classes.spaceBetween)
}, titleTable && /*#__PURE__*/React.createElement(Typography, {
className: classes.titleTable,
variant: "body2"
}, titleTable), /*#__PURE__*/React.createElement("div", {
className: clsx(classes.containerSearch, titleTable && classes.flexEnd)
}, withSearch ? withAutocomplete ? /*#__PURE__*/React.createElement(Autocomplete, {
freeSolo: true,
noOptionsText: "No hay coincidencias",
onChange: onHandleSelectAutocomplete,
options: searchSuggestions.map(function (option) {
return option.title;
}),
popupIcon: _ref3,
renderInput: function renderInput(params) {
return /*#__PURE__*/React.createElement(TextField, _extends({}, params, {
className: classes.inputSearch,
fullWidth: true,
InputLabelProps: {
shrink: false
},
InputProps: _extends({}, params.InputProps, {
endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
position: "end"
}, /*#__PURE__*/React.createElement(SearchIcon, {
className: classes.searchIcon,
onClick: function onClick() {
return onHandleSearch(inputSearch.current.value);
}
}))
}),
inputRef: inputSearch,
onKeyUp: _handleSearchValidate,
placeholder: "Buscar",
variant: "outlined"
}));
},
style: {
width: 400
}
}) : /*#__PURE__*/React.createElement(TextField, {
className: classes.inputSearch,
InputLabelProps: {
shrink: false
},
InputProps: {
endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
position: "end"
}, /*#__PURE__*/React.createElement(SearchIcon, {
className: classes.searchIcon,
onClick: function onClick() {
return onHandleSearch(inputSearch.current.value);
}
}))
},
inputRef: inputSearch,
onKeyUp: _handleSearchValidate,
placeholder: "Buscar",
style: {
width: 400
},
variant: "outlined"
}) : null, withButton ? /*#__PURE__*/React.createElement(Button, {
className: classes.customBottomAdd,
color: "primary",
onClick: onHandleBtnAction,
variant: "outlined"
}, iconButton, titleButton) : null)) : null, /*#__PURE__*/React.createElement(TableContainer, {
className: classes.container,
style: {
maxHeight: maxHeight,
maxWidth: maxWidth
}
}, /*#__PURE__*/React.createElement(MuiTable, {
"aria-label": "sticky table",
stickyHeader: stickyHeader
}, /*#__PURE__*/React.createElement(TableHead, {
className: classes.tableHead
}, /*#__PURE__*/React.createElement(TableRow, null, withCheckbox ? /*#__PURE__*/React.createElement(TableCell, {
padding: "checkbox"
}, /*#__PURE__*/React.createElement(Checkbox, {
color: "primary",
inputProps: {
'aria-label': 'select all desserts'
},
onChange: function onChange(e) {
return onHandleSelectAll(e.target.checked);
}
})) : null, visibleColumns.map(function (_ref4) {
var key = _ref4.key,
align = _ref4.align,
minWidth = _ref4.minWidth,
_ref4$label = _ref4.label,
label = _ref4$label === void 0 ? null : _ref4$label,
Component = _ref4.columnComponent,
ordering = _ref4.ordering;
return /*#__PURE__*/React.createElement(TableCell, {
align: align,
classes: {
stickyHeader: classes.stickyHeader
},
key: key,
sortDirection: orderBy === key ? sort : false,
style: {
minWidth: minWidth
}
}, withOrder && ordering ? /*#__PURE__*/React.createElement(TableSortLabel, {
active: orderBy === key,
direction: orderBy === key ? sort : 'asc',
onClick: function onClick() {
return _handleSortTable(key, sortTable);
}
}, Component ? /*#__PURE__*/React.createElement(Component, null) : /*#__PURE__*/React.createElement(Typography, {
className: classes.headerTable,
variant: "body1"
}, label)) : Component ? /*#__PURE__*/React.createElement(Component, null) : /*#__PURE__*/React.createElement(Typography, {
className: classes.headerTable,
variant: "body1"
}, label));
}), withMenuColumns ? /*#__PURE__*/React.createElement(TableCell, {
padding: "checkbox"
}, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
onClick: _handleClickOpenMenu
}, _ref5), /*#__PURE__*/React.createElement(Popover, {
anchorEl: openMenu,
anchorOrigin: {
horizontal: 'left',
vertical: 'bottom'
},
onClose: _handleClickClose,
open: Boolean(openMenu),
transformOrigin: {
horizontal: 'right',
vertical: 'top'
}
}, /*#__PURE__*/React.createElement("div", {
className: classes.customMenuHead
}, /*#__PURE__*/React.createElement(Typography, {
className: classes.customMenuHeadTitle,
variant: "body2"
}, "Columnas"), /*#__PURE__*/React.createElement(FormGroup, null, columns.map(function (_ref6) {
var key = _ref6.key,
label = _ref6.label,
_ref6$visible = _ref6.visible,
visible = _ref6$visible === void 0 ? true : _ref6$visible,
excludeOfFilter = _ref6.excludeOfFilter;
return /*#__PURE__*/React.createElement(React.Fragment, null, excludeOfFilter ? null : /*#__PURE__*/React.createElement(FormControlLabel, {
control: /*#__PURE__*/React.createElement(Checkbox, {
checked: visible,
className: classes.customCheckbox,
color: "primary",
disabled: columns.filter(function (_ref7) {
var visible = _ref7.visible;
return visible;
}).length === 1 && visible,
onChange: function onChange() {
return onHandleToggleColumnTable(key);
},
value: key
}),
key: key,
label: label
}));
}))))) : null)), /*#__PURE__*/React.createElement(TableBody, null, enableAddCell && validateNewCellProps ? addNewCell ? /*#__PURE__*/React.createElement(TableRow, null, visibleColumns.map(function (_ref8, index) {
var key = _ref8.key,
type = _ref8.type,
editable = _ref8.editable;
var lastCell = index === visibleColumns.length - 1;
return /*#__PURE__*/React.createElement(TableCell, {
key: key
}, /*#__PURE__*/React.createElement(Box, {
alignItems: "center",
display: "flex",
justifyContent: lastCell ? 'space-between' : 'flex-start'
}, editable ? type === 'select' ? /*#__PURE__*/React.createElement(Select, {
className: classes.optionSelect,
name: key,
onChange: function onChange(e) {
return _handleChangeNewCell(e.target.value, key);
},
value: localNewCellProps[key]
}, newCellProps[key].map(function (_ref9, index) {
var value = _ref9.value,
label = _ref9.label;
return /*#__PURE__*/React.createElement(MenuItem, {
className: classes.optionSelect,
key: index,
name: label,
value: value
}, label);
})) : /*#__PURE__*/React.createElement(Input, {
className: classes.inputSearch,
defaultValue: newCellProps[key],
fullWidth: true,
onChange: function onChange(e) {
return _handleChangeNewCell(e.target.value, key);
},
type: type
}) : type === 'today' ? /*#__PURE__*/React.createElement(Typography, null, newCellProps[key] ? newCellProps[key] : localNewCellProps[key] ? localNewCellProps[key] : function () {
var date = new XDate().toString('yyyy/MM/dd');
_handleChangeNewCell(date, key);
return date;
}()) : type === 'hours' ? /*#__PURE__*/React.createElement(Typography, null, newCellProps[key] ? newCellProps[key] : localNewCellProps[key] ? localNewCellProps[key] : function () {
var hours = new XDate().toString('h(:mm)TT');
_handleChangeNewCell(hours, key);
return hours;
}()) : /*#__PURE__*/React.createElement(Typography, null, Array.isArray(newCellProps[key]) ? newCellProps[key].join(', ') : newCellProps[key]), lastCell && /*#__PURE__*/React.createElement(Box, {
display: "flex",
marginLeft: 2
}, /*#__PURE__*/React.createElement(CloseIcon, {
className: clsx(classes.iconAdd),
color: "error",
onClick: _handleRemoveCell
}), /*#__PURE__*/React.createElement(CheckIcon, {
className: clsx(classes.iconAdd),
color: validNewCell ? 'primary' : 'disabled',
onClick: function onClick() {
return validNewCell ? _handleSendNewCell() : null;
}
}))));
})) : /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
colSpan: columns.length
}, /*#__PURE__*/React.createElement(Typography, {
className: classes.addCell,
onClick: _handleAddNewCell
}, "Agregar incidente"))) : null, rows.length ? rows.map(function (row, index) {
var _id = row._id,
selected = row.selected,
disabled = row.disabled,
codeCheck = row.codeCheck,
urlIcon = row.urlIcon,
focus = row.focus;
var currentImage = checkIcons.find(function (_ref10) {
var code = _ref10.code;
return code === codeCheck;
});
return /*#__PURE__*/React.createElement(TableRow, {
className: clsx(focus && classes.focusRow),
hover: true,
key: index,
onClick: function onClick() {
return _handleClickTableRow(_id);
}
}, withCheckbox ? /*#__PURE__*/React.createElement(TableCell, {
padding: "checkbox"
}, checkIcons && checkIcons.length ? /*#__PURE__*/React.createElement("div", {
className: clsx(classes.alignCheckBox, !disabled && (selected ? classes.hiddenCheck : classes.checkRoot))
}, !disabled && /*#__PURE__*/React.createElement(Checkbox, {
checked: selected,
className: classes.checkbox,
color: "primary",
disabled: disabled,
onClick: function onClick(e) {
return _handleClickSelectItem(e, _id);
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.checkImage
}, currentImage && currentImage.component)) : urlIcon ? /*#__PURE__*/React.createElement("div", {
className: clsx(classes.alignCheckBox, !disabled && (selected ? classes.hiddenCheck : classes.checkRoot))
}, !disabled && /*#__PURE__*/React.createElement(Checkbox, {
checked: selected,
className: classes.checkbox,
color: "primary",
disabled: disabled,
onClick: function onClick(e) {
return _handleClickSelectItem(e, _id);
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.checkImage
}, /*#__PURE__*/React.createElement("img", {
alt: "icon",
className: classes.sizeIcon,
src: urlIcon
}))) : /*#__PURE__*/React.createElement(Checkbox, {
checked: selected,
className: classes.checkbox,
color: "primary",
disabled: disabled,
onClick: function onClick(e) {
return _handleClickSelectItem(e, _id);
}
})) : null, visibleColumns.map(function (_ref11) {
var key = _ref11.key,
align = _ref11.align,
Componente = _ref11.component,
currencyTableCell = _ref11.currency;
return Componente ? /*#__PURE__*/React.createElement(TableCell, {
align: align || 'left',
key: key
}, /*#__PURE__*/React.createElement(Componente, {
value: row[key]
})) : /*#__PURE__*/React.createElement(TableCell, {
align: align || 'left',
key: key
}, /*#__PURE__*/React.createElement(Typography, {
className: classes.bodyTable,
variant: "body1"
}, currencyTableCell && "".concat(currency, " "), Array.isArray(row[key]) ? row[key].join(', ') : row[key]));
}), withMenuColumns ? _ref12 : null);
}) : null)), !rows.length && /*#__PURE__*/React.createElement("div", {
className: classes.emptyContainer
}, /*#__PURE__*/React.createElement("img", {
alt: "empty",
className: classes.emptyComponent,
component: "img",
src: "https://s3.amazonaws.com/cdn.krowdy.com/media/images/Mesa_de_trabajo.svg"
}))), withPagination ? /*#__PURE__*/React.createElement(TablePagination, {
backIconButtonText: "P\xE1gina anterior",
component: "div" // count={total}
,
labelRowsPerPage: "Mostrar",
nextIconButtonText: "P\xE1gina siguiente",
onChangePage: _handleChangePage,
onChangeRowsPerPage: onHandleChangeRowsPerPage,
page: page,
rowsPerPage: perPage,
rowsPerPageOptions: rowsPerPageOptions,
totalItems: totalItems,
totalPages: totalPages
}) : null, withFooter ? /*#__PURE__*/React.createElement(Box, {
className: classes.footerTable,
display: "flex",
justifyContent: "flex-end",
padding: 2
}, /*#__PURE__*/React.createElement(Box, {
className: classes.containerPayment,
display: "flex"
}, /*#__PURE__*/React.createElement(Box, {
alignItems: "center",
className: classes.paymentText,
display: "flex",
marginRight: 3
}, /*#__PURE__*/React.createElement(Typography, {
className: classes.textTotal,
variant: "h6"
}, "Total"), /*#__PURE__*/React.createElement(Typography, {
className: clsx(classes.textAmount, !paymentAmount && classes.disableText),
color: "primary",
variant: "h5"
}, currency, " ", paymentAmount.toFixed(2))), /*#__PURE__*/React.createElement(Button, {
className: classes.buttonFooter,
color: "primary",
disabled: !paymentAmount,
onClick: onHandlePaymentButton,
variant: "contained"
}, "Pagar"))) : null);
};
process.env.NODE_ENV !== "production" ? Table.propTypes = {
/**
* Columns sirve para pasar la cabecera de la tabla
*/
addNewCell: PropTypes.bool,
checkIcons: PropTypes.arrayOf(PropTypes.shape({
code: PropTypes.string.isRequired,
component: PropTypes.node.isRequired
})),
columns: PropTypes.arrayOf(PropTypes.shape({
align: PropTypes.string,
columnComponent: PropTypes.node,
currency: PropTypes.bool,
key: PropTypes.string.isRequired,
label: PropTypes.string,
minWidth: PropTypes.number,
ordering: PropTypes.bool
})).isRequired,
/**
* eneableAddCell muetra un boton para agregar una nueva celda
*/
currency: PropTypes.string,
/**
* iconBotton recibe un nodo para pinterlo al boton del header
*/
enableAddCell: PropTypes.bool,
/**
* maxHeigth string | number para la altura de la tabla
*/
iconButton: PropTypes.element,
/**
* newCellProps un array de objetos con las keys a editar cuando se agregue una nueva celda, requiere de `enableAddCell`
*/
maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
newCellProps: PropTypes.object,
onHandleAddNewCell: PropTypes.func,
onHandleBtnAction: PropTypes.func,
onHandleChangePage: PropTypes.func,
onHandleChangeRowsPerPage: PropTypes.func,
onHandleClickRow: PropTypes.func,
onHandlePaymentButton: PropTypes.func,
onHandleSearch: PropTypes.func,
onHandleSelectAll: PropTypes.func,
onHandleSelectAutocomplete: PropTypes.func,
onHandleSelectItem: PropTypes.func,
onHandleSendNewCell: PropTypes.func,
onHandleSortTable: PropTypes.func,
/**
* pagination objeto para paginar, requiere de `withPagination`
*/
onHandleToggleColumnTable: PropTypes.func,
/**
* paymentAmount number para mostrar total a pagar
*/
pagination: PropTypes.shape({
page: PropTypes.number.isRequired,
perPage: PropTypes.number.isRequired,
rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
totalItems: PropTypes.number,
totalPages: PropTypes.number // total : PropTypes.number.isRequired
}),
/**
* rows son las filas de la tabla
*/
paymentAmount: PropTypes.number,
rows: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired
})).isRequired,
searchSuggestions: PropTypes.array,
sortTable: PropTypes.shape({
orderBy: PropTypes.string,
sort: PropTypes.oneOf(['asc', 'desc'])
}),
stickyHeader: PropTypes.bool,
titleButton: PropTypes.string,
titleTable: PropTypes.string,
/**
* withAutocomplete muestra el search con autocompletado, requiere de `searchSuggestions`
*/
withAutocomplete: PropTypes.bool,
withButton: PropTypes.bool,
withCheckbox: PropTypes.bool,
withFooter: PropTypes.bool,
withHeader: PropTypes.bool,
withMenuColumns: PropTypes.bool,
withOrder: PropTypes.bool,
withPagination: PropTypes.bool,
withSearch: PropTypes.bool
} : void 0;
export default Table;