@hipay/hipay-material-ui 3.13.2 → 3.13.4

Sign up to get free protection for your applications and to get access to all the features.
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"