@wix/design-system/dist/cjs/Table/DataTable/docs/ExampleWithAnimatedRowDetails.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require(".."));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/DataTable/docs/ExampleWithAnimatedRowDetails.jsx",
  _this = void 0;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var style = {
  width: '966px'
};
var baseData = [{
  firstName: 'Meghan',
  lastName: 'Bishop'
}, {
  firstName: 'Sara',
  lastName: 'Porter'
}, {
  firstName: 'Deborah',
  lastName: 'Rhodes'
}, {
  firstName: 'Walter',
  lastName: 'Jenning'
}];
var generateData = function generateData() {
  var data = [];
  for (var i = 0; i < 2; i++) {
    data = data.concat(baseData);
  }
  return data;
};
var MyRowDetailsComponent = function MyRowDetailsComponent(props) {
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      padding: '9px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement("h2", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 7
    }
  }, "User Details"), /*#__PURE__*/_react["default"].createElement("p", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26,
      columnNumber: 7
    }
  }, "First name: ", props.firstName), /*#__PURE__*/_react["default"].createElement("p", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 27,
      columnNumber: 7
    }
  }, "Last name: ", props.lastName));
};
var ExampleWithAnimatedRowDetails = /*#__PURE__*/function (_React$Component) {
  function ExampleWithAnimatedRowDetails() {
    (0, _classCallCheck2["default"])(this, ExampleWithAnimatedRowDetails);
    return _callSuper(this, ExampleWithAnimatedRowDetails, arguments);
  }
  (0, _inherits2["default"])(ExampleWithAnimatedRowDetails, _React$Component);
  return (0, _createClass2["default"])(ExampleWithAnimatedRowDetails, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: style,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 35,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_["default"], {
        dataHook: "story-data-table",
        data: generateData(),
        rowDetails: function rowDetails(row) {
          return /*#__PURE__*/_react["default"].createElement(MyRowDetailsComponent, (0, _extends2["default"])({}, row, {
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 39,
              columnNumber: 30
            }
          }));
        },
        rowDetailsAnimation: true,
        allowMultiDetailsExpansion: true,
        columns: [{
          title: 'Row Number',
          render: function render(row, rowNum) {
            return '#' + (rowNum + 1);
          },
          width: '20%',
          important: true
        }, {
          title: 'First Name',
          render: function render(row) {
            return /*#__PURE__*/_react["default"].createElement("span", {
              __self: _this2,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 51,
                columnNumber: 30
              }
            }, row.firstName);
          },
          width: '40%'
        }, {
          title: 'Last Name',
          render: function render(row) {
            return /*#__PURE__*/_react["default"].createElement("span", {
              __self: _this2,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 56,
                columnNumber: 30
              }
            }, row.lastName);
          },
          width: '40%'
        }],
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 36,
          columnNumber: 9
        }
      }));
    }
  }]);
}(_react["default"].Component);
var _default = exports["default"] = ExampleWithAnimatedRowDetails;