@progress/kendo-react-inputs 5.6.0-dev.202208291054 → 5.6.0-next.202208310638
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/dist/es/checkbox/Checkbox.js +1 -0
- package/dist/es/colors/ColorInput.js +1 -1
- package/dist/es/colors/ColorPalette.d.ts +1 -1
- package/dist/es/colors/ColorPicker.js +1 -1
- package/dist/es/colors/FlatColorPicker.js +1 -1
- package/dist/es/input/InputClearValue.d.ts +15 -0
- package/dist/es/input/InputClearValue.js +24 -0
- package/dist/es/input/InputPrefix.d.ts +15 -0
- package/dist/es/input/InputPrefix.js +24 -0
- package/dist/es/input/InputSeparator.d.ts +15 -0
- package/dist/es/input/InputSeparator.js +24 -0
- package/dist/es/input/InputSuffix.d.ts +15 -0
- package/dist/es/input/InputSuffix.js +24 -0
- package/dist/es/input/InputValidationIcon.d.ts +14 -0
- package/dist/es/input/InputValidationIcon.js +20 -0
- package/dist/es/main.d.ts +6 -2
- package/dist/es/main.js +6 -2
- package/dist/es/maskedtextbox/MaskedTextBox.d.ts +1 -1
- package/dist/es/messages/index.d.ts +0 -15
- package/dist/es/messages/index.js +0 -15
- package/dist/es/numerictextbox/NumericTextBox.js +2 -2
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/slider/Slider.js +2 -6
- package/dist/es/slider/SliderLabel.js +1 -2
- package/dist/es/switch/Switch.js +5 -5
- package/dist/es/textbox/Textbox.d.ts +69 -0
- package/dist/es/textbox/Textbox.js +111 -0
- package/dist/npm/checkbox/Checkbox.js +1 -0
- package/dist/npm/colors/ColorInput.js +1 -1
- package/dist/npm/colors/ColorPalette.d.ts +1 -1
- package/dist/npm/colors/ColorPicker.js +1 -1
- package/dist/npm/colors/FlatColorPicker.js +1 -1
- package/dist/npm/input/InputClearValue.d.ts +15 -0
- package/dist/npm/input/InputClearValue.js +27 -0
- package/dist/npm/input/InputPrefix.d.ts +15 -0
- package/dist/npm/input/InputPrefix.js +27 -0
- package/dist/npm/input/InputSeparator.d.ts +15 -0
- package/dist/npm/input/InputSeparator.js +27 -0
- package/dist/npm/input/InputSuffix.d.ts +15 -0
- package/dist/npm/input/InputSuffix.js +27 -0
- package/dist/npm/input/InputValidationIcon.d.ts +14 -0
- package/dist/npm/input/InputValidationIcon.js +23 -0
- package/dist/npm/main.d.ts +6 -2
- package/dist/npm/main.js +13 -3
- package/dist/npm/maskedtextbox/MaskedTextBox.d.ts +1 -1
- package/dist/npm/messages/index.d.ts +0 -15
- package/dist/npm/messages/index.js +1 -16
- package/dist/npm/numerictextbox/NumericTextBox.js +2 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/slider/Slider.js +2 -6
- package/dist/npm/slider/SliderLabel.js +1 -2
- package/dist/npm/switch/Switch.js +5 -5
- package/dist/npm/textbox/Textbox.d.ts +69 -0
- package/dist/npm/textbox/Textbox.js +114 -0
- package/dist/systemjs/kendo-react-inputs.js +1 -1
- package/package.json +16 -19
- package/dist/es/signature/Signature.d.ts +0 -14
- package/dist/es/signature/Signature.js +0 -346
- package/dist/es/signature/interfaces/SignatureBlurEvent.d.ts +0 -7
- package/dist/es/signature/interfaces/SignatureBlurEvent.js +0 -1
- package/dist/es/signature/interfaces/SignatureChangeEvent.d.ts +0 -11
- package/dist/es/signature/interfaces/SignatureChangeEvent.js +0 -1
- package/dist/es/signature/interfaces/SignatureCloseEvent.d.ts +0 -7
- package/dist/es/signature/interfaces/SignatureCloseEvent.js +0 -1
- package/dist/es/signature/interfaces/SignatureFocusEvent.d.ts +0 -7
- package/dist/es/signature/interfaces/SignatureFocusEvent.js +0 -1
- package/dist/es/signature/interfaces/SignatureHandle.d.ts +0 -34
- package/dist/es/signature/interfaces/SignatureHandle.js +0 -1
- package/dist/es/signature/interfaces/SignatureOpenEvent.d.ts +0 -7
- package/dist/es/signature/interfaces/SignatureOpenEvent.js +0 -1
- package/dist/es/signature/interfaces/SignatureProps.d.ts +0 -196
- package/dist/es/signature/interfaces/SignatureProps.js +0 -1
- package/dist/es/signature/interfaces/index.d.ts +0 -7
- package/dist/es/signature/interfaces/index.js +0 -1
- package/dist/es/signature/utils/index.d.ts +0 -4
- package/dist/es/signature/utils/index.js +0 -10
- package/dist/npm/signature/Signature.d.ts +0 -14
- package/dist/npm/signature/Signature.js +0 -349
- package/dist/npm/signature/interfaces/SignatureBlurEvent.d.ts +0 -7
- package/dist/npm/signature/interfaces/SignatureBlurEvent.js +0 -2
- package/dist/npm/signature/interfaces/SignatureChangeEvent.d.ts +0 -11
- package/dist/npm/signature/interfaces/SignatureChangeEvent.js +0 -2
- package/dist/npm/signature/interfaces/SignatureCloseEvent.d.ts +0 -7
- package/dist/npm/signature/interfaces/SignatureCloseEvent.js +0 -2
- package/dist/npm/signature/interfaces/SignatureFocusEvent.d.ts +0 -7
- package/dist/npm/signature/interfaces/SignatureFocusEvent.js +0 -2
- package/dist/npm/signature/interfaces/SignatureHandle.d.ts +0 -34
- package/dist/npm/signature/interfaces/SignatureHandle.js +0 -2
- package/dist/npm/signature/interfaces/SignatureOpenEvent.d.ts +0 -7
- package/dist/npm/signature/interfaces/SignatureOpenEvent.js +0 -2
- package/dist/npm/signature/interfaces/SignatureProps.d.ts +0 -196
- package/dist/npm/signature/interfaces/SignatureProps.js +0 -2
- package/dist/npm/signature/interfaces/index.d.ts +0 -7
- package/dist/npm/signature/interfaces/index.js +0 -2
- package/dist/npm/signature/utils/index.d.ts +0 -4
- package/dist/npm/signature/utils/index.js +0 -14
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-inputs",
|
|
3
|
-
"version": "5.6.0-
|
|
3
|
+
"version": "5.6.0-next.202208310638",
|
|
4
4
|
"description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -31,38 +31,35 @@
|
|
|
31
31
|
"Telerik"
|
|
32
32
|
],
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"@progress/kendo-drawing": "^1.
|
|
34
|
+
"@progress/kendo-drawing": "^1.5.12",
|
|
35
35
|
"@progress/kendo-licensing": "^1.0.1",
|
|
36
36
|
"@progress/kendo-react-animation": "^5.0.0",
|
|
37
|
+
"@progress/kendo-react-form": "^5.0.0",
|
|
37
38
|
"@progress/kendo-react-intl": "^5.0.0",
|
|
38
39
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
39
40
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
40
41
|
},
|
|
41
42
|
"dependencies": {
|
|
42
|
-
"@progress/kendo-
|
|
43
|
-
"@progress/kendo-react-
|
|
44
|
-
"@progress/kendo-react-
|
|
45
|
-
"@progress/kendo-react-
|
|
46
|
-
"@progress/kendo-react-labels": "5.6.0-dev.202208291054",
|
|
47
|
-
"@progress/kendo-react-popup": "5.6.0-dev.202208291054",
|
|
43
|
+
"@progress/kendo-react-buttons": "5.6.0-next.202208310638",
|
|
44
|
+
"@progress/kendo-react-common": "5.6.0-next.202208310638",
|
|
45
|
+
"@progress/kendo-react-labels": "5.6.0-next.202208310638",
|
|
46
|
+
"@progress/kendo-react-popup": "5.6.0-next.202208310638",
|
|
48
47
|
"prop-types": "^15.6.0"
|
|
49
48
|
},
|
|
50
49
|
"devDependencies": {
|
|
51
50
|
"@progress/kendo-data-query": "^1.5.5",
|
|
52
51
|
"@progress/kendo-date-math": "^1.5.4",
|
|
53
52
|
"@progress/kendo-drawing": "^1.8.0",
|
|
54
|
-
"@progress/kendo-file-saver": "^1.1.1",
|
|
55
53
|
"@progress/kendo-licensing": "^1.0.1",
|
|
56
|
-
"@progress/kendo-react-animation": "5.6.0-
|
|
57
|
-
"@progress/kendo-react-data-tools": "5.6.0-
|
|
58
|
-
"@progress/kendo-react-dateinputs": "5.6.0-
|
|
59
|
-
"@progress/kendo-react-dropdowns": "5.6.0-
|
|
60
|
-
"@progress/kendo-react-form": "5.6.0-
|
|
61
|
-
"@progress/kendo-react-grid": "5.6.0-
|
|
62
|
-
"@progress/kendo-react-intl": "5.6.0-
|
|
63
|
-
"@progress/kendo-react-labels": "5.6.0-
|
|
64
|
-
"@progress/kendo-react-tooltip": "5.6.0-
|
|
65
|
-
"@progress/kendo-react-upload": "5.6.0-dev.202208291054",
|
|
54
|
+
"@progress/kendo-react-animation": "5.6.0-next.202208310638",
|
|
55
|
+
"@progress/kendo-react-data-tools": "5.6.0-next.202208310638",
|
|
56
|
+
"@progress/kendo-react-dateinputs": "5.6.0-next.202208310638",
|
|
57
|
+
"@progress/kendo-react-dropdowns": "5.6.0-next.202208310638",
|
|
58
|
+
"@progress/kendo-react-form": "5.6.0-next.202208310638",
|
|
59
|
+
"@progress/kendo-react-grid": "5.6.0-next.202208310638",
|
|
60
|
+
"@progress/kendo-react-intl": "5.6.0-next.202208310638",
|
|
61
|
+
"@progress/kendo-react-labels": "5.6.0-next.202208310638",
|
|
62
|
+
"@progress/kendo-react-tooltip": "5.6.0-next.202208310638",
|
|
66
63
|
"formik": "^2.2.9"
|
|
67
64
|
},
|
|
68
65
|
"@progress": {
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SignatureHandle } from './interfaces/SignatureHandle';
|
|
3
|
-
import { SignatureProps } from './interfaces/SignatureProps';
|
|
4
|
-
/**
|
|
5
|
-
* Represents the PropsContext of the `Signature` component.
|
|
6
|
-
* Used for global configuration of all `Signature` instances.
|
|
7
|
-
*
|
|
8
|
-
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
|
|
9
|
-
*/
|
|
10
|
-
export declare const SignaturePropsContext: React.Context<(p: SignatureProps) => SignatureProps>;
|
|
11
|
-
/**
|
|
12
|
-
* Represents the [KendoReact Signature component]({% slug overview_signature %}).
|
|
13
|
-
*/
|
|
14
|
-
export declare const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<SignatureHandle | null>>;
|
|
@@ -1,346 +0,0 @@
|
|
|
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))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
-
function step(op) {
|
|
26
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
-
while (_) try {
|
|
28
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
-
switch (op[0]) {
|
|
31
|
-
case 0: case 1: t = op; break;
|
|
32
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
-
default:
|
|
36
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
-
if (t[2]) _.ops.pop();
|
|
41
|
-
_.trys.pop(); continue;
|
|
42
|
-
}
|
|
43
|
-
op = body.call(thisArg, _);
|
|
44
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
import { SignaturePad } from '@progress/kendo-inputs-common';
|
|
49
|
-
import { Button } from '@progress/kendo-react-buttons';
|
|
50
|
-
import { classNames, createPropsContext, dispatchEvent, getTabIndex, kendoThemeMaps, noop, usePropsContext } from '@progress/kendo-react-common';
|
|
51
|
-
import { validatePackage } from '@progress/kendo-react-common';
|
|
52
|
-
import { Dialog } from '@progress/kendo-react-dialogs';
|
|
53
|
-
import { useLocalization } from '@progress/kendo-react-intl';
|
|
54
|
-
import * as PropTypes from 'prop-types';
|
|
55
|
-
import * as React from 'react';
|
|
56
|
-
import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages';
|
|
57
|
-
import { packageMetadata } from '../package-metadata';
|
|
58
|
-
import { hasParent } from './utils';
|
|
59
|
-
var DEFAULT_WIDTH = 250;
|
|
60
|
-
var DEFAULT_HEIGHT = 84;
|
|
61
|
-
var DEFAULT_POPUP_SCALE = 3;
|
|
62
|
-
var DEFAULT_EXPORT_SCALE = 2;
|
|
63
|
-
/**
|
|
64
|
-
* @hidden
|
|
65
|
-
*/
|
|
66
|
-
var isControlled = function (prop) {
|
|
67
|
-
return prop !== undefined;
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* Represents the PropsContext of the `Signature` component.
|
|
71
|
-
* Used for global configuration of all `Signature` instances.
|
|
72
|
-
*
|
|
73
|
-
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
|
|
74
|
-
*/
|
|
75
|
-
export var SignaturePropsContext = createPropsContext();
|
|
76
|
-
/**
|
|
77
|
-
* Represents the [KendoReact Signature component]({% slug overview_signature %}).
|
|
78
|
-
*/
|
|
79
|
-
export var Signature = React.forwardRef(function (directProps, target) {
|
|
80
|
-
var _a;
|
|
81
|
-
validatePackage(packageMetadata);
|
|
82
|
-
var props = usePropsContext(SignaturePropsContext, directProps);
|
|
83
|
-
var localizationService = useLocalization();
|
|
84
|
-
var elementRef = React.useRef(null);
|
|
85
|
-
var canvasRef = React.useRef(null);
|
|
86
|
-
var dialogRef = React.useRef(null);
|
|
87
|
-
var _b = React.useState(), instance = _b[0], setInstance = _b[1];
|
|
88
|
-
var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
|
|
89
|
-
var _d = React.useState(false), isDrawing = _d[0], setIsDrawing = _d[1];
|
|
90
|
-
var _e = React.useState(), stateValue = _e[0], setStateValue = _e[1];
|
|
91
|
-
var _f = React.useState(), popupValue = _f[0], setPopupValue = _f[1];
|
|
92
|
-
var isValueControlled = isControlled(props.value);
|
|
93
|
-
var value = isValueControlled ? props.value : stateValue;
|
|
94
|
-
var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
|
|
95
|
-
var isOpenControlled = isControlled(props.open);
|
|
96
|
-
var open = isOpenControlled ? props.open : stateOpen;
|
|
97
|
-
var showMaximize = !(props.maximized || isDrawing || !props.maximizable || props.disabled);
|
|
98
|
-
var showMinimize = props.maximized && !isDrawing;
|
|
99
|
-
var isEmpty = !(props.value || stateValue);
|
|
100
|
-
var showClear = !(isEmpty || isDrawing || props.readOnly || props.disabled);
|
|
101
|
-
var maximizeTitle = localizationService.toLanguageString(signatureMaximize, messages[signatureMaximize]);
|
|
102
|
-
var minimizeTitle = localizationService.toLanguageString(signatureMinimize, messages[signatureMinimize]);
|
|
103
|
-
var clearTitle = localizationService.toLanguageString(signatureClear, messages[signatureClear]);
|
|
104
|
-
var onValueChange = function (nextValue) {
|
|
105
|
-
setStateValue(nextValue);
|
|
106
|
-
if (props.onChange) {
|
|
107
|
-
props.onChange({ value: nextValue });
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
var onDialogChange = function (e) {
|
|
111
|
-
instance === null || instance === void 0 ? void 0 : instance.loadImage(e.value);
|
|
112
|
-
onValueChange(e.value);
|
|
113
|
-
};
|
|
114
|
-
React.useEffect(function () {
|
|
115
|
-
if (props.value !== stateValue) {
|
|
116
|
-
setStateValue(props.value);
|
|
117
|
-
instance === null || instance === void 0 ? void 0 : instance.loadImage(props.value);
|
|
118
|
-
}
|
|
119
|
-
}, [props.value]);
|
|
120
|
-
var reset = function () {
|
|
121
|
-
instance === null || instance === void 0 ? void 0 : instance.clear();
|
|
122
|
-
onValueChange();
|
|
123
|
-
};
|
|
124
|
-
var setOpen = React.useCallback(function (nextOpen) {
|
|
125
|
-
if (!isOpenControlled) {
|
|
126
|
-
setStateOpen(nextOpen);
|
|
127
|
-
}
|
|
128
|
-
}, [isOpenControlled]);
|
|
129
|
-
var onDialogClose = function (event) {
|
|
130
|
-
onMinimizeClick(event);
|
|
131
|
-
focusElement();
|
|
132
|
-
};
|
|
133
|
-
var getOptions = function () { return ({
|
|
134
|
-
scale: props.maximized ? props.popupScale : 1,
|
|
135
|
-
color: props.color,
|
|
136
|
-
backgroundColor: props.backgroundColor,
|
|
137
|
-
strokeWidth: props.strokeWidth,
|
|
138
|
-
smooth: props.smooth,
|
|
139
|
-
readonly: props.readOnly
|
|
140
|
-
}); };
|
|
141
|
-
var exportImage = function (exportSize) { return __awaiter(void 0, void 0, void 0, function () {
|
|
142
|
-
var width, height;
|
|
143
|
-
return __generator(this, function (_a) {
|
|
144
|
-
switch (_a.label) {
|
|
145
|
-
case 0:
|
|
146
|
-
width = exportSize.width, height = exportSize.height;
|
|
147
|
-
return [4 /*yield*/, (instance === null || instance === void 0 ? void 0 : instance.exportImage({
|
|
148
|
-
width: width * (props.exportScale || DEFAULT_EXPORT_SCALE),
|
|
149
|
-
height: height * (props.exportScale || DEFAULT_EXPORT_SCALE)
|
|
150
|
-
}))];
|
|
151
|
-
case 1: return [2 /*return*/, _a.sent()];
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
}); };
|
|
155
|
-
React.useEffect(function () {
|
|
156
|
-
var canvas = canvasRef.current;
|
|
157
|
-
var pad = new SignaturePad(canvas, getOptions());
|
|
158
|
-
if (value) {
|
|
159
|
-
pad.loadImage(value);
|
|
160
|
-
}
|
|
161
|
-
setInstance(pad);
|
|
162
|
-
return function () { return pad.destroy(); };
|
|
163
|
-
}, []);
|
|
164
|
-
React.useEffect(function () {
|
|
165
|
-
instance === null || instance === void 0 ? void 0 : instance.setOptions({
|
|
166
|
-
onChange: function () { return __awaiter(void 0, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
|
|
167
|
-
switch (_b.label) {
|
|
168
|
-
case 0:
|
|
169
|
-
_a = onValueChange;
|
|
170
|
-
return [4 /*yield*/, exportImage(elementSize())];
|
|
171
|
-
case 1: return [2 /*return*/, _a.apply(void 0, [_b.sent()])];
|
|
172
|
-
}
|
|
173
|
-
}); }); },
|
|
174
|
-
onDraw: function () { return setIsDrawing(true); },
|
|
175
|
-
onDrawEnd: function () { return setIsDrawing(false); }
|
|
176
|
-
});
|
|
177
|
-
}, [instance]);
|
|
178
|
-
React.useLayoutEffect(function () { return instance === null || instance === void 0 ? void 0 : instance.setOptions(getOptions()); }, [props.readOnly, props.color, props.backgroundColor, props.strokeWidth, props.smooth]);
|
|
179
|
-
React.useEffect(function () {
|
|
180
|
-
var _a, _b;
|
|
181
|
-
var overlay = (_b = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.querySelector('.k-overlay');
|
|
182
|
-
if (!overlay) {
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
var onOverlayClick = function () { return setOpen(false); };
|
|
186
|
-
overlay.addEventListener('click', onOverlayClick);
|
|
187
|
-
return function () {
|
|
188
|
-
return overlay.removeEventListener('click', onOverlayClick);
|
|
189
|
-
};
|
|
190
|
-
}, [open]);
|
|
191
|
-
var focusElement = React.useCallback(function () { var _a; return (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
|
|
192
|
-
var valueGetter = React.useCallback(function () { return props.value; }, [props.value]);
|
|
193
|
-
var nameGetter = React.useCallback(function () { return props.name; }, [props.name]);
|
|
194
|
-
var requiredGetter = React.useCallback(function () { return props.required; }, [props.required]);
|
|
195
|
-
var validityGetter = React.useCallback(function () {
|
|
196
|
-
var customError = props.validationMessage !== undefined;
|
|
197
|
-
var currentValue = valueGetter();
|
|
198
|
-
var valueMissing = !currentValue;
|
|
199
|
-
var valid = props.valid !== undefined ?
|
|
200
|
-
props.valid :
|
|
201
|
-
(!requiredGetter() || !valueMissing);
|
|
202
|
-
return {
|
|
203
|
-
customError: customError,
|
|
204
|
-
valid: valid,
|
|
205
|
-
valueMissing: valueMissing
|
|
206
|
-
};
|
|
207
|
-
}, [props.validationMessage, props.valid, valueGetter, requiredGetter]);
|
|
208
|
-
var validityStylesGetter = React.useCallback(function () {
|
|
209
|
-
return props.validityStyles;
|
|
210
|
-
}, [props.validityStyles]);
|
|
211
|
-
var propsGetter = React.useCallback(function () {
|
|
212
|
-
return props;
|
|
213
|
-
}, [props]);
|
|
214
|
-
var getImperativeHandle = React.useCallback(function () {
|
|
215
|
-
var options = {
|
|
216
|
-
element: elementRef.current,
|
|
217
|
-
focus: focusElement
|
|
218
|
-
};
|
|
219
|
-
Object.defineProperty(options, 'name', { get: nameGetter });
|
|
220
|
-
Object.defineProperty(options, 'value', { get: valueGetter });
|
|
221
|
-
Object.defineProperty(options, 'validity', { get: validityGetter });
|
|
222
|
-
Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
|
|
223
|
-
Object.defineProperty(options, 'required', { get: requiredGetter });
|
|
224
|
-
Object.defineProperty(options, 'props', { get: propsGetter });
|
|
225
|
-
return options;
|
|
226
|
-
}, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]);
|
|
227
|
-
React.useImperativeHandle(target, getImperativeHandle);
|
|
228
|
-
var onFocus = React.useCallback(function (event) {
|
|
229
|
-
if (focused || props.maximized) {
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
setFocused(true);
|
|
233
|
-
dispatchEvent(props.onFocus, event, getImperativeHandle(), {});
|
|
234
|
-
}, [focused, props.onFocus, getImperativeHandle]);
|
|
235
|
-
var onBlur = React.useCallback(function (event) {
|
|
236
|
-
var insideWrapper = hasParent(event.relatedTarget, elementRef.current);
|
|
237
|
-
if (insideWrapper) {
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
|
-
setFocused(false);
|
|
241
|
-
dispatchEvent(props.onBlur, event, getImperativeHandle(), {});
|
|
242
|
-
}, [focused, props.onBlur, getImperativeHandle]);
|
|
243
|
-
var onMaximizeClick = React.useCallback(function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
244
|
-
var _a;
|
|
245
|
-
return __generator(this, function (_b) {
|
|
246
|
-
switch (_b.label) {
|
|
247
|
-
case 0:
|
|
248
|
-
_a = setPopupValue;
|
|
249
|
-
return [4 /*yield*/, exportImage(popupSize())];
|
|
250
|
-
case 1:
|
|
251
|
-
_a.apply(void 0, [_b.sent()]);
|
|
252
|
-
setOpen(true);
|
|
253
|
-
dispatchEvent(props.onOpen, event, getImperativeHandle(), {});
|
|
254
|
-
return [2 /*return*/];
|
|
255
|
-
}
|
|
256
|
-
});
|
|
257
|
-
}); }, [open, isOpenControlled, props.onOpen, props.value, stateValue, getImperativeHandle]);
|
|
258
|
-
var onMinimizeClick = React.useCallback(function (event) {
|
|
259
|
-
setOpen(false);
|
|
260
|
-
dispatchEvent(props.onClose, event, getImperativeHandle(), {});
|
|
261
|
-
}, [open, isOpenControlled, props.onClose, getImperativeHandle]);
|
|
262
|
-
var onClear = function () {
|
|
263
|
-
reset();
|
|
264
|
-
focusElement();
|
|
265
|
-
};
|
|
266
|
-
var elementSize = function () {
|
|
267
|
-
var _a, _b;
|
|
268
|
-
var width = props.width || ((_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || DEFAULT_WIDTH;
|
|
269
|
-
var height = props.height || ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || DEFAULT_HEIGHT;
|
|
270
|
-
return {
|
|
271
|
-
width: width,
|
|
272
|
-
height: height
|
|
273
|
-
};
|
|
274
|
-
};
|
|
275
|
-
var popupSize = function () {
|
|
276
|
-
var _a = elementSize(), width = _a.width, height = _a.height;
|
|
277
|
-
var popupScale = props.popupScale || DEFAULT_POPUP_SCALE;
|
|
278
|
-
return {
|
|
279
|
-
width: width * popupScale,
|
|
280
|
-
height: height * popupScale
|
|
281
|
-
};
|
|
282
|
-
};
|
|
283
|
-
var isValid = !validityStylesGetter() || validityGetter().valid;
|
|
284
|
-
return (React.createElement("div", { ref: elementRef, dir: props.dir, style: __assign({ width: props.width, height: props.height }, props.style), className: classNames('k-input', 'k-signature', (_a = {
|
|
285
|
-
'k-signature-maximized': props.maximized
|
|
286
|
-
},
|
|
287
|
-
_a["k-signature-".concat(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
|
|
288
|
-
_a["k-signature-".concat(props.fillMode)] = props.fillMode,
|
|
289
|
-
_a["k-rounded-".concat(kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
|
|
290
|
-
_a['k-invalid'] = !isValid,
|
|
291
|
-
_a['k-required'] = props.required,
|
|
292
|
-
_a['k-disabled'] = props.disabled,
|
|
293
|
-
_a['k-focus'] = focused,
|
|
294
|
-
_a), props.className), onFocus: onFocus, onBlur: onBlur },
|
|
295
|
-
React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
|
|
296
|
-
showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
|
|
297
|
-
showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize', icon: 'window-minimize', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
|
|
298
|
-
React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
|
|
299
|
-
!props.hideLine && (React.createElement("div", { className: 'k-signature-line', style: { zIndex: 2, pointerEvents: 'none' } })),
|
|
300
|
-
React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'close', shape: null, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
|
|
301
|
-
open && (React.createElement(Dialog, { ref: dialogRef },
|
|
302
|
-
React.createElement(Signature, __assign({}, props, popupSize(), { value: popupValue, maximized: true, open: false, onChange: onDialogChange, onClose: onDialogClose }))))));
|
|
303
|
-
});
|
|
304
|
-
Signature.propTypes = {
|
|
305
|
-
value: PropTypes.string,
|
|
306
|
-
width: PropTypes.number,
|
|
307
|
-
height: PropTypes.number,
|
|
308
|
-
tabIndex: PropTypes.number,
|
|
309
|
-
dir: PropTypes.string,
|
|
310
|
-
ariaDescribedBy: PropTypes.string,
|
|
311
|
-
ariaLabelledBy: PropTypes.string,
|
|
312
|
-
ariaLabel: PropTypes.string,
|
|
313
|
-
readOnly: PropTypes.bool,
|
|
314
|
-
disabled: PropTypes.bool,
|
|
315
|
-
validationMessage: PropTypes.string,
|
|
316
|
-
required: PropTypes.bool,
|
|
317
|
-
onChange: PropTypes.func,
|
|
318
|
-
onFocus: PropTypes.func,
|
|
319
|
-
onBlur: PropTypes.func,
|
|
320
|
-
onOpen: PropTypes.func,
|
|
321
|
-
onClose: PropTypes.func,
|
|
322
|
-
size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
|
|
323
|
-
rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
|
|
324
|
-
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
|
|
325
|
-
};
|
|
326
|
-
Signature.displayName = 'KendoSignature';
|
|
327
|
-
Signature.defaultProps = {
|
|
328
|
-
color: '#000000',
|
|
329
|
-
backgroundColor: '#ffffff',
|
|
330
|
-
strokeWidth: 1,
|
|
331
|
-
smooth: false,
|
|
332
|
-
popupScale: DEFAULT_POPUP_SCALE,
|
|
333
|
-
exportScale: DEFAULT_EXPORT_SCALE,
|
|
334
|
-
maximizable: true,
|
|
335
|
-
disabled: false,
|
|
336
|
-
required: false,
|
|
337
|
-
validityStyles: true,
|
|
338
|
-
onChange: function (_) { return noop; },
|
|
339
|
-
onFocus: function (_) { return noop; },
|
|
340
|
-
onBlur: function (_) { return noop; },
|
|
341
|
-
onOpen: function (_) { return noop; },
|
|
342
|
-
onClose: function (_) { return noop; },
|
|
343
|
-
size: 'medium',
|
|
344
|
-
rounded: 'medium',
|
|
345
|
-
fillMode: 'solid'
|
|
346
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { BaseEvent } from '@progress/kendo-react-common';
|
|
2
|
-
import { SignatureHandle } from './SignatureHandle';
|
|
3
|
-
/**
|
|
4
|
-
* The arguments for the `change` event of the Signature.
|
|
5
|
-
*/
|
|
6
|
-
export interface SignatureChangeEvent extends BaseEvent<SignatureHandle> {
|
|
7
|
-
/**
|
|
8
|
-
* The current value of the Signature.
|
|
9
|
-
*/
|
|
10
|
-
value: string;
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { SignatureProps } from './SignatureProps';
|
|
2
|
-
/**
|
|
3
|
-
* The Signature ref.
|
|
4
|
-
*/
|
|
5
|
-
export interface SignatureHandle {
|
|
6
|
-
/**
|
|
7
|
-
* The Signature element.
|
|
8
|
-
*/
|
|
9
|
-
element: HTMLInputElement | null;
|
|
10
|
-
/**
|
|
11
|
-
* Focus the Signature.
|
|
12
|
-
*/
|
|
13
|
-
focus: () => void;
|
|
14
|
-
/**
|
|
15
|
-
* Gets the `name` property of the Signature.
|
|
16
|
-
*/
|
|
17
|
-
name: string | undefined;
|
|
18
|
-
/**
|
|
19
|
-
* Gets the value of the Signature.
|
|
20
|
-
*/
|
|
21
|
-
value: number | null;
|
|
22
|
-
/**
|
|
23
|
-
* @hidden
|
|
24
|
-
*/
|
|
25
|
-
props: SignatureProps;
|
|
26
|
-
/**
|
|
27
|
-
* @hidden
|
|
28
|
-
*/
|
|
29
|
-
validityStyles: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* @hidden
|
|
32
|
-
*/
|
|
33
|
-
required: boolean;
|
|
34
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|