@zohodesk/dot/lib/FreezeLayer/FreezeLayer.js

In this Library, we Provide Some Basic Components to Build Your Application

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = FreezeLayer;

var _react = _interopRequireDefault(require("react"));

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _Layout = require("@zohodesk/components/lib/Layout");

var _utils = require("@zohodesk/utils");

var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));

var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");

var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));

var _useFreezeLayer2 = _interopRequireDefault(require("../Hooks/useFreezeLayer"));

var _FreezeLayerModule = _interopRequireDefault(require("./css/FreezeLayer.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function FreezeLayer(props) {
  var propsActive = props.isActive,
      children = props.children,
      align = props.align,
      childAnimationName = props.childAnimationName,
      palette = props.palette,
      onClick = props.onClick,
      animationName = props.animationName,
      runOnMount = props.runOnMount,
      forwardRef = props.forwardRef,
      isSvgMask = props.isSvgMask,
      needAutoZindex = props.needAutoZindex,
      customStyle = props.customStyle,
      onAnimateEnter = props.onAnimateEnter,
      postAnimateStyles = props.postAnimateStyles,
      onAnimateExit = props.onAnimateExit;
  var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);

  var _cssJSLogic = (0, _cssJSLogic2["default"])({
    props: props,
    style: finalStyle
  }),
      freezeClass = _cssJSLogic.freezeClass;

  var getNextIndex = (0, _ZindexProvider.useZIndex)();

  var _useFreezeLayer = (0, _useFreezeLayer2["default"])({
    isActive: propsActive,
    onClick: onClick
  }),
      isActive = _useFreezeLayer.isActive,
      isChildActive = _useFreezeLayer.isChildActive,
      handleClick = _useFreezeLayer.handleClick;

  return /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
    name: animationName && animationName,
    isActive: isActive,
    runOnMount: runOnMount
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: isActive && needAutoZindex ? {
      zIndex: "".concat(getNextIndex())
    } : {},
    className: freezeClass,
    onClick: handleClick,
    "data-drag-parent": true,
    ref: forwardRef
  }, children && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, childAnimationName ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
    name: childAnimationName,
    isActive: isChildActive,
    enterDelay: palette === 'plain' ? 0 : 300,
    component: _Layout.Container,
    alignBox: "row",
    align: align,
    dataId: "reactFreezeLayer",
    onEnterComplete: onAnimateEnter,
    postEnterStyles: postAnimateStyles,
    onExitComplete: onAnimateExit
  }, children) : isSvgMask ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    alignBox: "row",
    align: align,
    dataId: "reactFreezeLayer"
  }, children))));
}

FreezeLayer.propTypes = _propTypes.propTypes;
FreezeLayer.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
//   FreezeLayer.docs = {
//     componentGroup: 'Atom',
//     folderName: 'General'
//   };
// }