@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/popover/_story/popover.stories.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-
-import Popover from '../index';
-import Button from '../../button';
-
-const stories = storiesOf('popover', module);
-
-const POSITION_SET:string[] = [
-    'top',
-    'topLeft',
-    'topRight',
-    'left',
-    'leftTop',
-    'leftBottom',
-    'right',
-    'rightTop',
-    'rightBottom',
-    'bottom',
-    'bottomLeft',
-    'bottomRight',
-    'leftTopOver',
-    'rightTopOver',
-]
-
-stories.add('positions', () => (
-    <div
-        style={{
-            width: 480,
-            height: 360,
-            boxSizing: 'content-box',
-            padding: '150px 250px',
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
-        }}
-    >
-        {POSITION_SET.map((pos:any) => (
-            <Popover
-                key={pos}
-                content={
-                    <div style={{ padding: 20 }}>
-                        <p>Hi Bytedancer!</p>
-                    </div>
-                }
-                trigger="click"
-                position={pos}
-            >
-                <Button key={pos}>{pos}</Button>
-            </Popover>
-        ))}
-    </div>
-));

package/popover/index.tsx

@@ -1,182 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import ConfigContext, { ContextValue } from '../configProvider/context';
-import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/popover/constants';
-import Tooltip, { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
-import Arrow from './Arrow';
-import '@douyinfe/semi-foundation/popover/popover.scss';
-import { BaseProps } from '../_base/baseComponent';
-import { Motion } from '../_base/base';
-import { isFunction, noop } from 'lodash';
-
-export { ArrowProps } from './Arrow';
-declare interface ArrowStyle {
-    borderColor?: string;
-    backgroundColor?: string;
-    borderOpacity?: string | number;
-}
-
-export interface PopoverProps extends BaseProps {
-    children?: React.ReactNode;
-    content?: TooltipProps['content'];
-    visible?: boolean;
-    autoAdjustOverflow?: boolean;
-    motion?: Motion;
-    position?: Position;
-    mouseEnterDelay?: number;
-    mouseLeaveDelay?: number;
-    trigger?: Trigger;
-    contentClassName?: string | any[];
-    onVisibleChange?: (visible: boolean) => void;
-    onClickOutSide?: (e: React.MouseEvent) => void;
-    showArrow?: boolean;
-    spacing?: number;
-    stopPropagation?: boolean | string;
-    arrowStyle?: ArrowStyle;
-    arrowBounding?: ArrowBounding;
-    arrowPointAtCenter?: boolean;
-    prefixCls?: string;
-    rePosKey?: string | number;
-    getPopupContainer?: () => HTMLElement;
-    zIndex?: number;
-    closeOnEsc?: TooltipProps['closeOnEsc'];
-    guardFocus?: TooltipProps['guardFocus'];
-    returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
-    onEscKeyDown?: TooltipProps['onEscKeyDown'];
-    clickToHide?:TooltipProps['clickToHide'];
-    disableFocusListener?: boolean
-}
-
-export interface PopoverState {
-    popConfirmVisible: boolean;
-}
-const positionSet = strings.POSITION_SET;
-const triggerSet = strings.TRIGGER_SET;
-
-class Popover extends React.PureComponent<PopoverProps, PopoverState> {
-    static contextType = ConfigContext;
-    static propTypes = {
-        children: PropTypes.node,
-        content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-        visible: PropTypes.bool,
-        autoAdjustOverflow: PropTypes.bool,
-        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
-        position: PropTypes.oneOf(positionSet),
-        // getPopupContainer: PropTypes.func,
-        mouseEnterDelay: PropTypes.number,
-        mouseLeaveDelay: PropTypes.number,
-        trigger: PropTypes.oneOf(triggerSet).isRequired,
-        contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-        onVisibleChange: PropTypes.func,
-        onClickOutSide: PropTypes.func,
-        style: PropTypes.object,
-        spacing: PropTypes.number,
-        zIndex: PropTypes.number,
-        showArrow: PropTypes.bool,
-        arrowStyle: PropTypes.shape({
-            borderColor: PropTypes.string,
-            backgroundColor: PropTypes.string,
-            borderOpacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        }),
-        arrowPointAtCenter: PropTypes.bool,
-        arrowBounding: PropTypes.object,
-        prefixCls: PropTypes.string,
-        guardFocus: PropTypes.bool,
-        disableArrowKeyDown: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        arrowBounding: numbers.ARROW_BOUNDING,
-        showArrow: false,
-        autoAdjustOverflow: true,
-        zIndex: numbers.DEFAULT_Z_INDEX,
-        motion: true,
-        trigger: 'hover',
-        cancelText: 'No',
-        okText: 'Yes',
-        position: 'bottom',
-        prefixCls: cssClasses.PREFIX,
-        onClickOutSide: noop,
-        onEscKeyDown: noop,
-        closeOnEsc: true,
-        returnFocusOnClose: true,
-        guardFocus: true,
-        disableFocusListener: true
-    };
-
-    context: ContextValue;
-
-    renderPopCard = ({ initialFocusRef }: { initialFocusRef: RenderContentProps['initialFocusRef'] }) => {
-        const { content, contentClassName, prefixCls } = this.props;
-        const { direction } = this.context;
-        const popCardCls = classNames(
-            prefixCls,
-            contentClassName,
-            {
-                [`${prefixCls}-rtl`]: direction === 'rtl',
-            }
-        );
-        const contentNode = this.renderContentNode({ initialFocusRef, content });
-        return (
-            <div className={popCardCls}>
-                <div className={`${prefixCls}-content`}>{contentNode}</div>
-            </div>
-        );
-    }
-
-    renderContentNode = (props: { content: TooltipProps['content'], initialFocusRef: RenderContentProps['initialFocusRef'] }) => {
-        const { initialFocusRef, content } = props;
-        const contentProps = { initialFocusRef };
-        return !isFunction(content) ? content : content(contentProps);
-    };
-
-    render() {
-        const {
-            children,
-            prefixCls,
-            showArrow,
-            arrowStyle = {},
-            arrowBounding,
-            position,
-            style,
-            trigger,
-            ...attr
-        } = this.props;
-        let { spacing } = this.props;
-
-        const arrowProps = {
-            position,
-            className: '',
-            popStyle: style,
-            arrowStyle,
-        };
-
-        const arrow = showArrow ? <Arrow {...arrowProps} /> : false;
-
-        if (typeof spacing !== 'number') {
-            spacing = showArrow ? numbers.SPACING_WITH_ARROW : numbers.SPACING;
-        }
-
-        const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
-
-        return (
-            <Tooltip
-                guardFocus
-                {...(attr as any)}
-                trigger={trigger}
-                position={position}
-                style={style}
-                content={this.renderPopCard}
-                prefixCls={prefixCls}
-                spacing={spacing}
-                showArrow={arrow}
-                arrowBounding={arrowBounding}
-                role={role}
-            >
-                {children}
-            </Tooltip>
-        );
-    }
-}
-export default Popover;

package/progress/__test__/progress.test.js

@@ -1,127 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-import Progress from '../index';
-
-const getProgress = (props = {}) => mount(<Progress {...props} />);
-
-describe('Progress', () => {
-
-    it('percent pass invalid value like NaN', () => {
-        const p = getProgress({ percent: 30 });
-        function testNaN() {
-            p.setProps({ percent: NaN });
-        }
-        expect(testNaN).toThrow('');
-    });
-
-    it('render successfully', () => {
-        const p = getProgress();
-        const node = p.find(`.${BASE_CLASS_PREFIX}-progress`);
-        expect(node.length).toEqual(1);
-    });
-    it('render circle progress', () => {
-        const p = getProgress({ type: 'circle' });
-        const node = p.find(`svg.${BASE_CLASS_PREFIX}-progress-circle-ring`);
-        expect(node.length).toEqual(1);
-    });
-    it('process change success', () => {
-        const p = getProgress({ type: 'circle', percent: 30 });
-        p.setProps({ percent: 50 });
-        const percentNumber = p.state('percentNumber');
-        setTimeout(() => {
-            expect(percentNumber).toEqual(50);
-        }, 500);
-    });
-
-
-    it('classname & style', () => {
-        const p = getProgress({ className: 'test', color: 'red' });
-        const node = p.find(`.${BASE_CLASS_PREFIX}-progress`);
-        expect(node.length).toEqual(1);
-    });
-    it('showInfo', () => {
-        const p = getProgress({ showInfo: true, percent: 50 });
-        expect(p.exists('.semi-progress-line-text')).toEqual(true);
-    });
-
-    it('stroke & size & orbitStroke', () => {
-        let props = {
-            stroke: '#fc8800',
-            size: 'small',
-            orbitStroke: '#f93920'
-        };
-        const p = getProgress(props);
-        expect(p.exists('.semi-progress-large'))
-    });
-
-    it('direction', () => {
-        const p = getProgress({ direction: 'vertical' });
-        expect(p.exists('.semi-progress-vertical')).toEqual(true);
-    });
-
-    it('format', () => {
-        let props = {
-            percent: 70,
-            showInfo: true,
-            format: () => 'semi',
-            type: 'circle',
-        };
-        const p = getProgress(props);
-        expect(p.find('.semi-progress-circle-text').text()).toEqual('semi');
-    });
-
-    it('strokeLinecap & strokeWidth', () => {
-        let props = {
-            percent: 70,
-            strokeLinecap: 'square',
-            type: 'circle',
-            strokeWidth: 10,
-        };
-        const p = getProgress(props);
-        let firstCircle = p.find('circle').at(0).getDOMNode();
-        expect(firstCircle.getAttribute('stroke-linecap')).toEqual('square');
-        expect(firstCircle.getAttribute('stroke-width')).toEqual('10');
-    });
-
-    it('width', () => {
-        let props = {
-            width: 120,
-            type: 'circle'
-        }
-        const p = getProgress(props);
-        let svgRing = p.find('.semi-progress-circle-ring').at(0).getDOMNode();
-        expect(svgRing.getAttribute('width')).toEqual('120');
-    });
-
-    it('motion = false', () => {
-        let props = {
-            motion: false,
-            percent: 70,
-            showInfo: true
-        }
-        const p = getProgress(props);
-        expect(p.find('.semi-progress-line-text').text()).toEqual('70%');
-        p.setProps({ percent: 80 });
-        p.update();
-        expect(p.find('.semi-progress-line-text').text()).toEqual('80%');
-        p.unmount();
-    });
-
-    it('pass invalid percent like 101, -1', () => {
-        let props = {
-            percent: 101,
-            showInfo: true,
-        };
-        const p = getProgress(props);
-        expect(p.find('.semi-progress-line-text').text()).toEqual('100%');
-
-        let minProps = {
-            percent: -2,
-            showInfo: true,
-        };
-        const minp = getProgress(minProps);
-        expect(minp.find('.semi-progress-line-text').text()).toEqual('0%');
-    });
-});
-

package/progress/_story/progress.stories.js

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { Progress, IconButton } from '../../index';
-
-export default {
-  title: 'Progress'
-}
-
-export const _Progress = () => (
-  <div style={{ width: 200 }}>
-    {/* <Progress percent={10} style= {{ height: 10 }}/> */}
-    <Progress percent={25} aria-label="disk usage"/>
-    <Progress percent={50} aria-label="disk usage"/>
-    <Progress percent={80} aria-label="disk usage"/>
-  </div>
-);
-
-_Progress.story = {
-  name: 'progress',
-};
-
-export const Vertical = () => (
-  <div style={{ height: 200 }}>
-    <Progress percent={10} direction="vertical" style={{ width: 10 }} aria-label="disk usage"/>
-    <Progress percent={25} direction="vertical" aria-label="disk usage"/>
-    <Progress percent={50} direction="vertical" aria-label="disk usage"/>
-    <Progress percent={80} direction="vertical" aria-label="disk usage"/>
-  </div>
-);
-
-Vertical.story = {
-  name: 'vertical',
-};
-
-export const CircleProgress = () => (
-  <React.Fragment>
-    <Progress percent={10} type="circle" aria-label="disk usage"/>
-    <Progress percent={25} type="circle" aria-label="disk usage"/>
-    <Progress percent={50} type="circle" aria-label="disk usage"/>
-    <Progress percent={80} type="circle" aria-label="disk usage"/>
-  </React.Fragment>
-);
-
-CircleProgress.story = {
-  name: 'circle progress',
-};
-
-export const CircleProgressSmall = () => (
-  <React.Fragment>
-    <Progress percent={10} type="circle" size="small" aria-label="disk usage"/>
-    <Progress percent={25} type="circle" size="small" aria-label="disk usage"/>
-    <Progress percent={50} type="circle" size="small" aria-label="disk usage"/>
-    <Progress percent={80} type="circle" size="small" aria-label="disk usage"/>
-  </React.Fragment>
-);
-
-CircleProgressSmall.story = {
-  name: 'circle progress small',
-};
-
-export const ProgressShowInfo = () => (
-  <div style={{ width: 200 }}>
-    {/* <Progress percent={10} style= {{ height: 10 }}/> */}
-    <Progress percent={25} showInfo aria-label="disk usage"/>
-    <Progress percent={50} showInfo aria-label="disk usage"/>
-    <Progress percent={80} showInfo aria-label="disk usage"/>
-  </div>
-);
-
-ProgressShowInfo.story = {
-  name: 'progress showInfo',
-};

package/progress/_story/progress.stories.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Progress from '../index';
-
-const stories = storiesOf('Progress', module);
-
-stories.add('Progress default', () => (
-    <>
-        <Progress direction='horizontal' percent={50} />
-    </>
-));