@douyinfe/semi-ui 2.2.2 → 2.4.0-beta.0

package/tagInput/index.tsx

@@ -55,8 +55,9 @@ export interface TagInputProps {
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;
-    value?: string[];
+    value?: string[] | undefined;
     autoFocus?: boolean;
+    'aria-label'?: string;
 }
 
 export interface TagInputState {
@@ -102,7 +103,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         size: PropTypes.oneOf(strings.SIZE_SET),
         validateStatus: PropTypes.oneOf(strings.STATUS),
         prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+        suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -140,12 +142,18 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState) {
-        const {
-            value,
-            inputValue,
-        } = nextProps;
+        const { value, inputValue } = nextProps;
+        const { tagsArray: prevTagsArray } = prevState;
+        let tagsArray: string[];
+        if (isArray(value)) {
+            tagsArray = value;
+        } else if ('value' in nextProps && !value) {
+            tagsArray = [];
+        } else {
+            tagsArray = prevTagsArray;
+        }
         return {
-            tagsArray: isArray(value) ? value : prevState.tagsArray,
+            tagsArray,
             inputValue: isString(inputValue) ? inputValue : prevState.inputValue
         };
     }
@@ -216,6 +224,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         this.foundation.handleClearBtn(e);
     };
 
+    handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        this.foundation.handleClearEnterPress(e);
+    };
+
     handleTagClose = (idx: number) => {
         this.foundation.handleTagClose(idx);
     };
