@douyinfe/semi-ui 2.15.2-alpha.0 → 2.16.0-beta.0

package/slider/index.tsx

@@ -51,6 +51,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         showBoundary: PropTypes.bool,
         railStyle: PropTypes.object,
         verticalReverse: PropTypes.bool,
+        getAriaValueText: PropTypes.func,
     } as any;
 
     static defaultProps: Partial<SliderProps> = {
@@ -77,7 +78,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl: React.RefObject<HTMLDivElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
-    private chooseMovePos: 'min' | 'max';
     foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
@@ -98,14 +98,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             isDrag: false,
             clickValue: 0,
             showBoundary: false,
-            isInRenderTree: true
+            isInRenderTree: true,
+            firstDotFocusVisible: false,
+            secondDotFocusVisible: false,
         };
         this.sliderEl = React.createRef();
         this.minHanleEl = React.createRef();
         this.maxHanleEl = React.createRef();
         this.dragging = [false, false];
-        // this.chooseMovePos = 'min';
-        // this.isDrag = false;
         this.foundation = new SliderFoundation(this.adapter);
         this.eventListenerSet = new Set();
     }
@@ -165,7 +165,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             },
             getOverallVars: () => ({
                 dragging: this.dragging,
-                chooseMovePos: this.chooseMovePos,
             }),
             updateDisabled: (disabled: boolean) => {
                 this.setState({ disabled });
@@ -189,8 +188,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             getMinHandleEl: () => this.minHanleEl,
             getMaxHandleEl: () => this.maxHanleEl,
             onHandleDown: (e: React.MouseEvent) => {
-                e.stopPropagation();
-                e.preventDefault();
                 this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
                 this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
@@ -287,7 +284,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
 
     renderHandle = () => {
         const { vertical, range, tooltipVisible, tipFormatter, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValueText, getAriaValueText, disabled } = this.props;
-        const { chooseMovePos, isDrag, isInRenderTree } = this.state;
+        const { chooseMovePos, isDrag, isInRenderTree, firstDotFocusVisible, secondDotFocusVisible } = this.state;
         const stylePos = vertical ? 'top' : 'left';
         const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
         const minPercent = percentInfo.min;
@@ -307,7 +304,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         const { min, max, currentValue } = this.state;
 
         const commonAria = {
-            'aria-label': ariaLabel,
+            'aria-label': ariaLabel ?? (disabled ? 'Disabled Slider' : undefined),
             'aria-labelledby': ariaLabelledby,
             'aria-disabled': disabled
         };
@@ -319,7 +316,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 position="top"
                 trigger="custom"
                 rePosKey={minPercent}
-                visible={isInRenderTree && tipVisible.min}
+                visible={isInRenderTree && (tipVisible.min || firstDotFocusVisible)}
                 className={`${cssClasses.HANDLE}-tooltip`}
             >
                 <span
@@ -352,24 +349,32 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     onTouchEnd={e => {
                         this.foundation.onHandleUp(e);
                     }}
-                    onFocus={e => this.foundation.onFocus(e, 'min')}
+                    onKeyDown={(e)=>{
+                        this.foundation.handleKeyDown(e, 'min');
+                    }}
+                    onFocus={e => {
+                        this.foundation.onFocus(e, 'min');
+                    }}
+                    onBlur={(e) => { 
+                        this.foundation.onBlur(e, 'min');
+                    }}
                     role="slider"
-                    tabIndex={0}
+                    aria-valuetext={getAriaValueText ? getAriaValueText(currentValue as number, 0) : ariaValueText}
+                    tabIndex={disabled ? -1 : 0}
                     {...commonAria}
                     aria-valuenow={currentValue as number}
                     aria-valuemax={max}
                     aria-valuemin={min}
-                    aria-valuetext={getAriaValueText ? getAriaValueText(currentValue as number) : ariaValueText}
                 />
             </Tooltip>
         ) : (
             <React.Fragment>
-                <Tooltip
+                <Tooltip    
                     content={tipChildren.min}
                     position="top"
                     trigger="custom"
                     rePosKey={minPercent}
-                    visible={isInRenderTree && tipVisible.min}
+                    visible={isInRenderTree && (tipVisible.min || firstDotFocusVisible)}
                     className={`${cssClasses.HANDLE}-tooltip`}
                 >
                     <span
@@ -401,12 +406,20 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
-                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        onKeyDown={(e)=>{
+                            this.foundation.handleKeyDown(e, 'min');
+                        }}
+                        onFocus={e => {
+                            this.foundation.onFocus(e, 'min');
+                        }}
+                        onBlur={(e) => { 
+                            this.foundation.onBlur(e, 'min');
+                        }}
                         role="slider"
-                        tabIndex={0}
+                        tabIndex={disabled ? -1 : 0}
                         {...commonAria}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[0], 0) : ariaValueText}
                         aria-valuenow={currentValue[0]}
-                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText}
                         aria-valuemax={currentValue[1]}
                         aria-valuemin={min}
                     />
@@ -416,7 +429,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     position="top"
                     trigger="custom"
                     rePosKey={maxPercent}
