choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
233 lines (206 loc) • 9.91 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
var _excluded = ["children", "useColon", "requiredMarkAlign"],
_excluded2 = ["className", "fieldClassName"];
import React, { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
import { isArrayLike } from 'mobx';
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, getPropertyDSFirst, getRequiredMarkAlign } 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';
import { ShowHelp } from '../field/enum';
import Icon from '../icon';
var Label = function Label(props) {
var children = props.children,
className = props.className,
tooltip = props.tooltip,
width = props.width,
help = props.help;
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;
} else if (isArrayLike(tooltip)) {
var tooltipType = tooltip[0];
var labelTooltipProps = tooltip[1] || {};
var duration = (labelTooltipProps.mouseEnterDelay || 0.1) * 1000;
if (tooltipType === LabelTooltip.always || tooltipType === LabelTooltip.overflow && isOverflow(currentTarget)) {
show(currentTarget, _objectSpread({
theme: getTooltipTheme('label'),
placement: getTooltipPlacement('label'),
title: labelTooltipProps.title ? labelTooltipProps.title : children
}, labelTooltipProps), duration);
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, help);
};
Label.displayName = 'Label';
var LabelHelp = function LabelHelp(props) {
var help = props.help;
var _useContext2 = useContext(ConfigContext),
getTooltipTheme = _useContext2.getTooltipTheme,
getTooltipPlacement = _useContext2.getTooltipPlacement;
var tooltipRef = useRef(false);
useEffect(function () {
return function () {
if (tooltipRef.current) {
hide();
tooltipRef.current = false;
}
};
}, []);
var handleHelpMouseEnter = useCallback(function (e, help) {
var target = e.target;
show(target, {
title: help,
theme: getTooltipTheme('help'),
placement: getTooltipPlacement('help')
});
tooltipRef.current = true;
}, []);
var handleHelpMouseLeave = useCallback(function () {
hide();
tooltipRef.current = false;
}, []);
if (help) {
return /*#__PURE__*/React.createElement(Icon, {
type: "help",
onMouseEnter: function onMouseEnter(e) {
return handleHelpMouseEnter(e, help);
},
onMouseLeave: handleHelpMouseLeave
});
}
return null;
};
LabelHelp.displayName = 'LabelHelp';
var Item = observer(function (props) {
var _useContext3 = useContext(FormContext),
getConfig = _useContext3.getConfig,
dataSet = _useContext3.dataSet,
record = _useContext3.record,
_useContext3$labelLay = _useContext3.labelLayout,
labelLayout = _useContext3$labelLay === void 0 ? getConfig('labelLayout') : _useContext3$labelLay,
labelAlign = _useContext3.labelAlign,
_useContext3$labelWid = _useContext3.labelWidth,
contextLabelWidth = _useContext3$labelWid === void 0 ? defaultLabelWidth : _useContext3$labelWid,
labelTooltip = _useContext3.labelTooltip,
useColon = _useContext3.useColon,
requiredMarkAlign = _useContext3.requiredMarkAlign,
getProPrefixCls = _useContext3.getProPrefixCls,
showHelp = _useContext3.showHelp;
var children = props.children,
_props$useColon = props.useColon,
fieldUseColon = _props$useColon === void 0 ? useColon : _props$useColon,
_props$requiredMarkAl = props.requiredMarkAlign,
fieldRequiredMarkAlign = _props$requiredMarkAl === void 0 ? requiredMarkAlign : _props$requiredMarkAl,
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);
var intlFieldOutput = child.type.displayName === 'IntlField' && fieldProps.displayOutput;
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 = getPropertyDSFirst(fieldProps, 'required', dataSet, record);
var readOnly = getProperty(fieldProps, 'readOnly', dataSet, record);
var help = getProperty(fieldProps, 'help', dataSet, record);
var isLabelShowHelp = (fieldElementProps.showHelp || showHelp || getConfig('showHelp')) === ShowHelp.label;
var isOutput = labelLayout === LabelLayout.horizontal && (child.type.displayName === 'Output' || intlFieldOutput);
var labelClassName = classNames("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-grid"), "".concat(prefixCls, "-label-").concat(labelAlign), fieldClassName, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required && !(child.type.displayName === 'Output' || intlFieldOutput)), _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), _defineProperty(_classNames, "".concat(prefixCls, "-label-required-mark-").concat(getRequiredMarkAlign(fieldRequiredMarkAlign)), labelLayout === LabelLayout.horizontal && required && !(child.type.displayName === 'Output' || intlFieldOutput) && getRequiredMarkAlign(fieldRequiredMarkAlign)), _defineProperty(_classNames, "".concat(prefixCls, "-label-help"), isLabelShowHelp), _classNames));
var wrapperClassName = classNames("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-output"), isOutput));
var tooltip = props.labelTooltip || labelTooltip;
var helpWrap = isLabelShowHelp ? /*#__PURE__*/React.createElement(LabelHelp, {
help: help
}) : undefined;
if (labelLayout === LabelLayout.vertical) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
className: labelClassName,
tooltip: tooltip,
help: helpWrap
}, 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,
help: helpWrap
}, /*#__PURE__*/React.createElement("span", null, 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