@para-ui/core 2.1.32 → 2.1.35

package/docs/view/buttonGroup/index.tsx

@@ -0,0 +1,93 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import ButtonGroup from 'src/ButtonGroup';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {iconBtnGroup, splitBtnGroup, textBtnGroup, disabledGroup, btnGroupSize} from './codeString';
+import apiData from './api';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+import './index.scss';
+
+//按钮组
+const ParaButtonGroup: FunctionComponent = () => {
+
+    const handleClick = (data: any, evt: any) => {
+        console.log('btn group click::::', data, evt);
+    };
+    return (
+        <div className={'paraui-buttonGroup-demo'}>
+            <Title name={'按钮组'}>代码演示</Title>
+            <CodeBox code={iconBtnGroup} title={'基本'} description={'最基本用法的按钮组'}>
+                <ButtonGroup showToolTip={true}
+                             data={[
+                                 {icon: <Search/>, text: '搜索'},
+                                 {icon: <Off/>, text: '退出'},
+                                 {icon: <Delete/>, text: '删除'}
+                             ]}
+                             onClick={handleClick}
+                />
+            </CodeBox>
+            <CodeBox code={btnGroupSize} title={'按钮尺寸'} description={'按钮有大、中、小三种尺寸'}>
+                <section className={'btn-size'}>
+                    <ButtonGroup showToolTip={true}
+                                 data={[
+                                     {icon: <Search/>, text: '搜索'},
+                                     {icon: <Off/>, text: '退出'},
+                                     {icon: <Delete/>, text: '删除'}
+                                 ]}
+                                 onClick={handleClick}
+                    />
+                    <ButtonGroup showToolTip={true}
+                                 data={[
+                                     {icon: <Search/>, text: '搜索', size: 'medium'},
+                                     {icon: <Off/>, text: '退出', size: 'medium'},
+                                     {icon: <Delete/>, text: '删除', size: 'medium'}
+                                 ]}
+                                 onClick={handleClick}
+                    />
+                    <ButtonGroup showToolTip={true}
+                                 data={[
+                                     {icon: <Search/>, text: '搜索', size: 'small'},
+                                     {icon: <Off/>, text: '退出', size: 'small'},
+                                     {icon: <Delete/>, text: '删除', size: 'small'}
+                                 ]}
+                                 onClick={handleClick}
+                    />
+                </section>
+            </CodeBox>
+            <CodeBox code={splitBtnGroup} title={'按钮分离'} description={'按钮分离式的按钮组'}>
+                <ButtonGroup mode={'iconSplit'}
+                             showToolTip={true}
+                             data={[
+                                 {icon: <Search/>, text: '搜索'},
+                                 {icon: <Off/>, text: '退出'},
+                                 {icon: <Delete/>, text: '删除'}
+                             ]}
+                />
+            </CodeBox>
+            <CodeBox code={textBtnGroup} title={'文本'} description={'文字按钮组'}>
+                <ButtonGroup mode={'text'}
+                             data={[
+                                 {icon: <Search/>, text: '搜索'},
+                                 {icon: <Off/>, text: '退出'},
+                                 {icon: <Delete/>, text: '删除'}
+                             ]}
+                />
+            </CodeBox>
+            <CodeBox code={disabledGroup} title={'不可用'} description={'添加 disabled 属性即可让按钮组处于不可用状态'}>
+                <ButtonGroup disabled
+                             data={[
+                                 {icon: <Search/>, text: '搜索'},
+                                 {icon: <Off/>, text: '退出'},
+                                 {icon: <Delete/>, text: '删除'}
+                             ]}
+                />
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaButtonGroup;

package/docs/view/carousel/api.tsx

@@ -0,0 +1,165 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description Carousel api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'autoplay',
+        desc: '是否自动切换',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'adaptiveHeight',
+        desc: '适应高度',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'dotPosition',
+        desc: '面板指示点位置，可选 top bottom left right',
+        type: 'string',
+        default: 'bottom'
+    },
+    {
+        name: 'dots',
+        desc: '是否显示面板指示点，如果为 object 则同时可以指定 dotsClass',
+        type: 'boolean | { className?: string }',
+        default: 'true'
+    },
+    {
+        name: 'easing',
+        desc: '动画效果',
+        type: 'string',
+        default: 'linear'
+    },
+    {
+        name: 'effect',
+        desc: '动画效果函数',
+        type: 'scrollx | fade',
+        default: 'scrollx'
+    },
+    {
+        name: 'arrows',
+        desc: '是否显示箭头',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'prevArrow',
+        desc: '自定义上一步箭头',
+        type: 'ReactNode'
+    },
+    {
+        name: 'nextArrow',
+        desc: '自定义下一步箭头',
+        type: 'ReactNode'
+    },
+    {
+        name: 'autoplaySpeed',
+        desc: '自动播放速度',
+        type: 'number',
+        default: '3000'
+    },
+    {
+        name: 'centerMode',
+        desc: '居中显示',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'centerPadding',
+        desc: '居中内边距',
+        type: 'string',
+        default: '50px'
+    },
+    {
+        name: 'centerPadding',
+        desc: '居中内边距',
+        type: 'string',
+        default: '50px'
+    },
+    {
+        name: 'focusOnSelect',
+        desc: '点击时播放',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'infinite',
+        desc: '无限循环',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'initialSlide',
+        desc: '第一次幻灯片下标',
+        type: 'number',
+        default: '0'
+    },
+    {
+        name: 'pauseOnDotsHover',
+        desc: '悬停在点上，阻止自动播放',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'pauseOnFocus',
+        desc: '聚焦时，阻止自动播放',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'pauseOnHover',
+        desc: '悬停在轨道上，阻止自动播放',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'slidesToScroll',
+        desc: '一次滚动多少次幻灯片',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'slidesToShow',
+        desc: '在一帧中显示多少次幻灯片',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'swipeToSlide',
+        desc: '拖动或滑动幻灯片',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'afterChange',
+        desc: '切换面板的回调',
+        type: 'function(current)'
+    },
+    {
+        name: 'beforeChange',
+        desc: '切换面板的回调',
+        type: 'function(from, to)'
+    },
+    {
+        name: 'onInit',
+        desc: `幻灯片初始化时回调`,
+        type: '()=>void'
+    }
+];
+export default apiData;

