@progress/kendo-react-inputs 5.6.0-dev.202208291418 → 5.6.0-dev.202209021051
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/LICENSE.md +2 -2
- package/README.md +4 -4
- package/about.md +1 -1
- 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/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 -0
- package/dist/es/main.js +6 -0
- 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/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 -0
- package/dist/npm/main.js +13 -1
- 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 +18 -17
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.InputPrefix = void 0;
|
|
15
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
16
|
+
var React = require("react");
|
|
17
|
+
/**
|
|
18
|
+
* Represents the KendoReact InputPrefix component.
|
|
19
|
+
*/
|
|
20
|
+
exports.InputPrefix = React.forwardRef(function (props, ref) {
|
|
21
|
+
var target = React.useRef(null);
|
|
22
|
+
var element = React.useRef(null);
|
|
23
|
+
React.useImperativeHandle(target, function () { return ({ element: element.current }); });
|
|
24
|
+
React.useImperativeHandle(ref, function () { return target.current; });
|
|
25
|
+
return (React.createElement("span", __assign({}, props, { className: (0, kendo_react_common_1.classNames)('k-input-prefix', props.className) })));
|
|
26
|
+
});
|
|
27
|
+
exports.InputPrefix.displayName = 'KendoReactInputPrefix';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Represent the `ref` of the `InputSeparator` component.
|
|
4
|
+
*/
|
|
5
|
+
export declare type InputSeparatorHandle = {
|
|
6
|
+
element: HTMLSpanElement | null;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Represents the `props` of the `InputSeparator` component.
|
|
10
|
+
*/
|
|
11
|
+
export declare type InputSeparatorProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
12
|
+
/**
|
|
13
|
+
* Represents the KendoReact InputSeparator component.
|
|
14
|
+
*/
|
|
15
|
+
export declare const InputSeparator: React.ForwardRefExoticComponent<InputSeparatorProps & React.RefAttributes<InputSeparatorHandle>>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.InputSeparator = void 0;
|
|
15
|
+
var React = require("react");
|
|
16
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
17
|
+
/**
|
|
18
|
+
* Represents the KendoReact InputSeparator component.
|
|
19
|
+
*/
|
|
20
|
+
exports.InputSeparator = React.forwardRef(function (props, ref) {
|
|
21
|
+
var target = React.useRef(null);
|
|
22
|
+
var element = React.useRef(null);
|
|
23
|
+
React.useImperativeHandle(target, function () { return ({ element: element.current }); });
|
|
24
|
+
React.useImperativeHandle(ref, function () { return target.current; });
|
|
25
|
+
return (React.createElement("span", __assign({}, props, { className: (0, kendo_react_common_1.classNames)('k-input-separator', props.className) })));
|
|
26
|
+
});
|
|
27
|
+
exports.InputSeparator.displayName = 'KendoReactInputSeparator';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Represent the `ref` of the `InputSuffix` component.
|
|
4
|
+
*/
|
|
5
|
+
export declare type InputSuffixHandle = {
|
|
6
|
+
element: HTMLSpanElement | null;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Represents the `props` of the `InputSuffix` component.
|
|
10
|
+
*/
|
|
11
|
+
export declare type InputSuffixProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
12
|
+
/**
|
|
13
|
+
* Represents the KendoReact InputSuffix component.
|
|
14
|
+
*/
|
|
15
|
+
export declare const InputSuffix: React.ForwardRefExoticComponent<InputSuffixProps & React.RefAttributes<InputSuffixHandle>>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.InputSuffix = void 0;
|
|
15
|
+
var React = require("react");
|
|
16
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
17
|
+
/**
|
|
18
|
+
* Represents the KendoReact InputSuffix component.
|
|
19
|
+
*/
|
|
20
|
+
exports.InputSuffix = React.forwardRef(function (props, ref) {
|
|
21
|
+
var target = React.useRef(null);
|
|
22
|
+
var element = React.useRef(null);
|
|
23
|
+
React.useImperativeHandle(target, function () { return ({ element: element.current }); });
|
|
24
|
+
React.useImperativeHandle(ref, function () { return target.current; });
|
|
25
|
+
return (React.createElement("span", __assign({}, props, { className: (0, kendo_react_common_1.classNames)('k-input-suffix', props.className) })));
|
|
26
|
+
});
|
|
27
|
+
exports.InputSuffix.displayName = 'KendoReactInputSuffix';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconHandle, IconProps } from '@progress/kendo-react-common';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Represent the `ref` of the `InputValidationIcon` component.
|
|
5
|
+
*/
|
|
6
|
+
export declare type InputValidationIconHandle = IconHandle;
|
|
7
|
+
/**
|
|
8
|
+
* Represents the `props` of the `InputValidationIcon` component.
|
|
9
|
+
*/
|
|
10
|
+
export declare type InputValidationIconProps = IconProps;
|
|
11
|
+
/**
|
|
12
|
+
* Represents the KendoReact InputValidationIcon component.
|
|
13
|
+
*/
|
|
14
|
+
export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconHandle>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.InputValidationIcon = void 0;
|
|
15
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
16
|
+
var React = require("react");
|
|
17
|
+
/**
|
|
18
|
+
* Represents the KendoReact InputValidationIcon component.
|
|
19
|
+
*/
|
|
20
|
+
exports.InputValidationIcon = React.forwardRef(function (props, ref) {
|
|
21
|
+
return React.createElement(kendo_react_common_1.Icon, __assign({ ref: ref }, props, { className: (0, kendo_react_common_1.classNames)('k-input-validation-icon', props.className) }));
|
|
22
|
+
});
|
|
23
|
+
exports.InputValidationIcon.displayName = 'KendoReactInputValidationIcon';
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -52,3 +52,9 @@ export * from './rating/RatingItem';
|
|
|
52
52
|
export * from './rating/models/index';
|
|
53
53
|
export * from './signature/Signature';
|
|
54
54
|
export * from './signature/interfaces';
|
|
55
|
+
export { TextBox, TextBoxProps, TextBoxHandle, TextBoxChangeEvent } from './textbox/Textbox';
|
|
56
|
+
export { InputClearValue, InputClearValueProps, InputClearValueHandle } from './input/InputClearValue';
|
|
57
|
+
export { InputPrefix, InputPrefixProps, InputPrefixHandle } from './input/InputPrefix';
|
|
58
|
+
export { InputSeparator, InputSeparatorProps, InputSeparatorHandle } from './input/InputSeparator';
|
|
59
|
+
export { InputSuffix, InputSuffixProps, InputSuffixHandle } from './input/InputSuffix';
|
|
60
|
+
export { InputValidationIcon, InputValidationIconProps, InputValidationIconHandle } from './input/InputValidationIcon';
|
package/dist/npm/main.js
CHANGED
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.SwitchPropsContext = exports.Switch = exports.SliderPropsContext = exports.Slider = exports.MaskedTextBoxPropsContext = exports.MaskedTextBox = exports.InputPropsContext = exports.Input = exports.ColorPalettePropsContext = exports.ColorPalette = exports.ColorGradientPropsContext = exports.ColorGradient = void 0;
|
|
17
|
+
exports.InputValidationIcon = exports.InputSuffix = exports.InputSeparator = exports.InputPrefix = exports.InputClearValue = exports.TextBox = exports.SwitchPropsContext = exports.Switch = exports.SliderPropsContext = exports.Slider = exports.MaskedTextBoxPropsContext = exports.MaskedTextBox = exports.InputPropsContext = exports.Input = exports.ColorPalettePropsContext = exports.ColorPalette = exports.ColorGradientPropsContext = exports.ColorGradient = void 0;
|
|
18
18
|
var ColorGradient_1 = require("./colors/ColorGradient");
|
|
19
19
|
Object.defineProperty(exports, "ColorGradient", { enumerable: true, get: function () { return ColorGradient_1.ColorGradient; } });
|
|
20
20
|
Object.defineProperty(exports, "ColorGradientPropsContext", { enumerable: true, get: function () { return ColorGradient_1.ColorGradientPropsContext; } });
|
|
@@ -77,3 +77,15 @@ __exportStar(require("./rating/RatingItem"), exports);
|
|
|
77
77
|
__exportStar(require("./rating/models/index"), exports);
|
|
78
78
|
__exportStar(require("./signature/Signature"), exports);
|
|
79
79
|
__exportStar(require("./signature/interfaces"), exports);
|
|
80
|
+
var Textbox_1 = require("./textbox/Textbox");
|
|
81
|
+
Object.defineProperty(exports, "TextBox", { enumerable: true, get: function () { return Textbox_1.TextBox; } });
|
|
82
|
+
var InputClearValue_1 = require("./input/InputClearValue");
|
|
83
|
+
Object.defineProperty(exports, "InputClearValue", { enumerable: true, get: function () { return InputClearValue_1.InputClearValue; } });
|
|
84
|
+
var InputPrefix_1 = require("./input/InputPrefix");
|
|
85
|
+
Object.defineProperty(exports, "InputPrefix", { enumerable: true, get: function () { return InputPrefix_1.InputPrefix; } });
|
|
86
|
+
var InputSeparator_1 = require("./input/InputSeparator");
|
|
87
|
+
Object.defineProperty(exports, "InputSeparator", { enumerable: true, get: function () { return InputSeparator_1.InputSeparator; } });
|
|
88
|
+
var InputSuffix_1 = require("./input/InputSuffix");
|
|
89
|
+
Object.defineProperty(exports, "InputSuffix", { enumerable: true, get: function () { return InputSuffix_1.InputSuffix; } });
|
|
90
|
+
var InputValidationIcon_1 = require("./input/InputValidationIcon");
|
|
91
|
+
Object.defineProperty(exports, "InputValidationIcon", { enumerable: true, get: function () { return InputValidationIcon_1.InputValidationIcon; } });
|
|
@@ -275,8 +275,8 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
|
|
|
275
275
|
props.children,
|
|
276
276
|
props.spinners &&
|
|
277
277
|
(React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
|
|
278
|
-
React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: '
|
|
279
|
-
React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: '
|
|
278
|
+
React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), onClick: onIncrease }),
|
|
279
|
+
React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), onClick: onDecrease })))));
|
|
280
280
|
return props.label
|
|
281
281
|
? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))
|
|
282
282
|
: numerictextbox;
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-react-inputs',
|
|
9
9
|
productName: 'KendoReact',
|
|
10
10
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1662114830,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
14
14
|
};
|
|
@@ -59,13 +59,9 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
59
59
|
return props.children;
|
|
60
60
|
}
|
|
61
61
|
return (React.createElement(React.Fragment, null,
|
|
62
|
-
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-decrease
|
|
63
|
-
// rounded={'full'}
|
|
64
|
-
icon: _this.props.vertical ? 'arrow-s' : 'arrow-w', title: props.decrementTitle, onClick: props.decrement }),
|
|
62
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', title: props.decrementTitle, onClick: props.decrement }),
|
|
65
63
|
props.children,
|
|
66
|
-
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-increase
|
|
67
|
-
// rounded={'full'}
|
|
68
|
-
icon: _this.props.vertical ? 'arrow-n' : 'arrow-e', title: props.incrementTitle, onClick: props.increment })));
|
|
64
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', title: props.incrementTitle, onClick: props.increment })));
|
|
69
65
|
};
|
|
70
66
|
/**
|
|
71
67
|
* @hidden
|
|
@@ -29,7 +29,6 @@ var SliderLabel = function (props) {
|
|
|
29
29
|
? { bottom: "".concat(props.position, "%") }
|
|
30
30
|
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a);
|
|
31
31
|
var tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
|
|
32
|
-
return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
|
|
33
|
-
React.createElement("span", __assign({}, (_b = {}, _b[exports.SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
|
|
32
|
+
return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) }, props.children && React.createElement("span", __assign({}, (_b = {}, _b[exports.SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
|
|
34
33
|
};
|
|
35
34
|
exports.SliderLabel = SliderLabel;
|
|
@@ -267,11 +267,11 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
|
|
|
267
267
|
}, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
|
|
268
268
|
this.dummyInput(this.value),
|
|
269
269
|
React.createElement("span", { className: 'k-switch-label-on' }, onLabel),
|
|
270
|
-
React.createElement("span", { className: 'k-switch-label-off' }, offLabel),
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
270
|
+
React.createElement("span", { className: 'k-switch-label-off' }, offLabel)),
|
|
271
|
+
React.createElement("span", { className: 'k-switch-thumb-wrap' },
|
|
272
|
+
React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-switch-thumb', (_c = {},
|
|
273
|
+
_c["k-rounded-".concat(thumbRounded)] = thumbRounded,
|
|
274
|
+
_c)) }))));
|
|
275
275
|
};
|
|
276
276
|
SwitchWithoutContext.displayName = 'Switch';
|
|
277
277
|
/**
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { BaseEvent, CustomComponent } from '@progress/kendo-react-common';
|
|
3
|
+
export interface TextBoxChangeEvent extends BaseEvent<TextBoxHandle> {
|
|
4
|
+
syntheticEvent: React.ChangeEvent<HTMLInputElement>;
|
|
5
|
+
value: React.InputHTMLAttributes<HTMLInputElement>['value'];
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Represents the properties of the KendoReact [TextBox]({% slug api_inputs_textbox %}) component
|
|
9
|
+
*/
|
|
10
|
+
export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'onChange'> {
|
|
11
|
+
/**
|
|
12
|
+
* Configures the `size` of the TextBox.
|
|
13
|
+
*
|
|
14
|
+
* The available options are:
|
|
15
|
+
* - small
|
|
16
|
+
* - medium
|
|
17
|
+
* - large
|
|
18
|
+
* - null—Does not set a size `className`.
|
|
19
|
+
*
|
|
20
|
+
* @default `medium`
|
|
21
|
+
*/
|
|
22
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
23
|
+
/**
|
|
24
|
+
* Configures the `roundness` of the TextBox.
|
|
25
|
+
*
|
|
26
|
+
* The available options are:
|
|
27
|
+
* - small
|
|
28
|
+
* - medium
|
|
29
|
+
* - large
|
|
30
|
+
* - full
|
|
31
|
+
* - null—Does not set a rounded `className`.
|
|
32
|
+
*
|
|
33
|
+
* @default `medium`
|
|
34
|
+
*/
|
|
35
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full';
|
|
36
|
+
/**
|
|
37
|
+
* Configures the `fillMode` of the TextBox.
|
|
38
|
+
*
|
|
39
|
+
* The available options are:
|
|
40
|
+
* - solid
|
|
41
|
+
* - outline
|
|
42
|
+
* - flat
|
|
43
|
+
* - null—Does not set a fillMode `className`.
|
|
44
|
+
*
|
|
45
|
+
* @default `solid`
|
|
46
|
+
*/
|
|
47
|
+
fillMode?: null | 'solid' | 'flat' | 'outline';
|
|
48
|
+
/**
|
|
49
|
+
* The `onChange` callback of the `input` element inside the TextBox.
|
|
50
|
+
*/
|
|
51
|
+
onChange?: (event: TextBoxChangeEvent) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Indicates if the component is in `valid` state
|
|
54
|
+
*/
|
|
55
|
+
valid?: boolean;
|
|
56
|
+
prefix?: CustomComponent<any>;
|
|
57
|
+
suffix?: CustomComponent<any>;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Represent the `ref` of the TextBox component.
|
|
61
|
+
*/
|
|
62
|
+
export declare type TextBoxHandle = {
|
|
63
|
+
element: HTMLInputElement | null;
|
|
64
|
+
value: TextBoxProps['value'];
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
|
|
68
|
+
*/
|
|
69
|
+
export declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<TextBoxHandle | null>>;
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
exports.TextBox = void 0;
|
|
26
|
+
var React = require("react");
|
|
27
|
+
var PropTypes = require("prop-types");
|
|
28
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
29
|
+
var package_metadata_1 = require("../package-metadata");
|
|
30
|
+
;
|
|
31
|
+
/**
|
|
32
|
+
* Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
|
|
33
|
+
*/
|
|
34
|
+
exports.TextBox = React.forwardRef(function (props, ref) {
|
|
35
|
+
var _a;
|
|
36
|
+
(0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
37
|
+
var element = React.useRef(null);
|
|
38
|
+
var target = React.useRef(null);
|
|
39
|
+
var valueDuringChangeRef = React.useRef();
|
|
40
|
+
var valueGetter = React.useCallback(function () {
|
|
41
|
+
var _a;
|
|
42
|
+
if (valueDuringChangeRef.current !== undefined) {
|
|
43
|
+
return valueDuringChangeRef.current;
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
return (_a = element.current) === null || _a === void 0 ? void 0 : _a.value;
|
|
47
|
+
}
|
|
48
|
+
}, []);
|
|
49
|
+
React.useImperativeHandle(target, function () {
|
|
50
|
+
var result = {
|
|
51
|
+
element: element.current
|
|
52
|
+
};
|
|
53
|
+
Object.defineProperty(result, 'value', { get: valueGetter });
|
|
54
|
+
return result;
|
|
55
|
+
});
|
|
56
|
+
React.useImperativeHandle(ref, function () { return target.current; });
|
|
57
|
+
var _b = props, size = _b.size, fillMode = _b.fillMode, rounded = _b.rounded, className = _b.className, dir = _b.dir, style = _b.style, _c = _b.prefix, prefix = _c === void 0 ? defaultProps.prefix : _c, _d = _b.suffix, suffix = _d === void 0 ? defaultProps.suffix : _d, valid = _b.valid,
|
|
58
|
+
// Destruct to avoid warning when used inside a form field
|
|
59
|
+
_modified = _b.modified, _touched = _b.touched, _visited = _b.visited, other = __rest(_b, ["size", "fillMode", "rounded", "className", "dir", "style", "prefix", "suffix", "valid", "modified", "touched", "visited"]);
|
|
60
|
+
var Prefix = (0, kendo_react_common_1.useCustomComponent)(prefix)[0];
|
|
61
|
+
var Suffix = (0, kendo_react_common_1.useCustomComponent)(suffix)[0];
|
|
62
|
+
var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
|
|
63
|
+
var handleFocus = function (_) {
|
|
64
|
+
setFocused(true);
|
|
65
|
+
};
|
|
66
|
+
var handleBlur = function (_) {
|
|
67
|
+
setFocused(false);
|
|
68
|
+
};
|
|
69
|
+
var handleChange = React.useCallback(function (event) {
|
|
70
|
+
valueDuringChangeRef.current = event.target.value;
|
|
71
|
+
if (props.onChange) {
|
|
72
|
+
props.onChange.call(undefined, {
|
|
73
|
+
syntheticEvent: event,
|
|
74
|
+
nativeEvent: event.nativeEvent,
|
|
75
|
+
value: event.target.value,
|
|
76
|
+
target: target.current
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
valueDuringChangeRef.current = undefined;
|
|
80
|
+
}, [props.onChange]);
|
|
81
|
+
var _f = (0, kendo_react_common_1.useAsyncFocusBlur)({
|
|
82
|
+
onFocus: handleFocus,
|
|
83
|
+
onBlur: handleBlur,
|
|
84
|
+
onSyncFocus: props.onFocus,
|
|
85
|
+
onSyncBlur: props.onBlur
|
|
86
|
+
}), onFocus = _f.onFocus, onBlur = _f.onBlur;
|
|
87
|
+
return (React.createElement("span", { style: style, dir: dir, className: (0, kendo_react_common_1.classNames)('k-input', (_a = {},
|
|
88
|
+
_a["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
|
|
89
|
+
_a["k-input-".concat(fillMode)] = fillMode,
|
|
90
|
+
_a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
|
|
91
|
+
_a), {
|
|
92
|
+
'k-focus': focused,
|
|
93
|
+
'k-required': props.required,
|
|
94
|
+
'k-disabled': props.disabled,
|
|
95
|
+
'k-invalid': props.valid === false
|
|
96
|
+
}, className), onFocus: onFocus, onBlur: onBlur },
|
|
97
|
+
React.createElement(Prefix, null),
|
|
98
|
+
React.createElement("input", __assign({ ref: element, className: "k-input-inner" }, other, { onChange: handleChange })),
|
|
99
|
+
React.createElement(Suffix, null)));
|
|
100
|
+
});
|
|
101
|
+
var defaultProps = {
|
|
102
|
+
prefix: function (_) { return null; },
|
|
103
|
+
suffix: function (_) { return null; },
|
|
104
|
+
size: 'medium',
|
|
105
|
+
rounded: 'medium',
|
|
106
|
+
fillMode: 'solid'
|
|
107
|
+
};
|
|
108
|
+
exports.TextBox.propTypes = {
|
|
109
|
+
size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
|
|
110
|
+
rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
|
|
111
|
+
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
|
|
112
|
+
};
|
|
113
|
+
exports.TextBox.displayName = 'KendoReactTextBoxComponent';
|
|
114
|
+
exports.TextBox.defaultProps = defaultProps;
|