@progress/kendo-react-inputs 4.14.0-dev.202201121250 → 4.14.0-dev.202201131239
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/package-metadata.js +1 -1
- package/dist/es/range-slider/RangeSlider.js +29 -32
- package/dist/es/slider/Slider.js +3 -5
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/range-slider/RangeSlider.js +29 -32
- package/dist/npm/slider/Slider.js +3 -5
- package/dist/systemjs/kendo-react-inputs.js +1 -1
- package/package.json +14 -14
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-inputs',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1642076315,
|
|
9
9
|
version: '',
|
|
10
10
|
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'
|
|
11
11
|
};
|
|
@@ -45,7 +45,7 @@ export var RangeSliderPropsContext = createPropsContext();
|
|
|
45
45
|
* Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
|
|
46
46
|
*/
|
|
47
47
|
export var RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
48
|
-
var _a, _b
|
|
48
|
+
var _a, _b;
|
|
49
49
|
validatePackage(packageMetadata);
|
|
50
50
|
var props = usePropsContext(RangeSliderPropsContext, directProps);
|
|
51
51
|
var target = React.useRef(null);
|
|
@@ -77,13 +77,13 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
|
-
var
|
|
81
|
-
var
|
|
80
|
+
var _c = React.useState(''), currentDrag = _c[0], setCurrentDrag = _c[1];
|
|
81
|
+
var _d = useRange(props.defaultValue || defaultProps.defaultValue, {
|
|
82
82
|
min: min,
|
|
83
83
|
max: max,
|
|
84
84
|
step: step,
|
|
85
85
|
state: props.value
|
|
86
|
-
}, handleChange), stateValue =
|
|
86
|
+
}, handleChange), stateValue = _d[0], dispatchStateValue = _d[1];
|
|
87
87
|
var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
|
|
88
88
|
var sliderTrackRef = React.useRef(null);
|
|
89
89
|
var sliderTrackWrapRef = React.useRef(null);
|
|
@@ -219,34 +219,31 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
|
219
219
|
'k-slider-vertical': props.vertical,
|
|
220
220
|
'k-slider-horizontal': !props.vertical
|
|
221
221
|
}, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
|
|
222
|
-
React.createElement("div", { className:
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
:
|
|
247
|
-
React.createElement("a", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
|
|
248
|
-
? { bottom: 'calc(' + percentEnd + '% - 8px)', zIndex: 1 }
|
|
249
|
-
: (_d = {}, _d[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentEnd + '% - 8px)', _d.zIndex = 1, _d), onKeyDown: handleEndKeyDown }))))));
|
|
222
|
+
React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
|
|
223
|
+
props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
|
|
224
|
+
return child && React.cloneElement(child, {
|
|
225
|
+
position: 100 * (child.props.position - props.min) /
|
|
226
|
+
(props.max - props.min),
|
|
227
|
+
vertical: props.vertical
|
|
228
|
+
}, child.props.children);
|
|
229
|
+
}))),
|
|
230
|
+
React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
|
|
231
|
+
? { bottom: 0, height: '100%' }
|
|
232
|
+
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
|
|
233
|
+
(percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
|
|
234
|
+
? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
|
|
235
|
+
: (_b = {},
|
|
236
|
+
_b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
|
|
237
|
+
_b.width = (percentEnd - percentStart) + '%',
|
|
238
|
+
_b) }),
|
|
239
|
+
React.createElement("a", { ref: startHandle, role: "slider", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
|
|
240
|
+
? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
|
|
241
|
+
: dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
|
|
242
|
+
: { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
|
|
243
|
+
React.createElement("a", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
|
|
244
|
+
? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
|
|
245
|
+
: dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
|
|
246
|
+
: { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));
|
|
250
247
|
});
|
|
251
248
|
var propTypes = {
|
|
252
249
|
value: function (props, propName, componentName) {
|
package/dist/es/slider/Slider.js
CHANGED
|
@@ -163,7 +163,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
163
163
|
*/
|
|
164
164
|
SliderWithoutContext.prototype.render = function () {
|
|
165
165
|
var _this = this;
|
|
166
|
-
var _a
|
|
166
|
+
var _a;
|
|
167
167
|
var lS = provideLocalizationService(this);
|
|
168
168
|
var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
|
|
169
169
|
var trackStyles = this.props.vertical
|
|
@@ -196,10 +196,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
196
196
|
: { width: percentValue + '%' } }),
|
|
197
197
|
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
|
|
198
198
|
? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
|
|
199
|
-
: (
|
|
200
|
-
|
|
201
|
-
_b.zIndex = 1,
|
|
202
|
-
_b) })))))));
|
|
199
|
+
: this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
|
|
200
|
+
: { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
|
|
203
201
|
};
|
|
204
202
|
Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
|
|
205
203
|
/**
|
|
@@ -7,7 +7,7 @@ exports.packageMetadata = {
|
|
|
7
7
|
name: '@progress/kendo-react-inputs',
|
|
8
8
|
productName: 'KendoReact',
|
|
9
9
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
10
|
-
publishDate:
|
|
10
|
+
publishDate: 1642076315,
|
|
11
11
|
version: '',
|
|
12
12
|
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'
|
|
13
13
|
};
|
|
@@ -47,7 +47,7 @@ exports.RangeSliderPropsContext = kendo_react_common_1.createPropsContext();
|
|
|
47
47
|
* Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
|
|
48
48
|
*/
|
|
49
49
|
exports.RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
50
|
-
var _a, _b
|
|
50
|
+
var _a, _b;
|
|
51
51
|
kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
|
|
52
52
|
var props = kendo_react_common_1.usePropsContext(exports.RangeSliderPropsContext, directProps);
|
|
53
53
|
var target = React.useRef(null);
|
|
@@ -79,13 +79,13 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
var
|
|
83
|
-
var
|
|
82
|
+
var _c = React.useState(''), currentDrag = _c[0], setCurrentDrag = _c[1];
|
|
83
|
+
var _d = useRange(props.defaultValue || defaultProps.defaultValue, {
|
|
84
84
|
min: min,
|
|
85
85
|
max: max,
|
|
86
86
|
step: step,
|
|
87
87
|
state: props.value
|
|
88
|
-
}, handleChange), stateValue =
|
|
88
|
+
}, handleChange), stateValue = _d[0], dispatchStateValue = _d[1];
|
|
89
89
|
var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
|
|
90
90
|
var sliderTrackRef = React.useRef(null);
|
|
91
91
|
var sliderTrackWrapRef = React.useRef(null);
|
|
@@ -221,34 +221,31 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
|
|
|
221
221
|
'k-slider-vertical': props.vertical,
|
|
222
222
|
'k-slider-horizontal': !props.vertical
|
|
223
223
|
}, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
|
|
224
|
-
React.createElement("div", { className:
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
:
|
|
249
|
-
React.createElement("a", { ref: endHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
|
|
250
|
-
? { bottom: 'calc(' + percentEnd + '% - 8px)', zIndex: 1 }
|
|
251
|
-
: (_d = {}, _d[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentEnd + '% - 8px)', _d.zIndex = 1, _d), onKeyDown: handleEndKeyDown }))))));
|
|
224
|
+
React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
|
|
225
|
+
props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
|
|
226
|
+
return child && React.cloneElement(child, {
|
|
227
|
+
position: 100 * (child.props.position - props.min) /
|
|
228
|
+
(props.max - props.min),
|
|
229
|
+
vertical: props.vertical
|
|
230
|
+
}, child.props.children);
|
|
231
|
+
}))),
|
|
232
|
+
React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
|
|
233
|
+
? { bottom: 0, height: '100%' }
|
|
234
|
+
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
|
|
235
|
+
(percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
|
|
236
|
+
? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
|
|
237
|
+
: (_b = {},
|
|
238
|
+
_b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
|
|
239
|
+
_b.width = (percentEnd - percentStart) + '%',
|
|
240
|
+
_b) }),
|
|
241
|
+
React.createElement("a", { ref: startHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
|
|
242
|
+
? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
|
|
243
|
+
: dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
|
|
244
|
+
: { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
|
|
245
|
+
React.createElement("a", { ref: endHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
|
|
246
|
+
? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
|
|
247
|
+
: dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
|
|
248
|
+
: { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));
|
|
252
249
|
});
|
|
253
250
|
var propTypes = {
|
|
254
251
|
value: function (props, propName, componentName) {
|
|
@@ -165,7 +165,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
165
165
|
*/
|
|
166
166
|
SliderWithoutContext.prototype.render = function () {
|
|
167
167
|
var _this = this;
|
|
168
|
-
var _a
|
|
168
|
+
var _a;
|
|
169
169
|
var lS = kendo_react_intl_1.provideLocalizationService(this);
|
|
170
170
|
var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
|
|
171
171
|
var trackStyles = this.props.vertical
|
|
@@ -198,10 +198,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
198
198
|
: { width: percentValue + '%' } }),
|
|
199
199
|
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: this.props.vertical
|
|
200
200
|
? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
|
|
201
|
-
: (
|
|
202
|
-
|
|
203
|
-
_b.zIndex = 1,
|
|
204
|
-
_b) })))))));
|
|
201
|
+
: this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
|
|
202
|
+
: { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
|
|
205
203
|
};
|
|
206
204
|
Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
|
|
207
205
|
/**
|