-                    visible={isInRenderTree && tipVisible.max}
+                    visible={isInRenderTree && (tipVisible.max || secondDotFocusVisible)}
                     className={`${cssClasses.HANDLE}-tooltip`}
                 >
                     <span
@@ -448,12 +461,20 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
-                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        onKeyDown={e =>{
+                            this.foundation.handleKeyDown(e, 'max');
+                        }}
+                        onFocus={e =>  {
+                            this.foundation.onFocus(e, 'max');
+                        }}
+                        onBlur={(e) => {
+                            this.foundation.onBlur(e, 'max');
+                        }}
                         role="slider"
-                        tabIndex={0}
+                        tabIndex={disabled ? -1 : 0}
                         {...commonAria}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[1], 1) : ariaValueText}
                         aria-valuenow={currentValue[1]}
-                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText}
                         aria-valuemax={max}
                         aria-valuemin={currentValue[0]}
                     />
@@ -538,29 +559,38 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         return labelContent;
     };
 
+    _getAriaValueText = (value: number, index?: number) => {
+        const { getAriaValueText } = this.props;
+        return getAriaValueText ? getAriaValueText(value, index) : value;
+    }
+
 
     render() {
+        const { disabled, currentValue, min, max  } = this.state;
+        const { vertical, verticalReverse, style, railStyle, range, className } = this.props;
         const wrapperClass = cls(
             `${prefixCls}-wrapper`,
             {
-                [`${prefixCls}-disabled`]: this.state.disabled,
-                [`${cssClasses.VERTICAL}-wrapper`]: this.props.vertical,
-                [`${prefixCls}-reverse`]: this.props.vertical && this.props.verticalReverse
+                [`${prefixCls}-disabled`]: disabled,
+                [`${cssClasses.VERTICAL}-wrapper`]: vertical,
+                [`${prefixCls}-reverse`]: vertical && verticalReverse
             },
-            this.props.className
+            className
         );
         const boundaryClass = cls(`${prefixCls}-boundary`, {
             [`${prefixCls}-boundary-show`]: this.props.showBoundary && this.state.showBoundary,
         });
         const sliderCls = cls({
-            [`${prefixCls}`]: !this.props.vertical,
-            [cssClasses.VERTICAL]: this.props.vertical,
+            [`${prefixCls}`]: !vertical,
+            [cssClasses.VERTICAL]: vertical,
         });
+        const ariaLabel = range ? `Range: ${this._getAriaValueText(currentValue[0], 0)} to ${this._getAriaValueText(currentValue[1], 1)}` : undefined;
         const slider = (
             <div
                 className={wrapperClass}
-                style={this.props.style}
+                style={style}
                 ref={this.sliderEl}
+                aria-label={ariaLabel}
                 onMouseEnter={() => this.foundation.handleWrapperEnter()}
                 onMouseLeave={() => this.foundation.handleWrapperLeave()}
             >
@@ -568,7 +598,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     <div
                         className={`${prefixCls}-rail`}
                         onClick={this.foundation.handleWrapClick}
-                        style={this.props.railStyle}
+                        style={railStyle}
                     />
                 }
                 {this.renderTrack()}
@@ -576,12 +606,12 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 <div>{this.renderHandle()}</div>
                 {this.renderLabel()}
                 <div className={boundaryClass}>
-                    <span className={`${prefixCls}-boundary-min`}>{this.state.min}</span>
-                    <span className={`${prefixCls}-boundary-max`}>{this.state.max}</span>
+                    <span className={`${prefixCls}-boundary-min`}>{min}</span>
+                    <span className={`${prefixCls}-boundary-max`}>{max}</span>
                 </div>
             </div>
         );
