@zohodesk/dot/es/deprecated/FreezeLayer/FreezeLayer.js

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

import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container } from '@zohodesk/components/lib/Layout';
import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
import style from "./_FreezeLayer.module.css";
import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
import { getDotLibraryConfig } from "../Provider/Config";
export default class FreezeLayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: props.isActive,
      isChildActive: false
    };
    this.getNextIndex = getZIndex(this);
    this.isFreezeLayerEnabled = false;
  }

  enableFreeze() {
    if (!this.isFreezeLayerEnabled) {
      this.isFreezeLayerEnabled = true;
      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
      freezeLayerEnable && freezeLayerEnable();
    }
  }

  disableFreeze() {
    if (this.isFreezeLayerEnabled) {
      this.isFreezeLayerEnabled = false;
      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
      freezeLayerDisable && freezeLayerDisable();
    }
  }

  componentDidMount() {
    let {
      isActive
    } = this.props;

    if (isActive) {
      this.setState({
        isChildActive: true
      });
      this.enableFreeze();
    }
  }

  componentDidUpdate(prevProps) {
    let {
      isActive
    } = this.props;

    if (isActive != prevProps.isActive) {
      if (isActive) {
        this.enableFreeze();
        this.setState({
          isActive: true
        }, () => {
          this.setState({
            isChildActive: true
          });
        });
      } else {
        this.disableFreeze();
        this.setState({
          isChildActive: false
        }, () => {
          this.setState({
            isActive: false
          });
        });
      }
    }
  }

  componentWillUnmount() {
    this.disableFreeze();
  }

  render() {
    let {
      children,
      align,
      childAnimationName,
      palette,
      onClick,
      animationName,
      zIndex,
      runOnMount,
      forwardRef,
      isSvgMask,
      customClass,
      needAutoZindex
    } = this.props;
    let {
      isActive,
      isChildActive
    } = this.state;
    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
      name: animationName && animationName,
      isActive: isActive,
      runOnMount: runOnMount
    }, /*#__PURE__*/React.createElement("div", {
      style: isActive && needAutoZindex ? {
        zIndex: `${this.getNextIndex()}`
      } : {},
      className: `
              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
            `,
      onClick: onClick ? onClick : null,
      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"
    }, 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'
//   };
// }