@cloudbase/weda-ui 3.3.0 → 3.3.1

package/dist/web/components/carousel/index.js

@@ -1,244 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
-import classNames from '../../utils/classnames';
-import Swipe from 'react-easy-swipe';
-import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
-import './index.css';
-import Image from '../image';
-import { emptyObject } from '../../utils/constant';
-export default function Carousel({ className, style, autoplay, circular, vertical, indicatorDots, indicatorColor, indicatorActiveColor, duration, interval, current, events = emptyObject, id, images, }) {
-    const itemCount = images.length;
-    current = Math.max(0, Math.min(itemCount - 1, current));
-    const [currentIndex, setCurrentIndex] = useState(current);
-    const [swipeStyle, setSwipeStyle] = useState(null);
-    const [height, setHeight] = useState(0);
-    const { change = () => { } } = events;
-    // 自动切换
-    useEffect(() => {
-        if (autoplay) {
-            // 自动切换
-            // eslint-disable-next-line rulesdir/no-timer
-            const timer = setInterval(() => {
-                setIndex(currentIndex + 1);
-            }, interval);
-            return () => clearInterval(timer);
-        }
-    }, [currentIndex, autoplay]);
-    // 触发切换
-    const pre = useRef({ index: currentIndex }).current;
-    useEffect(() => {
-        updateSwipeStyle(currentIndex, pre.index, itemCount);
-        change({
-            current: currentIndex,
-        });
-        return () => {
-            pre.index = currentIndex;
-        };
-    }, [currentIndex, vertical]);
-    const outerWrapRef = useRef();
-    useEventListener(outerWrapRef, 'load', (e) => {
-        setHeight(e.target.clientHeight);
-    });
-    const itemsClone = images.map((x, i) => {
-        return (React.createElement("div", { className: "g-swiper-item", "data-index": i, key: i },
-            React.createElement(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, src: x.image, alt: '图片', fit: x.fit, style: {
-                    height: x.height ? x.height : 'auto',
-                    width: x.width ? x.width : '100%',
-                } })));
-    });
-    const setIndex = (index) => {
-        if (index >= itemCount) {
-            index = 0;
-        }
-        if (index < 0) {
-            index = itemCount - 1;
-        }
-        setCurrentIndex(index);
-    };
-    // 设置容器样式、动画
-    // TODO fix settimeout mess
-    const updateSwipeStyle = (to, cur, length) => {
-        let style = {};
-        // 最后向前到最开始
-        if (to === 0 && cur === length - 1) {
-            circular &&
-                setSwipeStyle({
-                    transform: `translate3d(0, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -100%, 0)`
-                        : `translate3d(-100%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        // 第一个后退到最后
-        if (to === length - 1 && cur === 0) {
-            circular &&
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 2) * 100}%, 0)`
-                        : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        style = {
-            transform: vertical
-                ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-        };
-        if (to !== cur) {
-            style.transitionDuration = `${duration}ms`;
-        }
-        setSwipeStyle(style);
-    };
-    return (React.createElement("div", { className: classNames('g-swiper weda-ui g-carousel', className, {
-            vertical: vertical,
-        }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id, "data-testid": "carousel" },
-        itemCount > 0 ? (React.createElement(Swipe, { className: "g-swiper-list", style: swipeStyle, tolerance: 20, onSwipeLeft: () => {
-                vertical || setIndex(currentIndex + 1);
-            }, onSwipeRight: () => {
-                vertical || setIndex(currentIndex - 1);
-            }, onSwipeDown: () => {
-                vertical && setIndex(currentIndex - 1);
-            }, onSwipeUp: () => {
-                vertical && setIndex(currentIndex + 1);
-            } },
-            itemsClone[itemCount - 1],
-            images.map((x, i) => {
-                return (React.createElement(SwiperItem, { setHeight: setHeight, currentIndex: currentIndex, index: i, key: i, imagesValue: x },
-                    React.createElement(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, fit: x.fit, src: x.image, alt: '图片', style: {
-                            height: x.height ? x.height : 'auto',
-                            width: x.width ? x.width : '100%',
-                        } })));
-            }),
-            itemsClone[0])) : null,
-        indicatorDots ? (React.createElement("div", { className: "g-swiper__pagination" }, images.map((x, i) => {
-            return (React.createElement("a", { key: i, href: "#", className: "g-swiper__pagination-bulletm", "data-testid": "g-swiper__pagination-bulletm", style: {
-                    backgroundColor: currentIndex === i ? indicatorActiveColor : indicatorColor,
-                }, onClick: (e) => {
-                    setIndex(i);
-                    e.preventDefault();
-                }, "data-index": i }));
-        }))) : (false),
-        React.createElement("a", { href: "#", className: "g-swiper__turn-pre", onClick: (ev) => {
-                ev.preventDefault();
-                setIndex(currentIndex - 1);
-            } }, "\u4E0A\u4E00\u9875"),
-        React.createElement("a", { href: "#", className: "g-swiper__turn-next", onClick: (ev) => {
-                ev.preventDefault();
-                setIndex(currentIndex + 1);
-            } }, "\u4E0B\u4E00\u9875")));
-}
-const SwiperItem = ({ setHeight, children, currentIndex, index, imagesValue }) => {
-    const firstChildRef = useRef(null);
-    const syncHeight = useDebouncedCallback((e) => {
-        // console.log('e.contentRect.height', e.contentRect.height);
-        setHeight(e.contentRect.height);
-    }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
-    // 因为有loading 所以得用resizeobserver
-    useResizeObserver(firstChildRef, (e) => {
-        if (currentIndex === index) {
-            syncHeight(e);
-        }
-    });
-    const getLinkUrl = (url, params) => {
-        // URL 构造函数不支持 '//xxx.com' 的格式
-        if (url && url.indexOf('//') === 0) {
-            url = location.protocol + url;
-        }
-        // "proto:" 或 "//" 起头的是绝对路径
-        let isAbosolutePath = /^(?:[a-z]+:)/i.test(url);
-        let base, path, href, paramObj = {}, urlObj;
-        if (!isAbosolutePath) {
-            // 相对地址使用站位域名，不实际使用
-            base =
-                location.origin && location.origin !== 'null'
-                    ? location.origin
-                    : 'https://we.da';
-        }
-        try {
-            urlObj = new URL(url, base);
-            params.forEach((x) => {
-                urlObj.searchParams.append(x.key, x.value);
-            });
-            href = urlObj.href;
-            path = urlObj.pathname;
-            for (const [key, value] of urlObj.searchParams) {
-                paramObj[key] = value;
-            }
-            // 相对地址去掉站位域名
-            if (!isAbosolutePath) {
-                href = urlObj.pathname + urlObj.search + urlObj.hash;
-                href = href.replace(/^\//, '');
-            }
-        }
-        catch (e) {
-            // 非法 url
-            isAbosolutePath = true;
-            href = url;
-            path = '';
-            paramObj = params.reduce((p, x) => {
-                p[x.key] = x.value;
-                return p;
-            }, {});
-        }
-        const res = {
-            path,
-            isAbosolutePath,
-            href,
-        };
-        return res;
-    };
-    const handleImage = (e) => {
-        const { insideUrl, outerUrl, tapMode, params, newPage } = imagesValue;
-        if (tapMode === 'tap') {
-            return;
-        }
-        else if (tapMode === 'inside' && !insideUrl) {
-            return;
-        }
-        else if (tapMode === 'outer' && !outerUrl) {
-            return;
-        }
-        const selectedUrl = tapMode === 'inside' ? insideUrl : outerUrl;
-        const { path, isAbosolutePath, href } = getLinkUrl(selectedUrl, []);
-        const paramObj = params &&
-            params.length > 0 &&
-            params.reduce((p, x) => {
-                p[x.key] = x.value;
-                return p;
-            }, {});
-        if (tapMode === 'inside') {
-            if (!isAbosolutePath) {
-                e.preventDefault();
-                app.navigateTo({
-                    pageId: path,
-                    packageName: '',
-                    mode: 'weDa',
-                    params: paramObj,
-                });
-            }
-        }
-        else if (tapMode === 'outer') {
-            newPage ? window.open(href) : (location.href = href);
-        }
-    };
-    return (React.createElement("div", { className: classNames('g-swiper-item', {
-            current: index === currentIndex,
-        }), "data-index": index, onClick: handleImage, "data-testid": "swiper-item" },
-        React.createElement("div", { ref: firstChildRef }, children)));
-};

package/dist/web/components/chart/bar/index.d.ts

@@ -1,41 +0,0 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-interface PropsType extends Omit<CommonPropsType, 'children'> {
-    directionType?: string;
-    isPile?: boolean;
-    isTitle?: boolean;
-    title?: string;
-    titleLocation?: string;
-    dataSource?: DataSource;
-    filterData?: string;
-    setColor?: Array<string>;
-    xField?: Xfield;
-    xStatistics?: string;
-    groupKey?: Xfield;
-    groupKeyTimeSpan?: string;
-    xIsCountEmpty?: boolean;
-    yField?: Yfield;
-    isLegend?: boolean;
-    legend?: string;
-    legend2?: string;
-    isXaxisName?: boolean;
-    xAxisName?: string;
-    isXaxisAxisLabelShow?: boolean;
-    isXaxisAxisTickShow?: boolean;
-    isXaxisAxisLabelRotate?: boolean;
-    isYAxisSplitlineLinestyleWidth?: boolean;
-    yAxisSplitlineLinestyleType?: string;
-    yAxisMax?: number;
-    yAxisMin?: number;
-    isYAxisName?: boolean;
-    yAxisName?: string;
-    isSeriesShowSymbol?: boolean;
-    isYAxisShow?: boolean;
-    isUnit?: boolean;
-    unit?: string;
-    decimalDigits?: number;
-    suffix?: string;
-}
-export default function Bar(opts: PropsType): JSX.Element;
-export {};

package/dist/web/components/chart/bar/index.js

@@ -1,56 +0,0 @@
-import React, { useRef } from 'react';
-import EchartBar from '../common/core/eChartBar';
-import { useWedaChart } from '../common/useChart';
-import classNames from '../../../utils/classnames';
-export default function Bar(opts) {
-    const { directionType, isPile, id, style, className, isTitle, title, titleLocation, dataSource, setColor, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, } = opts;
-    const domRef = useRef();
-    useWedaChart(domRef, EchartBar, {
-        directionType,
-        isPile,
-        setColor,
-        isTitle,
-        title,
-        titleLocation,
-        dataSource,
-        filterData,
-        xField,
-        xStatistics,
-        groupKey,
-        groupKeyTimeSpan,
-        xIsCountEmpty,
-        yField,
-        isLegend,
-        legend,
-        legend2,
-        isXaxisName,
-        xAxisName,
-        isXaxisAxisLabelShow,
-        isXaxisAxisTickShow,
-        isXaxisAxisLabelRotate,
-        isYAxisSplitlineLinestyleWidth,
-        yAxisSplitlineLinestyleType,
-        yAxisMax,
-        yAxisMin,
-        isYAxisName,
-        yAxisName,
-        isSeriesShowSymbol,
-        isYAxisShow,
-        isUnit,
-        unit,
-        decimalDigits,
-        suffix,
-    });
-    const inlineStyle = {
-        height: '380px',
-        width: '100%',
-        backgroundColor: '#ffffff',
-        ...style,
-    };
-    return (React.createElement("div", { id: id, "data-testid": "bar", ref: domRef, style: inlineStyle, className: classNames({
-            'weda-ui-chart-bar': true,
-            'echart-wrapper-canvas': true,
-            'echart-dark-body': true,
-            [className]: className,
-        }) }));
-}

package/dist/web/components/chart/common/config/bar.d.ts

@@ -1,48 +0,0 @@
-export default getConfig;
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-declare function getConfig(): {
-    xAxis: {
-        name: string;
-        nameTextStyle: {
-            align: string;
-        };
-        axisLabel: {
-            show: boolean;
-            rotate: number;
-        };
-        axisTick: {
-            show: boolean;
-        };
-        inverse: boolean;
-        type: string;
-        data: string[];
-    };
-    yAxis: {
-        type: string;
-        show: boolean;
-        name: string;
-        splitLine: {
-            lineStyle: {
-                width: number;
-                type: string;
-            };
-        };
-        axisLabel: {
-            padding: number[];
-        };
-        min: any;
-        max: any;
-    };
-    series: {
-        name: string;
-        data: number[];
-        type: string;
-        itemStyle: {
-            color: string;
-        };
-        showSymbol: boolean;
-        label: {
-            show: boolean;
-        };
-    }[];
-};

package/dist/web/components/chart/common/config/bar.js

@@ -1,49 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-    const barH5 = {
-        xAxis: {
-            name: 'X轴名',
-            nameTextStyle: { align: 'center' },
-            axisLabel: {
-                show: true,
-                rotate: 0, // 字体倾斜
-            },
-            axisTick: {
-                show: true, // 刻度显示
-            },
-            inverse: false,
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-            type: 'value',
-            show: true,
-            name: 'Y轴名',
-            splitLine: {
-                lineStyle: {
-                    width: 1,
-                    type: 'dashed', //solid,dashed,dotted
-                },
-            },
-            axisLabel: { padding: [0, -10, 0, 0] },
-            min: null,
-            max: null,
-        },
-        series: [
-            {
-                name: 'demo',
-                data: [0, 932, 901, 934, 1290, 1330, 1320],
-                type: 'bar',
-                itemStyle: {
-                    color: 'green',
-                },
-                showSymbol: true,
-                label: {
-                    show: true, // 显示线条上的数据
-                },
-            },
-        ],
-    };
-    return barH5;
-};
-export default getConfig;

package/dist/web/components/chart/common/config/global.d.ts

@@ -1,13 +0,0 @@
-export default getConfig;
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-declare function getConfig(): {
-    title: {
-        text: string;
-        show: boolean;
-        left: string;
-    };
-    legend: {
-        top: string;
-    };
-    tooltip: {};
-};

package/dist/web/components/chart/common/config/global.js

@@ -1,16 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-    const globalH5 = {
-        title: {
-            text: 'demo实例',
-            show: true,
-            left: '50%',
-        },
-        legend: {
-            top: '88%',
-        },
-        tooltip: {},
-    };
-    return globalH5;
-};
-export default getConfig;

package/dist/web/components/chart/common/config/line.d.ts

@@ -1,46 +0,0 @@
-export default getConfig;
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-declare function getConfig(): {
-    xAxis: {
-        name: string;
-        nameTextStyle: {
-            align: string;
-        };
-        axisLabel: {
-            show: boolean;
-            rotate: number;
-        };
-        axisTick: {
-            show: boolean;
-        };
-        type: string;
-        data: string[];
-    };
-    yAxis: {
-        type: string;
-        show: boolean;
-        name: string;
-        splitLine: {
-            lineStyle: {
-                width: number;
-                type: string;
-            };
-        };
-        axisLabel: {
-            padding: number[];
-        };
-        min: any;
-        max: any;
-    };
-    series: {
-        name: string;
-        connectNulls: boolean;
-        data: number[];
-        type: string;
-        smooth: boolean;
-        showSymbol: boolean;
-        label: {
-            show: boolean;
-        };
-    }[];
-};

package/dist/web/components/chart/common/config/line.js

@@ -1,49 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-    const lineH5 = {
-        xAxis: {
-            name: 'X轴名',
-            nameTextStyle: { align: 'center' },
-            axisLabel: {
-                show: true,
-                rotate: 0, // 字体倾斜
-            },
-            axisTick: {
-                show: true, // 刻度显示
-            },
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-            type: 'value',
-            show: true,
-            name: 'Y轴名',
-            splitLine: {
-                lineStyle: {
-                    width: 1,
-                    type: 'dashed', //solid,dashed,dotted
-                },
-            },
-            axisLabel: {
-                padding: [0, -10, 0, 0],
-            },
-            min: null,
-            max: null,
-        },
-        series: [
-            {
-                name: 'demo',
-                connectNulls: true,
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
-                type: 'line',
-                smooth: true,
-                showSymbol: true,
-                label: {
-                    show: true, // 显示线条上的数据
-                },
-            },
-        ],
-    };
-    return lineH5;
-};
-export default getConfig;

package/dist/web/components/chart/common/config/pie.d.ts

@@ -1,29 +0,0 @@
-export default getConfig;
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-declare function getConfig(): {
-    series: {
-        data: {
-            value: number;
-            name: string;
-            tooltip: {};
-            itemStyle: {};
-        }[];
-        label: {
-            show: boolean;
-            position: string;
-            normal: {
-                formatter: any;
-                position: string;
-            };
-        };
-        type: string;
-        radius: string;
-        emphasis: {
-            itemStyle: {
-                shadowBlur: number;
-                shadowOffsetX: number;
-                shadowColor: string;
-            };
-        };
-    }[];
-};

package/dist/web/components/chart/common/config/pie.js

@@ -1,36 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-    const pieH5 = {
-        series: [
-            {
-                // name: 'demo',
-                data: [
-                    { value: 820, name: '实例数据1', tooltip: {}, itemStyle: {} },
-                    { value: 932, name: '实例数据2', tooltip: {}, itemStyle: {} },
-                    { value: 901, name: '实例数据3', tooltip: {}, itemStyle: {} },
-                    { value: 934, name: '实例数据4', tooltip: {}, itemStyle: {} },
-                    { value: 1290, name: '实例数据5', tooltip: {}, itemStyle: {} },
-                ],
-                label: {
-                    show: true,
-                    position: 'inner',
-                    normal: {
-                        formatter: null,
-                        position: 'inner',
-                    },
-                },
-                type: 'pie',
-                radius: '70%',
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                },
-            },
-        ],
-    };
-    return pieH5;
-};
-export default getConfig;