@aliretail/react-materials-components
Version:
212 lines (189 loc) • 9.11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Balloon from "@alifd/next/es/balloon";
import * as React from 'react';
import * as R from 'ramda';
import cx from 'classnames';
var Tooltip = _Balloon.Tooltip;
var lang = 'ZH_CN';
var isCN = ['ZH_CN', 'ZH-CN'].includes(lang && lang.toUpperCase());
var expandMsg = isCN ? '展开' : 'Expand';
export var FormHelper = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(FormHelper, _React$Component);
function FormHelper() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.state = {
labelCtRef: /*#__PURE__*/React.createRef(),
// label内容是否超出并显示省略号了
isLabelOverWidth: false
};
_this.helperRef = /*#__PURE__*/React.createRef();
_this.renderExplainInfo = function () {
var formItemCustomProps = _this.getFormItemCustomProps();
var emphasizeExplanation = formItemCustomProps.emphasizeExplanation,
showTipsExpand = formItemCustomProps.showTipsExpand,
explanation = formItemCustomProps.explanation;
return emphasizeExplanation ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "emphasize-explanation"
}, "\uFF08", explanation), /*#__PURE__*/React.createElement("div", null, showTipsExpand && _this.renderTipsBallon('expend', explanation) // <Balloon
// trigger={emphasizeTrigger}
// closable={false}
// {...explanationBallonProps}
// >
// {explanation}
// </Balloon>
, "\uFF09")) : _this.renderTipsBallon('icon', explanation);
};
return _this;
}
var _proto = FormHelper.prototype;
_proto.componentDidMount = function componentDidMount() {
this.setIsLabelOverWidth();
};
_proto.componentDidUpdate = function componentDidUpdate(preProps) {
var _preProps$props;
if ((preProps === null || preProps === void 0 ? void 0 : (_preProps$props = preProps.props) === null || _preProps$props === void 0 ? void 0 : _preProps$props.title) !== this.props.props.title) {
this.setIsLabelOverWidth();
}
} // 显示 Label title 解释信息
;
/**
* label中的 tips 气泡
* 若用户进行了 explanationBallonProps 设置，则使用用户配置 否则使用默认 ballon 配置
* @param triggerType 点击出现气泡的react node
* @param ct 气泡内容
*/
_proto.renderTipsBallon = function renderTipsBallon(triggerType, ct) {
var formItemCustomProps = this.getFormItemCustomProps();
var _formItemCustomProps$ = formItemCustomProps.explanationBallonProps,
explanationBallonProps = _formItemCustomProps$ === void 0 ? {} : _formItemCustomProps$;
var explanationIcon = /*#__PURE__*/React.createElement(_Icon, {
type: "prompt",
size: "xs",
className: "aliretail-form-label-icon-explanation"
});
var emphasizeTrigger = /*#__PURE__*/React.createElement("span", {
className: "emphasize-trigger"
}, expandMsg);
var trigger = triggerType === 'icon' ? explanationIcon : emphasizeTrigger;
var BallonNode = function BallonNode(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, explanationBallonProps ? /*#__PURE__*/React.createElement(_Balloon, _extends({
trigger: props.trigger,
closable: false
}, explanationBallonProps), props.children) : /*#__PURE__*/React.createElement(Tooltip, {
align: "t",
trigger: props.trigger
}, props.children));
};
return /*#__PURE__*/React.createElement(BallonNode, {
trigger: trigger
}, ct);
}
/**
* 获取个性化自定义参数
*/
;
_proto.getFormItemCustomProps = function getFormItemCustomProps() {
return this.props.props['retail-form-item-props'] || {};
}
/**
* 当设置了 'l' | 's' 的 inputAreaWidth 以外是否设置内容宽度样式
* @param isFixed 是否固定宽度
* @param preview 是否只读
* @param readOnly 是否只读
*/
;
_proto.isSetGetCtWidthSty = function isSetGetCtWidthSty(isFixed, preview, readOnly) {
return isFixed || !preview && !readOnly;
};
_proto.setIsLabelOverWidth = function setIsLabelOverWidth() {
var _this$state$labelCtRe = this.state.labelCtRef,
labelCtRef = _this$state$labelCtRe === void 0 ? {} : _this$state$labelCtRe;
var _labelCtRef$current = labelCtRef.current,
current = _labelCtRef$current === void 0 ? null : _labelCtRef$current;
if (current && (current === null || current === void 0 ? void 0 : current.scrollWidth) !== (current === null || current === void 0 ? void 0 : current.offsetWidth)) {
this.setState({
isLabelOverWidth: true
});
}
};
_proto.render = function render() {
var _cx;
var _this$props = this.props,
path = _this$props.path,
props = _this$props.props,
children = _this$props.children,
errors = _this$props.errors,
_this$props$editable = _this$props.editable,
editable = _this$props$editable === void 0 ? true : _this$props$editable,
schema = _this$props.schema;
var title = props.title,
_props$itemStyle = props.itemStyle,
itemStyle = _props$itemStyle === void 0 ? {} : _props$itemStyle,
required = props.required,
itemClassName = props.itemClassName,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style;
var _this$state = this.state,
labelCtRef = _this$state.labelCtRef,
isLabelOverWidth = _this$state.isLabelOverWidth;
var formItemCustomProps = this.getFormItemCustomProps();
var formItemProps = schema === null || schema === void 0 ? void 0 : schema.getExtendsComponentProps();
var _formItemProps$isPrev = formItemProps.isPreview,
isPreview = _formItemProps$isPrev === void 0 ? false : _formItemProps$isPrev;
var explanation = formItemCustomProps.explanation,
extra = formItemCustomProps.extra,
extraHighlight = formItemCustomProps.extraHighlight,
addonTextAfter = formItemCustomProps.addonTextAfter,
_formItemCustomProps$2 = formItemCustomProps.inputAreaWidth,
inputAreaWidth = _formItemCustomProps$2 === void 0 ? 'l' : _formItemCustomProps$2,
_formItemCustomProps$3 = formItemCustomProps.inputAreaWidthFixed,
inputAreaWidthFixed = _formItemCustomProps$3 === void 0 ? false : _formItemCustomProps$3;
var classes = cx((_cx = {
'aliretail-form-item': true,
'aliretail-form-item-preview': !editable,
'has-error': Array.isArray(errors) && errors.length > 0
}, _cx[itemClassName] = !!itemClassName, _cx)); // required 的符号是否显示判断
var isRequiredMarkDisplay = required && editable !== false && title !== '';
var isCtAreaHasWidthSymbol = inputAreaWidth && (inputAreaWidth === 'l' || inputAreaWidth === 's');
var ctAreaWidth = '';
if (inputAreaWidth && !isCtAreaHasWidthSymbol) {
ctAreaWidth = typeof inputAreaWidth === 'number' ? inputAreaWidth + "px" : inputAreaWidth;
}
return /*#__PURE__*/React.createElement("div", {
id: path,
style: _extends({}, itemStyle, style),
className: classes,
ref: this.helperRef
}, R.not(R.isNil(title)) && /*#__PURE__*/React.createElement("div", {
className: "aliretail-form-label"
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", {
className: cx({
'aliretail-form-required': isRequiredMarkDisplay
}),
ref: labelCtRef
}, title), isLabelOverWidth && this.renderTipsBallon('icon', title), explanation && this.renderExplainInfo(), title && editable === false && '：')), /*#__PURE__*/React.createElement("div", {
className: "aliretail-form-control " + (isCtAreaHasWidthSymbol ? "aliretail-form-control-" + inputAreaWidth : '')
}, /*#__PURE__*/React.createElement("div", {
className: "aliretail-form-control-line"
}, /*#__PURE__*/React.createElement("div", {
className: "aliretail-form-control-line-child",
style: !isCtAreaHasWidthSymbol && this.isSetGetCtWidthSty(inputAreaWidthFixed, isPreview, !editable) ? {
maxWidth: ctAreaWidth,
width: ctAreaWidth
} : {}
}, children), addonTextAfter && /*#__PURE__*/React.createElement("p", {
className: "aliretail-form-control-line-addonTextAfter"
}, addonTextAfter)), extra && /*#__PURE__*/React.createElement("div", {
className: "form-helper-extra" + (!extraHighlight ? ' disable-highlight' : '')
}, extra), errors !== null && errors !== void 0 && errors.length ? /*#__PURE__*/React.createElement("div", {
className: "aliretail-form-error"
}, errors.join(' ')) : ''));
};
return FormHelper;
}(React.Component);