@cloudbase/weda-ui 3.3.0 → 3.3.1

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

@@ -1,352 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useSetState } from '../../utils/useSetState';
-import classNames from '../../utils/classnames';
-import Editor, { EditorState, convertEditorStateToHTML } from 'kedao';
-import { insertMedias, handleKeyCommand } from 'kedao/lib/utils';
-import { createStateFromContent } from 'kedao/lib/editor';
-import { getCloudInstance } from '../../utils/tcb';
-import { message, Button, Input, Modal, Progress, Upload, Text, } from 'tea-component';
-import { v4 as uuidv4 } from 'uuid';
-import { defaultBase64 } from './const';
-import { renderDecorator } from '../form/renderDecorator';
-import { usePlatform } from '../../utils/platform';
-import './index.css';
-import styleM from './richtext.module.css';
-import { useSyncedRef } from '@react-hookz/web';
-import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
-// 默认图片类型
-const IMAGE_TYPES = [
-    'image/jpeg',
-    'image/png',
-    'image/gif',
-    'image/bmp',
-    'image/tiff',
-    'image/svg+xml',
-];
-const defaultControls = [
-    'undo',
-    'redo',
-    'separator',
-    'headings',
-    'separator',
-    'font-size',
-    'separator',
-    'line-height',
-    'letter-spacing',
-    'text-color',
-    'bold',
-    'italic',
-    'underline',
-    'strike-through',
-    'superscript',
-    'subscript',
-    'remove-styles',
-    'emoji',
-    'text-indent',
-    'text-align',
-    'list-ul',
-    'list-ol',
-    'blockquote',
-    'code',
-    'link',
-    'hr',
-    'media',
-    'clear',
-];
-export default function RichText({ 
-// 系统属性
-id, style, className, events, 
-// 组件属性
-label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChange, maxSize, acceptTypes, cloudPath, disabled, decorator, }) {
-    const [editorState, setEditorState] = useState();
-    const latestEditorState = useSyncedRef(editorState);
-    const cls = classNames({
-        'weda-ui': true,
-        'weda-richText': true,
-        [className]: className,
-    });
-    const platform = usePlatform();
-    const isH5 = platform === 'h5';
-    const subCls = classNames({
-        'weui-cell': isH5,
-        // 'weui-cell_active': isH5,
-        'weui-cell_form': isH5,
-        'weui-cell_disabled': isH5 && disabled,
-    });
-    const previousValueRef = useRef();
-    const onDataChange = function (value) {
-        if (previousValueRef.current !== value) {
-            events.change &&
-                events.change({ value: value === '<p></p>' ? '' : value });
-            if (onChange) {
-                if (value === '<p></p>') {
-                    onChange('');
-                }
-                else {
-                    onChange(value);
-                }
-            }
-        }
-        previousValueRef.current = value;
-    };
-    useEffect(() => {
-        const state = createStateFromContent(initialValue, {});
-        setEditorState(state);
-    }, []);
-    const excludeControls = useMemo(() => {
-        const result = [
-            'media',
-            'fullscreen',
-            'line-height',
-            'letter-spacing',
-            'emoji',
-            'superscript',
-            'subscript',
-        ];
-        if (isH5) {
-            result.push('separator', 'undo', 'redo', 'blockquote', 'code', 'link', 'hr', 'list-ul', 'list-ol', 'hr', 'clear', 'text-indent', 
-            // 'font-size',
-            'headings', 'remove-styles', 'text-align');
-        }
-        return result;
-    }, [isH5]);
-    const extendControls = useMemo(() => {
-        if (!isH5) {
-            return [
-                {
-                    key: 'richtext-uploader',
-                    type: 'component',
-                    component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
-                            const state = insertMedias(latestEditorState.current, [
-                                { type: 'IMAGE', url },
-                            ]);
-                            setEditorState((curState) => {
-                                const currentSelection = curState.getSelection();
-                                EditorState.forceSelection(state, currentSelection);
-                                return state;
-                            });
-                        } })),
-                },
-            ];
-        }
-    }, [
-        acceptTypes,
-        maxSize,
-        cloudPath,
-        latestEditorState,
-        insertMedias,
-        setEditorState,
-        isH5,
-    ]);
-    // 修改img显示逻辑
-    const blockRenderFn = (contentBlock, { editor, editorState }) => {
-        var _a;
-        if (contentBlock.getType() === 'atomic') {
-            const entityKey = contentBlock.getEntityAt(0);
-            if (!entityKey) {
-                return null;
-            }
-            const entity = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getEntity(entityKey);
-            if (entity.getType() === 'IMAGE') {
-                return {
-                    component: RichTextImg,
-                    editable: false,
-                    props: { editor, editorState }, // 传入的内容可以在组件中通过this.props.blockProps获取到
-                };
-            }
-        }
-    };
-    const richTextEl = (React.createElement("div", { className: subCls },
-        React.createElement("div", { style: style, className: styleM.richtextInner },
-            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, disabled: disabled, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
-                    setEditorState(s);
-                    const html = convertEditorStateToHTML(s, {});
-                    onDataChange(html);
-                    if (html.length > 32768) {
-                        message.warning({
-                            content: '富文本长度过长，可能导致保存失败',
-                        });
-                    }
-                }, controls: defaultControls, excludeControls: excludeControls, 
-                /** @ts-ignore jsx */
-                extendControls: extendControls, handleKeyCommand: (command, editState) => {
-                    const newState = handleKeyCommand(editState, command);
-                    if (newState) {
-                        setEditorState(newState);
-                        return true;
-                    }
-                    return false;
-                } }))));
-    return renderDecorator(richTextEl, decorator)({
-        id,
-        className: cls,
-        style,
-        label: labelVisible ? label : null,
-        layout,
-        multiCell: false,
-        requiredFlag,
-    });
-}
-export const CustomUploader = (props) => {
-    const { onChange = () => { }, acceptTypes, maxSize, cloudPath } = props;
-    const [{ fileList, percent, visible, uploading, inputUrl, previewImg }, setState,] = useSetState({
-        fileList: [],
-        percent: 0,
-        visible: false,
-        uploading: false,
-        inputUrl: '',
-        previewImg: defaultBase64,
-    });
-    // 获取base64
-    const getBase64 = (file) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            /** @ts-ignore jsx */
-            setState({ previewImg: reader.result });
-        };
-        reader.readAsDataURL(file);
-    };
-    // 计算上传进度
-    const onProgress = (progressEvent) => {
-        let percentCompleted = 0;
-        try {
-            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-            percentCompleted < 100 ? percentCompleted : 100;
-        }
-        catch (e) {
-            console.error(e);
-            message.error({
-                content: '上传图片失败',
-            });
-        }
-        setState({ uploading: true, percent: percentCompleted });
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { role: "richtext", type: "button", "data-title": "\u5A92\u4F53\u4E0A\u4F20", className: "control-item button", onClick: () => setState({ visible: true }) },
-            React.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.6205 1.61428V3.60631L15.6105 3.6063L15.6105 5.1063L13.6205 5.10631V7.08572H12.1205V5.10633L10.1391 5.10635L10.139 3.60635L12.1205 3.60633V1.61428H13.6205ZM8.84998 2.38572H2.49536C1.94308 2.38572 1.49536 2.83343 1.49536 3.38572V11.6761V13.3857C1.49536 13.403 1.4958 13.4201 1.49666 13.4372C1.5019 13.5405 1.52282 13.6397 1.5571 13.7324C1.69808 14.1138 2.06497 14.3857 2.49536 14.3857H4.49757H4.76178H12.4954C13.0476 14.3857 13.4954 13.938 13.4954 13.3857V13.2088L13.4954 13.2088V11.0909L13.4954 11.0909V8.38572H11.9954V9.59579L10.2484 7.85452L9.71895 7.32678L9.18948 7.85452L6.4372 10.5979L5.03662 9.20183L4.50715 8.67408L3.97769 9.20183L2.99536 10.181V3.88572H8.84998V2.38572ZM2.99536 12.8857V12.2988L4.50715 10.792L5.37481 11.6568L4.14188 12.8857H2.99536ZM11.9954 12.8857H6.26667L9.71895 9.44465L11.9954 11.7137V12.8857Z", fill: "#6A6F7B" }))),
-        React.createElement(Modal, { onClose: () => {
-                setState({ visible: false });
-            }, visible: visible, maskClosable: true },
-            React.createElement("p", null, "\u8F93\u5165\u94FE\u63A5\u63D2\u5165\u56FE\u7247"),
-            React.createElement("div", { className: "richText-upload-link" },
-                React.createElement(Input, { value: inputUrl, placeholder: "\u8F93\u5165\u56FE\u7247\u5730\u5740", onChange: (value) => setState({ inputUrl: value }) }),
-                "\u00A0",
-                React.createElement(Button, { type: "primary", onClick: () => {
-                        onChange(inputUrl);
-                        setState({ visible: false });
-                    } }, "\u786E\u8BA4")),
-            React.createElement("p", { style: { marginBottom: '16px' } }, "\u6216\u62D6\u62FD\u4E0A\u4F20\u63D2\u5165\u56FE\u7247"),
-            React.createElement(Upload, { accept: acceptTypes.join(), maxSize: 1024 * 1024, beforeUpload: (file) => {
-                    getBase64(file);
-                    let typeRegex = new RegExp(`^((${acceptTypes.join(')|(').replace('+', '\\+')}))$`);
-                    if (acceptTypes.join().includes('*')) {
-                        typeRegex = new RegExp(`^image/.+$`);
-                    }
-                    if (!typeRegex.test(file.type)) {
-                        message.error({
-                            content: '文件格式不支持',
-                        });
-                        return false;
-                    }
-                    if (file.size > maxSize * 1024 * 1024) {
-                        message.error({
-                            content: `文件大小超过上限${maxSize}M`,
-                        });
-                        return false;
-                    }
-                    setState({
-                        uploading: true,
-                        percent: 0,
-                        fileList: [
-                            {
-                                name: file.name,
-                            },
-                        ],
-                    });
-                    getCloudInstance().then(async (tcb) => {
-                        try {
-                            const fileType = file.name.split('.').pop().toLowerCase();
-                            const path = `${cloudPath}/uploader-${uuidv4()}.${fileType}`;
-                            const { fileID } = await tcb.uploadFile({
-                                cloudPath: path,
-                                filePath: file,
-                                onUploadProgress: onProgress,
-                            });
-                            onChange(fileID);
-                            setState({
-                                visible: false,
-                                fileList: [],
-                            });
-                        }
-                        catch (e) {
-                            setState({
-                                fileList: [],
-                            });
-                            console.error(e);
-                            message.error({
-                                content: '上传图片失败' + e.message,
-                            });
-                        }
-                        finally {
-                            setState({ uploading: false, percent: 100 });
-                        }
-                    });
-                    return false;
-                } }, ({ open, isDragging }) => (React.createElement(Upload.Dragger, { filename: fileList[0] && fileList[0].name, percent: percent, image: previewImg, className: "richtext_upload_dragger" }, isDragging ? ('释放鼠标') : (React.createElement(React.Fragment, null,
-                React.createElement("a", { onClick: open }, "\u70B9\u51FB\u4E0A\u4F20"),
-                React.createElement(Text, { theme: "weak" }, "/\u62D6\u62FD\u5230\u6B64\u533A\u57DF")))))),
-            uploading && (React.createElement(Progress, { style: { marginTop: '10px' }, percent: percent })))));
-};
-const Img = React.memo(function Img(props) {
-    const { src, style, onError } = props;
-    const { data: realSrc, error } = useTempUrl(src);
-    const realstyle = useMemo(() => {
-        if (error) {
-            return { ...style, width: '80px' };
-        }
-        return style;
-    }, [error, style]);
-    return (React.createElement("img", { src: error ? defaultBase64 : realSrc, style: realstyle, onError: () => {
-            onError === null || onError === void 0 ? void 0 : onError();
-        } }));
-});
-const imgStyle = { maxWidth: '100%' };
-export const RichTextImg = ({ contentState, block }) => {
-    const blockData = contentState.getEntity(block.getEntityAt(0)).getData();
-    const { url } = blockData || {};
-    return (url && (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "bf-media" },
-            React.createElement("div", { draggable: "true", className: "bf-image", style: { float: 'left' } },
-                React.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
-                    React.createElement(Img, { src: url, style: imgStyle }),
-                    React.createElement("div", { className: "bf-pre-csize" }))),
-            React.createElement("div", { style: {
-                    clear: 'both',
-                    height: '0px',
-                    lineHeight: 0,
-                    float: 'none',
-                } })))));
-};
-RichText.defaultProps = {
-    // 系统属性
-    events: {},
-    style: {},
-    // 组件属性
-    label: '标题',
-    labelVisible: true,
-    name: 'formRichText',
-    value: '',
-    readOnly: true,
-    disabled: true,
-    layout: 'vertical',
-    requiredFlag: false,
-    maxSize: 10,
-    acceptTypes: IMAGE_TYPES,
-    cloudPath: 'weda-richtext-upload',
-};
-CustomUploader.defaultProps = {
-    maxSize: 10,
-    acceptTypes: IMAGE_TYPES,
-    cloudPath: 'weda-richtext-upload',
-};

