@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
160 lines • 11.2 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SideFilter = void 0;
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const interfaces_1 = require("../../interfaces");
const react_1 = __importStar(require("react"));
const SideFilter_style_1 = require("./SideFilter.style");
const components_1 = require("../../components");
const SideFilter = (props) => {
const classes = (0, SideFilter_style_1.useStyles)();
const { visible, onClose, itemsCount = -1, filterItems, onFilterSubmit, } = props;
const [filterValues, setFilterValues] = (0, react_1.useState)({});
const setDefaultFilterValues = () => {
const defaultFilterValues = filterItems.reduce((acc, item) => {
if (item.widgetType === interfaces_1.EItemType.dateTimeDifference) {
acc[`${item.stateKey}From`] = item.defaultValue;
acc[`${item.stateKey}To`] = null;
}
else {
acc[item.stateKey] = item.defaultValue;
}
return acc;
}, {});
setFilterValues(defaultFilterValues);
return defaultFilterValues;
};
(0, react_1.useEffect)(() => {
setDefaultFilterValues();
}, []);
const closeDrawer = () => {
onClose();
};
const handleClickCancel = () => {
closeDrawer();
};
const handleFilterSubmit = () => {
onFilterSubmit({ ...filterValues });
onClose();
};
const changeFilterValues = (key, value) => {
setFilterValues({
...filterValues,
[key]: value,
});
};
const Header = (react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", className: classes.header },
react_1.default.createElement(core_1.Box, { display: "flex", alignItems: "baseline" },
react_1.default.createElement(core_1.Typography, { className: classes.headerLabel }, "Filter"),
itemsCount > -1 && (react_1.default.createElement(core_1.Typography, { className: classes.headerInfo },
itemsCount,
" results"))),
react_1.default.createElement(core_1.IconButton, { "aria-label": "close", onClick: handleClickCancel, className: classes.headerIconWrapper },
react_1.default.createElement(icons_1.Close, { className: classes.headerIcon }))));
const Body = (react_1.default.createElement(core_1.Box, { className: classes.body }, filterItems.map(({ widgetType, widgetProps, label, stateKey }, index) => {
switch (widgetType) {
case interfaces_1.EItemType.chip:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
(widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.chipItems) &&
widgetProps.chipItems.map((chipItem, itemIndex) => (react_1.default.createElement(core_1.Chip, { className: `${classes.filterChipItem} ${chipItem.value === filterValues[stateKey] &&
classes.filterChipItemSelected}`, key: itemIndex, label: chipItem.label, onClick: () => changeFilterValues(stateKey, chipItem.value) })))));
case interfaces_1.EItemType.rangeSlider:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
react_1.default.createElement(components_1.SliderRange, { value: filterValues[stateKey], onChangeCommitted: (e, value) => {
changeFilterValues(stateKey, value);
}, min: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.minValue, max: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.maxValue })));
case interfaces_1.EItemType.stringInput:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.TextField, { placeholder: "Filter Data", variant: "filled", fullWidth: true, value: filterValues[stateKey], onChange: (event) => {
var _a;
event.persist();
changeFilterValues(stateKey, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
}, size: "small", className: classes.searchContainer, InputProps: {
disableUnderline: true,
startAdornment: (react_1.default.createElement(core_1.InputAdornment, { position: "start", className: classes.inputAdornment },
react_1.default.createElement(icons_1.Search, { className: classes.searchIcon }))),
} })));
case interfaces_1.EItemType.dateTime:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.TextField, { id: "datetime-local", type: "datetime-local", value: filterValues[stateKey], onChange: (event) => {
var _a;
event.persist();
changeFilterValues(stateKey, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
}, InputLabelProps: {
shrink: true,
} })));
case interfaces_1.EItemType.dateTimeDifference:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.Box, { marginBottom: 1 },
react_1.default.createElement(core_1.TextField, { id: "datetime-local-from", type: "datetime-local", value: filterValues[`${stateKey}From`], label: "from", onChange: (event) => {
var _a;
event.persist();
changeFilterValues(`${stateKey}From`, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
}, InputLabelProps: {
shrink: true,
} })),
react_1.default.createElement(core_1.TextField, { id: "datetime-local-to", type: "datetime-local", value: filterValues[`${stateKey}To`], label: "to", onChange: (event) => {
var _a;
event.persist();
changeFilterValues(`${stateKey}To`, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
}, InputLabelProps: {
shrink: true,
} })));
case interfaces_1.EItemType.select:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.Typography, { className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.TextField, { id: `side-filter-select-${stateKey}`, select: true, variant: "outlined", value: filterValues[stateKey], onChange: (event) => {
var _a;
event.persist();
changeFilterValues(stateKey, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
} }, (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.options) &&
widgetProps.options.map((option) => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))));
case interfaces_1.EItemType.check:
return (react_1.default.createElement(core_1.Box, { key: index },
react_1.default.createElement(core_1.FormGroup, { row: true },
react_1.default.createElement(core_1.FormControlLabel, { className: classes.checkItem, control: react_1.default.createElement(core_1.Checkbox, { checked: filterValues[stateKey], onChange: (event) => {
var _a;
changeFilterValues(stateKey, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.checked);
}, name: stateKey }), label: react_1.default.createElement(core_1.Typography, { className: classes.checkItemLabel }, label) }))));
default:
return null;
}
})));
const Footer = (react_1.default.createElement(core_1.Box, { className: classes.footer },
react_1.default.createElement(core_1.Button, { variant: "contained", className: classes.submitButton, color: "primary", onClick: handleFilterSubmit }, "APPLY"),
react_1.default.createElement(core_1.Button, { size: "small", onClick: handleClickCancel, className: classes.cancelButton }, "CANCEL")));
return (react_1.default.createElement(core_1.ThemeProvider, { theme: SideFilter_style_1.theme },
react_1.default.createElement(core_1.SwipeableDrawer, { anchor: "right", open: visible, onClose: closeDrawer, onOpen: () => { }, disableBackdropClick: true },
react_1.default.createElement(core_1.Box, { className: classes.drawerContainer },
react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "column" },
Header,
Body),
Footer))));
};
exports.SideFilter = SideFilter;
//# sourceMappingURL=SideFilter.js.map