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

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

import _isPlainObject from "lodash/isPlainObject";
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, { isValidElement } from 'react';
import cls from 'classnames';
import PropTypes from 'prop-types';
import { strings, 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';
import Item from './item';
import DescriptionsFoundation from '@douyinfe/semi-foundation/lib/es/descriptions/foundation';
import BaseComponent from '../_base/baseComponent';
const prefixCls = cssClasses.PREFIX;
class Descriptions extends BaseComponent {
  constructor(props) {
    super(props);
    this.renderChildrenList = () => {
      const props = this.props;
      const {
        layout,
        data,
        children
      } = props;
      if (layout === 'horizontal') {
        const horizontalList = this.foundation.getHorizontalList();
        return horizontalList.map((row, index) => {
          return /*#__PURE__*/React.createElement("tr", {
            key: index
          }, row.map((item, itemIndex) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
            itemKey: item.key
          }, item, {
            key: index + '-' + itemIndex
          }), item.value) : null));
        });
      } else {
        return data && data.length ? data.map((item, index) => _isPlainObject(item) ? /*#__PURE__*/React.createElement(Item, Object.assign({
          itemKey: item.key
        }, item, {
          key: index
        }), item.value) : null) : children;
      }
    };
    this.foundation = new DescriptionsFoundation(this.adapter);
  }
  get adapter() {
    return Object.assign(Object.assign({}, super.adapter), {
      getColumns: () => {
        var _a, _b;
        if ((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.length) {
          return this.props.data;
        }
        if (this.props.children) {
          return (_b = React.Children.toArray(this.props.children)) === null || _b === void 0 ? void 0 : _b.map(item => {
            return /*#__PURE__*/isValidElement(item) ? Object.assign({
              value: item.props.children
            }, item.props) : [];
          });
        }
        return [];
      }
    });
  }
  render() {
    const _a = this.props,
      {
        align,
        row,
        size,
        className,
        style,
        children,
        data,
        layout
      } = _a,
      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data", "layout"]);
    const classNames = cls(prefixCls, className, {
      [`${prefixCls}-${align}`]: !row,
      [`${prefixCls}-double`]: row,
      [`${prefixCls}-double-${size}`]: row,
      [`${prefixCls}-horizontal`]: layout === 'horizontal',
      [`${prefixCls}-vertical`]: layout === 'vertical'
    });
    return /*#__PURE__*/React.createElement("div", Object.assign({
      className: classNames,
      style: style
    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
      value: {
        align,
        layout
      }
    }, this.renderChildrenList()))));
  }
}
Descriptions.Item = Item;
Descriptions.contextType = DescriptionsContext;
Descriptions.propTypes = {
  align: PropTypes.oneOf(strings.ALIGN_SET),
  row: PropTypes.bool,
  size: PropTypes.oneOf(strings.SIZE_SET),
  style: PropTypes.object,
  className: PropTypes.string,
  data: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.node,
    value: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    hidden: PropTypes.bool,
    className: PropTypes.string,
    style: PropTypes.object,
    span: PropTypes.number,
    keyStyle: PropTypes.object
  })),
  layout: PropTypes.oneOf(strings.LAYOUT_SET),
  column: PropTypes.number
};
Descriptions.defaultProps = {
  align: 'center',
  row: false,
  size: 'medium',
  data: [],
  layout: 'vertical',
  column: 3
};
export default Descriptions;