react-openfin-mat-impl
Version:
Materialize UI implementation of react-openfin
63 lines • 4.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const shortid = require("shortid");
const react_openfin_1 = require("react-openfin");
const pickers_1 = require("@material-ui/pickers");
const Typography_1 = require("@material-ui/core/Typography");
const TextField_1 = require("@material-ui/core/TextField");
const styles_1 = require("@material-ui/styles");
const react_i18next_1 = require("react-i18next");
const jss_1 = require("../../assets/jss");
const useStyles = styles_1.makeStyles(jss_1.configFieldCompStyle);
const ConfigFieldComp = ({ _type, _label, _props, _custom, value, onChange }) => {
const classes = useStyles({});
const { t, i18n } = react_i18next_1.useTranslation('config', { useSuspense: false });
const handleTextFieldChange = event => {
if (onChange) {
onChange(event.target.value);
}
};
const handleTextFieldIntChange = event => {
if (onChange) {
const value = event.target.value;
onChange(value ? parseInt(value, 10) : '');
}
};
const handleTextFieldFloatChange = event => {
if (onChange) {
const value = event.target.value;
onChange(value ? parseFloat(value) : '');
}
};
const handleDateChange = (date) => {
if (onChange) {
onChange(date._d);
}
};
switch (_type) {
case react_openfin_1.FieldType.TITLE:
return (React.createElement(Typography_1.default, { variant: 'h5', gutterBottom: true }, t(_label)));
case react_openfin_1.FieldType.SUBHEADING:
return (React.createElement(Typography_1.default, { className: classes.subheadingField, variant: 'subtitle1' }, t(_label)));
case react_openfin_1.FieldType.CUSTOM_FIELD:
return (_custom);
case react_openfin_1.FieldType.CURRENCY:
return (React.createElement(TextField_1.default, Object.assign({ label: t(_label), value: value, onChange: handleTextFieldFloatChange, id: `config_field_${shortid.generate()}`, margin: "dense" }, _props)));
case react_openfin_1.FieldType.STRING:
return (React.createElement(TextField_1.default, Object.assign({ id: `config_field_${shortid.generate()}`, label: t(_label), value: value, onChange: handleTextFieldChange, margin: "dense" }, _props)));
case react_openfin_1.FieldType.NUMBER:
return (React.createElement(TextField_1.default, Object.assign({ type: "number", className: classes.numberField, id: `config_field_${shortid.generate()}`, error: value ? false : true, label: t(_label), value: value, onChange: handleTextFieldIntChange, margin: "dense" }, _props)));
case react_openfin_1.FieldType.DATE:
return (React.createElement(pickers_1.KeyboardDatePicker, Object.assign({ label: t(_label), format: "DD/MM/YYYY", placeholder: "DD/MM/YYYY", mask: value => (value ? [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/] : []), value: value, onChange: handleDateChange, animateYearScrolling: false, margin: "dense" }, _props)));
case react_openfin_1.FieldType.TIME:
return (React.createElement(pickers_1.TimePicker, Object.assign({ ampm: false, openTo: "hours", views: ["hours", "minutes", "seconds"], format: "HH:mm:ss", label: t(_label), value: value, onChange: handleDateChange, margin: "dense" }, _props)));
case react_openfin_1.FieldType.DATETIME:
return (React.createElement(pickers_1.DateTimePicker, Object.assign({ format: "YYYY/MM/DD hh:mm A", mask: [/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M'], label: t(_label), value: value, onChange: handleDateChange, margin: "dense" }, _props)));
case react_openfin_1.FieldType.BODY1:
default:
return (React.createElement(Typography_1.default, { variant: "body1", gutterBottom: true, align: "right" }, t(_label)));
}
};
exports.default = ConfigFieldComp;
//# sourceMappingURL=ConfigField.js.map