@elliemae/ds-mobile 2.4.4 → 2.4.7

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/cjs/InfiniteLoader/Infiniteloader.js +14 -3
  2. package/cjs/InfiniteLoader/styled.js +1 -1
  3. package/esm/InfiniteLoader/Infiniteloader.js +14 -4
  4. package/esm/InfiniteLoader/styled.js +1 -1
  5. package/package.json +14 -14
  6. package/types/InfiniteLoader/Infiniteloader.d.ts +1 -1
package/cjs/InfiniteLoader/Infiniteloader.js CHANGED
@@ -12,14 +12,16 @@ var jsxRuntime = require('react/jsx-runtime');
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
14
14
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
16
 
16
17
  const InfiniteLoader = _ref => {
17
18
  let {
18
19
  isFetching,
19
20
  fetchData,
20
21
  children,
21
- height = window.innerHeight
22
+ height
22
23
  } = _ref;
24
+ const [wh, setHeight] = React__default["default"].useState(height);
23
25
 
24
26
  const callback = entries => {
25
27
  const {
@@ -57,16 +59,25 @@ const InfiniteLoader = _ref => {
57
59
  observer.current?.disconnect();
58
60
  };
59
61
  }, [target, observer, fetchData]);
62
+ const handleResize = React__default["default"].useCallback(() => {
63
+ setHeight(window.innerHeight);
64
+ }, []);
65
+ React.useEffect(() => {
66
+ if (!height) window.addEventListener('resize', handleResize);
67
+ return () => {
68
+ if (!height) window.removeEventListener('resize', handleResize);
69
+ };
70
+ }, [handleResize, height]);
60
71
  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
61
72
  style: {
62
73
  position: 'relative',
63
- height,
74
+ height: wh,
64
75
  overflow: 'hidden'
65
76
  }
66
77
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
67
78
  style: {
68
79
  overflow: isFetching ? 'hidden' : 'auto',
69
- height
80
+ height: wh
70
81
  }
71
82
  }, void 0, children, /*#__PURE__*/jsxRuntime.jsx("div", {
72
83
  ref: target,
package/cjs/InfiniteLoader/styled.js CHANGED
@@ -10,6 +10,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
10
 
11
11
  const LoaderBox = /*#__PURE__*/styled__default["default"].div.withConfig({
12
12
  componentId: "sc-ejumr4-0"
13
- })(["position:absolute;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
13
+ })(["position:fixed;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
14
14
 
15
15
  exports.LoaderBox = LoaderBox;
package/esm/InfiniteLoader/Infiniteloader.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useRef, useEffect } from 'react';
2
+ import React, { useRef, useEffect } from 'react';
3
3
  import { PropTypes, describe } from 'react-desc';
4
4
  import { Grid } from '@elliemae/ds-grid';
5
5
  import { Loader } from './Loader.js';
@@ -10,8 +10,9 @@ const InfiniteLoader = _ref => {
10
10
  isFetching,
11
11
  fetchData,
12
12
  children,
13
- height = window.innerHeight
13
+ height
14
14
  } = _ref;
15
+ const [wh, setHeight] = React.useState(height);
15
16
 
16
17
  const callback = entries => {
17
18
  const {
@@ -49,16 +50,25 @@ const InfiniteLoader = _ref => {
49
50
  observer.current?.disconnect();
50
51
  };
51
52
  }, [target, observer, fetchData]);
53
+ const handleResize = React.useCallback(() => {
54
+ setHeight(window.innerHeight);
55
+ }, []);
56
+ useEffect(() => {
57
+ if (!height) window.addEventListener('resize', handleResize);
58
+ return () => {
59
+ if (!height) window.removeEventListener('resize', handleResize);
60
+ };
61
+ }, [handleResize, height]);
52
62
  return /*#__PURE__*/_jsx(Grid, {
53
63
  style: {
54
64
  position: 'relative',
55
- height,
65
+ height: wh,
56
66
  overflow: 'hidden'
57
67
  }
58
68
  }, void 0, /*#__PURE__*/_jsx(Grid, {
59
69
  style: {
60
70
  overflow: isFetching ? 'hidden' : 'auto',
61
- height
71
+ height: wh
62
72
  }
63
73
  }, void 0, children, /*#__PURE__*/jsx("div", {
64
74
  ref: target,
package/esm/InfiniteLoader/styled.js CHANGED
@@ -2,6 +2,6 @@ import styled from 'styled-components';
2
2
 
3
3
  const LoaderBox = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "sc-ejumr4-0"
5
- })(["position:absolute;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
5
+ })(["position:fixed;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
6
6
 
7
7
  export { LoaderBox };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "2.4.4",
3
+ "version": "2.4.7",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "module": "./esm/index.js",
@@ -433,19 +433,19 @@
433
433
  "generateSubmodules": true
434
434
  },
435
435
  "dependencies": {
436
- "@elliemae/ds-accordion": "2.4.4",
437
- "@elliemae/ds-backdrop": "2.4.4",
438
- "@elliemae/ds-button": "2.4.4",
439
- "@elliemae/ds-circular-progress-indicator": "2.4.4",
440
- "@elliemae/ds-form": "2.4.4",
441
- "@elliemae/ds-grid": "2.4.4",
442
- "@elliemae/ds-icon": "2.4.4",
443
- "@elliemae/ds-icons": "2.4.4",
444
- "@elliemae/ds-indeterminate-progress-indicator": "2.4.4",
445
- "@elliemae/ds-shared": "2.4.4",
446
- "@elliemae/ds-system": "2.4.4",
447
- "@elliemae/ds-tabs": "2.4.4",
448
- "@elliemae/ds-truncated-expandable-text": "2.4.4",
436
+ "@elliemae/ds-accordion": "2.4.7",
437
+ "@elliemae/ds-backdrop": "2.4.7",
438
+ "@elliemae/ds-button": "2.4.7",
439
+ "@elliemae/ds-circular-progress-indicator": "2.4.7",
440
+ "@elliemae/ds-form": "2.4.7",
441
+ "@elliemae/ds-grid": "2.4.7",
442
+ "@elliemae/ds-icon": "2.4.7",
443
+ "@elliemae/ds-icons": "2.4.7",
444
+ "@elliemae/ds-indeterminate-progress-indicator": "2.4.7",
445
+ "@elliemae/ds-shared": "2.4.7",
446
+ "@elliemae/ds-system": "2.4.7",
447
+ "@elliemae/ds-tabs": "2.4.7",
448
+ "@elliemae/ds-truncated-expandable-text": "2.4.7",
449
449
  "@xstyled/styled-components": "~3.1.1",
450
450
  "polished": "~3.6.7",
451
451
  "prop-types": "~15.7.2",
package/types/InfiniteLoader/Infiniteloader.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const InfiniteLoader: {
5
5
  isFetching: any;
6
6
  fetchData: any;
7
7
  children: any;
8
- height?: number | undefined;
8
+ height: any;
9
9
  }): JSX.Element;
10
10
  propTypes: {
11
11
  /** toggle loading state */