chore: export

src/hooks/useColumns.tsx

@@ -0,0 +1,83 @@
+import { FC, useState, useCallback } from 'react';
+import { Input } from 'antd';
+
+import { DISABLE_AUTO_COMPLETE } from '@/utils';
+
+export default function useColumns(columns: any[] = []) {
+  const [opType, setOpType] = useState('');
+  const [opRecord, setRecord] = useState<Record<string|symbol, any> | null>(null);
+  const [opTime, setNow] = useState<number | null>(null);
+  const [opExtra, setExtra] = useState<any>(null);
+
+  const handleRecord = useCallback((row: Record<string, any> | null, type: string) => {
+    setOpType(type);
+    setRecord(row);
+    setNow(Date.now());
+  }, []);
+
+  const resetRecord = useCallback(() => {
+    setRecord(null);
+    setOpType('');
+    setNow(Date.now());
+  }, []);
+
+  const opNew = useCallback(() => handleRecord(null, 'new'), [handleRecord]);
+
+  const cols = columns.map((i: any) => {
+    if (i.render) {
+      const opRender = i.render;
+      i.render = (text: string, row: Record<string, any>) => {
+        return opRender(text, row, { setRecord: handleRecord, setExtra });
+      };
+    }
+    return i;
+  });
+
+  return {
+    opTime,
+    opType,
+    opNew,
+    columns: cols,
+    opRecord,
+    setRecord: handleRecord,
+    resetRecord,
+    setExtra,
+    opExtra,
+  };
+}
+
+interface EditRowProps {
+  rowKey: string;
+  row: Record<string, any>;
+  actions: any;
+}
+export const EditRow: FC<EditRowProps> = ({ rowKey, row, actions }) => {
+  const [isEdit, setEdit] = useState(false);
+  const [val, setVal] = useState(row[rowKey]);
+  const handleEdit = () => {
+    setEdit(true);
+  };
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setVal(e.target.value)
+  };
+
+  const handleSave = () => {
+    setEdit(false);
+    row[rowKey] = val;
+    actions?.setRecord(row, 'rowedit')
+  };
+
+  return isEdit
+    ? (
+        <Input.TextArea
+          value={val}
+          rows={1}
+          onChange={handleChange}
+          {...DISABLE_AUTO_COMPLETE}
+          onPressEnter={handleSave}
+        />
+      )
+    : (
+      <div className='rowedit' onClick={handleEdit}>{val}</div>
+    );
+};