@krowdy-ui/views
Version:
React components that implement Google's Material Design.
300 lines (281 loc) • 10.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["_id"];
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import AddIcon from '@material-ui/icons/Add';
import { IconButton } from '@material-ui/core';
import ArrowBackIcon from '@material-ui/icons/ArrowBackIos';
import { Button, Card, CardContent, CardHeader, TabPanel, withStyles } from '@krowdy-ui/core';
import FilterConfig from './FilterConfig';
import FiltersList from './FiltersList';
import FiltersTree from './FiltersTree';
export var styles = function styles(theme) {
return {
backIcon: {
marginRight: theme.spacing(1),
paddingLeft: 6,
paddingRight: 0
},
cardContent: {
display: 'flex',
flex: 2,
justifyContent: 'center',
overflowY: 'hidden'
},
cardTitle: {
fontSize: 14
},
center: {
alignItems: 'center',
display: 'flex',
flexDirection: 'column'
},
noPadding: {
padding: 0
},
root: {
display: 'flex',
flexFlow: 'column',
height: '100%'
},
titleBack: {
fontSize: 14
},
titleContainer: {
alignItems: 'center',
display: 'flex',
height: 20
},
treeContainer: {
overflowY: 'scroll'
},
viewContainer: {
height: '100%',
overflowX: 'hidden',
overflowY: 'scroll',
width: '100%'
}
};
};
var Views = {
FILTERS_SEARCH: {
backIndex: 'HOME',
index: 1,
withPadding: false
},
FILTER_CONFIG: {
backIndex: 'FILTERS_SEARCH',
index: 2,
withPadding: true
},
HOME: {
index: 0,
withPadding: true
}
};
var _ref2 = /*#__PURE__*/React.createElement(ArrowBackIcon, {
fontSize: "inherit"
});
var _ref3 = /*#__PURE__*/React.createElement(AddIcon, null);
var Filters = function Filters(props) {
var classes = props.classes,
_props$title = props.title,
title = _props$title === void 0 ? 'Todos las compras' : _props$title,
_props$headerHomeComp = props.headerHomeComponent,
HeaderHomeComponent = _props$headerHomeComp === void 0 ? null : _props$headerHomeComp,
_props$filters = props.filters,
filters = _props$filters === void 0 ? [] : _props$filters,
_props$onChangeFilter = props.onChangeFilters,
onChangeFilters = _props$onChangeFilter === void 0 ? function () {} : _props$onChangeFilter,
onSelectCategoryFilter = props.onSelectCategoryFilter,
_props$categoryItems = props.categoryItems,
categoryItems = _props$categoryItems === void 0 ? [] : _props$categoryItems,
_props$hasNextPage = props.hasNextPage,
hasNextPage = _props$hasNextPage === void 0 ? false : _props$hasNextPage,
_props$filterTypes = props.filterTypes,
filterTypes = _props$filterTypes === void 0 ? [] : _props$filterTypes,
_props$loadMoreCatego = props.loadMoreCategoryItems,
loadMoreCategoryItems = _props$loadMoreCatego === void 0 ? function () {} : _props$loadMoreCatego,
listWidth = props.listWidth,
_props$filterGroups = props.filterGroups,
filterGroups = _props$filterGroups === void 0 ? [] : _props$filterGroups,
_props$dots = props.dots,
dots = _props$dots === void 0 ? false : _props$dots,
_props$uniqueFilter = props.uniqueFilter,
uniqueFilter = _props$uniqueFilter === void 0 ? false : _props$uniqueFilter;
var _useState = useState(Views.HOME),
_useState2 = _slicedToArray(_useState, 2),
view = _useState2[0],
goToView = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
filterSelected = _useState4[0],
setFilterSelected = _useState4[1];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
filterToEdit = _useState6[0],
setFilterToEdit = _useState6[1];
var addFilter = function addFilter(filter) {
onChangeFilters([].concat(_toConsumableArray(filters), [filter]));
};
var deepUpdate = function deepUpdate(arr, _ref) {
var _id = _ref._id,
updatedItem = _objectWithoutProperties(_ref, _excluded);
return arr.map(function (item) {
if (item._id === _id) return _extends({}, item, updatedItem);
if (Array.isArray(item.children) && item.children.length) return _extends({}, item, {
children: deepUpdate(item.children, _extends({
_id: _id
}, updatedItem))
});
return item;
});
};
var updateFilter = function updateFilter(filter) {
var updatedFilters = deepUpdate(filters, filter);
onChangeFilters(updatedFilters);
};
var _handleClickApplyFilters = function _handleClickApplyFilters(filter) {
if (filterToEdit) {
// Exists, so update it
updateFilter(filter);
setFilterToEdit(null);
} else {
addFilter(filter);
}
goToView(Views.HOME);
};
var _handleClickFilterListItem = function _handleClickFilterListItem(item) {
setFilterSelected(item);
goToView(Views.FILTER_CONFIG);
};
var _handleClickAddFilter = function _handleClickAddFilter() {
return goToView(Views.FILTERS_SEARCH);
};
var _handleClickEditFilter = function _handleClickEditFilter(appliedFilter) {
setFilterToEdit(appliedFilter);
goToView(Views.FILTER_CONFIG);
};
var _handleClickBack = function _handleClickBack() {
if (view.backIndex) {
goToView(Views[view.backIndex]);
setFilterToEdit(null);
}
};
var _handleChangeFilterTree = function _handleChangeFilterTree(treeFilters) {
onChangeFilters(treeFilters);
};
return /*#__PURE__*/React.createElement(Card, {
className: classes.root,
variant: "outlined"
}, /*#__PURE__*/React.createElement(CardHeader, {
shadow: true,
title: /*#__PURE__*/React.createElement("div", {
className: classes.titleContainer
}, view.index !== 0 && /*#__PURE__*/React.createElement(IconButton, {
"aria-label": "delete",
className: classes.backIcon,
onClick: _handleClickBack,
size: "small"
}, _ref2), /*#__PURE__*/React.createElement("p", {
className: classes.titleBack
}, view.index === 0 ? title : 'Atrás'))
}), /*#__PURE__*/React.createElement(CardContent, {
className: clsx(classes.cardContent, !view.withPadding && classes.noPadding)
}, /*#__PURE__*/React.createElement(TabPanel, {
className: classes.viewContainer,
index: Views.HOME.index,
value: view.index
}, filters.length === 0 ? HeaderHomeComponent : null, /*#__PURE__*/React.createElement("div", {
className: classes.treeContainer
}, /*#__PURE__*/React.createElement(FiltersTree, {
dots: dots,
onChange: _handleChangeFilterTree,
onClickEdit: _handleClickEditFilter,
treeData: filters
})), /*#__PURE__*/React.createElement("div", {
className: classes.center
}, /*#__PURE__*/React.createElement(Button, {
color: "primary",
onClick: _handleClickAddFilter,
startIcon: _ref3
}, "A\xF1adir filtro"))), /*#__PURE__*/React.createElement(TabPanel, {
className: classes.viewContainer,
index: Views.FILTERS_SEARCH.index,
value: view.index
}, /*#__PURE__*/React.createElement(FiltersList, {
filterGroups: filterGroups,
filters: filters,
onClickItem: _handleClickFilterListItem,
uniqueFilter: uniqueFilter
})), /*#__PURE__*/React.createElement(TabPanel, {
className: classes.viewContainer,
index: Views.FILTER_CONFIG.index,
value: view.index
}, /*#__PURE__*/React.createElement(FilterConfig, {
categoryItems: categoryItems,
edit: filterToEdit ? true : false,
filter: filterToEdit || filterSelected,
filterTypes: filterTypes,
hasNextPage: hasNextPage,
listWidth: listWidth,
loadMoreCategoryItems: loadMoreCategoryItems,
onClickApply: _handleClickApplyFilters,
onSelectCategoryFilter: onSelectCategoryFilter
}))));
};
process.env.NODE_ENV !== "production" ? Filters.propTypes = {
categoryItems: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})).isRequired,
classes: PropTypes.object,
filterGroups: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
children: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
type: PropTypes.string.isRequired
})),
label: PropTypes.string.isRequired
})),
filterTypes: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
initialValue: PropTypes.any.isRequired,
options: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
numberOfInputs: PropTypes.number.isRequired,
operator: PropTypes.string.isRequired
})).isRequired,
type: PropTypes.string.isRequired
})).isRequired,
filters: PropTypes.arrayOf(PropTypes.shape({
_id: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
operator: PropTypes.string.isRequired,
operatorLabel: PropTypes.string.isRequired,
optionIndex: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])
})),
hasNextPage: PropTypes.bool,
headerHomeComponent: PropTypes.node,
listWidth: PropTypes.number,
loadMoreCategoryItems: PropTypes.func,
onChangeFilters: PropTypes.func.isRequired,
onFetchFilterGroups: PropTypes.func,
onSelectCategoryFilter: PropTypes.func,
title: PropTypes.string.isRequired,
uniqueFilter: PropTypes.bool
} : void 0;
Filters.muiName = 'KrowdyFilters';
export default withStyles(styles, {
name: 'Filters'
})(Filters);