package/docs/view/carousel/codeString.tsx

@@ -0,0 +1,207 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicCarousel = `
+import Carousel from '@para-ui/core/Carousel';
+
+const contentStyle: React.CSSProperties = {
+    height: '160px',
+    color: '#fff',
+    lineHeight: '160px',
+    textAlign: 'center',
+    background: '#364d79'
+};
+
+const onBeforeChange = (a: number, b: number) => {
+    console.log('onBeforeChange:::', a, b);
+};
+
+const onAfterChange = (a: number) => {
+    console.log('onAfterChange:::', a);
+};
+
+<Carousel beforeChange={onBeforeChange} afterChange={onAfterChange}>
+    <div>
+        <h3 style={contentStyle}>1</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>2</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>3</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>4</h3>
+    </div>
+</Carousel>
+`;
+
+export const carouselPosition = `
+import Carousel from '@para-ui/core/Carousel';
+import RadioGroup from '@para-ui/core/RadioGroup';
+
+const [dotPosition, setDotPosition] = React.useState<any>('top');
+
+const contentStyle: React.CSSProperties = {
+    height: '160px',
+    color: '#fff',
+    lineHeight: '160px',
+    textAlign: 'center',
+    background: '#364d79'
+};
+
+const onPositionChange = (value: string) => {
+    setDotPosition(value);
+};
+
+<RadioGroup
+    list={[
+        {
+            label: 'top',
+            name: 'top'
+        },
+        {
+            label: 'bottom',
+            name: 'bottom'
+        },
+        {
+            label: 'left',
+            name: 'left'
+        },
+        {
+            label: 'right',
+            name: 'right'
+        }
+    ]}
+    onChange={onPositionChange}
+    value={dotPosition}
+/>
+<Carousel dotPosition={dotPosition}>
+    <div>
+        <h3 style={contentStyle}>1</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>2</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>3</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>4</h3>
+    </div>
+</Carousel>
+`;
+
+export const autoplayCarousel = `
+import Carousel from '@para-ui/core/Carousel';
+
+const contentStyle: React.CSSProperties = {
+    height: '160px',
+    color: '#fff',
+    lineHeight: '160px',
+    textAlign: 'center',
+    background: '#364d79'
+};
+
+<Carousel autoplay>
+    <div>
+        <h3 style={contentStyle}>1</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>2</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>3</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>4</h3>
+    </div>
+</Carousel>
+`;
+
+export const effectCarousel = `
+import Carousel from '@para-ui/core/Carousel';
+
+const contentStyle: React.CSSProperties = {
+    height: '160px',
+    color: '#fff',
+    lineHeight: '160px',
+    textAlign: 'center',
+    background: '#364d79'
+};
+
+<Carousel effect={'fade'}>
+    <div>
+        <h3 style={contentStyle}>1</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>2</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>3</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>4</h3>
+    </div>
+</Carousel>
+`;
+
+export const methodCarousel = `
+import Carousel from '@para-ui/core/Carousel';
+import Button from '@para-ui/core/Button';
+
+const carouselRef = React.useRef<any>();
+ 
+const contentStyle: React.CSSProperties = {
+    height: '160px',
+    color: '#fff',
+    lineHeight: '160px',
+    textAlign: 'center',
+    background: '#364d79'
+};
+
+const previous = () => {
+    carouselRef.current.prev();
+};
+const next = () => {
+    carouselRef.current.next();
+};
+const play = () => {
+    carouselRef.current.play();
+};
+const pause = () => {
+    carouselRef.current.pause();
+};
+
+<Carousel ref={carouselRef}>
+    <div>
+        <h3 style={contentStyle}>1</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>2</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>3</h3>
+    </div>
+    <div>
+        <h3 style={contentStyle}>4</h3>
+    </div>
+</Carousel>
+<div>
+    <Button onClick={previous}>
+        Previous
+    </Button>
+    <Button onClick={next}>
+        Next
+    </Button>
+    <Button onClick={play}>
+        Play
+    </Button>
+    <Button onClick={pause}>
+        Pause
+    </Button>
+</div>
+`;
+

