@douyinfe/semi-ui 2.13.0-beta.0 → 2.14.0-beta.0

package/autoComplete/_story/CustomTrigger/index.jsx

@@ -98,7 +98,7 @@ export default class ObjectDemo extends React.Component {
                     renderItem={this.renderItem}
                     renderSelectedItem={this.renderSelectedItem}
                     onSelect={this.handleSelect}
-                    triggerRender={({ value, inputValue }) => <Button>{inputValue}</Button>}
+                    triggerRender={({ value, inputValue, onFocus }) => <Button onFocus={onFocus}>{inputValue}</Button>}
                 />
             </div>
         );

package/avatar/_story/avatar.stories.js

@@ -1,7 +1,5 @@
-import React from 'react';
-import Avatar from '../index';
-import Popover from '../../popover/index';
-import AvatarGroup from '../avatarGroup';
+import React, {useState} from 'react';
+import { Avatar,Popover, AvatarGroup, RadioGroup, Radio } from '../../index';
 
 export default {
   title: 'Avatar',
@@ -188,4 +186,63 @@ export const ExtraExtraSmallOverlap = () => (
       <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
     </AvatarGroup>
   </div>
-);
+);
+
+export const focusTest = () => {
+  return (
+    <>
+      <div id='initial_focus_point' tabindex={0} style={{width: 10, height: 10}}></div>
+      <Avatar
+        alt="a cat 1"
+        src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+        style={{ margin: 4 }}
+        onClick={()=>{
+            console.log('click avatar 1');
+        }}
+      />
+      <Avatar
+        alt="a cat 2"
+        size="small"
+        src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+        style={{ margin: 4 }}
+        onClick={()=>{
+            console.log('click avatar 2');
+        }}
+      />
+    </>
+  );
+}
+
+const srcGroup = {
+  'successSrc1': 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg',
+  'successSrc2': 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  'errorSrc': 'https://xxx.png',
+}
+
+export const srcChange = () => {
+  const [src, setSrc] = useState('successSrc1');
+
+  const onChange = (e) => {
+    setSrc(e.target.value);
+  } 
+
+  return (
+    <>
+      <div>点击选择src类型</div>
+      <RadioGroup onChange={onChange} value={src} aria-label="单选组合示例">
+        <Radio value={'successSrc1'}>成功的src</Radio>
+        <Radio value={'successSrc2'}>成功的src</Radio>
+        <Radio value={'errorSrc'}>失败的src</Radio>
+      </RadioGroup>
+      <br />
+      <Avatar
+        alt="test image"
+        src={srcGroup[src]}
+        style={{ margin: 4 }}
+        onError={() => {
+          console.log('loading error');
+        }}
+      />
+    </>
+  )
+}

package/avatar/avatarGroup.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent, Fragment, ReactElement } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { get as lodashGet, isFunction, isNumber } from 'lodash';
@@ -28,7 +28,10 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
 
     getAllAvatars() {
         const { children } = this.props;
-        return Array.isArray(children) ? children : [children];
+        if (children) {
+            return Array.isArray(children) ? React.Children.toArray(children) : [children];
+        }
+        return [];
     }
 
     getMergeAvatars(avatars: React.ReactNode[]) {
@@ -50,7 +53,16 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
     renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]) {
         const { renderMore } = this.props;
         const moreCls = cls(`${prefixCls}-item-more`);
-        let moreAvatar = <Avatar className={moreCls} key="_+n">{`+${restNumber}`}</Avatar>;
+        const restAvatarAlt = restAvatars?.reduce((pre, cur) => {
+            const { children, alt } = (cur as ReactElement).props;
+            const avatarInfo = alt ?? ((typeof children === 'string') ? children : '');
+            if (avatarInfo.length === 0) {
+                return pre;
+            }
+            return (pre as string).length > 0 ? `${pre},${avatarInfo}` : avatarInfo;
+        }, '');
+        const finalAlt = ` Number of remaining Avatars：${restNumber},${restAvatarAlt}`;
+        let moreAvatar = <Avatar className={moreCls} key="_+n" alt={finalAlt}>{`+${restNumber}`}</Avatar>;
         if (isFunction(renderMore)) {
             moreAvatar = <Fragment key="_+n">{renderMore(restNumber, restAvatars)}</Fragment>;
         }
@@ -76,6 +88,6 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
 
         }
 
-        return <div className={groupCls}>{inner}</div>;
+        return <div className={groupCls} role='list'>{inner}</div>;
     }
 }

package/avatar/index.tsx

@@ -7,6 +7,7 @@ import '@douyinfe/semi-foundation/avatar/avatar.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import BaseComponent from '../_base/baseComponent';
 import { AvatarProps } from './interface';
