@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
53 lines (52 loc) • 4.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
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';
import { Flex } from '../Flex';
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 (_jsxs(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full", children: [_jsxs(Flex, { className: `${baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start", children: [hasFriendlyNames && (_jsx(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
float: 'right',
margin: 0,
paddingTop: 'var(--ab-base-space)',
paddingBottom: 'var(--ab-base-space)',
}, children: labels?.showIds ?? 'Show Column IDs' })), _jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })] }), _jsx(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' }, children: 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 (_jsx(FormRow, { label: _jsx(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag", children: _jsx(Flex, { flexDirection: "column", alignItems: "flex-start", children: label }) }), children: field.dataType === 'number' ? (_jsx(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))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (_jsx(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)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (_jsx(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)));
}, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (_jsx(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 }, field.label));
}) })] }));
};