improve(ui): DateRanger border-radius style

oceanbase · Dec 14, 2024 · 6206ef7 · 6206ef7
1 parent 9f10edc
commit 6206ef7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -350,7 +350,11 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
       style={rest.style}
     >
       <Space size={0}>
-        <div className={`${prefix}-wrapper`}>
+        <div
+          className={classNames(`${prefix}-wrapper`, {
+            [`${prefix}-wrapper-has-jumper`]: hasRewind || hasForward,
+          })}
+        >
           <Dropdown
             trigger={['click']}
             open={open}
@@ -452,7 +456,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
             >
               {/* @ts-ignore  */}
               <DatePicker.RangePicker
-                className={`${prefix}-picker`}
+                className={classNames(`${prefix}-picker`)}
                 style={{
                   pointerEvents: 'none',
                   border: 0,
@@ -497,7 +501,8 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
                 style={{
                   paddingInline: 8,
                   borderInlineStart: 0,
-                  borderRadius: 0,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
                 }}
                 onMouseEnter={() => setBackRadioFocused(true)}
                 onMouseLeave={() => setBackRadioFocused(false)}
@@ -526,7 +531,12 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
             >
               <Radio.Button
                 value="stepForward"
-                style={{ paddingInline: 8 }}
+                style={{
+                  paddingInline: 8,
+                  borderInlineStart: 0,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }}
                 // disabled={isPlay}
                 onClick={() => {
                   if (startTime && endTime) {

diff --git a/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx b/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx
@@ -10,6 +10,7 @@ type TimeRangeRef = {
 export default () => {
   const ref = useRef<TimeRangeRef>();
   const [timeRange, setTimeRange] = useState([]);
+  const format = 'YYYY-MM-DD HH:mm:ss';
   return (
     <div>
       <Flex gap="middle" align="center">
@@ -19,17 +20,14 @@ export default () => {
             ref.current.updateCurrentTime();
           }}
         >
-          更新最新时间
+          从外部更新时间
         </Button>
         {timeRange.length && (
           <span>
-            {`${dayjs(timeRange[0]).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(timeRange[1]).format(
-              'YYYY-MM-DD HH:mm:ss'
-            )}`}
+            {`${dayjs(timeRange[0]).format(format)} ~ ${dayjs(timeRange[1]).format(format)}`}
           </span>
         )}
       </Flex>
-
       <Divider children="preview" />
       <DateRanger
         ref={ref}

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
@@ -4,13 +4,12 @@
 
 .@{prefix} {
   cursor: pointer;
-  min-width: 1120px;
 
   .@{prefix}-wrapper {
     border: 1px solid @colorBorder;
-    border-radius: 4px 0 0 4px;
     box-sizing: border-box;
     display: flex;
+    border-radius: ~'@{borderRadius}px';
     transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     // FIXED: 存在不生效情况
     .@{prefix}-picker {
@@ -27,6 +26,11 @@
     }
   }
 
+  .@{prefix}-wrapper-has-jumper {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
   .@{prefix}-play {
     padding: 4px 11px 4px;
   }

diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -15,7 +15,7 @@ nav:
 
 <code src="./demo/default-value.tsx" title="指定默认值"></code>
 
-<code src="./demo/updateCurrentTime.tsx" title="更新当前时间"></code>
+<code src="./demo/updateCurrentTime.tsx" title="从外部更新时间"></code>
 
 ## API
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ nav: @@
     <code src="./demo/default-value.tsx" title="指定默认值"></code>
-    <code src="./demo/updateCurrentTime.tsx" title="更新当前时间"></code>
+    <code src="./demo/updateCurrentTime.tsx" title="从外部更新时间"></code>
     ## API
@@ Expand Down @@