+import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
 
 const sizeSet = strings.SIZE;
 const shapeSet = strings.SHAPE;
@@ -17,6 +18,7 @@ export * from './interface';
 export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
+    focusVisible: boolean;
 }
 
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
@@ -53,10 +55,13 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         this.state = {
             isImgExist: true,
             hoverContent: '',
+            focusVisible: false,
         };
         this.onEnter = this.onEnter.bind(this);
         this.onLeave = this.onLeave.bind(this);
         this.handleError = this.handleError.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.getContent = this.getContent.bind(this);
     }
 
     get adapter(): AvatarAdapter<AvatarProps, AvatarState> {
@@ -78,7 +83,10 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
                     const { onMouseLeave } = this.props;
                     onMouseLeave && onMouseLeave(e);
                 });
-            }
+            },
+            setFocusVisible: (focusVisible: boolean): void => {
+                this.setState({ focusVisible });
+            },
         };
     }
 
@@ -119,10 +127,82 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         this.foundation.handleImgLoadError();
     }
 
+    handleKeyDown(event: any) {
+        const { onClick } = this.props;
+        switch (event.key) {
+            case "Enter":
+                onClick(event);
+                handlePrevent(event);
+                break;
+            case 'Escape':
+                event.target.blur();
+                break;
+            default:
+                break;
+        }
+    }
+    
+    handleFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleFocusVisible(event);
+    }
+
+    handleBlur = (event: React.FocusEvent) => {
+        this.foundation.handleBlur();
+    }
+
+    getContent = () => {
+        const { children, onClick, imgAttr, src, srcSet, alt } = this.props;
+        const { isImgExist } = this.state;
+        let content = children;
+        const clickable = onClick !== noop;
+        const isImg = src && isImgExist;
+        const a11yFocusProps = { 
+            tabIndex: 0, 
+            onKeyDown: this.handleKeyDown,
+            onFocus: this.handleFocusVisible,
+            onBlur: this.handleBlur,
+        };
+        if (isImg) {
+            const finalAlt = clickable ? `clickable Avatar: ${alt}` : alt; 
+            const imgBasicProps = {
+                src,
+                srcSet,
+                onError: this.handleError,
+                ...imgAttr,
+                className: cls({
+                    [`${prefixCls}-no-focus-visible`]: clickable,
+                }),
+            };
+            const imgProps = clickable ? { ...imgBasicProps, ...a11yFocusProps } : imgBasicProps;
+            content = (
+                <img alt={finalAlt} {...imgProps}/>
+            );
+        } else if (typeof children === 'string') {
+            const tempAlt = alt ?? children;
+            const finalAlt = clickable ? `clickable Avatar: ${tempAlt}` : tempAlt; 
+            const props = {
+                role: 'img',
+                'aria-label': finalAlt,
+                className:  cls(`${prefixCls}-label`,
+                    {
+                        [`${prefixCls}-no-focus-visible`]: clickable,
+                    }
+                ),
+            };
+            const finalProps = clickable ? { ...props, ...a11yFocusProps } : props;
+            content = (
+                <span className={`${prefixCls}-content`}>
+                    <span {...finalProps}  x-semi-prop="children">{children}</span>
+                </span>
+            );
+        }
+        return content;
+    }
+
     render() {
         // eslint-disable-next-line max-len, no-unused-vars
         const { shape, children, size, color, className, hoverMask, onClick, imgAttr, src, srcSet, style, alt, ...others } = this.props;
-        const { isImgExist, hoverContent } = this.state;
+        const { isImgExist, hoverContent, focusVisible } = this.state;
         const isImg = src && isImgExist;
         const avatarCls = cls(
             prefixCls,
@@ -131,24 +211,14 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
                 [`${prefixCls}-${size}`]: size,
                 [`${prefixCls}-${color}`]: color && !isImg,
                 [`${prefixCls}-img`]: isImg,
+                [`${prefixCls}-focus`]: focusVisible,
             },
             className
         );
