@cloudbase/weda-ui 3.1.3 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/configs/components/carousel.json +2 -2
- package/dist/configs/components/chart/bar.json +3 -0
- package/dist/configs/components/chart/line.json +3 -0
- package/dist/configs/components/chart/pie.json +3 -0
- package/dist/configs/components/form/checkbox.json +1 -0
- package/dist/configs/components/form/form.json +39 -15
- package/dist/configs/components/form/richText.json +17 -9
- package/dist/configs/components/form/select.json +1 -0
- package/dist/web/components/chart/common/core/eChartBar.js +3 -1
- package/dist/web/components/chart/common/core/eChartLine.js +3 -1
- package/dist/web/components/form/checkbox/index.js +1 -1
- package/dist/web/components/form/form/index.css +4 -0
- package/dist/web/components/form/form/index.d.ts +21 -2
- package/dist/web/components/form/form/index.js +90 -16
- package/dist/web/components/form/location/common/mapChoose.js +93 -35
- package/dist/web/components/form/select/dropdown-select/ui.d.ts +15 -0
- package/dist/web/components/form/select/dropdown-select/ui.js +55 -0
- package/dist/web/components/form/select/h5.d.ts +1 -1
- package/dist/web/components/form/select/h5.js +54 -152
- package/dist/web/components/form/select/index.d.ts +1 -1
- package/dist/web/components/form/select/index.js +33 -96
- package/dist/web/components/form/select/use-options.d.ts +26 -0
- package/dist/web/components/form/select/use-options.js +103 -0
- package/dist/web/components/form/uploader/index.css +10 -3
- package/dist/web/components/form/uploader/uploader.h5.d.ts +1 -1
- package/dist/web/components/form/uploader/uploader.h5.js +18 -19
- package/dist/web/components/form/uploader/uploader.pc.js +6 -3
- package/dist/web/components/richText/index.css +20 -6
- package/dist/web/components/richText/index.d.ts +2 -3
- package/dist/web/components/richText/index.js +119 -65
- package/dist/web/components/richText/richtext.module.css +5 -0
- package/dist/web/utils/tcb.d.ts +5 -1
- package/dist/web/utils/tcb.js +26 -3
- package/dist/web/utils/use-cloud-id-temp-url.d.ts +1 -0
- package/dist/web/utils/use-cloud-id-temp-url.js +13 -0
- package/package.json +41 -37
|
@@ -3,9 +3,6 @@
|
|
|
3
3
|
padding: 0;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.weda-uploader-pc .weda-uploader-pc__header {
|
|
7
|
-
}
|
|
8
|
-
|
|
9
6
|
.weda-uploader-pc .weda-uploader-pc__title {
|
|
10
7
|
color: #000000;
|
|
11
8
|
line-height: 1.42857rem;
|
|
@@ -34,6 +31,7 @@
|
|
|
34
31
|
.weda-uploader-pc .weda-uploader-pc__input-box {
|
|
35
32
|
margin-bottom: 0.57143rem;
|
|
36
33
|
}
|
|
34
|
+
|
|
37
35
|
.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
|
|
38
36
|
margin-bottom: 0;
|
|
39
37
|
}
|
|
@@ -41,6 +39,7 @@
|
|
|
41
39
|
.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
|
|
42
40
|
margin-bottom: 0;
|
|
43
41
|
}
|
|
42
|
+
|
|
44
43
|
.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
|
|
45
44
|
margin-left: 0.57143rem;
|
|
46
45
|
}
|
|
@@ -56,6 +55,10 @@
|
|
|
56
55
|
cursor: zoom-in;
|
|
57
56
|
}
|
|
58
57
|
|
|
58
|
+
.weda-uploader-pc__input-box .wedatea2td-disabled {
|
|
59
|
+
cursor: not-allowed;
|
|
60
|
+
}
|
|
61
|
+
|
|
59
62
|
.weda-uploader-pc .weda-uploader-pc__action {
|
|
60
63
|
display: none;
|
|
61
64
|
position: absolute;
|
|
@@ -71,10 +74,12 @@
|
|
|
71
74
|
.weui-uploader.horizontal {
|
|
72
75
|
display: flex;
|
|
73
76
|
}
|
|
77
|
+
|
|
74
78
|
.weui-uploader.horizontal .weui-uploader__hd {
|
|
75
79
|
display: inline-block;
|
|
76
80
|
align-self: center;
|
|
77
81
|
}
|
|
82
|
+
|
|
78
83
|
.weda-uploader-pc.horizontal {
|
|
79
84
|
display: flex;
|
|
80
85
|
justify-content: space-between;
|
|
@@ -92,6 +97,7 @@
|
|
|
92
97
|
display: flex;
|
|
93
98
|
flex: 1;
|
|
94
99
|
}
|
|
100
|
+
|
|
95
101
|
.weui-uploader.vertical .weui-uploader__title {
|
|
96
102
|
flex: unset;
|
|
97
103
|
}
|
|
@@ -99,6 +105,7 @@
|
|
|
99
105
|
.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
|
|
100
106
|
padding: 1.14286rem 0;
|
|
101
107
|
}
|
|
108
|
+
|
|
102
109
|
.weda-ui .weui-uploader.vertical .weui-uploader__bd {
|
|
103
110
|
padding: 1.14286rem;
|
|
104
111
|
}
|
|
@@ -3,7 +3,7 @@ import type { CommonFormPropsType } from '../types';
|
|
|
3
3
|
/**
|
|
4
4
|
* H5端
|
|
5
5
|
*/
|
|
6
|
-
export declare function ImageUploaderH5({ title, maxUploadCount, maxSize, acceptTypes, className, id, events, layout, defaultValue, single, requiredFlag, onChange, style, }: H5UploaderProps): JSX.Element;
|
|
6
|
+
export declare function ImageUploaderH5({ title, maxUploadCount, maxSize, acceptTypes, className, id, events, layout, defaultValue, single, disabled, requiredFlag, onChange, style, }: H5UploaderProps): JSX.Element;
|
|
7
7
|
export interface SingleImageProps {
|
|
8
8
|
src: string;
|
|
9
9
|
deleteBySrc: (url: string) => void;
|
|
@@ -10,7 +10,7 @@ const uploadPath = 'weda-uploader';
|
|
|
10
10
|
/**
|
|
11
11
|
* H5端
|
|
12
12
|
*/
|
|
13
|
-
export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, requiredFlag = false, onChange, style, }) {
|
|
13
|
+
export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, disabled = false, requiredFlag = false, onChange, style, }) {
|
|
14
14
|
const cls = classNames({
|
|
15
15
|
'weda-ui': true,
|
|
16
16
|
'weui-cells': true,
|
|
@@ -123,24 +123,23 @@ export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTyp
|
|
|
123
123
|
React.createElement("div", { className: "weui-uploader__file-content" },
|
|
124
124
|
progress,
|
|
125
125
|
"%")))),
|
|
126
|
-
showAdd && (React.createElement("div", { className: "weui-uploader__input-box" },
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
} })))))));
|
|
126
|
+
showAdd && (React.createElement("div", { className: "weui-uploader__input-box" }, !disabled && (React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
|
|
127
|
+
const files = [...e.target.files];
|
|
128
|
+
if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
|
|
129
|
+
weui.alert('请上传不超过10M的图片');
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
132
|
+
if (files.length > finalMaxImgCount) {
|
|
133
|
+
// 防止一下子选择过多文件
|
|
134
|
+
weui.alert(`最多只能上传${finalMaxImgCount}张图片,请重新选择`);
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
if (fileIdList.length + files.length > finalMaxImgCount) {
|
|
138
|
+
weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
|
|
139
|
+
return false;
|
|
140
|
+
}
|
|
141
|
+
files.forEach((f) => uploadToTcb(f));
|
|
142
|
+
} }))))))));
|
|
144
143
|
}
|
|
145
144
|
function SingleImage({ src, deleteBySrc }) {
|
|
146
145
|
const [error, setError] = React.useState(false);
|
|
@@ -36,7 +36,7 @@ export function UploaderPC({ layout, className, id, style, title, tips, ...props
|
|
|
36
36
|
}
|
|
37
37
|
export function UploaderPCInner(props) {
|
|
38
38
|
const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, value: defaultValue, // 需要兼容 cloud:和https: 协议,需要兼容 字符串和字符串数组
|
|
39
|
-
acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, onChange, } = props;
|
|
39
|
+
acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, } = props;
|
|
40
40
|
// 上传中
|
|
41
41
|
const [uploading, setUploading] = React.useState(false);
|
|
42
42
|
//上传进度
|
|
@@ -146,13 +146,16 @@ export function UploaderPCInner(props) {
|
|
|
146
146
|
"\u4E0A\u4F20",
|
|
147
147
|
progress,
|
|
148
148
|
"%..."))))),
|
|
149
|
-
React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, ((
|
|
149
|
+
React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, disabled ? (React.createElement("li", { className: "_weda-fn-upload-result__item wedatea2td-disabled" },
|
|
150
|
+
React.createElement("div", { className: "_weda-fn-upload-result__status" },
|
|
151
|
+
React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
|
|
152
|
+
React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))) : (((!single && fileIDList.length < maxUploadCount) ||
|
|
150
153
|
(single && fileIDList.length < 1)) && ( // single 模式时,仅当数组为空时显示
|
|
151
154
|
React.createElement(Upload, { ...extraProps, beforeUpload: beforeHandle },
|
|
152
155
|
React.createElement("li", { className: "_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" },
|
|
153
156
|
React.createElement("div", { className: "_weda-fn-upload-result__status" },
|
|
154
157
|
React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
|
|
155
|
-
React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))))))));
|
|
158
|
+
React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle))))))))));
|
|
156
159
|
}
|
|
157
160
|
export const TcbImage = (props) => {
|
|
158
161
|
const { fileID, isZoom, ...rest } = props;
|
|
@@ -27,6 +27,21 @@
|
|
|
27
27
|
margin: 5PX 0PX 5PX 0PX !important;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
.weda-richText .bf-controlbar .control-item.button-indent-increase,
|
|
31
|
+
.weda-richText .bf-controlbar .control-item.button-indent-decrease,
|
|
32
|
+
.weda-richText .bf-controlbar .control-item[data-alignment='left'],
|
|
33
|
+
.weda-richText .bf-controlbar .control-item[data-alignment='center'],
|
|
34
|
+
.weda-richText .bf-controlbar .control-item[data-alignment='right'],
|
|
35
|
+
.weda-richText .bf-controlbar .control-item[data-alignment='justify'],
|
|
36
|
+
.weda-richText .bf-controlbar .control-item.link-editor-dropdown,
|
|
37
|
+
.weda-richText .bf-controlbar .control-item[data-title='清除链接'] {
|
|
38
|
+
margin-top: 0 !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.weda-richText .weda-formcells__content .weui-cell_form {
|
|
42
|
+
padding-top: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
30
45
|
.weda-richText .headings-dropdown {
|
|
31
46
|
min-width: auto !important;
|
|
32
47
|
}
|
|
@@ -40,11 +55,6 @@
|
|
|
40
55
|
min-width: auto !important;
|
|
41
56
|
}
|
|
42
57
|
|
|
43
|
-
.weda-richText .weda-formcells__content .weui-cell {
|
|
44
|
-
padding-left: 0 !important;
|
|
45
|
-
padding-right: 0 !important;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
58
|
.weda-richText {
|
|
49
59
|
width: 100%;
|
|
50
60
|
}
|
|
@@ -89,5 +99,9 @@
|
|
|
89
99
|
}
|
|
90
100
|
|
|
91
101
|
.weda-richText .weda-formcells__content.weui-flex__item {
|
|
92
|
-
margin-
|
|
102
|
+
margin-top: 1.14286rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.weda-richText .bf-font-size-dropdown {
|
|
106
|
+
min-width: 4.14286rem;
|
|
93
107
|
}
|
|
@@ -21,14 +21,13 @@ declare function RichText({ id, style, className, events, label, labelVisible, v
|
|
|
21
21
|
declare namespace RichText {
|
|
22
22
|
var defaultProps: {
|
|
23
23
|
events: {};
|
|
24
|
-
style: {
|
|
25
|
-
width: string;
|
|
26
|
-
};
|
|
24
|
+
style: {};
|
|
27
25
|
label: string;
|
|
28
26
|
labelVisible: boolean;
|
|
29
27
|
name: string;
|
|
30
28
|
value: string;
|
|
31
29
|
readOnly: boolean;
|
|
30
|
+
disabled: boolean;
|
|
32
31
|
layout: string;
|
|
33
32
|
requiredFlag: boolean;
|
|
34
33
|
maxSize: number;
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { useSetState } from '../../utils/useSetState';
|
|
3
3
|
import classNames from '../../utils/classnames';
|
|
4
|
-
import Editor, { convertEditorStateToHTML } from 'kedao';
|
|
5
|
-
import {
|
|
4
|
+
import Editor, { EditorState, convertEditorStateToHTML } from 'kedao';
|
|
5
|
+
import { insertMedias, handleKeyCommand } from 'kedao/lib/utils';
|
|
6
6
|
import { createStateFromContent } from 'kedao/lib/editor';
|
|
7
|
-
import { getCloudInstance
|
|
7
|
+
import { getCloudInstance } from '../../utils/tcb';
|
|
8
8
|
import { message, Button, Input, Modal, Progress, Upload, Text, } from 'tea-component';
|
|
9
9
|
import { v4 as uuidv4 } from 'uuid';
|
|
10
10
|
import { defaultBase64 } from './const';
|
|
11
11
|
import { renderDecorator } from '../form/renderDecorator';
|
|
12
12
|
import { usePlatform } from '../../utils/platform';
|
|
13
13
|
import './index.css';
|
|
14
|
+
import styleM from './richtext.module.css';
|
|
14
15
|
import { useSyncedRef } from '@react-hookz/web';
|
|
16
|
+
import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
|
|
15
17
|
// 默认图片类型
|
|
16
18
|
const IMAGE_TYPES = [
|
|
17
19
|
'image/jpeg',
|
|
@@ -21,6 +23,36 @@ const IMAGE_TYPES = [
|
|
|
21
23
|
'image/tiff',
|
|
22
24
|
'image/svg+xml',
|
|
23
25
|
];
|
|
26
|
+
const defaultControls = [
|
|
27
|
+
'undo',
|
|
28
|
+
'redo',
|
|
29
|
+
'separator',
|
|
30
|
+
'headings',
|
|
31
|
+
'separator',
|
|
32
|
+
'font-size',
|
|
33
|
+
'separator',
|
|
34
|
+
'line-height',
|
|
35
|
+
'letter-spacing',
|
|
36
|
+
'text-color',
|
|
37
|
+
'bold',
|
|
38
|
+
'italic',
|
|
39
|
+
'underline',
|
|
40
|
+
'strike-through',
|
|
41
|
+
'superscript',
|
|
42
|
+
'subscript',
|
|
43
|
+
'remove-styles',
|
|
44
|
+
'emoji',
|
|
45
|
+
'text-indent',
|
|
46
|
+
'text-align',
|
|
47
|
+
'list-ul',
|
|
48
|
+
'list-ol',
|
|
49
|
+
'blockquote',
|
|
50
|
+
'code',
|
|
51
|
+
'link',
|
|
52
|
+
'hr',
|
|
53
|
+
'media',
|
|
54
|
+
'clear',
|
|
55
|
+
];
|
|
24
56
|
export default function RichText({
|
|
25
57
|
// 系统属性
|
|
26
58
|
id, style, className, events,
|
|
@@ -37,37 +69,75 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
|
|
|
37
69
|
const isH5 = platform === 'h5';
|
|
38
70
|
const subCls = classNames({
|
|
39
71
|
'weui-cell': isH5,
|
|
40
|
-
'weui-cell_active': isH5,
|
|
72
|
+
// 'weui-cell_active': isH5,
|
|
41
73
|
'weui-cell_form': isH5,
|
|
42
74
|
'weui-cell_disabled': isH5 && disabled,
|
|
43
75
|
});
|
|
76
|
+
const previousValueRef = useRef();
|
|
44
77
|
const onDataChange = function (value) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
78
|
+
if (previousValueRef.current !== value) {
|
|
79
|
+
events.change &&
|
|
80
|
+
events.change({ value: value === '<p></p>' ? '' : value });
|
|
81
|
+
if (onChange) {
|
|
82
|
+
if (value === '<p></p>') {
|
|
83
|
+
onChange('');
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
onChange(value);
|
|
87
|
+
}
|
|
52
88
|
}
|
|
53
89
|
}
|
|
90
|
+
previousValueRef.current = value;
|
|
54
91
|
};
|
|
55
92
|
useEffect(() => {
|
|
56
93
|
const state = createStateFromContent(initialValue, {});
|
|
57
94
|
setEditorState(state);
|
|
58
95
|
}, []);
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
96
|
+
const excludeControls = useMemo(() => {
|
|
97
|
+
const result = [
|
|
98
|
+
'media',
|
|
99
|
+
'fullscreen',
|
|
100
|
+
'line-height',
|
|
101
|
+
'letter-spacing',
|
|
102
|
+
'emoji',
|
|
103
|
+
'superscript',
|
|
104
|
+
'subscript',
|
|
105
|
+
];
|
|
106
|
+
if (isH5) {
|
|
107
|
+
result.push('separator', 'undo', 'redo', 'blockquote', 'code', 'link', 'hr', 'list-ul', 'list-ol', 'hr', 'clear', 'text-indent',
|
|
108
|
+
// 'font-size',
|
|
109
|
+
'headings', 'remove-styles', 'text-align');
|
|
110
|
+
}
|
|
111
|
+
return result;
|
|
112
|
+
}, [isH5]);
|
|
113
|
+
const extendControls = useMemo(() => {
|
|
114
|
+
if (!isH5) {
|
|
115
|
+
return [
|
|
116
|
+
{
|
|
117
|
+
key: 'richtext-uploader',
|
|
118
|
+
type: 'component',
|
|
119
|
+
component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
|
|
120
|
+
const state = insertMedias(latestEditorState.current, [
|
|
121
|
+
{ type: 'IMAGE', url },
|
|
122
|
+
]);
|
|
123
|
+
setEditorState((curState) => {
|
|
124
|
+
const currentSelection = curState.getSelection();
|
|
125
|
+
EditorState.forceSelection(state, currentSelection);
|
|
126
|
+
return state;
|
|
127
|
+
});
|
|
128
|
+
} })),
|
|
129
|
+
},
|
|
130
|
+
];
|
|
131
|
+
}
|
|
132
|
+
}, [
|
|
133
|
+
acceptTypes,
|
|
134
|
+
maxSize,
|
|
135
|
+
cloudPath,
|
|
136
|
+
latestEditorState,
|
|
137
|
+
insertMedias,
|
|
138
|
+
setEditorState,
|
|
139
|
+
isH5,
|
|
140
|
+
]);
|
|
71
141
|
// 修改img显示逻辑
|
|
72
142
|
const blockRenderFn = (contentBlock, { editor, editorState }) => {
|
|
73
143
|
var _a;
|
|
@@ -87,12 +157,8 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
|
|
|
87
157
|
}
|
|
88
158
|
};
|
|
89
159
|
const richTextEl = (React.createElement("div", { className: subCls },
|
|
90
|
-
React.createElement("div", { style:
|
|
91
|
-
|
|
92
|
-
backgroundColor: '#fff',
|
|
93
|
-
...style,
|
|
94
|
-
} },
|
|
95
|
-
React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
|
|
160
|
+
React.createElement("div", { style: style, className: styleM.richtextInner },
|
|
161
|
+
React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, disabled: disabled, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
|
|
96
162
|
setEditorState(s);
|
|
97
163
|
const html = convertEditorStateToHTML(s, {});
|
|
98
164
|
onDataChange(html);
|
|
@@ -101,11 +167,10 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
|
|
|
101
167
|
content: '富文本长度过长,可能导致保存失败',
|
|
102
168
|
});
|
|
103
169
|
}
|
|
104
|
-
},
|
|
170
|
+
}, controls: defaultControls, excludeControls: excludeControls,
|
|
105
171
|
/** @ts-ignore jsx */
|
|
106
172
|
extendControls: extendControls, handleKeyCommand: (command, editState) => {
|
|
107
|
-
const newState =
|
|
108
|
-
console.log(newState, editState, command);
|
|
173
|
+
const newState = handleKeyCommand(editState, command);
|
|
109
174
|
if (newState) {
|
|
110
175
|
setEditorState(newState);
|
|
111
176
|
return true;
|
|
@@ -158,10 +223,8 @@ export const CustomUploader = (props) => {
|
|
|
158
223
|
};
|
|
159
224
|
return (React.createElement(React.Fragment, null,
|
|
160
225
|
React.createElement("button", { role: "richtext", type: "button", "data-title": "\u5A92\u4F53\u4E0A\u4F20", className: "control-item button", onClick: () => setState({ visible: true }) },
|
|
161
|
-
React.createElement("svg", {
|
|
162
|
-
React.createElement("path", { d: "
|
|
163
|
-
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" }),
|
|
164
|
-
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" }))),
|
|
226
|
+
React.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
227
|
+
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" }))),
|
|
165
228
|
React.createElement(Modal, { onClose: () => {
|
|
166
229
|
setState({ visible: false });
|
|
167
230
|
}, visible: visible, maskClosable: true },
|
|
@@ -235,38 +298,28 @@ export const CustomUploader = (props) => {
|
|
|
235
298
|
React.createElement(Text, { theme: "weak" }, "/\u62D6\u62FD\u5230\u6B64\u533A\u57DF")))))),
|
|
236
299
|
uploading && (React.createElement(Progress, { style: { marginTop: '10px' }, percent: percent })))));
|
|
237
300
|
};
|
|
301
|
+
const Img = React.memo(function Img(props) {
|
|
302
|
+
const { src, style, onError } = props;
|
|
303
|
+
const { data: realSrc, error } = useTempUrl(src);
|
|
304
|
+
const realstyle = useMemo(() => {
|
|
305
|
+
if (error) {
|
|
306
|
+
return { ...style, width: '80px' };
|
|
307
|
+
}
|
|
308
|
+
return style;
|
|
309
|
+
}, [error, style]);
|
|
310
|
+
return (React.createElement("img", { src: error ? defaultBase64 : realSrc, style: realstyle, onError: () => {
|
|
311
|
+
onError === null || onError === void 0 ? void 0 : onError();
|
|
312
|
+
} }));
|
|
313
|
+
});
|
|
314
|
+
const imgStyle = { maxWidth: '100%' };
|
|
238
315
|
export const RichTextImg = ({ contentState, block }) => {
|
|
239
316
|
const blockData = contentState.getEntity(block.getEntityAt(0)).getData();
|
|
240
317
|
const { url } = blockData || {};
|
|
241
|
-
|
|
242
|
-
const [width, setWidth] = React.useState('unset');
|
|
243
|
-
useEffect(() => {
|
|
244
|
-
const getSrc = async () => {
|
|
245
|
-
try {
|
|
246
|
-
if (url.includes('cloud://')) {
|
|
247
|
-
const _src = await getTempFileURL(url);
|
|
248
|
-
setSrc(_src || url);
|
|
249
|
-
}
|
|
250
|
-
else {
|
|
251
|
-
setSrc(url);
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
catch (e) {
|
|
255
|
-
message.error({
|
|
256
|
-
content: `显示图片失败:${e.message || '未知原因'}`,
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
getSrc();
|
|
261
|
-
}, [url]);
|
|
262
|
-
return (src && (React.createElement(React.Fragment, null,
|
|
318
|
+
return (url && (React.createElement(React.Fragment, null,
|
|
263
319
|
React.createElement("div", { className: "bf-media" },
|
|
264
320
|
React.createElement("div", { draggable: "true", className: "bf-image", style: { float: 'left' } },
|
|
265
321
|
React.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
|
|
266
|
-
React.createElement(
|
|
267
|
-
setSrc(defaultBase64);
|
|
268
|
-
setWidth('80px');
|
|
269
|
-
} }),
|
|
322
|
+
React.createElement(Img, { src: url, style: imgStyle }),
|
|
270
323
|
React.createElement("div", { className: "bf-pre-csize" }))),
|
|
271
324
|
React.createElement("div", { style: {
|
|
272
325
|
clear: 'both',
|
|
@@ -278,13 +331,14 @@ export const RichTextImg = ({ contentState, block }) => {
|
|
|
278
331
|
RichText.defaultProps = {
|
|
279
332
|
// 系统属性
|
|
280
333
|
events: {},
|
|
281
|
-
style: {
|
|
334
|
+
style: {},
|
|
282
335
|
// 组件属性
|
|
283
336
|
label: '标题',
|
|
284
337
|
labelVisible: true,
|
|
285
338
|
name: 'formRichText',
|
|
286
339
|
value: '',
|
|
287
|
-
readOnly:
|
|
340
|
+
readOnly: true,
|
|
341
|
+
disabled: true,
|
|
288
342
|
layout: 'vertical',
|
|
289
343
|
requiredFlag: false,
|
|
290
344
|
maxSize: 10,
|
package/dist/web/utils/tcb.d.ts
CHANGED
|
@@ -11,7 +11,11 @@ export function getTempFileURL(data: any): Promise<any>;
|
|
|
11
11
|
/**
|
|
12
12
|
* 云函数获取数据
|
|
13
13
|
*/
|
|
14
|
-
export function callDataSource(param: any): Promise<any>;
|
|
14
|
+
export function callDataSource(param: any, throwError?: boolean): Promise<any>;
|
|
15
|
+
/**
|
|
16
|
+
* 云函数获取连接器数据
|
|
17
|
+
*/
|
|
18
|
+
export function callConnector(param: any, throwError?: boolean): Promise<any>;
|
|
15
19
|
/**
|
|
16
20
|
* 云API:获取用户自定义导航内容
|
|
17
21
|
* param
|
package/dist/web/utils/tcb.js
CHANGED
|
@@ -34,19 +34,42 @@ export async function getTempFileURL(data) {
|
|
|
34
34
|
/**
|
|
35
35
|
* 云函数获取数据
|
|
36
36
|
*/
|
|
37
|
-
export async function callDataSource(param) {
|
|
37
|
+
export async function callDataSource(param, throwError = false) {
|
|
38
38
|
var _a, _b, _c;
|
|
39
|
-
const {
|
|
39
|
+
const { dataSourceName, methodName, params } = param;
|
|
40
40
|
try {
|
|
41
41
|
const res = await ((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.callDataSource) === null || _c === void 0 ? void 0 : _c.call(_b, {
|
|
42
|
+
dataSourceName,
|
|
43
|
+
methodName,
|
|
42
44
|
params,
|
|
45
|
+
}));
|
|
46
|
+
return res;
|
|
47
|
+
}
|
|
48
|
+
catch (error) {
|
|
49
|
+
console.error('callDataSource: ', error);
|
|
50
|
+
if (throwError)
|
|
51
|
+
throw error;
|
|
52
|
+
return {};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* 云函数获取连接器数据
|
|
57
|
+
*/
|
|
58
|
+
export async function callConnector(param, throwError = false) {
|
|
59
|
+
var _a, _b, _c;
|
|
60
|
+
const { dataSourceName, methodName, params } = param;
|
|
61
|
+
try {
|
|
62
|
+
const res = await ((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.callConnector) === null || _c === void 0 ? void 0 : _c.call(_b, {
|
|
43
63
|
dataSourceName,
|
|
44
64
|
methodName,
|
|
65
|
+
params,
|
|
45
66
|
}));
|
|
46
67
|
return res;
|
|
47
68
|
}
|
|
48
69
|
catch (error) {
|
|
49
|
-
console.error('
|
|
70
|
+
console.error('callConnector: ', error);
|
|
71
|
+
if (throwError)
|
|
72
|
+
throw error;
|
|
50
73
|
return {};
|
|
51
74
|
}
|
|
52
75
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useTempUrl(cloudId: string): import("swr").SWRResponse<any, any>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import useSWR from 'swr';
|
|
2
|
+
import { getTempFileURL } from './tcb';
|
|
3
|
+
export function useTempUrl(cloudId) {
|
|
4
|
+
const prefix = 'tcb:cloud-id:temp-url';
|
|
5
|
+
const key = `${prefix}:${cloudId}`;
|
|
6
|
+
return useSWR(key, async () => {
|
|
7
|
+
if (!cloudId.startsWith('cloud://')) {
|
|
8
|
+
return cloudId;
|
|
9
|
+
}
|
|
10
|
+
const tempUrl = await getTempFileURL(cloudId);
|
|
11
|
+
return tempUrl;
|
|
12
|
+
});
|
|
13
|
+
}
|