refactor: data model tree style improvement

scottsut · scottsut · commit 46431fc76480 · 2022-04-21T16:30:41.000+08:00
diff --git a/frontend/src/app/components/index.tsx b/frontend/src/app/components/index.tsx
@@ -11,6 +11,7 @@ export { ListItem } from './ListItem';
 export { ListNav, ListPane } from './ListNav';
 export { ListSwitch } from './ListSwitch';
 export { ListTitle } from './ListTitle';
+export type { ListTitleProps } from './ListTitle';
 export { LoadingMask } from './LoadingMask';
 export { ModalForm } from './ModalForm';
 export type { ModalFormProps } from './ModalForm';
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/Container.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/Container.tsx
@@ -17,20 +17,26 @@
  */
 
 import { Skeleton } from 'antd';
-import { ListTitle } from 'app/components';
+import { ListTitle, ListTitleProps } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
-import { FC, memo } from 'react';
+import { FC, memo, ReactNode } from 'react';
 import styled from 'styled-components/macro';
 import { SPACE_TIMES } from 'styles/StyleConstants';
 
-const Container: FC<any> = memo(props => {
+interface ContainerProps extends ListTitleProps {
+  title: string;
+  loading?: boolean;
+  children?: ReactNode;
+}
+
+const Container: FC<ContainerProps> = memo(props => {
   const t = useI18NPrefix('view.properties');
-  const { title, children, isLoading, ...rest } = props;
+  const { title, children, loading, ...rest } = props;
 
   return (
     <StyledContainer>
       <ListTitle title={t(title)} {...rest} />
-      <Skeleton active loading={isLoading}>
+      <Skeleton active loading={loading}>
         {children}
       </Skeleton>
     </StyledContainer>
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelBranch.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelBranch.tsx
@@ -21,17 +21,18 @@ import {
   EditOutlined,
   FolderOpenOutlined,
 } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { IW, ToolbarButton } from 'app/components';
+import { Button, Tooltip } from 'antd';
+import { IW } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { FC, memo, useState } from 'react';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import styled from 'styled-components/macro';
 import {
   FONT_SIZE_BASE,
   FONT_SIZE_HEADING,
-  INFO,
-  SPACE_UNIT,
+  SPACE,
+  SPACE_MD,
+  SPACE_XS,
   YELLOW,
 } from 'styles/StyleConstants';
 import { Column } from '../../../slice/types';
@@ -40,19 +41,19 @@ import DataModelNode from './DataModelNode';
 
 const DataModelBranch: FC<{
   node: Column;
-  getPermissionButton: (name) => JSX.Element;
   onNodeTypeChange: (type: any, name: string) => void;
   onMoveToHierarchy: (node: Column) => void;
   onEditBranch;
   onDelete: (node: Column) => void;
+  onDeleteFromHierarchy: (parent: Column) => (node: Column) => void;
 }> = memo(
   ({
     node,
-    getPermissionButton,
     onNodeTypeChange,
     onMoveToHierarchy,
     onEditBranch,
     onDelete,
+    onDeleteFromHierarchy,
   }) => {
     const t = useI18NPrefix('view.model');
     const [isHover, setIsHover] = useState(false);
@@ -78,23 +79,19 @@ const DataModelBranch: FC<{
             <div className="action">
               {isHover && !isDragging && (
                 <Tooltip title={t('rename')}>
-                  <ToolbarButton
-                    size="small"
-                    iconSize={FONT_SIZE_BASE}
-                    className="suffix"
+                  <Button
+                    type="link"
                     onClick={() => onEditBranch(node)}
-                    icon={<EditOutlined style={{ color: INFO }} />}
+                    icon={<EditOutlined />}
                   />
                 </Tooltip>
               )}
               {isHover && !isDragging && (
                 <Tooltip title={t('delete')}>
-                  <ToolbarButton
-                    size="small"
-                    iconSize={FONT_SIZE_BASE}
-                    className="suffix"
+                  <Button
+                    type="link"
                     onClick={() => onDelete(node)}
-                    icon={<DeleteOutlined style={{ color: INFO }} />}
+                    icon={<DeleteOutlined />}
                   />
                 </Tooltip>
               )}
@@ -103,11 +100,12 @@ const DataModelBranch: FC<{
           <div className="children">
             {node?.children?.map(childNode => (
               <DataModelNode
+                className="in-hierarchy"
                 node={childNode}
                 key={childNode.name}
-                getPermissionButton={getPermissionButton}
                 onMoveToHierarchy={onMoveToHierarchy}
                 onNodeTypeChange={onNodeTypeChange}
+                onDeleteFromHierarchy={onDeleteFromHierarchy(node)}
               />
             ))}
           </div>
@@ -152,23 +150,23 @@ const DataModelBranch: FC<{
 export default DataModelBranch;
 
 const StyledDataModelBranch = styled.div<{}>`
+  margin: ${SPACE} ${SPACE_MD};
+  font-size: ${FONT_SIZE_BASE};
   line-height: 32px;
-  margin: ${SPACE_UNIT};
   user-select: 'none';
-  font-size: ${FONT_SIZE_BASE};
 
   & .content {
     display: flex;
   }
 
   & .children {
-    margin-left: 40px;
+    margin-left: ${SPACE_MD};
   }
 
   & .action {
     display: flex;
     flex: 1;
     justify-content: flex-end;
-    padding-right: ${FONT_SIZE_BASE}px;
+    padding-right: ${SPACE_XS};
   }
 `;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelNode.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelNode.tsx
@@ -19,24 +19,27 @@
 import {
   BranchesOutlined,
   CalendarOutlined,
+  DeleteOutlined,
   FieldStringOutlined,
   FileUnknownOutlined,
   NumberOutlined,
   SisternodeOutlined,
-  SwapOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Menu, Tooltip } from 'antd';
-import { IW, ToolbarButton } from 'app/components';
+import { Button, Dropdown, Menu, Tooltip } from 'antd';
+import { IW } from 'app/components';
 import { DataViewFieldType } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { FC, memo, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styled from 'styled-components/macro';
 import {
   FONT_SIZE_BASE,
-  FONT_SIZE_HEADING,
+  FONT_SIZE_TITLE,
   INFO,
   SPACE,
+  SPACE_MD,
+  SPACE_TIMES,
+  SPACE_XS,
   SUCCESS,
   WARNING,
 } from 'styles/StyleConstants';
@@ -46,17 +49,19 @@ import { ALLOW_COMBINE_COLUMN_TYPES } from './constant';
 
 const DataModelNode: FC<{
   node: Column;
-  getPermissionButton: (name) => JSX.Element;
+  className?: string;
   onNodeTypeChange: (type: any, name: string) => void;
   onMoveToHierarchy: (node: Column) => void;
   onCreateHierarchy?: (node: Column) => void;
+  onDeleteFromHierarchy?: (node: Column) => void;
 }> = memo(
   ({
     node,
-    getPermissionButton,
+    className,
     onCreateHierarchy,
     onMoveToHierarchy,
     onNodeTypeChange,
+    onDeleteFromHierarchy,
   }) => {
     const t = useI18NPrefix('view.model');
     const tg = useI18NPrefix('global');
@@ -104,77 +109,74 @@ const DataModelNode: FC<{
             setIsHover(false);
           }}
         >
-          <IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
+          <Dropdown
+            trigger={['click']}
+            overlay={
+              <Menu
+                selectedKeys={[node.type, `category-${node.category}`]}
+                className="datart-schema-table-header-menu"
+                onClick={({ key }) => onNodeTypeChange(key, node?.name)}
+              >
+                {Object.values(DataViewFieldType).map(t => (
+                  <Menu.Item key={t}>
+                    {tg(`columnType.${t.toLowerCase()}`)}
+                  </Menu.Item>
+                ))}
+                {hasCategory && (
+                  <>
+                    <Menu.Divider />
+                    <Menu.SubMenu
+                      key="categories"
+                      title={t('category')}
+                      popupClassName="datart-schema-table-header-menu"
+                    >
+                      {Object.values(ColumnCategories).map(t => (
+                        <Menu.Item key={`category-${t}`}>
+                          {tg(`columnCategory.${t.toLowerCase()}`)}
+                        </Menu.Item>
+                      ))}
+                    </Menu.SubMenu>
+                  </>
+                )}
+              </Menu>
+            }
+          >
+            <Tooltip
+              title={hasCategory ? t('typeAndCategory') : t('category')}
+              placement="left"
+            >
+              <StyledIW fontSize={FONT_SIZE_TITLE}>{icon}</StyledIW>
+            </Tooltip>
+          </Dropdown>
           <span>{node.name}</span>
           <div className="action">
-            {isHover && !isDragging && (
-              <Dropdown
-                trigger={['click']}
-                overlay={
-                  <Menu
-                    selectedKeys={[node.type, `category-${node.category}`]}
-                    className="datart-schema-table-header-menu"
-                    onClick={({ key }) => onNodeTypeChange(key, node?.name)}
-                  >
-                    {Object.values(DataViewFieldType).map(t => (
-                      <Menu.Item key={t}>
-                        {tg(`columnType.${t.toLowerCase()}`)}
-                      </Menu.Item>
-                    ))}
-                    {hasCategory && (
-                      <>
-                        <Menu.Divider />
-                        <Menu.SubMenu
-                          key="categories"
-                          title={t('category')}
-                          popupClassName="datart-schema-table-header-menu"
-                        >
-                          {Object.values(ColumnCategories).map(t => (
-                            <Menu.Item key={`category-${t}`}>
-                              {tg(`columnCategory.${t.toLowerCase()}`)}
-                            </Menu.Item>
-                          ))}
-                        </Menu.SubMenu>
-                      </>
-                    )}
-                  </Menu>
-                }
-              >
-                <Tooltip
-                  title={hasCategory ? t('typeAndCategory') : t('category')}
-                >
-                  <ToolbarButton
-                    size="small"
-                    iconSize={FONT_SIZE_BASE}
-                    className="suffix"
-                    icon={<SwapOutlined style={{ color: INFO }} />}
-                  />
-                </Tooltip>
-              </Dropdown>
-            )}
-            {isHover && !isDragging && getPermissionButton(node?.name)}
             {isHover &&
               !isDragging &&
               isAllowCreateHierarchy(node) &&
               onCreateHierarchy && (
                 <Tooltip title={t('newHierarchy')}>
-                  <ToolbarButton
-                    size="small"
-                    iconSize={FONT_SIZE_BASE}
-                    className="suffix"
+                  <Button
+                    type="link"
                     onClick={() => onCreateHierarchy(node)}
-                    icon={<BranchesOutlined style={{ color: INFO }} />}
+                    icon={<BranchesOutlined />}
                   />
                 </Tooltip>
               )}
             {isHover && !isDragging && isAllowCreateHierarchy(node) && (
               <Tooltip title={t('addToHierarchy')}>
-                <ToolbarButton
-                  size="small"
-                  iconSize={FONT_SIZE_BASE}
-                  className="suffix"
+                <Button
+                  type="link"
                   onClick={() => onMoveToHierarchy(node)}
-                  icon={<SisternodeOutlined style={{ color: INFO }} />}
+                  icon={<SisternodeOutlined />}
+                />
+              </Tooltip>
+            )}
+            {isHover && !isDragging && onDeleteFromHierarchy && (
+              <Tooltip title={t('delete')}>
+                <Button
+                  type="link"
+                  onClick={() => onDeleteFromHierarchy(node)}
+                  icon={<DeleteOutlined />}
                 />
               </Tooltip>
             )}
@@ -188,6 +190,7 @@ const DataModelNode: FC<{
         {(draggableProvided, draggableSnapshot) => (
           <StyledDataModelNode
             isDragging={draggableSnapshot.isDragging}
+            className={className}
             style={draggableProvided.draggableProps.style}
             ref={draggableProvided.innerRef}
             {...draggableProvided.draggableProps}
@@ -206,21 +209,35 @@ export default DataModelNode;
 const StyledDataModelNode = styled.div<{
   isDragging: boolean;
 }>`
+  margin: ${SPACE} ${SPACE_MD};
+  font-size: ${FONT_SIZE_BASE};
   line-height: 32px;
-  margin: ${SPACE};
   user-select: 'none';
   background: ${p =>
     p.isDragging ? p.theme.highlightBackground : 'transparent'};
-  font-size: ${FONT_SIZE_BASE};
+
+  &.in-hierarchy {
+    margin-right: 0;
+  }
 
   & .content {
     display: flex;
+    align-items: center;
   }
 
   & .action {
     display: flex;
     flex: 1;
     justify-content: flex-end;
-    padding-right: ${FONT_SIZE_BASE}px;
+    padding-right: ${SPACE_XS};
   }
 `;
+
+const StyledIW = styled(IW)`
+  width: ${SPACE_TIMES(7)};
+  height: ${SPACE_TIMES(7)};
+  margin-right: ${SPACE_XS};
+  cursor: pointer;
+  border: 1px solid ${p => p.theme.borderColorSplit};
+  border-radius: 4px;
+`;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelTree.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/DataModelTree/DataModelTree.tsx
