@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
538 lines • 25.5 kB
JavaScript
import React, { Component } from 'react';
import { HexColorPicker as ColorPicker } from 'react-colorful';
import { Fab, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, IconButton, Select, MenuItem, TextField, Checkbox, Dialog, } from '@mui/material';
import { Edit as IconEdit, Delete as IconDelete, NavigateNext as IconExpand, ExpandMore as IconCollapse, Check as IconCheck, Close as IconClose, Add as IconAdd, ViewHeadline as IconList, Colorize as IconColor, } from '@mui/icons-material';
import { DialogSelectID } from '../Dialogs/SelectID';
import { Utils } from './Utils';
function getAttr(obj, attr, lookup) {
if (typeof attr === 'string') {
attr = attr.split('.');
}
if (!obj) {
return null;
}
if (attr.length === 1) {
if (lookup && lookup[obj[attr[0]]]) {
return lookup[obj[attr[0]]];
}
return obj[attr[0]];
}
const name = attr.shift();
return getAttr(obj[name], attr);
}
function setAttr(obj, attr, value) {
if (typeof attr === 'string') {
attr = attr.split('.');
}
if (attr.length === 1) {
return (obj[attr[0]] = value);
}
const name = attr.shift();
if (obj[name] === null || obj[name] === undefined) {
obj[name] = {};
}
return setAttr(obj[name], attr, value);
}
const styles = {
tableContainer: {
width: '100%',
height: '100%',
overflow: 'auto',
},
table: {
width: '100%',
minWidth: 800,
maxWidth: 1920,
},
cell: {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 4,
paddingRight: 4,
},
rowMainWithChildren: {},
rowMainWithoutChildren: {},
rowNoEdit: {
opacity: 0.3,
},
cellExpand: {
width: 30,
},
cellButton: {
width: 30,
},
cellHeader: {
fontWeight: 'bold',
background: (theme) => (theme.palette.mode === 'dark' ? '#888' : '#888'),
color: (theme) => (theme.palette.mode === 'dark' ? '#EEE' : '#111'),
height: 48,
wordBreak: 'break-word',
whiteSpace: 'pre',
},
width_name_nicknames: {
maxWidth: 150,
},
width_ioType: {
maxWidth: 100,
},
width_type: {
maxWidth: 100,
},
width_displayTraits: {
maxWidth: 100,
},
width_roomHint: {
maxWidth: 100,
},
rowSecondary: {
fontStyle: 'italic',
},
cellSecondary: {
fontSize: 10,
},
visuallyHidden: {
border: 0,
clip: 'rect(0 0 0 0)',
height: 1,
margin: -1,
overflow: 'hidden',
padding: 0,
position: 'absolute',
top: 20,
width: 1,
},
fieldEditWithButton: {
width: 'calc(100% - 33px)',
display: 'inline-block',
},
fieldEdit: {
width: '100%',
display: 'inline-block',
lineHeight: '50px',
verticalAlign: 'middle',
},
fieldButton: {
width: 30,
display: 'inline-block',
},
colorDialog: {
overflow: 'hidden',
padding: 15,
},
subText: {
fontSize: 10,
fontStyle: 'italic',
},
glow: {
animation: 'glow 0.2s 2 alternate',
},
};
function descendingComparator(a, b, orderBy, lookup) {
const _a = getAttr(a, orderBy, lookup) || '';
const _b = getAttr(b, orderBy, lookup) || '';
if (_b < _a) {
return -1;
}
if (_b > _a) {
return 1;
}
return 0;
}
function getComparator(order, orderBy, lookup) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy, lookup)
: (a, b) => -descendingComparator(a, b, orderBy, lookup);
}
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => ({ e: el, i: index }));
stabilizedThis.sort((a, b) => {
const order = comparator(a.e, b.e);
if (order) {
return order;
}
return a.i - b.i;
});
return stabilizedThis.map(item => item.e);
}
export class TreeTable extends Component {
selectCallback = null;
updateTimeout = null;
constructor(props) {
super(props);
let opened = (window._localStorage || window.localStorage).getItem(this.props.name || 'iob-table') || '[]';
try {
opened = JSON.parse(opened) || [];
}
catch {
opened = [];
}
if (!Array.isArray(opened)) {
opened = [];
}
this.state = {
opened,
editMode: false,
deleteMode: false,
editData: null,
order: 'asc',
update: null,
orderBy: this.props.columns[0].field,
showSelectColor: false,
};
}
static getDerivedStateFromProps(props, state) {
if (props.glowOnChange) {
const update = [];
let count = 0;
if (props.data && state.data) {
props.data.forEach(line => {
count++;
const oldLine = state.data?.find(it => it.id === line.id);
if (oldLine) {
if (JSON.stringify(oldLine) !== JSON.stringify(line)) {
update.push(line.id);
}
}
else {
update.push(line.id);
}
});
}
if (update.length && update.length !== count) {
return { data: props.data, update };
}
return { data: props.data };
}
return { data: props.data };
}
renderCellEdit(item, col) {
let val = getAttr(item, col.field);
if (Array.isArray(val)) {
val = val[0];
}
if (col.lookup) {
return this.renderCellEditSelect(col, val);
}
if (col.editComponent) {
return this.renderCellEditCustom(col, val, item);
}
if (col.type === 'boolean' || (!col.type && typeof val === 'boolean')) {
return this.renderCellEditBoolean(col, val);
}
if (col.type === 'color') {
return this.renderCellEditColor(col, val);
}
if (col.type === 'oid') {
return this.renderCellEditObjectID(col, val);
}
if (col.type === 'numeric') {
return this.renderCellEditNumber(col, val);
}
return this.renderCellEditString(col, val);
}
onChange(col, oldValue, newValue) {
const editData = this.state.editData ? { ...this.state.editData } : {};
if (newValue === oldValue) {
delete editData[col.field];
}
else {
editData[col.field] = newValue;
}
this.setState({ editData });
}
renderCellEditSelect(col, val) {
return (React.createElement(Select, { variant: "standard", onChange: e => this.onChange(col, val, e.target.value), value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup &&
Object.keys(col.lookup).map((v, i) => (React.createElement(MenuItem, { key: i, value: v }, col.lookup?.[v])))));
}
renderCellEditString(col, val) {
return (React.createElement(TextField, { variant: "standard", style: styles.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined
? this.state.editData[col.field]
: val, onChange: e => this.onChange(col, val, e.target.value) }));
}
renderCellEditNumber(col, val) {
return (React.createElement(TextField, { variant: "standard", style: styles.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined
? this.state.editData[col.field]
: val, onChange: e => this.onChange(col, val, e.target.value) }));
}
renderCellEditCustom(col, val, item) {
const EditComponent = col.editComponent;
// use new value if exists
if (this.state.editData && this.state.editData[col.field] !== undefined) {
val = this.state.editData[col.field];
item = JSON.parse(JSON.stringify(item));
item[col.field] = val;
}
return EditComponent ? (React.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) })) : null;
}
renderCellEditBoolean(col, val) {
return (React.createElement(Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined
? !!this.state.editData[col.field]
: !!val, onChange: e => this.onChange(col, !!val, e.target.checked), inputProps: { 'aria-label': 'checkbox' } }));
}
renderSelectColorDialog() {
return (React.createElement(Dialog, { sx: {
'& .MuiPaper-root': styles.root,
'& .MuiPaper-paper': styles.paper,
}, onClose: () => {
this.selectCallback = null;
this.setState({ showSelectColor: false });
}, open: this.state.showSelectColor },
React.createElement(ColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => {
if (this.selectCallback) {
this.selectCallback(color);
}
}) })));
}
renderCellEditColor(col, val) {
const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
return (React.createElement("div", { style: styles.fieldEdit },
React.createElement(TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => this.onChange(col, !!val, e.target.value) }),
React.createElement(IconButton, { style: styles.fieldButton, onClick: () => {
this.selectCallback = newColor => this.onChange(col, val, newColor);
this.setState({ showSelectColor: true, selectIdValue: val });
}, size: "large" },
React.createElement(IconColor, null))));
}
renderSelectIdDialog() {
if (this.state.showSelectId && this.props.socket) {
return (React.createElement(DialogSelectID, { key: "tableSelect", imagePrefix: "../..", dialogName: this.props.adapterName, themeType: this.props.themeType, theme: this.props.theme, socket: this.props.socket, selected: this.state.selectIdValue, onClose: () => this.setState({ showSelectId: false }), onOk: (selected) => {
this.setState({ showSelectId: false, selectIdValue: null });
const selectedStr = Array.isArray(selected) ? selected[0] : selected;
if (selectedStr && this.selectCallback) {
this.selectCallback && this.selectCallback(selectedStr);
this.selectCallback = null;
}
} }));
}
return null;
}
renderCellEditObjectID(col, val) {
return (React.createElement("div", { style: styles.fieldEdit },
React.createElement(TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined
? this.state.editData[col.field]
: val, onChange: e => this.onChange(col, val, e.target.value) }),
React.createElement(IconButton, { style: styles.fieldButton, onClick: () => {
this.selectCallback = selected => this.onChange(col, val, selected);
this.setState({ showSelectId: true, selectIdValue: val });
}, size: "large" },
React.createElement(IconList, null))));
}
static renderCellNonEdit(item, col) {
let val = getAttr(item, col.field, col.lookup);
if (Array.isArray(val)) {
val = val[0];
}
if (col.type === 'boolean') {
return (React.createElement(Checkbox, { checked: !!val, disabled: true, inputProps: { 'aria-label': 'checkbox' } }));
}
return val;
}
renderCell(item, col, level, i) {
if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
return (React.createElement(TableCell, { key: col.field, style: { ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }, component: "th" }, this.renderCellEdit(item, col)));
}
return (React.createElement(TableCell, { key: col.field, style: { ...styles.cell, ...(level ? styles.cellSecondary : undefined), ...col.cellStyle }, component: "th" }, TreeTable.renderCellNonEdit(item, col)));
}
static renderCellWithSubField(item, col) {
const main = getAttr(item, col.field, col.lookup);
if (col.subField) {
const sub = getAttr(item, col.subField, col.subLookup);
return (React.createElement("div", null,
React.createElement("div", { style: styles.mainText }, main),
React.createElement("div", { style: { ...styles.subText, ...(col.subStyle || undefined) } }, sub)));
}
return (React.createElement("div", null,
React.createElement("div", { style: styles.mainText }, main)));
}
renderLine(item, level) {
const levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
level = level || 0;
const i = this.props.data.indexOf(item);
if (!item) {
return null;
}
if (!level && item.parentId) {
return null;
}
if (level && !item.parentId) {
return null; // should never happen
}
// try to find children
const opened = this.state.opened.includes(item.id);
const children = this.props.data.filter(it => it.parentId === item.id);
const row = (React.createElement(TableRow, { key: item.id, className: `table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, style: {
...((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined),
...styles.row,
...(level ? styles.rowSecondary : undefined),
...(!level && children.length ? styles.rowMainWithChildren : undefined),
...(!level && !children.length ? styles.rowMainWithoutChildren : undefined),
...(this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined),
...(this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined),
} },
React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellExpand, ...(level ? styles.cellSecondary : undefined) } }, children.length ? (React.createElement(IconButton, { onClick: () => {
const _opened = [...this.state.opened];
const pos = _opened.indexOf(item.id);
if (pos === -1) {
_opened.push(item.id);
_opened.sort();
}
else {
_opened.splice(pos, 1);
}
(window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
this.setState({ opened: _opened });
}, size: "small" }, opened ? React.createElement(IconCollapse, null) : React.createElement(IconExpand, null))) : null),
React.createElement(TableCell, { scope: "row", style: {
...styles.cell,
...(level ? styles.cellSecondary : undefined),
...this.props.columns[0].cellStyle,
paddingLeft: levelShift * level,
} }, this.props.columns[0].subField
? TreeTable.renderCellWithSubField(item, this.props.columns[0])
: getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)),
this.props.columns.map((col, ii) => !ii && !col.hidden ? null : this.renderCell(item, col, level, i)),
this.props.onUpdate ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.editMode === i || this.state.deleteMode === i ? (React.createElement(IconButton, { disabled: this.state.editMode !== false &&
(!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => {
if (this.state.editMode !== false) {
const newData = JSON.parse(JSON.stringify(item));
this.state.editData &&
Object.keys(this.state.editData).forEach(attr => setAttr(newData, attr, this.state.editData?.[attr]));
this.setState({ editMode: false }, () => this.props.onUpdate && this.props.onUpdate(newData, item));
}
else {
this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item));
}
}, size: "large" },
React.createElement(IconCheck, null))) : (React.createElement(IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
React.createElement(IconEdit, null))))) : null,
this.props.onDelete && !this.props.onUpdate ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.deleteMode === i ? (React.createElement(IconButton, { disabled: this.state.editMode !== false &&
(!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item)), size: "large" },
React.createElement(IconCheck, null))) : null)) : null,
this.props.onUpdate || this.props.onDelete ? (React.createElement(TableCell, { style: { ...styles.cell, ...styles.cellButton } }, this.state.editMode === i || this.state.deleteMode === i ? (React.createElement(IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
React.createElement(IconClose, null))) : this.props.onDelete ? (React.createElement(IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "large" },
React.createElement(IconDelete, null))) : null)) : null));
if (!level && opened) {
const items = children.map(it => this.renderLine(it, level + 1));
items.unshift(row);
return items;
}
return row;
}
handleRequestSort(property) {
const isAsc = this.state.orderBy === property && this.state.order === 'asc';
this.setState({ order: isAsc ? 'desc' : 'asc', orderBy: property });
}
renderHead() {
return (React.createElement(TableHead, null,
React.createElement(TableRow, { key: "headerRow" },
React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand) }),
React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort
? false
: this.state.orderBy === this.props.columns[0].field
? this.state.order
: false }, this.props.noSort ? null : (React.createElement(TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
this.props.columns[0].title || this.props.columns[0].field,
this.state.orderBy === this.props.columns[0].field ? (React.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))),
this.props.columns.map((col, i) => !i && !col.hidden ? null : (React.createElement(TableCell, { key: col.field, sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : (React.createElement(TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
col.title || col.field,
this.state.orderBy === col.field ? (React.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))))),
this.props.onUpdate ? (React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? (React.createElement(Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
React.createElement(IconAdd, null))) : null)) : null,
this.props.onDelete || this.props.onUpdate ? (React.createElement(TableCell, { component: "th", sx: Utils.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) })) : null)));
}
render() {
const col = this.props.columns.find(_col => _col.field === this.state.orderBy);
if (col) {
const lookup = col.lookup;
const table = stableSort(this.props.data, getComparator(this.state.order, this.state.orderBy, lookup));
if (this.state.update && this.state.update.length) {
this.updateTimeout && clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(() => {
this.updateTimeout = null;
this.setState({ update: null });
}, 500);
}
return (React.createElement("div", { style: styles.tableContainer, className: this.props.className },
React.createElement(Table, { style: styles.table, "aria-label": "simple table", size: "small", stickyHeader: true },
this.renderHead(),
React.createElement(TableBody, null, table.map(it => this.renderLine(it)))),
this.renderSelectIdDialog(),
this.renderSelectColorDialog()));
}
return null;
}
}
/*
const columns = [
{
title: 'Name of field', // required, else it will be "field"
field: 'fieldIdInData', // required
editable: false, // or true [default - true]
cellStyle: { // CSS style - // optional
maxWidth: '12rem',
overflow: 'hidden',
wordBreak: 'break-word'
},
lookup: { // optional => edit will be automatically "SELECT"
'value1': 'text1',
'value2': 'text2',
}
},
{
title: 'Type', // required, else it will be "field"
field: 'myType', // required
editable: true, // or true [default - true]
lookup: { // optional => edit will be automatically "SELECT"
'number': 'Number',
'string': 'String',
'boolean': 'Boolean',
},
type: 'number/string/color/oid/icon/boolean', // oid=ObjectID,icon=base64-icon
editComponent: props =>
<div>Prefix{ <br/>
<textarea
rows={4}
style={{width: '100%', resize: 'vertical'}}
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
Suffix
</div>,
},
];
*/
/* const data = [
{
id: 'UniqueID1' // required
fieldIdInData: 'Name1',
myType: 'number',
},
{
id: 'UniqueID2' // required
fieldIdInData: 'Name12',
myType: 'string',
},
];
*/
/*
// STYLES
const styles = theme => ({
tableDiv: {
width: '100%',
overflow: 'hidden',
height: 'calc(100% - 48px)',
},
});
// renderTable
renderTable() {
return <div style={styles.tableDiv}>
<TreeTable
columns={this.columns}
data={lines}
onUpdate={(newData, oldData) => console.log('Update: ' + JSON.stringify(newData))}
onDelete={oldData => console.log('Delete: ' + JSON.stringify(oldData))}
/>
</div>;
}
*/
//# sourceMappingURL=TreeTable.js.map