first commit

webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx

@@ -0,0 +1,72 @@
+import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
+import { Table as AntTable } from 'antd';
+import { MsgDataType } from '../../../common/type';
+import { CLS_PREFIX } from '../../../common/constants';
+import ApplyAuth from '../ApplyAuth';
+
+type Props = {
+  data: MsgDataType;
+  onApplyAuth?: (domain: string) => void;
+};
+
+const Table: React.FC<Props> = ({ data, onApplyAuth }) => {
+  const { entityInfo, queryColumns, queryResults } = data;
+
+  const prefixCls = `${CLS_PREFIX}-table`;
+
+  const tableColumns: any[] = queryColumns.map(
+    ({ name, nameEn, showType, dataFormatType, dataFormat, authorized }) => {
+      return {
+        dataIndex: nameEn,
+        key: nameEn,
+        title: name,
+        render: (value: string | number) => {
+          if (!authorized) {
+            return (
+              <ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
+            );
+          }
+          if (dataFormatType === 'percent') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {`${formatByDecimalPlaces(
+                  dataFormat?.needmultiply100 ? +value * 100 : value,
+                  dataFormat?.decimalPlaces || 2
+                )}%`}
+              </div>
+            );
+          }
+          if (showType === 'NUMBER') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {getFormattedValue(value as number)}
+              </div>
+            );
+          }
+          if (nameEn.includes('photo')) {
+            return (
+              <div className={`${prefixCls}-photo`}>
+                <img width={40} height={40} src={value as string} alt="" />
+              </div>
+            );
+          }
+          return value;
+        },
+      };
+    }
+  );
+
+  return (
+    <div className={prefixCls}>
+      <AntTable
+        pagination={queryResults.length <= 10 ? false : undefined}
+        size={queryResults.length === 1 ? 'middle' : 'small'}
+        columns={tableColumns}
+        dataSource={queryResults}
+        style={{ width: '100%' }}
+      />
+    </div>
+  );
+};
+
+export default Table;