var _excluded = ["children", "columnId"];
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; }
import React from 'react';
import { Flag, FlexTable, Typography } from '../../..';
import docs from '../FlexTable.mdx';
import { StyledBackground } from './storiesShared';
export default {
  title: 'Molecules / FlexTable / With different columns',
  parameters: {
    component: FlexTable,
    docs: {
      page: docs
    }
  }
};
export var DifferentAlignmentsTable = function DifferentAlignmentsTable() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Table With Different Alignments"), React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Left"), React.createElement(FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Right"), React.createElement(FlexTable.Header, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Right"), React.createElement(FlexTable.Header, {
    columnId: "column4",
    justifyContent: "center"
  }, "Center")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 1-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 1-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 2-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 2-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 3-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 3-4"))));
};
var FlagCell = React.memo(function (_ref) {
  var children = _ref.children,
    columnId = _ref.columnId,
    cellProps = _objectWithoutProperties(_ref, _excluded);
  return React.createElement(FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.CellInlineContainer, null, React.createElement(FlexTable.Cell.TextWrapper, null, children), React.createElement(Flag, {
    country: "SE",
    size: "s"
  })));
});
export var ColumnWidthTableWithCustomFlagCell = function ColumnWidthTableWithCustomFlagCell() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Table With Different Widths and Custom Flag Cell"), React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    flex: "1",
    columnId: "column1"
  }, "Flex 1"), React.createElement(FlexTable.Header, {
    flex: "0 15%",
    columnId: "column2"
  }, "Fifteen percent"), React.createElement(FlexTable.Header, {
    flex: "0 100px",
    columnId: "column3"
  }, "Loooooooooooooong header set width"), React.createElement(FlexTable.Header, {
    columnId: "column4"
  }, "Default")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Very long cell content that should be truncated or ellipsized depending on your language preferences"), React.createElement(FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 1-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 1-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 2-2"), React.createElement(FlagCell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Long cell with flag"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 2-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 3-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 3-4"))));
};
export var ColumnWidthSortableTable = function ColumnWidthSortableTable() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Sortable Table With Column Width Set"), React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    sortable: true,
    flex: "1",
    columnId: "column1"
  }, "Flex 1"), React.createElement(FlexTable.Header, {
    sortable: true,
    flex: "0 15%",
    columnId: "column2"
  }, "Fifteen percent"), React.createElement(FlexTable.Header, {
    sortable: true,
    flex: "0 100px",
    columnId: "column3"
  }, "Loooooooooooooong header set width"), React.createElement(FlexTable.Header, {
    sortable: true,
    columnId: "column4"
  }, "Default")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Very long cell content that should be truncated or ellipsized depending on your language preferences"), React.createElement(FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 1-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 1-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 2-2"), React.createElement(FlagCell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Long cell with flag"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 2-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    flex: "1",
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    flex: "0 15%",
    columnId: "column2"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    flex: "0 100px",
    columnId: "column3"
  }, "Cell 3-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4"
  }, "Cell 3-4"))));
};
export var HiddenColumnOnXsAndSmScreens = function HiddenColumnOnXsAndSmScreens() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Hidden Column On Extra Small And Small Screens"), React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    hidden: true,
    md: {
      hidden: false
    }
  }, "Hidden on xs and sm"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 3-3"))));
};