@douyinfe/semi-ui 2.14.0-beta.2 → 2.15.0

package/rating/_story/rating.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Rating from '../index';
+import Button from '../../button'
 import { IconLikeHeart } from '@douyinfe/semi-icons';
 
 export default {
@@ -25,7 +26,7 @@ export const _Rating = () => (
       <Rating allowClear={false} />
       <br />
       <h5>character</h5>
-      <Rating character={<IconLikeHeart />} />
+      <Rating size="small" character={<IconLikeHeart />} />
       <br />
       <Rating character={'好'} defaultValue={2} disabled />
     </div>
@@ -72,7 +73,7 @@ class Demo extends React.Component {
     const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
     return (
       <div>
-        <span>How was the help you received: {value ? <span>{desc[value - 1]}</span> : ''}</span>
+        <span>How was the help you received: {value ? <span id='rating-result'>{desc[value - 1]}</span> : ''}</span>
         <br />
         <Rating tooltips={desc} onChange={this.handleChange} value={value} />
       </div>
@@ -95,3 +96,13 @@ export const Keydown = () => <KeyDownDemo />;
 Keydown.story = {
   name: 'keydown',
 };
+
+const AutoFocusDemo = () => {
+  return <Rating defaultValue={2} autoFocus />;
+}
+
+export const AutoFocus = () => <AutoFocusDemo />;
+
+AutoFocus.story = {
+  name: 'autofocus',
+};

package/rating/index.tsx

@@ -41,6 +41,7 @@ export interface RatingProps {
     size?: 'small' | 'default' | number;
     tooltips?: string[];
     id?: string;
+    preventScroll?: boolean;
 }
 
 export interface RatingState {
@@ -48,6 +49,7 @@ export interface RatingState {
     hoverValue: number;
     focused: boolean;
     clearedValue: number;
+    emptyStarFocusVisible: boolean;
 }
 
 export default class Rating extends BaseComponent<RatingProps, RatingState> {
@@ -79,6 +81,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
         tooltips: PropTypes.arrayOf(PropTypes.string),
         id: PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -90,7 +93,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         prefixCls: cssClasses.PREFIX,
         onChange: noop,
         onHoverChange: noop,
-        tabIndex: 0,
+        tabIndex: -1,
         size: 'default' as const,
     };
 
@@ -108,6 +111,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
             focused: false,
             hoverValue: undefined,
             clearedValue: null,
+            emptyStarFocusVisible: false,
         };
 
         this.foundation = new RatingFoundation(this.adapter);
@@ -127,9 +131,11 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         return {
             ...super.adapter,
             focus: () => {
-                const { disabled } = this.props;
+                const { disabled, count } = this.props;
+                const { value } = this.state;
                 if (!disabled) {
-                    this.rate.focus();
+                    const index = Math.ceil(value) - 1;
+                    this.stars[index < 0 ? count : index].starFocus();
                 }
             },
             getStarDOM: (index: number) => {
@@ -180,6 +186,11 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
                 });
                 onKeyDown && onKeyDown(e);
             },
+            setEmptyStarFocusVisible: (focusVisible: boolean): void => {
+                this.setState({
+                    emptyStarFocusVisible: focusVisible, 
+                });
+            },
         };
     }
 
@@ -217,9 +228,9 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
     };
 
     focus = () => {
-        const { disabled } = this.props;
+        const { disabled, preventScroll } = this.props;
         if (!disabled) {
-            this.rate.focus();
+            this.rate.focus({ preventScroll });
         }
     };
 
@@ -238,11 +249,31 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         this.rate = node;
     };
 
