@douyinfe/semi-ui 2.15.0-beta.0 → 2.15.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;