@krowdy-ui/views
Version:
React components that implement Google's Material Design.
516 lines (485 loc) • 17.5 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
var _excluded = ["row"],
_excluded2 = ["value"];
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { Paper, TextField, InputAdornment, TablePagination } from '@krowdy-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import StarIcon from '@material-ui/icons/Star';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import { GroupingState, SortingState, IntegratedSorting, CustomGrouping } from '@devexpress/dx-react-grid';
import { Grid as GridTable, Table // VirtualTable,
, TableHeaderRow, TableGroupRow, GroupingPanel, DragDropProvider, Toolbar } from '@devexpress/dx-react-grid-material-ui';
import Autocomplete from '@material-ui/lab/Autocomplete';
export var styles = function styles(theme) {
return {
containerFullwidth: {
height: '100%'
},
containerHeaderTable: {
padding: theme.spacing(2)
},
containerSearch: {
display: 'flex',
justifyContent: 'space-between'
},
contetPagination: {
display: 'flex',
justifyContent: 'flex-end',
padding: 20
},
gridTableChip: {
'&:focus': {
'& > div': {
'&:focus': {
background: '#F3FBFF'
}
}
},
'&:hover': {
background: '#F3FBFF'
},
background: '#F3FBFF',
border: '1px solid #80DBFF'
},
gridTableGroupingEmpty: {
'& > div': {
background: 'transparent',
border: "solid 1px ".concat(theme.palette.primary.main),
color: '#595959'
},
alignItems: 'center',
display: 'flex',
height: '32px',
marginTop: theme.spacing(1)
},
gridTableHeader: {
'& svg': {
color: "".concat(theme.palette.primary.main, " !important")
},
'& th': {},
fontSize: '0.875rem',
fontWeight: 'bold',
padding: theme.spacing(1, 2)
},
gridTableHeaderGroup: {
'& > td': {
background: '#E6E9F0'
},
'& > td > div': {
background: '#E6E9F0',
color: '#262626',
fontWeight: 'bold'
},
background: '#E6E9F0'
},
gridTableHeaderRoot: {
background: '#F2F4F7'
},
gridTableSearch: {
background: '#fff',
padding: theme.spacing(2),
paddingBottom: 0
},
gridTableToolbar: {
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2)
},
inputSearch: {
'& * input': {
fontSize: 14,
padding: '12px 10px !important'
},
'& > div': {
padding: '0 14px 0 0 !important'
},
margin: '2px 0'
},
paperRoot: {
'& > div:first-child': {
height: '100%'
},
'& > div:first-child > div:nth-child(2)': {
flex: 1,
overflow: 'auto'
},
height: '100%'
},
searchIcon: {
cursor: 'pointer'
},
tableContainer: {
display: 'flex',
flexDirection: 'column',
height: '100%'
}
};
};
var formatColumnsExtension = function formatColumnsExtension(columns) {
return columns.map(function (column) {
if (column.type) if (column.type === 'star') column.width = 160;
return _extends({}, column, {
columnName: column.key,
title: column.label
});
});
};
var formatColumns = function formatColumns(columns) {
return columns.map(function (column) {
return _extends({}, column, {
name: column.key,
title: column.label
});
});
};
var columnsDraggableDisable = function columnsDraggableDisable(columns) {
return columns.map(function (column) {
return {
columnName: column.key,
groupingEnabled: column.draggable
};
});
};
var sortingFormat = function sortingFormat(sortings) {
return sortings.map(function (sorting) {
return {
columnName: sorting.orderBy,
direction: sorting.sort
};
});
};
var sortingFormatReverse = function sortingFormatReverse(sortings) {
return sortings.map(function (sorting) {
return {
orderBy: sorting.columnName,
sort: sorting.direction
};
});
};
var getRowId = function getRowId(row) {
return row._id;
};
var TableRow = function TableRow(_ref, callback) {
var row = _ref.row,
restProps = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(Table.Row, _extends({}, restProps, {
onClick: function onClick() {
return callback(row._id);
},
style: {
cursor: 'pointer'
}
}));
};
var StartCell = function StartCell(_ref2) {
var value = _ref2.value,
restProps = _objectWithoutProperties(_ref2, _excluded2);
var column = restProps.column;
return /*#__PURE__*/React.createElement(Table.Cell, restProps, /*#__PURE__*/React.createElement("span", null, value ? [1, 2, 3, 4, 5].map(function (currentValue) {
return currentValue <= value ? /*#__PURE__*/React.createElement(StarIcon, {
color: "primary",
key: "star-".concat(column._id, "-").concat(currentValue)
}) : /*#__PURE__*/React.createElement(StarBorderIcon, {
color: "primary",
key: "star-".concat(column._id, "-").concat(currentValue)
});
}) : ''));
};
var TableCell = function TableCell(props) {
var column = props.column;
if (column.type === 'star') return /*#__PURE__*/React.createElement(StartCell, props);
return /*#__PURE__*/React.createElement(Table.Cell, props);
};
var _ref3 = /*#__PURE__*/React.createElement(SearchIcon, null);
var _ref4 = /*#__PURE__*/React.createElement(DragDropProvider, null);
var _ref5 = /*#__PURE__*/React.createElement(IntegratedSorting, null);
var _ref7 = /*#__PURE__*/React.createElement(Toolbar, null);
var TableGroup = function TableGroup(props) {
var classes = props.classes,
_props$rows = props.rows,
rows = _props$rows === void 0 ? [] : _props$rows,
_props$columns = props.columns,
columns = _props$columns === void 0 ? [] : _props$columns,
_props$groupingData = props.groupingData,
groupingData = _props$groupingData === void 0 ? [] : _props$groupingData,
_props$changeGrouping = props.changeGrouping,
changeGrouping = _props$changeGrouping === void 0 ? function () {} : _props$changeGrouping,
_props$sorting = props.sorting,
sorting = _props$sorting === void 0 ? false : _props$sorting,
_props$grouping = props.grouping,
grouping = _props$grouping === void 0 ? false : _props$grouping,
_props$sortingData = props.sortingData,
sortingData = _props$sortingData === void 0 ? [] : _props$sortingData,
_props$changeSorting = props.changeSorting,
changeSorting = _props$changeSorting === void 0 ? function () {} : _props$changeSorting,
_props$withPagination = props.withPagination,
withPagination = _props$withPagination === void 0 ? false : _props$withPagination,
_props$withHeader = props.withHeader,
withHeader = _props$withHeader === void 0 ? false : _props$withHeader,
_props$withSearch = props.withSearch,
withSearch = _props$withSearch === void 0 ? false : _props$withSearch,
_props$onChangePerPag = props.onChangePerPage,
onChangePerPage = _props$onChangePerPag === void 0 ? function () {} : _props$onChangePerPag,
_props$withAutocomple = props.withAutocomplete,
withAutocomplete = _props$withAutocomple === void 0 ? false : _props$withAutocomple,
_props$searchSuggesti = props.searchSuggestions,
searchSuggestions = _props$searchSuggesti === void 0 ? [] : _props$searchSuggesti,
_props$onHandleSearch = props.onHandleSearch,
onHandleSearch = _props$onHandleSearch === void 0 ? function () {} : _props$onHandleSearch,
_props$groupingDataTe = props.groupingDataTemp,
groupingDataTemp = _props$groupingDataTe === void 0 ? null : _props$groupingDataTe,
_props$pagination = props.pagination,
pagination = _props$pagination === void 0 ? {} : _props$pagination,
_props$limitDragable = props.limitDragable,
limitDragable = _props$limitDragable === void 0 ? 1 : _props$limitDragable,
_props$onChangePage = props.onChangePage,
onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,
_props$onClickRow = props.onClickRow,
onClickRow = _props$onClickRow === void 0 ? function () {} : _props$onClickRow,
_props$onHandleSelect = props.onHandleSelectAutocomplete,
onHandleSelectAutocomplete = _props$onHandleSelect === void 0 ? function () {} : _props$onHandleSelect;
var _useState = useState(formatColumns(columns)),
_useState2 = _slicedToArray(_useState, 2),
columnsData = _useState2[0],
setColumnData = _useState2[1];
var _useState3 = useState(formatColumnsExtension(columns)),
_useState4 = _slicedToArray(_useState3, 2),
columnsDataExtension = _useState4[0],
setColumnsDataExtension = _useState4[1];
var _useState5 = useState(sortingFormat(sortingData)),
_useState6 = _slicedToArray(_useState5, 2),
sortingDataFormat = _useState6[0],
setSortingFormat = _useState6[1];
var _useState7 = useState(columnsDraggableDisable(columns)),
_useState8 = _slicedToArray(_useState7, 2),
groupingStateColumnExtensions = _useState8[0],
setGroupingStateColumnExtensions = _useState8[1];
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
expandData = _useState10[0],
setExpandData = _useState10[1];
var inputSearch = useRef(null); // effects
useEffect(function () {
if (columns.length) {
setColumnData(formatColumns(columns));
setGroupingStateColumnExtensions(columnsDraggableDisable(columns));
setColumnsDataExtension(formatColumnsExtension(columns));
}
}, [columns]);
useEffect(function () {
if (sortingData.length) setSortingFormat(sortingFormat(sortingData));
}, [sortingData]); // actions
var getChildGroups = function getChildGroups(groups) {
return groups.map(function (group) {
return {
childRows: group.items,
key: group.key
};
});
};
var setExpandedGroups = function setExpandedGroups(value) {
// recibe un array de string ["Confirmed", "Completed"]
setExpandData(value);
};
var _handleSearchValidate = function _handleSearchValidate(e) {
var value = e.target.value;
if (e.keyCode === 13) onHandleSearch(value);
};
var onChangeSorting = function onChangeSorting(value) {
// if(multiSorting)
// if(sortingData.length) {
// const data = [
// ...sortingDataFormat.map(item => item.columnName === value[0].columnName ? value[0] : item),
// ...value
// ]
// changeSorting(sortingFormatReverse(data))
// } else {
// }
changeSorting(sortingFormatReverse(value));
};
var onChangeGrouping = function onChangeGrouping(value) {
if (rows.length) if (value.length <= limitDragable) changeGrouping(value);
};
return /*#__PURE__*/React.createElement(Paper, {
classes: {
root: classes.paperRoot
},
style: {
position: 'relative'
},
variant: "outlined"
}, /*#__PURE__*/React.createElement("div", {
className: classes.tableContainer
}, withHeader ? /*#__PURE__*/React.createElement("div", {
className: classes.containerHeaderTable
}, /*#__PURE__*/React.createElement("div", {
className: classes.containerSearch
}, 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)) : null, /*#__PURE__*/React.createElement(GridTable, {
columns: columnsData,
getRowId: getRowId,
rows: rows
}, /*#__PURE__*/React.createElement(SortingState, {
onSortingChange: onChangeSorting,
sorting: sortingDataFormat
}), grouping && _ref4, /*#__PURE__*/React.createElement(GroupingState // expandedGroups={[ 'Confirmed' ]}
, {
columnExtensions: groupingStateColumnExtensions,
grouping: groupingData,
onExpandedGroupsChange: setExpandedGroups,
onGroupingChange: onChangeGrouping
}), /*#__PURE__*/React.createElement(CustomGrouping, {
expandedGroups: expandData,
getChildGroups: getChildGroups,
grouping: groupingDataTemp
}), _ref5, /*#__PURE__*/React.createElement(Table, {
cellComponent: TableCell,
columnExtensions: columnsDataExtension,
rowComponent: function rowComponent(row) {
return TableRow(row, onClickRow);
}
}), /*#__PURE__*/React.createElement(TableHeaderRow, {
messages: {
sortingHint: 'Ordenar'
},
showSortingControls:
/* groupingData.length ? false : */
sorting
}), /*#__PURE__*/React.createElement(TableGroupRow, {
rowComponent: function rowComponent(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/React.createElement(TableHeaderRow.Row, {
className: classes.gridTableHeaderGroup
}, children);
}
}), _ref7, /*#__PURE__*/React.createElement(GroupingPanel, {
emptyMessageComponent: function emptyMessageComponent() {
return /*#__PURE__*/React.createElement("div", {
className: classes.gridTableGroupingEmpty
}, "Arrastra aqu\xED una columna para agrupar tus registros.");
},
itemComponent: function itemComponent(ev) {
var customSorting = true; // const customSorting = (ev.item && ev.item.column && groupingData.length) ?
// Boolean(ev.item.column.name === groupingData[0].columnName) : true
return /*#__PURE__*/React.createElement(GroupingPanel.Item, _extends({}, ev, {
className: classes.gridTableChip,
sortingEnabled: customSorting
}));
},
showGroupingControls: true,
showSortingControls: true
})), withPagination ? /*#__PURE__*/React.createElement("div", {
className: classes.contetPagination
}, /*#__PURE__*/React.createElement(TablePagination, {
backIconButtonText: "P\xE1gina anterior",
component: "div",
labelRowsPerPage: "Mostrar",
nextIconButtonText: "P\xE1gina siguiente",
onChangePage: onChangePage,
onChangeRowsPerPage: onChangePerPage,
page: pagination.page,
rowsPerPage: pagination.perPage,
rowsPerPageOptions: [10, 25, 100],
totalItems: pagination.totalItems,
totalPages: pagination.totalPages
})) : null));
};
process.env.NODE_ENV !== "production" ? TableGroup.propTypes = {
changeGrouping: PropTypes.func,
changeSorting: PropTypes.func,
columns: PropTypes.arrayOf(PropTypes.shape({
align: PropTypes.string,
currency: PropTypes.bool,
key: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
minWidth: PropTypes.number,
ordering: PropTypes.bool
})).isRequired,
grouping: PropTypes.bool,
groupingData: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string
})),
limitDragable: PropTypes.number,
onChangePage: PropTypes.func,
onChangePerPage: PropTypes.func,
onClickRow: PropTypes.func,
onHandleSearch: PropTypes.func,
onHandleSelectAutocomplete: PropTypes.func,
pagination: PropTypes.object,
rows: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired
})).isRequired,
searchSuggestions: PropTypes.array,
sorting: PropTypes.bool,
sortingData: PropTypes.arrayOf(PropTypes.shape({
orderBy: PropTypes.string,
sort: PropTypes.string
})),
withAutocomplete: PropTypes.bool,
withHeader: PropTypes.bool,
withPagination: PropTypes.bool,
withSearch: PropTypes.bool
} : void 0;
TableGroup.muiName = 'TableGroup';
export default withStyles(styles, {
name: 'KrowdyTableGroup'
})(TableGroup);