var _excluded = ["columnId", "value", "percentage"],
  _excluded2 = ["columnId", "value", "percentage"],
  _excluded3 = ["columnId", "value"],
  _excluded4 = ["columnId", "country"],
  _excluded5 = ["columnId", "children"];
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 styled from 'styled-components';
import { IntlProvider } from 'react-intl';
import { DateTime, Flag, Flexbox, FlexTable, Number } from '../../..';
import docs from '../FlexTable.mdx';
export default {
  title: 'Molecules / FlexTable / With Custom Cells',
  parameters: {
    component: FlexTable,
    docs: {
      page: docs
    }
  }
};
var StyledFlexboxContainer = styled(Flexbox).withConfig({
  displayName: "WithCustomCellsstories__StyledFlexboxContainer",
  componentId: "sc-gh96k2-0"
})(["justify-content:inherit;"]);
var TruncateStartHeader = function TruncateStartHeader(_ref) {
  var children = _ref.children,
    columnId = _ref.columnId,
    flex = _ref.flex,
    currency = _ref.currency,
    justifyContent = _ref.justifyContent;
  return React.createElement(FlexTable.Header, {
    columnId: columnId,
    flex: flex,
    justifyContent: justifyContent,
    sortable: true
  }, function (_ref2) {
    var sortable = _ref2.sortable,
      sorted = _ref2.sorted,
      onSortClick = _ref2.onSortClick,
      sortOrder = _ref2.sortOrder;
    return React.createElement(FlexTable.Header.SortButton, {
      onClick: onSortClick
    }, React.createElement(StyledFlexboxContainer, {
      container: true
    }, React.createElement(FlexTable.CellInlineContainer, {
      item: true
    }, React.createElement(FlexTable.Header.TextWrapper, {
      sorted: sorted
    }, children)), React.createElement(Flexbox, {
      item: true
    }, React.createElement(FlexTable.Header.TextWrapper, {
      sorted: sorted,
      truncate: false
    }, currency)), sortable && React.createElement(Flexbox, {
      item: true
    }, React.createElement(FlexTable.Header.SortIcon, {
      sortOrder: sortOrder
    }))));
  });
};
var NumberCell = React.memo(function (_ref3) {
  var columnId = _ref3.columnId,
    value = _ref3.value,
    _ref3$percentage = _ref3.percentage,
    percentage = _ref3$percentage === void 0 ? false : _ref3$percentage,
    cellProps = _objectWithoutProperties(_ref3, _excluded);
  return React.createElement(FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.Cell.TextWrapper, null, React.createElement(Number, {
    value: value,
    percentage: percentage
  })));
});
var NumberFooter = React.memo(function (_ref4) {
  var columnId = _ref4.columnId,
    value = _ref4.value,
    _ref4$percentage = _ref4.percentage,
    percentage = _ref4$percentage === void 0 ? false : _ref4$percentage,
    cellProps = _objectWithoutProperties(_ref4, _excluded2);
  return React.createElement(FlexTable.Footer, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.Footer.TextWrapper, null, React.createElement(Number, {
    value: value,
    percentage: percentage
  })));
});
var DateCell = React.memo(function (_ref5) {
  var columnId = _ref5.columnId,
    value = _ref5.value,
    cellProps = _objectWithoutProperties(_ref5, _excluded3);
  return React.createElement(FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.Cell.TextWrapper, null, React.createElement(DateTime, {
    value: value
  })));
});
var FlagCell = React.memo(function (_ref6) {
  var columnId = _ref6.columnId,
    country = _ref6.country,
    cellProps = _objectWithoutProperties(_ref6, _excluded4);
  return React.createElement(FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.Cell.TextWrapper, null, React.createElement(Flag, {
    country: country,
    size: "s"
  })));
});
var CustomCellsStory = function CustomCellsStory() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "date"
  }, "Date"), React.createElement(TruncateStartHeader, {
    columnId: "transferable-quantity",
    flex: "0 0 150px",
    justifyContent: "flex-end",
    currency: "USD"
  }, "Transferable quantity"), React.createElement(FlexTable.Header, {
    columnId: "country"
  }, "Country"), React.createElement(FlexTable.Header, {
    columnId: "percentage",
    justifyContent: "flex-end"
  }, "Percentage")), React.createElement(FlexTable.Row, null, React.createElement(DateCell, {
    columnId: "date",
    value: 1594385610185
  }), React.createElement(NumberCell, {
    columnId: "transferable-quantity",
    value: 300,
    justifyContent: "flex-end",
    flex: "0 0 150px"
  }), React.createElement(FlagCell, {
    columnId: "country",
    country: "SE"
  }), React.createElement(NumberCell, {
    columnId: "percentage",
    value: 75,
    percentage: true,
    justifyContent: "flex-end"
  })), React.createElement(FlexTable.Row, null, React.createElement(DateCell, {
    columnId: "date",
    value: 1594385610000
  }), React.createElement(NumberCell, {
    columnId: "transferable-quantity",
    value: 100,
    justifyContent: "flex-end",
    flex: "0 0 150px"
  }), React.createElement(FlagCell, {
    columnId: "country",
    country: "NO"
  }), React.createElement(NumberCell, {
    columnId: "percentage",
    value: 25,
    percentage: true,
    justifyContent: "flex-end"
  })), React.createElement(FlexTable.FooterRow, null, React.createElement(FlexTable.Footer, {
    columnId: "date"
  }), React.createElement(NumberFooter, {
    columnId: "transferable-quantity",
    value: 400,
    justifyContent: "flex-end",
    flex: "0 0 150px"
  }), React.createElement(FlexTable.Footer, {
    columnId: "country"
  }), React.createElement(NumberFooter, {
    columnId: "percentage",
    value: 25,
    percentage: true,
    justifyContent: "flex-end"
  }))));
};
export var CustomCells = {
  render: function render() {
    return React.createElement(CustomCellsStory, null);
  }
};
var BoldCell = React.memo(function (_ref7) {
  var columnId = _ref7.columnId,
    children = _ref7.children,
    cellProps = _objectWithoutProperties(_ref7, _excluded5);
  return React.createElement(FlexTable.Cell, _extends({
    columnId: columnId
  }, cellProps), React.createElement(FlexTable.Cell.TextWrapper, {
    weight: "bold"
  }, children));
});
var BoldCellsStory = function BoldCellsStory() {
  return React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Column 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Column 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Column 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "123"), React.createElement(BoldCell, {
    columnId: "column2"
  }, "123"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "123")));
};
export var BoldCells = function BoldCells() {
  return React.createElement(BoldCellsStory, null);
};