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)}
/>
>