@itcase/ui 1.0.29 → 1.0.31
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/dist/components/Dropdown.js +17 -36
- package/package.json +1 -1
|
@@ -39,48 +39,37 @@ function Dropdown(props) {
|
|
|
39
39
|
children = props.children,
|
|
40
40
|
className = props.className;
|
|
41
41
|
props.id;
|
|
42
|
-
var set = props.set
|
|
42
|
+
var set = props.set,
|
|
43
|
+
isOpen = props.isOpen,
|
|
44
|
+
setIsOpen = props.setIsOpen;
|
|
43
45
|
var dropdownRef = React.useRef(null);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var _useState2 = React.useState({
|
|
46
|
+
|
|
47
|
+
// const [isOpen, setIsOpen] = useState(false)
|
|
48
|
+
var _useState = React.useState({
|
|
48
49
|
className: ''
|
|
49
50
|
}),
|
|
50
|
-
animationState =
|
|
51
|
-
setAnimationState =
|
|
52
|
-
var onClick = React.useCallback(function () {
|
|
53
|
-
setIsOpen(function (prevState) {
|
|
54
|
-
return !prevState;
|
|
55
|
-
});
|
|
56
|
-
setAnimationState(function (prevState) {
|
|
57
|
-
return {
|
|
58
|
-
className: prevState.className === animationOpen ? animationClose : animationOpen
|
|
59
|
-
};
|
|
60
|
-
});
|
|
61
|
-
}, []);
|
|
51
|
+
animationState = _useState[0],
|
|
52
|
+
setAnimationState = _useState[1];
|
|
62
53
|
var onAnimationEnd = React.useCallback(function (event) {
|
|
63
54
|
// When component is change his visibility(display) in DOM,
|
|
64
55
|
// animation of close can run unnecessary on showing element.
|
|
65
|
-
// console.info('------ onAnimationEnd -------------')
|
|
66
|
-
// console.log('event: ', event)
|
|
67
|
-
// console.log('event.target: ', event.target)
|
|
68
|
-
// console.log('isOpen: ', isOpen)
|
|
69
|
-
// console.log('animationOpen: ', animationOpen)
|
|
70
|
-
// console.log('animationClose: ', animationClose)
|
|
71
56
|
// const dropdownElement = dropdownRef.current
|
|
72
|
-
// console.log('dropdownElement', dropdownElement)
|
|
73
|
-
// console.log('dropdownElement hasClass', dropdownElement.hasClass(animationClose))
|
|
74
57
|
setAnimationState(function (prevState) {
|
|
75
58
|
return {
|
|
76
59
|
className: isOpen ? prevState.className : ''
|
|
77
60
|
};
|
|
78
61
|
});
|
|
79
62
|
}, [isOpen]);
|
|
63
|
+
React.useEffect(function () {
|
|
64
|
+
setAnimationState(function (prevState) {
|
|
65
|
+
return {
|
|
66
|
+
className: isOpen ? animationOpen : animationClose
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
}, [isOpen]);
|
|
80
70
|
|
|
81
71
|
// Close dropdown by click outside
|
|
82
72
|
React.useEffect(function () {
|
|
83
|
-
// console.info('--------- useEffect Dropdown -------')
|
|
84
73
|
// Add a handler to keep track of the click target.
|
|
85
74
|
function onClickWindow(event) {
|
|
86
75
|
var dropdownElement = dropdownRef.current;
|
|
@@ -92,14 +81,13 @@ function Dropdown(props) {
|
|
|
92
81
|
if (!isContainsTarget && hasOpenClass) {
|
|
93
82
|
// Trigger close event with animation
|
|
94
83
|
// dropdownElement.click() - trigger "onClickWindow" again
|
|
95
|
-
|
|
84
|
+
setIsOpen(false);
|
|
96
85
|
}
|
|
97
86
|
}
|
|
98
87
|
}
|
|
99
88
|
// Add event listener for current dropdown on first render
|
|
100
89
|
window.addEventListener('click', onClickWindow);
|
|
101
90
|
return function () {
|
|
102
|
-
// console.info('--------- UNMOUNT useEffect Dropdown -------')
|
|
103
91
|
// Remove event listener for current dropdown on unmount
|
|
104
92
|
window.removeEventListener('click', onClickWindow);
|
|
105
93
|
};
|
|
@@ -123,17 +111,10 @@ function Dropdown(props) {
|
|
|
123
111
|
});
|
|
124
112
|
var _useStyles = useStyles.useStyles(props),
|
|
125
113
|
styles = _useStyles.styles;
|
|
126
|
-
|
|
127
|
-
// console.warn('====== Dropdown ========')
|
|
128
|
-
// console.log('props: ', props)
|
|
129
|
-
// console.log('isOpen: ', isOpen)
|
|
130
|
-
// console.log('animationState: ', animationState)
|
|
131
|
-
|
|
132
114
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
133
115
|
className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
|
|
134
116
|
ref: dropdownRef,
|
|
135
|
-
style: styles
|
|
136
|
-
onClick: onClick
|
|
117
|
+
style: styles
|
|
137
118
|
}, children &&
|
|
138
119
|
/*#__PURE__*/
|
|
139
120
|
// Add "onAnimationEnd" only for wrapper for ignore dropdown button
|