react-side-sheet-pro 0.1.7 → 0.1.8

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 (5) hide show
  1. package/dist/components/SideSheetProvider.js +33 -22
  2. package/dist/constants/defaultOptions.js +1 -0
  3. package/package.json +1 -1
  4. package/src/components/SideSheetProvider.tsx +55 -41
  5. package/src/constants/defaultOptions.ts +1 -0
package/dist/components/SideSheetProvider.js CHANGED
@@ -39,20 +39,31 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
39
39
  stack = _useReducer2[0],
40
40
  dispatch = _useReducer2[1];
41
41
  var stackRef = (0, _react.useRef)(stack);
42
- var overflowRef = (0, _react.useRef)('');
42
+ var overflowRef = (0, _react.useRef)(null);
43
43
  var idRef = (0, _react.useRef)(0);
44
44
  (0, _react.useEffect)(function () {
45
45
  stackRef.current = stack;
46
+ if (!config.enableOverflow) {
47
+ console.warn([document.body.style.overflow, stack.length, overflowRef.current]);
48
+ if (!stack.length) {
49
+ console.warn(overflowRef.current);
50
+ if (overflowRef.current !== null) {
51
+ document.body.style.overflow = overflowRef.current;
52
+ overflowRef.current = null;
53
+ }
54
+ } else if (stack.length === 1) {
55
+ if (overflowRef.current === null) {
56
+ overflowRef.current = document.body.style.overflow;
57
+ }
58
+ document.body.style.overflow = 'hidden';
59
+ }
60
+ }
46
61
  }, [stack]);
