@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
61 lines (60 loc) • 4.91 kB
JavaScript
import * as React from 'react';
import { Flex } from 'rebass';
import { baseClassName } from '.';
import { CheckBox } from '../CheckBox';
import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
import FormLayout, { FormRow } from '../FormLayout';
import EditorButton from './EditorButton';
import Input from '../Input';
import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
import { useAdaptable } from '../../View/AdaptableContext';
import AdaptableInput from '../../View/Components/AdaptableInput';
export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
const adaptableApi = useAdaptable().api;
const [data, setData] = React.useState(initialData);
const [showColumnIds, setShowValues] = React.useState(false);
const [searchInputValue, setSearchInputValue] = React.useState('');
const getColValue = (fieldValue) => {
return adaptableApi.internalApi.getValueUsingField(data, fieldValue);
};
const updateColValue = (rowData, fielValue, newValue) => {
const updatedRowData = adaptableApi.internalApi.setValueUsingField(rowData, fielValue, newValue);
return { ...updatedRowData };
};
const getColDateValue = (fieldValue) => {
const colValue = getColValue(fieldValue);
return colValue && isValueValidDate(colValue)
? new Date(colValue).toISOString().substr(0, 10)
: '';
};
const hasFriendlyNames = React.useMemo(() => {
return fields.some((field) => field.label !== field.value);
}, []);
return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
React.createElement(Flex, { className: `${baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
float: 'right',
margin: 0,
paddingTop: 'var(--ab-space-1)',
paddingBottom: 'var(--ab-space-1)',
} }, labels?.showIds ?? 'Show Column IDs')),
React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
.filter((field) => {
if (!searchInputValue) {
return true;
}
return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
})
.map((field) => {
const label = showColumnIds ? `[${field.value}]` : field.label;
return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
background: 'var(--ab-color-primary)',
cursor: 'grab',
marginRight: 'var(--ab-space-1)',
}, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
setData(updateColValue(data, field.value, new Date(e.target.value)));
}, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
}))));
};