@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
176 lines • 12.7 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.ESideFilterItemType = exports.GovernanceSideFilter = void 0;
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const react_1 = __importStar(require("react"));
const GovernanceSideFilter_style_1 = require("../../components/GovernanceSideFilter/GovernanceSideFilter.style");
const components_1 = require("../../components");
const GovernanceSideFilter = (props) => {
const { visible, onClose, itemsCount = -1, filterItems, onFilterSubmit, } = props;
const classes = (0, GovernanceSideFilter_style_1.useStyles)();
const [filterValues, setFilterValues] = (0, react_1.useState)({});
(0, react_1.useEffect)(() => {
setDefaultFilterValues();
}, []);
const setDefaultFilterValues = () => {
const defaultFilterValues = filterItems.reduce((acc, item) => {
if (item.widgetType === ESideFilterItemType.dateTimeDifference) {
acc[`${item.stateKey}From`] = item.defaultValue;
acc[`${item.stateKey}To`] = null;
}
else {
acc[item.stateKey] = item.defaultValue;
}
return acc;
}, {});
setFilterValues(defaultFilterValues);
return defaultFilterValues;
};
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, { variant: "h3", color: "textPrimary" }, "Filter"),
itemsCount > -1 && (react_1.default.createElement(core_1.Typography, { variant: "h5", className: classes.headerInfo },
itemsCount,
" results"))),
react_1.default.createElement(core_1.IconButton, { "aria-label": "close", onClick: handleClickCancel },
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 ESideFilterItemType.chip:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", 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 ESideFilterItemType.rangeSlider:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", 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 ESideFilterItemType.stringInput:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.TextField, { className: classes.textFieldWrapper, 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", InputProps: {
disableUnderline: true,
} })));
case ESideFilterItemType.dateTime:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", 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,
}, InputProps: {
disableUnderline: true,
} })));
case ESideFilterItemType.dateTimeDifference:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.Box, { className: classes.dateWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", className: classes.dateLabel }, "From"),
react_1.default.createElement(core_1.TextField, { className: classes.textFieldWrapper, 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.Box, { className: classes.dateWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", className: classes.dateLabel }, "To"),
react_1.default.createElement(core_1.TextField, { className: classes.textFieldWrapper, 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 ESideFilterItemType.select:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
react_1.default.createElement(core_1.Typography, { variant: "h6", color: "textSecondary", className: classes.widgetLabel }, label),
react_1.default.createElement(core_1.TextField, { className: classes.selectWrapper, 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 ESideFilterItemType.check:
return (react_1.default.createElement(core_1.Box, { key: index, className: classes.widgetWrapper },
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, { variant: "h6", color: "textSecondary" }, label) }))));
default:
return null;
}
})));
const Footer = (react_1.default.createElement(core_1.Box, { className: classes.footer },
react_1.default.createElement(core_1.Button, { size: "medium", onClick: handleClickCancel, className: classes.cancelButton }, "CANCEL"),
react_1.default.createElement(core_1.Button, { size: "medium", variant: "contained", className: classes.submitButton, color: "primary", onClick: handleFilterSubmit }, "APPLY")));
return (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,
react_1.default.createElement(core_1.Divider, null),
Body),
Footer)));
};
exports.GovernanceSideFilter = GovernanceSideFilter;
var ESideFilterItemType;
(function (ESideFilterItemType) {
ESideFilterItemType["chip"] = "chip";
ESideFilterItemType["rangeSlider"] = "rangeSlider";
ESideFilterItemType["stringInput"] = "stringInput";
ESideFilterItemType["check"] = "check";
ESideFilterItemType["select"] = "select";
ESideFilterItemType["dateTime"] = "dateTime";
ESideFilterItemType["dateTimeDifference"] = "dateTimeDifference";
})(ESideFilterItemType = exports.ESideFilterItemType || (exports.ESideFilterItemType = {}));
//# sourceMappingURL=GovernanceSideFilter.js.map