@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
80 lines • 2.51 kB
JavaScript
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container } from '@zohodesk/components/lib/Layout';
import { mergeStyle } from '@zohodesk/utils';
import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
import cssJSLogic from "./css/cssJSLogic";
import useFreezeLayer from "../Hooks/useFreezeLayer";
import style from "./css/FreezeLayer.module.css";
export default function FreezeLayer(props) {
let {
isActive: propsActive,
children,
align,
childAnimationName,
palette,
onClick,
animationName,
runOnMount,
forwardRef,
isSvgMask,
needAutoZindex,
customStyle,
onAnimateEnter,
postAnimateStyles,
onAnimateExit
} = props;
const finalStyle = mergeStyle(style, customStyle);
const {
freezeClass
} = cssJSLogic({
props,
style: finalStyle
});
const getNextIndex = useZIndex();
const {
isActive,
isChildActive,
handleClick
} = useFreezeLayer({
isActive: propsActive,
onClick
});
return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
name: animationName && animationName,
isActive: isActive,
runOnMount: runOnMount
}, /*#__PURE__*/React.createElement("div", {
style: isActive && needAutoZindex ? {
zIndex: `${getNextIndex()}`
} : {},
className: freezeClass,
onClick: handleClick,
"data-drag-parent": true,
ref: forwardRef
}, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
name: childAnimationName,
isActive: isChildActive,
enterDelay: palette === 'plain' ? 0 : 300,
component: Container,
alignBox: "row",
align: align,
dataId: "reactFreezeLayer",
onEnterComplete: onAnimateEnter,
postEnterStyles: postAnimateStyles,
onExitComplete: onAnimateExit
}, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: align,
dataId: "reactFreezeLayer"
}, children))));
}
FreezeLayer.propTypes = propTypes;
FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
// FreezeLayer.docs = {
// componentGroup: 'Atom',
// folderName: 'General'
// };
// }