choerodon-ui/pro/es/output/MultiLine.js

An enterprise-class UI design language and React-based implementation

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { memo, useCallback, useContext, useEffect, useRef } from 'react';
import classNames from 'classnames';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { hide, show } from '../tooltip/singleton';
import Row from '../row';
import Col from '../col';
import { Tooltip as TextTooltip } from '../core/enum';
import isOverflow from '../overflow-tip/util';

var MultiLine = function MultiLine(props) {
  var _useContext = useContext(ConfigContext),
      getTooltip = _useContext.getTooltip,
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var prefixCls = props.prefixCls,
      label = props.label,
      validationMessage = props.validationMessage,
      required = props.required,
      validationHidden = props.validationHidden,
      _props$tooltip = props.tooltip,
      tooltip = _props$tooltip === void 0 ? getTooltip('output') : _props$tooltip,
      labelTooltip = props.labelTooltip,
      children = props.children;
  var tooltipRef = useRef(false);
  var handleLabelMouseEnter = useCallback(function (e) {
    var currentTarget = e.currentTarget;

    if (labelTooltip === TextTooltip.always || labelTooltip === TextTooltip.overflow && isOverflow(currentTarget)) {
      show(currentTarget, {
        title: label,
        placement: 'right'
      });
      tooltipRef.current = true;
    }
  }, [label, labelTooltip, tooltipRef]);
  var handleFieldMouseEnter = useCallback(function (e) {
    var currentTarget = e.currentTarget;

    if (validationMessage) {
      show(currentTarget, {
        title: validationMessage,
        placement: getTooltipPlacement('validation') || 'bottomLeft',
        theme: getTooltipTheme('validation')
      });
      tooltipRef.current = true;
    } else if (tooltip === TextTooltip.always || tooltip === TextTooltip.overflow && isOverflow(currentTarget)) {
      show(currentTarget, {
        title: children,
        placement: 'right'
      });
      tooltipRef.current = true;
    }
  }, [tooltip, validationMessage, children, tooltipRef]);
  var handleMouseLeave = useCallback(function () {
    if (tooltipRef.current) {
      hide();
      tooltipRef.current = false;
    }
  }, [tooltipRef]);
  useEffect(function () {
    return function () {
      if (tooltipRef.current) {
        hide();
        tooltipRef.current = false;
      }
    };
  }, [tooltipRef]);
  return /*#__PURE__*/React.createElement(Row, {
    className: "".concat(prefixCls, "-multi")
  }, label && /*#__PURE__*/React.createElement(Col, {
    span: 8,
    className: classNames("".concat(prefixCls, "-multi-label"), _defineProperty({}, "".concat(prefixCls, "-multi-label-required"), required)),
    onMouseEnter: handleLabelMouseEnter,
    onMouseLeave: handleMouseLeave
  }, label), /*#__PURE__*/React.createElement(Col, {
    span: label ? 16 : 24,
    className: classNames("".concat(prefixCls, "-multi-value"), _defineProperty({}, "".concat(prefixCls, "-multi-value-invalid"), !validationHidden)),
    onMouseEnter: handleFieldMouseEnter,
    onMouseLeave: handleMouseLeave
  }, children));
};

MultiLine.displayName = 'MultiLine';
export default /*#__PURE__*/memo(MultiLine);
//# sourceMappingURL=MultiLine.js.map