@@ -236,7 +248,14 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         });
         if (showClear) {
             return (
-                <div className={clearCls} onClick={e => this.handleClearBtn(e)}>
+                <div 
+                    role="button"
+                    tabIndex={0} 
+                    aria-label="Clear TagInput value" 
+                    className={clearCls} 
+                    onClick={e => this.handleClearBtn(e)}
+                    onKeyPress={e => this.handleClearEnterPress(e)}
+                >
                     <IconClear />
                 </div>
             );
@@ -398,6 +417,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             <div
                 style={style}
                 className={tagInputCls}
+                aria-disabled={disabled}
+                aria-label={this.props['aria-label']}
+                aria-invalid={validateStatus === 'error'}
                 onMouseEnter={e => {
                     this.handleInputMouseEnter(e);
                 }}
@@ -409,6 +431,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 <div className={wrapperCls}>
                     {this.renderTags()}
                     <Input
+                        aria-label='input value'
                         ref={this.inputRef as any}
                         className={inputCls}
                         disabled={disabled}

package/timePicker/TimePicker.tsx

@@ -36,6 +36,11 @@ export type BaseValueType = string | number | Date;
 export type Type = 'time' | 'timeRange';
 
 export type TimePickerProps = {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean; // TODO: autoFocus did not take effect
     className?: string;
@@ -56,6 +61,7 @@ export type TimePickerProps = {
     inputReadOnly?: boolean;
     inputStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     locale?: Locale['TimePicker'];
     localeCode?: string;
     minuteStep?: number;
@@ -84,6 +90,7 @@ export type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -100,10 +107,14 @@ export interface TimePickerState {
     invalid: boolean;
 }
 
-
 export default class TimePicker extends BaseComponent<TimePickerProps, TimePickerState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         prefixCls: PropTypes.string,
         clearText: PropTypes.string,
         value: TimeShape,
@@ -142,6 +153,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         dateFnsLocale: PropTypes.object,
         zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         validateStatus: PropTypes.oneOf(strings.STATUS),
         type: PropTypes.oneOf<TimePickerProps['type']>(strings.TYPES),
         rangeSeparator: PropTypes.string,
@@ -176,6 +188,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: noop,
         onBlur: noop,
         onChange: noop,
+        onChangeWithDateFirst: true,
         use12Hours: false,
         focusOnOpen: false,
         onKeyDown: noop,
@@ -246,7 +259,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                 }
             },
             notifyOpenChange: (...args) => this.props.onOpenChange(...args),
-            notifyChange: (...args) => this.props.onChange && this.props.onChange(...args),
+            notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
             notifyFocus: (...args) => this.props.onFocus && this.props.onFocus(...args),
             notifyBlur: (...args) => this.props.onBlur && this.props.onBlur(...args),
             isRangePicker: () => this.props.type === strings.TYPE_TIME_RANGE_PICKER,
@@ -429,6 +442,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             zIndex,
             getPopupContainer,
             insetLabel,
+            insetLabelId,
             inputStyle,
             showClear,
             panelHeader,
@@ -473,6 +487,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             value: inputValue,
             onFocus: this.handleFocus,
             insetLabel,
+            insetLabelId,
             format,
             locale,
             localeCode,

package/timePicker/__test__/timePicker.test.js

@@ -22,11 +22,13 @@ describe(`TimePicker`, () => {
         const defaultMinute = 24;
         const defaultSeconds = 18;
 
-        const onFoucs = sinon.spy();
+        const onFocus = sinon.spy();
+        const onChange = sinon.spy();
 
         const elem = mount(
             <TimePicker
-                onFocus={onFoucs}
+                onChange={onChange}
+                onFocus={onFocus}
                 panelHeader={<strong>Select Time</strong>}
                 locale={Locale.TimePicker}
                 localeCode={Locale.code}
@@ -59,7 +61,7 @@ describe(`TimePicker`, () => {
         // focus
         elem.find(`input`).simulate('focus');
         await sleep(200);
-        expect(onFoucs.calledOnce).toBeTruthy();
+        expect(onFocus.calledOnce).toBeTruthy();
 
         // input value
         const newInputHour = 10;
@@ -82,6 +84,11 @@ describe(`TimePicker`, () => {
 
         await sleep(200);
         expect(elem.state('open')).toBe(false);
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(args[0] instanceof Date).toBe(true);
+        expect(typeof args[1]).toBe('string');
     });
 
     it(`test controlled value`, async () => {
@@ -280,4 +287,28 @@ describe(`TimePicker`, () => {
         expect(args[0]).toBe(undefined);
         expect(args[1]).toBe('');
     });
+
+    it('test onChangeWithDateFirst=false', async () => {
+        const onChange = sinon.spy();
+        let props = {
+            defaultValue: "10:23:15",
+            onChange,
+            defaultOpen: true,
+            onChangeWithDateFirst: false,
+            autofocus: true,
+            locale: Locale.TimePicker,
+            localeCode: Locale.code
+        };
+        const elem = mount(<TimePicker {...props} />);
+        // click minute
+        const minuteUl = elem.find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-minute .${BASE_CLASS_PREFIX}-scrolllist-list-outer ul`);
+        const minuteLis = minuteUl.find(`li`);
+
+        minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(typeof args[0]).toBe('string');
+        expect(args[1] instanceof Date).toBe(true);
+    });
 });

package/timePicker/_story/timepicker.stories.js

@@ -262,3 +262,21 @@ export const ShowClear = () => (
     />
   </>
 );
+
+
+export const TimePickerWithOnChangeWithDateFirst = () => {
+  return (
+    <div>
+      onChangeWithDateFirst=true (default)
+      <TimePicker onChange={(...val) => console.log(...val)} />
+      <br />
+      onChangeWithDateFirst=false
+      <TimePicker onChangeWithDateFirst={false} onChange={(...val) => console.log(...val)} />
+      
+    </div>
+  );
+};
+
+TimePickerWithOnChangeWithDateFirst.story = {
+  name: 'OnChangeWithDateFirst',
+};

package/timeline/_story/timeline.stories.js

@@ -10,7 +10,7 @@ export default {
 
 export const DefaultTimeline = () => (
   <div>
-    <Timeline>
+    <Timeline aria-label="xx事故处理过程时间线">
       <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
       <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
       <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>

package/timeline/index.tsx

@@ -12,7 +12,7 @@ export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
 
-export interface TimelineProps {
+export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
     mode?: 'left' | 'right' | 'center' | 'alternate';
     className?: string;
     style?: React.CSSProperties;
@@ -86,7 +86,7 @@ class Timeline extends PureComponent<TimelineProps> {
         const items = childrenList || this.addClassName(children);
 
         return (
-            <ul style={style} className={classString}>
+            <ul aria-label={this.props['aria-label']} style={style} className={classString}>
                 {items}
             </ul>
         );

package/timeline/item.tsx

@@ -63,9 +63,10 @@ export default class Item extends PureComponent<TimelineItemProps> {
         const dotStyle = color ? { style: { backgroundColor: color } } : null;
         return (
             <li className={itemCls} style={style} onClick={onClick}>
-                <div className={`${prefixCls}-tail`} />
+                <div className={`${prefixCls}-tail`} aria-hidden />
                 <div
                     className={dotCls}
+                    aria-hidden
                     {...dotStyle}
                 >
                     {dot}

package/toast/toast.tsx

@@ -118,6 +118,8 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         const btnSize = 'small';
         return (
             <div
+                role='alert'
+                aria-label={`${type ? type : 'default'} type`}
                 className={toastCls}
                 style={style}
                 onMouseEnter={this.clearCloseTimer}

package/tooltip/TriangleArrow.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const TriangleArrow: React.FC<{ [key: string]: any }> = props => {
     const { className, style, ...restProps } = props;
     return (
-        <svg className={className} style={style} {...restProps} width="24" height="7" viewBox="0 0 24 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden className={className} style={style} {...restProps} width="24" height="7" viewBox="0 0 24 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path d="M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z" />
         </svg>
     );

package/tooltip/TriangleArrowVertical.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const TriangleArrowVertical: React.FC<{ [key: string]: any }> = props => {
     const { className, style, ...restProps } = props;
     return (
-        <svg className={className} style={style} {...restProps} width="7" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+        <svg aria-hidden className={className} style={style} {...restProps} width="7" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
             <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" />
         </svg>
     );