"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.HiddenColumnOnXsAndSmScreens = exports.DifferentAlignmentsTable = exports.ColumnWidthTableWithCustomFlagCell = exports.ColumnWidthSortableTable = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../../..");
var _FlexTable = _interopRequireDefault(require("../FlexTable.mdx"));
var _storiesShared = require("./storiesShared");
var _excluded = ["children", "columnId"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var _default = exports.default = {
  title: 'Molecules / FlexTable / With different columns',
  parameters: {
    component: _.FlexTable,
    docs: {
      page: _FlexTable.default
    }
  }
};
var DifferentAlignmentsTable = exports.DifferentAlignmentsTable = function DifferentAlignmentsTable() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Table With Different Alignments"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Left"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Right"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Right"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column4",
    justifyContent: "center"
  }, "Center")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 1-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 1-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 2-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 2-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 3-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 3-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 3-4"))));
};
var FlagCell = _react.default.memo(function (_ref) {
  var children = _ref.children,
    columnId = _ref.columnId,
    cellProps = _objectWithoutProperties(_ref, _excluded);
  return _react.default.createElement(_.FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), _react.default.createElement(_.FlexTable.CellInlineContainer, null, _react.default.createElement(_.FlexTable.Cell.TextWrapper, null, children), _react.default.createElement(_.Flag, {
    country: "SE",
    size: "s"
  })));
});
var ColumnWidthTableWithCustomFlagCell = exports.ColumnWidthTableWithCustomFlagCell = function ColumnWidthTableWithCustomFlagCell() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Table With Different Widths and Custom Flag Cell"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    flex: "1",
    columnId: "column1"
  }, "Flex 1"), _react.default.createElement(_.FlexTable.Header, {
    flex: "0 15%",
    columnId: "column2"
  }, "Fifteen percent"), _react.default.createElement(_.FlexTable.Header, {
    flex: "0 100px",
    columnId: "column3"
  }, "Loooooooooooooong header set width"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column4"
  }, "Default")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Very long cell content that should be truncated or ellipsized depending on your language preferences"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 1-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 1-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(FlagCell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Long cell with flag"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 2-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 3-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 3-2"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 3-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 3-4"))));
};
var ColumnWidthSortableTable = exports.ColumnWidthSortableTable = function ColumnWidthSortableTable() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Sortable Table With Column Width Set"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    sortable: true,
    flex: "1",
    columnId: "column1"
  }, "Flex 1"), _react.default.createElement(_.FlexTable.Header, {
    sortable: true,
    flex: "0 15%",
    columnId: "column2"
  }, "Fifteen percent"), _react.default.createElement(_.FlexTable.Header, {
    sortable: true,
    flex: "0 100px",
    columnId: "column3"
  }, "Loooooooooooooong header set width"), _react.default.createElement(_.FlexTable.Header, {
    sortable: true,
    columnId: "column4"
  }, "Default")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Very long cell content that should be truncated or ellipsized depending on your language preferences"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 1-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 1-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(FlagCell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Long cell with flag"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 2-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 3-1"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 3-2"), _react.default.createElement(_.FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 3-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 3-4"))));
};
var HiddenColumnOnXsAndSmScreens = exports.HiddenColumnOnXsAndSmScreens = function HiddenColumnOnXsAndSmScreens() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Hidden Column On Extra Small And Small Screens"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 3-3"))));
};