@douyinfe/semi-ui 2.10.1 → 2.11.0-beta.0

package/checkbox/checkbox.tsx

@@ -29,9 +29,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role']; // a11y: wrapper role
     tabIndex?: number; // a11y: wrapper tabIndex
+    addonId?: string;
+    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType = Context;
@@ -89,7 +93,13 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             notifyGroupChange: cbContent => {
                 this.context.checkboxGroup.onChange(cbContent);
             },
-            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled)
+            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled),
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
+            }
         };
     }
 
@@ -103,11 +113,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         this.state = {
             checked: props.checked || props.defaultChecked || checked,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
 
         this.checkboxEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
         this.foundation = new CheckboxFoundation(this.adapter);
     }
 
@@ -153,7 +163,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             tabIndex,
             id
         } = this.props;
-        const { checked } = this.state;
+        const { checked, addonId, extraId } = this.state;
         const props: Record<string, any> = {
             checked,
             disabled,
@@ -171,6 +181,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             const { isCardType, isPureCardType } = this.context.checkboxGroup;
             props.isCardType = isCardType;
             props.isPureCardType = isPureCardType;
+            props['name'] = this.context.checkboxGroup.name;
         }
 
         const prefix = prefixCls || css.PREFIX;
@@ -192,12 +203,10 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
-        const name = inGroup && this.context.checkboxGroup.name;
-
         const renderContent = () => (
             <>
-                {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div id={this.extraId} className={extraCls}>{extra}</div> : null}
+                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
@@ -220,7 +229,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     {...props}
                     addonId={children && this.addonId}
                     extraId={extra && this.extraId}
-                    name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {
                         this.checkboxEntity = ref;

package/checkbox/checkboxInner.tsx

@@ -81,26 +81,31 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             <IconCheckboxIndeterminate />
         ) : null;
 
+        const inputProps: React.InputHTMLAttributes<HTMLInputElement>  = {
+            type: "checkbox",
+            'aria-label': this.props['aria-label'],
+            'aria-disabled': disabled,
+            'aria-checked': checked,
+            'aria-labelledby': addonId,
+            'aria-describedby':extraId || this.props['aria-describedby'],
+            'aria-invalid': this.props['aria-invalid'],
+            'aria-errormessage': this.props['aria-errormessage'],
+            'aria-required': this.props['aria-required'],
+            className: css.INPUT,
+            onChange: noop,
+            checked: checked,
+            disabled: disabled,
+        };
+        
+        name && (inputProps['name'] = name);
+
         return (
             <span className={wrapper}>
                 <input
-                    type="checkbox"
-                    aria-label={this.props['aria-label']}
-                    aria-disabled={disabled}
-                    aria-checked={checked}
-                    aria-labelledby={addonId}
-                    aria-describedby={extraId || this.props['aria-describedby']}
-                    aria-invalid={this.props['aria-invalid']}
-                    aria-errormessage={this.props['aria-errormessage']}
-                    aria-required={this.props['aria-required']}
+                    {...inputProps}
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
-                    className={css.INPUT}
-                    onChange={noop}
-                    checked={checked}
-                    disabled={disabled}
-                    name={name}
                 />
                 <span className={inner}>{icon}</span>
             </span>

package/datePicker/_story/datePicker.stories.js

@@ -849,5 +849,52 @@ export const A11yKeyboardDemo = () => {
   );
 };
 
-A11yKeyboardDemo.storyName = "a11y keyboard demo"
+A11yKeyboardDemo.storyName = "a11y keyboard demo";
 
+/**
+ * test with cypress
+ */
+export const NeedConfirmDelete = () => {
+  return (
+    <div data-cy="dateTimeRange">
+      <DatePicker
+        value={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
+        type="dateTimeRange"
+        needConfirm
+      />
+    </div>
+  );
+};
+NeedConfirmDelete.storyName = "cashedSelectedValue return to last selected when needConfirm & input invalid";
+
+/**
+ * test with cypress
+ */
+ export const CashedSelectedValue = () => {
+  return (
+    <Space>
+      <div data-cy="date">
+        <DatePicker
+          defaultValue={new Date('2022-08-08')}
+          type="date"
+          motion={false}
+        />
+      </div>
+      <div data-cy="dateTime">
+        <DatePicker
+          defaultValue={new Date('2022-08-08 19:11:00')}
+          type="dateTime"
+          motion={false}
+        />
+      </div>
+      <div data-cy="dateRange">
+        <DatePicker
+          defaultValue={[new Date('2022-08-08'), new Date('2022-08-09')]}
+          type="dateRange"
+          motion={false}
+        />
+      </div>
+    </Space>
+  );
+};
+CashedSelectedValue.storyName = "cashedSelectedValue";

package/datePicker/_story/v2/AutoFillTime.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '../../../index';
+
+AutoFillTime.storyName = '自动填充时间';
+
+/**
+ * 输入开始日期后，自动填充一个时间
+ */
+export default function AutoFillTime() {
+    const format = 'yyyy-MM-dd HH:mm';
+    const defaultPickerValue = '2021-03-15 14:00';
+    const defaultPickerValue2 = ['2021-01-10 00:01', '2021-03-15 23:59'];
+    
+    const handleChange = (...args) => {
+        console.log('change', ...args);
+    };
+
+    const props = {
+        format,
+        insetInput: true,
+        onChange: handleChange,
+        motion: false,
+    };
+
+    return (
+        <div data-cy="container">
+            <Space>
+                <div data-cy="dateTime">
+                    <DatePicker {...props} type="dateTime" defaultPickerValue={defaultPickerValue} />
+                </div>
+                <div data-cy="dateTimeRange">
+                    <DatePicker {...props} type="dateTimeRange" defaultPickerValue={defaultPickerValue2} />
+                </div>
+            </Space>
+        </div>
+    );
+}

package/datePicker/_story/v2/InputFormat.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '../../../index';
+
+InputFormat.storyName = '输入部分日期，回显在面板上';
+
+/**
+ * 优化 input format
+ */
+export default function InputFormat() {
+    const handleChange = (...args) => {
+        console.log('change', ...args);
+    };
+
+    return (
+        <div data-cy="container">
+            <Space>
+                <div data-cy="date">
+                    <DatePicker onChange={handleChange} />
+                </div>
+                <div data-cy="dateRange">
+                    <DatePicker onChange={handleChange} type="dateRange" />
+                </div>
+                <div data-cy="dateTime">
+                    <DatePicker onChange={handleChange} type="dateTime" />
+                </div>
+            </Space>
+        </div>
+    );
+}

package/datePicker/_story/v2/InputFormatConfirm.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '../../../index';
+
+InputFormatConfirm.storyName = '输入时间 + needConfirm';
+
+export default function InputFormatConfirm() {
+    const [insetInput, setInputInput] = React.useState(false);
+    const format = 'yyyy-MM-dd HH:mm';
+    const defaultPickerValue = '2021-03-15 14:00';
+    const defaultPickerValue2 = ['2021-01-10 00:01', '2021-03-15 23:59'];
+    
+    const handleChange = (...args) => {
+        console.log('change', ...args);
+    };
+        
+    const handleConfirm = (...args) => {
+        console.log('confirm', ...args);
+    };
+
+    const props = {
+        format,
+        onChange: handleChange,
+        onConfirm: handleConfirm,
+        motion: false,
+        needConfirm: true,
+        insetInput
+    };
+
+    return (
+        <div data-cy="container">
+            <Space>
+                <Button data-cy="inset-switch" onClick={() => setInputInput(!insetInput)}>{`insetInput=${insetInput}`}</Button>
+                <Space>
+                    <div data-cy="dateTime">
+                        <DatePicker {...props} type="dateTime" defaultPickerValue={defaultPickerValue} />
+                    </div>
+                    <div data-cy="dateTimeRange">
+                        <DatePicker {...props} type="dateTimeRange" defaultPickerValue={defaultPickerValue2} />
+                    </div>
+                </Space>
+            </Space>
+        </div>
+    );
+}

package/datePicker/_story/v2/InputFormatDisabled.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '../../../index';
+
+InputFormatDisabled.storyName = '输入禁用日期，不回显在面板上';
+
+/**
+ * 优化 input format
+ */
+export default function InputFormatDisabled() {
+    const handleChange = (...args) => {
+        console.log('change', ...args);
+    };
+
+    const disabledDate = (date) => {
+        return date.getDate() === 15;
+    };
+
+    return (
+        <div data-cy="container">
+            <Space>
+                <div data-cy="date">
+                    <DatePicker disabledDate={disabledDate} onChange={handleChange} />
+                </div>
+            </Space>
+        </div>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -4,3 +4,7 @@ export { default as FixInputRangeFocus } from './FixInputRangeFocus';
 export { default as InsetInput  } from './InsetInput';
 export { default as InsetInputE2E  } from './InsetInputE2E';
 export { default as FixDefaultPickerValue } from './FixDefaultPickerValue';
+export { default as InputFormat  } from './InputFormat';
+export { default as InputFormatDisabled  } from './InputFormatDisabled';
+export { default as AutoFillTime  } from './AutoFillTime';
+export { default as InputFormatConfirm  } from './InputFormatConfirm';

package/datePicker/dateInput.tsx

@@ -64,6 +64,12 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeSeparator: PropTypes.string,
         insetInput: PropTypes.bool,
         insetInputValue: PropTypes.object,
+        defaultPickerValue: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.object,
+            PropTypes.array,
+        ]),
     };
 
     static defaultProps = {
@@ -392,6 +398,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             rangeSeparator,
             insetInput,
             insetInputValue,
+            defaultPickerValue,
             ...rest
         } = this.props;
         const dateIcon = <IconCalendar aria-hidden />;

package/datePicker/datePicker.tsx

@@ -184,7 +184,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             isRange: false,
             inputValue: null, // Staging input values
             value: [], // The currently selected date, each date is a Date object
-            cachedSelectedValue: null, // Save last selected date
+            cachedSelectedValue: null, // Save last selected date, maybe include null
             prevTimeZone: null,
             motionEnd: false, // Monitor if popover animation ends
             rangeInputFocus: undefined, // Optional'rangeStart ',' rangeEnd ', false
@@ -415,16 +415,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             triggerRender,
             insetInput
         } = this.props;