-    render() {
-        const { count, allowHalf, style, prefixCls, disabled, className, character, tabIndex, size, tooltips, id } =
-            this.props;
+    handleStarFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleStarFocusVisible(event);
+    }
+
+    handleStarBlur = (event: React.FocusEvent) => {
+        this.foundation.handleStarBlur(event);
+    }
+
+    getAriaLabelPrefix = () => {
+        if (this.props['aria-label']) {
+            return this.props['aria-label'];
+        }
+        let prefix = 'star';
+        const { character } = this.props;
+        if (typeof character === 'string') {
+            prefix = character;
+        }
+        return prefix;
+    }
+
+    getItemList = (ariaLabelPrefix: string) => {
+        const { count, allowHalf, prefixCls, disabled,  character, size, tooltips } =this.props;
         const { value, hoverValue, focused } = this.state;
-        const itemList = [...Array(count).keys()].map(ind => {
+        // index == count is for Empty rating
+        const itemList = [...Array(count + 1).keys()].map(ind => {
             const content = (
                 <Item
                     ref={this.saveRef(ind)}
@@ -251,13 +282,16 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
                     prefixCls={`${prefixCls}-star`}
                     allowHalf={allowHalf}
                     value={hoverValue === undefined ? value : hoverValue}
-                    onClick={this.onClick}
-                    onHover={this.onHover}
+                    onClick={disabled ? noop : this.onClick}
+                    onHover={disabled ? noop : this.onHover}
                     key={ind}
                     disabled={disabled}
                     character={character}
                     focused={focused}
-                    size={size}
+                    size={ind === count ? 0 : size}
+                    ariaLabelPrefix={ariaLabelPrefix}
+                    onFocus={disabled || count !== ind ? noop : this.handleStarFocusVisible}
+                    onBlur={disabled || count !== ind ? noop : this.handleStarBlur}
                 />
             );
             if (tooltips) {
@@ -271,25 +305,36 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
             }
             return content;
         });
+        return itemList;
+    }
+
+    render() {
+        const { style, prefixCls, disabled, className, id, count, tabIndex } = this.props;
+        const { value, emptyStarFocusVisible } = this.state;
+        const ariaLabelPrefix = this.getAriaLabelPrefix();
+        const ariaLabel = `Rating: ${value} of ${count} ${ariaLabelPrefix}${value === 1 ? '' : 's'},`;
+        const itemList = this.getItemList(ariaLabelPrefix);
         const listCls = cls(
             prefixCls,
             {
                 [`${prefixCls}-disabled`]: disabled,
+                [`${prefixCls}-focus`]: emptyStarFocusVisible,
             },
             className
         );
         return (
-            <ul
-                aria-label={this.props['aria-label']}
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            <ul 
+                aria-label={ariaLabel}
                 aria-labelledby={this.props['aria-labelledby']}
                 aria-describedby={this.props['aria-describedby']}
                 className={listCls}
                 style={style}
-                onMouseLeave={disabled ? null : this.onMouseLeave}
+                onMouseLeave={disabled ? noop : this.onMouseLeave}
                 tabIndex={disabled ? -1 : tabIndex}
-                onFocus={disabled ? null : this.onFocus}
-                onBlur={disabled ? null : this.onBlur}
-                onKeyDown={disabled ? null : this.onKeyDown}
+                onFocus={disabled ? noop : this.onFocus}
+                onBlur={disabled ? noop : this.onBlur}
+                onKeyDown={disabled ? noop : this.onKeyDown}
                 ref={this.saveRate as any}
                 id={id}
             >

package/rating/item.tsx

@@ -1,14 +1,17 @@
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import { strings } from '@douyinfe/semi-foundation/rating/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/rating/constants';
 import '@douyinfe/semi-foundation/rating/rating.scss';
 import { IconStar } from '@douyinfe/semi-icons';
+import { RatingItemFoundation, RatingItemAdapter } from '@douyinfe/semi-foundation/rating/foundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
-export interface RatingItemProps {
+export interface RatingItemProps extends BaseProps {
     value: number;
     index: number;
     prefixCls: string;
@@ -19,11 +22,20 @@ export interface RatingItemProps {
     focused: boolean;
     disabled: boolean;
     count: number;
+    ariaLabelPrefix: string;
     size: number | ArrayElement<typeof strings.SIZE_SET>;
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    preventScroll?: boolean;
+}
+
+export interface RatingItemState {
+    firstStarFocus: boolean,
+    secondStarFocus: boolean,
 }
 
-export default class Item extends PureComponent<RatingItemProps> {
+export default class Item extends BaseComponent<RatingItemProps, RatingItemState>  {
     static propTypes = {
         value: PropTypes.number,
         index: PropTypes.number,
@@ -35,13 +47,47 @@ export default class Item extends PureComponent<RatingItemProps> {
         focused: PropTypes.bool,
         disabled: PropTypes.bool,
         count: PropTypes.number,
+        ariaLabelPrefix: PropTypes.string,
         size: PropTypes.oneOfType([
             PropTypes.oneOf(strings.SIZE_SET),
             PropTypes.number,
         ]),
         'aria-describedby': PropTypes.string,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
+    foundation: RatingItemFoundation;
+
+    constructor(props: RatingItemProps) {
+        super(props);
+        this.state = {
+            firstStarFocus: false,
+            secondStarFocus: false,
+        };
+        this.foundation = new RatingItemFoundation(this.adapter);
+    }
+
+    get adapter(): RatingItemAdapter<RatingItemProps, RatingItemState> {
+        return {
+            ...super.adapter,
+            setFirstStarFocus: (value) => {
+                this.setState({
+                    firstStarFocus: value,
+                });
+            },
+            setSecondStarFocus: (value) => {
+                this.setState({
+                    secondStarFocus: value,
+                });
+            }
+        };
+    }
+
+    firstStar: HTMLDivElement = null;
+    secondStar: HTMLDivElement = null;
+
     onHover: React.MouseEventHandler = e => {
         const { onHover, index } = this.props;
         onHover(e, index);
@@ -52,6 +98,19 @@ export default class Item extends PureComponent<RatingItemProps> {
         onClick(e, index);
     };
 
+    onFocus =  (e, star) => {
+        const { onFocus } = this.props;
+        onFocus && onFocus(e);
+        this.foundation.handleFocusVisible(e, star);
+    } 
+
+    onBlur =  (e, star) => {
+        const { onBlur } = this.props;
+        onBlur && onBlur(e);
+        this.foundation.handleBlur(e, star);
+    } 
+
+
     onKeyDown: React.KeyboardEventHandler = e => {
         const { onClick, index } = this.props;
         if (e.keyCode === 13) {
@@ -59,6 +118,23 @@ export default class Item extends PureComponent<RatingItemProps> {
         }
     };
 
+    starFocus = () => {
+        const { value, index, preventScroll } = this.props;
+        if (value - index === 0.5) {
+            this.firstStar.focus({ preventScroll });
+        } else {
+            this.secondStar.focus({ preventScroll });
+        }
+    }
+
+    saveFirstStar = (node: HTMLDivElement) => {
+        this.firstStar = node;
+    };
+
+    saveSecondStar = (node: HTMLDivElement) => {
+        this.secondStar = node;
+    };
+
     render() {
         const {
             index,
@@ -69,18 +145,18 @@ export default class Item extends PureComponent<RatingItemProps> {
             disabled,
             allowHalf,
             focused,
-            size
+            size,
+            ariaLabelPrefix,
         } = this.props;
+        const { firstStarFocus, secondStarFocus } = this.state;
         const starValue = index + 1;
         const diff = starValue - value;
-        const isFocused = value === 0 && index === 0 && focused;
         // const isHalf = allowHalf && value + 0.5 === starValue;
         const isHalf = allowHalf && diff < 1 && diff > 0;
-        const firstWidth = isHalf ? 1 - diff : 0.5;
+        const firstWidth = 1 - diff;
         const isFull = starValue <= value;
         const isCustomSize = typeof size === 'number';
         const starCls = cls(prefixCls, {
-            [`${prefixCls}-focused`]: isFocused,
             [`${prefixCls}-half`]: isHalf,
             [`${prefixCls}-full`]: isFull,
             [`${prefixCls}-${size}`]: !isCustomSize,
@@ -91,26 +167,65 @@ export default class Item extends PureComponent<RatingItemProps> {
             fontSize: size
         } : {};
         const iconSize = isCustomSize ? 'inherit' : (size === 'small' ? 'default' : 'extra-large');
-        const content = character ? character : <IconStar size={iconSize} />;
+        const content = character ? character : <IconStar size={iconSize} style={{ display: 'block' }}/>;
+        const isEmpty = index === count;
+        const starWrapCls = cls(`${prefixCls}-wrapper`,{
+            [`${prefixCls}-disabled`]: disabled,
+            [`${cssClasses.PREFIX}-focus`]: (firstStarFocus || secondStarFocus) && value !== 0,
+        });
+        const starWrapProps = {
+            onClick: disabled ? null : this.onClick ,
+            onKeyDown: disabled ? null : this.onKeyDown,
+            onMouseMove: disabled ? null : this.onHover,
+            className: starWrapCls,
+        };
+        const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
+        const firstStarProps = {
+            ref: this.saveFirstStar as any,
+            role:"radio",
+            'aria-checked': value === index + 0.5,
+            'aria-posinset': 2 * index + 1,
+            'aria-setsize': AriaSetSize,
+            'aria-disabled': disabled,
+            'aria-label': `${index + 0.5} ${ariaLabelPrefix}s`,
+            'aria-labelledby': this.props['aria-describedby'],
+            'aria-describedby': this.props['aria-describedby'],
+            className: cls(`${prefixCls}-first`,`${cssClasses.PREFIX}-no-focus`),
+            tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
+            onFocus: (e) => {
+                this.onFocus(e, 'first');
+            },
+            onBlur:(e) => {
+                this.onBlur(e, 'first');
+            },
+        };
+
+        const secondStarTabIndex = !disabled && ((value === index + 1) || (isEmpty && value === 0)) ? 0 : -1;
+        const secondStarProps = {
+            ref: this.saveSecondStar as any,
+            role:"radio",
+            'aria-checked': isEmpty ? value === 0 : value === index + 1,
+            'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
+            'aria-setsize': AriaSetSize, 
+            'aria-disabled': disabled,
+            'aria-label': `${isEmpty ? 0 : index + 1} ${ariaLabelPrefix}${index === 0 ? '' : 's'}`,
+            'aria-labelledby': this.props['aria-describedby'],
+            'aria-describedby': this.props['aria-describedby'],
+            className: cls(`${prefixCls}-second`,`${cssClasses.PREFIX}-no-focus`),
+            tabIndex: secondStarTabIndex,
+            onFocus: (e) => {
+                this.onFocus(e, 'second');
+            },
+            onBlur:(e) => {
+                this.onBlur(e, 'second');
+            },
+        };
+       
         return (
-            <li className={starCls} style={{ ...sizeStyle }}>
-                <div
-                    onClick={disabled ? null : this.onClick}
-                    onKeyDown={disabled ? null : this.onKeyDown}
-                    onMouseMove={disabled ? null : this.onHover}
-                    role="radio"
-                    aria-checked={value > index ? 'true' : 'false'}
-                    aria-posinset={index + 1}
-                    aria-setsize={count}
-                    aria-disabled={disabled}
-                    aria-label={`Rating ${index + (isHalf ? 0.5 : 1)}`}
-                    aria-labelledby={this.props['aria-describedby']} // screen reader will read labelledby instead of describedby
-                    aria-describedby={this.props['aria-describedby']}
-                    tabIndex={0}
-                    className={`${prefixCls}-wrapper`}
-                >
-                    <div className={`${prefixCls}-first`} style={{ width: `${firstWidth * 100}%` }}>{content}</div>
-                    <div className={`${prefixCls}-second`} x-semi-prop="character">{content}</div>
+            <li className={starCls} style={{ ...sizeStyle }} key={index} >
+                <div {...(starWrapProps as any)}>
+                    {allowHalf && !isEmpty && <div {...firstStarProps} style={{ width: `${firstWidth * 100}%` }}>{content}</div>}
+                    <div {...secondStarProps} x-semi-prop="character">{content}</div>
                 </div>
             </li>
         );

package/select/index.tsx

@@ -152,6 +152,7 @@ export type SelectProps = {
     onBlur?: (e: React.FocusEvent) => void;
     onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
+    preventScroll?: boolean;
 } & Pick<
 TooltipProps,
 | 'spacing'
@@ -271,6 +272,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         renderOptionItem: PropTypes.func,
         onListScroll: PropTypes.func,
         arrowIcon: PropTypes.node,
+        preventScroll: PropTypes.bool,
     // open: PropTypes.bool,
     // tagClosable: PropTypes.bool,
     };
@@ -396,8 +398,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 });
             },
             focusInput: () => {
+                const { preventScroll } = this.props;
                 if (this.inputRef && this.inputRef.current) {
-                    this.inputRef.current.focus();
+                    this.inputRef.current.focus({ preventScroll });
                 }
             },
         };
@@ -526,8 +529,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             },
             focusTrigger: () => {
                 try {
+                    const { preventScroll } = this.props;
                     const el = (this.triggerRef.current) as any;
-                    el.focus();
+                    el.focus({ preventScroll });
                 } catch (error) {
 
                 }

package/spin/icon.tsx

@@ -40,7 +40,7 @@ function Icon(props: IconProps = {}) {
                 </linearGradient>
             </defs>
             <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <rect fillOpacity="0.01" fill="#FFFFFF" x="0" y="0" width="36" height="36" />
+                <rect fillOpacity="0.01" fill="none" x="0" y="0" width="36" height="36" />
                 <path
                     d="M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951"
                     stroke={`url(#${id})`}

package/table/Body/index.tsx

@@ -423,7 +423,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
 
         const listStyle = {
             width: '100%',
-            height: y,
+            height: virtualizedData?.length ? y : 0,
             overflowX: 'auto',
             overflowY: 'auto',
         } as const;

package/table/_story/v2/FixedVirtualizedEmpty.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Table, Tag, Tooltip, Button } from '../../../index';
+
+export default function App() {
+    const [data, setData] = useState([]);
+
+    const loadData = () => {
+        if (Array.isArray(data) && data.length > 0) {
+            setData([]);
+            return;
+        }
+
+        const newData = [];
+        for (let i = 0; i < 10000; i++) {
+            const age = (i * 1000) % 149;
+            const name = `Edward King ${i}`;
+            newData.push({
+                key: '' + i,
+                name,
+                age,
+                address: `London, Park Lane no. ${i}`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+
+        setData(newData);
+    };
+
+    const scroll = { y: 600, x: 1600 };
+    const style = { width: 800 };
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'Code 45',
+                    value: '45',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            // width: 200,
+            dataIndex: 'address',
+        },
+        {
+            fixed: 'right' as const,
+            width: 250,
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+        },
+    ];
+    return (
+        <div>
+            <Button onClick={loadData}>load data</Button>
+            <Table pagination={false} columns={columns} dataSource={data} scroll={scroll} style={style} virtualized />
+        </div>
+    );
+}

package/table/_story/v2/index.js

@@ -6,4 +6,5 @@ export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
 export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
 export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
-export { default as RadioRowSelection } from './radioRowSelection';
+export { default as RadioRowSelection } from './radioRowSelection';
+export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';

package/tabs/index.tsx

@@ -48,6 +48,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
         type: PropTypes.oneOf(strings.TYPE_MAP),
         onTabClose: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps: TabsProps = {

package/tabs/interface.ts

@@ -36,6 +36,7 @@ export interface TabsProps {
     tabPosition?: TabPosition;
     type?: TabType;
     onTabClose?: (tabKey: string) => void;
+    preventScroll?: boolean;
 }
 
 export interface TabBarProps {

package/tag/index.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable no-unused-vars */
-/* eslint-disable max-len */
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -94,7 +92,7 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     handleKeyDown(event: any) {
-        const { closable, onClick } = this.props;
+        const { closable, onClick, onKeyDown } = this.props;
         switch (event.key) {
             case "Backspace":
             case "Delete":
@@ -111,6 +109,7 @@ export default class Tag extends Component<TagProps, TagState> {
             default:
                 break;
         }
+        onKeyDown && onKeyDown(event);
     }
 
     renderAvatar() {

package/tag/interface.ts

@@ -33,6 +33,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }