@douyinfe/semi-ui 2.9.1 → 2.10.0-beta.0

package/banner/_story/banner.stories.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Banner from '../index';
 import Button from '@douyinfe/semi-ui/button/index';
+import { Layout } from '@douyinfe/semi-ui';
+
 
 export default {
   title: 'Banner',
@@ -43,3 +45,62 @@ export const InContainerAndBordered = () => (
     <Button onClick={e => e.stopPropagation()}>test</Button>
   </Banner>
 );
+
+export const ShowAndHideBanner = () => {
+    const [visible, setVisible] = useState(false);
+    const changeVisible = () => {
+        setVisible(!visible);
+    };
+    const { Header, Footer, Content } = Layout;
+    const banner = (
+        <Banner 
+            onClose={changeVisible}
+            description="A pre-released version is available"
+        />
+    );
+
+    return (
+        <>
+            <Layout>
+                <Header>Header</Header>
+                {visible? banner : null}
+                <Content>Content</Content>
+                <Footer>Footer</Footer>
+            </Layout>
+            <Button
+                onClick={changeVisible}
+                style={{
+                    display: 'block',
+                    width: '120px',
+                    margin: '0 auto'
+                }}
+            >
+                { visible ? 'Hide Banner' : 'Show Banner' }
+            </Button>
+        </>
+    );
+};
+
+export const MultiTypeBanner = () => (
+    <>
+        <Banner 
+            type="info"
+            description="A pre-released version is available."
+        />
+        <br/>
+        <Banner 
+            type="warning"
+            description="This version of the document is going to expire after 4 days."
+        />
+        <br/>
+        <Banner 
+            type="danger"
+            description="This document was deprecated since Jan 1, 2019."
+        />
+        <br/>
+        <Banner 
+            type="success"
+            description="You are viewing the latest version of this document."
+        />
+    </>
+);

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 />}
+                icon={closeIcon || <IconClose aria-hidden={true}/>}
                 theme="borderless"
                 size="small"
                 type="tertiary"
@@ -122,10 +122,10 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
     renderIcon() {
         const { type, icon } = this.props;
         const iconMap = {
-            warning: <IconAlertTriangle size="large" />,
-            success: <IconTickCircle size="large" />,
-            info: <IconInfoCircle size="large" />,
-            danger: <IconAlertCircle size="large" />
+            warning: <IconAlertTriangle size="large" aria-label='warning'/>,
+            success: <IconTickCircle size="large" aria-label='success'/>,
+            info: <IconInfoCircle size="large" aria-label='info'/>,
+            danger: <IconAlertCircle size="large" aria-label='danger'/>
         };
         let iconType: React.ReactNode = iconMap[type];
         const iconCls = cls({

package/carousel/CarouselArrow.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { ReactNode } from "react";
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/carousel/constants';
+import { CarouselArrowProps } from "./interface";
+import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons";
+import { get, throttle } from 'lodash';
+
+class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
+    renderLeftIcon = () => {
+        return get(this.props, 'arrowProps.leftArrow.children', <IconChevronLeft aria-label="Previous index" size="inherit"/>);
+    }
+
+    renderRightIcon = () => {
+        return get(this.props, 'arrowProps.rightArrow.children', <IconChevronRight aria-label="Next index" size="inherit"/>);
+    }
+
+    render(): ReactNode {
+        const { type, theme, prev, next, timing } = this.props;
+        const classNames = cls( {
+            [cssClasses.CAROUSEL_ARROW]: true,
+            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
+            [`${cssClasses.CAROUSEL_ARROW}-hover`]: type === 'hover',
+        });
+
+        const leftClassNames = cls( {
+            [`${cssClasses.CAROUSEL_ARROW}-prev`]: true,
+            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
+        });
+
+        const rightClassNames = cls( {
+            [`${cssClasses.CAROUSEL_ARROW}-next`]: true,
+            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
+        });
+
+        return (
+            <div className={classNames}>
+                <div 
+                    // role='button'
+                    className={leftClassNames} 
+                    onClick={throttle(prev, timing)}
+                    {...get(this.props, 'arrowProps.leftArrow.props')}
+                >
+                    {this.renderLeftIcon()}
+                </div>
+                <div 
+                    // role='button'
+                    // tabIndex={0} 
+                    className={rightClassNames} 
+                    onClick={throttle(next, timing)}
+                    {...get(this.props, 'arrowProps.rightArrow.props')}
+                >
+                    {this.renderRightIcon()}
+                </div>
+            </div>
+        );
+    }
+
+}
+
+export default CarouselArrow;

package/carousel/CarouselIndicator.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { ReactNode } from "react";
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/carousel/constants';
+import { CarouselIndicatorProps } from "./interface";
+import getDataAttr from "@douyinfe/semi-foundation/utils/getDataAttr";
+import { throttle } from 'lodash';
+
+class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
+    static propTypes = {
+        activeKey: PropTypes.number,
+        className: PropTypes.string,
+        position: PropTypes.oneOf(strings.POSITION_MAP),
+        size: PropTypes.oneOf(strings.SIZE),
+        style: PropTypes.object,
+        theme: PropTypes.oneOf(strings.THEME_MAP),
+        total: PropTypes.number,
+        onIndicatorChange: PropTypes.func,
+        type: PropTypes.oneOf(strings.TYPE_MAP),
+        trigger: PropTypes.oneOf(strings.TRIGGER)
+    };
+
+    onIndicatorChange = (activeIndex: number): void => {
+        this.props.onIndicatorChange(activeIndex);
+    };
+
+    handleIndicatorClick = (activeIndex: number): void => {
+        const { trigger } = this.props;
+        if (trigger === 'click'){
+            this.onIndicatorChange(activeIndex);
+        }
+    }
+
+    handleIndicatorHover = (activeIndex: number): void => {
+        const { trigger } = this.props;
+        if (trigger === 'hover'){
+            this.onIndicatorChange(activeIndex);
+        }
+    }
+
+    renderIndicatorContent(): ReactNode {
+        const { total, theme, size, activeIndex } = this.props;
+        const indicatorContent: ReactNode[] = [];
+        for (let i = 0; i < total; i++) {
+            indicatorContent.push(
+                <span
+                    // role='none' 
+                    key={i}
+                    data-index={i}
+                    className={cls([`${cssClasses.CAROUSEL_INDICATOR}-item`], {
+                        [`${cssClasses.CAROUSEL_INDICATOR}-item-active`]: i === activeIndex,
+                        [`${cssClasses.CAROUSEL_INDICATOR}-item-${theme}`]: theme,
+                        [`${cssClasses.CAROUSEL_INDICATOR}-item-${size}`]: size,
+                    })}
+                    onClick={()=>this.handleIndicatorClick(i)}
+                    onMouseEnter={()=>this.handleIndicatorHover(i)}
+                ></span>
+            );
+        }
+        return indicatorContent;
+    }
+
+    render(): ReactNode {
+        const { type, size, theme, style, className, position, ...restProps } = this.props;
+        const classNames = cls(className, {
+            [cssClasses.CAROUSEL_INDICATOR]: true,
+            [`${cssClasses.CAROUSEL_INDICATOR}-${type}`]: type,
+            [`${cssClasses.CAROUSEL_INDICATOR}-${position}`]: position,
+        });
+
+        const indicatorContent = this.renderIndicatorContent();
+
+        return (
+            <div className={classNames} style={style} {...getDataAttr(restProps)}>
+                {indicatorContent}
+            </div>
+        );
+    }
+
+}
+
+export default CarouselIndicator;

package/carousel/__test__/carousel.test.js

@@ -0,0 +1,159 @@
+import { Carousel } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+
+function getCarousel(carouselProps) {
+    const contentStyle = {
+        display:'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#fff',
+        background: 'lightBlue',
+    };
+
+    return <Carousel style={{ width: '600px', height: '240px'}} {...carouselProps}>
+      <div style={contentStyle}>
+        <h3>index0</h3>
+      </div>
+      <div style={contentStyle}>
+        <h3>index1</h3>
+      </div>
+      <div style={contentStyle}>
+        <h3>index2</h3>
+      </div>
+    </Carousel>
+}
+
+function getSingleCarousel(carouselProps) {
+    const contentStyle = {
+        display:'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#fff',
+        background: 'lightBlue',
+    };
+
+    return <Carousel style={{ width: '600px', height: '240px'}} {...carouselProps}>
+      <div style={contentStyle}>
+        <h3>index0</h3>
+      </div>
+    </Carousel>
+}
+
+describe('Carousel', () => {
+
+    it('Carousel render basicly', () => {
+        let props = {};
+        const carousel = mount(getCarousel(props))
+        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content`).children().length).toEqual(3);
+        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index0');
+        carousel.unmount();
+    });
+
+    it('Carousel with custom className & style', () => {
+        let props = {
+            className: 'test',
+            style: {
+                color: 'red'
+            }
+        };
+        const carousel = shallow(getCarousel(props));
+        expect(carousel.exists('.test')).toEqual(true);
+        expect(carousel.find('div.test')).toHaveStyle('color', 'red');
+    });
+
+    it('Carousel with defaultActiveIndex', () => {
+        let props = {
+            defaultActiveIndex: 2
+        };
+        const carousel = mount(getCarousel(props));
+        const carouselContent = carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text();
+        expect(carouselContent).toEqual('index2');
+    });
+
+    it('different theme', () => {
+        let primary = mount(getCarousel({ theme: 'primary' }));
+        let light = mount(getCarousel({ theme: 'light' }));
+        let dark = mount(getCarousel({ theme: 'dark' }));
+        expect(primary.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-primary`)).toEqual(true);
+        expect(primary.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-primary`)).toEqual(true);
+        expect(light.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-light`)).toEqual(true);
+        expect(light.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-light`)).toEqual(true);
+        expect(dark.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-dark`)).toEqual(true);
+        expect(dark.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-dark`)).toEqual(true);
+    });
+
+    it('different indicator type', () => {
+        let dot = mount(getCarousel({ indicatorType: 'dot' }));
+        let line = mount(getCarousel({ indicatorType: 'line' }));
+        let columnar = mount(getCarousel({ indicatorType: 'columnar' }));
+        expect(dot.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-dot`)).toEqual(true);
+        expect(dot.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-line`)).toEqual(false);
+        expect(line.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-line`)).toEqual(true);
+        expect(line.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-columnar`)).toEqual(false);
+        expect(columnar.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-columnar`)).toEqual(true);
+        expect(columnar.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-dot`)).toEqual(false);
+    });
+
+    it('different indicator position', () => {
+        let left = mount(getCarousel({ indicatorPosition: 'left' }));
+        let center = mount(getCarousel({ indicatorPosition: 'center' }));
+        let right = mount(getCarousel({ indicatorPosition: 'right' }));
+        expect(left.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-left`)).toEqual(true);
+        expect(left.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-center`)).toEqual(false);
+        expect(center.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-center`)).toEqual(true);
+        expect(center.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-right`)).toEqual(false);
+        expect(right.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-right`)).toEqual(true);
+        expect(right.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-left`)).toEqual(false);
+    });
+
+    it('different indicator size', () => {
+        let small = mount(getCarousel({ indicatorSize: 'small' }));
+        let medium = mount(getCarousel({ indicatorSize: 'medium' }));
+        expect(small.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-small`)).toEqual(true);
+        expect(small.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-medium`)).toEqual(false);
+        expect(medium.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-medium`)).toEqual(true);
+        expect(medium.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-small`)).toEqual(false);
+    });
+
+    it('show arrow and arrow change', () => {
+        let spyOnChange = sinon.spy(() => {})
+        let show = mount(getCarousel({ onChange: spyOnChange }));
+        let hide = mount(getCarousel({ showArrow: false }));
+        let hover = mount(getCarousel({ arrowType: 'hover' }));
+
+        expect(show.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(true);
+        expect(hide.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(false);
+        expect(hover.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-hover`)).toEqual(true);
+
+        show.find(`.${BASE_CLASS_PREFIX}-carousel-arrow-prev`).simulate('click');
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(show.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
+
+        show.find(`.${BASE_CLASS_PREFIX}-carousel-arrow-next`).simulate('click');
+        expect(show.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index0');
+        
+    });
+
+    it('indicator change with click or trigger', () => {
+        let spyOnChange = sinon.spy(() => {})
+        let carousel = mount(getCarousel({ onChange: spyOnChange }));
+        carousel.find(`.${BASE_CLASS_PREFIX}-carousel-indicator-item`).at(2).simulate('click');
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
+
+        let spyOnChangeHover = sinon.spy(() => {})
+        let carouselHover = mount(getCarousel({ onChange: spyOnChangeHover, trigger: 'hover' }));
+        carouselHover.find(`.${BASE_CLASS_PREFIX}-carousel-indicator-item`).at(2).simulate('mouseEnter', {});
+        expect(spyOnChangeHover.calledOnce).toBe(true);
+        expect(carouselHover.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
+    });
+
+    it('single index', () => {
+        let carousel = mount(getSingleCarousel({}));
+        expect(carousel.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator`)).toEqual(false);
+        expect(carousel.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(false);
+        carousel.unmount();
+    });
+
+})