@hipay/hipay-material-ui 3.13.2 → 3.13.4

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 (3) hide show
  1. package/HiScrollStepper/HiScrollStepper.js +23 -3
  2. package/es/HiScrollStepper/HiScrollStepper.js +23 -3
  3. package/package.json +5 -5
package/HiScrollStepper/HiScrollStepper.js CHANGED
@@ -74,7 +74,9 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
74
74
  _ref$customClasses = _ref.customClasses,
75
75
  customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
76
76
  _ref$stepMargin = _ref.stepMargin,
77
- stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
77
+ stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin,
78
+ _ref$minScrollHeightT = _ref.minScrollHeightToEnable,
79
+ minScrollHeightToEnable = _ref$minScrollHeightT === void 0 ? 0 : _ref$minScrollHeightT;
78
80
  var classes = useStyles();
79
81
 
80
82
  var _useMap = (0, _reactUse.useMap)({
@@ -94,6 +96,11 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
94
96
  stepLabelVisible = _useState2[0],
95
97
  setStepLabelVisible = _useState2[1];
96
98
 
99
+ var _useState3 = (0, _react.useState)(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight),
100
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
101
+ stepperEnabled = _useState4[0],
102
+ setStepperEnabled = _useState4[1];
103
+
97
104
  var instantActiveStep = 0;
98
105
  var stepsRef = (0, _react.useMemo)(function () {
99
106
  return Array(steps.length).fill(0).map(function () {
@@ -121,7 +128,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
121
128
 
122
129
  var handleScroll = function handleScroll() {
123
130
  var newActiveStep = 0;
124
- var scrollOffset = window.pageYOffset;
131
+ var scrollOffset = window.pageYOffset + 1;
125
132
 
126
133
  if (scrollOffset < stepMargin) {
127
134
  newActiveStep = 0;
@@ -166,14 +173,26 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
166
173
  setStepLabelVisible(newVisibility);
167
174
  };
168
175
 
176
+ var handleResize = function handleResize() {
177
+ setStepperEnabled(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight);
178
+ };
179
+
169
180
  (0, _reactUse.useMount)(function () {
170
181
  window.addEventListener('scroll', handleScroll);
182
+ window.addEventListener('resize', handleResize);
171
183
  });
172
184
  (0, _react.useEffect)(function () {
173
185
  return function () {
174
186
  window.removeEventListener('scroll', handleScroll);
187
+ window.removeEventListener('resize', handleResize);
175
188
  };
176
189
  }, []);
190
+ (0, _react.useEffect)(function () {
191
+ handleResize();
192
+ }, [document.body.scrollHeight]);
193
+ (0, _react.useEffect)(function () {
194
+ handleScroll();
195
+ }, [stepperEnabled]);
177
196
  return /*#__PURE__*/_react.default.createElement("div", {
178
197
  className: (0, _classnames.default)(classes.root, customClasses.root)
179
198
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -191,7 +210,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
191
210
  },
192
211
  indicator: step.indicator,
193
212
  label: stepLabelVisible ? step.label : null,
194
- status: status[index]
213
+ status: stepperEnabled ? status[index] : null,
214
+ disabled: !stepperEnabled
195
215
  });
196
216
  }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
197
217
  className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),
package/es/HiScrollStepper/HiScrollStepper.js CHANGED
@@ -74,7 +74,9 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
74
74
  _ref$customClasses = _ref.customClasses,
75
75
  customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
76
76
  _ref$stepMargin = _ref.stepMargin,
77
- stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
77
+ stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin,
78
+ _ref$minScrollHeightT = _ref.minScrollHeightToEnable,
79
+ minScrollHeightToEnable = _ref$minScrollHeightT === void 0 ? 0 : _ref$minScrollHeightT;
78
80
  var classes = useStyles();
79
81
 
80
82
  var _useMap = (0, _reactUse.useMap)({
@@ -94,6 +96,11 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
94
96
  stepLabelVisible = _useState2[0],
95
97
  setStepLabelVisible = _useState2[1];
96
98
 
99
+ var _useState3 = (0, _react.useState)(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight),
100
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
101
+ stepperEnabled = _useState4[0],
102
+ setStepperEnabled = _useState4[1];
103
+
97
104
  var instantActiveStep = 0;
98
105
  var stepsRef = (0, _react.useMemo)(function () {
99
106
  return Array(steps.length).fill(0).map(function () {
@@ -121,7 +128,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
121
128
 
122
129
  var handleScroll = function handleScroll() {
123
130
  var newActiveStep = 0;
124
- var scrollOffset = window.pageYOffset;
131
+ var scrollOffset = window.pageYOffset + 1;
125
132
 
126
133
  if (scrollOffset < stepMargin) {
127
134
  newActiveStep = 0;
@@ -166,14 +173,26 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
166
173
  setStepLabelVisible(newVisibility);
167
174
  };
168
175
 
176
+ var handleResize = function handleResize() {
177
+ setStepperEnabled(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight);
178
+ };
179
+
169
180
  (0, _reactUse.useMount)(function () {
170
181
  window.addEventListener('scroll', handleScroll);
182
+ window.addEventListener('resize', handleResize);
171
183
  });
172
184
  (0, _react.useEffect)(function () {
173
185
  return function () {
174
186
  window.removeEventListener('scroll', handleScroll);
187
+ window.removeEventListener('resize', handleResize);
175
188
  };
176
189
  }, []);
190
+ (0, _react.useEffect)(function () {
191
+ handleResize();
192
+ }, [document.body.scrollHeight]);
193
+ (0, _react.useEffect)(function () {
194
+ handleScroll();
195
+ }, [stepperEnabled]);
177
196
  return /*#__PURE__*/_react.default.createElement("div", {
178
197
  className: (0, _classnames.default)(classes.root, customClasses.root)
179
198
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -191,7 +210,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
191
210
  },
192
211
  indicator: step.indicator,
193
212
  label: stepLabelVisible ? step.label : null,
194
- status: status[index]
213
+ status: stepperEnabled ? status[index] : null,
214
+ disabled: !stepperEnabled
195
215
  });
196
216
  }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
197
217
  className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
- "version": "3.13.2",
4
+ "version": "3.13.4",
5
5
  "description": "React components that implement Google's Material Design.",
6
6
  "repository": {
7
7
  "type": "git",
@@ -16,8 +16,8 @@
16
16
  "@hipay/design-system": "^1.0.2",
17
17
  "@mui/material": "5.8.4",
18
18
  "@mui/styles": "5.8.4",
19
- "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.8.0",
20
- "@mui/styled-engine-sc": "5.8.0",
19
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0",
20
+ "@mui/styled-engine-sc": "5.10.0",
21
21
  "mdi-material-ui": "7.1.0",
22
22
  "moment-timezone": "0.5.27",
23
23
  "react": "17.0.2",
@@ -27,7 +27,7 @@
27
27
  "dependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.8.3",
29
29
  "@babel/runtime": "7.6.3",
30
- "@mui/lab": "^5.0.0-alpha.64",
30
+ "@mui/lab": "5.0.0-alpha.89",
31
31
  "@mui/icons-material": "^5.2.5",
32
32
  "brcast": "3.0.1",
33
33
  "classnames": "2.2.6",
@@ -74,7 +74,7 @@
74
74
  "node": ">=6.0.0"
75
75
  },
76
76
  "resolutions": {
77
- "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.8.0"
77
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0"
78
78
  },
79
79
  "main": "./index.js",
80
80
  "module": "./esm/index.js"