package/docs/view/carousel/index.scss

@@ -0,0 +1,12 @@
+.paraui-carousel-demo {
+  .code-box-demo {
+    .btns {
+      margin-top: 20px;
+      text-align: center;
+
+      > button {
+        margin-right: 20px;
+      }
+    }
+  }
+}

package/docs/view/carousel/index.tsx

@@ -0,0 +1,174 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Carousel from 'src/Carousel';
+import RadioGroup from 'src/RadioGroup';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicCarousel, carouselPosition, autoplayCarousel, effectCarousel, methodCarousel} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//carousel
+const ParaCarousel: FunctionComponent = () => {
+    const [dotPosition, setDotPosition] = React.useState<any>('top');
+    const carouselRef = React.useRef<any>();
+    const contentStyle: any = {
+        height: '160px',
+        color: '#fff',
+        lineHeight: '160px',
+        textAlign: 'center',
+        background: '#364d79'
+    };
+
+    const onBeforeChange = (a: number, b: number) => {
+        console.log('onBeforeChange:::', a, b);
+    };
+
+    const onAfterChange = (a: number) => {
+        console.log('onAfterChange:::', a);
+    };
+
+    const onPositionChange = (value: string) => {
+        setDotPosition(value);
+    };
+
+    const previous = () => {
+        carouselRef.current.prev();
+    };
+    const next = () => {
+        carouselRef.current.next();
+    };
+    const play = () => {
+        carouselRef.current.play();
+    };
+    const pause = () => {
+        carouselRef.current.pause();
+    };
+
+    return (
+        <div className={'paraui-carousel-demo'}>
+            <Title name={'走马灯'}>代码演示</Title>
+            <CodeBox code={basicCarousel} title={'基本'} description={'最简单的用法。'}>
+                <Carousel beforeChange={onBeforeChange} afterChange={onAfterChange}>
+                    <div>
+                        <h3 style={contentStyle}>1</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>2</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>3</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>4</h3>
+                    </div>
+                </Carousel>
+            </CodeBox>
+            <CodeBox code={carouselPosition} title={'位置'} description={'位置有4个方向。'}>
+                <RadioGroup
+                    list={[
+                        {
+                            label: 'top',
+                            name: 'top'
+                        },
+                        {
+                            label: 'bottom',
+                            name: 'bottom'
+                        },
+                        {
+                            label: 'left',
+                            name: 'left'
+                        },
+                        {
+                            label: 'right',
+                            name: 'right'
+                        }
+                    ]}
+                    onChange={onPositionChange}
+                    value={dotPosition}
+                />
+                <Carousel dotPosition={dotPosition}>
+                    <div>
+                        <h3 style={contentStyle}>1</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>2</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>3</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>4</h3>
+                    </div>
+                </Carousel>
+            </CodeBox>
+            <CodeBox code={autoplayCarousel} title={'自动切换'} description={'定时切换下一张。'}>
+                <Carousel autoplay>
+                    <div>
+                        <h3 style={contentStyle}>1</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>2</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>3</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>4</h3>
+                    </div>
+                </Carousel>
+            </CodeBox>
+            <CodeBox code={effectCarousel} title={'渐显'} description={'切换效果为渐显。'}>
+                <Carousel effect={'fade'}>
+                    <div>
+                        <h3 style={contentStyle}>1</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>2</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>3</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>4</h3>
+                    </div>
+                </Carousel>
+            </CodeBox>
+            <CodeBox code={methodCarousel} title={'方法'} description={'提供一些简单的方法。'}>
+                <Carousel ref={carouselRef}>
+                    <div>
+                        <h3 style={contentStyle}>1</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>2</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>3</h3>
+                    </div>
+                    <div>
+                        <h3 style={contentStyle}>4</h3>
+                    </div>
+                </Carousel>
+                <div className={'btns'}>
+                    <Button onClick={previous}>
+                        Previous
+                    </Button>
+                    <Button onClick={next}>
+                        Next
+                    </Button>
+                    <Button onClick={play}>
+                        Play
+                    </Button>
+                    <Button onClick={pause}>
+                        Pause
+                    </Button>
+                </div>
+            </CodeBox>
+
+            <APITable data={apiData} link={'https://react-slick.neostack.com/docs/api'}/>
+        </div>
+    );
+};
+
+export default ParaCarousel;