@krowdy-ui/views
Version:
React components that implement Google's Material Design.
268 lines (237 loc) • 9.4 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"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _core = require("@krowdy-ui/core");
var _icons = require("@material-ui/icons");
var _InputChip = _interopRequireDefault(require("./InputChip"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("../utils");
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 transform = function transform(Interval1, Interval2, x) {
return Math.round((x - Interval1.min) / (Interval1.max - Interval1.min) * (Interval2.max - Interval2.min) + Interval2.min);
};
var _ref2 = /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6"
}, "Nube de palabras");
var _ref3 = /*#__PURE__*/_react["default"].createElement(_icons.Close, {
fontSize: "small"
});
var KeywordFilter = function KeywordFilter(_ref) {
var _ref$onResetCategoryI = _ref.onResetCategoryItems,
onResetCategoryItems = _ref$onResetCategoryI === void 0 ? function () {} : _ref$onResetCategoryI,
_ref$loadMore = _ref.loadMore,
loadMore = _ref$loadMore === void 0 ? function () {} : _ref$loadMore,
_ref$items = _ref.items,
items = _ref$items === void 0 ? [] : _ref$items,
_ref$PaperProps = _ref.PaperProps,
PaperProps = _ref$PaperProps === void 0 ? {} : _ref$PaperProps,
_ref$filter = _ref.filter,
filter = _ref$filter === void 0 ? {} : _ref$filter,
edit = _ref.edit,
onClickApply = _ref.onClickApply,
isOpen = _ref.isOpen,
isLoading = _ref.isLoading,
onClose = _ref.onClose;
var classes = useStyles();
var _useState = (0, _react.useState)(filter.value || []),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
selectedItems = _useState2[0],
setSelectedItems = _useState2[1];
var _handleClose = function _handleClose() {
setSelectedItems([]);
onClose();
};
(0, _react.useEffect)(function () {
if (isOpen) {
var key = filter.key,
value = filter.value;
if (value) setSelectedItems(value);
onResetCategoryItems(key);
loadMore(key);
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen]);
var tags = (0, _react.useMemo)(function () {
var max = items.reduce(function (r, a) {
return Math.max(r, a.count);
}, 1);
var min = items.reduce(function (r, a) {
return Math.min(r, a.count);
}, Infinity);
var rangeDataSource = {
max: max,
min: min
};
return (0, _toConsumableArray2["default"])(items.map(function (element) {
return {
_id: element._id,
count: transform(rangeDataSource, {
max: 35,
min: 12
}, element.count),
value: element.label
};
})).sort(function (a, b) {
return b.count - a.count;
}); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [items]);
var _handleClickTag = function _handleClickTag(tag) {
var existsValue = selectedItems.includes(tag.value); // Don't add if value already exists
if (!existsValue) setSelectedItems(selectedItems.concat(tag.value));
};
var _handleChangeInput = function _handleChangeInput(items) {
setSelectedItems(items);
};
var _handleClickApply = function _handleClickApply() {
var configValue = selectedItems;
var _id = edit ? filter._id : (0, _utils.generateRandomId)();
onClickApply({
_id: _id,
key: filter.key,
label: filter.label,
operator: '$regex',
operatorLabel: 'Contiene exactamente',
optionIndex: filter.optionIndex,
queryBase: filter.queryBase,
reference: filter.reference,
type: filter.type,
value: configValue
});
setSelectedItems([]);
};
return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
fullWidth: true,
onClose: _handleClose,
open: isOpen,
PaperProps: PaperProps
}, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, {
className: classes.dialogTitleContainer,
disableTypography: true
}, _ref2, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
"aria-label": "close",
className: classes.closeButton,
onClick: _handleClose,
size: "small"
}, _ref3)), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, {
className: classes.tagCloudWordsContainer
}, /*#__PURE__*/_react["default"].createElement(_InputChip["default"], {
onChange: _handleChangeInput,
values: selectedItems
}), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.tagsContainer
}, isLoading ? /*#__PURE__*/_react["default"].createElement(_core.CircularProgress, {
className: classes.loading,
size: 40
}) : tags.map(function (tag) {
return /*#__PURE__*/_react["default"].createElement(CloudTag, {
key: tag._id,
onClick: _handleClickTag,
selectedTags: selectedItems,
tag: tag
});
}))), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, {
className: classes.dialogActionsContainer
}, /*#__PURE__*/_react["default"].createElement(_core.Button, {
className: classes.applyButton,
color: "primary",
onClick: _handleClickApply,
size: "large",
variant: "outlined"
}, "Aplicar filtro")));
};
var CloudTag = function CloudTag(_ref4) {
var tag = _ref4.tag,
_onClick = _ref4.onClick,
selectedTags = _ref4.selectedTags;
var count = tag.count,
value = tag.value;
var classes = useStyles({
count: count
});
var selected = (0, _react.useMemo)(function () {
return selectedTags.includes(tag.value);
}, [selectedTags, tag.value]);
return /*#__PURE__*/_react["default"].createElement("span", {
className: (0, _clsx["default"])(classes.cloudTag, selected && classes.selected),
onClick: function onClick() {
return _onClick(tag);
}
}, value);
};
var useStyles = (0, _core.makeStyles)(function (theme) {
return {
applyButton: {
marginTop: 20
},
button: {
marginTop: 12
},
closeButton: {
color: theme.palette.grey[500],
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1)
},
cloudTag: {
color: theme.palette.secondary[500],
cursor: 'pointer',
display: 'inline-block',
fontSize: function fontSize(_ref5) {
var count = _ref5.count;
return count;
},
// color : ({ color }) => color,
fontWeight: 300,
margin: theme.spacing(0, .5)
},
dialogActionsContainer: {
justifyContent: 'center'
},
dialogTitleContainer: {
margin: 0,
padding: theme.spacing(2)
},
loading: {
marginTop: theme.spacing(1)
},
selected: {
color: theme.palette.primary.main,
fontWeight: 500
},
tagCloudWordsContainer: {
height: 420,
textAlign: 'center'
},
tagsContainer: {
marginTop: 12
}
};
});
process.env.NODE_ENV !== "production" ? KeywordFilter.propTypes = {
PaperProps: _propTypes["default"].object,
edit: _propTypes["default"].bool,
filter: _propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
key: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
type: _propTypes["default"].string.isRequired
}),
items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
_id: _propTypes["default"].string.isRequired,
count: _propTypes["default"].number.isRequired,
label: _propTypes["default"].string
})).isRequired,
loadMore: _propTypes["default"].func.isRequired,
onClickApply: _propTypes["default"].func.isRequired,
onResetCategoryItems: _propTypes["default"].func.isRequired
} : void 0;
var _default = KeywordFilter;
exports["default"] = _default;