package/dist/web/components/richTextView/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import './index.css';
-import type { CommonPropsType } from '../../types';
-export interface PropsType extends CommonPropsType {
-    value: string;
-}
-export default function RichTextView({ value, className, style, id, }: PropsType): JSX.Element;

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

@@ -1,44 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import classNames from '../../utils/classnames';
-import { getTempFileURL } from '../../utils/tcb';
-import './index.css';
-import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
-import destr from 'destr';
-export default function RichTextView({ value = '', className, style, id, }) {
-    const parseValue = destr(value);
-    const cls = classNames({
-        'weda-ui': true,
-        'weda-RichTextView': true,
-        [className]: className,
-    });
-    const [displayValue, setDisplayValue] = useState('');
-    const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
-    const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
-    let tempValue = parseValue
-        .toString()
-        .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
-    const getSrc = async (img) => {
-        const url = img.replace(regex, '$1');
-        if (img.includes('cloud://')) {
-            const newURL = await getTempFileURL(url);
-            if (newURL) {
-                tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
-                setDisplayValue(tempValue);
-            }
-        }
-    };
-    useEffect(() => {
-        setDisplayValue(tempValue);
-        try {
-            const imgs = parseValue.match(regex);
-            if (imgs && imgs.length > 0) {
-                imgs.forEach((img) => {
-                    getSrc(img);
-                });
-            }
-        }
-        catch (e) { }
-    }, [value]);
-    return (displayValue && (React.createElement("div", { className: cls, style: style, id: id },
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: displayValue } }))));
-}

