react-openfin-mat-impl
Version:
Materialize UI implementation of react-openfin
98 lines • 7.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_1 = require("react");
const react_openfin_1 = require("react-openfin");
const react_custom_scrollbars_1 = require("react-custom-scrollbars");
const react_splitter_layout_1 = require("react-splitter-layout");
const TextField_1 = require("@material-ui/core/TextField");
const InputAdornment_1 = require("@material-ui/core/InputAdornment");
const List_1 = require("@material-ui/core/List");
const ListItem_1 = require("@material-ui/core/ListItem");
const ListItemIcon_1 = require("@material-ui/core/ListItemIcon");
const ListItemText_1 = require("@material-ui/core/ListItemText");
const ListItemSecondaryAction_1 = require("@material-ui/core/ListItemSecondaryAction");
const GridList_1 = require("@material-ui/core/GridList");
const GridListTile_1 = require("@material-ui/core/GridListTile");
const Paper_1 = require("@material-ui/core/Paper");
const Typography_1 = require("@material-ui/core/Typography");
const Search_1 = require("@material-ui/icons/Search");
const Check_1 = require("@material-ui/icons/Check");
const styles_1 = require("@material-ui/styles");
const pickers_1 = require("@material-ui/pickers");
const moment_1 = require("@date-io/moment");
const react_i18next_1 = require("react-i18next");
const classnames_1 = require("classnames");
const ConfigField_1 = require("../../components/ConfigComp/ConfigField");
const jss_1 = require("../../assets/jss");
const useStyles = styles_1.makeStyles(jss_1.configViewStyle);
const ConfigView = ({ tabs, }) => {
const classes = useStyles({});
const { config, actions: { onUpdateGlobalFilterString, onUpdateOneField, } } = react_1.useContext(react_openfin_1.ConfigContext);
const theme = config.application.theme;
const globalFilterString = config.configGlobalFilterString;
const [currentTab, setCurrentTab] = react_1.useState(0);
const { t, i18n } = react_i18next_1.useTranslation('config', { useSuspense: false });
const getTabIcon = (oneTab) => {
if (theme === react_openfin_1.MuiTheme.DARK && oneTab._svgUrl_dark) {
return oneTab._svgUrl_dark;
}
return oneTab._svgUrl;
};
function handleTabItemClick(tabNumber) {
return () => {
setCurrentTab(tabNumber);
};
}
// const tabs:IConfigTab[] = config._tabs;
const tabName = tabs[currentTab]._name;
const tabShownCnt = tabs.filter(oneTab => (globalFilterString === '' || oneTab._fieldLabels.toLowerCase().indexOf(globalFilterString.toLowerCase()) > -1)).length;
const filedShownCnt = tabs[currentTab]._fields.filter(oneField => (globalFilterString === '' || oneField._label.toLowerCase().indexOf(globalFilterString.toLowerCase()) > -1)).length;
const handleGlobalFilterStrChange = (event) => {
onUpdateGlobalFilterString(event.target.value);
};
const handleUpdateOneField = (tabName, fieldName) => (value) => {
onUpdateOneField(tabName, fieldName, value);
};
return (React.createElement(React.Fragment, null,
React.createElement(pickers_1.MuiPickersUtilsProvider, { utils: moment_1.default },
React.createElement("div", { className: classes.topInputContainer },
React.createElement(TextField_1.default, { id: 'filter-string-input', InputProps: {
startAdornment: (React.createElement(InputAdornment_1.default, { position: 'start' },
React.createElement(Search_1.default, null)))
}, InputLabelProps: {
shrink: true,
}, placeholder: t('common.globalFilterPlaceholder'), fullWidth: true, onChange: handleGlobalFilterStrChange, margin: 'dense' })),
React.createElement("div", { className: classes.configContainer },
React.createElement(react_splitter_layout_1.default, { primaryMinSize: 200, secondaryMinSize: 400, secondaryInitialSize: 600 },
React.createElement("div", { className: classes.configLeftSection },
React.createElement(react_custom_scrollbars_1.Scrollbars, { renderThumbVertical: props => React.createElement("div", Object.assign({ className: "dark-thumb-vertical" }, props)) },
React.createElement(List_1.default, null, tabShownCnt > 0 ?
tabs.map((oneTab, index) => {
if (globalFilterString === '' || oneTab._fieldLabels.toLowerCase().indexOf(globalFilterString.toLowerCase()) > -1) {
return (React.createElement(ListItem_1.default, { button: true, className: classnames_1.default('active', classes.configLeftListItem), key: index, dense: true, onClick: handleTabItemClick(index) },
React.createElement(ListItemIcon_1.default, null, oneTab._svgUrl ? React.createElement("img", { src: getTabIcon(oneTab) }) : React.createElement(oneTab._icon, null)),
React.createElement(ListItemText_1.default, { primary: t(oneTab._label) }),
currentTab === index ?
React.createElement(ListItemSecondaryAction_1.default, null,
React.createElement(Check_1.default, null))
: null));
}
else {
return null;
}
}) :
React.createElement(Paper_1.default, null,
React.createElement(Typography_1.default, { variant: 'body2' }, "Not found ..."))))),
React.createElement(react_custom_scrollbars_1.Scrollbars, { renderThumbVertical: props => React.createElement("div", Object.assign({ className: "dark-thumb-vertical" }, props)) },
React.createElement("div", { className: classes.configMainSection },
React.createElement(GridList_1.default, { cellHeight: 52, className: classes.configMainGridList, cols: 12 }, filedShownCnt > 0 ?
tabs[currentTab]._fields.map((oneField, index) => (globalFilterString === '' || t(oneField._label).toLowerCase().indexOf(globalFilterString.toLowerCase()) > -1 ?
React.createElement(GridListTile_1.default, { key: index, cols: oneField._cols || 3, rows: oneField._rows || 1 },
React.createElement(ConfigField_1.default, Object.assign({ value: config[tabName][oneField._name], onChange: handleUpdateOneField(tabName, oneField._name) }, oneField))) : null)) :
React.createElement(Paper_1.default, { style: { width: '100%' } },
React.createElement(Typography_1.default, { variant: 'body2' }, "Not found ...")))),
React.createElement("div", { style: { marginBottom: '100px' } })))))));
};
exports.default = ConfigView;
//# sourceMappingURL=ConfigView.js.map