@cloudbase/weda-ui 3.1.9 → 3.2.1

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

@@ -0,0 +1,352 @@
+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/src/web/components/richTextView/index.d.ts

@@ -0,0 +1,7 @@
+/// <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/src/web/components/richTextView/index.js

@@ -0,0 +1,44 @@
+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/src/web/components/scrollView/index.d.ts

@@ -0,0 +1,27 @@
+/// <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/src/web/components/scrollView/index.js

@@ -0,0 +1,95 @@
+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/src/web/components/share/index.d.ts

@@ -0,0 +1,34 @@
+/// <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/src/web/components/share/index.js

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

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

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

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

@@ -0,0 +1,9 @@
+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/src/web/components/swiper/index.d.ts

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