package/dist/web/components/scrollView/index.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../types';
-export interface PropsType extends CommonPropsType {
-    scrollX?: boolean;
-    scrollY?: boolean;
-    scrollTop?: number;
-    scrollLeft?: number;
-    scrollIntoView?: string;
-    upperThreshold?: number;
-    lowerThreshold?: number;
-    domRef?: any;
-}
-export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, domRef, events, }: {
-    id: any;
-    scrollX?: boolean;
-    scrollY?: boolean;
-    style: any;
-    scrollTop: any;
-    scrollLeft: any;
-    scrollIntoView: any;
-    className: any;
-    children: any;
-    upperThreshold?: number;
-    lowerThreshold?: number;
-    domRef: any;
-    events: any;
-}): JSX.Element;

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

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import classNames from '../../utils/classnames';
-export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, domRef, events, }) {
-    const [toUpper, setToUpper] = React.useState(false);
-    const [toLower, setToLower] = React.useState(false);
-    const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
-    const [scrollTopPos, setScrollTopPos] = React.useState(0);
-    const scrollViewRef = domRef || React.useRef(null);
-    const handleOnScroll = function (e) {
-        const detail = {
-            scrollLeft: e.target.scrollLeft,
-            scrollTop: e.target.scrollTop,
-            scrollHeight: e.target.scrollHeight,
-            scrollWidth: e.target.scrollWidth,
-        };
-        const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
-        const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
-        let delta;
-        // 横向滚动
-        if (Math.abs(deltaX) > Math.abs(deltaY)) {
-            delta = deltaX;
-            setScrollLeftPos(e.target.scrollLeft);
-            if (scrollX && e.target.scrollLeft <= upperThreshold) {
-                delta < 0 && setToUpper(true);
-            }
-            else {
-                setToUpper(false);
-            }
-            if (scrollX &&
-                e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
-                    e.target.scrollWidth) {
-                delta > 0 && setToLower(true);
-            }
-            else {
-                setToLower(false);
-            }
-        }
-        else {
-            delta = deltaY;
-            setScrollTopPos(e.target.scrollTop);
-            if (scrollY && e.target.scrollTop <= upperThreshold) {
-                delta < 0 && setToUpper(true);
-            }
-            else {
-                setToUpper(false);
-            }
-            if (scrollY &&
-                e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
-                    e.target.scrollHeight) {
-                delta > 0 && setToLower(true);
-            }
-            else {
-                setToLower(false);
-            }
-        }
-        // console.log("delta", deltaY, deltaX
-        events.scroll(detail, { originEvent: e });
-    };
-    React.useEffect(() => {
-        scrollViewRef.current.scrollTop = scrollTop;
-    }, [scrollTop]);
-    React.useEffect(() => {
-        scrollViewRef.current.scrollLeft = scrollLeft;
-    }, [scrollLeft]);
-    React.useEffect(() => {
-        toUpper && events.scrolltoupper();
-    }, [toUpper]);
-    React.useEffect(() => {
-        toLower && events.scrolltolower();
-    }, [toLower]);
-    React.useEffect(() => {
-        if (scrollIntoView) {
-            const children = scrollViewRef.current.children;
-            const item = Array.from(children).find((item) => item && item.id === scrollIntoView);
-            scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
-            scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
-            // console.log('children', children, item)
-        }
-    }, [scrollIntoView]);
-    const webStyles = {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        // whiteSpace: scroll === 'y' ? 'normal' : 'nowrap',
-        overflowX: `${scrollX ? 'auto' : 'hidden'}`,
-        overflowY: `${scrollY ? 'auto' : 'hidden'}`,
-        ...style,
-    };
-    const cls = classNames({
-        'weda-ui': true,
-        'g-scroll-view': true,
-        [className]: className,
-    });
-    return (React.createElement("div", { id: id, style: webStyles, ref: scrollViewRef, className: cls, onScrollCapture: handleOnScroll }, children));
-}

