@itwin/itwinui-react 1.37.2 → 1.37.3

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/cjs/core/Slider/Thumb.js +15 -1
  3. package/cjs/core/Slider/Track.js +23 -12
  4. package/esm/core/Slider/Thumb.js +15 -1
  5. package/esm/core/Slider/Track.js +23 -12
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ### [1.37.3](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.2...v1.37.3) (2022-05-06)
4
+
5
+ ### Fixes
6
+
7
+ * **Slider:** Skip drawing track if thumb values are out of range ([#652](https://www.github.com/iTwin/iTwinUI-react/issues/652)) ([38d6574](https://www.github.com/iTwin/iTwinUI-react/commit/38d657423d2def7d54b9e195f0c543a35e725d3f))
8
+
3
9
  ### [1.37.2](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.1...v1.37.2) (2022-05-04)
4
10
 
5
11
  ### Fixes
package/cjs/core/Slider/Thumb.js CHANGED
@@ -70,7 +70,21 @@ var Thumb = function (props) {
70
70
  }, [disabled, index, onThumbActivated]);
71
71
  var _a = react_1.default.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
72
72
  var _b = react_1.default.useState(false), isHovered = _b[0], setIsHovered = _b[1];
73
- var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
73
+ var adjustedValue = react_1.default.useMemo(function () {
74
+ if (value < sliderMin) {
75
+ return sliderMin;
76
+ }
77
+ if (value > sliderMax) {
78
+ return sliderMax;
79
+ }
80
+ return value;
81
+ }, [sliderMax, sliderMin, value]);
82
+ var leftPercent = react_1.default.useMemo(function () {
83
+ if (sliderMax === sliderMin) {
84
+ return 0;
85
+ }
86
+ return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
87
+ }, [adjustedValue, sliderMax, sliderMin]);
74
88
  var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
75
89
  return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
76
90
  react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
package/cjs/core/Slider/Track.js CHANGED
@@ -29,10 +29,18 @@ function shouldDisplaySegment(segmentIndex, mode) {
29
29
  }
30
30
  function generateSegments(values, min, max) {
31
31
  var segments = [];
32
+ var newValues = __spreadArray([], values, true);
33
+ newValues.sort(function (a, b) { return a - b; });
34
+ if (0 === newValues.length ||
35
+ newValues[0] < min ||
36
+ newValues[newValues.length - 1] > max ||
37
+ min === max) {
38
+ return [];
39
+ }
32
40
  var lastValue = min;
33
- for (var i = 0; i < values.length; i++) {
34
- segments.push({ left: lastValue, right: values[i] });
35
- lastValue = values[i];
41
+ for (var i = 0; i < newValues.length; i++) {
42
+ segments.push({ left: lastValue, right: newValues[i] });
43
+ lastValue = newValues[i];
36
44
  }
37
45
  segments.push({ left: lastValue, right: max });
38
46
  return segments;
@@ -43,18 +51,21 @@ function generateSegments(values, min, max) {
43
51
  */
44
52
  var Track = function (props) {
45
53
  var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
46
- var _a = react_1.default.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
54
+ var _a = react_1.default.useState(function () {
55
+ return generateSegments(values, sliderMin, sliderMax);
56
+ }), segments = _a[0], setSegments = _a[1];
47
57
  react_1.default.useEffect(function () {
48
- var newValues = __spreadArray([], values, true);
49
- newValues.sort(function (a, b) { return a - b; });
50
- setCurrentValues(newValues);
51
- }, [values]);
52
- var segments = react_1.default.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
58
+ setSegments(generateSegments(values, sliderMin, sliderMax));
59
+ }, [values, sliderMin, sliderMax]);
53
60
  return (react_1.default.createElement(react_1.default.Fragment, null, 'none' !== trackDisplayMode &&
54
61
  segments.map(function (segment, index) {
55
- var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
56
- var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
57
- rightPercent = 100.0 - rightPercent;
62
+ var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
63
+ ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
64
+ : 0;
65
+ var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
66
+ ? 100.0 -
67
+ (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
68
+ : 100;
58
69
  return (react_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
59
70
  })));
60
71
  };
package/esm/core/Slider/Thumb.js CHANGED
@@ -64,7 +64,21 @@ export var Thumb = function (props) {
64
64
  }, [disabled, index, onThumbActivated]);
65
65
  var _a = React.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
66
66
  var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
67
- var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
67
+ var adjustedValue = React.useMemo(function () {
68
+ if (value < sliderMin) {
69
+ return sliderMin;
70
+ }
71
+ if (value > sliderMax) {
72
+ return sliderMax;
73
+ }
74
+ return value;
75
+ }, [sliderMax, sliderMin, value]);
76
+ var leftPercent = React.useMemo(function () {
77
+ if (sliderMax === sliderMin) {
78
+ return 0;
79
+ }
80
+ return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
81
+ }, [adjustedValue, sliderMax, sliderMin]);
68
82
  var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
69
83
  return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
70
84
  React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
package/esm/core/Slider/Track.js CHANGED
@@ -23,10 +23,18 @@ function shouldDisplaySegment(segmentIndex, mode) {
23
23
  }
24
24
  function generateSegments(values, min, max) {
25
25
  var segments = [];
26
+ var newValues = __spreadArray([], values, true);
27
+ newValues.sort(function (a, b) { return a - b; });
28
+ if (0 === newValues.length ||
29
+ newValues[0] < min ||
30
+ newValues[newValues.length - 1] > max ||
31
+ min === max) {
32
+ return [];
33
+ }
26
34
  var lastValue = min;
27
- for (var i = 0; i < values.length; i++) {
28
- segments.push({ left: lastValue, right: values[i] });
29
- lastValue = values[i];
35
+ for (var i = 0; i < newValues.length; i++) {
36
+ segments.push({ left: lastValue, right: newValues[i] });
37
+ lastValue = newValues[i];
30
38
  }
31
39
  segments.push({ left: lastValue, right: max });
32
40
  return segments;
@@ -37,18 +45,21 @@ function generateSegments(values, min, max) {
37
45
  */
38
46
  export var Track = function (props) {
39
47
  var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
40
- var _a = React.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
48
+ var _a = React.useState(function () {
49
+ return generateSegments(values, sliderMin, sliderMax);
50
+ }), segments = _a[0], setSegments = _a[1];
41
51
  React.useEffect(function () {
42
- var newValues = __spreadArray([], values, true);
43
- newValues.sort(function (a, b) { return a - b; });
44
- setCurrentValues(newValues);
45
- }, [values]);
46
- var segments = React.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
52
+ setSegments(generateSegments(values, sliderMin, sliderMax));
53
+ }, [values, sliderMin, sliderMax]);
47
54
  return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
48
55
  segments.map(function (segment, index) {
49
- var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
50
- var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
51
- rightPercent = 100.0 - rightPercent;
56
+ var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
57
+ ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
58
+ : 0;
59
+ var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
60
+ ? 100.0 -
61
+ (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
62
+ : 100;
52
63
  return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
53
64
  })));
54
65
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "1.37.2",
3
+ "version": "1.37.3",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",