react-asc 23.3.0 → 23.3.1
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/components/CssTransition/CssTransition.d.ts +1 -1
- package/index.es.js +12 -2
- package/index.js +12 -2
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -800,14 +800,22 @@ const Chip = (props) => {
|
|
|
800
800
|
|
|
801
801
|
const CssTransition = (props) => {
|
|
802
802
|
const { className, children, show } = props;
|
|
803
|
+
const [isInit, setIsInit] = useState(false);
|
|
804
|
+
const [isRenderChild, setIsRenderChild] = useState(undefined);
|
|
803
805
|
const [isShow, setIsShow] = useState(undefined);
|
|
804
806
|
const [cssState, setCssState] = useState({
|
|
805
807
|
hidden: true
|
|
806
808
|
});
|
|
807
809
|
const transitionConainter = useRef(null);
|
|
808
810
|
useEffect(() => {
|
|
809
|
-
if (show !== undefined) {
|
|
811
|
+
if (isInit && show !== undefined) {
|
|
810
812
|
setIsShow(show);
|
|
813
|
+
if (show === true) {
|
|
814
|
+
setIsRenderChild(true);
|
|
815
|
+
}
|
|
816
|
+
}
|
|
817
|
+
if (!isInit) {
|
|
818
|
+
setIsInit(true);
|
|
811
819
|
}
|
|
812
820
|
}, [show]);
|
|
813
821
|
const nextFrame = () => {
|
|
@@ -842,6 +850,7 @@ const CssTransition = (props) => {
|
|
|
842
850
|
setCssState({ leave: true, leaveEnd: true });
|
|
843
851
|
await afterTransition(transitionConainter.current);
|
|
844
852
|
setCssState({ hidden: true });
|
|
853
|
+
setIsRenderChild(false);
|
|
845
854
|
}
|
|
846
855
|
};
|
|
847
856
|
useEffect(() => {
|
|
@@ -860,7 +869,8 @@ const CssTransition = (props) => {
|
|
|
860
869
|
(cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
|
|
861
870
|
return cssClasses.filter((css) => css).join(" ");
|
|
862
871
|
};
|
|
863
|
-
return (React.createElement(
|
|
872
|
+
return (React.createElement(React.Fragment, null, isRenderChild &&
|
|
873
|
+
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
864
874
|
};
|
|
865
875
|
|
|
866
876
|
var css_248z$B = ".Column-module_column__fcTgl {\n flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1; } }\n";
|
package/index.js
CHANGED
|
@@ -808,14 +808,22 @@ const Chip = (props) => {
|
|
|
808
808
|
|
|
809
809
|
const CssTransition = (props) => {
|
|
810
810
|
const { className, children, show } = props;
|
|
811
|
+
const [isInit, setIsInit] = React.useState(false);
|
|
812
|
+
const [isRenderChild, setIsRenderChild] = React.useState(undefined);
|
|
811
813
|
const [isShow, setIsShow] = React.useState(undefined);
|
|
812
814
|
const [cssState, setCssState] = React.useState({
|
|
813
815
|
hidden: true
|
|
814
816
|
});
|
|
815
817
|
const transitionConainter = React.useRef(null);
|
|
816
818
|
React.useEffect(() => {
|
|
817
|
-
if (show !== undefined) {
|
|
819
|
+
if (isInit && show !== undefined) {
|
|
818
820
|
setIsShow(show);
|
|
821
|
+
if (show === true) {
|
|
822
|
+
setIsRenderChild(true);
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
if (!isInit) {
|
|
826
|
+
setIsInit(true);
|
|
819
827
|
}
|
|
820
828
|
}, [show]);
|
|
821
829
|
const nextFrame = () => {
|
|
@@ -850,6 +858,7 @@ const CssTransition = (props) => {
|
|
|
850
858
|
setCssState({ leave: true, leaveEnd: true });
|
|
851
859
|
await afterTransition(transitionConainter.current);
|
|
852
860
|
setCssState({ hidden: true });
|
|
861
|
+
setIsRenderChild(false);
|
|
853
862
|
}
|
|
854
863
|
};
|
|
855
864
|
React.useEffect(() => {
|
|
@@ -868,7 +877,8 @@ const CssTransition = (props) => {
|
|
|
868
877
|
(cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
|
|
869
878
|
return cssClasses.filter((css) => css).join(" ");
|
|
870
879
|
};
|
|
871
|
-
return (React__default["default"].createElement("
|
|
880
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null, isRenderChild &&
|
|
881
|
+
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
872
882
|
};
|
|
873
883
|
|
|
874
884
|
var css_248z$B = ".Column-module_column__fcTgl {\n flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1; } }\n";
|