-        if (!this.props.vertical) {
+        if (!vertical) {
             return <div className={sliderCls}>{slider}</div>;
         }
         return slider;

package/transfer/_story/transfer.stories.js

@@ -166,6 +166,35 @@ TransferDraggable.story = {
   name: 'Transfer draggable',
 };
 
+export const TransferDraggableAndDisabled = () => {
+  const data = Array.from({ length: 30 }, (v, i) => {
+      return {
+          label: `选项名称 ${i}`,
+          value: i,
+          key: i,
+          disabled: true,
+      };
+  });
+  return (
+    <>
+      <div>Transfer设置draggable, 并且左侧面板中的选项disabled </div>
+      <div>符合预期的行为： 右侧面板hover不会出现删除按钮，因此不可以点击删除，但是可以拖拽 </div>
+      <Transfer
+          style={{ width: 568, height: 416 }}
+          dataSource={data}
+          defaultValue={[2, 4]}
+          draggable
+          onChange={(values, items) => console.log(values, items)}
+      />
+    </>
+  );
+};
+
+TransferDraggableAndDisabled.story = {
+  name: 'transfer draggable and disabled',
+}
+
+
 const ControledTransfer = () => {
   const [value, setValue] = useState([2, 3]);
 

package/transfer/index.tsx

@@ -102,6 +102,12 @@ export interface ResolvedDataItem extends DataItem {
     _optionKey?: string | number;
 }
 
+export interface DraggableResolvedDataItem {
+    key?: string | number;
+    index?: number;
+    item?: ResolvedDataItem;
+}
+
 export type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
 
 interface HeaderConfig {
@@ -511,12 +517,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     renderRightItem(item: ResolvedDataItem): React.ReactNode {
         const { renderSelectedItem, draggable, type, showPath } = this.props;
-        let newItem = item;
-        if (draggable) {
-            newItem = { ...item, key: item._optionKey };
-            delete newItem._optionKey;
-        }
-        const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
+        const onRemove = () => this.foundation.handleSelectOrRemove(item);
         const rightItemCls = cls({
             [`${prefixcls}-item`]: true,
             [`${prefixcls}-right-item`]: true,
@@ -536,7 +537,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
         return (
             // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-            <div role="listitem" className={rightItemCls} key={newItem.key}>
+            <div role="listitem" className={rightItemCls} key={item.key}>
                 {draggable ? <DragHandle /> : null}
                 <div className={`${prefixcls}-right-item-text`}>{label}</div>
                 <IconClose
@@ -562,14 +563,13 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderRightSortableList(selectedData: Array<ResolvedDataItem>) {
         // when choose some items && draggable is true
         const SortableItem = SortableElement((
-            (item: ResolvedDataItem) => this.renderRightItem(item)) as React.FC<ResolvedDataItem>
+            (props: DraggableResolvedDataItem) => this.renderRightItem(props.item)) as React.FC<DraggableResolvedDataItem>
         );
         const SortableList = SortableContainer(({ items }: { items: Array<ResolvedDataItem> }) => (
             <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
                 {items.map((item, index: number) => (
-                    // sortableElement will take over the property 'key', so use another '_optionKey' to pass
                     // @ts-ignore skip SortableItem type check
-                    <SortableItem key={item.label} index={index} {...item} _optionKey={item.key} />
+                    <SortableItem key={item.label} index={index} item={item} />
                 ))}
             </div>
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/typography/_story/typography.stories.js

@@ -3,7 +3,7 @@ import withPropsCombinations from 'react-storybook-addon-props-combinations';
 
 import Icon from '../../icons';
 import Typography from '../index';
-import { IconLink, IconTick } from '@douyinfe/semi-icons';
+import { IconLink, IconTick, IconPlusCircle } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Typography'
@@ -51,10 +51,22 @@ export const _Text = () => (
     <br />
     <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
     <br />
+    {/* 用户未通过icon API设置icon，而是通过children传入，则需要手动处理内容的对齐 */}
     <Text link>
-      <IconLink />
-      网页链接
+      <span style={ {display: 'inline-flex', alignItems: 'center' }}  >
+        <IconLink style={{ marginRight: 4 }}/>
+        网页链接
+      </span>
     </Text>
+    <br />
+    <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
+    <br />
+    <Text icon={<IconLink />} underline>带下划线的内容</Text>
+    <br />
+    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}}>添加条件</Text>
+    <br />
+    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}} size={'small'}>添加条件</Text>
+    <br />
   </div>
 );
 

package/typography/base.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -54,15 +54,15 @@ const prefixCls = cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
 
 const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode) => {
-    const { mark, code, underline, strong, link, disabled } = props;
+    const { mark, code, underline, strong, link, disabled, icon, } = props;
     let wrapped = content;
     const wrap = (isNeeded: boolean | LinkType, tag: string) => {
-        let wrapProps = {};
+        let wrapProps = icon ? { style: { display: 'inline-flex', alignItems: 'center' } } : {};
         if (!isNeeded) {
             return;
         }
         if (typeof isNeeded === 'object') {
-            wrapProps = { ...isNeeded };
+            wrapProps = { ...isNeeded } as any;
         }
         wrapped = React.createElement(tag, wrapProps, wrapped);
     };
@@ -72,6 +72,11 @@ const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode
     wrap(strong, 'strong');
     wrap(props.delete, 'del');
     wrap(link, disabled ? 'span' : 'a');
+    // When the content is not wrapped, and there is more than one element in the content (one of which is an icon), 
+    // use span to wrap the content, so that the content in the span is vertically aligned
+    if (wrapped === content && icon) {
+        wrap(true, 'span');
+    }
     return wrapped;
 };
 

package/typography/text.tsx

@@ -4,9 +4,13 @@ import { strings } from '@douyinfe/semi-foundation/typography/constants';
 import Base from './base';
 import { Ellipsis, TypographyBaseSize, TypographyBaseType, OmitTypographyProps } from './interface';
 import { CopyableConfig, LinkType } from './title';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/typography/constants';
 
 type OmitTextProps = OmitTypographyProps;
 
+const prefixCls = cssClasses.PREFIX;
+
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitTextProps> {
     children?: React.ReactNode;
     className?: string;
@@ -63,6 +67,10 @@ export default class Text extends PureComponent<TextProps> {
     };
 
     render() {
-        return <Base component={'span'} {...this.props} />;
+        const className = cls(this.props.className, {
+            [`${prefixCls}-text`]: true,
+            [`${prefixCls}-text-icon`]: this.props.icon,
+        });
+        return <Base component={'span'} {...this.props} className={className} />;
     }
 }