mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
147 lines (144 loc) • 6.28 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["label", "labelStyle", "labelClassName", "contentStyle", "contentClassName", "className", "help", "helpIcon", "popoverProps", "children"],
_excluded2 = ["title", "className", "children", "colon", "dataSource", "items", "help", "helpIcon", "popoverProps"],
_excluded3 = ["dataIndex", "valueType", "valueEnum", "field", "render", "hidden", "classNames", "styles", "label", "children"],
_excluded4 = ["key", "child"];
import React, { useMemo } from 'react';
import clsx from 'classnames';
import { get, isArray, isObject, isString, isUndefined, toString } from 'ut2';
import { Popover } from 'antd-mobile';
import { QuestionCircleOutline } from 'antd-mobile-icons';
import BizField from "../BizField";
import { prefixClass } from "../../config";
import "./index.css";
var prefixCls = "".concat(prefixClass, "-descriptions");
var itemPrefixCls = "".concat(prefixCls, "-item");
var BizDescriptionsItem = function BizDescriptionsItem(_ref) {
var label = _ref.label,
labelStyle = _ref.labelStyle,
labelClassName = _ref.labelClassName,
contentStyle = _ref.contentStyle,
contentClassName = _ref.contentClassName,
className = _ref.className,
help = _ref.help,
_ref$helpIcon = _ref.helpIcon,
helpIcon = _ref$helpIcon === void 0 ? /*#__PURE__*/React.createElement(QuestionCircleOutline, null) : _ref$helpIcon,
popoverProps = _ref.popoverProps,
children = _ref.children,
restProps = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx("".concat(itemPrefixCls), className)
}, restProps), /*#__PURE__*/React.createElement("div", {
className: clsx("".concat(itemPrefixCls, "-label"), labelClassName),
style: labelStyle
}, label, help && /*#__PURE__*/React.createElement(Popover, _extends({
trigger: "click",
mode: "dark",
destroyOnHide: true
}, popoverProps, {
content: help
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(itemPrefixCls, "-label-help")
}, helpIcon))), /*#__PURE__*/React.createElement("div", {
className: clsx("".concat(itemPrefixCls, "-content"), contentClassName),
style: contentStyle
}, children));
};
var BizDescriptions = function BizDescriptions(_ref2) {
var title = _ref2.title,
className = _ref2.className,
children = _ref2.children,
_ref2$colon = _ref2.colon,
colon = _ref2$colon === void 0 ? true : _ref2$colon,
dataSource = _ref2.dataSource,
items = _ref2.items,
help = _ref2.help,
_ref2$helpIcon = _ref2.helpIcon,
helpIcon = _ref2$helpIcon === void 0 ? /*#__PURE__*/React.createElement(QuestionCircleOutline, null) : _ref2$helpIcon,
popoverProps = _ref2.popoverProps,
restProps = _objectWithoutProperties(_ref2, _excluded2);
var fmtItems = useMemo(function () {
var _ref3;
return (_ref3 = items || []) === null || _ref3 === void 0 ? void 0 : _ref3.filter(function (item) {
return !item.hidden && isObject(item);
}).map(function (item, index) {
var dataIndex = item.dataIndex,
valueType = item.valueType,
valueEnum = item.valueEnum,
field = item.field,
render = item.render,
hidden = item.hidden,
classNames = item.classNames,
styles = item.styles,
label = item.label,
itemChildren = item.children,
restItemProps = _objectWithoutProperties(item, _excluded3);
var key = isString(label) ? label + index : toString(dataIndex) + index;
var child;
if (!isUndefined(itemChildren)) {
child = itemChildren;
} else {
var _value = isArray(dataIndex) ? dataIndex.map(function (subItem) {
return get(dataSource, subItem);
}) : get(dataSource, dataIndex);
if (typeof render === 'function') {
child = render(_value, dataSource, index);
} else {
var fieldProps = typeof field === 'function' ? field(_value, dataSource, index) : field;
child =
/*#__PURE__*/
// @ts-ignore
React.createElement(BizField, _extends({
value: _value,
valueType: valueType,
valueEnum: valueEnum
}, fieldProps));
}
}
return _objectSpread({
key: key,
child: child,
label: label,
labelStyle: styles === null || styles === void 0 ? void 0 : styles.label,
contentStyle: styles === null || styles === void 0 ? void 0 : styles.content,
labelClassName: classNames === null || classNames === void 0 ? void 0 : classNames.label,
contentClassName: classNames === null || classNames === void 0 ? void 0 : classNames.content
}, restItemProps);
});
}, [dataSource, items]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-colon"), colon), className)
}, restProps), title && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-title")
}, title, help && /*#__PURE__*/React.createElement(Popover, _extends({
trigger: "click",
mode: "dark",
destroyOnHide: true
}, popoverProps, {
content: help
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-title-help")
}, helpIcon))), fmtItems.map(function (item) {
var key = item.key,
child = item.child,
restItemProps = _objectWithoutProperties(item, _excluded4);
return /*#__PURE__*/React.createElement(BizDescriptionsItem, _extends({
key: key
}, restItemProps), child);
}), children);
};
BizDescriptions.Item = BizDescriptionsItem;
/**
* @deprecated 即将废弃，请使用 `BizDescriptionsItemProps` 替代。
*/
/**
* @deprecated 即将废弃，请使用 `BizDescriptionsProps` 替代。
*/
/**
* @deprecated 即将废弃，请使用 `BizDescriptions` 替代。
*/
export var Descriptions = BizDescriptions;
export default BizDescriptions;