{"size": 2290, "ext": "js", "max_stars_repo_path": "packages/components/src/date/Wrapper.js", "max_stars_repo_name": "jeven2016/react-windy-ui", "max_stars_repo_stars_event_min_datetime": "2022-01-22T14:31:30.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-22T14:31:30.000Z", "max_issues_repo_path": "packages/components/src/date/Wrapper.js", "max_issues_repo_name": "jeven2016/react-windy-ui", "max_issues_repo_issues_event_min_datetime": "2021-06-12T05:52:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T07:03:01.000Z", "max_forks_repo_path": "packages/components/src/date/Wrapper.js", "max_forks_repo_name": "jeven2016/react-windy-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 26.6279069767, "max_line_length": 93, "alphanum_fraction": 0.6349344978}
import React, {useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
import {PopupType} from "./DateUtils";
import Popup from "../popup/Popup";
import {PopupCtrlType} from "../common/Constants";
import Modal from "../modal";
import DateInput from "./DateInput";

const Wrapper = React.forwardRef((props, ref) => {
  const {
    disabled,
    position = 'bottomLeft',
    body,
    popupType = PopupType.popup,
    zIndex = 2000,
    onPopupChange,
    ctrlRef,
    ...rest
  } = props;
  const popupRef = useRef(null);
  const [activeModal, setActiveModal] = useState(false);
  const isModalType = popupType === PopupType.modal;

  const handleInputClick = useCallback((next = true,e) => {
    if (isModalType) {
      setActiveModal(next);
      onPopupChange && onPopupChange(next);
    }
  }, [isModalType, onPopupChange]);

  const popupCtrl = useMemo(() => {
    return <DateInput ref={ctrlRef} onClick={handleInputClick} {...rest}/>;
  }, [ctrlRef, handleInputClick, rest]);

  const activePopup = useCallback((active) => {
    if (isModalType) {
      setActiveModal(active);
    } else {
      popupRef.current.changeActive(active);
    }
  }, [isModalType]);

  const isPopupActive = useCallback(
    () => {
      return isModalType ? activeModal : popupRef.current.isActive;
    }, [activeModal, isModalType]);

  const togglePopup = useCallback(() =>
      activePopup(!isPopupActive())
    , [activePopup, isPopupActive]);

  useImperativeHandle(ref, () => ({
    togglePopup
  }));

  let pickerBody;
  if (popupType === PopupType.popup) {
    //note: the popup isn't controlled since the active property isn't set
    pickerBody = <Popup
      ref={popupRef}
      disabled={disabled}
      onChange={onPopupChange}
      activeBy={PopupCtrlType.click}
      position={position}
      autoClose={false}
      ctrlNode={popupCtrl}
      body={body}
      hasBorder={false}
      hasBox={true}
      zIndex={zIndex}/>;
  } else {
    pickerBody = <>
      {popupCtrl}
      <Modal ref={popupRef} type="simple" center active={activeModal} hasDefaultWidth={false}
             onCancel={() => handleInputClick(false)}>
        <Modal.Body>
          {body}
        </Modal.Body>
      </Modal>
    </>;
  }

  return pickerBody;

});

export default Wrapper;