@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.1

package/src/web/components/richText/index.jsx

@@ -1,478 +0,0 @@
-// @ts-ignore
-import React, { useEffect, useState } from 'react';
-import BraftEditor from 'braft-editor';
-import { useSetState } from '../../utils/useSetState';
-import * as PropsTypes from 'prop-types';
-import { ContentUtils } from 'braft-utils';
-import classNames from '../../utils/classnames';
-
-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 './index.css';
-import 'braft-editor/dist/index.css';
-import { renderDecorator } from '../form/renderDecorator';
-import { usePlatform } from '../../utils/platform';
-
-// 默认图片类型
-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 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 = BraftEditor.createEditorState(initialValue);
-    setEditorState(state);
-  }, []);
-
-  const extendControls = [
-    {
-      key: 'richtext-uploader',
-      type: 'component',
-      component: (
-        <CustomUploader
-          acceptTypes={acceptTypes}
-          maxSize={maxSize}
-          cloudPath={cloudPath}
-          onChange={(url) => {
-            const state = ContentUtils.insertMedias(editorState, [
-              { 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, // 替换img的组件
-          editable: false, // editable并不代表组件内容实际可编辑，建议设置为false
-          props: { editor, editorState }, // 传入的内容可以在组件中通过this.props.blockProps获取到
-        };
-      }
-    }
-  };
-
-  const richTextEl = (
-    
-      
-      <div className={subCls}>
-        <div
-          style={{
-            border: '1px solid #d1d1d1',
-            backgroundColor: '#fff',
-            ...style,
-          }}
-        >
-          <BraftEditor
-            key={id}
-            value={editorState}
-            readOnly={readOnly}
-            blockRendererFn={blockRenderFn}
-            onBlur={(s) => {
-              setEditorState(s);
-              onDataChange(s.toHTML());
-              if (s.toHTML().length > 32768) {
-                message.warning({
-                  content: '富文本长度过长，可能导致保存失败',
-                });
-              }
-            }}
-            excludeControls={['media', 'fullscreen']}
-            /** @ts-ignore */
-            extendControls={extendControls}
-            handleKeyCommand={(command, editState) => {
-              const newState = ContentUtils.handleKeyCommand(
-                editState,
-                command
-              );
-              if (newState) {
-                setEditorState(newState);
-                return true;
-              }
-              return false;
-            }}
-          />
-        </div>
-      </div>
-  );
-  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
-      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) {
-      message.error({
-        content: '上传图片失败',
-      });
-    }
-    setState({ uploading: true, percent: percentCompleted });
-  };
-  return (
-    <>
-      <button
-        role="richtext"
-        type="button"
-        data-title="媒体上传"
-        className="control-item button"
-        onClick={() => setState({ visible: true })}
-      >
-        <svg
-          viewBox="64 64 896 896"
-          focusable="false"
-          data-icon="file-image"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <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"
-          ></path>
-          <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"
-          ></path>
-          <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"
-          ></path>
-        </svg>
-      </button>
-      <Modal
-        onClose={() => {
-          setState({ visible: false });
-        }}
-        visible={visible}
-        maskClosable={true}
-      >
-        <p>输入链接插入图片</p>
-        <div className="richText-upload-link">
-          <Input
-            value={inputUrl}
-            placeholder="输入图片地址"
-            onChange={(value) => setState({ inputUrl: value })}
-          />
-          &nbsp;
-          <Button
-            type="primary"
-            onClick={() => {
-              onChange(inputUrl);
-              setState({ visible: false });
-            }}
-          >
-            确认
-          </Button>
-        </div>
-        <p style={{ marginBottom: '16px' }}>或拖拽上传插入图片</p>
-        <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: [],
-                });
-                message.error({
-                  content: '上传图片失败',
-                });
-              } finally {
-                setState({ uploading: false, percent: 100 });
-              }
-            });
-            return false;
-          }}
-        >
-          {({ open, isDragging }) => (
-            <Upload.Dragger
-              filename={fileList[0] && fileList[0].name}
-              percent={percent}
-              image={previewImg}
-              className="richtext_upload_dragger"
-            >
-              {isDragging ? (
-                '释放鼠标'
-              ) : (
-                <>
-                  <a onClick={open}>点击上传</a>
-                  <Text theme="weak">/拖拽到此区域</Text>
-                </>
-              )}
-            </Upload.Dragger>
-          )}
-        </Upload>
-        {uploading && (
-          <Progress style={{ marginTop: '10px' }} percent={percent} />
-        )}
-      </Modal>
-    </>
-  );
-};
-
-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://')) {
-          let _src = await getTempFileURL(url);
-          setSrc(_src || url);
-        } else {
-          setSrc(url);
-        }
-      } catch (e) {
-        message.error({
-          content: `显示图片失败：${e.message || '未知原因'}`,
-        });
-      }
-    };
-    getSrc();
-  }, [url]);
-
-  return (
-    src && (
-      <>
-        <div className="bf-media">
-          <div draggable="true" className="bf-image" style={{ float: 'left' }}>
-            <div style={{ position: 'relative', display: 'inline-block' }}>
-              <img
-                src={src}
-                key={url + Math.random()}
-                style={{ maxWidth: '100%', width }}
-                onError={() => {
-                  setSrc(defaultBase64);
-                  setWidth('80px');
-                }}
-              />
-              <div className="bf-pre-csize"></div>
-            </div>
-          </div>
-          <div
-            style={{
-              clear: 'both',
-              height: '0px',
-              lineHeight: 0,
-              float: 'none',
-            }}
-          ></div>
-        </div>
-      </>
-    )
-  );
-};
-
-RichText.propTypes = {
-  // 系统属性
-  id: PropsTypes.string,
-  style: PropsTypes.object,
-  value: PropsTypes.string,
-  className: PropsTypes.string,
-  events: PropsTypes.object,
-  // 组件属性
-  label: PropsTypes.string,
-  labelVisible: PropsTypes.bool,
-  name: PropsTypes.string,
-  readOnly: PropsTypes.bool,
-  layout: PropsTypes.oneOf(['horizontal', 'vertical']),
-  requiredFlag: PropsTypes.bool,
-  onChange: PropsTypes.func,
-  maxSize: PropsTypes.number,
-  acceptTypes: PropsTypes.array,
-  cloudPath: PropsTypes.string,
-  disabled: PropsTypes.bool,
-  decorator: PropsTypes.oneOfType([PropsTypes.array, PropsTypes.node])
-
-};
-
-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.propTypes = {
-  onChange: PropsTypes.func,
-  maxSize: PropsTypes.number,
-  acceptTypes: PropsTypes.array,
-  cloudPath: PropsTypes.string,
-};
-
-CustomUploader.defaultProps = {
-  maxSize: 10,
-  acceptTypes: IMAGE_TYPES,
-  cloudPath: 'weda-richtext-upload',
-};
-
-RichTextImg.propTypes = {
-  contentState: PropsTypes.object,
-  block: PropsTypes.object,
-};
-
-RichTextImg.defaultProps = {};

package/src/web/components/richTextView/index.css

@@ -1,59 +0,0 @@
-.weda-RichTextView blockquote {
-  margin: 0 0 10px;
-  padding: 15px 20px;
-  background-color: #f1f2f3;
-  border-left: 5px solid #ccc;
-  color: #666;
-  font-style: italic;
-}
-
-.weda-RichTextView pre {
-  max-width: 100%;
-  max-height: 100%;
-  margin: 10px 0;
-  padding: 15px;
-  overflow: auto;
-  background-color: #f1f2f3;
-  border-radius: 3px;
-  color: #666;
-  font-family: monospace;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
-  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/src/web/components/richTextView/index.tsx

@@ -1,67 +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 { CommonPropsType } from '../../types';
-
-export interface PropsType extends CommonPropsType {
-    value: string
-}
-
-export default function RichTextView({
-  value = '',
-  className,
-  style,
-  id
-}: PropsType) {
-  let parseValue = value;
-  try {
-    parseValue = JSON.parse(value);
-  } catch (e) {}
-  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 && (
-      <div className={cls} style={style}
-        id={id}
-      >
-        <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
-      </div>
-    )
-  );
-}