column copy, fix column rename

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) {
+    if (selectedRegular.length > 1) {
-      const regularSelected = selectedCells.filter(isRegularCell);
+      const startRow = _.min(selectedRegular.map((x) => x[0]));
-      const startRow = _.min(regularSelected.map((x) => x[0]));
+      const startCol = _.min(selectedRegular.map((x) => x[1]));
-      const startCol = _.min(regularSelected.map((x) => x[1]));
+      for (const cell of selectedRegular) {
-      for (const cell of regularSelected) {
         const [rowIndex, colIndex] = cell;
         const selectionRow = rowIndex - startRow;
         const selectionCol = colIndex - startCol;

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) {
+    if (value && event.keyCode == keycodes.enter && !isError) {
-      onEnter(editorRef.current.value);
+      onEnter(value);
-      editorRef.current.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) {
+    if (value && !isError) {
-      onEnter(editorRef.current.value);
+      onEnter(value);
-      editorRef.current.value = '';
+      setValue('');
     }
     if (onBlur) onBlur();
   };
   React.useEffect(() => {
     if (focusOnCreate) editorRef.current.focus();
   }, [focusOnCreate]);
-  return <EditorInput ref={editorRef} type="text" onKeyDown={handleKeyDown} onBlur={handleBlur} {...other} />;
+  return (
+    <EditorInput
+      ref={editorRef}
+      type="text"
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      value={value}
+      onChange={(ev) => 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) {
             <ColumnNameEditor
               defaultValue={column.columnName}
               onEnter={(columnName) => {
-                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)}
             />
           ) : (
             <ColumnManagerRow
@@ -144,6 +174,7 @@ export default function FreeTableColumnEditor(props) {
             dispatchChangeColumns(props, (cols) => [...cols, { columnName }]);
           }}
           placeholder="New column"
+          existingNames={model.structure.columns.map((x) => x.columnName)}
         />
       </ManagerInnerContainer>
     </>