47
62
  var open = (0, _react.useCallback)(function (element) {
48
63
  var _opts$id;
49
64
  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
50
65
  var id = (_opts$id = opts.id) !== null && _opts$id !== void 0 ? _opts$id : ++idRef.current;
51
66
  var options = _objectSpread(_objectSpread({}, _defaultOptions.DEFAULT_SHEET_OPTIONS), opts);
52
- if (!config.enableOverflow && stackRef.current.length === 0) {
53
- overflowRef.current = document.body.style.overflow;
54
- document.body.style.overflow = 'hidden';
55
- }
56
67
  dispatch({
57
68
  type: 'OPEN',
58
69
  payload: {
@@ -135,30 +146,30 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
135
146
  _iterator.f();
136
147
  return _context.finish(22);
137
148
  case 25:
138
- if (!config.enableOverflow && stackRef.current.length <= itemsToClose.length) {
139
- document.body.style.overflow = overflowRef.current;
140
- }
141
149
  duration = (_itemsToClose = itemsToClose[itemsToClose.length - 1]) === null || _itemsToClose === void 0 ? void 0 : _itemsToClose.options.animationDuration;
142
150
  dispatch({
143
151
  type: 'CLOSE',
144
152
  id: id
145
153
  });
146
- setTimeout(function () {
147
- if (id === null) {
148
- itemsToClose.forEach(function (item) {
149
- return dispatch({
154
+ return _context.abrupt("return", new Promise(function (resolve) {
155
+ setTimeout(function () {
156
+ if (id === null) {
157
+ itemsToClose.forEach(function (item) {
158
+ return dispatch({
159
+ type: 'REMOVE',
160
+ id: item.id
161
+ });
162
+ });
163
+ } else {
164
+ dispatch({
150
165
  type: 'REMOVE',
151
- id: item.id
166
+ id: id
152
167
  });
153
- });
154
- } else {
155
- dispatch({
156
- type: 'REMOVE',
157
- id: id
158
- });
159
- }
160
- }, duration);
161
- case 29:
168
+ }
169
+ resolve();
170
+ }, duration);
171
+ }));
172
+ case 28:
162
173
  case "end":
163
174
  return _context.stop();
164
175
  }
package/dist/constants/defaultOptions.js CHANGED
@@ -32,6 +32,7 @@ var DEFAULT_OPTIONS = exports.DEFAULT_OPTIONS = {
32
32
  }()
33
33
  };
34
34
  var DEFAULT_SHEET_OPTIONS = exports.DEFAULT_SHEET_OPTIONS = {
35
+ id: '',
35
36
  width: 400,
36
37
  className: '',
37
38
  confirmBeforeClose: false,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-side-sheet-pro",
3
3
  "description": "A flexible React SideSheet component for displaying contextual information.",
4
- "version": "0.1.7",
4
+ "version": "0.1.8",
5
5
  "license": "MIT",
6
6
  "keywords": [
7
7
  "react",
package/src/components/SideSheetProvider.tsx CHANGED
@@ -31,20 +31,30 @@ export const SideSheetProvider: React.FC<{
31
31
  }> = ({ children, configuration }) => {
32
32
  const [stack, dispatch] = useReducer(SideSheetReducer, []);
33
33
  const stackRef = useRef<SideStackItem[]>(stack);
34
- const overflowRef = useRef('');
34
+ const overflowRef = useRef<string | null>(null);
35
35
  const idRef = useRef(0);
36
36
 
37
37
  useEffect(() => {
38
38
  stackRef.current = stack;
39
+
40
+ if (!config.enableOverflow) {
41
+ if (!stack.length) {
42
+ if (overflowRef.current !== null) {
43
+ document.body.style.overflow = overflowRef.current;
44
+ overflowRef.current = null;
45
+ }
46
+ } else if (stack.length === 1) {
47
+ if (overflowRef.current === null) {
48
+ overflowRef.current = document.body.style.overflow;
49
+ }
50
+ document.body.style.overflow = 'hidden';
51
+ }
52
+ }
39
53
  }, [stack]);
40
54
 
41
55
  const open = useCallback((element: SideElement, opts: SideOptions = {}) => {
42
56
  const id = opts.id ?? ++idRef.current;
43
57
  const options = { ...DEFAULT_SHEET_OPTIONS, ...opts };
44
- if (!config.enableOverflow && stackRef.current.length === 0) {
45
- overflowRef.current = document.body.style.overflow;
46
- document.body.style.overflow = 'hidden';
47
- }
48
58
  dispatch({
49
59
  type: 'OPEN',
50
60
  payload: { id, element, options, state: 'opening' },
@@ -56,46 +66,50 @@ export const SideSheetProvider: React.FC<{
56
66
  return id;
57
67
  }, []);
58
68
 
59
- const close = useCallback(async (id: number | string | null, force = false) => {
60
- const itemsToClose =
61
- id === null
62
- ? [...stackRef.current]
63
- : stackRef.current.filter(i => i.id === id);
69
+ const close = useCallback(
70
+ async (id: number | string | null, force = false) => {
71
+ const itemsToClose =
72
+ id === null
73
+ ? [...stackRef.current]
74
+ : stackRef.current.filter(i => i.id === id);
64
75
 
65
- for (const item of itemsToClose) {
66
- if (! force && item.options.confirmBeforeClose) {
67
- const confirmCallback =
68
- item.options.confirmCallback ?? config.confirmCallback;
69
- const confirmed = await confirmCallback(
70
- item.options.confirmMessage ?? config.confirmMessage
71
- );
72
- if (!confirmed) return;
76
+ for (const item of itemsToClose) {
77
+ if (!force && item.options.confirmBeforeClose) {
78
+ const confirmCallback =
79
+ item.options.confirmCallback ?? config.confirmCallback;
80
+ const confirmed = await confirmCallback(
81
+ item.options.confirmMessage ?? config.confirmMessage
82
+ );
83
+ if (!confirmed) return;
84
+ }
85
+ item.options.onClose?.(item.id);
73
86
  }
74
- item.options.onClose?.(item.id);
75
- }
76
-
77
- if (
78
- !config.enableOverflow &&
79
- stackRef.current.length <= itemsToClose.length
80
- ) {
81
- document.body.style.overflow = overflowRef.current;
82
- }
83
87
 
84
- const duration =
85
- itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
86
- dispatch({ type: 'CLOSE', id });
87
- setTimeout(() => {
88
- if (id === null) {
89
- itemsToClose.forEach(item => dispatch({ type: 'REMOVE', id: item.id }));
90
- } else {
91
- dispatch({ type: 'REMOVE', id: id! });
92
- }
93
- }, duration);
94
- }, []);
88
+ const duration =
89
+ itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
90
+ dispatch({ type: 'CLOSE', id });
91
+ return new Promise<void>(resolve => {
92
+ setTimeout(() => {
93
+ if (id === null) {
94
+ itemsToClose.forEach(item =>
95
+ dispatch({ type: 'REMOVE', id: item.id })
96
+ );
97
+ } else {
98
+ dispatch({ type: 'REMOVE', id: id! });
99
+ }
100
+ resolve();
101
+ }, duration);
102
+ });
103
+ },
104
+ []
105
+ );
95
106
 
96
- const update = useCallback((id: number | string, options: Partial<SideOptions>) => {
97
- dispatch({ type: 'UPDATE', id, options });
98
- }, []);
107
+ const update = useCallback(
108
+ (id: number | string, options: Partial<SideOptions>) => {
109
+ dispatch({ type: 'UPDATE', id, options });
110
+ },
111
+ []
112
+ );
99
113
  const config = { ...DEFAULT_OPTIONS, ...configuration } as Required<
100
114
  SideSheetOptions
101
115
  >;
package/src/constants/defaultOptions.ts CHANGED
@@ -12,6 +12,7 @@ export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
12
12
  };
13
13
 
14
14
  export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
15
+ id: '',
15
16
  width: 400,
16
17
  className: '',
17
18
  confirmBeforeClose: false,