drip-table/es/layouts/card/index.js

A tiny and powerful enterprise-class solution for building tables.

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * This file is part of the drip-table project.
 * @link     : https://drip-table.jd.com/
 * @author   : renwenci (ararakikon@163.com)
 * @modifier : renwenci (ararakikon@163.com)
 * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
 */
import "./index.less";
import React, { useMemo } from 'react';
import { useTableContext } from "../../hooks";
import { TABLE_LAYOUT_COLUMN_RENDER_GENERATOR_DO_NOT_USE_IN_PRODUCTION as columnRenderGenerator } from "../..";
import { finalizeColumnTitle } from "../table/utils";

function CardLayout(props) {
  var _tableInfo$schema$lay, _tableInfo$schema$lay2;

  var _useTableContext = useTableContext(),
      tableProps = _useTableContext.props,
      tableInfo = _useTableContext.info,
      tableState = _useTableContext.state,
      createEvaluator = _useTableContext.createEvaluator,
      evaluate = _useTableContext.evaluate,
      safeEvaluate = _useTableContext.safeEvaluate,
      finalizeString = _useTableContext.finalizeString;

  var extraProps = {
    components: tableProps.components,
    ext: tableProps.ext,
    onEvent: tableProps.onEvent,
    onDataSourceChange: tableProps.onDataSourceChange,
    createEvaluator: createEvaluator,
    evaluate: evaluate,
    safeEvaluate: safeEvaluate,
    finalizeString: finalizeString,
    schemaFunctionPreprocessor: tableProps.schemaFunctionPreprocessor
  };
  var mergedColumns = useMemo(function () {
    var _layout$card;

    var _tableInfo$schema = tableInfo.schema,
        columns = _tableInfo$schema.columns,
        layout = _tableInfo$schema.layout;

    if (layout !== null && layout !== void 0 && (_layout$card = layout.card) !== null && _layout$card !== void 0 && _layout$card.columns) {
      var rel = columns.filter(function (col) {
        var _layout$card2;

        var cardCol = (_layout$card2 = layout.card) === null || _layout$card2 === void 0 ? void 0 : _layout$card2.columns.find(function (s) {
          return col.key === s.key;
        });

        if (cardCol) {
          return !cardCol.hideInLayout;
        }

        return true;
      }).map(function (col) {
        var _layout$card3;

        var cardCol = (_layout$card3 = layout.card) === null || _layout$card3 === void 0 ? void 0 : _layout$card3.columns.find(function (s) {
          return col.key === s.key;
        });
        return cardCol ? Object.assign({}, col, cardCol) : col;
      });
      return rel;
    }

    return columns;
  }, [tableInfo.schema]);
  var CARDSIZE = ((_tableInfo$schema$lay = tableInfo.schema.layout) === null || _tableInfo$schema$lay === void 0 ? void 0 : (_tableInfo$schema$lay2 = _tableInfo$schema$lay.card) === null || _tableInfo$schema$lay2 === void 0 ? void 0 : _tableInfo$schema$lay2.rowSize) || 0;
  var MARGIN = 2;
  var width = (100 + MARGIN) / CARDSIZE - MARGIN;
  return /*#__PURE__*/React.createElement("div", {
    className: "jfe-drip-table-layout-card-main"
  }, props.header, /*#__PURE__*/React.createElement("div", {
    className: "jfe-drip-table-layout-card-container",
    style: {
      gridTemplateColumns: "repeat(auto-fill, ".concat(width, "%)")
    }
  }, tableProps.dataSource.map(function (record) {
    return /*#__PURE__*/React.createElement("div", {
      className: "jfe-drip-table-layout-card-item"
    }, mergedColumns.filter(function (column) {
      return !column.hidable || tableState.displayColumnKeys.includes(column.key);
    }).map(function (column) {
      return _objectSpread(_objectSpread({}, column), {}, {
        render: columnRenderGenerator(tableInfo, column, extraProps)
      });
    }).map(function (col) {
      var _col$render;

      return /*#__PURE__*/React.createElement("div", {
        key: col.key
      }, col.title && /*#__PURE__*/React.createElement("div", {
        className: "jfe-drip-table-layout-card-title"
      }, finalizeColumnTitle(col)), (_col$render = col.render) === null || _col$render === void 0 ? void 0 : _col$render.call(col, null, {
        record: record,
        index: 0,
        type: 'body',
        key: '0'
      }, 0));
    }));
  })));
}

export default CardLayout;