[Feat]: Add multiline column type

Author: iamfaran

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -54,6 +54,8 @@ export type EditViewFn<T> = (props: {
   value: T;
   onChange: (value: T) => void;
   onChangeEnd: () => void;
+  onCommit?: (value: T) => void;
+  onCancel?: () => void;
   onImmediateSave?: (value: T) => void;
   otherProps?: Record<string, any>;
 }) => ReactNode;
@@ -152,22 +154,38 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
     []
   );
 
-  const onChangeEnd = useCallback(() => {
+  const commitValue = useCallback((finalValue: T | null) => {
     if (!mountedRef.current) return;
-    
+
     setIsEditing(false);
-    const newValue = _.isNil(tmpValue) || _.isEqual(tmpValue, baseValue) ? null : tmpValue;
+    const newValue = _.isNil(finalValue) || _.isEqual(finalValue, baseValue) ? null : finalValue;
     dispatch(
       changeChildAction(
         "changeValue",
         newValue,
         false
       )
     );
-    if(!_.isEqual(tmpValue, value)) {
+    if(!_.isEqual(finalValue, value)) {
       onTableEvent?.('columnEdited');
     }
-  }, [dispatch, tmpValue, baseValue, value, onTableEvent, setIsEditing]);
+  }, [dispatch, baseValue, value, onTableEvent, setIsEditing]);
+
+  const onChangeEnd = useCallback(() => {
+    commitValue(tmpValue);
+  }, [commitValue, tmpValue]);
+
+  const onCommit = useCallback((nextValue: T) => {
+    if (!mountedRef.current) return;
+    setTmpValue(nextValue);
+    commitValue(nextValue);
+  }, [commitValue]);
+
+  const onCancel = useCallback(() => {
+    if (!mountedRef.current) return;
+    setIsEditing(false);
+    setTmpValue(value);
+  }, [setIsEditing, value]);
 
   const onImmediateSave = useCallback((newValue: T) => {
     if (!mountedRef.current) return;
@@ -187,8 +205,8 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
   }, [dispatch, baseValue, value, onTableEvent]);
 
   const editView = useMemo(
-    () => editViewFn?.({ value, onChange, onChangeEnd, onImmediateSave, otherProps }) ?? <></>,
-    [editViewFn, value, onChange, onChangeEnd, onImmediateSave, otherProps]
+    () => editViewFn?.({ value, onChange, onChangeEnd, onCommit, onCancel, onImmediateSave, otherProps }) ?? <></>,
+    [editViewFn, value, onChange, onChangeEnd, onCommit, onCancel, onImmediateSave, otherProps]
   );
 
   const enterEditFn = useCallback(() => {
@@ -243,4 +261,4 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
   );
 }
 
-export const EditableCell = React.memo(EditableCellComp) as typeof EditableCellComp;
+export const EditableCell = React.memo(EditableCellComp) as typeof EditableCellComp;

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -23,6 +23,7 @@ import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
 import { ColumnAvatarsComp } from "./columnTypeComps/columnAvatarsComp";
 import { ColumnDropdownComp } from "./columnTypeComps/columnDropdownComp";
 import { ColumnPasswordComp } from "./columnTypeComps/columnPasswordComp";
+import { ColumnMultilineTextComp } from "./columnTypeComps/columnMultilineTextComp";
 
 const actionOptions = [
   {
@@ -106,6 +107,10 @@ const actionOptions = [
     label: "Password",
     value: "password",
   },
+  {
+    label: trans("table.multilineText"),
+    value: "multilineText",
+  },
 ] as const;
 
 export const ColumnTypeCompMap = {
@@ -129,6 +134,7 @@ export const ColumnTypeCompMap = {
   date: DateComp,
   time: TimeComp,
   password: ColumnPasswordComp,
+  multilineText: ColumnMultilineTextComp,
 };
 
 type ColumnTypeMapType = typeof ColumnTypeCompMap;

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMultilineTextComp.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { default as AntdModal } from "antd/es/modal";
+import { default as Input } from "antd/es/input";
+import { StringOrNumberControl } from "comps/controls/codeControl";
+import { trans } from "i18n";
+import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
+import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { RecordConstructorToComp } from "lowcoder-core";
+import styled from "styled-components";
+
+const { TextArea } = Input;
+
+const TextView = styled.div`
+  white-space: pre-wrap;
+  word-break: break-word;
+  cursor: pointer;
+`;
+
+const childrenMap = {
+  text: StringOrNumberControl,
+};
+
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) =>
+  typeof props.text === "string" ? props.text : String(props.text);
+
+const MultilineContent = React.memo(({ value }: { value: string }) => <TextView>{value}</TextView>);
+
+const MultilineEditModal = React.memo((props: {
+  value: string;
+  onCommit: (value: string) => void;
+  onCancel: () => void;
+}) => {
+  const { value, onCommit, onCancel } = props;
+  const [localValue, setLocalValue] = useState(value);
+  const textAreaRef = useRef<any>(null);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => textAreaRef.current?.focus({ cursor: "end" }), 0);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    onCommit(localValue);
+  }, [localValue, onCommit]);
+
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  return (
+    <AntdModal
+      open={true}
+      title={trans("table.multilineEditorTitle")}
+      onOk={handleSave}
+      onCancel={handleCancel}
+      okText={trans("table.multilineEditorSave")}
+      cancelText={trans("table.multilineEditorCancel")}
+      width={560}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <TextArea
+        ref={textAreaRef}
+        value={localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        autoSize={{ minRows: 4, maxRows: 16 }}
+        placeholder={trans("table.multilineEditorPlaceholder")}
+      />
+    </AntdModal>
+  );
+});
+
+const MultilinePropertyView = React.memo(
+  ({ children }: { children: RecordConstructorToComp<typeof childrenMap> }) => (
+    <>
+      {children.text.propertyView({
+        label: trans("table.columnValue"),
+        tooltip: ColumnValueTooltip,
+      })}
+    </>
+  )
+);
+
+export const ColumnMultilineTextComp = new ColumnTypeCompBuilder(
+  childrenMap,
+  (props, dispatch) => {
+    const value = props.changeValue ?? getBaseValue(props, dispatch);
+    return <MultilineContent value={String(value)} />;
+  },
+  (nodeValue) => nodeValue.text.value,
+  getBaseValue
+)
+  .setEditViewFn((props) => (
+    <MultilineEditModal
+      value={String(props.value)}
+      onCommit={(value) => props.onCommit!(value as any)}
+      onCancel={props.onCancel!}
+    />
+  ))
+  .setPropertyViewFn((children) => <MultilinePropertyView children={children} />)
+  .build();

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2128,6 +2128,11 @@ export const en = {
     "switch": "Switch",
     "rating": "Rating",
     "progress": "Progress",
+    "multilineText": "Multiline Text",
+    "multilineEditorTitle": "Edit Multiline Text",
+    "multilineEditorSave": "Save",
+    "multilineEditorCancel": "Cancel",
+    "multilineEditorPlaceholder": "Enter text here...",
     "option": "Operation",
     "optionList": "Operation List",
     "option1": "Operation 1",