choerodon-ui/pro/es/form/Item.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "useColon"],
    _excluded2 = ["className", "fieldClassName"];
import React, { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import FormContext from './FormContext';
import { defaultLabelWidth, FIELD_SUFFIX, getProperty, normalizeLabelWidth } from './utils';
import { LabelLayout } from './enum';
import Row from '../row';
import Col from '../col';
import { Tooltip as LabelTooltip } from '../core/enum';
import { hide, show } from '../tooltip/singleton';
import isOverflow from '../overflow-tip/util';

var Label = function Label(props) {
  var children = props.children,
      className = props.className,
      tooltip = props.tooltip,
      width = props.width;

  var _useContext = useContext(ConfigContext),
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var tooltipRef = useRef(false);
  var style = useMemo(function () {
    return width ? {
      width: width
    } : undefined;
  }, [width]);
  var handleMouseEnter = useCallback(function (e) {
    var currentTarget = e.currentTarget;

    if (tooltip === LabelTooltip.always || tooltip === LabelTooltip.overflow && isOverflow(currentTarget)) {
      show(currentTarget, {
        title: children,
        theme: getTooltipTheme('label'),
        placement: getTooltipPlacement('label')
      });
      tooltipRef.current = true;
    }
  }, [children, tooltip, 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("label", {
    className: className,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    style: style
  }, children);
};

Label.displayName = 'Label';
var Item = observer(function (props) {
  var _useContext2 = useContext(FormContext),
      getConfig = _useContext2.getConfig,
      dataSet = _useContext2.dataSet,
      record = _useContext2.record,
      _useContext2$labelLay = _useContext2.labelLayout,
      labelLayout = _useContext2$labelLay === void 0 ? getConfig('labelLayout') : _useContext2$labelLay,
      labelAlign = _useContext2.labelAlign,
      _useContext2$labelWid = _useContext2.labelWidth,
      contextLabelWidth = _useContext2$labelWid === void 0 ? defaultLabelWidth : _useContext2$labelWid,
      labelTooltip = _useContext2.labelTooltip,
      useColon = _useContext2.useColon,
      getProPrefixCls = _useContext2.getProPrefixCls;

  var children = props.children,
      _props$useColon = props.useColon,
      fieldUseColon = _props$useColon === void 0 ? useColon : _props$useColon,
      rest = _objectWithoutProperties(props, _excluded);

  var child = Children.only(children);

  if ( /*#__PURE__*/isValidElement(child)) {
    var _classNames;

    var prefixCls = getProPrefixCls(FIELD_SUFFIX);
    var childrenProps = child.props;

    var className = childrenProps.className,
        fieldClassName = childrenProps.fieldClassName,
        otherProps = _objectWithoutProperties(childrenProps, _excluded2);

    var fieldProps = _objectSpread(_objectSpread({}, rest), otherProps);

    var fieldElementProps = _objectSpread({
      className: classNames(props.className, className, prefixCls)
    }, fieldProps);

    if ([LabelLayout.none, LabelLayout["float"], LabelLayout.placeholder].includes(labelLayout)) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-wrapper")
      }, /*#__PURE__*/cloneElement(child, fieldElementProps));
    }

    var label = getProperty(fieldProps, 'label', dataSet, record);
    var required = getProperty(fieldProps, 'required', dataSet, record);
    var readOnly = getProperty(fieldProps, 'readOnly', dataSet, record);
    var isOutput = labelLayout === LabelLayout.horizontal && child.type.displayName === 'Output';
    var labelClassName = classNames("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-").concat(labelAlign), fieldClassName, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required), _defineProperty(_classNames, "".concat(prefixCls, "-readonly"), readOnly), _defineProperty(_classNames, "".concat(prefixCls, "-label-vertical"), labelLayout === LabelLayout.vertical), _defineProperty(_classNames, "".concat(prefixCls, "-label-output"), isOutput), _defineProperty(_classNames, "".concat(prefixCls, "-label-useColon"), label && fieldUseColon), _classNames));
    var wrapperClassName = classNames("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-output"), isOutput));
    var tooltip = props.labelTooltip || labelTooltip;

    if (labelLayout === LabelLayout.vertical) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
        className: labelClassName,
        tooltip: tooltip
      }, label), /*#__PURE__*/React.createElement("div", {
        className: wrapperClassName
      }, /*#__PURE__*/cloneElement(child, fieldElementProps)));
    }

    var fieldLabelWidth = getProperty(fieldProps, 'labelWidth', dataSet, record);
    var columnLabelWidth = normalizeLabelWidth(contextLabelWidth, 1)[0];
    var labelWidth = columnLabelWidth === 'auto' ? undefined : Math.max(columnLabelWidth, isNaN(fieldLabelWidth) ? 0 : fieldLabelWidth);
    return /*#__PURE__*/React.createElement(Row, {
      className: "".concat(prefixCls, "-row")
    }, /*#__PURE__*/React.createElement(Col, {
      className: "".concat(prefixCls, "-col")
    }, /*#__PURE__*/React.createElement(Label, {
      className: labelClassName,
      width: labelWidth,
      tooltip: tooltip
    }, label)), /*#__PURE__*/React.createElement(Col, {
      className: "".concat(prefixCls, "-col ").concat(prefixCls, "-col-control")
    }, /*#__PURE__*/React.createElement("div", {
      className: wrapperClassName
    }, /*#__PURE__*/cloneElement(child, fieldElementProps))));
  }

  if (child) {
    return child;
  }

  return null;
});
Item.displayName = 'FormItem';
Item.__PRO_FORM_ITEM = true;
export default Item;
//# sourceMappingURL=Item.js.map