@cloudbase/weda-ui 3.1.0 → 3.1.1

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

@@ -0,0 +1,295 @@
+import React, { useEffect, useState } from 'react';
+import { useSetState } from '../../utils/useSetState';
+import classNames from '../../utils/classnames';
+import Editor, { convertEditorStateToHTML } from 'kedao';
+import { ContentUtils } from 'kedao/lib/utils';
+import { createStateFromContent } from 'kedao/lib/editor';
+import { getCloudInstance, getTempFileURL } 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 { useSyncedRef } from '@react-hookz/web';
+// 默认图片类型
+const IMAGE_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/bmp',
+    'image/tiff',
+    'image/svg+xml',
+];
+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 onDataChange = function (value) {
+        events.change && events.change({ value: value === '<p></p>' ? '' : value });
+        if (onChange) {
+            if (value === '<p></p>') {
+                onChange('');
+            }
+            else {
+                onChange(value);
+            }
+        }
+    };
+    useEffect(() => {
+        const state = createStateFromContent(initialValue, {});
+        setEditorState(state);
+    }, []);
+    const extendControls = [
+        {
+            key: 'richtext-uploader',
+            type: 'component',
+            component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
+                    const state = ContentUtils.insertMedias(latestEditorState.current, [
+                        { type: 'IMAGE', url },
+                    ]);
+                    setEditorState(state);
+                } })),
+        },
+    ];
+    // 修改img显示逻辑
+    const blockRenderFn = (contentBlock, { editor, editorState }) => {
+        if (contentBlock.getType() === 'atomic') {
+            const entity = editorState
+                .getCurrentContent()
+                .getEntity(contentBlock.getEntityAt(0));
+            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: {
+                border: '1px solid #d1d1d1',
+                backgroundColor: '#fff',
+                ...style,
+            } },
+            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
+                    setEditorState(s);
+                    const html = convertEditorStateToHTML(s, {});
+                    onDataChange(html);
+                    if (html.length > 32768) {
+                        message.warning({
+                            content: '富文本长度过长，可能导致保存失败',
+                        });
+                    }
+                }, excludeControls: ['media', 'fullscreen'], 
+                /** @ts-ignore jsx */
+                extendControls: extendControls, handleKeyCommand: (command, editState) => {
+                    const newState = ContentUtils.handleKeyCommand(editState, command);
+                    console.log(newState, 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", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "file-image", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
+                React.createElement("path", { d: "M534 352V136H232v752h560V394H576a42 42 0 01-42-42zm-134 50c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328.1c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8.1 8.1 0 0112.7 0l136.5 174c4.1 5.2.4 12.9-6.3 12.9z", fill: "#e6f7ff" }),
+                React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0042 42h216v494z", fill: "#006eff" }),
+                React.createElement("path", { d: "M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0z", fill: "#006eff" }))),
+        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 })))));
+};
+export const RichTextImg = ({ contentState, block }) => {
+    const blockData = contentState.getEntity(block.getEntityAt(0)).getData();
+    const { url } = blockData || {};
+    const [src, setSrc] = React.useState('');
+    const [width, setWidth] = React.useState('unset');
+    useEffect(() => {
+        const getSrc = async () => {
+            try {
+                if (url.includes('cloud://')) {
+                    const _src = await getTempFileURL(url);
+                    setSrc(_src || url);
+                }
+                else {
+                    setSrc(url);
+                }
+            }
+            catch (e) {
+                message.error({
+                    content: `显示图片失败：${e.message || '未知原因'}`,
+                });
+            }
+        };
+        getSrc();
+    }, [url]);
+    return (src && (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: src, key: url + Math.random(), style: { maxWidth: '100%', width }, onError: () => {
+                            setSrc(defaultBase64);
+                            setWidth('80px');
+                        } }),
+                    React.createElement("div", { className: "bf-pre-csize" }))),
+            React.createElement("div", { style: {
+                    clear: 'both',
+                    height: '0px',
+                    lineHeight: 0,
+                    float: 'none',
+                } })))));
+};
+RichText.defaultProps = {
+    // 系统属性
+    events: {},
+    style: { width: '100%' },
+    // 组件属性
+    label: '标题',
+    labelVisible: true,
+    name: 'formRichText',
+    value: '',
+    readOnly: false,
+    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.css

@@ -0,0 +1,63 @@
+.weda-RichTextView {
+  font-size: 1rem;
+}
+.weda-RichTextView blockquote {
+  margin: 0 0 0.71429rem;
+  padding: 1.07143rem 1.42857rem;
+  background-color: #f1f2f3;
+  border-left: 0.35714rem solid #ccc;
+  color: #666;
+  font-style: italic;
+}
+
+.weda-RichTextView pre {
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0.71429rem 0;
+  padding: 1.07143rem;
+  overflow: auto;
+  background-color: #f1f2f3;
+  border-radius: 0.21429rem;
+  color: #666;
+  font-family: monospace;
+  font-size: 1em;
+  /* font-weight: 400; */
+  font-weight: inherit;
+  line-height: 1.14285em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.weda-RichTextView h1 {
+  font-size: 2em;
+}
+
+.weda-RichTextView h2 {
+  font-size: 1.5em;
+}
+
+.weda-RichTextView h3 {
+  font-size: 1.17em;
+}
+
+.weda-RichTextView h4 {
+  font-size: 1em;
+}
+
+.weda-RichTextView h5 {
+  font-size: 0.83em;
+}
+
+.weda-RichTextView h6 {
+  font-size: 0.67em;
+}
+
+.weda-RichTextView ul {
+  list-style: disc !important;
+  padding: revert !important;
+}
+
+.weda-RichTextView ol {
+  list-style: decimal !important;
+  padding: revert !important;
+}

package/dist/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/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/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/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/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/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/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/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;
+}