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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("./index.less");

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("../../hooks");

var _ = require("../..");

var _utils = require("../table/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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; }

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

  var _useTableContext = (0, _hooks.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 = (0, _react.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.default.createElement("div", {
    className: "jfe-drip-table-layout-card-main"
  }, props.header, /*#__PURE__*/_react.default.createElement("div", {
    className: "jfe-drip-table-layout-card-container",
    style: {
      gridTemplateColumns: "repeat(auto-fill, ".concat(width, "%)")
    }
  }, tableProps.dataSource.map(function (record) {
    return /*#__PURE__*/_react.default.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: (0, _.TABLE_LAYOUT_COLUMN_RENDER_GENERATOR_DO_NOT_USE_IN_PRODUCTION)(tableInfo, column, extraProps)
      });
    }).map(function (col) {
      var _col$render;

      return /*#__PURE__*/_react.default.createElement("div", {
        key: col.key
      }, col.title && /*#__PURE__*/_react.default.createElement("div", {
        className: "jfe-drip-table-layout-card-title"
      }, (0, _utils.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));
    }));
  })));
}

var _default = CardLayout;
exports.default = _default;