@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6
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/AutoBox/index.js +72 -85
- package/AutoTips/index.js +72 -95
- package/Badge/index.js +17 -16
- package/Breadcrumbs/index.js +57 -73
- package/Button/index.js +90 -118
- package/ButtonGroup/index.js +30 -33
- package/Carousel/index.js +29 -33
- package/Cascader/index.js +9 -10
- package/Checkbox/index.js +28 -35
- package/CheckboxGroup/index.js +43 -58
- package/Collapse/index.js +52 -49
- package/CollapseBox/index.js +65 -70
- package/CollapseLayout/index.js +106 -101
- package/ColorPicker/index.js +3 -3
- package/ComboSelect/index.js +260 -337
- package/ComboSelect/lang/en_US.d.ts +1 -0
- package/ComboSelect/lang/index.d.ts +2 -0
- package/ComboSelect/lang/zh_CN.d.ts +1 -0
- package/ComboSelect/utils.d.ts +6 -0
- package/Container/index.js +17 -21
- package/CopyText/index.js +50 -83
- package/DatePicker/index.js +24 -27
- package/Descriptions/index.js +50 -59
- package/Desktop/index.js +161 -180
- package/DragVerify/index.js +77 -113
- package/Drawer/index.js +80 -95
- package/Dropdown/index.js +3 -3
- package/DynamicMultiBox/index.js +222 -224
- package/DynamicMultiBox/interface.d.ts +7 -0
- package/Empty/index.js +26 -28
- package/Form/index.js +70 -74
- package/FormItem/index.js +18 -15
- package/FunctionModal/index.js +7 -14
- package/GlobalContext/index.js +17 -20
- package/Help/index.js +9 -12
- package/HelperText/index.js +11 -11
- package/InputLang/index.js +104 -124
- package/InputNumber/index.js +62 -81
- package/Label/index.js +19 -21
- package/Loading/index.js +11 -10
- package/Menu/index.js +302 -371
- package/Message/index.js +104 -113
- package/Modal/index.js +122 -148
- package/MultiBox/index.d.ts +5 -0
- package/MultiBox/index.js +111 -115
- package/Notification/index.js +105 -103
- package/OperateBtn/index.d.ts +3 -0
- package/OperateBtn/index.js +77 -107
- package/PageHeader/index.js +327 -406
- package/Pagination/index.js +107 -137
- package/ParauiProvider/index.js +20 -22
- package/PasswordRules/index.js +36 -40
- package/PopConfirm/index.js +60 -77
- package/Popover/index.js +12 -12
- package/Progress/index.js +72 -74
- package/Querying/index.js +22 -23
- package/README.md +2 -0
- package/Radio/index.js +27 -34
- package/RadioGroup/index.js +38 -52
- package/Search/index.js +34 -43
- package/Select/index.js +281 -345
- package/SelectInput/index.js +8 -13
- package/Selector/index.js +582 -796
- package/SelectorPicker/index.js +113 -134
- package/SingleBox/index.d.ts +5 -0
- package/SingleBox/index.js +92 -88
- package/Slider/index.js +46 -57
- package/Status/index.js +14 -13
- package/Stepper/index.js +24 -25
- package/Styles/theme.scss +9 -9
- package/Switch/index.js +32 -35
- package/Table/index.js +360 -494
- package/Tabs/index.js +100 -100
- package/Tag/index.js +64 -82
- package/TextEditor/index.js +78 -100
- package/TextField/index.js +142 -183
- package/TimePicker/index.js +29 -28
- package/Timeline/index.js +50 -47
- package/Title/index.js +32 -34
- package/ToggleButton/index.js +29 -29
- package/Tooltip/index.js +52 -56
- package/Transfer/index.js +117 -154
- package/Tree/index.js +9 -10
- package/Upload/index.js +125 -143
- package/Upload/interface.d.ts +2 -0
- package/_verture/{constant-0d9802f7.js → constant-5317fc89.js} +2 -2
- package/_verture/{index-5a7e2438.js → index-3cdaba96.js} +967 -934
- package/_verture/{index-b1f80962.js → index-4fafd0a0.js} +6 -8
- package/_verture/{index-024bbc9b.js → index-775ad32d.js} +29 -25
- package/_verture/{index-05f7bf11.js → index-c568f272.js} +2 -2
- package/_verture/{index-232d890b.js → index-d63bd287.js} +1 -1
- package/_verture/index-da9097d3.js +239 -0
- package/_verture/{index-9331b116.js → index-e0f9064d.js} +125 -134
- package/_verture/intl-f2f27722.js +69 -0
- package/_verture/{modalContext-736ff215.js → modalContext-8534f23d.js} +36 -64
- package/_verture/{slicedToArray-a8206399.js → slicedToArray-75fa4188.js} +15 -2
- package/_verture/{toConsumableArray-8f4c9589.js → toConsumableArray-c7a8028f.js} +1 -1
- package/_verture/{useFormatMessage-703f8b20.js → useFormatMessage-eb13cf56.js} +5 -4
- package/_verture/{useGlobalProps-1b846a65.js → useGlobalProps-1e416658.js} +4 -3
- package/_verture/{usePopupContainer-87febeb9.js → usePopupContainer-635f66f4.js} +16 -15
- package/_verture/{util-7e1fb1e2.js → util-82646c4f.js} +5 -4
- package/_verture/utils-c17b5265.js +97 -0
- package/index.js +24 -23
- package/locale/en-US.d.ts +1 -0
- package/locale/index.d.ts +2 -0
- package/locale/index.js +10 -8
- package/locale/zh-CN.d.ts +1 -0
- package/package.json +11 -10
- package/umd/AutoBox.js +9 -8
- package/umd/AutoTips.js +9 -8
- package/umd/Badge.js +1 -1
- package/umd/Breadcrumbs.js +9 -8
- package/umd/Button.js +9 -8
- package/umd/ButtonGroup.js +9 -8
- package/umd/Carousel.js +5 -5
- package/umd/Cascader.js +9 -8
- package/umd/Checkbox.js +9 -8
- package/umd/CheckboxGroup.js +9 -8
- package/umd/Collapse.js +8 -7
- package/umd/CollapseBox.js +1 -1
- package/umd/CollapseLayout.js +4 -4
- package/umd/ColorPicker.js +1 -1
- package/umd/ComboSelect.js +9 -8
- package/umd/Container.js +1 -1
- package/umd/CopyText.js +9 -8
- package/umd/DatePicker.js +9 -8
- package/umd/Descriptions.js +9 -8
- package/umd/Desktop.js +9 -8
- package/umd/DragVerify.js +4 -4
- package/umd/Drawer.js +9 -8
- package/umd/Dropdown.js +6 -5
- package/umd/DynamicMultiBox.js +11 -10
- package/umd/Empty.js +1 -1
- package/umd/Form.js +9 -8
- package/umd/FormItem.js +9 -8
- package/umd/FunctionModal.js +9 -8
- package/umd/GlobalContext.js +1 -1
- package/umd/Help.js +9 -8
- package/umd/HelperText.js +1 -1
- package/umd/InputLang.js +9 -8
- package/umd/InputNumber.js +9 -8
- package/umd/Label.js +9 -8
- package/umd/Loading.js +4 -4
- package/umd/Menu.js +4 -4
- package/umd/Message.js +4 -4
- package/umd/Modal.js +9 -8
- package/umd/MultiBox.js +9 -8
- package/umd/Notification.js +8 -7
- package/umd/OperateBtn.js +9 -8
- package/umd/PageHeader.js +9 -8
- package/umd/Pagination.js +9 -8
- package/umd/ParauiProvider.js +1 -1
- package/umd/PasswordRules.js +4 -4
- package/umd/PopConfirm.js +9 -8
- package/umd/Popover.js +9 -8
- package/umd/Progress.js +5 -5
- package/umd/Querying.js +1 -1
- package/umd/Radio.js +9 -8
- package/umd/RadioGroup.js +9 -8
- package/umd/Search.js +9 -8
- package/umd/Select.js +9 -8
- package/umd/SelectInput.js +9 -8
- package/umd/Selector.js +9 -8
- package/umd/SelectorPicker.js +9 -8
- package/umd/SingleBox.js +9 -8
- package/umd/Slider.js +6 -5
- package/umd/Status.js +4 -4
- package/umd/Stepper.js +9 -8
- package/umd/Switch.js +9 -8
- package/umd/Table.js +9 -8
- package/umd/Tabs.js +9 -8
- package/umd/Tag.js +9 -8
- package/umd/TextEditor.js +22 -21
- package/umd/TextField.js +9 -8
- package/umd/TimePicker.js +9 -8
- package/umd/Timeline.js +1 -1
- package/umd/Title.js +9 -8
- package/umd/ToggleButton.js +9 -8
- package/umd/Tooltip.js +9 -8
- package/umd/Transfer.js +10 -9
- package/umd/Tree.js +9 -8
- package/umd/Upload.js +10 -9
- package/umd/locale.js +1 -1
- package/_verture/index-e9007d6a.js +0 -236
- package/_verture/intl-5c1ec055.js +0 -81
- package/_verture/unsupportedIterableToArray-cb478f24.js +0 -16
- package/_verture/utils-418da0a4.js +0 -73
- /package/_verture/{typeof-c310ee4a.js → typeof-b240b062.js} +0 -0
package/Tag/index.js
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
|
|
2
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
3
1
|
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
4
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
3
|
import { useState, useRef, useEffect } from 'react';
|
|
6
4
|
import CloseIcon from '@para-ui/icons/Close';
|
|
7
5
|
import EditIcon from '@para-ui/icons/EditOutline';
|
|
8
6
|
import clsx from 'clsx';
|
|
9
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-
|
|
7
|
+
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-c7a8028f.js';
|
|
10
8
|
import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
|
|
11
|
-
import {
|
|
9
|
+
import { _ as _slicedToArray } from '../_verture/slicedToArray-75fa4188.js';
|
|
10
|
+
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
12
11
|
import AutoTips from '../AutoTips/index.js';
|
|
13
12
|
import { t as tinycolor } from '../_verture/tinycolor-ece3542d.js';
|
|
14
13
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
15
14
|
import Plus from '@para-ui/icons/Plus';
|
|
16
|
-
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
17
15
|
import '../Tooltip/index.js';
|
|
18
16
|
import 'rc-tooltip';
|
|
19
17
|
import 'rc-tooltip/lib/placements';
|
|
@@ -196,104 +194,88 @@ var TagGroup = function TagGroup(props) {
|
|
|
196
194
|
};
|
|
197
195
|
|
|
198
196
|
//预设颜色列表
|
|
199
|
-
|
|
197
|
+
const PresetColors = ['blue', 'green', 'yellow', 'red'];
|
|
200
198
|
//tag
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
style = props.style,
|
|
224
|
-
visibleTag = props.visible,
|
|
225
|
-
editInputWidth = props.editInputWidth,
|
|
226
|
-
tipMaxWidth = props.tipMaxWidth,
|
|
199
|
+
const InternalTag = props => {
|
|
200
|
+
const {
|
|
201
|
+
type = 'normal',
|
|
202
|
+
className,
|
|
203
|
+
children,
|
|
204
|
+
icon,
|
|
205
|
+
color,
|
|
206
|
+
onClose,
|
|
207
|
+
onEdit,
|
|
208
|
+
getWidth,
|
|
209
|
+
tagChange,
|
|
210
|
+
editInputClassName,
|
|
211
|
+
closeIcon,
|
|
212
|
+
closable = false,
|
|
213
|
+
editable = false,
|
|
214
|
+
size = 'larage',
|
|
215
|
+
maxWidth,
|
|
216
|
+
style,
|
|
217
|
+
visible: visibleTag,
|
|
218
|
+
editInputWidth,
|
|
219
|
+
tipMaxWidth
|
|
220
|
+
} = props,
|
|
227
221
|
restProps = __rest(props, ["type", "className", "children", "icon", "color", "onClose", "onEdit", "getWidth", "tagChange", "editInputClassName", "closeIcon", "closable", "editable", "size", "maxWidth", "style", "visible", "editInputWidth", "tipMaxWidth"]);
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
238
|
-
inputValue = _useState6[0],
|
|
239
|
-
setInputValue = _useState6[1]; // 编辑输入框的值
|
|
240
|
-
var _useState7 = useState(''),
|
|
241
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
242
|
-
inputWidth = _useState8[0],
|
|
243
|
-
setInputWidth = _useState8[1]; // 编辑输入框的值
|
|
244
|
-
var _useState9 = useState(false),
|
|
245
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
246
|
-
closeIconEnter = _useState10[0],
|
|
247
|
-
setCloseIconEnter = _useState10[1]; // 鼠标是否进入closeIcon
|
|
248
|
-
var _useState11 = useState(false),
|
|
249
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
250
|
-
editIconEnter = _useState12[0],
|
|
251
|
-
setEditIconEnter = _useState12[1]; // 鼠标是否进入closeIcon
|
|
252
|
-
var inputRef = useRef(); //input ref
|
|
253
|
-
var tagRef = useRef(); //tagRef ref
|
|
254
|
-
useEffect(function () {
|
|
222
|
+
const [visible, setVisible] = useState(true); //显示tag
|
|
223
|
+
const [inputVisible, setInputVisible] = useState(false); //显示输入框
|
|
224
|
+
const [inputValue, setInputValue] = useState(''); // 编辑输入框的值
|
|
225
|
+
const [inputWidth, setInputWidth] = useState(''); // 编辑输入框的值
|
|
226
|
+
const [closeIconEnter, setCloseIconEnter] = useState(false); // 鼠标是否进入closeIcon
|
|
227
|
+
const [editIconEnter, setEditIconEnter] = useState(false); // 鼠标是否进入closeIcon
|
|
228
|
+
const inputRef = useRef(); //input ref
|
|
229
|
+
const tagRef = useRef(); //tagRef ref
|
|
230
|
+
useEffect(() => {
|
|
255
231
|
if ('visible' in props) {
|
|
256
232
|
setVisible(!!visibleTag);
|
|
257
233
|
}
|
|
258
234
|
}, [visibleTag]);
|
|
259
|
-
useEffect(
|
|
235
|
+
useEffect(() => {
|
|
260
236
|
if (!tagRef.current) return;
|
|
261
|
-
|
|
237
|
+
const {
|
|
238
|
+
offsetWidth
|
|
239
|
+
} = tagRef.current;
|
|
262
240
|
setInputWidth(offsetWidth);
|
|
263
241
|
getWidth && getWidth(offsetWidth);
|
|
264
242
|
}, [tagRef, inputVisible]);
|
|
265
|
-
useEffect(
|
|
243
|
+
useEffect(() => {
|
|
266
244
|
if (typeof children === 'string') {
|
|
267
245
|
setInputValue(children);
|
|
268
246
|
}
|
|
269
247
|
}, [children]);
|
|
270
248
|
//是否预设颜色
|
|
271
|
-
|
|
249
|
+
const isPresetColor = () => {
|
|
272
250
|
if (!color) return false;
|
|
273
251
|
return PresetColors.includes(color);
|
|
274
252
|
};
|
|
275
253
|
//tag style
|
|
276
|
-
|
|
254
|
+
const tagStyle = Object.assign({
|
|
277
255
|
color: color && !isPresetColor() ? color : undefined,
|
|
278
256
|
backgroundColor: color && !isPresetColor() ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
|
|
279
257
|
borderColor: color && !isPresetColor() && type === 'outline' ? color : undefined,
|
|
280
|
-
maxWidth
|
|
258
|
+
maxWidth
|
|
281
259
|
}, style);
|
|
282
260
|
//tag closeIcon style
|
|
283
|
-
|
|
261
|
+
const closeIconStyle = {
|
|
284
262
|
backgroundColor: closeIconEnter ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
|
|
285
263
|
borderRadius: '2px'
|
|
286
264
|
};
|
|
287
265
|
//tag editIcon style
|
|
288
|
-
|
|
266
|
+
const editIconStyle = {
|
|
289
267
|
backgroundColor: editIconEnter ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
|
|
290
268
|
marginRight: children ? size === 'small' ? '2px' : '4px' : undefined,
|
|
291
269
|
borderRadius: '2px'
|
|
292
270
|
};
|
|
293
271
|
//tag cls
|
|
294
|
-
|
|
272
|
+
const tagClassName = clsx("".concat($prefixCls, "-tag"), "".concat($prefixCls, "-tag-").concat(type), "".concat($prefixCls, "-tag-").concat(size), className, {
|
|
273
|
+
["".concat($prefixCls, "-tag-has-color")]: color,
|
|
274
|
+
["".concat($prefixCls, "-tag-hidden")]: !visible,
|
|
275
|
+
["".concat($prefixCls, "-tag-").concat(color)]: isPresetColor()
|
|
276
|
+
});
|
|
295
277
|
//tag close click
|
|
296
|
-
|
|
278
|
+
const handleCloseClick = e => {
|
|
297
279
|
e.stopPropagation();
|
|
298
280
|
onClose === null || onClose === void 0 ? void 0 : onClose(e);
|
|
299
281
|
setCloseIconEnter(false);
|
|
@@ -304,19 +286,19 @@ var InternalTag = function InternalTag(props) {
|
|
|
304
286
|
setVisible(false);
|
|
305
287
|
}
|
|
306
288
|
};
|
|
307
|
-
|
|
289
|
+
const handleCloseEnter = () => {
|
|
308
290
|
setCloseIconEnter(true);
|
|
309
291
|
};
|
|
310
|
-
|
|
292
|
+
const handleCloseLeave = () => {
|
|
311
293
|
setCloseIconEnter(false);
|
|
312
294
|
};
|
|
313
|
-
|
|
295
|
+
const handleEditEnter = () => {
|
|
314
296
|
setEditIconEnter(true);
|
|
315
297
|
};
|
|
316
|
-
|
|
298
|
+
const handleEditLeave = () => {
|
|
317
299
|
setEditIconEnter(false);
|
|
318
300
|
};
|
|
319
|
-
|
|
301
|
+
const handleEditClick = e => {
|
|
320
302
|
e.stopPropagation();
|
|
321
303
|
onEdit && onEdit(e);
|
|
322
304
|
if (e.defaultPrevented) {
|
|
@@ -327,7 +309,7 @@ var InternalTag = function InternalTag(props) {
|
|
|
327
309
|
setInputVisible(true);
|
|
328
310
|
};
|
|
329
311
|
//渲染close icon
|
|
330
|
-
|
|
312
|
+
const renderCloseIcon = () => {
|
|
331
313
|
if (!closable) return null;
|
|
332
314
|
return closeIcon ? jsx("span", Object.assign({
|
|
333
315
|
className: 'tag-close-icon',
|
|
@@ -346,7 +328,7 @@ var InternalTag = function InternalTag(props) {
|
|
|
346
328
|
});
|
|
347
329
|
};
|
|
348
330
|
// 渲染前缀icon
|
|
349
|
-
|
|
331
|
+
const renderPrefixIcon = () => {
|
|
350
332
|
return (editable || icon) && jsx("span", Object.assign({
|
|
351
333
|
className: "tag-edit-icon ".concat(icon ? "tag-custom-icon" : ''),
|
|
352
334
|
style: editIconStyle,
|
|
@@ -364,23 +346,23 @@ var InternalTag = function InternalTag(props) {
|
|
|
364
346
|
}));
|
|
365
347
|
};
|
|
366
348
|
//input change
|
|
367
|
-
|
|
349
|
+
const handleInputChange = e => {
|
|
368
350
|
setInputValue(e.target.value);
|
|
369
351
|
tagChange && tagChange(e.target.value);
|
|
370
352
|
};
|
|
371
353
|
//input confirm
|
|
372
|
-
|
|
354
|
+
const handleInputConfirm = () => {
|
|
373
355
|
setInputVisible(false);
|
|
374
356
|
};
|
|
375
357
|
//input enter
|
|
376
|
-
|
|
358
|
+
const handleInputEnter = e => {
|
|
377
359
|
if (e.keyCode === 13 || e.which === 13) {
|
|
378
360
|
handleInputConfirm();
|
|
379
361
|
}
|
|
380
362
|
};
|
|
381
363
|
//
|
|
382
|
-
|
|
383
|
-
|
|
364
|
+
const renderNewInput = () => {
|
|
365
|
+
const inputCls = clsx("".concat($prefixCls, "-tag-edit-input"), editInputClassName);
|
|
384
366
|
return jsx("input", {
|
|
385
367
|
style: {
|
|
386
368
|
width: editInputWidth || inputWidth,
|
|
@@ -414,6 +396,6 @@ var InternalTag = function InternalTag(props) {
|
|
|
414
396
|
}))
|
|
415
397
|
});
|
|
416
398
|
};
|
|
417
|
-
|
|
399
|
+
const Tag = InternalTag;
|
|
418
400
|
|
|
419
401
|
export { Tag, TagGroup, Tag as default };
|
package/TextEditor/index.js
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
2
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
2
|
import { forwardRef, useState, useEffect, useImperativeHandle, useMemo } from 'react';
|
|
4
3
|
import Label from '../Label/index.js';
|
|
5
4
|
import { Toolbar, Editor } from '@wangeditor/editor-for-react';
|
|
6
5
|
import { i18nChangeLanguage } from '@wangeditor/editor';
|
|
7
6
|
import HelperText from '../HelperText/index.js';
|
|
8
|
-
import { $ as $prefixCls } from '../_verture/constant-
|
|
7
|
+
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
9
8
|
import { UUID } from '@paraview/lib';
|
|
10
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
9
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
11
10
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
12
|
-
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
13
11
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
14
12
|
import '../Help/index.js';
|
|
15
13
|
import '../Tooltip/index.js';
|
|
@@ -71,195 +69,175 @@ styleInject(css_248z$1);
|
|
|
71
69
|
var css_248z = ":root,\n:host {\n --w-e-textarea-bg-color: #fff;\n --w-e-textarea-color: #333;\n --w-e-textarea-border-color: #ccc;\n --w-e-textarea-slight-border-color: #e8e8e8;\n --w-e-textarea-slight-color: #d4d4d4;\n --w-e-textarea-slight-bg-color: #f5f2f0;\n --w-e-textarea-selected-border-color: #B4D5FF;\n --w-e-textarea-handler-bg-color: #4290f7;\n --w-e-toolbar-color: #595959;\n --w-e-toolbar-bg-color: #fff;\n --w-e-toolbar-active-color: #333;\n --w-e-toolbar-active-bg-color: #f1f1f1;\n --w-e-toolbar-disabled-color: #999;\n --w-e-toolbar-border-color: #e8e8e8;\n --w-e-modal-button-bg-color: #fafafa;\n --w-e-modal-button-border-color: #d9d9d9;\n}\n\n.w-e-text-container *,.w-e-toolbar *{box-sizing:border-box;margin:0;outline:none;padding:0}.w-e-text-container blockquote,.w-e-text-container li,.w-e-text-container p,.w-e-text-container td,.w-e-text-container th,.w-e-toolbar *{line-height:1.5}.w-e-text-container{background-color:var(--w-e-textarea-bg-color);color:var(--w-e-textarea-color);height:100%;position:relative}.w-e-text-container .w-e-scroll{-webkit-overflow-scrolling:touch;height:100%}.w-e-text-container [data-slate-editor]{word-wrap:break-word;border-top:1px solid transparent;min-height:100%;outline:0;padding:0 10px;white-space:pre-wrap}.w-e-text-container [data-slate-editor] p{margin:15px 0}.w-e-text-container [data-slate-editor] h1,.w-e-text-container [data-slate-editor] h2,.w-e-text-container [data-slate-editor] h3,.w-e-text-container [data-slate-editor] h4,.w-e-text-container [data-slate-editor] h5{margin:20px 0}.w-e-text-container [data-slate-editor] img{cursor:default;display:inline!important;max-width:100%;min-height:20px;min-width:20px}.w-e-text-container [data-slate-editor] span{text-indent:0}.w-e-text-container [data-slate-editor] [data-selected=true]{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-placeholder{font-style:italic;left:10px;top:17px;width:90%}.w-e-max-length-info,.w-e-text-placeholder{color:var(--w-e-textarea-slight-color);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.w-e-max-length-info{bottom:.5em;right:1em}.w-e-bar{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-color);font-size:14px;padding:0 5px}.w-e-bar svg{fill:var(--w-e-toolbar-color);height:14px;width:14px}.w-e-bar-show{display:flex}.w-e-bar-hidden{display:none}.w-e-hover-bar{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 5px #0000001f;position:absolute}.w-e-toolbar{flex-wrap:wrap;position:relative}.w-e-bar-divider{background-color:var(--w-e-toolbar-border-color);display:inline-flex;height:40px;margin:0 5px;width:1px}.w-e-bar-item{display:flex;height:40px;padding:4px;position:relative;text-align:center}.w-e-bar-item,.w-e-bar-item button{align-items:center;justify-content:center}.w-e-bar-item button{background:transparent;border:none;color:var(--w-e-toolbar-color);cursor:pointer;display:inline-flex;height:32px;overflow:hidden;padding:0 8px;white-space:nowrap}.w-e-bar-item button:hover{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item button .title{margin-left:5px}.w-e-bar-item .active{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item .disabled{color:var(--w-e-toolbar-disabled-color);cursor:not-allowed}.w-e-bar-item .disabled svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-menu-tooltip-v5:before{background-color:var(--w-e-toolbar-active-color);border-radius:5px;color:var(--w-e-toolbar-bg-color);content:attr(data-tooltip);font-size:.75em;opacity:0;padding:5px 10px;position:absolute;text-align:center;top:40px;transition:opacity .6s;visibility:hidden;white-space:pre;z-index:1}.w-e-menu-tooltip-v5:after{border:5px solid transparent;border-bottom:5px solid var(--w-e-toolbar-active-color);content:\"\";opacity:0;position:absolute;top:30px;transition:opacity .6s;visibility:hidden}.w-e-menu-tooltip-v5:hover:after,.w-e-menu-tooltip-v5:hover:before{opacity:1;visibility:visible}.w-e-menu-tooltip-v5.tooltip-right:before{left:100%;top:10px}.w-e-menu-tooltip-v5.tooltip-right:after{border-bottom-color:transparent;border-left-color:transparent;border-right-color:var(--w-e-toolbar-active-color);border-top-color:transparent;left:100%;margin-left:-10px;top:16px}.w-e-bar-item-group .w-e-bar-item-menus-container{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;display:none;left:0;margin-top:40px;position:absolute;top:0;z-index:1}.w-e-bar-item-group:hover .w-e-bar-item-menus-container{display:block}.w-e-select-list{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;left:0;margin-top:40px;max-height:350px;min-width:100px;overflow-y:auto;position:absolute;top:0;z-index:1}.w-e-select-list ul{line-height:1;list-style:none}.w-e-select-list ul .selected{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li{cursor:pointer;padding:7px 0 7px 25px;position:relative;text-align:left;white-space:nowrap}.w-e-select-list ul li:hover{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li svg{left:0;margin-left:5px;margin-top:-7px;position:absolute;top:50%}.w-e-bar-bottom .w-e-select-list{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-drop-panel{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;margin-top:40px;min-width:200px;padding:10px;position:absolute;top:0;z-index:1}.w-e-bar-bottom .w-e-drop-panel{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-modal{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;color:var(--w-e-toolbar-color);font-size:14px;min-height:40px;min-width:100px;padding:20px 15px 0;position:absolute;text-align:left;z-index:1}.w-e-modal .btn-close{cursor:pointer;line-height:1;padding:5px;position:absolute;right:8px;top:7px}.w-e-modal .btn-close svg{fill:var(--w-e-toolbar-color);height:10px;width:10px}.w-e-modal .babel-container{display:block;margin-bottom:15px}.w-e-modal .babel-container span{display:block;margin-bottom:10px}.w-e-modal .button-container{margin-bottom:15px}.w-e-modal button{background-color:var(--w-e-modal-button-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);cursor:pointer;font-weight:400;height:32px;padding:4.5px 15px;text-align:center;touch-action:manipulation;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.w-e-modal input[type=number],.w-e-modal input[type=text],.w-e-modal textarea{font-feature-settings:\"tnum\";background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);font-variant:tabular-nums;padding:4.5px 11px;transition:all .3s;width:100%}.w-e-modal textarea{min-height:60px}body .w-e-modal,body .w-e-modal *{box-sizing:border-box}.w-e-progress-bar{background-color:var(--w-e-textarea-handler-bg-color);height:1px;position:absolute;transition:width .3s;width:0}.w-e-full-screen-container{bottom:0!important;display:flex!important;flex-direction:column!important;height:100%!important;left:0!important;margin:0!important;padding:0!important;position:fixed;right:0!important;top:0!important;width:100%!important}.w-e-full-screen-container [data-w-e-textarea=true]{flex:1!important}\n.w-e-text-container [data-slate-editor] code{background-color:var(--w-e-textarea-slight-bg-color);border-radius:3px;font-family:monospace;padding:3px}.w-e-panel-content-color{list-style:none;text-align:left;width:230px}.w-e-panel-content-color li{border:1px solid var(--w-e-toolbar-bg-color);border-radius:3px 3px;cursor:pointer;display:inline-block;padding:2px}.w-e-panel-content-color li:hover{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color li .color-block{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px 3px;height:17px;width:17px}.w-e-panel-content-color .active{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color .clear{line-height:1.5;margin-bottom:5px;width:100%}.w-e-panel-content-color .clear svg{height:16px;margin-bottom:-4px;width:16px}.w-e-text-container [data-slate-editor] blockquote{background-color:var(--w-e-textarea-slight-bg-color);border-left:8px solid var(--w-e-textarea-selected-border-color);display:block;font-size:100%;line-height:1.5;margin:10px 0;padding:10px}.w-e-panel-content-emotion{font-size:20px;list-style:none;text-align:left;width:300px}.w-e-panel-content-emotion li{border-radius:3px 3px;cursor:pointer;display:inline-block;padding:0 5px}.w-e-panel-content-emotion li:hover{background-color:var(--w-e-textarea-slight-bg-color)}.w-e-textarea-divider{border-radius:3px;margin:20px auto;padding:20px}.w-e-textarea-divider hr{background-color:var(--w-e-textarea-border-color);border:0;display:block;height:1px}.w-e-text-container [data-slate-editor] pre>code{background-color:var(--w-e-textarea-slight-bg-color);border:1px solid var(--w-e-textarea-slight-border-color);border-radius:4px 4px;display:block;font-size:14px;padding:10px;text-indent:0}.w-e-text-container [data-slate-editor] .w-e-image-container{display:inline-block;margin:0 3px}.w-e-text-container [data-slate-editor] .w-e-image-container:hover{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-container [data-slate-editor] .w-e-selected-image-container{overflow:hidden;position:relative}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .w-e-image-dragger{background-color:var(--w-e-textarea-handler-bg-color);height:7px;position:absolute;width:7px}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-top{cursor:nwse-resize;left:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-top{cursor:nesw-resize;right:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-bottom{bottom:0;cursor:nesw-resize;left:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-bottom{bottom:0;cursor:nwse-resize;right:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container:hover{box-shadow:none}.w-e-text-container [contenteditable=false] .w-e-image-container:hover{box-shadow:none}\n\n.w-e-text-container [data-slate-editor] .table-container{border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin-top:10px;overflow-x:auto;padding:10px;width:100%}.w-e-text-container [data-slate-editor] table{border-collapse:collapse}.w-e-text-container [data-slate-editor] table td,.w-e-text-container [data-slate-editor] table th{border:1px solid var(--w-e-textarea-border-color);line-height:1.5;min-width:30px;padding:3px 5px;text-align:left}.w-e-text-container [data-slate-editor] table th{background-color:var(--w-e-textarea-slight-bg-color);font-weight:700;text-align:center}.w-e-panel-content-table{background-color:var(--w-e-toolbar-bg-color)}.w-e-panel-content-table table{border-collapse:collapse}.w-e-panel-content-table td{border:1px solid var(--w-e-toolbar-border-color);cursor:pointer;height:15px;padding:3px 5px;width:20px}.w-e-panel-content-table td.active{background-color:var(--w-e-toolbar-active-bg-color)}\n.w-e-textarea-video-container{background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,#fff 0,#fff 75%,#eee 0,#eee);background-position:0 0,10px 10px;background-size:20px 20px;border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin:10px auto 0;padding:10px 0;text-align:center}\n\n.w-e-text-container [data-slate-editor] pre>code{word-wrap:normal;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;-webkit-hyphens:none;hyphens:none;line-height:1.5;margin:.5em 0;overflow:auto;padding:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}.w-e-text-container [data-slate-editor] pre>code .token.cdata,.w-e-text-container [data-slate-editor] pre>code .token.comment,.w-e-text-container [data-slate-editor] pre>code .token.doctype,.w-e-text-container [data-slate-editor] pre>code .token.prolog{color:#708090}.w-e-text-container [data-slate-editor] pre>code .token.punctuation{color:#999}.w-e-text-container [data-slate-editor] pre>code .token.namespace{opacity:.7}.w-e-text-container [data-slate-editor] pre>code .token.boolean,.w-e-text-container [data-slate-editor] pre>code .token.constant,.w-e-text-container [data-slate-editor] pre>code .token.deleted,.w-e-text-container [data-slate-editor] pre>code .token.number,.w-e-text-container [data-slate-editor] pre>code .token.property,.w-e-text-container [data-slate-editor] pre>code .token.symbol,.w-e-text-container [data-slate-editor] pre>code .token.tag{color:#905}.w-e-text-container [data-slate-editor] pre>code .token.attr-name,.w-e-text-container [data-slate-editor] pre>code .token.builtin,.w-e-text-container [data-slate-editor] pre>code .token.char,.w-e-text-container [data-slate-editor] pre>code .token.inserted,.w-e-text-container [data-slate-editor] pre>code .token.selector,.w-e-text-container [data-slate-editor] pre>code .token.string{color:#690}.w-e-text-container [data-slate-editor] pre>code .language-css .token.string,.w-e-text-container [data-slate-editor] pre>code .style .token.string,.w-e-text-container [data-slate-editor] pre>code .token.entity,.w-e-text-container [data-slate-editor] pre>code .token.operator,.w-e-text-container [data-slate-editor] pre>code .token.url{color:#9a6e3a}.w-e-text-container [data-slate-editor] pre>code .token.atrule,.w-e-text-container [data-slate-editor] pre>code .token.attr-value,.w-e-text-container [data-slate-editor] pre>code .token.keyword{color:#07a}.w-e-text-container [data-slate-editor] pre>code .token.class-name,.w-e-text-container [data-slate-editor] pre>code .token.function{color:#dd4a68}.w-e-text-container [data-slate-editor] pre>code .token.important,.w-e-text-container [data-slate-editor] pre>code .token.regex,.w-e-text-container [data-slate-editor] pre>code .token.variable{color:#e90}.w-e-text-container [data-slate-editor] pre>code .token.bold,.w-e-text-container [data-slate-editor] pre>code .token.important{font-weight:700}.w-e-text-container [data-slate-editor] pre>code .token.italic{font-style:italic}.w-e-text-container [data-slate-editor] pre>code .token.entity{cursor:help}";
|
|
72
70
|
styleInject(css_248z);
|
|
73
71
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
toolbarStyle =
|
|
79
|
-
|
|
80
|
-
editorStyle = _props$editorStyle === void 0 ? {
|
|
72
|
+
const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
73
|
+
const intl = useFormatMessage('TextEditor', localeJson);
|
|
74
|
+
const {
|
|
75
|
+
style,
|
|
76
|
+
toolbarStyle = {},
|
|
77
|
+
editorStyle = {
|
|
81
78
|
height: '300px',
|
|
82
79
|
overflowY: 'hidden'
|
|
83
|
-
}
|
|
84
|
-
hideErrorDom
|
|
85
|
-
className
|
|
86
|
-
error
|
|
87
|
-
server
|
|
88
|
-
helperText
|
|
89
|
-
required
|
|
90
|
-
labelSign
|
|
91
|
-
label
|
|
92
|
-
labelTooltip
|
|
93
|
-
|
|
94
|
-
placeholder = _props$placeholder === void 0 ? intl({
|
|
80
|
+
},
|
|
81
|
+
hideErrorDom,
|
|
82
|
+
className,
|
|
83
|
+
error,
|
|
84
|
+
server,
|
|
85
|
+
helperText,
|
|
86
|
+
required,
|
|
87
|
+
labelSign,
|
|
88
|
+
label,
|
|
89
|
+
labelTooltip,
|
|
90
|
+
placeholder = intl({
|
|
95
91
|
id: 'pleaseEnter'
|
|
96
|
-
})
|
|
97
|
-
onChange
|
|
98
|
-
onFocus
|
|
99
|
-
onBlur
|
|
100
|
-
onDestroyed
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
_props$toolbarKeys = props.toolbarKeys,
|
|
112
|
-
toolbarKeys = _props$toolbarKeys === void 0 ? TOOL_BAR_CONFIG : _props$toolbarKeys,
|
|
113
|
-
_props$uploadImage = props.uploadImage,
|
|
114
|
-
uploadImage = _props$uploadImage === void 0 ? {
|
|
92
|
+
}),
|
|
93
|
+
onChange,
|
|
94
|
+
onFocus,
|
|
95
|
+
onBlur,
|
|
96
|
+
onDestroyed,
|
|
97
|
+
readOnly = false,
|
|
98
|
+
autoFocus = false,
|
|
99
|
+
max,
|
|
100
|
+
in18,
|
|
101
|
+
defaultValue,
|
|
102
|
+
value,
|
|
103
|
+
excludeKeys,
|
|
104
|
+
insertKeys,
|
|
105
|
+
toolbarKeys = TOOL_BAR_CONFIG,
|
|
106
|
+
uploadImage = {
|
|
115
107
|
base64LimitSize: 5 * 1024 * 1024,
|
|
116
108
|
timeout: 15 * 1000
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
uploadVideo = _props$uploadVideo === void 0 ? {
|
|
109
|
+
},
|
|
110
|
+
uploadVideo = {
|
|
120
111
|
timeout: 15 * 1000
|
|
121
|
-
}
|
|
112
|
+
}
|
|
113
|
+
} = props;
|
|
122
114
|
// editor 实例
|
|
123
|
-
|
|
124
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
125
|
-
editor = _useState2[0],
|
|
126
|
-
setEditor = _useState2[1];
|
|
115
|
+
const [editor, setEditor] = useState(null);
|
|
127
116
|
// 编辑器内容
|
|
128
|
-
|
|
129
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
130
|
-
valueCom = _useState4[0],
|
|
131
|
-
setValueCom = _useState4[1]; // 组件值
|
|
117
|
+
const [valueCom, setValueCom] = useState(''); // 组件值
|
|
132
118
|
// 强制更新ToolBar变量
|
|
133
|
-
|
|
134
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
135
|
-
toolBarKey = _useState6[0],
|
|
136
|
-
setToolBarKey = _useState6[1];
|
|
119
|
+
const [toolBarKey, setToolBarKey] = useState(UUID);
|
|
137
120
|
// 是否是预览模式
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
isPreview = _useState8[0],
|
|
141
|
-
setIsPreview = _useState8[1];
|
|
142
|
-
useEffect(function () {
|
|
121
|
+
const [isPreview, setIsPreview] = useState(false);
|
|
122
|
+
useEffect(() => {
|
|
143
123
|
setIsPreview(toolbarKeys.length < 1);
|
|
144
124
|
}, [toolbarKeys]);
|
|
145
125
|
/** 聚焦 */
|
|
146
|
-
|
|
126
|
+
const onFocusCom = editor => {
|
|
147
127
|
onFocus && onFocus(editor);
|
|
148
128
|
};
|
|
149
129
|
/** 失去焦点 */
|
|
150
|
-
|
|
130
|
+
const onBlurCom = editor => {
|
|
151
131
|
onBlur && onBlur(editor);
|
|
152
132
|
};
|
|
153
133
|
/** 销毁钩子 */
|
|
154
|
-
|
|
134
|
+
const onDestroyedCom = editor => {
|
|
155
135
|
onDestroyed && onDestroyed(editor);
|
|
156
136
|
};
|
|
157
137
|
/** 改变事件 */
|
|
158
|
-
|
|
138
|
+
const onChangeCom = editor => {
|
|
159
139
|
if (props.value === undefined) setValueCom(editor.getHtml());
|
|
160
140
|
onChange && onChange(editor.getHtml(), editor.getText());
|
|
161
141
|
};
|
|
162
142
|
// 工具栏配置
|
|
163
|
-
|
|
164
|
-
excludeKeys
|
|
165
|
-
toolbarKeys
|
|
166
|
-
insertKeys
|
|
143
|
+
const toolbarConfig = {
|
|
144
|
+
excludeKeys,
|
|
145
|
+
toolbarKeys,
|
|
146
|
+
insertKeys
|
|
167
147
|
};
|
|
168
148
|
// 编辑器配置
|
|
169
|
-
|
|
149
|
+
const editorConfig = {
|
|
170
150
|
placeholder: placeholder,
|
|
171
151
|
onFocus: onFocusCom,
|
|
172
152
|
onBlur: onBlurCom,
|
|
173
153
|
onDestroyed: onDestroyedCom,
|
|
174
154
|
readOnly: readOnly,
|
|
175
|
-
autoFocus
|
|
155
|
+
autoFocus,
|
|
176
156
|
maxLength: max,
|
|
177
157
|
MENU_CONF: {
|
|
178
158
|
uploadImage: Object.assign(Object.assign({}, uploadImage), {
|
|
179
|
-
server
|
|
159
|
+
server
|
|
180
160
|
}),
|
|
181
161
|
uploadVideo: Object.assign(Object.assign({}, uploadVideo), {
|
|
182
|
-
server
|
|
162
|
+
server
|
|
183
163
|
})
|
|
184
164
|
}
|
|
185
165
|
};
|
|
186
166
|
// 国际化
|
|
187
|
-
useEffect(
|
|
167
|
+
useEffect(() => {
|
|
188
168
|
if (in18) {
|
|
189
169
|
i18nChangeLanguage(in18);
|
|
190
170
|
}
|
|
191
171
|
setToolBarKey(Math.random().toString(36).slice(-8));
|
|
192
172
|
}, [in18]);
|
|
193
173
|
// 非受控组件赋值
|
|
194
|
-
useEffect(
|
|
174
|
+
useEffect(() => {
|
|
195
175
|
if (defaultValue !== undefined) {
|
|
196
176
|
setValueCom(defaultValue);
|
|
197
177
|
}
|
|
198
178
|
}, []);
|
|
199
179
|
// 受控组件监听value变化赋值
|
|
200
|
-
useEffect(
|
|
180
|
+
useEffect(() => {
|
|
201
181
|
if (value !== undefined) {
|
|
202
182
|
setValueCom(value);
|
|
203
183
|
}
|
|
204
184
|
}, [value]);
|
|
205
185
|
// 获取html格式的内容
|
|
206
|
-
|
|
186
|
+
const getContent = () => {
|
|
207
187
|
if (!editor) return;
|
|
208
188
|
return editor.getHtml();
|
|
209
189
|
};
|
|
210
190
|
// 获取纯文本
|
|
211
|
-
|
|
191
|
+
const getText = () => {
|
|
212
192
|
if (!editor) return;
|
|
213
193
|
return editor.getText();
|
|
214
194
|
};
|
|
215
195
|
// 清空编辑器
|
|
216
|
-
|
|
196
|
+
const clearEditor = () => {
|
|
217
197
|
if (!editor) return;
|
|
218
198
|
editor.clear();
|
|
219
199
|
};
|
|
220
200
|
//设置值
|
|
221
|
-
|
|
201
|
+
const setContent = content => {
|
|
222
202
|
if (!editor) return;
|
|
223
203
|
editor.setHtml(content);
|
|
224
204
|
// 重新聚焦放到下一次事件队列,否则会有bug
|
|
225
|
-
setTimeout(
|
|
205
|
+
setTimeout(() => {
|
|
226
206
|
editor.focus(true);
|
|
227
207
|
});
|
|
228
208
|
};
|
|
229
209
|
// 获取富文本实例
|
|
230
|
-
|
|
210
|
+
const getEditor = () => {
|
|
231
211
|
return editor;
|
|
232
212
|
};
|
|
233
213
|
// 销毁 editor
|
|
234
|
-
useEffect(
|
|
235
|
-
return
|
|
214
|
+
useEffect(() => {
|
|
215
|
+
return () => {
|
|
236
216
|
if (editor == null) return;
|
|
237
217
|
editor.destroy();
|
|
238
218
|
setEditor(null);
|
|
239
219
|
};
|
|
240
220
|
}, [editor]);
|
|
241
|
-
useImperativeHandle(ref,
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
};
|
|
249
|
-
});
|
|
221
|
+
useImperativeHandle(ref, () => ({
|
|
222
|
+
getContent,
|
|
223
|
+
getText,
|
|
224
|
+
clearEditor,
|
|
225
|
+
setContent,
|
|
226
|
+
getEditor
|
|
227
|
+
}));
|
|
250
228
|
/**
|
|
251
229
|
* 处理class
|
|
252
230
|
* @return {string}
|
|
253
231
|
*/
|
|
254
|
-
|
|
255
|
-
|
|
232
|
+
const handClass = () => {
|
|
233
|
+
let str = "".concat($prefixCls, "-text-editor");
|
|
256
234
|
if (className) str += " ".concat(className);
|
|
257
235
|
return str;
|
|
258
236
|
};
|
|
259
237
|
/** 标题 */
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
238
|
+
const labelMemo = useMemo(() => {
|
|
239
|
+
const handLabelClass = () => {
|
|
240
|
+
let str = 'text-editor-label';
|
|
263
241
|
if (labelTooltip && labelTooltip.className) {
|
|
264
242
|
str += " ".concat(labelTooltip.className);
|
|
265
243
|
}
|