-        let content = children;
-        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
-        if (isImg) {
-            content = (
-                <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
-            );
-        } else if (typeof children === 'string') {
-            content = (
-                <span className={`${prefixCls}-content`}>
-                    <span className={`${prefixCls}-label`}>{children}</span>
-                </span>
-            );
-        }
+
+        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`} x-semi-prop="hoverContent">{hoverContent}</div>) : null;
+        
         return (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
             <span
                 {...(others as any)}
                 style={style}
@@ -156,8 +226,9 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
                 onClick={onClick as any}
                 onMouseEnter={this.onEnter as any}
                 onMouseLeave={this.onLeave as any}
+                role='listitem'
             >
-                {content}
+                {this.getContent()}
                 {hoverRender}
             </span>
         );

package/backtop/index.tsx

@@ -101,13 +101,17 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
             className
         );
         const backtopBtn = children ? children : this.renderDefault();
-        const content = visible ?
-            (
-                <div {...others} className={preCls} style={style} onClick={e => this.handleClick(e)}>
-                    {backtopBtn}
-                </div>
-            ) :
-            null;
+        const content = visible ? (
+            <div
+                {...others} 
+                className={preCls} 
+                style={style} 
+                onClick={e => this.handleClick(e)} 
+                x-semi-prop="children"
+            >
+                {backtopBtn}
+            </div>
+        ) : null;
         return content;
     }
 }

package/badge/index.tsx

@@ -82,7 +82,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         return (
             <span className={prefixCls} {...rest}>
                 {children}
-                <span className={wrapper} style={style}>
+                <span className={wrapper} style={style} x-semi-prop="count">
                     {dot ? null : content}
                 </span>
             </span>

package/banner/index.tsx

@@ -109,7 +109,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             <Button
                 className={`${prefixCls}-close`}
                 onClick={this.remove}
-                icon={closeIcon || <IconClose aria-hidden={true}/>}
+                icon={closeIcon || <IconClose x-semi-prop="closeIcon" aria-hidden={true}/>}
                 theme="borderless"
                 size="small"
                 type="tertiary"
@@ -137,7 +137,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls}>
+                <div className={iconCls} x-semi-prop="icon">
                     {iconType}
                 </div>
             );
@@ -160,13 +160,13 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
                     <div className={`${prefixCls}-content`}>
                         {this.renderIcon()}
                         <div className={`${prefixCls}-content-body`}>
-                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div">{title}</Typography.Title> : null}
-                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div">{description}</Typography.Paragraph> : null}
+                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div" x-semi-prop="title">{title}</Typography.Title> : null}
+                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div" x-semi-prop="description">{description}</Typography.Paragraph> : null}
                         </div>
                     </div>
                     {this.renderCloser()}
                 </div>
-                {children ? <div className={`${prefixCls}-extra`}>{children}</div> : null}
+                {children ? <div className={`${prefixCls}-extra`} x-semi-prop="children">{children}</div> : null}
             </div>
         ) : null;
         return banner;

package/breadcrumb/index.tsx

@@ -167,9 +167,9 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
             <span className={`${clsPrefix}-collapse`} key={`more-${itemsLen}`}>
                 <span className={`${clsPrefix}-item-wrap`}>
                     <span
-                        role='button'
+                        role="button"
                         tabIndex={0}
-                        aria-label='Expand breadcrumb items'
+                        aria-label="Expand breadcrumb items"
                         className={`${clsPrefix}-item ${clsPrefix}-item-more`}
                         onClick={item => this.foundation.handleExpand(item)}
                         onKeyPress={e => this.foundation.handleExpandEnterPress(e)}
@@ -178,7 +178,9 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
                         {!hasRenderMore && moreType === 'default' && <IconMore />}
                         {!hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)}
                     </span>
-                    <span className={`${clsPrefix}-separator`}>{this.props.separator}</span>
+                    <span className={`${clsPrefix}-separator`} x-semi-prop="separator">
+                        {this.props.separator}
+                    </span>
                 </span>
             </span>
         );

package/button/Button.tsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
 import '@douyinfe/semi-foundation/button/button.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
+import { omit } from 'lodash';
 
 const btnSizes = strings.sizes;
 const { htmlTypes, btnTypes } = strings;
@@ -93,7 +94,7 @@ export default class Button extends PureComponent<ButtonProps> {
 
         const baseProps = {
             disabled,
-            ...attr,
+            ...omit(attr, ['x-semi-children-alias']),
             className: classNames(
                 prefixCls,
                 {
@@ -113,16 +114,17 @@ export default class Button extends PureComponent<ButtonProps> {
             'aria-disabled': disabled,
         };
 
+        const xSemiProps = {};
+
+        if (!(className && className.includes('-with-icon'))) {
+            xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
+        }
+
         return (
             // eslint-disable-next-line react/button-has-type
-            <button
-                {...baseProps}
-                onClick={this.props.onClick}
-                onMouseDown={this.props.onMouseDown}
-                style={style}
-            >
+            <button {...baseProps} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} style={style}>
                 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()}>
+                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()} {...xSemiProps}>
                     {children}
                 </span>
             </button>

package/calendar/_story/calendar.stories.js

@@ -402,4 +402,128 @@ export const WithLocaleProvider = () => {
 
 WithLocaleProvider.parameters = {
   chromatic: { disableSnapshot: true }
-}
+}
+
+class EventRenderDemo extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            mode: 'week',
+            clickDate: '?'
+        };
+    }
+
+    onSelect(e) {
+        this.setState({
+            mode: e.target.value,
+        });
+    }
+    render() {
+        const { mode } = this.state;
+        const isMonthView = mode === 'month';
+        const dailyEventStyle = {
+            borderRadius: '3px',
+            boxSizing: 'border-box',
+            border: 'var(--semi-color-primary) 1px solid',
+            padding: '10px',
+            backgroundColor: 'var(--semi-color-primary-light-default)',
+            height: '100%',
+            overflow: 'hidden',
+        };
+        const allDayStyle = {
+            borderRadius: '3px',
+            boxSizing: 'border-box',
+            border: 'var(--semi-color-bg-1) 1px solid',
+            padding: '2px 4px',
+            backgroundColor: 'var(--semi-color-primary-light-active)',
+            height: '100%',
+            overflow: 'hidden',
+        };
+        const dailyStyle = isMonthView ? allDayStyle : dailyEventStyle;
+        const events = [
+            {
+                key: '0',
+                start: new Date(2019, 5, 25, 14, 45, 0),
+                end: new Date(2019, 6, 26, 6, 18, 0),
+                children: <div style={dailyStyle}>6月25日 14:45 ~ 7月26日 6:18</div>,
+            },
+            {
+                key: '1',
+                start: new Date(2019, 6, 18, 10, 0, 0),
+                end: new Date(2019, 6, 30, 8, 0, 0),
+                children: <div style={allDayStyle}>7月18日 10:00 ~ 7月30日 8:00</div>,
+            },
+            {
+                key: '2',
+                start: new Date(2019, 6, 19, 20, 0, 0),
+                end: new Date(2019, 6, 23, 14, 0, 0),
+                children: <div style={allDayStyle}>7月19日 20:00 ~ 7月23日 14:00</div>,
+            },
+            {
+                key: '3',
+                start: new Date(2019, 6, 21, 6, 0, 0),
+                end: new Date(2019, 6, 25, 6, 0, 0),
+                children: <div style={allDayStyle}>7月21日 6:00 ~ 7月25日 6:00</div>,
+            },
+            {
+                key: '4',
+                allDay: true,
+                start: new Date(2019, 6, 22, 8, 0, 0),
+                children: <div style={allDayStyle}>7月22日 全天</div>,
+            },
+            {
+                key: '5',
+                start: new Date(2019, 6, 22, 9, 0, 0),
+                end: new Date(2019, 6, 23, 23, 0, 0),
+                children: <div style={allDayStyle}>7月22日 9:00 ~ 7月23日 23:00</div>,
+            },
+            {
+                key: '6',
+                start: new Date(2019, 6, 23, 8, 32, 0),
+                children: <div style={dailyStyle}>7月23日 8:32</div>,
+            },
+            {
+                key: '7',
+                start: new Date(2019, 6, 23, 14, 30, 0),
+                end: new Date(2019, 6, 23, 20, 0, 0),
+                children: <div style={dailyStyle}>7月23日 14:30-20:00</div>,
+            },
+            {
+                key: '8',
+                start: new Date(2019, 6, 25, 8, 0, 0),
+                end: new Date(2019, 6, 27, 6, 0, 0),
+                children: <div style={allDayStyle}>7月25日 8:00 ~ 7月27日 6:00</div>,
+            },
+            {
+                key: '9',
+                start: new Date(2019, 6, 26, 10, 0, 0),
+                end: new Date(2019, 6, 27, 16, 0, 0),
+                children: <div style={allDayStyle}>7月26日 10:00 ~ 7月27日 16:00</div>,
+            },
+        ];
+        const displayValue = new Date(2019, 6, 23, 8, 32, 0);
+        return (
+            <>
+                <RadioGroup onChange={e => this.onSelect(e)} value={mode}>
+                    <Radio value={'day'}>日视图</Radio>
+                    <Radio value={'week'}>周视图</Radio>
+                    <Radio value={'month'}>月视图</Radio>
+                    <Radio value={'range'}>多日视图</Radio>
+                </RadioGroup>
+                <br />
+                <br />
+                <Calendar
+                    height={400}
+                    mode={mode}
+                    displayValue={displayValue}
+                    events={events}
+                    onClick={(e, date) => { this.setState({clickDate: date.getDate()}); console.log(date.getDate())}}
+                    range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}
+                ></Calendar>
+                <div>当前点击的日期是{this.state.clickDate}号</div>
+            </>
+        );
+    }
+}
+
+export const EventRender  = () => <EventRenderDemo />;