diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index c438e0f64..d435d5d7b 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/packages/web/src/datagrid/DataGridCore.js @@ -413,7 +413,8 @@ export default function DataGridCore(props) { .replace(/\r/g, '') .split('\n') .map((row) => row.split('\t')); - if (selectedCells.length <= 1) { + const selectedRegular = cellsToRegularCells(selectedCells); + if (selectedRegular.length <= 1) { const startRow = isRegularCell(currentCell) ? currentCell[0] : grider.rowCount; const startCol = isRegularCell(currentCell) ? currentCell[1] : 0; let rowIndex = startRow; @@ -429,11 +430,10 @@ export default function DataGridCore(props) { rowIndex += 1; } } - if (selectedCells.length > 1) { - const regularSelected = selectedCells.filter(isRegularCell); - const startRow = _.min(regularSelected.map((x) => x[0])); - const startCol = _.min(regularSelected.map((x) => x[1])); - for (const cell of regularSelected) { + if (selectedRegular.length > 1) { + const startRow = _.min(selectedRegular.map((x) => x[0])); + const startCol = _.min(selectedRegular.map((x) => x[1])); + for (const cell of selectedRegular) { const [rowIndex, colIndex] = cell; const selectionRow = rowIndex - startRow; const selectionCol = colIndex - startCol; diff --git a/packages/web/src/freetable/FreeTableColumnEditor.js b/packages/web/src/freetable/FreeTableColumnEditor.js index 98a6b7acf..b4a84adb0 100644 --- a/packages/web/src/freetable/FreeTableColumnEditor.js +++ b/packages/web/src/freetable/FreeTableColumnEditor.js @@ -36,32 +36,57 @@ const Icon = styled(FontIcon)` `; const EditorInput = styled.input` width: calc(100% - 10px); + background-color: ${(props) => + // @ts-ignore + props.isError ? '#FFCCCC' : 'white'}; `; -function ColumnNameEditor({ onEnter, onBlur = undefined, focusOnCreate = false, blurOnEnter = false, ...other }) { +function ColumnNameEditor({ + onEnter, + onBlur = undefined, + focusOnCreate = false, + blurOnEnter = false, + existingNames, + defaultValue = '', + ...other +}) { + const [value, setValue] = React.useState(defaultValue || ''); const editorRef = React.useRef(null); + const isError = value && existingNames && existingNames.includes(value); const handleKeyDown = (event) => { - if (event.keyCode == keycodes.enter) { - onEnter(editorRef.current.value); - editorRef.current.value = ''; + if (value && event.keyCode == keycodes.enter && !isError) { + onEnter(value); + setValue(''); if (blurOnEnter) editorRef.current.blur(); } if (event.keyCode == keycodes.escape) { - editorRef.current.value = ''; + setValue(''); editorRef.current.blur(); } }; const handleBlur = () => { - if (editorRef.current.value) { - onEnter(editorRef.current.value); - editorRef.current.value = ''; + if (value && !isError) { + onEnter(value); + setValue(''); } if (onBlur) onBlur(); }; React.useEffect(() => { if (focusOnCreate) editorRef.current.focus(); }, [focusOnCreate]); - return ; + return ( + setValue(ev.target.value)} + // @ts-ignore + isError={isError} + {...other} + /> + ); } function exchange(array, i1, i2) { @@ -87,14 +112,14 @@ function ColumnManagerRow({ column, onEdit, onRemove, onUp, onDown }) { ); } -function dispatchChangeColumns(props, func) { +function dispatchChangeColumns(props, func, rowFunc = null) { const { modelState, dispatchModel } = props; const model = modelState.value; dispatchModel({ type: 'set', value: { - ...model, + rows: rowFunc ? model.rows.map(rowFunc) : model.rows, structure: { ...model.structure, columns: func(model.structure.columns), @@ -116,11 +141,16 @@ export default function FreeTableColumnEditor(props) { { - dispatchChangeColumns(props, (cols) => cols.map((col, i) => (index == i ? { columnName } : col))); + dispatchChangeColumns( + props, + (cols) => cols.map((col, i) => (index == i ? { columnName } : col)), + (row) => _.mapKeys(row, (v, k) => (k == column.columnName ? columnName : k)) + ); }} onBlur={() => setEditingColumn(null)} focusOnCreate blurOnEnter + existingNames={model.structure.columns.map((x) => x.columnName)} /> ) : ( [...cols, { columnName }]); }} placeholder="New column" + existingNames={model.structure.columns.map((x) => x.columnName)} />