assui 3.2.57 → 3.2.59
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/es/condition-select-input/index.d.ts +1 -1
- package/es/condition-select-input/index.js +1 -1
- package/es/index.d.ts +4 -0
- package/es/index.js +3 -1
- package/es/multi-line-ellipsis-text/demo/index.less +4 -0
- package/es/multi-line-ellipsis-text/index.d.ts +25 -0
- package/es/multi-line-ellipsis-text/index.js +108 -0
- package/es/multi-line-ellipsis-text/style/index.css +18 -0
- package/es/multi-line-ellipsis-text/style/index.d.ts +3 -0
- package/es/multi-line-ellipsis-text/style/index.js +3 -0
- package/es/multi-line-ellipsis-text/style/index.less +23 -0
- package/es/rich-text-editor/lang/zh_CN.d.ts +1 -1
- package/es/rich-text-editor/lang/zh_CN.js +1 -1
- package/es/signature-pad/index.d.ts +31 -0
- package/es/signature-pad/index.js +204 -0
- package/es/signature-pad/style/index.css +39 -0
- package/es/signature-pad/style/index.d.ts +0 -0
- package/es/signature-pad/style/index.js +0 -0
- package/es/signature-pad/style/index.less +47 -0
- package/lib/condition-select-input/index.d.ts +1 -1
- package/lib/condition-select-input/index.js +1 -1
- package/lib/index.d.ts +4 -0
- package/lib/index.js +15 -1
- package/lib/multi-line-ellipsis-text/demo/index.less +4 -0
- package/lib/multi-line-ellipsis-text/index.d.ts +25 -0
- package/lib/multi-line-ellipsis-text/index.js +118 -0
- package/lib/multi-line-ellipsis-text/style/index.css +18 -0
- package/lib/multi-line-ellipsis-text/style/index.d.ts +3 -0
- package/lib/multi-line-ellipsis-text/style/index.js +8 -0
- package/lib/multi-line-ellipsis-text/style/index.less +23 -0
- package/lib/rich-text-editor/lang/zh_CN.d.ts +1 -1
- package/lib/rich-text-editor/lang/zh_CN.js +1 -1
- package/lib/signature-pad/index.d.ts +31 -0
- package/lib/signature-pad/index.js +242 -0
- package/lib/signature-pad/style/index.css +39 -0
- package/lib/signature-pad/style/index.d.ts +0 -0
- package/lib/signature-pad/style/index.js +0 -0
- package/lib/signature-pad/style/index.less +47 -0
- package/package.json +4 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComplexValSelectProps, ComplexValSelectValueType } from '../complex-val-select';
|
|
2
1
|
import type { SelectProps } from 'antd/lib/select';
|
|
2
|
+
import type { ComplexValSelectProps, ComplexValSelectValueType } from '../complex-val-select';
|
|
3
3
|
import type { ConditionInputProps } from '../condition-input';
|
|
4
4
|
export declare enum InputTypeEnum {
|
|
5
5
|
CONDITION_INPUT = "conditionInput",
|
|
@@ -33,9 +33,9 @@ var __read = this && this.__read || function (o, n) {
|
|
|
33
33
|
import isNil from 'lodash/isNil';
|
|
34
34
|
import isEmpty from 'lodash/isEmpty';
|
|
35
35
|
import classNames from 'classnames';
|
|
36
|
-
import ComplexValSelect from '../complex-val-select';
|
|
37
36
|
import React, { useEffect, useState } from 'react';
|
|
38
37
|
import useControllableValue from "ahooks/es/useControllableValue";
|
|
38
|
+
import ComplexValSelect from '../complex-val-select';
|
|
39
39
|
import ConditionInput from '../condition-input';
|
|
40
40
|
export var InputTypeEnum;
|
|
41
41
|
(function (InputTypeEnum) {
|
package/es/index.d.ts
CHANGED
|
@@ -90,3 +90,7 @@ export { default as CountUp } from './count-up';
|
|
|
90
90
|
export type { CountUpProps } from './count-up';
|
|
91
91
|
export { default as ConditionSelect } from './condition-select';
|
|
92
92
|
export type { ConditionSelectProps } from './condition-select/types';
|
|
93
|
+
export { default as SignaturePad } from './signature-pad';
|
|
94
|
+
export type { SignaturePadProps } from './signature-pad';
|
|
95
|
+
export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
96
|
+
export type { MultiLineEllipsisTextProps } from './multi-line-ellipsis-text';
|
package/es/index.js
CHANGED
|
@@ -45,4 +45,6 @@ export { default as MultipartUpload } from './multipart-upload';
|
|
|
45
45
|
export { default as ComplexValSelect } from './complex-val-select';
|
|
46
46
|
export { default as CountDown } from './count-down';
|
|
47
47
|
export { default as CountUp } from './count-up';
|
|
48
|
-
export { default as ConditionSelect } from './condition-select';
|
|
48
|
+
export { default as ConditionSelect } from './condition-select';
|
|
49
|
+
export { default as SignaturePad } from './signature-pad';
|
|
50
|
+
export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TooltipProps } from 'antd/lib/tooltip';
|
|
3
|
+
import type { ButtonModalProps } from '../button-modal';
|
|
4
|
+
export interface MultiLineEllipsisTextProps {
|
|
5
|
+
/** 需要处理的文案 */
|
|
6
|
+
text?: string;
|
|
7
|
+
/** 展示的行数 */
|
|
8
|
+
lines?: number;
|
|
9
|
+
/** 文案样式 */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 展示完整内容的交互类型,不传则不提示 */
|
|
12
|
+
tipType?: 'modal' | 'tooltip';
|
|
13
|
+
/** 弹窗的属性,仅tipType=modal时生效 */
|
|
14
|
+
buttonModalProps?: Omit<ButtonModalProps, 'children'> & {
|
|
15
|
+
children?: ButtonModalProps['children'];
|
|
16
|
+
};
|
|
17
|
+
/** 浮窗的属性,仅tipType=tooltip时生效 */
|
|
18
|
+
tooltipProps?: Omit<TooltipProps, 'title'>;
|
|
19
|
+
/** 省略的回调 */
|
|
20
|
+
onEllipsisChange?: (isEllipsis: boolean) => void;
|
|
21
|
+
/** 点击的回调 */
|
|
22
|
+
onClick?: () => void;
|
|
23
|
+
}
|
|
24
|
+
declare const MultiLineEllipsisText: React.FC<MultiLineEllipsisTextProps>;
|
|
25
|
+
export default MultiLineEllipsisText;
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
var __read = this && this.__read || function (o, n) {
|
|
12
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
13
|
+
if (!m) return o;
|
|
14
|
+
var i = m.call(o),
|
|
15
|
+
r,
|
|
16
|
+
ar = [],
|
|
17
|
+
e;
|
|
18
|
+
try {
|
|
19
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
20
|
+
} catch (error) {
|
|
21
|
+
e = {
|
|
22
|
+
error: error
|
|
23
|
+
};
|
|
24
|
+
} finally {
|
|
25
|
+
try {
|
|
26
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
27
|
+
} finally {
|
|
28
|
+
if (e) throw e.error;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return ar;
|
|
32
|
+
};
|
|
33
|
+
import React from 'react';
|
|
34
|
+
import Tooltip from "antd/es/tooltip";
|
|
35
|
+
import classNames from 'classnames';
|
|
36
|
+
import omit from 'lodash/omit';
|
|
37
|
+
import ButtonModal from '../button-modal';
|
|
38
|
+
var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
|
|
39
|
+
var _b = _a.text,
|
|
40
|
+
text = _b === void 0 ? '' : _b,
|
|
41
|
+
_c = _a.lines,
|
|
42
|
+
lines = _c === void 0 ? 3 : _c,
|
|
43
|
+
_d = _a.className,
|
|
44
|
+
className = _d === void 0 ? '' : _d,
|
|
45
|
+
tipType = _a.tipType,
|
|
46
|
+
buttonModalProps = _a.buttonModalProps,
|
|
47
|
+
tooltipProps = _a.tooltipProps,
|
|
48
|
+
onEllipsisChange = _a.onEllipsisChange,
|
|
49
|
+
onClick = _a.onClick;
|
|
50
|
+
var ref = React.useRef(null);
|
|
51
|
+
var _e = __read(React.useState(false), 2),
|
|
52
|
+
isEllipsis = _e[0],
|
|
53
|
+
setIsEllipsis = _e[1];
|
|
54
|
+
React.useEffect(function () {
|
|
55
|
+
var el = ref.current;
|
|
56
|
+
if (!el) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
// 等待浏览器渲染完再计算高度
|
|
60
|
+
requestAnimationFrame(function () {
|
|
61
|
+
var style = window.getComputedStyle(el);
|
|
62
|
+
var lineHeight = parseFloat(style.lineHeight);
|
|
63
|
+
var maxHeight = lineHeight * lines;
|
|
64
|
+
var overflow = el.scrollHeight > maxHeight + 1; // +1 容差
|
|
65
|
+
setIsEllipsis(overflow);
|
|
66
|
+
onEllipsisChange === null || onEllipsisChange === void 0 ? void 0 : onEllipsisChange(overflow);
|
|
67
|
+
});
|
|
68
|
+
}, [text, lines, onEllipsisChange]);
|
|
69
|
+
var ellipsisNode = /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
ref: ref,
|
|
71
|
+
className: classNames('ellipsis', className, {
|
|
72
|
+
cursor: isEllipsis && tipType
|
|
73
|
+
}),
|
|
74
|
+
style: {
|
|
75
|
+
WebkitLineClamp: lines,
|
|
76
|
+
display: '-webkit-box',
|
|
77
|
+
WebkitBoxOrient: 'vertical',
|
|
78
|
+
overflow: 'hidden',
|
|
79
|
+
textOverflow: 'ellipsis',
|
|
80
|
+
whiteSpace: 'pre-wrap',
|
|
81
|
+
wordBreak: 'break-all'
|
|
82
|
+
},
|
|
83
|
+
title: isEllipsis ? text : undefined,
|
|
84
|
+
onClick: isEllipsis ? onClick : undefined
|
|
85
|
+
}, text);
|
|
86
|
+
if (isEllipsis && tipType === 'modal') {
|
|
87
|
+
return /*#__PURE__*/React.createElement(ButtonModal, __assign({
|
|
88
|
+
destroyOnClose: true,
|
|
89
|
+
width: 325,
|
|
90
|
+
footer: null
|
|
91
|
+
}, omit(buttonModalProps, 'children'), {
|
|
92
|
+
className: classNames('ellipsis-modal', buttonModalProps === null || buttonModalProps === void 0 ? void 0 : buttonModalProps.className),
|
|
93
|
+
trigger: ellipsisNode
|
|
94
|
+
}), (buttonModalProps === null || buttonModalProps === void 0 ? void 0 : buttonModalProps.children) || /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "ellipsis-modal-content"
|
|
96
|
+
}, text));
|
|
97
|
+
}
|
|
98
|
+
if (isEllipsis && tipType === 'tooltip') {
|
|
99
|
+
return /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps, {
|
|
100
|
+
overlayClassName: classNames('ellipsis-tooltip', tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.overlayClassName),
|
|
101
|
+
title: /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
className: "ellipsis-tooltip-content"
|
|
103
|
+
}, text)
|
|
104
|
+
}), ellipsisNode);
|
|
105
|
+
}
|
|
106
|
+
return ellipsisNode;
|
|
107
|
+
};
|
|
108
|
+
export default MultiLineEllipsisText;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.ellipsis-modal-content {
|
|
2
|
+
width: 100%;
|
|
3
|
+
max-height: 40vh;
|
|
4
|
+
overflow: auto;
|
|
5
|
+
color: #7d7d7d;
|
|
6
|
+
white-space: pre-wrap;
|
|
7
|
+
}
|
|
8
|
+
.ellipsis-tooltip {
|
|
9
|
+
max-width: 320px;
|
|
10
|
+
}
|
|
11
|
+
.ellipsis-tooltip-content {
|
|
12
|
+
max-height: 40vh;
|
|
13
|
+
overflow: auto;
|
|
14
|
+
white-space: pre-wrap;
|
|
15
|
+
}
|
|
16
|
+
.cursor {
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import '../../style/variables.less';
|
|
2
|
+
|
|
3
|
+
.ellipsis-modal-content {
|
|
4
|
+
width: 100%;
|
|
5
|
+
max-height: 40vh;
|
|
6
|
+
overflow: auto;
|
|
7
|
+
color: @color_7d7d7d;
|
|
8
|
+
white-space: pre-wrap;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ellipsis-tooltip {
|
|
12
|
+
max-width: 320px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ellipsis-tooltip-content {
|
|
16
|
+
max-height: 40vh;
|
|
17
|
+
overflow: auto;
|
|
18
|
+
white-space: pre-wrap;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cursor {
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
@@ -28,7 +28,7 @@ declare const _default: {
|
|
|
28
28
|
'Increase indent': string;
|
|
29
29
|
Close: string;
|
|
30
30
|
Formats: string;
|
|
31
|
-
|
|
31
|
+
'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.': string;
|
|
32
32
|
Headings: string;
|
|
33
33
|
'Heading 1': string;
|
|
34
34
|
'Heading 2': string;
|
|
@@ -28,7 +28,7 @@ export default {
|
|
|
28
28
|
'Increase indent': "\u589E\u52A0\u7F29\u8FDB",
|
|
29
29
|
'Close': "\u5173\u95ED",
|
|
30
30
|
'Formats': "\u683C\u5F0F",
|
|
31
|
-
|
|
31
|
+
'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.': "\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6253\u5F00\u526A\u8D34\u677F\uFF0C\u8BF7\u4F7F\u7528Ctrl+X/C/V\u7B49\u5FEB\u6377\u952E\u3002",
|
|
32
32
|
'Headings': "\u6807\u9898",
|
|
33
33
|
'Heading 1': "\u6807\u98981",
|
|
34
34
|
'Heading 2': "\u6807\u98982",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type SignaturePadProps = {
|
|
3
|
+
/** 默认背景文字 */
|
|
4
|
+
defaultText?: string;
|
|
5
|
+
/** canvas宽度 */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** canvas高度 */
|
|
8
|
+
height?: number;
|
|
9
|
+
/** 自定义类名 */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 画笔颜色 */
|
|
12
|
+
penColor?: string;
|
|
13
|
+
/** 背景颜色 */
|
|
14
|
+
backgroundColor?: string;
|
|
15
|
+
/** 背景文字颜色 */
|
|
16
|
+
backgroundTextColor?: string;
|
|
17
|
+
/** 背景文字大小 */
|
|
18
|
+
backgroundTextSize?: string;
|
|
19
|
+
/** 签名结束回调 */
|
|
20
|
+
onEnd?: () => void;
|
|
21
|
+
/** 签名开始回调 */
|
|
22
|
+
onBegin?: () => void;
|
|
23
|
+
};
|
|
24
|
+
export interface SignaturePadRef {
|
|
25
|
+
clearSignature: () => void;
|
|
26
|
+
saveSignature: () => string | null;
|
|
27
|
+
isEmpty: () => boolean;
|
|
28
|
+
undo: () => boolean;
|
|
29
|
+
}
|
|
30
|
+
declare const SignaturePadComponent: React.ForwardRefExoticComponent<SignaturePadProps & React.RefAttributes<SignaturePadRef>>;
|
|
31
|
+
export default SignaturePadComponent;
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
// SignaturePadComponent.tsx
|
|
2
|
+
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
3
|
+
var SignaturePadComponent = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
4
|
+
var _b = _a.defaultText,
|
|
5
|
+
defaultText = _b === void 0 ? '请在此处签名' : _b,
|
|
6
|
+
_c = _a.width,
|
|
7
|
+
width = _c === void 0 ? 500 : _c,
|
|
8
|
+
_d = _a.height,
|
|
9
|
+
height = _d === void 0 ? 300 : _d,
|
|
10
|
+
className = _a.className,
|
|
11
|
+
_e = _a.penColor,
|
|
12
|
+
penColor = _e === void 0 ? 'black' : _e,
|
|
13
|
+
_f = _a.backgroundColor,
|
|
14
|
+
backgroundColor = _f === void 0 ? 'white' : _f,
|
|
15
|
+
_g = _a.backgroundTextColor,
|
|
16
|
+
backgroundTextColor = _g === void 0 ? '#ccc' : _g,
|
|
17
|
+
_h = _a.backgroundTextSize,
|
|
18
|
+
backgroundTextSize = _h === void 0 ? '30px' : _h,
|
|
19
|
+
onEnd = _a.onEnd,
|
|
20
|
+
onBegin = _a.onBegin;
|
|
21
|
+
var canvasRef = useRef(null);
|
|
22
|
+
var signaturePadRef = useRef(null);
|
|
23
|
+
var historyRef = useRef([]);
|
|
24
|
+
var currentStepRef = useRef(-1);
|
|
25
|
+
// 绘制背景文字
|
|
26
|
+
var drawBackgroundText = useCallback(function () {
|
|
27
|
+
if (canvasRef.current) {
|
|
28
|
+
var canvas = canvasRef.current;
|
|
29
|
+
var ctx = canvas.getContext('2d');
|
|
30
|
+
if (ctx) {
|
|
31
|
+
// 保存当前画布状态
|
|
32
|
+
ctx.save();
|
|
33
|
+
// 清除画布
|
|
34
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
35
|
+
// 设置背景
|
|
36
|
+
ctx.fillStyle = backgroundColor;
|
|
37
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
38
|
+
// 设置文字样式
|
|
39
|
+
ctx.font = "".concat(backgroundTextSize, " Arial");
|
|
40
|
+
ctx.fillStyle = backgroundTextColor;
|
|
41
|
+
ctx.textAlign = 'center';
|
|
42
|
+
ctx.textBaseline = 'middle';
|
|
43
|
+
// 绘制背景文字
|
|
44
|
+
ctx.fillText(defaultText, canvas.width / 2, canvas.height / 2);
|
|
45
|
+
// 恢复画布状态
|
|
46
|
+
ctx.restore();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, [defaultText, backgroundColor, backgroundTextColor]);
|
|
50
|
+
// 保存当前状态到历史记录
|
|
51
|
+
var saveToHistory = useCallback(function () {
|
|
52
|
+
if (signaturePadRef.current && !signaturePadRef.current.isEmpty()) {
|
|
53
|
+
var dataURL = signaturePadRef.current.toDataURL();
|
|
54
|
+
// 移除当前步骤之后的所有历史记录
|
|
55
|
+
var newHistory = historyRef.current.slice(0, currentStepRef.current + 1);
|
|
56
|
+
newHistory.push(dataURL);
|
|
57
|
+
historyRef.current = newHistory;
|
|
58
|
+
currentStepRef.current = newHistory.length - 1;
|
|
59
|
+
}
|
|
60
|
+
}, []);
|
|
61
|
+
// 清除签名
|
|
62
|
+
var clearSignature = useCallback(function () {
|
|
63
|
+
if (signaturePadRef.current) {
|
|
64
|
+
signaturePadRef.current.clear();
|
|
65
|
+
drawBackgroundText();
|
|
66
|
+
// 清除历史记录
|
|
67
|
+
historyRef.current = [];
|
|
68
|
+
currentStepRef.current = -1;
|
|
69
|
+
}
|
|
70
|
+
}, [drawBackgroundText]);
|
|
71
|
+
// 保存签名
|
|
72
|
+
var saveSignature = useCallback(function () {
|
|
73
|
+
if (signaturePadRef.current && !signaturePadRef.current.isEmpty()) {
|
|
74
|
+
return signaturePadRef.current;
|
|
75
|
+
}
|
|
76
|
+
return null;
|
|
77
|
+
}, []);
|
|
78
|
+
// 回撤功能
|
|
79
|
+
var undo = useCallback(function () {
|
|
80
|
+
// 如果没有历史记录或已经在第一步,则清除
|
|
81
|
+
if (historyRef.current.length === 0 || currentStepRef.current <= 0) {
|
|
82
|
+
clearSignature();
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
85
|
+
// 回退到上一步
|
|
86
|
+
var prevStep = currentStepRef.current - 1;
|
|
87
|
+
currentStepRef.current = prevStep;
|
|
88
|
+
if (prevStep >= 0 && historyRef.current[prevStep]) {
|
|
89
|
+
// 从历史记录恢复
|
|
90
|
+
var previousDataURL_1 = historyRef.current[prevStep];
|
|
91
|
+
if (canvasRef.current) {
|
|
92
|
+
var ctx_1 = canvasRef.current.getContext('2d');
|
|
93
|
+
if (ctx_1) {
|
|
94
|
+
var img_1 = new Image();
|
|
95
|
+
img_1.onload = function () {
|
|
96
|
+
// 清除画布
|
|
97
|
+
ctx_1.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
98
|
+
// 绘制背景
|
|
99
|
+
ctx_1.fillStyle = backgroundColor;
|
|
100
|
+
ctx_1.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
101
|
+
// 绘制历史图片,确保缩放到正确的尺寸
|
|
102
|
+
ctx_1.drawImage(img_1, 0, 0, img_1.width, img_1.height,
|
|
103
|
+
// 源图片的尺寸
|
|
104
|
+
0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
105
|
+
// 更新 signature_pad 内部状态
|
|
106
|
+
if (signaturePadRef.current) {
|
|
107
|
+
// 使用 fromDataURL 更新 signature_pad 的内部数据
|
|
108
|
+
signaturePadRef.current.fromDataURL(previousDataURL_1, {
|
|
109
|
+
width: canvasRef.current.width,
|
|
110
|
+
height: canvasRef.current.height
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
img_1.onerror = function () {
|
|
115
|
+
// 如果图片加载失败,回退到清除
|
|
116
|
+
clearSignature();
|
|
117
|
+
};
|
|
118
|
+
img_1.src = previousDataURL_1;
|
|
119
|
+
return true;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return false;
|
|
124
|
+
}, [clearSignature, backgroundColor]);
|
|
125
|
+
// 初始化签名板
|
|
126
|
+
useEffect(function () {
|
|
127
|
+
if (canvasRef.current) {
|
|
128
|
+
// 动态导入signature_pad
|
|
129
|
+
import('signature_pad').then(function (SignaturePadModule) {
|
|
130
|
+
var SignaturePad = SignaturePadModule["default"];
|
|
131
|
+
// 初始化签名板
|
|
132
|
+
signaturePadRef.current = new SignaturePad(canvasRef.current, {
|
|
133
|
+
penColor: penColor,
|
|
134
|
+
backgroundColor: 'transparent',
|
|
135
|
+
// 设置为透明,因为我们自己绘制背景
|
|
136
|
+
minWidth: 1,
|
|
137
|
+
maxWidth: 4
|
|
138
|
+
});
|
|
139
|
+
// 绘制默认背景文字
|
|
140
|
+
drawBackgroundText();
|
|
141
|
+
// 修复:正确添加事件监听
|
|
142
|
+
signaturePadRef.current.onBegin = function () {
|
|
143
|
+
onBegin === null || onBegin === void 0 ? void 0 : onBegin();
|
|
144
|
+
};
|
|
145
|
+
signaturePadRef.current.onEnd = function () {
|
|
146
|
+
setTimeout(function () {
|
|
147
|
+
if (signaturePadRef.current) {
|
|
148
|
+
saveToHistory();
|
|
149
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd();
|
|
150
|
+
}
|
|
151
|
+
}, 50);
|
|
152
|
+
};
|
|
153
|
+
signaturePadRef.current.addEventListener('beginStroke', function () {
|
|
154
|
+
console.log('签名开始事件触发');
|
|
155
|
+
onBegin === null || onBegin === void 0 ? void 0 : onBegin();
|
|
156
|
+
});
|
|
157
|
+
signaturePadRef.current.addEventListener('endStroke', function () {
|
|
158
|
+
console.log('签名结束事件触发');
|
|
159
|
+
setTimeout(function () {
|
|
160
|
+
if (signaturePadRef.current) {
|
|
161
|
+
var isPadEmpty = signaturePadRef.current.isEmpty();
|
|
162
|
+
console.log('签名结束时的isEmpty:', isPadEmpty);
|
|
163
|
+
saveToHistory();
|
|
164
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd();
|
|
165
|
+
}
|
|
166
|
+
}, 50);
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
return function () {
|
|
171
|
+
if (signaturePadRef.current) {
|
|
172
|
+
// 清理事件监听
|
|
173
|
+
signaturePadRef.current.off();
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
}, [drawBackgroundText, saveToHistory, onEnd, onBegin, penColor]);
|
|
177
|
+
// 暴露方法给父组件
|
|
178
|
+
useImperativeHandle(ref, function () {
|
|
179
|
+
return {
|
|
180
|
+
clearSignature: clearSignature,
|
|
181
|
+
saveSignature: saveSignature,
|
|
182
|
+
isEmpty: function isEmpty() {
|
|
183
|
+
if (signaturePadRef.current) {
|
|
184
|
+
return signaturePadRef.current.isEmpty();
|
|
185
|
+
}
|
|
186
|
+
return true;
|
|
187
|
+
},
|
|
188
|
+
undo: undo
|
|
189
|
+
};
|
|
190
|
+
});
|
|
191
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
192
|
+
className: "signature-pad-container ".concat(className)
|
|
193
|
+
}, /*#__PURE__*/React.createElement("canvas", {
|
|
194
|
+
ref: canvasRef,
|
|
195
|
+
width: width,
|
|
196
|
+
height: height,
|
|
197
|
+
style: {
|
|
198
|
+
border: '1px dashed #ccc',
|
|
199
|
+
backgroundColor: backgroundColor,
|
|
200
|
+
height: 'auto'
|
|
201
|
+
}
|
|
202
|
+
}));
|
|
203
|
+
});
|
|
204
|
+
export default SignaturePadComponent;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.signature-modal-wrap {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 10px;
|
|
4
|
+
right: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 1000;
|
|
8
|
+
width: 100vw;
|
|
9
|
+
height: 84vh;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}
|
|
12
|
+
.signature-canvas-container {
|
|
13
|
+
position: relative;
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: calc(84vh - 66px);
|
|
19
|
+
/* 减去按钮区域的高度 */
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background-color: #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
.signature-canvas {
|
|
24
|
+
background-color: white;
|
|
25
|
+
border-bottom: 1px solid #d9d9d9;
|
|
26
|
+
touch-action: none;
|
|
27
|
+
}
|
|
28
|
+
.buttonBox {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
margin-top: 10px;
|
|
32
|
+
}
|
|
33
|
+
.btnGroup {
|
|
34
|
+
margin-right: 32px;
|
|
35
|
+
padding-top: 0;
|
|
36
|
+
}
|
|
37
|
+
.clear-btn {
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.signature-modal-wrap {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 10px;
|
|
4
|
+
right: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 1000;
|
|
8
|
+
width: 100vw;
|
|
9
|
+
height: 84vh;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.signature-canvas-container {
|
|
14
|
+
position: relative;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: calc(84vh - 66px); /* 减去按钮区域的高度 */
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background-color: #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.signature-canvas {
|
|
25
|
+
background-color: white;
|
|
26
|
+
border-bottom: 1px solid #d9d9d9;
|
|
27
|
+
touch-action: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
.buttonBox {
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
margin-top: 10px
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.btnGroup{
|
|
40
|
+
margin-right: 32px;
|
|
41
|
+
padding-top: 0;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.clear-btn{
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComplexValSelectProps, ComplexValSelectValueType } from '../complex-val-select';
|
|
2
1
|
import type { SelectProps } from 'antd/lib/select';
|
|
2
|
+
import type { ComplexValSelectProps, ComplexValSelectValueType } from '../complex-val-select';
|
|
3
3
|
import type { ConditionInputProps } from '../condition-input';
|
|
4
4
|
export declare enum InputTypeEnum {
|
|
5
5
|
CONDITION_INPUT = "conditionInput",
|
|
@@ -75,9 +75,9 @@ exports.EntryTypeEnum = exports.InputTypeEnum = void 0;
|
|
|
75
75
|
var isNil_1 = __importDefault(require("lodash/isNil"));
|
|
76
76
|
var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
77
77
|
var classnames_1 = __importDefault(require("classnames"));
|
|
78
|
-
var complex_val_select_1 = __importDefault(require("../complex-val-select"));
|
|
79
78
|
var react_1 = __importStar(require("react"));
|
|
80
79
|
var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
|
|
80
|
+
var complex_val_select_1 = __importDefault(require("../complex-val-select"));
|
|
81
81
|
var condition_input_1 = __importDefault(require("../condition-input"));
|
|
82
82
|
var InputTypeEnum;
|
|
83
83
|
(function (InputTypeEnum) {
|
package/lib/index.d.ts
CHANGED
|
@@ -90,3 +90,7 @@ export { default as CountUp } from './count-up';
|
|
|
90
90
|
export type { CountUpProps } from './count-up';
|
|
91
91
|
export { default as ConditionSelect } from './condition-select';
|
|
92
92
|
export type { ConditionSelectProps } from './condition-select/types';
|
|
93
|
+
export { default as SignaturePad } from './signature-pad';
|
|
94
|
+
export type { SignaturePadProps } from './signature-pad';
|
|
95
|
+
export { default as MultiLineEllipsisText } from './multi-line-ellipsis-text';
|
|
96
|
+
export type { MultiLineEllipsisTextProps } from './multi-line-ellipsis-text';
|
package/lib/index.js
CHANGED
|
@@ -8,7 +8,7 @@ var __importDefault = this && this.__importDefault || function (mod) {
|
|
|
8
8
|
Object.defineProperty(exports, "__esModule", {
|
|
9
9
|
value: true
|
|
10
10
|
});
|
|
11
|
-
exports.ConditionSelect = exports.CountUp = exports.CountDown = exports.ComplexValSelect = exports.MultipartUpload = exports.LabelConditionSelectInput = exports.Flex = exports.Resizable = exports.RichTextEditor = exports.BeautifulDnd = exports.LabelCustomizeRangePicker = exports.TableCol = exports.LabelTreeSelect = exports.LabelConditionInput = exports.LabelNumberInput = exports.LabelAutoComplete = exports.LabelDatePicker = exports.LabelRangePicker = exports.JsonEditor = exports.AreaText = exports.LabelTextArea = exports.ASelect = exports.LabelSelect = exports.ColorSelect = exports.LabelInput = exports.TextInput = exports.TextArea = exports.SplitPane = exports.sortableHoc = exports.SingleImgUpload = exports.RcTransitionGroup = exports.RcQRcode = exports.RcEchart = exports.StepNumberInput = exports.LabelRangeNumber = exports.NumberInput = exports.RcMotion = exports.KeepTab = exports.ImgCrop = exports.HighlightWords = exports.HighlightTextarea = exports.CopyToClipboard = exports.NumberFormatInput = exports.ConfigProvider = exports.ConditionSelectInput = exports.ConditionInput = exports.ButtonModal = exports.ButtonDrawer = void 0;
|
|
11
|
+
exports.MultiLineEllipsisText = exports.SignaturePad = exports.ConditionSelect = exports.CountUp = exports.CountDown = exports.ComplexValSelect = exports.MultipartUpload = exports.LabelConditionSelectInput = exports.Flex = exports.Resizable = exports.RichTextEditor = exports.BeautifulDnd = exports.LabelCustomizeRangePicker = exports.TableCol = exports.LabelTreeSelect = exports.LabelConditionInput = exports.LabelNumberInput = exports.LabelAutoComplete = exports.LabelDatePicker = exports.LabelRangePicker = exports.JsonEditor = exports.AreaText = exports.LabelTextArea = exports.ASelect = exports.LabelSelect = exports.ColorSelect = exports.LabelInput = exports.TextInput = exports.TextArea = exports.SplitPane = exports.sortableHoc = exports.SingleImgUpload = exports.RcTransitionGroup = exports.RcQRcode = exports.RcEchart = exports.StepNumberInput = exports.LabelRangeNumber = exports.NumberInput = exports.RcMotion = exports.KeepTab = exports.ImgCrop = exports.HighlightWords = exports.HighlightTextarea = exports.CopyToClipboard = exports.NumberFormatInput = exports.ConfigProvider = exports.ConditionSelectInput = exports.ConditionInput = exports.ButtonModal = exports.ButtonDrawer = void 0;
|
|
12
12
|
var button_drawer_1 = require("./button-drawer");
|
|
13
13
|
Object.defineProperty(exports, "ButtonDrawer", {
|
|
14
14
|
enumerable: true,
|
|
@@ -344,4 +344,18 @@ Object.defineProperty(exports, "ConditionSelect", {
|
|
|
344
344
|
get: function get() {
|
|
345
345
|
return __importDefault(condition_select_1)["default"];
|
|
346
346
|
}
|
|
347
|
+
});
|
|
348
|
+
var signature_pad_1 = require("./signature-pad");
|
|
349
|
+
Object.defineProperty(exports, "SignaturePad", {
|
|
350
|
+
enumerable: true,
|
|
351
|
+
get: function get() {
|
|
352
|
+
return __importDefault(signature_pad_1)["default"];
|
|
353
|
+
}
|
|
354
|
+
});
|
|
355
|
+
var multi_line_ellipsis_text_1 = require("./multi-line-ellipsis-text");
|
|
356
|
+
Object.defineProperty(exports, "MultiLineEllipsisText", {
|
|
357
|
+
enumerable: true,
|
|
358
|
+
get: function get() {
|
|
359
|
+
return __importDefault(multi_line_ellipsis_text_1)["default"];
|
|
360
|
+
}
|
|
347
361
|
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TooltipProps } from 'antd/lib/tooltip';
|
|
3
|
+
import type { ButtonModalProps } from '../button-modal';
|
|
4
|
+
export interface MultiLineEllipsisTextProps {
|
|
5
|
+
/** 需要处理的文案 */
|
|
6
|
+
text?: string;
|
|
7
|
+
/** 展示的行数 */
|
|
8
|
+
lines?: number;
|
|
9
|
+
/** 文案样式 */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 展示完整内容的交互类型,不传则不提示 */
|
|
12
|
+
tipType?: 'modal' | 'tooltip';
|
|
13
|
+
/** 弹窗的属性,仅tipType=modal时生效 */
|
|
14
|
+
buttonModalProps?: Omit<ButtonModalProps, 'children'> & {
|
|
15
|
+
children?: ButtonModalProps['children'];
|
|
16
|
+
};
|
|
17
|
+
/** 浮窗的属性,仅tipType=tooltip时生效 */
|
|
18
|
+
tooltipProps?: Omit<TooltipProps, 'title'>;
|
|
19
|
+
/** 省略的回调 */
|
|
20
|
+
onEllipsisChange?: (isEllipsis: boolean) => void;
|
|
21
|
+
/** 点击的回调 */
|
|
22
|
+
onClick?: () => void;
|
|
23
|
+
}
|
|
24
|
+
declare const MultiLineEllipsisText: React.FC<MultiLineEllipsisTextProps>;
|
|
25
|
+
export default MultiLineEllipsisText;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __assign = this && this.__assign || function () {
|
|
4
|
+
__assign = Object.assign || function (t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __read = this && this.__read || function (o, n) {
|
|
14
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
|
+
if (!m) return o;
|
|
16
|
+
var i = m.call(o),
|
|
17
|
+
r,
|
|
18
|
+
ar = [],
|
|
19
|
+
e;
|
|
20
|
+
try {
|
|
21
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
22
|
+
} catch (error) {
|
|
23
|
+
e = {
|
|
24
|
+
error: error
|
|
25
|
+
};
|
|
26
|
+
} finally {
|
|
27
|
+
try {
|
|
28
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
29
|
+
} finally {
|
|
30
|
+
if (e) throw e.error;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return ar;
|
|
34
|
+
};
|
|
35
|
+
var __importDefault = this && this.__importDefault || function (mod) {
|
|
36
|
+
return mod && mod.__esModule ? mod : {
|
|
37
|
+
"default": mod
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
Object.defineProperty(exports, "__esModule", {
|
|
41
|
+
value: true
|
|
42
|
+
});
|
|
43
|
+
var react_1 = __importDefault(require("react"));
|
|
44
|
+
var tooltip_1 = __importDefault(require("antd/lib/tooltip"));
|
|
45
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
46
|
+
var omit_1 = __importDefault(require("lodash/omit"));
|
|
47
|
+
var button_modal_1 = __importDefault(require("../button-modal"));
|
|
48
|
+
var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
|
|
49
|
+
var _b = _a.text,
|
|
50
|
+
text = _b === void 0 ? '' : _b,
|
|
51
|
+
_c = _a.lines,
|
|
52
|
+
lines = _c === void 0 ? 3 : _c,
|
|
53
|
+
_d = _a.className,
|
|
54
|
+
className = _d === void 0 ? '' : _d,
|
|
55
|
+
tipType = _a.tipType,
|
|
56
|
+
buttonModalProps = _a.buttonModalProps,
|
|
57
|
+
tooltipProps = _a.tooltipProps,
|
|
58
|
+
onEllipsisChange = _a.onEllipsisChange,
|
|
59
|
+
onClick = _a.onClick;
|
|
60
|
+
var ref = react_1["default"].useRef(null);
|
|
61
|
+
var _e = __read(react_1["default"].useState(false), 2),
|
|
62
|
+
isEllipsis = _e[0],
|
|
63
|
+
setIsEllipsis = _e[1];
|
|
64
|
+
react_1["default"].useEffect(function () {
|
|
65
|
+
var el = ref.current;
|
|
66
|
+
if (!el) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
// 等待浏览器渲染完再计算高度
|
|
70
|
+
requestAnimationFrame(function () {
|
|
71
|
+
var style = window.getComputedStyle(el);
|
|
72
|
+
var lineHeight = parseFloat(style.lineHeight);
|
|
73
|
+
var maxHeight = lineHeight * lines;
|
|
74
|
+
var overflow = el.scrollHeight > maxHeight + 1; // +1 容差
|
|
75
|
+
setIsEllipsis(overflow);
|
|
76
|
+
onEllipsisChange === null || onEllipsisChange === void 0 ? void 0 : onEllipsisChange(overflow);
|
|
77
|
+
});
|
|
78
|
+
}, [text, lines, onEllipsisChange]);
|
|
79
|
+
var ellipsisNode = react_1["default"].createElement("div", {
|
|
80
|
+
ref: ref,
|
|
81
|
+
className: (0, classnames_1["default"])('ellipsis', className, {
|
|
82
|
+
cursor: isEllipsis && tipType
|
|
83
|
+
}),
|
|
84
|
+
style: {
|
|
85
|
+
WebkitLineClamp: lines,
|
|
86
|
+
display: '-webkit-box',
|
|
87
|
+
WebkitBoxOrient: 'vertical',
|
|
88
|
+
overflow: 'hidden',
|
|
89
|
+
textOverflow: 'ellipsis',
|
|
90
|
+
whiteSpace: 'pre-wrap',
|
|
91
|
+
wordBreak: 'break-all'
|
|
92
|
+
},
|
|
93
|
+
title: isEllipsis ? text : undefined,
|
|
94
|
+
onClick: isEllipsis ? onClick : undefined
|
|
95
|
+
}, text);
|
|
96
|
+
if (isEllipsis && tipType === 'modal') {
|
|
97
|
+
return react_1["default"].createElement(button_modal_1["default"], __assign({
|
|
98
|
+
destroyOnClose: true,
|
|
99
|
+
width: 325,
|
|
100
|
+
footer: null
|
|
101
|
+
}, (0, omit_1["default"])(buttonModalProps, 'children'), {
|
|
102
|
+
className: (0, classnames_1["default"])('ellipsis-modal', buttonModalProps === null || buttonModalProps === void 0 ? void 0 : buttonModalProps.className),
|
|
103
|
+
trigger: ellipsisNode
|
|
104
|
+
}), (buttonModalProps === null || buttonModalProps === void 0 ? void 0 : buttonModalProps.children) || react_1["default"].createElement("div", {
|
|
105
|
+
className: "ellipsis-modal-content"
|
|
106
|
+
}, text));
|
|
107
|
+
}
|
|
108
|
+
if (isEllipsis && tipType === 'tooltip') {
|
|
109
|
+
return react_1["default"].createElement(tooltip_1["default"], __assign({}, tooltipProps, {
|
|
110
|
+
overlayClassName: (0, classnames_1["default"])('ellipsis-tooltip', tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.overlayClassName),
|
|
111
|
+
title: react_1["default"].createElement("div", {
|
|
112
|
+
className: "ellipsis-tooltip-content"
|
|
113
|
+
}, text)
|
|
114
|
+
}), ellipsisNode);
|
|
115
|
+
}
|
|
116
|
+
return ellipsisNode;
|
|
117
|
+
};
|
|
118
|
+
exports["default"] = MultiLineEllipsisText;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.ellipsis-modal-content {
|
|
2
|
+
width: 100%;
|
|
3
|
+
max-height: 40vh;
|
|
4
|
+
overflow: auto;
|
|
5
|
+
color: #7d7d7d;
|
|
6
|
+
white-space: pre-wrap;
|
|
7
|
+
}
|
|
8
|
+
.ellipsis-tooltip {
|
|
9
|
+
max-width: 320px;
|
|
10
|
+
}
|
|
11
|
+
.ellipsis-tooltip-content {
|
|
12
|
+
max-height: 40vh;
|
|
13
|
+
overflow: auto;
|
|
14
|
+
white-space: pre-wrap;
|
|
15
|
+
}
|
|
16
|
+
.cursor {
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import '../../style/variables.less';
|
|
2
|
+
|
|
3
|
+
.ellipsis-modal-content {
|
|
4
|
+
width: 100%;
|
|
5
|
+
max-height: 40vh;
|
|
6
|
+
overflow: auto;
|
|
7
|
+
color: @color_7d7d7d;
|
|
8
|
+
white-space: pre-wrap;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ellipsis-tooltip {
|
|
12
|
+
max-width: 320px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ellipsis-tooltip-content {
|
|
16
|
+
max-height: 40vh;
|
|
17
|
+
overflow: auto;
|
|
18
|
+
white-space: pre-wrap;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cursor {
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
@@ -28,7 +28,7 @@ declare const _default: {
|
|
|
28
28
|
'Increase indent': string;
|
|
29
29
|
Close: string;
|
|
30
30
|
Formats: string;
|
|
31
|
-
|
|
31
|
+
'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.': string;
|
|
32
32
|
Headings: string;
|
|
33
33
|
'Heading 1': string;
|
|
34
34
|
'Heading 2': string;
|
|
@@ -33,7 +33,7 @@ exports["default"] = {
|
|
|
33
33
|
'Increase indent': "\u589E\u52A0\u7F29\u8FDB",
|
|
34
34
|
'Close': "\u5173\u95ED",
|
|
35
35
|
'Formats': "\u683C\u5F0F",
|
|
36
|
-
|
|
36
|
+
'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.': "\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6253\u5F00\u526A\u8D34\u677F\uFF0C\u8BF7\u4F7F\u7528Ctrl+X/C/V\u7B49\u5FEB\u6377\u952E\u3002",
|
|
37
37
|
'Headings': "\u6807\u9898",
|
|
38
38
|
'Heading 1': "\u6807\u98981",
|
|
39
39
|
'Heading 2': "\u6807\u98982",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type SignaturePadProps = {
|
|
3
|
+
/** 默认背景文字 */
|
|
4
|
+
defaultText?: string;
|
|
5
|
+
/** canvas宽度 */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** canvas高度 */
|
|
8
|
+
height?: number;
|
|
9
|
+
/** 自定义类名 */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 画笔颜色 */
|
|
12
|
+
penColor?: string;
|
|
13
|
+
/** 背景颜色 */
|
|
14
|
+
backgroundColor?: string;
|
|
15
|
+
/** 背景文字颜色 */
|
|
16
|
+
backgroundTextColor?: string;
|
|
17
|
+
/** 背景文字大小 */
|
|
18
|
+
backgroundTextSize?: string;
|
|
19
|
+
/** 签名结束回调 */
|
|
20
|
+
onEnd?: () => void;
|
|
21
|
+
/** 签名开始回调 */
|
|
22
|
+
onBegin?: () => void;
|
|
23
|
+
};
|
|
24
|
+
export interface SignaturePadRef {
|
|
25
|
+
clearSignature: () => void;
|
|
26
|
+
saveSignature: () => string | null;
|
|
27
|
+
isEmpty: () => boolean;
|
|
28
|
+
undo: () => boolean;
|
|
29
|
+
}
|
|
30
|
+
declare const SignaturePadComponent: React.ForwardRefExoticComponent<SignaturePadProps & React.RefAttributes<SignaturePadRef>>;
|
|
31
|
+
export default SignaturePadComponent;
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
|
|
20
|
+
Object.defineProperty(o, "default", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
value: v
|
|
23
|
+
});
|
|
24
|
+
} : function (o, v) {
|
|
25
|
+
o["default"] = v;
|
|
26
|
+
});
|
|
27
|
+
var __importStar = this && this.__importStar || function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
Object.defineProperty(exports, "__esModule", {
|
|
35
|
+
value: true
|
|
36
|
+
});
|
|
37
|
+
// SignaturePadComponent.tsx
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var SignaturePadComponent = (0, react_1.forwardRef)(function (_a, ref) {
|
|
40
|
+
var _b = _a.defaultText,
|
|
41
|
+
defaultText = _b === void 0 ? '请在此处签名' : _b,
|
|
42
|
+
_c = _a.width,
|
|
43
|
+
width = _c === void 0 ? 500 : _c,
|
|
44
|
+
_d = _a.height,
|
|
45
|
+
height = _d === void 0 ? 300 : _d,
|
|
46
|
+
className = _a.className,
|
|
47
|
+
_e = _a.penColor,
|
|
48
|
+
penColor = _e === void 0 ? 'black' : _e,
|
|
49
|
+
_f = _a.backgroundColor,
|
|
50
|
+
backgroundColor = _f === void 0 ? 'white' : _f,
|
|
51
|
+
_g = _a.backgroundTextColor,
|
|
52
|
+
backgroundTextColor = _g === void 0 ? '#ccc' : _g,
|
|
53
|
+
_h = _a.backgroundTextSize,
|
|
54
|
+
backgroundTextSize = _h === void 0 ? '30px' : _h,
|
|
55
|
+
onEnd = _a.onEnd,
|
|
56
|
+
onBegin = _a.onBegin;
|
|
57
|
+
var canvasRef = (0, react_1.useRef)(null);
|
|
58
|
+
var signaturePadRef = (0, react_1.useRef)(null);
|
|
59
|
+
var historyRef = (0, react_1.useRef)([]);
|
|
60
|
+
var currentStepRef = (0, react_1.useRef)(-1);
|
|
61
|
+
// 绘制背景文字
|
|
62
|
+
var drawBackgroundText = (0, react_1.useCallback)(function () {
|
|
63
|
+
if (canvasRef.current) {
|
|
64
|
+
var canvas = canvasRef.current;
|
|
65
|
+
var ctx = canvas.getContext('2d');
|
|
66
|
+
if (ctx) {
|
|
67
|
+
// 保存当前画布状态
|
|
68
|
+
ctx.save();
|
|
69
|
+
// 清除画布
|
|
70
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
71
|
+
// 设置背景
|
|
72
|
+
ctx.fillStyle = backgroundColor;
|
|
73
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
74
|
+
// 设置文字样式
|
|
75
|
+
ctx.font = "".concat(backgroundTextSize, " Arial");
|
|
76
|
+
ctx.fillStyle = backgroundTextColor;
|
|
77
|
+
ctx.textAlign = 'center';
|
|
78
|
+
ctx.textBaseline = 'middle';
|
|
79
|
+
// 绘制背景文字
|
|
80
|
+
ctx.fillText(defaultText, canvas.width / 2, canvas.height / 2);
|
|
81
|
+
// 恢复画布状态
|
|
82
|
+
ctx.restore();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}, [defaultText, backgroundColor, backgroundTextColor]);
|
|
86
|
+
// 保存当前状态到历史记录
|
|
87
|
+
var saveToHistory = (0, react_1.useCallback)(function () {
|
|
88
|
+
if (signaturePadRef.current && !signaturePadRef.current.isEmpty()) {
|
|
89
|
+
var dataURL = signaturePadRef.current.toDataURL();
|
|
90
|
+
// 移除当前步骤之后的所有历史记录
|
|
91
|
+
var newHistory = historyRef.current.slice(0, currentStepRef.current + 1);
|
|
92
|
+
newHistory.push(dataURL);
|
|
93
|
+
historyRef.current = newHistory;
|
|
94
|
+
currentStepRef.current = newHistory.length - 1;
|
|
95
|
+
}
|
|
96
|
+
}, []);
|
|
97
|
+
// 清除签名
|
|
98
|
+
var clearSignature = (0, react_1.useCallback)(function () {
|
|
99
|
+
if (signaturePadRef.current) {
|
|
100
|
+
signaturePadRef.current.clear();
|
|
101
|
+
drawBackgroundText();
|
|
102
|
+
// 清除历史记录
|
|
103
|
+
historyRef.current = [];
|
|
104
|
+
currentStepRef.current = -1;
|
|
105
|
+
}
|
|
106
|
+
}, [drawBackgroundText]);
|
|
107
|
+
// 保存签名
|
|
108
|
+
var saveSignature = (0, react_1.useCallback)(function () {
|
|
109
|
+
if (signaturePadRef.current && !signaturePadRef.current.isEmpty()) {
|
|
110
|
+
return signaturePadRef.current;
|
|
111
|
+
}
|
|
112
|
+
return null;
|
|
113
|
+
}, []);
|
|
114
|
+
// 回撤功能
|
|
115
|
+
var undo = (0, react_1.useCallback)(function () {
|
|
116
|
+
// 如果没有历史记录或已经在第一步,则清除
|
|
117
|
+
if (historyRef.current.length === 0 || currentStepRef.current <= 0) {
|
|
118
|
+
clearSignature();
|
|
119
|
+
return true;
|
|
120
|
+
}
|
|
121
|
+
// 回退到上一步
|
|
122
|
+
var prevStep = currentStepRef.current - 1;
|
|
123
|
+
currentStepRef.current = prevStep;
|
|
124
|
+
if (prevStep >= 0 && historyRef.current[prevStep]) {
|
|
125
|
+
// 从历史记录恢复
|
|
126
|
+
var previousDataURL_1 = historyRef.current[prevStep];
|
|
127
|
+
if (canvasRef.current) {
|
|
128
|
+
var ctx_1 = canvasRef.current.getContext('2d');
|
|
129
|
+
if (ctx_1) {
|
|
130
|
+
var img_1 = new Image();
|
|
131
|
+
img_1.onload = function () {
|
|
132
|
+
// 清除画布
|
|
133
|
+
ctx_1.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
134
|
+
// 绘制背景
|
|
135
|
+
ctx_1.fillStyle = backgroundColor;
|
|
136
|
+
ctx_1.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
137
|
+
// 绘制历史图片,确保缩放到正确的尺寸
|
|
138
|
+
ctx_1.drawImage(img_1, 0, 0, img_1.width, img_1.height,
|
|
139
|
+
// 源图片的尺寸
|
|
140
|
+
0, 0, canvasRef.current.width, canvasRef.current.height);
|
|
141
|
+
// 更新 signature_pad 内部状态
|
|
142
|
+
if (signaturePadRef.current) {
|
|
143
|
+
// 使用 fromDataURL 更新 signature_pad 的内部数据
|
|
144
|
+
signaturePadRef.current.fromDataURL(previousDataURL_1, {
|
|
145
|
+
width: canvasRef.current.width,
|
|
146
|
+
height: canvasRef.current.height
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
img_1.onerror = function () {
|
|
151
|
+
// 如果图片加载失败,回退到清除
|
|
152
|
+
clearSignature();
|
|
153
|
+
};
|
|
154
|
+
img_1.src = previousDataURL_1;
|
|
155
|
+
return true;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
return false;
|
|
160
|
+
}, [clearSignature, backgroundColor]);
|
|
161
|
+
// 初始化签名板
|
|
162
|
+
(0, react_1.useEffect)(function () {
|
|
163
|
+
if (canvasRef.current) {
|
|
164
|
+
// 动态导入signature_pad
|
|
165
|
+
Promise.resolve().then(function () {
|
|
166
|
+
return __importStar(require('signature_pad'));
|
|
167
|
+
}).then(function (SignaturePadModule) {
|
|
168
|
+
var SignaturePad = SignaturePadModule["default"];
|
|
169
|
+
// 初始化签名板
|
|
170
|
+
signaturePadRef.current = new SignaturePad(canvasRef.current, {
|
|
171
|
+
penColor: penColor,
|
|
172
|
+
backgroundColor: 'transparent',
|
|
173
|
+
// 设置为透明,因为我们自己绘制背景
|
|
174
|
+
minWidth: 1,
|
|
175
|
+
maxWidth: 4
|
|
176
|
+
});
|
|
177
|
+
// 绘制默认背景文字
|
|
178
|
+
drawBackgroundText();
|
|
179
|
+
// 修复:正确添加事件监听
|
|
180
|
+
signaturePadRef.current.onBegin = function () {
|
|
181
|
+
onBegin === null || onBegin === void 0 ? void 0 : onBegin();
|
|
182
|
+
};
|
|
183
|
+
signaturePadRef.current.onEnd = function () {
|
|
184
|
+
setTimeout(function () {
|
|
185
|
+
if (signaturePadRef.current) {
|
|
186
|
+
saveToHistory();
|
|
187
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd();
|
|
188
|
+
}
|
|
189
|
+
}, 50);
|
|
190
|
+
};
|
|
191
|
+
signaturePadRef.current.addEventListener('beginStroke', function () {
|
|
192
|
+
console.log('签名开始事件触发');
|
|
193
|
+
onBegin === null || onBegin === void 0 ? void 0 : onBegin();
|
|
194
|
+
});
|
|
195
|
+
signaturePadRef.current.addEventListener('endStroke', function () {
|
|
196
|
+
console.log('签名结束事件触发');
|
|
197
|
+
setTimeout(function () {
|
|
198
|
+
if (signaturePadRef.current) {
|
|
199
|
+
var isPadEmpty = signaturePadRef.current.isEmpty();
|
|
200
|
+
console.log('签名结束时的isEmpty:', isPadEmpty);
|
|
201
|
+
saveToHistory();
|
|
202
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd();
|
|
203
|
+
}
|
|
204
|
+
}, 50);
|
|
205
|
+
});
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
return function () {
|
|
209
|
+
if (signaturePadRef.current) {
|
|
210
|
+
// 清理事件监听
|
|
211
|
+
signaturePadRef.current.off();
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
}, [drawBackgroundText, saveToHistory, onEnd, onBegin, penColor]);
|
|
215
|
+
// 暴露方法给父组件
|
|
216
|
+
(0, react_1.useImperativeHandle)(ref, function () {
|
|
217
|
+
return {
|
|
218
|
+
clearSignature: clearSignature,
|
|
219
|
+
saveSignature: saveSignature,
|
|
220
|
+
isEmpty: function isEmpty() {
|
|
221
|
+
if (signaturePadRef.current) {
|
|
222
|
+
return signaturePadRef.current.isEmpty();
|
|
223
|
+
}
|
|
224
|
+
return true;
|
|
225
|
+
},
|
|
226
|
+
undo: undo
|
|
227
|
+
};
|
|
228
|
+
});
|
|
229
|
+
return react_1["default"].createElement("div", {
|
|
230
|
+
className: "signature-pad-container ".concat(className)
|
|
231
|
+
}, react_1["default"].createElement("canvas", {
|
|
232
|
+
ref: canvasRef,
|
|
233
|
+
width: width,
|
|
234
|
+
height: height,
|
|
235
|
+
style: {
|
|
236
|
+
border: '1px dashed #ccc',
|
|
237
|
+
backgroundColor: backgroundColor,
|
|
238
|
+
height: 'auto'
|
|
239
|
+
}
|
|
240
|
+
}));
|
|
241
|
+
});
|
|
242
|
+
exports["default"] = SignaturePadComponent;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.signature-modal-wrap {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 10px;
|
|
4
|
+
right: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 1000;
|
|
8
|
+
width: 100vw;
|
|
9
|
+
height: 84vh;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}
|
|
12
|
+
.signature-canvas-container {
|
|
13
|
+
position: relative;
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: calc(84vh - 66px);
|
|
19
|
+
/* 减去按钮区域的高度 */
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background-color: #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
.signature-canvas {
|
|
24
|
+
background-color: white;
|
|
25
|
+
border-bottom: 1px solid #d9d9d9;
|
|
26
|
+
touch-action: none;
|
|
27
|
+
}
|
|
28
|
+
.buttonBox {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
margin-top: 10px;
|
|
32
|
+
}
|
|
33
|
+
.btnGroup {
|
|
34
|
+
margin-right: 32px;
|
|
35
|
+
padding-top: 0;
|
|
36
|
+
}
|
|
37
|
+
.clear-btn {
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.signature-modal-wrap {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 10px;
|
|
4
|
+
right: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 1000;
|
|
8
|
+
width: 100vw;
|
|
9
|
+
height: 84vh;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.signature-canvas-container {
|
|
14
|
+
position: relative;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: calc(84vh - 66px); /* 减去按钮区域的高度 */
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background-color: #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.signature-canvas {
|
|
25
|
+
background-color: white;
|
|
26
|
+
border-bottom: 1px solid #d9d9d9;
|
|
27
|
+
touch-action: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
.buttonBox {
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
margin-top: 10px
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.btnGroup{
|
|
40
|
+
margin-right: 32px;
|
|
41
|
+
padding-top: 0;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.clear-btn{
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.59",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@types/react-beautiful-dnd": "^13.1.2",
|
|
36
36
|
"@types/react-color": "^3.0.6",
|
|
37
37
|
"@types/react-resizable": "^3.0.0",
|
|
38
|
-
"a-icons": "^1.2.
|
|
38
|
+
"a-icons": "^1.2.42",
|
|
39
39
|
"aa-utils": "^2.1.31",
|
|
40
40
|
"ahooks": "^3.9.5",
|
|
41
41
|
"bignumber.js": "^9.0.1",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"react-split-pane": "^0.1.92",
|
|
59
59
|
"react-transition-group": "^4.4.2",
|
|
60
60
|
"resize-observer-polyfill": "^1.5.1",
|
|
61
|
+
"signature_pad": "^5.1.1",
|
|
61
62
|
"tinymce": "^6.0.2"
|
|
62
63
|
},
|
|
63
64
|
"peerDependencies": {
|
|
@@ -86,5 +87,5 @@
|
|
|
86
87
|
"node": ">=10.0.0"
|
|
87
88
|
},
|
|
88
89
|
"license": "MIT",
|
|
89
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "f5e2786ae338524b0c55f43a1814c739f8e3bc23"
|
|
90
91
|
}
|