@douyinfe/semi-ui 2.15.0-beta.0 → 2.15.2-alpha.0

package/datePicker/__test__/datePicker.test.js

@@ -1056,6 +1056,7 @@ describe(`DatePicker`, () => {
         const rightSecondWeek = rightPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-week`)[1];
         const rightSecondWeekDays = rightSecondWeek.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-day`);
         leftSecondWeekDays[0].click();
+        await sleep();
         rightSecondWeekDays[0].click();
 
         const baseElem = elem.find(BaseDatePicker);

package/datePicker/_story/v2/FixTriggerRender.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { DatePicker, Button, Icon, Space } from '../../../index';
+
+export default function Demo() {
+    const [date, setDate] = useState([]);
+    const onChange = useCallback(date => {
+        setDate(date);
+        console.log(date);
+    }, []);
+    const onClear = useCallback(e => {
+        e && e.stopPropagation();
+        setDate(null);
+    }, []);
+
+    const closeIcon = useMemo(() => (date ? <Icon type="close" onClick={onClear} /> : <Icon type="chevron_down" />), [date]);
+
+    return (
+        <Space>
+            <DatePicker
+                type="dateTimeRange"
+                onChange={onChange}
+                value={date}
+                triggerRender={({ placeholder }) => (
+                    <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>
+                        {(date && String(date)) || placeholder}
+                    </Button>
+                )}
+            />
+            <DatePicker
+                type="dateRange"
+                motion={false}
+                triggerRender={({ placeholder }) => <Button theme={'light'}>{placeholder}</Button>}
+            />
+        </Space>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -8,3 +8,4 @@ export { default as InputFormat  } from './InputFormat';
 export { default as InputFormatDisabled  } from './InputFormatDisabled';
 export { default as AutoFillTime  } from './AutoFillTime';
 export { default as InputFormatConfirm  } from './InputFormatConfirm';
+export { default as FixedTriggerRender } from './FixTriggerRender';

package/dist/css/semi.css

@@ -3471,11 +3471,6 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-checkbox-inner-display .semi-icon {
   font-size: 16px;
 }
-.semi-checkbox-inner-pureCardType {
-  opacity: 0;
-  width: 0;
-  margin-right: 0 !important;
-}
 .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -3534,6 +3529,11 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-checkbox-cardType .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
+.semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
+  opacity: 0;
+  width: 0;
+  margin-right: 0;
+}
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;
@@ -14257,9 +14257,8 @@ body[theme-mode=dark], body .semi-always-dark {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: relative;
   display: inline-flex;
-  flex-wrap: wrap;
+  column-gap: 8px;
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -14307,6 +14306,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
+  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -14330,7 +14330,6 @@ body[theme-mode=dark], body .semi-always-dark {
   border: 1px solid transparent;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
-  position: relative;
   margin-right: 8px;
   flex-shrink: 0;
 }
@@ -14400,19 +14399,18 @@ body[theme-mode=dark], body .semi-always-dark {
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  position: absolute;
-  display: inline-block;
-  top: 2px;
-  left: 0;
+  display: inline-flex;
+  margin-top: 2px;
+  position: relative;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  position: absolute;
-  left: 0;
-  top: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -14421,11 +14419,14 @@ body[theme-mode=dark], body .semi-always-dark {
   background: transparent;
 }
 .semi-radio-inner-display .semi-icon {
-  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
+.semi-radio-content {
+  display: flex;
+  flex-direction: column;
+}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -14434,8 +14435,6 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-addon {
   user-select: none;
-  padding-left: 8px;
-  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
@@ -14524,11 +14523,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
-  flex-grow: 1;
-  flex-basis: 100%;
-  flex-shrink: 0;
   color: var(--semi-color-text-2);
-  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -14543,25 +14538,20 @@ body[theme-mode=dark], body .semi-always-dark {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.semi-radioGroup-vertical .semi-radio:last-of-type {
-  margin-bottom: 0;
+.semi-radioGroup-vertical {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: block;
-  margin-bottom: 12px;
+  display: flex;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
-  margin-bottom: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio {
-  margin-right: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-right: 0;
 }
-.semi-radioGroup-horizontal-default {
-  display: inline-block;
+.semi-radioGroup-horizontal {
+  display: inline-flex;
+  column-gap: 16px;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -14585,59 +14575,14 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
-.semi-rtl .semi-radio-inner,
-.semi-portal-rtl .semi-radio-inner {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-inner-display,
-.semi-portal-rtl .semi-radio-inner-display {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-addon,
-.semi-portal-rtl .semi-radio-addon {
-  padding-left: 0;
-  margin-left: 0;
-  padding-right: 8px;
-  margin-right: 16px;
-}
 .semi-rtl .semi-radio-addon-buttonRadio,
 .semi-portal-rtl .semi-radio-addon-buttonRadio {
   margin-right: 0;
 }
-.semi-rtl .semi-radio-extra,
-.semi-portal-rtl .semi-radio-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-inner,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-addon,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-extra,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
-  padding-right: 0;
-}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
 }
-.semi-rtl .semi-radioGroup-horizontal .semi-radio,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-left: 0;
-}
 
 .semi-rating {
   display: inline-block;