From 5fdbc1b10d2835a875ba5159f4095c0e7a524121 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Sat, 19 Dec 2020 15:48:06 +0800
Subject: [PATCH] feat: improve field components

---
 .../app/src/components/form.fields/shared.tsx |  3 +-
 packages/app/src/components/views/Details.tsx |  4 +--
 .../app/src/components/views/Field/index.tsx  | 34 +++++++++++++++++--
 .../components/views/SortableTable/index.tsx  |  2 +-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/form.fields/shared.tsx b/packages/app/src/components/form.fields/shared.tsx
index a11808146..a85ae71b8 100644
--- a/packages/app/src/components/form.fields/shared.tsx
+++ b/packages/app/src/components/form.fields/shared.tsx
@@ -44,7 +44,7 @@ const createEnum = (enums: any) => {
 }
 
 export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
-  const { dataSource = [], onChange, ...others } = props
+  const { dataSource = [], onChange, value, ...others } = props
   const children = createEnum(dataSource).map(item => {
     const { label, value, children = [], ...others } = item
     if (children.length) {
@@ -78,6 +78,7 @@ export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
     <AntSelect
       className={props.className}
       {...others}
+      value={value === null ? undefined : value}
       onChange={(value: any, options: any) => {
         onChange(
           value,
diff --git a/packages/app/src/components/views/Details.tsx b/packages/app/src/components/views/Details.tsx
index a7e4967c1..15d8b2d30 100644
--- a/packages/app/src/components/views/Details.tsx
+++ b/packages/app/src/components/views/Details.tsx
@@ -40,8 +40,8 @@ export function Details(props: any) {
         <Descriptions bordered column={1}>
           {fields.map((field: any) => {
             return (
-              <Descriptions.Item label={field.title||field.name}>
-                <Field schema={field} value={get(data, field.name)}/>
+              <Descriptions.Item labelStyle={{minWidth: 200}} label={field.title||field.name}>
+                <Field viewType={'descriptions'} schema={field} value={get(data, field.name)}/>
               </Descriptions.Item>
             )
           })}
diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx
index 97a7809ed..595bead69 100644
--- a/packages/app/src/components/views/Field/index.tsx
+++ b/packages/app/src/components/views/Field/index.tsx
@@ -1,9 +1,10 @@
 
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import { Tag } from 'antd';
+import { Tag, Popover } from 'antd';
 import Icon from '@/components/icons';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 
 const InterfaceTypes = new Map<string, any>();
 
@@ -32,7 +33,20 @@ export function StringField(props: any) {
 }
 
 export function TextareaField(props: any) {
-  const { value } = props;
+  const { value, viewType } = props;
+  if (!value) {
+    return null;
+  }
+  if (viewType !== 'table') {
+    return value;
+  }
+  if (value.length > 20) {
+    return (
+      <Popover content={<div onClick={(e) => {
+        e.stopPropagation();
+      }} style={{maxWidth: 300}}>{value}</div>}>{value.substring(0, 15)}...</Popover>
+    );
+  }
   return (
     <>{value}</>
   );
@@ -52,8 +66,21 @@ export function NumberField(props: any) {
   );
 }
 
+export function isNumber(num) {
+  if (typeof num === 'number') {
+    return num - num === 0;
+  }
+  if (typeof num === 'string' && num.trim() !== '') {
+    return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
+  }
+  return false;
+};
+
 export function PercentField(props: any) {
   const { schema: { precision }, value } = props;
+  if (!isNumber(value)) {
+    return null;
+  }
   return (
     <>{value}%</>
   );
@@ -94,6 +121,9 @@ export function DataSourceField(props: any) {
   const { schema: { dataSource = [] }, value } = props;
   const items = toFlat(dataSource);
   console.log(items);
+  if (isEmpty(value)) {
+    return null;
+  }
   if (Array.isArray(value)) {
     return value.map(val => {
       const item = items.find(item => item.value === val);
diff --git a/packages/app/src/components/views/SortableTable/index.tsx b/packages/app/src/components/views/SortableTable/index.tsx
index 07ebdcb0b..bbab8ae01 100644
--- a/packages/app/src/components/views/SortableTable/index.tsx
+++ b/packages/app/src/components/views/SortableTable/index.tsx
@@ -56,7 +56,7 @@ export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
 
 export function fields2columns(fields) {
   const columns: any[] = fields.map(field => {
-    field.render = (value) => field.interface === 'sort' ? <DragHandle/> : <Field schema={field} value={value}/>;
+    field.render = (value) => field.interface === 'sort' ? <DragHandle/> : <Field viewType={'table'} schema={field} value={value}/>;
     return {
       ...field,
       ...(field.component||{}),