@bigbinary/neetoui 8.3.0-beta1 → 8.3.0
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.
- package/README.md +1 -0
- package/dist/ActionDropdown.js +7 -6
- package/dist/ActionDropdown.js.map +1 -1
- package/dist/Alert.js +9 -9
- package/dist/Alert.js.map +1 -1
- package/dist/Avatar.js +1 -0
- package/dist/Avatar.js.map +1 -1
- package/dist/Button.js +5 -49
- package/dist/Button.js.map +1 -1
- package/dist/Checkbox.js +6 -5
- package/dist/Checkbox.js.map +1 -1
- package/dist/ColorPicker.js +147 -51
- package/dist/ColorPicker.js.map +1 -1
- package/dist/DatePicker.js +18 -19
- package/dist/DatePicker.js.map +1 -1
- package/dist/Dropdown.js +4 -3
- package/dist/Dropdown.js.map +1 -1
- package/dist/Input.js +14 -10
- package/dist/Input.js.map +1 -1
- package/dist/Kbd.js +1 -0
- package/dist/Kbd.js.map +1 -1
- package/dist/Label.js +72 -55
- package/dist/Label.js.map +1 -1
- package/dist/Modal.js +21 -8
- package/dist/Modal.js.map +1 -1
- package/dist/MultiEmailInput.js +96 -58
- package/dist/MultiEmailInput.js.map +1 -1
- package/dist/NoData.js +1 -2
- package/dist/NoData.js.map +1 -1
- package/dist/Pagination.js +5 -5
- package/dist/Pane.js +58 -22
- package/dist/Pane.js.map +1 -1
- package/dist/ProgressBar.js +1 -0
- package/dist/ProgressBar.js.map +1 -1
- package/dist/Radio.js +11 -8
- package/dist/Radio.js.map +1 -1
- package/dist/Select.js +52 -22
- package/dist/Select.js.map +1 -1
- package/dist/Sidebar.js +6 -4
- package/dist/Sidebar.js.map +1 -1
- package/dist/Slider.js +6 -5
- package/dist/Slider.js.map +1 -1
- package/dist/Stepper.js +1 -0
- package/dist/Stepper.js.map +1 -1
- package/dist/Switch.js +9 -5
- package/dist/Switch.js.map +1 -1
- package/dist/Table.js +358 -194
- package/dist/Table.js.map +1 -1
- package/dist/{Textarea-e2cdbeb5.js → Textarea-TKn0l0RC.js} +5 -4
- package/dist/Textarea-TKn0l0RC.js.map +1 -0
- package/dist/Textarea.js +7 -6
- package/dist/Textarea.js.map +1 -1
- package/dist/TimePicker.js +16 -17
- package/dist/TimePicker.js.map +1 -1
- package/dist/Toastr.js +45 -23
- package/dist/Toastr.js.map +1 -1
- package/dist/Tooltip.js +17 -11
- package/dist/Tooltip.js.map +1 -1
- package/dist/TranslationProvider.js +45 -13
- package/dist/TranslationProvider.js.map +1 -1
- package/dist/Tree.js +15 -8
- package/dist/Tree.js.map +1 -1
- package/dist/TreeSelect.js +19 -7
- package/dist/TreeSelect.js.map +1 -1
- package/dist/cjs/Accordion.js +18 -27
- package/dist/cjs/Accordion.js.map +1 -1
- package/dist/cjs/ActionDropdown.js +13 -20
- package/dist/cjs/ActionDropdown.js.map +1 -1
- package/dist/cjs/Alert.js +15 -20
- package/dist/cjs/Alert.js.map +1 -1
- package/dist/cjs/Avatar.js +11 -19
- package/dist/cjs/Avatar.js.map +1 -1
- package/dist/cjs/Button.js +17 -70
- package/dist/cjs/Button.js.map +1 -1
- package/dist/cjs/Callout.js +5 -13
- package/dist/cjs/Callout.js.map +1 -1
- package/dist/cjs/Checkbox.js +13 -19
- package/dist/cjs/Checkbox.js.map +1 -1
- package/dist/cjs/ColorPicker.js +170 -84
- package/dist/cjs/ColorPicker.js.map +1 -1
- package/dist/cjs/DatePicker.js +18 -19
- package/dist/cjs/DatePicker.js.map +1 -1
- package/dist/cjs/Dropdown.js +32 -41
- package/dist/cjs/Dropdown.js.map +1 -1
- package/dist/cjs/Input.js +31 -36
- package/dist/cjs/Input.js.map +1 -1
- package/dist/cjs/Kbd.js +5 -11
- package/dist/cjs/Kbd.js.map +1 -1
- package/dist/cjs/Label.js +71 -62
- package/dist/cjs/Label.js.map +1 -1
- package/dist/cjs/Modal.js +38 -34
- package/dist/cjs/Modal.js.map +1 -1
- package/dist/cjs/MultiEmailInput.js +124 -97
- package/dist/cjs/MultiEmailInput.js.map +1 -1
- package/dist/cjs/NoData.js +15 -23
- package/dist/cjs/NoData.js.map +1 -1
- package/dist/cjs/Pagination.js +21 -27
- package/dist/cjs/Pagination.js.map +1 -1
- package/dist/cjs/Pane.js +74 -47
- package/dist/cjs/Pane.js.map +1 -1
- package/dist/cjs/Popover.js +5 -12
- package/dist/cjs/Popover.js.map +1 -1
- package/dist/cjs/ProgressBar.js +4 -8
- package/dist/cjs/ProgressBar.js.map +1 -1
- package/dist/cjs/Radio.js +25 -31
- package/dist/cjs/Radio.js.map +1 -1
- package/dist/cjs/Select.js +95 -78
- package/dist/cjs/Select.js.map +1 -1
- package/dist/cjs/Sidebar.js +72 -79
- package/dist/cjs/Sidebar.js.map +1 -1
- package/dist/cjs/Slider.js +15 -23
- package/dist/cjs/Slider.js.map +1 -1
- package/dist/cjs/Spinner.js +2 -7
- package/dist/cjs/Spinner.js.map +1 -1
- package/dist/cjs/Stepper.js +7 -11
- package/dist/cjs/Stepper.js.map +1 -1
- package/dist/cjs/Switch.js +22 -25
- package/dist/cjs/Switch.js.map +1 -1
- package/dist/cjs/Tab.js +10 -18
- package/dist/cjs/Tab.js.map +1 -1
- package/dist/cjs/Table.js +387 -236
- package/dist/cjs/Table.js.map +1 -1
- package/dist/cjs/Tag.js +9 -16
- package/dist/cjs/Tag.js.map +1 -1
- package/dist/cjs/{Textarea-13e1da31.js → Textarea-DdURL8Dd.js} +21 -29
- package/dist/cjs/Textarea-DdURL8Dd.js.map +1 -0
- package/dist/cjs/Textarea.js +7 -6
- package/dist/cjs/Textarea.js.map +1 -1
- package/dist/cjs/TimePicker.js +16 -17
- package/dist/cjs/TimePicker.js.map +1 -1
- package/dist/cjs/Toastr.js +61 -49
- package/dist/cjs/Toastr.js.map +1 -1
- package/dist/cjs/Tooltip.js +20 -22
- package/dist/cjs/Tooltip.js.map +1 -1
- package/dist/cjs/TranslationProvider.js +48 -21
- package/dist/cjs/TranslationProvider.js.map +1 -1
- package/dist/cjs/Tree.js +21 -23
- package/dist/cjs/Tree.js.map +1 -1
- package/dist/cjs/TreeSelect.js +30 -28
- package/dist/cjs/TreeSelect.js.map +1 -1
- package/dist/cjs/Typography.js +4 -12
- package/dist/cjs/Typography.js.map +1 -1
- package/dist/cjs/constants.js +7 -19
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/{en-80d0fbff.js → en-DhnUUSB_.js} +13 -6
- package/dist/cjs/en-DhnUUSB_.js.map +1 -0
- package/dist/cjs/formik/ActionBlock.js +12 -18
- package/dist/cjs/formik/ActionBlock.js.map +1 -1
- package/dist/cjs/formik/BlockNavigation.js +24 -42
- package/dist/cjs/formik/BlockNavigation.js.map +1 -1
- package/dist/cjs/formik/Button.js +3 -10
- package/dist/cjs/formik/Button.js.map +1 -1
- package/dist/cjs/formik/Checkbox.js +10 -16
- package/dist/cjs/formik/Checkbox.js.map +1 -1
- package/dist/cjs/formik/Form.js +13 -24
- package/dist/cjs/formik/Form.js.map +1 -1
- package/dist/cjs/formik/Input.js +10 -16
- package/dist/cjs/formik/Input.js.map +1 -1
- package/dist/cjs/formik/MultiEmailInput.js +8 -15
- package/dist/cjs/formik/MultiEmailInput.js.map +1 -1
- package/dist/cjs/formik/Radio.js +10 -17
- package/dist/cjs/formik/Radio.js.map +1 -1
- package/dist/cjs/formik/Select.js +9 -17
- package/dist/cjs/formik/Select.js.map +1 -1
- package/dist/cjs/formik/Slider.js +10 -17
- package/dist/cjs/formik/Slider.js.map +1 -1
- package/dist/cjs/formik/Switch.js +10 -16
- package/dist/cjs/formik/Switch.js.map +1 -1
- package/dist/cjs/formik/Textarea.js +11 -17
- package/dist/cjs/formik/Textarea.js.map +1 -1
- package/dist/cjs/formik/TreeSelect.js +8 -14
- package/dist/cjs/formik/TreeSelect.js.map +1 -1
- package/dist/cjs/formik/index.js +12 -15
- package/dist/cjs/formik/index.js.map +1 -1
- package/dist/cjs/index-BG9I04iF.js +451 -0
- package/dist/cjs/index-BG9I04iF.js.map +1 -0
- package/dist/cjs/{index-4683b7da.js → index-DOn2FmWB.js} +80 -80
- package/dist/cjs/index-DOn2FmWB.js.map +1 -0
- package/dist/cjs/index.css +2 -2
- package/dist/cjs/index.js +26 -29
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/layouts.js +6 -7
- package/dist/cjs/layouts.js.map +1 -1
- package/dist/cjs/managers.js +0 -2
- package/dist/cjs/managers.js.map +1 -1
- package/dist/cjs/overlayManager.js +2 -9
- package/dist/cjs/overlayManager.js.map +1 -1
- package/dist/cjs/{react-select-creatable.esm-23eddf9f.js → react-select-creatable.esm-Bdv9YAMt.js} +231 -140
- package/dist/cjs/{react-select-creatable.esm-23eddf9f.js.map → react-select-creatable.esm-Bdv9YAMt.js.map} +1 -1
- package/dist/cjs/{useId-4e3deb5c.js → useId-DXHUzdxd.js} +1 -1
- package/dist/cjs/{useId-4e3deb5c.js.map → useId-DXHUzdxd.js.map} +1 -1
- package/dist/cjs/{useOverlayManager-d4108cf8.js → useOverlayManager-D5NTaYt6.js} +25 -744
- package/dist/cjs/useOverlayManager-D5NTaYt6.js.map +1 -0
- package/dist/cjs/{useQueryParams-a8ee2f76.js → useQueryParams-l5fJJYCR.js} +2 -6
- package/dist/cjs/useQueryParams-l5fJJYCR.js.map +1 -0
- package/dist/cjs/useRecentlyUsedColors-DmV1uj1F.js +1270 -0
- package/dist/cjs/useRecentlyUsedColors-DmV1uj1F.js.map +1 -0
- package/dist/cjs/{HeaderCellMenu-ed9de3d6.js → useRestoreScrollPosition-Ck_b0Nh4.js} +87 -88
- package/dist/cjs/useRestoreScrollPosition-Ck_b0Nh4.js.map +1 -0
- package/dist/{en-41f5c641.js → en-_r5-MxJe.js} +13 -6
- package/dist/en-_r5-MxJe.js.map +1 -0
- package/dist/formik/ActionBlock.js +7 -7
- package/dist/formik/BlockNavigation.js +15 -26
- package/dist/formik/BlockNavigation.js.map +1 -1
- package/dist/formik/Button.js +1 -2
- package/dist/formik/Button.js.map +1 -1
- package/dist/formik/Checkbox.js +6 -5
- package/dist/formik/Checkbox.js.map +1 -1
- package/dist/formik/Form.js +2 -2
- package/dist/formik/Form.js.map +1 -1
- package/dist/formik/Input.js +6 -5
- package/dist/formik/Input.js.map +1 -1
- package/dist/formik/MultiEmailInput.js +5 -5
- package/dist/formik/Radio.js +6 -5
- package/dist/formik/Radio.js.map +1 -1
- package/dist/formik/Select.js +5 -5
- package/dist/formik/Slider.js +6 -5
- package/dist/formik/Slider.js.map +1 -1
- package/dist/formik/Switch.js +6 -5
- package/dist/formik/Switch.js.map +1 -1
- package/dist/formik/Textarea.js +7 -6
- package/dist/formik/Textarea.js.map +1 -1
- package/dist/formik/TreeSelect.js +5 -4
- package/dist/formik/TreeSelect.js.map +1 -1
- package/dist/formik/index.js +12 -13
- package/dist/formik/index.js.map +1 -1
- package/dist/index-BCP3m_SF.js +434 -0
- package/dist/index-BCP3m_SF.js.map +1 -0
- package/dist/{index-78e488c9.js → index-BXAHRXsD.js} +33 -21
- package/dist/index-BXAHRXsD.js.map +1 -0
- package/dist/index.css +2 -2
- package/dist/index.js +26 -27
- package/dist/index.js.map +1 -1
- package/dist/layouts.js +6 -5
- package/dist/layouts.js.map +1 -1
- package/dist/{react-select-creatable.esm-ad71b0c0.js → react-select-creatable.esm-Dx_vEnyD.js} +137 -31
- package/dist/{react-select-creatable.esm-ad71b0c0.js.map → react-select-creatable.esm-Dx_vEnyD.js.map} +1 -1
- package/dist/{useId-c1d20bba.js → useId-Jj9hXm-g.js} +1 -1
- package/dist/{useId-c1d20bba.js.map → useId-Jj9hXm-g.js.map} +1 -1
- package/dist/{useOverlayManager-593daea1.js → useOverlayManager-U3cqV61l.js} +9 -716
- package/dist/useOverlayManager-U3cqV61l.js.map +1 -0
- package/dist/{useQueryParams-dcb34865.js → useQueryParams-b60CHFUx.js} +1 -1
- package/dist/{useQueryParams-dcb34865.js.map → useQueryParams-b60CHFUx.js.map} +1 -1
- package/dist/useRecentlyUsedColors-CJe4G0Xs.js +1267 -0
- package/dist/useRecentlyUsedColors-CJe4G0Xs.js.map +1 -0
- package/dist/{HeaderCellMenu-85af6d2a.js → useRestoreScrollPosition-B3J6xSHt.js} +77 -75
- package/dist/useRestoreScrollPosition-B3J6xSHt.js.map +1 -0
- package/package.json +20 -14
- package/src/translations/de.json +7 -2
- package/src/translations/en.json +12 -5
- package/src/translations/es.json +7 -2
- package/src/translations/fr.json +7 -2
- package/src/translations/nl.json +7 -2
- package/src/translations/pl.json +7 -2
- package/src/translations/pt.json +7 -2
- package/types/Button.d.ts +0 -2
- package/types/ColorPicker.d.ts +7 -5
- package/types/DatePicker.d.ts +2 -0
- package/types/Modal.d.ts +1 -1
- package/types/Pane.d.ts +1 -1
- package/types/Select.d.ts +4 -0
- package/types/Table.d.ts +9 -0
- package/types/Toastr.d.ts +3 -1
- package/types/Tree.d.ts +2 -1
- package/dist/HeaderCellMenu-85af6d2a.js.map +0 -1
- package/dist/Textarea-e2cdbeb5.js.map +0 -1
- package/dist/cjs/HeaderCellMenu-ed9de3d6.js.map +0 -1
- package/dist/cjs/Textarea-13e1da31.js.map +0 -1
- package/dist/cjs/en-80d0fbff.js.map +0 -1
- package/dist/cjs/index-0f5141e0.js +0 -178
- package/dist/cjs/index-0f5141e0.js.map +0 -1
- package/dist/cjs/index-4683b7da.js.map +0 -1
- package/dist/cjs/tinycolor-b1e9a7b2.js +0 -1202
- package/dist/cjs/tinycolor-b1e9a7b2.js.map +0 -1
- package/dist/cjs/useOverlayManager-d4108cf8.js.map +0 -1
- package/dist/cjs/useQueryParams-a8ee2f76.js.map +0 -1
- package/dist/en-41f5c641.js.map +0 -1
- package/dist/index-78e488c9.js.map +0 -1
- package/dist/index-abadd6e9.js +0 -155
- package/dist/index-abadd6e9.js.map +0 -1
- package/dist/tinycolor-282c618c.js +0 -1200
- package/dist/tinycolor-282c618c.js.map +0 -1
- package/dist/useOverlayManager-593daea1.js.map +0 -1
|
@@ -1,101 +1,14 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
2
|
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
|
|
3
3
|
import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
|
|
4
|
-
import React__default, {
|
|
4
|
+
import React__default, { forwardRef, useRef, useEffect, useCallback, useSyncExternalStore } from 'react';
|
|
5
5
|
import ReactDOM, { createPortal } from 'react-dom';
|
|
6
|
-
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
|
|
7
6
|
import _extends$1 from '@babel/runtime/helpers/extends';
|
|
8
7
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
9
8
|
import { isEmpty } from 'ramda';
|
|
10
9
|
import useHotKeys from '@bigbinary/neeto-hotkeys';
|
|
11
10
|
import { manager } from './overlayManager.js';
|
|
12
|
-
import { t as trapFocusOnFocusableElements,
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Copyright (c) 2013-present, Facebook, Inc.
|
|
16
|
-
*
|
|
17
|
-
* This source code is licensed under the MIT license found in the
|
|
18
|
-
* LICENSE file in the root directory of this source tree.
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
22
|
-
|
|
23
|
-
var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Copyright (c) 2013-present, Facebook, Inc.
|
|
27
|
-
*
|
|
28
|
-
* This source code is licensed under the MIT license found in the
|
|
29
|
-
* LICENSE file in the root directory of this source tree.
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
var ReactPropTypesSecret = ReactPropTypesSecret_1;
|
|
33
|
-
|
|
34
|
-
function emptyFunction() {}
|
|
35
|
-
function emptyFunctionWithReset() {}
|
|
36
|
-
emptyFunctionWithReset.resetWarningCache = emptyFunction;
|
|
37
|
-
|
|
38
|
-
var factoryWithThrowingShims = function() {
|
|
39
|
-
function shim(props, propName, componentName, location, propFullName, secret) {
|
|
40
|
-
if (secret === ReactPropTypesSecret) {
|
|
41
|
-
// It is still safe when called from React.
|
|
42
|
-
return;
|
|
43
|
-
}
|
|
44
|
-
var err = new Error(
|
|
45
|
-
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
|
46
|
-
'Use PropTypes.checkPropTypes() to call them. ' +
|
|
47
|
-
'Read more at http://fb.me/use-check-prop-types'
|
|
48
|
-
);
|
|
49
|
-
err.name = 'Invariant Violation';
|
|
50
|
-
throw err;
|
|
51
|
-
} shim.isRequired = shim;
|
|
52
|
-
function getShim() {
|
|
53
|
-
return shim;
|
|
54
|
-
} // Important!
|
|
55
|
-
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
|
|
56
|
-
var ReactPropTypes = {
|
|
57
|
-
array: shim,
|
|
58
|
-
bigint: shim,
|
|
59
|
-
bool: shim,
|
|
60
|
-
func: shim,
|
|
61
|
-
number: shim,
|
|
62
|
-
object: shim,
|
|
63
|
-
string: shim,
|
|
64
|
-
symbol: shim,
|
|
65
|
-
|
|
66
|
-
any: shim,
|
|
67
|
-
arrayOf: getShim,
|
|
68
|
-
element: shim,
|
|
69
|
-
elementType: shim,
|
|
70
|
-
instanceOf: getShim,
|
|
71
|
-
node: shim,
|
|
72
|
-
objectOf: getShim,
|
|
73
|
-
oneOf: getShim,
|
|
74
|
-
oneOfType: getShim,
|
|
75
|
-
shape: getShim,
|
|
76
|
-
exact: getShim,
|
|
77
|
-
|
|
78
|
-
checkPropTypes: emptyFunctionWithReset,
|
|
79
|
-
resetWarningCache: emptyFunction
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
ReactPropTypes.PropTypes = ReactPropTypes;
|
|
83
|
-
|
|
84
|
-
return ReactPropTypes;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
/**
|
|
88
|
-
* Copyright (c) 2013-present, Facebook, Inc.
|
|
89
|
-
*
|
|
90
|
-
* This source code is licensed under the MIT license found in the
|
|
91
|
-
* LICENSE file in the root directory of this source tree.
|
|
92
|
-
*/
|
|
93
|
-
|
|
94
|
-
{
|
|
95
|
-
// By explicitly using `prop-types` you are opting into new production behavior.
|
|
96
|
-
// http://fb.me/prop-types-in-prod
|
|
97
|
-
factoryWithThrowingShims();
|
|
98
|
-
}
|
|
11
|
+
import { t as trapFocusOnFocusableElements, f as hideScrollAndAddMargin, i as showScrollAndRemoveMargin, j as focusFirstFocusableElement, n as noop$1 } from './index-BCP3m_SF.js';
|
|
99
12
|
|
|
100
13
|
/**
|
|
101
14
|
* Checks if a given element has a CSS class.
|
|
@@ -852,629 +765,6 @@ CSSTransition.defaultProps = {
|
|
|
852
765
|
};
|
|
853
766
|
CSSTransition.propTypes = {};
|
|
854
767
|
|
|
855
|
-
/**
|
|
856
|
-
* Given `this.props.children`, return an object mapping key to child.
|
|
857
|
-
*
|
|
858
|
-
* @param {*} children `this.props.children`
|
|
859
|
-
* @return {object} Mapping of key to child
|
|
860
|
-
*/
|
|
861
|
-
|
|
862
|
-
function getChildMapping(children, mapFn) {
|
|
863
|
-
var mapper = function mapper(child) {
|
|
864
|
-
return mapFn && isValidElement(child) ? mapFn(child) : child;
|
|
865
|
-
};
|
|
866
|
-
|
|
867
|
-
var result = Object.create(null);
|
|
868
|
-
if (children) Children.map(children, function (c) {
|
|
869
|
-
return c;
|
|
870
|
-
}).forEach(function (child) {
|
|
871
|
-
// run the map function here instead so that the key is the computed one
|
|
872
|
-
result[child.key] = mapper(child);
|
|
873
|
-
});
|
|
874
|
-
return result;
|
|
875
|
-
}
|
|
876
|
-
/**
|
|
877
|
-
* When you're adding or removing children some may be added or removed in the
|
|
878
|
-
* same render pass. We want to show *both* since we want to simultaneously
|
|
879
|
-
* animate elements in and out. This function takes a previous set of keys
|
|
880
|
-
* and a new set of keys and merges them with its best guess of the correct
|
|
881
|
-
* ordering. In the future we may expose some of the utilities in
|
|
882
|
-
* ReactMultiChild to make this easy, but for now React itself does not
|
|
883
|
-
* directly have this concept of the union of prevChildren and nextChildren
|
|
884
|
-
* so we implement it here.
|
|
885
|
-
*
|
|
886
|
-
* @param {object} prev prev children as returned from
|
|
887
|
-
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
888
|
-
* @param {object} next next children as returned from
|
|
889
|
-
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
890
|
-
* @return {object} a key set that contains all keys in `prev` and all keys
|
|
891
|
-
* in `next` in a reasonable order.
|
|
892
|
-
*/
|
|
893
|
-
|
|
894
|
-
function mergeChildMappings(prev, next) {
|
|
895
|
-
prev = prev || {};
|
|
896
|
-
next = next || {};
|
|
897
|
-
|
|
898
|
-
function getValueForKey(key) {
|
|
899
|
-
return key in next ? next[key] : prev[key];
|
|
900
|
-
} // For each key of `next`, the list of keys to insert before that key in
|
|
901
|
-
// the combined list
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
var nextKeysPending = Object.create(null);
|
|
905
|
-
var pendingKeys = [];
|
|
906
|
-
|
|
907
|
-
for (var prevKey in prev) {
|
|
908
|
-
if (prevKey in next) {
|
|
909
|
-
if (pendingKeys.length) {
|
|
910
|
-
nextKeysPending[prevKey] = pendingKeys;
|
|
911
|
-
pendingKeys = [];
|
|
912
|
-
}
|
|
913
|
-
} else {
|
|
914
|
-
pendingKeys.push(prevKey);
|
|
915
|
-
}
|
|
916
|
-
}
|
|
917
|
-
|
|
918
|
-
var i;
|
|
919
|
-
var childMapping = {};
|
|
920
|
-
|
|
921
|
-
for (var nextKey in next) {
|
|
922
|
-
if (nextKeysPending[nextKey]) {
|
|
923
|
-
for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
|
924
|
-
var pendingNextKey = nextKeysPending[nextKey][i];
|
|
925
|
-
childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
|
926
|
-
}
|
|
927
|
-
}
|
|
928
|
-
|
|
929
|
-
childMapping[nextKey] = getValueForKey(nextKey);
|
|
930
|
-
} // Finally, add the keys which didn't appear before any key in `next`
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
for (i = 0; i < pendingKeys.length; i++) {
|
|
934
|
-
childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
|
935
|
-
}
|
|
936
|
-
|
|
937
|
-
return childMapping;
|
|
938
|
-
}
|
|
939
|
-
|
|
940
|
-
function getProp(child, prop, props) {
|
|
941
|
-
return props[prop] != null ? props[prop] : child.props[prop];
|
|
942
|
-
}
|
|
943
|
-
|
|
944
|
-
function getInitialChildMapping(props, onExited) {
|
|
945
|
-
return getChildMapping(props.children, function (child) {
|
|
946
|
-
return cloneElement(child, {
|
|
947
|
-
onExited: onExited.bind(null, child),
|
|
948
|
-
in: true,
|
|
949
|
-
appear: getProp(child, 'appear', props),
|
|
950
|
-
enter: getProp(child, 'enter', props),
|
|
951
|
-
exit: getProp(child, 'exit', props)
|
|
952
|
-
});
|
|
953
|
-
});
|
|
954
|
-
}
|
|
955
|
-
function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
|
956
|
-
var nextChildMapping = getChildMapping(nextProps.children);
|
|
957
|
-
var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
|
958
|
-
Object.keys(children).forEach(function (key) {
|
|
959
|
-
var child = children[key];
|
|
960
|
-
if (!isValidElement(child)) return;
|
|
961
|
-
var hasPrev = (key in prevChildMapping);
|
|
962
|
-
var hasNext = (key in nextChildMapping);
|
|
963
|
-
var prevChild = prevChildMapping[key];
|
|
964
|
-
var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
|
|
965
|
-
|
|
966
|
-
if (hasNext && (!hasPrev || isLeaving)) {
|
|
967
|
-
// console.log('entering', key)
|
|
968
|
-
children[key] = cloneElement(child, {
|
|
969
|
-
onExited: onExited.bind(null, child),
|
|
970
|
-
in: true,
|
|
971
|
-
exit: getProp(child, 'exit', nextProps),
|
|
972
|
-
enter: getProp(child, 'enter', nextProps)
|
|
973
|
-
});
|
|
974
|
-
} else if (!hasNext && hasPrev && !isLeaving) {
|
|
975
|
-
// item is old (exiting)
|
|
976
|
-
// console.log('leaving', key)
|
|
977
|
-
children[key] = cloneElement(child, {
|
|
978
|
-
in: false
|
|
979
|
-
});
|
|
980
|
-
} else if (hasNext && hasPrev && isValidElement(prevChild)) {
|
|
981
|
-
// item hasn't changed transition states
|
|
982
|
-
// copy over the last transition props;
|
|
983
|
-
// console.log('unchanged', key)
|
|
984
|
-
children[key] = cloneElement(child, {
|
|
985
|
-
onExited: onExited.bind(null, child),
|
|
986
|
-
in: prevChild.props.in,
|
|
987
|
-
exit: getProp(child, 'exit', nextProps),
|
|
988
|
-
enter: getProp(child, 'enter', nextProps)
|
|
989
|
-
});
|
|
990
|
-
}
|
|
991
|
-
});
|
|
992
|
-
return children;
|
|
993
|
-
}
|
|
994
|
-
|
|
995
|
-
var values = Object.values || function (obj) {
|
|
996
|
-
return Object.keys(obj).map(function (k) {
|
|
997
|
-
return obj[k];
|
|
998
|
-
});
|
|
999
|
-
};
|
|
1000
|
-
|
|
1001
|
-
var defaultProps = {
|
|
1002
|
-
component: 'div',
|
|
1003
|
-
childFactory: function childFactory(child) {
|
|
1004
|
-
return child;
|
|
1005
|
-
}
|
|
1006
|
-
};
|
|
1007
|
-
/**
|
|
1008
|
-
* The `<TransitionGroup>` component manages a set of transition components
|
|
1009
|
-
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
|
|
1010
|
-
* components, `<TransitionGroup>` is a state machine for managing the mounting
|
|
1011
|
-
* and unmounting of components over time.
|
|
1012
|
-
*
|
|
1013
|
-
* Consider the example below. As items are removed or added to the TodoList the
|
|
1014
|
-
* `in` prop is toggled automatically by the `<TransitionGroup>`.
|
|
1015
|
-
*
|
|
1016
|
-
* Note that `<TransitionGroup>` does not define any animation behavior!
|
|
1017
|
-
* Exactly _how_ a list item animates is up to the individual transition
|
|
1018
|
-
* component. This means you can mix and match animations across different list
|
|
1019
|
-
* items.
|
|
1020
|
-
*/
|
|
1021
|
-
|
|
1022
|
-
var TransitionGroup = /*#__PURE__*/function (_React$Component) {
|
|
1023
|
-
_inheritsLoose(TransitionGroup, _React$Component);
|
|
1024
|
-
|
|
1025
|
-
function TransitionGroup(props, context) {
|
|
1026
|
-
var _this;
|
|
1027
|
-
|
|
1028
|
-
_this = _React$Component.call(this, props, context) || this;
|
|
1029
|
-
|
|
1030
|
-
var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
_this.state = {
|
|
1034
|
-
contextValue: {
|
|
1035
|
-
isMounting: true
|
|
1036
|
-
},
|
|
1037
|
-
handleExited: handleExited,
|
|
1038
|
-
firstRender: true
|
|
1039
|
-
};
|
|
1040
|
-
return _this;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
var _proto = TransitionGroup.prototype;
|
|
1044
|
-
|
|
1045
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
1046
|
-
this.mounted = true;
|
|
1047
|
-
this.setState({
|
|
1048
|
-
contextValue: {
|
|
1049
|
-
isMounting: false
|
|
1050
|
-
}
|
|
1051
|
-
});
|
|
1052
|
-
};
|
|
1053
|
-
|
|
1054
|
-
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
1055
|
-
this.mounted = false;
|
|
1056
|
-
};
|
|
1057
|
-
|
|
1058
|
-
TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
|
1059
|
-
var prevChildMapping = _ref.children,
|
|
1060
|
-
handleExited = _ref.handleExited,
|
|
1061
|
-
firstRender = _ref.firstRender;
|
|
1062
|
-
return {
|
|
1063
|
-
children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
|
|
1064
|
-
firstRender: false
|
|
1065
|
-
};
|
|
1066
|
-
} // node is `undefined` when user provided `nodeRef` prop
|
|
1067
|
-
;
|
|
1068
|
-
|
|
1069
|
-
_proto.handleExited = function handleExited(child, node) {
|
|
1070
|
-
var currentChildMapping = getChildMapping(this.props.children);
|
|
1071
|
-
if (child.key in currentChildMapping) return;
|
|
1072
|
-
|
|
1073
|
-
if (child.props.onExited) {
|
|
1074
|
-
child.props.onExited(node);
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
if (this.mounted) {
|
|
1078
|
-
this.setState(function (state) {
|
|
1079
|
-
var children = _extends({}, state.children);
|
|
1080
|
-
|
|
1081
|
-
delete children[child.key];
|
|
1082
|
-
return {
|
|
1083
|
-
children: children
|
|
1084
|
-
};
|
|
1085
|
-
});
|
|
1086
|
-
}
|
|
1087
|
-
};
|
|
1088
|
-
|
|
1089
|
-
_proto.render = function render() {
|
|
1090
|
-
var _this$props = this.props,
|
|
1091
|
-
Component = _this$props.component,
|
|
1092
|
-
childFactory = _this$props.childFactory,
|
|
1093
|
-
props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
|
1094
|
-
|
|
1095
|
-
var contextValue = this.state.contextValue;
|
|
1096
|
-
var children = values(this.state.children).map(childFactory);
|
|
1097
|
-
delete props.appear;
|
|
1098
|
-
delete props.enter;
|
|
1099
|
-
delete props.exit;
|
|
1100
|
-
|
|
1101
|
-
if (Component === null) {
|
|
1102
|
-
return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
|
|
1103
|
-
value: contextValue
|
|
1104
|
-
}, children);
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
|
|
1108
|
-
value: contextValue
|
|
1109
|
-
}, /*#__PURE__*/React__default.createElement(Component, props, children));
|
|
1110
|
-
};
|
|
1111
|
-
|
|
1112
|
-
return TransitionGroup;
|
|
1113
|
-
}(React__default.Component);
|
|
1114
|
-
|
|
1115
|
-
TransitionGroup.propTypes = {};
|
|
1116
|
-
TransitionGroup.defaultProps = defaultProps;
|
|
1117
|
-
|
|
1118
|
-
/**
|
|
1119
|
-
* The `<ReplaceTransition>` component is a specialized `Transition` component
|
|
1120
|
-
* that animates between two children.
|
|
1121
|
-
*
|
|
1122
|
-
* ```jsx
|
|
1123
|
-
* <ReplaceTransition in>
|
|
1124
|
-
* <Fade><div>I appear first</div></Fade>
|
|
1125
|
-
* <Fade><div>I replace the above</div></Fade>
|
|
1126
|
-
* </ReplaceTransition>
|
|
1127
|
-
* ```
|
|
1128
|
-
*/
|
|
1129
|
-
|
|
1130
|
-
var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
|
|
1131
|
-
_inheritsLoose(ReplaceTransition, _React$Component);
|
|
1132
|
-
|
|
1133
|
-
function ReplaceTransition() {
|
|
1134
|
-
var _this;
|
|
1135
|
-
|
|
1136
|
-
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1137
|
-
_args[_key] = arguments[_key];
|
|
1138
|
-
}
|
|
1139
|
-
|
|
1140
|
-
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
|
|
1141
|
-
|
|
1142
|
-
_this.handleEnter = function () {
|
|
1143
|
-
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
1144
|
-
args[_key2] = arguments[_key2];
|
|
1145
|
-
}
|
|
1146
|
-
|
|
1147
|
-
return _this.handleLifecycle('onEnter', 0, args);
|
|
1148
|
-
};
|
|
1149
|
-
|
|
1150
|
-
_this.handleEntering = function () {
|
|
1151
|
-
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
1152
|
-
args[_key3] = arguments[_key3];
|
|
1153
|
-
}
|
|
1154
|
-
|
|
1155
|
-
return _this.handleLifecycle('onEntering', 0, args);
|
|
1156
|
-
};
|
|
1157
|
-
|
|
1158
|
-
_this.handleEntered = function () {
|
|
1159
|
-
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
1160
|
-
args[_key4] = arguments[_key4];
|
|
1161
|
-
}
|
|
1162
|
-
|
|
1163
|
-
return _this.handleLifecycle('onEntered', 0, args);
|
|
1164
|
-
};
|
|
1165
|
-
|
|
1166
|
-
_this.handleExit = function () {
|
|
1167
|
-
for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
|
|
1168
|
-
args[_key5] = arguments[_key5];
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
return _this.handleLifecycle('onExit', 1, args);
|
|
1172
|
-
};
|
|
1173
|
-
|
|
1174
|
-
_this.handleExiting = function () {
|
|
1175
|
-
for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
|
|
1176
|
-
args[_key6] = arguments[_key6];
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
|
-
return _this.handleLifecycle('onExiting', 1, args);
|
|
1180
|
-
};
|
|
1181
|
-
|
|
1182
|
-
_this.handleExited = function () {
|
|
1183
|
-
for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
|
|
1184
|
-
args[_key7] = arguments[_key7];
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
|
-
return _this.handleLifecycle('onExited', 1, args);
|
|
1188
|
-
};
|
|
1189
|
-
|
|
1190
|
-
return _this;
|
|
1191
|
-
}
|
|
1192
|
-
|
|
1193
|
-
var _proto = ReplaceTransition.prototype;
|
|
1194
|
-
|
|
1195
|
-
_proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
|
|
1196
|
-
var _child$props;
|
|
1197
|
-
|
|
1198
|
-
var children = this.props.children;
|
|
1199
|
-
var child = React__default.Children.toArray(children)[idx];
|
|
1200
|
-
if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
|
|
1201
|
-
|
|
1202
|
-
if (this.props[handler]) {
|
|
1203
|
-
var maybeNode = child.props.nodeRef ? undefined : ReactDOM.findDOMNode(this);
|
|
1204
|
-
this.props[handler](maybeNode);
|
|
1205
|
-
}
|
|
1206
|
-
};
|
|
1207
|
-
|
|
1208
|
-
_proto.render = function render() {
|
|
1209
|
-
var _this$props = this.props,
|
|
1210
|
-
children = _this$props.children,
|
|
1211
|
-
inProp = _this$props.in,
|
|
1212
|
-
props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
|
|
1213
|
-
|
|
1214
|
-
var _React$Children$toArr = React__default.Children.toArray(children),
|
|
1215
|
-
first = _React$Children$toArr[0],
|
|
1216
|
-
second = _React$Children$toArr[1];
|
|
1217
|
-
|
|
1218
|
-
delete props.onEnter;
|
|
1219
|
-
delete props.onEntering;
|
|
1220
|
-
delete props.onEntered;
|
|
1221
|
-
delete props.onExit;
|
|
1222
|
-
delete props.onExiting;
|
|
1223
|
-
delete props.onExited;
|
|
1224
|
-
return /*#__PURE__*/React__default.createElement(TransitionGroup, props, inProp ? React__default.cloneElement(first, {
|
|
1225
|
-
key: 'first',
|
|
1226
|
-
onEnter: this.handleEnter,
|
|
1227
|
-
onEntering: this.handleEntering,
|
|
1228
|
-
onEntered: this.handleEntered
|
|
1229
|
-
}) : React__default.cloneElement(second, {
|
|
1230
|
-
key: 'second',
|
|
1231
|
-
onEnter: this.handleExit,
|
|
1232
|
-
onEntering: this.handleExiting,
|
|
1233
|
-
onEntered: this.handleExited
|
|
1234
|
-
}));
|
|
1235
|
-
};
|
|
1236
|
-
|
|
1237
|
-
return ReplaceTransition;
|
|
1238
|
-
}(React__default.Component);
|
|
1239
|
-
|
|
1240
|
-
ReplaceTransition.propTypes = {};
|
|
1241
|
-
|
|
1242
|
-
var _leaveRenders, _enterRenders;
|
|
1243
|
-
|
|
1244
|
-
function areChildrenDifferent(oldChildren, newChildren) {
|
|
1245
|
-
if (oldChildren === newChildren) return false;
|
|
1246
|
-
|
|
1247
|
-
if (React__default.isValidElement(oldChildren) && React__default.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
|
|
1248
|
-
return false;
|
|
1249
|
-
}
|
|
1250
|
-
|
|
1251
|
-
return true;
|
|
1252
|
-
}
|
|
1253
|
-
/**
|
|
1254
|
-
* Enum of modes for SwitchTransition component
|
|
1255
|
-
* @enum { string }
|
|
1256
|
-
*/
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
var modes = {
|
|
1260
|
-
out: 'out-in',
|
|
1261
|
-
in: 'in-out'
|
|
1262
|
-
};
|
|
1263
|
-
|
|
1264
|
-
var callHook = function callHook(element, name, cb) {
|
|
1265
|
-
return function () {
|
|
1266
|
-
var _element$props;
|
|
1267
|
-
|
|
1268
|
-
element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
|
|
1269
|
-
cb();
|
|
1270
|
-
};
|
|
1271
|
-
};
|
|
1272
|
-
|
|
1273
|
-
var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
|
|
1274
|
-
var current = _ref.current,
|
|
1275
|
-
changeState = _ref.changeState;
|
|
1276
|
-
return React__default.cloneElement(current, {
|
|
1277
|
-
in: false,
|
|
1278
|
-
onExited: callHook(current, 'onExited', function () {
|
|
1279
|
-
changeState(ENTERING, null);
|
|
1280
|
-
})
|
|
1281
|
-
});
|
|
1282
|
-
}, _leaveRenders[modes.in] = function (_ref2) {
|
|
1283
|
-
var current = _ref2.current,
|
|
1284
|
-
changeState = _ref2.changeState,
|
|
1285
|
-
children = _ref2.children;
|
|
1286
|
-
return [current, React__default.cloneElement(children, {
|
|
1287
|
-
in: true,
|
|
1288
|
-
onEntered: callHook(children, 'onEntered', function () {
|
|
1289
|
-
changeState(ENTERING);
|
|
1290
|
-
})
|
|
1291
|
-
})];
|
|
1292
|
-
}, _leaveRenders);
|
|
1293
|
-
var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
|
|
1294
|
-
var children = _ref3.children,
|
|
1295
|
-
changeState = _ref3.changeState;
|
|
1296
|
-
return React__default.cloneElement(children, {
|
|
1297
|
-
in: true,
|
|
1298
|
-
onEntered: callHook(children, 'onEntered', function () {
|
|
1299
|
-
changeState(ENTERED, React__default.cloneElement(children, {
|
|
1300
|
-
in: true
|
|
1301
|
-
}));
|
|
1302
|
-
})
|
|
1303
|
-
});
|
|
1304
|
-
}, _enterRenders[modes.in] = function (_ref4) {
|
|
1305
|
-
var current = _ref4.current,
|
|
1306
|
-
children = _ref4.children,
|
|
1307
|
-
changeState = _ref4.changeState;
|
|
1308
|
-
return [React__default.cloneElement(current, {
|
|
1309
|
-
in: false,
|
|
1310
|
-
onExited: callHook(current, 'onExited', function () {
|
|
1311
|
-
changeState(ENTERED, React__default.cloneElement(children, {
|
|
1312
|
-
in: true
|
|
1313
|
-
}));
|
|
1314
|
-
})
|
|
1315
|
-
}), React__default.cloneElement(children, {
|
|
1316
|
-
in: true
|
|
1317
|
-
})];
|
|
1318
|
-
}, _enterRenders);
|
|
1319
|
-
/**
|
|
1320
|
-
* A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
|
|
1321
|
-
* You can use it when you want to control the render between state transitions.
|
|
1322
|
-
* Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
|
|
1323
|
-
*
|
|
1324
|
-
* If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
|
|
1325
|
-
* If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
|
|
1326
|
-
*
|
|
1327
|
-
* **Note**: If you want the animation to happen simultaneously
|
|
1328
|
-
* (that is, to have the old child removed and a new child inserted **at the same time**),
|
|
1329
|
-
* you should use
|
|
1330
|
-
* [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
|
|
1331
|
-
* instead.
|
|
1332
|
-
*
|
|
1333
|
-
* ```jsx
|
|
1334
|
-
* function App() {
|
|
1335
|
-
* const [state, setState] = useState(false);
|
|
1336
|
-
* return (
|
|
1337
|
-
* <SwitchTransition>
|
|
1338
|
-
* <CSSTransition
|
|
1339
|
-
* key={state ? "Goodbye, world!" : "Hello, world!"}
|
|
1340
|
-
* addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
|
|
1341
|
-
* classNames='fade'
|
|
1342
|
-
* >
|
|
1343
|
-
* <button onClick={() => setState(state => !state)}>
|
|
1344
|
-
* {state ? "Goodbye, world!" : "Hello, world!"}
|
|
1345
|
-
* </button>
|
|
1346
|
-
* </CSSTransition>
|
|
1347
|
-
* </SwitchTransition>
|
|
1348
|
-
* );
|
|
1349
|
-
* }
|
|
1350
|
-
* ```
|
|
1351
|
-
*
|
|
1352
|
-
* ```css
|
|
1353
|
-
* .fade-enter{
|
|
1354
|
-
* opacity: 0;
|
|
1355
|
-
* }
|
|
1356
|
-
* .fade-exit{
|
|
1357
|
-
* opacity: 1;
|
|
1358
|
-
* }
|
|
1359
|
-
* .fade-enter-active{
|
|
1360
|
-
* opacity: 1;
|
|
1361
|
-
* }
|
|
1362
|
-
* .fade-exit-active{
|
|
1363
|
-
* opacity: 0;
|
|
1364
|
-
* }
|
|
1365
|
-
* .fade-enter-active,
|
|
1366
|
-
* .fade-exit-active{
|
|
1367
|
-
* transition: opacity 500ms;
|
|
1368
|
-
* }
|
|
1369
|
-
* ```
|
|
1370
|
-
*/
|
|
1371
|
-
|
|
1372
|
-
var SwitchTransition = /*#__PURE__*/function (_React$Component) {
|
|
1373
|
-
_inheritsLoose(SwitchTransition, _React$Component);
|
|
1374
|
-
|
|
1375
|
-
function SwitchTransition() {
|
|
1376
|
-
var _this;
|
|
1377
|
-
|
|
1378
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1379
|
-
args[_key] = arguments[_key];
|
|
1380
|
-
}
|
|
1381
|
-
|
|
1382
|
-
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
1383
|
-
_this.state = {
|
|
1384
|
-
status: ENTERED,
|
|
1385
|
-
current: null
|
|
1386
|
-
};
|
|
1387
|
-
_this.appeared = false;
|
|
1388
|
-
|
|
1389
|
-
_this.changeState = function (status, current) {
|
|
1390
|
-
if (current === void 0) {
|
|
1391
|
-
current = _this.state.current;
|
|
1392
|
-
}
|
|
1393
|
-
|
|
1394
|
-
_this.setState({
|
|
1395
|
-
status: status,
|
|
1396
|
-
current: current
|
|
1397
|
-
});
|
|
1398
|
-
};
|
|
1399
|
-
|
|
1400
|
-
return _this;
|
|
1401
|
-
}
|
|
1402
|
-
|
|
1403
|
-
var _proto = SwitchTransition.prototype;
|
|
1404
|
-
|
|
1405
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
1406
|
-
this.appeared = true;
|
|
1407
|
-
};
|
|
1408
|
-
|
|
1409
|
-
SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
|
1410
|
-
if (props.children == null) {
|
|
1411
|
-
return {
|
|
1412
|
-
current: null
|
|
1413
|
-
};
|
|
1414
|
-
}
|
|
1415
|
-
|
|
1416
|
-
if (state.status === ENTERING && props.mode === modes.in) {
|
|
1417
|
-
return {
|
|
1418
|
-
status: ENTERING
|
|
1419
|
-
};
|
|
1420
|
-
}
|
|
1421
|
-
|
|
1422
|
-
if (state.current && areChildrenDifferent(state.current, props.children)) {
|
|
1423
|
-
return {
|
|
1424
|
-
status: EXITING
|
|
1425
|
-
};
|
|
1426
|
-
}
|
|
1427
|
-
|
|
1428
|
-
return {
|
|
1429
|
-
current: React__default.cloneElement(props.children, {
|
|
1430
|
-
in: true
|
|
1431
|
-
})
|
|
1432
|
-
};
|
|
1433
|
-
};
|
|
1434
|
-
|
|
1435
|
-
_proto.render = function render() {
|
|
1436
|
-
var _this$props = this.props,
|
|
1437
|
-
children = _this$props.children,
|
|
1438
|
-
mode = _this$props.mode,
|
|
1439
|
-
_this$state = this.state,
|
|
1440
|
-
status = _this$state.status,
|
|
1441
|
-
current = _this$state.current;
|
|
1442
|
-
var data = {
|
|
1443
|
-
children: children,
|
|
1444
|
-
current: current,
|
|
1445
|
-
changeState: this.changeState,
|
|
1446
|
-
status: status
|
|
1447
|
-
};
|
|
1448
|
-
var component;
|
|
1449
|
-
|
|
1450
|
-
switch (status) {
|
|
1451
|
-
case ENTERING:
|
|
1452
|
-
component = enterRenders[mode](data);
|
|
1453
|
-
break;
|
|
1454
|
-
|
|
1455
|
-
case EXITING:
|
|
1456
|
-
component = leaveRenders[mode](data);
|
|
1457
|
-
break;
|
|
1458
|
-
|
|
1459
|
-
case ENTERED:
|
|
1460
|
-
component = current;
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
|
|
1464
|
-
value: {
|
|
1465
|
-
isMounting: !this.appeared
|
|
1466
|
-
}
|
|
1467
|
-
}, component);
|
|
1468
|
-
};
|
|
1469
|
-
|
|
1470
|
-
return SwitchTransition;
|
|
1471
|
-
}(React__default.Component);
|
|
1472
|
-
|
|
1473
|
-
SwitchTransition.propTypes = {};
|
|
1474
|
-
SwitchTransition.defaultProps = {
|
|
1475
|
-
mode: modes.out
|
|
1476
|
-
};
|
|
1477
|
-
|
|
1478
768
|
var _excluded = ["children"];
|
|
1479
769
|
var Portal$1 = function Portal(_ref, ref) {
|
|
1480
770
|
var children = _ref.children,
|
|
@@ -1541,6 +831,7 @@ var useOnClickOutside = function useOnClickOutside(insideRef, outsideRef, handle
|
|
|
1541
831
|
};
|
|
1542
832
|
|
|
1543
833
|
var useOverlay = function useOverlay(_ref) {
|
|
834
|
+
var _document$body;
|
|
1544
835
|
var isOpen = _ref.isOpen,
|
|
1545
836
|
initialFocusRef = _ref.initialFocusRef,
|
|
1546
837
|
finalFocusRef = _ref.finalFocusRef,
|
|
@@ -1552,7 +843,7 @@ var useOverlay = function useOverlay(_ref) {
|
|
|
1552
843
|
blockScrollOnMount = _ref.blockScrollOnMount,
|
|
1553
844
|
hasTransitionCompleted = _ref.hasTransitionCompleted;
|
|
1554
845
|
var elementToFocusRef = useRef(null);
|
|
1555
|
-
var bodyHeight = document.body.offsetHeight;
|
|
846
|
+
var bodyHeight = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetHeight;
|
|
1556
847
|
var windowHeight = window.innerHeight;
|
|
1557
848
|
var hasScroll = bodyHeight > windowHeight;
|
|
1558
849
|
var shouldHideScrollAndAddMargin = hasScroll && blockScrollOnMount && manager.hasOverlays();
|
|
@@ -1585,7 +876,8 @@ var useOverlay = function useOverlay(_ref) {
|
|
|
1585
876
|
return manager.isTopOverlay(overlayWrapper);
|
|
1586
877
|
});
|
|
1587
878
|
useHotKeys("escape", handleOverlayClose, {
|
|
1588
|
-
enabled: closeOnEsc
|
|
879
|
+
enabled: closeOnEsc && isOpen && isTopOverlay,
|
|
880
|
+
mode: "global"
|
|
1589
881
|
});
|
|
1590
882
|
useEffect(function () {
|
|
1591
883
|
var cleanUp = noop$1;
|
|
@@ -1611,7 +903,8 @@ var useOverlay = function useOverlay(_ref) {
|
|
|
1611
903
|
};
|
|
1612
904
|
return {
|
|
1613
905
|
handleOverlayClose: handleOverlayClose,
|
|
1614
|
-
setFocusField: setFocusField
|
|
906
|
+
setFocusField: setFocusField,
|
|
907
|
+
isTopOverlay: isTopOverlay
|
|
1615
908
|
};
|
|
1616
909
|
};
|
|
1617
910
|
|
|
@@ -1628,4 +921,4 @@ var useOverlayManager = function useOverlayManager(ref, isOpen) {
|
|
|
1628
921
|
};
|
|
1629
922
|
|
|
1630
923
|
export { Backdrop as B, CSSTransition as C, Portal as P, useOverlay as a, useOverlayManager as u };
|
|
1631
|
-
//# sourceMappingURL=useOverlayManager-
|
|
924
|
+
//# sourceMappingURL=useOverlayManager-U3cqV61l.js.map
|