Merge branch 'main' into release

content/input/form/index-en-US.md

@@ -60,17 +60,26 @@ You can also set label` properties for each field, by default is the same as fie
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form } from '@douyinfe/semi-ui';
+import { Form, Tooltip } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Select field="role" label='UserRole' style={{width:120}}>
+        <Form.Select field="role" label='UserRole' style={{ width:120 }}>
             <Form.Select.Option value="admin">Admin</Form.Select.Option>
             <Form.Select.Option value="user">User</Form.Select.Option>
             <Form.Select.Option value="guest">Guest</Form.Select.Option>
         </Form.Select>
         <Form.Input field='userName' label='UserName' />
         <Form.Input field='password' label='Password' />
+        <Form.Input
+            field='password'
+            label={{ 
+                text: 'Password',
+                extra: <Tooltip content='more detail'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+            }}
+            style={{ width:176 }}
+        />
     </Form>
 );
 ```

content/input/form/index.md

@@ -65,7 +65,7 @@ Semi Form 同时支持多种写法
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form } from '@douyinfe/semi-ui';
+import { Form, Tooltip } from '@douyinfe/semi-ui';
 import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => {
@@ -73,13 +73,20 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
     return (
         <Form layout='horizontal'  onValueChange={values=>console.log(values)}>
-            <Form.Select field="Role" label='角色' style={{width:176}}>
+            <Form.Select field="Role" label='角色' style={{ width:176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
             </Form.Select>
-            <Form.Input field='UserName' label='用户名' style={{width:80}}/>
-            <Form.Input field='Password' label={{ text: '密码', extra: <IconHelpCircle /> }} style={{width:176}}/>
+            <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
+            <Form.Input
+                field='Password'
+                label={{ 
+                    text: '密码',
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                }}
+                style={{ width:176 }}
+            />
         </Form>
     );
 };

cypress/integration/datePicker.spec.js

@@ -266,4 +266,21 @@ describe('DatePicker', () => {
             cy.get(`${wrapper} .semi-input-wrapper`).should('not.have.class', 'semi-input-wrapper-disabled');
         }
     });
+
+    it('defaultPickerValue is number', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--fix-default-picker-value&viewMode=story');
+        cy.get('[data-cy=dateTime] .semi-input').first().click();
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').first().contains('2021-03-15');
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').last().contains('00:00:00');
+
+        cy.get('[data-cy=dateTimeRange] .semi-input').first().click();
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(0).contains('2021-03-15');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(1).contains('00:00:00');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(2).contains('2021-05-15');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(3).contains('23:59:59');
+
+        cy.get('[data-cy=before-1970] .semi-input').first().click();
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').first().contains('1910-01-01');
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').last().contains('13:00:00');
+    });
 });

packages/semi-foundation/datePicker/_utils/getDefaultPickerDate.ts

