Merge pull request #22 from actiontech/chore/create-order-style

[chore]: Update create order form style
actiontech · Oct 23, 2023 · 47a449f · 47a449f
2 parents 1030381 + 75dd8a8
commit 47a449f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 40 deletions.
diff --git a/packages/shared/lib/data/common.ts b/packages/shared/lib/data/common.ts
@@ -74,7 +74,7 @@ export const FilterFormRowLayout = {
 export const ANTD_PREFIX_STR = 'antd-v5';
 
 export const ComponentControlHeight = {
-  default: 32,
+  default: 36,
   lg: 36,
   sm: 28
 };

diff --git a/packages/sqle/src/page/Order/SQLStatementForm/UploadType.tsx b/packages/sqle/src/page/Order/SQLStatementForm/UploadType.tsx
@@ -1,8 +1,8 @@
 import { SQLInputType } from '.';
 import { IconOrderFileUpload, IconOrderSQLUpload } from '../../../icon/Order';
 import { useTranslation } from 'react-i18next';
-import { Row, Col } from 'antd5';
 import UploadTypeItem from './UploadTypeItem';
+import { UploadTypeStyleWrapper } from './style';
 
 const UploadType: React.FC<{
   value?: SQLInputType;
@@ -11,35 +11,30 @@ const UploadType: React.FC<{
 }> = ({ value, onChange, hideUpdateMybatisFile = false }) => {
   const { t } = useTranslation();
   return (
-    <Row gutter={12}>
-      <Col span={8}>
-        <UploadTypeItem
-          onClick={() => onChange?.(SQLInputType.manualInput)}
-          active={value === SQLInputType.manualInput}
-        >
-          <IconOrderSQLUpload />
-          <span className="text">{t('order.sqlInfo.manualInput')}</span>
-        </UploadTypeItem>
-      </Col>
-      <Col span={8}>
-        <UploadTypeItem
-          active={value === SQLInputType.uploadFile}
-          onClick={() => onChange?.(SQLInputType.uploadFile)}
-        >
-          <IconOrderFileUpload />
-          <span className="text">{t('order.sqlInfo.uploadFile')}</span>
-        </UploadTypeItem>
-      </Col>
-      <Col span={8} hidden={hideUpdateMybatisFile}>
-        <UploadTypeItem
-          active={value === SQLInputType.uploadMybatisFile}
-          onClick={() => onChange?.(SQLInputType.uploadMybatisFile)}
-        >
-          <IconOrderFileUpload />
-          <span className="text">{t('order.sqlInfo.updateMybatisFile')}</span>
-        </UploadTypeItem>
-      </Col>
-    </Row>
+    <UploadTypeStyleWrapper>
+      <UploadTypeItem
+        onClick={() => onChange?.(SQLInputType.manualInput)}
+        active={value === SQLInputType.manualInput}
+      >
+        <IconOrderSQLUpload />
+        <span className="text">{t('order.sqlInfo.manualInput')}</span>
+      </UploadTypeItem>
+      <UploadTypeItem
+        active={value === SQLInputType.uploadFile}
+        onClick={() => onChange?.(SQLInputType.uploadFile)}
+      >
+        <IconOrderFileUpload />
+        <span className="text">{t('order.sqlInfo.uploadFile')}</span>
+      </UploadTypeItem>
+      <UploadTypeItem
+        active={value === SQLInputType.uploadMybatisFile}
+        onClick={() => onChange?.(SQLInputType.uploadMybatisFile)}
+        hidden={hideUpdateMybatisFile}
+      >
+        <IconOrderFileUpload />
+        <span className="text">{t('order.sqlInfo.updateMybatisFile')}</span>
+      </UploadTypeItem>
+    </UploadTypeStyleWrapper>
   );
 };
 

diff --git a/packages/sqle/src/page/Order/SQLStatementForm/UploadTypeItem.tsx b/packages/sqle/src/page/Order/SQLStatementForm/UploadTypeItem.tsx
@@ -1,21 +1,24 @@
 import { ReactNode } from 'react';
 import { UploadItemTypeStyleWrapper } from './style';
 import { IconOrderUploadTypeChecked } from '../../../icon/Order';
-import { EmptyBox } from '@actiontech/shared';
 
 const UploadTypeItem: React.FC<{
   active: boolean;
   onClick: () => void;
   children: ReactNode;
-}> = ({ active, onClick, children }) => {
+  hidden?: boolean;
+}> = ({ active, onClick, children, hidden }) => {
   return (
-    <UploadItemTypeStyleWrapper active={active} onClick={onClick}>
+    <UploadItemTypeStyleWrapper
+      active={active}
+      onClick={onClick}
+      className="update-type-item-wrapper"
+      hidden={hidden}
+    >
       {children}
-      <EmptyBox if={active}>
-        <div className="active-icon-wrapper">
-          <IconOrderUploadTypeChecked className="active-icon" />
-        </div>
-      </EmptyBox>
+      <div className="active-icon-wrapper" hidden={!active}>
+        <IconOrderUploadTypeChecked className="active-icon" />
+      </div>
     </UploadItemTypeStyleWrapper>
   );
 };

diff --git a/packages/sqle/src/page/Order/SQLStatementForm/style.ts b/packages/sqle/src/page/Order/SQLStatementForm/style.ts
@@ -3,11 +3,15 @@ import { styled } from '@mui/material/styles';
 export const UploadTypeStyleWrapper = styled('div')`
   width: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+
+  .update-type-item-wrapper:not(:first-of-type) {
+    margin-left: 12px;
+  }
 `;
 
 export const UploadItemTypeStyleWrapper = styled('div')<{ active?: boolean }>`
+  flex: 1 0 30%;
   background-color: ${({ theme }) =>
     theme.sharedTheme.uiToken.colorFillQuaternary};
   border: 1px solid