-        const { value, cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
-
-        // const cachedSelectedValue = this.adapter.getCache('cachedSelectedValue');
-
-        let defaultValue = value;
-
-        if (this.adapter.needConfirm()) {
-            defaultValue = cachedSelectedValue;
-        }
+        const { cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
+        const defaultValue = cachedSelectedValue;
         return (
             <MonthsGrid
                 ref={this.monthGrid}
@@ -535,6 +528,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             inputReadOnly,
             rangeSeparator,
             insetInput,
+            defaultPickerValue
         } = this.props;
         const { value, inputValue, rangeInputFocus, triggerDisabled } = this.state;
         // This class is not needed when triggerRender is function
@@ -555,6 +549,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             disabled: inputDisabled,
             inputValue,
             value: value as Date[],
+            defaultPickerValue,
             onChange: this.handleInputChange,
             onEnterPress: this.handleInputComplete,
             // TODO: remove in next major version
@@ -629,7 +624,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue } = this.props;
         const { insetInputValue, value } = this.state;
         const wrapCls = classnames(
             cssClasses.PREFIX,
@@ -653,6 +648,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             rangeInputStartRef: this.rangeInputStartRef,
             rangeInputEndRef: this.rangeInputEndRef,
             density,
+            defaultPickerValue
         };
 
         return (

package/datePicker/monthsGrid.tsx

@@ -168,7 +168,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     componentDidUpdate(prevProps: MonthsGridProps, prevState: MonthsGridState) {
         const { defaultValue, defaultPickerValue, motionEnd } = this.props;
         if (prevProps.defaultValue !== defaultValue) {
-            this.foundation.updateSelectedFromProps(defaultValue, false);
+            // we should always update panel state when value changes
+            this.foundation.updateSelectedFromProps(defaultValue);
         }
 
         if (prevProps.defaultPickerValue !== defaultPickerValue) {