@krowdy-ui/views
Version:
React components that implement Google's Material Design.
891 lines (832 loc) • 34.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _xdate = _interopRequireDefault(require("xdate"));
var _core = require("@krowdy-ui/core");
var _core2 = require("@krowdy-ui/core/");
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
var useStyles = (0, _core.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["default"].createElement(_Search["default"], null);
var _ref5 = /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null);
var _ref12 = /*#__PURE__*/_react["default"].createElement(_core.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 = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
openMenu = _useState2[0],
setOpenMenu = _useState2[1];
var _useState3 = (0, _react.useState)({}),
_useState4 = (0, _slicedToArray2["default"])(_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 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
validNewCell = _useState6[0],
setValidNewCell = _useState6[1];
(0, _react.useEffect)(function () {
if (!addNewCell) setLocalNewCellProps({});
}, [addNewCell]);
(0, _react.useEffect)(function () {
var localCellLength = Object.keys(localNewCellProps).length;
if (validateNewCellProps && !localCellLength) {
var cell = {};
for (var key in newCellProps) {
cell[key] = (0, _typeof2["default"])(newCellProps[key]) !== 'object' && newCellProps[key] !== '' ? newCellProps[key] : '';
}
setLocalNewCellProps(cell);
}
}, [localNewCellProps, newCellProps, validateNewCellProps]);
(0, _react.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 (0, _extends3["default"])({}, prevState, (0, _defineProperty2["default"])({}, 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["default"].createElement(_core.Paper, {
className: classes.containerTable,
variant: "outlined"
}, withHeader ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _clsx["default"])(classes.containerHeaderTable, titleTable && classes.spaceBetween)
}, titleTable && /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.titleTable,
variant: "body2"
}, titleTable), /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _clsx["default"])(classes.containerSearch, titleTable && classes.flexEnd)
}, withSearch ? withAutocomplete ? /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
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["default"].createElement(_core.TextField, (0, _extends3["default"])({}, params, {
className: classes.inputSearch,
fullWidth: true,
InputLabelProps: {
shrink: false
},
InputProps: (0, _extends3["default"])({}, params.InputProps, {
endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
position: "end"
}, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
className: classes.searchIcon,
onClick: function onClick() {
return onHandleSearch(inputSearch.current.value);
}
}))
}),
inputRef: inputSearch,
onKeyUp: _handleSearchValidate,
placeholder: "Buscar",
variant: "outlined"
}));
},
style: {
width: 400
}
}) : /*#__PURE__*/_react["default"].createElement(_core.TextField, {
className: classes.inputSearch,
InputLabelProps: {
shrink: false
},
InputProps: {
endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
position: "end"
}, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
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["default"].createElement(_core.Button, {
className: classes.customBottomAdd,
color: "primary",
onClick: onHandleBtnAction,
variant: "outlined"
}, iconButton, titleButton) : null)) : null, /*#__PURE__*/_react["default"].createElement(_core2.TableContainer, {
className: classes.container,
style: {
maxHeight: maxHeight,
maxWidth: maxWidth
}
}, /*#__PURE__*/_react["default"].createElement(_core2.Table, {
"aria-label": "sticky table",
stickyHeader: stickyHeader
}, /*#__PURE__*/_react["default"].createElement(_core.TableHead, {
className: classes.tableHead
}, /*#__PURE__*/_react["default"].createElement(_core.TableRow, null, withCheckbox ? /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
padding: "checkbox"
}, /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.TableCell, {
align: align,
classes: {
stickyHeader: classes.stickyHeader
},
key: key,
sortDirection: orderBy === key ? sort : false,
style: {
minWidth: minWidth
}
}, withOrder && ordering ? /*#__PURE__*/_react["default"].createElement(_core.TableSortLabel, {
active: orderBy === key,
direction: orderBy === key ? sort : 'asc',
onClick: function onClick() {
return _handleSortTable(key, sortTable);
}
}, Component ? /*#__PURE__*/_react["default"].createElement(Component, null) : /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.headerTable,
variant: "body1"
}, label)) : Component ? /*#__PURE__*/_react["default"].createElement(Component, null) : /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.headerTable,
variant: "body1"
}, label));
}), withMenuColumns ? /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
padding: "checkbox"
}, /*#__PURE__*/_react["default"].createElement(_core2.IconButton, {
color: "primary",
onClick: _handleClickOpenMenu
}, _ref5), /*#__PURE__*/_react["default"].createElement(_core.Popover, {
anchorEl: openMenu,
anchorOrigin: {
horizontal: 'left',
vertical: 'bottom'
},
onClose: _handleClickClose,
open: Boolean(openMenu),
transformOrigin: {
horizontal: 'right',
vertical: 'top'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.customMenuHead
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.customMenuHeadTitle,
variant: "body2"
}, "Columnas"), /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_react["default"].Fragment, null, excludeOfFilter ? null : /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
control: /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.TableBody, null, enableAddCell && validateNewCellProps ? addNewCell ? /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.TableCell, {
key: key
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
alignItems: "center",
display: "flex",
justifyContent: lastCell ? 'space-between' : 'flex-start'
}, editable ? type === 'select' ? /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.MenuItem, {
className: classes.optionSelect,
key: index,
name: label,
value: value
}, label);
})) : /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.Typography, null, newCellProps[key] ? newCellProps[key] : localNewCellProps[key] ? localNewCellProps[key] : function () {
var date = new _xdate["default"]().toString('yyyy/MM/dd');
_handleChangeNewCell(date, key);
return date;
}()) : type === 'hours' ? /*#__PURE__*/_react["default"].createElement(_core.Typography, null, newCellProps[key] ? newCellProps[key] : localNewCellProps[key] ? localNewCellProps[key] : function () {
var hours = new _xdate["default"]().toString('h(:mm)TT');
_handleChangeNewCell(hours, key);
return hours;
}()) : /*#__PURE__*/_react["default"].createElement(_core.Typography, null, Array.isArray(newCellProps[key]) ? newCellProps[key].join(', ') : newCellProps[key]), lastCell && /*#__PURE__*/_react["default"].createElement(_core.Box, {
display: "flex",
marginLeft: 2
}, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
className: (0, _clsx["default"])(classes.iconAdd),
color: "error",
onClick: _handleRemoveCell
}), /*#__PURE__*/_react["default"].createElement(_Check["default"], {
className: (0, _clsx["default"])(classes.iconAdd),
color: validNewCell ? 'primary' : 'disabled',
onClick: function onClick() {
return validNewCell ? _handleSendNewCell() : null;
}
}))));
})) : /*#__PURE__*/_react["default"].createElement(_core.TableRow, null, /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
colSpan: columns.length
}, /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.TableRow, {
className: (0, _clsx["default"])(focus && classes.focusRow),
hover: true,
key: index,
onClick: function onClick() {
return _handleClickTableRow(_id);
}
}, withCheckbox ? /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
padding: "checkbox"
}, checkIcons && checkIcons.length ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _clsx["default"])(classes.alignCheckBox, !disabled && (selected ? classes.hiddenCheck : classes.checkRoot))
}, !disabled && /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
checked: selected,
className: classes.checkbox,
color: "primary",
disabled: disabled,
onClick: function onClick(e) {
return _handleClickSelectItem(e, _id);
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.checkImage
}, currentImage && currentImage.component)) : urlIcon ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _clsx["default"])(classes.alignCheckBox, !disabled && (selected ? classes.hiddenCheck : classes.checkRoot))
}, !disabled && /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
checked: selected,
className: classes.checkbox,
color: "primary",
disabled: disabled,
onClick: function onClick(e) {
return _handleClickSelectItem(e, _id);
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.checkImage
}, /*#__PURE__*/_react["default"].createElement("img", {
alt: "icon",
className: classes.sizeIcon,
src: urlIcon
}))) : /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.TableCell, {
align: align || 'left',
key: key
}, /*#__PURE__*/_react["default"].createElement(Componente, {
value: row[key]
})) : /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
align: align || 'left',
key: key
}, /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement("div", {
className: classes.emptyContainer
}, /*#__PURE__*/_react["default"].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["default"].createElement(_core.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["default"].createElement(_core.Box, {
className: classes.footerTable,
display: "flex",
justifyContent: "flex-end",
padding: 2
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
className: classes.containerPayment,
display: "flex"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
alignItems: "center",
className: classes.paymentText,
display: "flex",
marginRight: 3
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.textTotal,
variant: "h6"
}, "Total"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: (0, _clsx["default"])(classes.textAmount, !paymentAmount && classes.disableText),
color: "primary",
variant: "h5"
}, currency, " ", paymentAmount.toFixed(2))), /*#__PURE__*/_react["default"].createElement(_core.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["default"].bool,
checkIcons: _propTypes["default"].arrayOf(_propTypes["default"].shape({
code: _propTypes["default"].string.isRequired,
component: _propTypes["default"].node.isRequired
})),
columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
align: _propTypes["default"].string,
columnComponent: _propTypes["default"].node,
currency: _propTypes["default"].bool,
key: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string,
minWidth: _propTypes["default"].number,
ordering: _propTypes["default"].bool
})).isRequired,
/**
* eneableAddCell muetra un boton para agregar una nueva celda
*/
currency: _propTypes["default"].string,
/**
* iconBotton recibe un nodo para pinterlo al boton del header
*/
enableAddCell: _propTypes["default"].bool,
/**
* maxHeigth string | number para la altura de la tabla
*/
iconButton: _propTypes["default"].element,
/**
* newCellProps un array de objetos con las keys a editar cuando se agregue una nueva celda, requiere de `enableAddCell`
*/
maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
newCellProps: _propTypes["default"].object,
onHandleAddNewCell: _propTypes["default"].func,
onHandleBtnAction: _propTypes["default"].func,
onHandleChangePage: _propTypes["default"].func,
onHandleChangeRowsPerPage: _propTypes["default"].func,
onHandleClickRow: _propTypes["default"].func,
onHandlePaymentButton: _propTypes["default"].func,
onHandleSearch: _propTypes["default"].func,
onHandleSelectAll: _propTypes["default"].func,
onHandleSelectAutocomplete: _propTypes["default"].func,
onHandleSelectItem: _propTypes["default"].func,
onHandleSendNewCell: _propTypes["default"].func,
onHandleSortTable: _propTypes["default"].func,
/**
* pagination objeto para paginar, requiere de `withPagination`
*/
onHandleToggleColumnTable: _propTypes["default"].func,
/**
* paymentAmount number para mostrar total a pagar
*/
pagination: _propTypes["default"].shape({
page: _propTypes["default"].number.isRequired,
perPage: _propTypes["default"].number.isRequired,
rowsPerPageOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
totalItems: _propTypes["default"].number,
totalPages: _propTypes["default"].number // total : PropTypes.number.isRequired
}),
/**
* rows son las filas de la tabla
*/
paymentAmount: _propTypes["default"].number,
rows: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired
})).isRequired,
searchSuggestions: _propTypes["default"].array,
sortTable: _propTypes["default"].shape({
orderBy: _propTypes["default"].string,
sort: _propTypes["default"].oneOf(['asc', 'desc'])
}),
stickyHeader: _propTypes["default"].bool,
titleButton: _propTypes["default"].string,
titleTable: _propTypes["default"].string,
/**
* withAutocomplete muestra el search con autocompletado, requiere de `searchSuggestions`
*/
withAutocomplete: _propTypes["default"].bool,
withButton: _propTypes["default"].bool,
withCheckbox: _propTypes["default"].bool,
withFooter: _propTypes["default"].bool,
withHeader: _propTypes["default"].bool,
withMenuColumns: _propTypes["default"].bool,
withOrder: _propTypes["default"].bool,
withPagination: _propTypes["default"].bool,
withSearch: _propTypes["default"].bool
} : void 0;
var _default = Table;
exports["default"] = _default;