@zohodesk/dot/es/lookup/Lookup/Lookup.js

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

/*** Libraries ***/
import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/*** Components ***/

import FreezeLayer from "../../FreezeLayer/FreezeLayer";
import { Container } from '@zohodesk/components/lib/Layout';
/*** CSS ***/

import style from "./Lookup.module.css";
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
/*eslint-disable react/forbid-component-props */

export default class Lookup extends Component {
  constructor(props) {
    super(props);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.createRef = /*#__PURE__*/React.createRef();
  }

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

    if (prevProps.isActive !== isActive) {
      isActive ? document.addEventListener('keydown', this.handleKeyDown) : document.removeEventListener('keydown', this.handleKeyDown);
    }
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  handleKeyDown(e) {
    const {
      onKeyDown
    } = this.props;
    onKeyDown && onKeyDown(e);
  }

  render() {
    const {
      isActive,
      children,
      size,
      dataId,
      forwardRef,
      onClick,
      customClass,
      htmlId,
      a11y,
      childAnimationName,
      onClose,
      needFocusScope,
      customProps,
      isMinHeight,
      lookupClass
    } = this.props;
    const {
      role = 'dialog',
      ariaLabelledby,
      ariaDescribedby,
      ariaLabel,
      ariaModal = isActive ? true : undefined,
      ...a11yAttributes
    } = a11y;
    const {
      focusScopeProps = {}
    } = customProps;
    const {
      needAutoFocus = true,
      needRestoreFocus = true,
      needListNavigation = false,
      needFocusLoop = true,
      needEnterAction = true
    } = focusScopeProps;
    const content = /*#__PURE__*/React.createElement("div", {
      ref: this.createRef,
      tabIndex: "-1",
      "data-a11y-need-focus-style": "false",
      role: role,
      "aria-labelledby": ariaLabelledby,
      "aria-describedby": ariaDescribedby,
      "aria-label": ariaLabel,
      "aria-modal": ariaModal,
      id: htmlId,
      className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
      "data-id": dataId,
      "data-test-id": dataId,
      ...a11yAttributes
    }, /*#__PURE__*/React.createElement(Container, {
      "data-drag-container": "true",
      isCover: false,
      className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`
    }, children));
    return /*#__PURE__*/React.createElement(FreezeLayer, {
      align: "horizontal",
      animationName: "fade",
      childAnimationName: childAnimationName,
      isActive: isActive,
      palette: "snow",
      forwardRef: forwardRef,
      onClick: onClick,
      customClass: customClass
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      className: style.container,
      dataId: "fldValue"
    }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
      needFocusLoop: needFocusLoop,
      needListNavigation: needListNavigation,
      elementRef: this.createRef,
      needAutoFocus: needAutoFocus,
      needRestoreFocus: needRestoreFocus,
      onClose: onClose,
      needEnterAction: needEnterAction
    }, content) : content));
  }

}
Lookup.propTypes = propTypes;
Lookup.defaultProps = defaultProps; // if (__DOCS__) {
//   Lookup.docs = {
//     componentGroup: 'Lookup'
//   };
// }