@@ -0,0 +1,54 @@
+import { addMonths, Locale as dateFnsLocale } from 'date-fns';
+import isValidDate from './isValidDate';
+import { compatiableParse } from './parser';
+import isTimestamp from './isTimestamp';
+
+/**
+ * get left panel picker date and right panel picker date
+ */
+export default function getDefaultPickerDate(options: GetDefaultPickerValueDateOptions) {
+    const { defaultPickerValue, format, dateFnsLocale } = options;
+    let nowDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[0] : defaultPickerValue;
+    let nextDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[1] : undefined;
+
+    switch (true) {
+        case isValidDate(nowDate):
+            break;
+        case isTimestamp(nowDate):
+            nowDate = new Date(nowDate);
+            break;
+        case typeof nowDate === 'string':
+            nowDate = compatiableParse(nowDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nowDate = new Date();
+            break;
+    }
+
+    switch (true) {
+        case isValidDate(nextDate):
+            break;
+        case isTimestamp(nextDate):
+            nextDate = new Date(nextDate);
+            break;
+        case typeof nextDate === 'string':
+            nextDate = compatiableParse(nextDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nextDate = addMonths(nowDate as Date, 1);
+            break;
+    }
+
+    return {
+        nowDate: nowDate as Date,
+        nextDate: nextDate as Date,
+    };
+}
+
+type BaseValueType = string | number | Date;
+
+interface GetDefaultPickerValueDateOptions {
+    defaultPickerValue?: BaseValueType | BaseValueType[];
+    format: string;
+    dateFnsLocale: dateFnsLocale;
+}

packages/semi-foundation/datePicker/datePicker.scss

@@ -46,7 +46,7 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {
@@ -928,7 +928,7 @@ $module: #{$prefix}-datepicker;
             }
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {

packages/semi-foundation/form/form.scss

@@ -91,18 +91,18 @@ $rating: #{$prefix}-rating;
         }
 
         &-with-extra {
-            .#{$field}-label-text,
-            .#{$field}-label-extra {
+            .#{$field}-label-text {
                 display: inline-block;
             }
             .#{$field}-label-extra {
+                display: flex;
+                align-items: center;
                 margin-left: $spacing-form_label_extra-marginLeft;
             }
         }
 
         &-required {
             .#{$field}-label-text {
-
                 &::after {
                     content: "*";
                     margin-left: $spacing-form_label_required-marginLeft;
@@ -156,6 +156,11 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
+
     }
 
     &[x-label-pos="left"] {
@@ -168,7 +173,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
         .#{$checkboxGroup},
         .#{$radioGroup} {
             padding-top: $spacing-form_label-paddingTop;

packages/semi-ui/datePicker/_story/v2/FixDefaultPickerValue.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DatePicker, Space } from '../../../index';
+
+App.storyName = "fix defaultPickerValue number bug";
+export default function App() {
+    const defaultPickerValue = new Date('2021-03-15 00:00:00').valueOf();
+    const defaultPickerValueArray = [new Date('2021-03-15 00:00:00').valueOf(), new Date('2021-05-15 23:59:59').valueOf()];
+    return (            
+        <Space>
+            <div data-cy="dateTime">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={defaultPickerValue}
+                />
+            </div>
+            <div data-cy="dateTimeRange">
+                <DatePicker
+                    type="dateTimeRange"
+                    defaultPickerValue={defaultPickerValueArray}
+                />
+            </div>
+            <div data-cy="before-1970">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={new Date('1910-01-01 13:00:00')}
+                />
+            </div>
+        </Space>
+
+    );
+}

packages/semi-ui/datePicker/_story/v2/InsetInput.jsx

@@ -84,7 +84,7 @@ export default function App() {
             </div>
             <Space wrap spacing={spacing}>
                 <DatePicker placeholder='选择单个日期' {...props} />
-                <DatePicker placeholder='选择月' {...props} type='month' />
+                <DatePicker placeholder='选择月' {...props} type='month' defaultOpen={false} />
                 <DatePicker placeholder='选择日期时间' {...props} type='dateTime' needConfirm={needConfirm} />
                 <DatePicker placeholder='选择日期范围' {...props} type='dateRange' />
                 <DatePicker placeholder='选择日期时间范围' {...props} type='dateTimeRange' needConfirm={needConfirm} />

packages/semi-ui/datePicker/_story/v2/index.js

@@ -3,3 +3,4 @@ export { default as PanelOpen  } from './PanelOpen';
 export { default as FixInputRangeFocus } from './FixInputRangeFocus';
 export { default as InsetInput  } from './InsetInput';
 export { default as InsetInputE2E  } from './InsetInputE2E';
+export { default as FixDefaultPickerValue } from './FixDefaultPickerValue';

packages/semi-ui/datePicker/monthsGrid.tsx

@@ -19,6 +19,7 @@ import Combobox from '../timePicker/Combobox';
 import YearAndMonth from './yearAndMonth';
 import { IconClock, IconCalendar } from '@douyinfe/semi-icons';
 import { getDefaultFormatTokenByType } from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultFormatToken';
+import getDefaultPickerDate from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultPickerDate';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -90,19 +91,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     constructor(props: MonthsGridProps) {
         super(props);
-        let nowDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
         const validFormat = props.format || getDefaultFormatTokenByType(props.type);
-        if (!nowDate) {
-            nowDate = new Date();
-        } else {
-            nowDate = compatiableParse(nowDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
-        let nextDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-        if (!nextDate) {
-            nextDate = addMonths(nowDate, 1);
-        } else {
-            nextDate = compatiableParse(nextDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
+        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue: props.defaultPickerValue, format: validFormat, dateFnsLocale: props.dateFnsLocale });
 
         const dateState = {
             // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
@@ -636,7 +626,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 x-type={type}
                 x-panel-yearandmonth-open-type={yearOpenType}
                 // FIXME:
-                x-insetInput={insetInput ? "true" : "false"}
+                x-insetinput={insetInput ? "true" : "false"}
                 ref={current => this.cacheRefCurrent('monthGrid', current)}
             >
                 {content}