@krowdy-ui/views
Version:
React components that implement Google's Material Design.
334 lines (292 loc) • 12.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.styles = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
var _core = require("@material-ui/core");
var _ArrowBackIos = _interopRequireDefault(require("@material-ui/icons/ArrowBackIos"));
var _core2 = require("@krowdy-ui/core");
var _FilterConfig = _interopRequireDefault(require("./FilterConfig"));
var _FiltersList = _interopRequireDefault(require("./FiltersList"));
var _FiltersTree = _interopRequireDefault(require("./FiltersTree"));
var _excluded = ["_id"];
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 || _typeof(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 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%'
}
};
};
exports.styles = styles;
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["default"].createElement(_ArrowBackIos["default"], {
fontSize: "inherit"
});
var _ref3 = /*#__PURE__*/_react["default"].createElement(_Add["default"], 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 = (0, _react.useState)(Views.HOME),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
view = _useState2[0],
goToView = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
filterSelected = _useState4[0],
setFilterSelected = _useState4[1];
var _useState5 = (0, _react.useState)(),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
filterToEdit = _useState6[0],
setFilterToEdit = _useState6[1];
var addFilter = function addFilter(filter) {
onChangeFilters([].concat((0, _toConsumableArray2["default"])(filters), [filter]));
};
var deepUpdate = function deepUpdate(arr, _ref) {
var _id = _ref._id,
updatedItem = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return arr.map(function (item) {
if (item._id === _id) return (0, _extends2["default"])({}, item, updatedItem);
if (Array.isArray(item.children) && item.children.length) return (0, _extends2["default"])({}, item, {
children: deepUpdate(item.children, (0, _extends2["default"])({
_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["default"].createElement(_core2.Card, {
className: classes.root,
variant: "outlined"
}, /*#__PURE__*/_react["default"].createElement(_core2.CardHeader, {
shadow: true,
title: /*#__PURE__*/_react["default"].createElement("div", {
className: classes.titleContainer
}, view.index !== 0 && /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
"aria-label": "delete",
className: classes.backIcon,
onClick: _handleClickBack,
size: "small"
}, _ref2), /*#__PURE__*/_react["default"].createElement("p", {
className: classes.titleBack
}, view.index === 0 ? title : 'Atrás'))
}), /*#__PURE__*/_react["default"].createElement(_core2.CardContent, {
className: (0, _clsx["default"])(classes.cardContent, !view.withPadding && classes.noPadding)
}, /*#__PURE__*/_react["default"].createElement(_core2.TabPanel, {
className: classes.viewContainer,
index: Views.HOME.index,
value: view.index
}, filters.length === 0 ? HeaderHomeComponent : null, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.treeContainer
}, /*#__PURE__*/_react["default"].createElement(_FiltersTree["default"], {
dots: dots,
onChange: _handleChangeFilterTree,
onClickEdit: _handleClickEditFilter,
treeData: filters
})), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.center
}, /*#__PURE__*/_react["default"].createElement(_core2.Button, {
color: "primary",
onClick: _handleClickAddFilter,
startIcon: _ref3
}, "A\xF1adir filtro"))), /*#__PURE__*/_react["default"].createElement(_core2.TabPanel, {
className: classes.viewContainer,
index: Views.FILTERS_SEARCH.index,
value: view.index
}, /*#__PURE__*/_react["default"].createElement(_FiltersList["default"], {
filterGroups: filterGroups,
filters: filters,
onClickItem: _handleClickFilterListItem,
uniqueFilter: uniqueFilter
})), /*#__PURE__*/_react["default"].createElement(_core2.TabPanel, {
className: classes.viewContainer,
index: Views.FILTER_CONFIG.index,
value: view.index
}, /*#__PURE__*/_react["default"].createElement(_FilterConfig["default"], {
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["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired
})).isRequired,
classes: _propTypes["default"].object,
filterGroups: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
children: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
key: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
type: _propTypes["default"].string.isRequired
})),
label: _propTypes["default"].string.isRequired
})),
filterTypes: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
initialValue: _propTypes["default"].any.isRequired,
options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
numberOfInputs: _propTypes["default"].number.isRequired,
operator: _propTypes["default"].string.isRequired
})).isRequired,
type: _propTypes["default"].string.isRequired
})).isRequired,
filters: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
key: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
operator: _propTypes["default"].string.isRequired,
operatorLabel: _propTypes["default"].string.isRequired,
optionIndex: _propTypes["default"].number.isRequired,
type: _propTypes["default"].string.isRequired,
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array])
})),
hasNextPage: _propTypes["default"].bool,
headerHomeComponent: _propTypes["default"].node,
listWidth: _propTypes["default"].number,
loadMoreCategoryItems: _propTypes["default"].func,
onChangeFilters: _propTypes["default"].func.isRequired,
onFetchFilterGroups: _propTypes["default"].func,
onSelectCategoryFilter: _propTypes["default"].func,
title: _propTypes["default"].string.isRequired,
uniqueFilter: _propTypes["default"].bool
} : void 0;
Filters.muiName = 'KrowdyFilters';
var _default = (0, _core2.withStyles)(styles, {
name: 'Filters'
})(Filters);
exports["default"] = _default;