package/dist/web/components/share/index.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../types';
-declare const Share: (props: PropsType) => JSX.Element;
-export interface PropsType extends CommonPropsType {
-    /**
-     * 按钮标题
-     */
-    text?: string;
-    /**
-     * 按钮风格
-     */
-    type?: 'primary' | 'warn' | 'wechat' | 'default';
-    /**
-     * 按钮大小
-     */
-    size?: 'default' | 'mini' | 'large';
-    /**
-     * 分享标题
-     */
-    title?: string;
-    /**
-     * 选择页面
-     */
-    path?: string;
-    /**
-     * 携带参数
-     */
-    withParams?: boolean;
-    /**
-     * 参数
-     */
-    params?: any;
-}
-export default Share;

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import Button from '../../components/button';
-const Share = (props) => React.createElement(Button, { ...props });
-export default Share;

package/dist/web/components/slot/index.d.ts

@@ -1,6 +0,0 @@
-export interface PropsType {
-    className?: string;
-    name: string;
-    compositeParent: any;
-}
-export default function Slot({ compositeParent, name, className }: PropsType): any;

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

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export default function Slot({ compositeParent, name, className }) {
-    if (!compositeParent) {
-        console.warn('Slot组件只能用于实现复合组件');
-        // 兼容编辑器点击，可选中 Slot 组件
-        return (React.createElement("div", { className: 'weda-ui' + className ? ` ${className}` : '' }, 'Slot - ' + name));
-    }
-    return compositeParent.props.data[name] || null;
-}

package/dist/web/components/swiper/index.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import './index.css';
-import type { CommonPropsType } from '../../types';
-export interface PropsType extends CommonPropsType {
-    /**
-     * 是否启用指示点
-     */
-    indicatorDots: boolean;
-    /**
-     * 是否自动切换
-     */
-    autoplay: boolean;
-    /**
-     * 当前索引值
-     */
-    current: number;
-    interval: number;
-    duration: number;
-    circular: boolean;
-    vertical: boolean;
-    indicatorColor: string;
-    indicatorActiveColor: string;
-}
-export default function Swiper({ children, className, style, autoplay, circular, vertical, indicatorDots, indicatorColor, indicatorActiveColor, duration, interval, current, events, id, }: PropsType): JSX.Element;