refactor: style

oceanbase · Feb 19, 2024 · b605ab3 · b605ab3
1 parent bb03ff4
commit b605ab3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 47 deletions.
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -281,14 +281,7 @@ const Ranger = (props: DateRangerProps) => {
 
   return (
     <Space size={4} className={classNames(prefix)} style={rest.style}>
-      <div
-        style={{
-          border: `1px solid ${token.colorBorder}`,
-          borderRadius: 4,
-          boxSizing: 'border-box',
-          minWidth: 160,
-        }}
-      >
+      <div className={`${prefix}-wrapper`}>
         <Dropdown
           trigger={['click']}
           menu={{
@@ -307,7 +300,8 @@ const Ranger = (props: DateRangerProps) => {
                 return {
                   key: item.name,
                   label: (
-                    <span
+                    <Space
+                      size={8}
                       onClick={() => {
                         const rName = item.name;
                         handleNameChange(rName);
@@ -320,43 +314,24 @@ const Ranger = (props: DateRangerProps) => {
                         }
                       }}
                     >
-                      <span
-                        style={{
-                          backgroundColor: 'rgb(226, 229, 237)',
-                          marginRight: 8,
-                          display: 'inline-block',
-                          width: 60,
-                          padding: '4px 0',
-                          borderRadius: 4,
-                          lineHeight: 1,
-                          textAlign: 'center',
-                        }}
-                      >
-                        {item.rangeLabel}
-                      </span>
+                      <span className={`${prefix}-label`}>{item.rangeLabel}</span>
                       {locale[item.label] || item.label}
-                    </span>
+                    </Space>
                   ),
                 };
               }),
           }}
         >
           <Space size={0}>
             <span
+              className={`${prefix}-label`}
               style={{
-                backgroundColor: 'rgb(226, 229, 237)',
-                display: 'inline-block',
-                width: 60,
-                padding: '4px 0',
-                borderRadius: 4,
-                lineHeight: 1,
-                textAlign: 'center',
                 marginLeft: 8,
               }}
             >
               {rangeLabel}
             </span>
-            {isPlay && <div style={{ padding: '4px 11px 4px' }}>{label}</div>}
+            {isPlay && <div className={`${prefix}-play`}>{label}</div>}
           </Space>
         </Dropdown>
         {!isPlay && (
@@ -373,7 +348,6 @@ const Ranger = (props: DateRangerProps) => {
             onChange={datePickerChange}
             showTime={true}
             size={size}
-            style={{ paddingLeft: 4, border: '0px' }}
             // 透传 props 到 antd Ranger
             {...omit(rest, 'value', 'onChange')}
           />

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
@@ -3,24 +3,26 @@
 @prefix: ob-date-ranger;
 
 .@{prefix} {
-  .@{prefixCls}-space-item:nth-child(2) {
-    flex: 1;
-    width: 100%;
-
-    .@{prefixCls}-picker,
-    .@{prefixCls}-picker-range,
-    .@{prefix}-range-picker {
-      width: 100%;
-      // 去掉左侧圆角，以与下拉选择紧密组合在一起
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+  .@{prefix}-range-picker {
+    padding-left: 0px;
+    border: 0px;
 
-      input {
-        text-align: center;
-      }
+    input {
+      text-align: center;
     }
   }
 
+  .@{prefix}-wrapper {
+    border: 1px solid @colorBorder;
+    border-radius: 4px;
+    box-sizing: border-box;
+    min-width: 160px;
+  }
+
+  .@{prefix}-play {
+    padding: 4px 11px 4px;
+  }
+
   .@{prefix}-picker-input {
     max-width: 125px;
   }
@@ -67,3 +69,13 @@
     }
   }
 }
+
+.@{prefix}-label {
+  background-color: rgb(226, 229, 237);
+  display: inline-block;
+  width: 60px;
+  padding: 4px 0;
+  border-radius: 4px;
+  line-height: 1;
+  text-align: center;
+}