@para-ui/core 2.1.35 → 2.1.38

package/docs/view/carousel/api.tsx

@@ -1,165 +0,0 @@
-/**
- * @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

@@ -1,207 +0,0 @@
-/**
- * @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

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

package/docs/view/carousel/index.tsx

@@ -1,174 +0,0 @@
-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;

package/docs/view/cascader/api.tsx

@@ -1,116 +0,0 @@
-/**
- * @author linhd
- * @date 2022/2/14 2:04 PM
- * @description api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'data',
-        desc: '数据源',
-        type: 'Option[]'
-    },
-    {
-        name: 'value',
-        desc: '选中的值',
-        type: 'string[]'
-    },
-    {
-        name: 'onChange',
-        desc: '选中的值改变时的回调',
-        type: '(value: string[],selectedOptions: Option[]) => void'
-    },
-    {
-        name: 'onDropdownVisibleChange',
-        desc: '弹出层显示状态改变时的回调',
-        type: '(visible: boolean) => void'
-    },
-    {
-        name: 'changeOnSelect',
-        desc: '是否在选中时发生改变',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'expandTrigger',
-        desc: '展开时触发的方式',
-        type: 'click | hover',
-        default: 'click'
-    },
-    {
-        name: 'expandIcon',
-        desc: '展开图标',
-        type: 'React.ReactNode',
-        default: '<Right/>'
-    },
-    {
-        name: 'loadingIcon',
-        desc: '加载图标',
-        type: 'React.ReactNode'
-    },
-    {
-        name: 'expandJoin',
-        desc: '展开时的连接符',
-        type: 'String',
-        default: ' , '
-    },
-    {
-        name: 'fieldNames',
-        desc: '字段名称',
-        type: 'Object',
-        default: '{ label: \'label\', value: \'value\', children: \'children\' }'
-    },
-    {
-        name: 'disabled',
-        desc: '是否禁用',
-        type: 'Boolean',
-        default: 'false'
-    },
-    {
-        name: 'placeholder',
-        desc: '占位符',
-        type: 'String',
-        default: '请选择'
-    },
-    {
-        name: 'loadData',
-        desc: '加载数据的方法',
-        type: '(selectedOptions: Option[],setState?: React.Dispatch<React.SetStateAction<Option[]>>) => void'
-    }
-];
-
-export const apiOptionData: RowsData = [
-    {
-        name: 'label',
-        desc: '选项',
-        type: 'string'
-    },
-    {
-        name: 'value',
-        desc: '选中的值',
-        type: 'string'
-    },
-    {
-        name: 'disabled',
-        desc: '是否禁用',
-        type: 'boolean'
-    },
-    {
-        name: 'children',
-        desc: '子选项',
-        type: 'Option[]'
-    },
-    {
-        name: 'loading',
-        desc: '是否加载中',
-        type: 'boolean'
-    },
-    {
-        name: 'isLeaf',
-        desc: '是否叶子节点',
-        type: 'boolean'
-    }
-];
-
-export default apiData;