@douyinfe/semi-ui/lib/es/descriptions/item.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
import DescriptionsContext from './descriptions-context';
const prefixCls = cssClasses.PREFIX;
const keyCls = `${prefixCls}-key`;
const valCls = `${prefixCls}-value`;
export default class Item extends PureComponent {
  render() {
    const _a = this.props,
      {
        itemKey,
        hidden,
        className,
        span,
        style,
        children,
        keyStyle
      } = _a,
      rest = __rest(_a, ["itemKey", "hidden", "className", "span", "style", "children", "keyStyle"]);
    const {
      align,
      layout
    } = this.context;
    if (hidden) {
      return null;
    }
    const plainItem = /*#__PURE__*/React.createElement("td", {
      className: `${prefixCls}-item`,
      colSpan: span || 1
    }, /*#__PURE__*/React.createElement("span", {
      className: keyCls,
      style: keyStyle
    }, itemKey, ":"), /*#__PURE__*/React.createElement("span", {
      className: valCls
    }, typeof children === 'function' ? children() : children));
    const alignItem = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
      className: `${prefixCls}-item ${prefixCls}-item-th`
    }, /*#__PURE__*/React.createElement("span", {
      className: keyCls,
      style: keyStyle
    }, itemKey)), /*#__PURE__*/React.createElement("td", {
      className: `${prefixCls}-item ${prefixCls}-item-td`,
      colSpan: span ? span * 2 - 1 : 1
    }, /*#__PURE__*/React.createElement("span", {
      className: valCls
    }, typeof children === 'function' ? children() : children)));
    const item = align === 'plain' ? (/*#__PURE__*/React.createElement("tr", Object.assign({
      className: className,
      style: style
    }, getDataAttr(rest)), plainItem)) : (/*#__PURE__*/React.createElement("tr", Object.assign({
      className: className,
      style: style
    }, getDataAttr(rest)), alignItem));
    const horizontalItem = align === 'plain' ? plainItem : alignItem;
    return layout === 'horizontal' ? horizontalItem : item;
  }
}
Item.propTypes = {
  itemKey: PropTypes.node,
  hidden: PropTypes.bool,
  className: PropTypes.string,
  style: PropTypes.object,
  keyStyle: PropTypes.object
};
Item.contextType = DescriptionsContext;