function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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

import React from "react";
import PropTypes from "prop-types";
import { storiesOf } from "@storybook/react";
import { withKnobs, select } from "@storybook/addon-knobs";
import Table from "./index.js";
import Button from "../Button"; // Helper wrapper class to store the state so the stories are usable/interactive

var SortedTable =
/*#__PURE__*/
function (_React$Component) {
  _inherits(SortedTable, _React$Component);

  function SortedTable() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, SortedTable);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SortedTable)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "state", {
      tableContents: _this.props.tableContents,
      currentOrder: _this.props.currentOrder,
      currentSortedColumn: _this.props.currentSortedColumn
    });

    _defineProperty(_assertThisInitialized(_this), "handleSorting", function (columnName) {
      var _sortToggleMap;

      // If the user isn't switching sort columns, toggle the sort direction
      var sortToggleMap = (_sortToggleMap = {}, _defineProperty(_sortToggleMap, "asc", "desc"), _defineProperty(_sortToggleMap, "desc", "asc"), _sortToggleMap);
      var newOrder = "asc";

      if (_this.state.currentSortedColumn === columnName) {
        newOrder = sortToggleMap[_this.state.currentOrder];
      }

      _this.setState({
        currentOrder: newOrder,
        currentSortedColumn: columnName
      });

      if (newOrder === "asc") {
        _this.state.tableContents.sort(function (a, b) {
          return a[columnName] > b[columnName] ? 1 : -1;
        });
      } else {
        _this.state.tableContents.sort(function (b, a) {
          return a[columnName] > b[columnName] ? 1 : -1;
        });
      }
    });

    return _this;
  }

  _createClass(SortedTable, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          currentOrder = _this$state.currentOrder,
          tableContents = _this$state.tableContents;
      return React.createElement(Table, null, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, {
        sorting: {
          canSort: true,
          handleSort: function handleSort() {
            return _this2.handleSorting("Experiment");
          },
          order: currentOrder
        }
      }, "Experiment"), React.createElement(Table.TH, {
        sorting: {
          canSort: true,
          handleSort: function handleSort() {
            return _this2.handleSorting("Conversion Rate");
          },
          order: currentOrder
        }
      }, "Conversion Rate"), React.createElement(Table.TH, {
        sorting: {
          canSort: true,
          handleSort: function handleSort() {
            return _this2.handleSorting("Status");
          },
          order: currentOrder
        }
      }, "Status"))), React.createElement(Table.TBody, null, tableContents.map(function (row, idx) {
        return React.createElement(Table.TR, {
          key: idx
        }, React.createElement(Table.TD, null, row.Experiment), React.createElement(Table.TD, {
          width: "20%"
        }, row["Conversion Rate"], " "), React.createElement(Table.TD, null, " ", row.Status, " "));
      })));
    }
  }]);

  return SortedTable;
}(React.Component);

SortedTable.propTypes = {
  currentOrder: PropTypes.string,
  currentSortedColumn: PropTypes.string,
  tableContents: PropTypes.arrayOf(PropTypes.shape({
    Experiment: PropTypes.string,
    "Conversion Rate": PropTypes.string,
    Status: PropTypes.string
  }))
};
var stories = storiesOf("Data Organization|Table", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return React.createElement("div", null, React.createElement(Table, {
    density: select("density", {
      loose: "loose",
      tight: "tight"
    }, "tight"),
    tableLayoutAlgorithm: "fixed"
  }, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, " Experiment "), React.createElement(Table.TH, null, " Conversion Rate "), React.createElement(Table.TH, null, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Header CTA "), React.createElement(Table.TD, {
    width: "20%"
  }, " 12% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Shorter Contact Form "), React.createElement(Table.TD, null, " 4% "), React.createElement(Table.TD, null, " Draft ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Larger search bar "), React.createElement(Table.TD, null, " 6.7% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Center aligned headline "), React.createElement(Table.TD, null, " 9.3% "), React.createElement(Table.TD, null, " Running ")))));
}).add("Custom tr borders", function () {
  return React.createElement("div", null, React.createElement(Table, null, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, " Experiment "), React.createElement(Table.TH, null, " Conversion Rate "), React.createElement(Table.TH, null, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, {
    borderStyle: "ends",
    backgroundColor: "faint"
  }, React.createElement(Table.TD, null, " Header CTA "), React.createElement(Table.TD, null, " 12% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Shorter Contact Form "), React.createElement(Table.TD, null, " 4% "), React.createElement(Table.TD, null, " Draft ")))));
}).add("Loose & rule style", function () {
  return React.createElement("div", null, React.createElement(Table, {
    density: "loose",
    style: "rule",
    tableLayoutAlgorithm: "fixed"
  }, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, " Experiment "), React.createElement(Table.TH, {
    isNumerical: true
  }, " Conversion Rate "), React.createElement(Table.TH, null, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Header CTA "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 12% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Shorter Contact Form "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 4% "), React.createElement(Table.TD, null, " Draft ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Larger search bar "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 6.7% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Center aligned headline "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 9.3% "), React.createElement(Table.TD, null, " Running ")))));
}).add("Tight & no bottom border", function () {
  return React.createElement("div", null, React.createElement(Table, {
    density: "tight",
    style: "rule-no-bottom-border",
    tableLayoutAlgorithm: "fixed"
  }, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, "Experiment "), React.createElement(Table.TH, {
    isNumerical: true
  }, " Conversion Rate "), React.createElement(Table.TH, null, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Header CTA "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 12% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Shorter Contact Form "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 4% "), React.createElement(Table.TD, null, " Draft ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Larger search bar "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 6.7% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, null, " Center aligned headline "), React.createElement(Table.TD, {
    isNumerical: true
  }, " 9.3% "), React.createElement(Table.TD, null, " Running ")))));
}).add("Dome", function () {
  return React.createElement("div", null, React.createElement(Table, {
    density: "tight",
    style: "wall",
    tableLayoutAlgorithm: "auto"
  }, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, " Experiment "), React.createElement(Table.TH, {
    isNumerical: true,
    width: "20%"
  }, "Conversion Rate", " "), React.createElement(Table.TH, {
    isCollapsed: true
  }, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, null, React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, " Header CTA "), React.createElement(Table.TD, {
    isNumerical: true,
    verticalAlign: "middle"
  }, " ", "12%", " "), React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, React.createElement(Button, {
    size: "small",
    width: "default"
  }, " ", "Start", " "))), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, " Shorter Contact Form "), React.createElement(Table.TD, {
    isNumerical: true,
    verticalAlign: "middle"
  }, " ", "4%", " "), React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, React.createElement(Button, {
    size: "small",
    width: "default"
  }, " ", "Start", " "))), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, " Larger search bar "), React.createElement(Table.TD, {
    isNumerical: true,
    verticalAlign: "middle"
  }, " ", "6.7%", " "), React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, React.createElement(Button, {
    size: "small",
    width: "default"
  }, " ", "Start", " "))), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, " Center aligned headline "), React.createElement(Table.TD, {
    isNumerical: true,
    verticalAlign: "middle"
  }, " ", "9.3%", " "), React.createElement(Table.TD, {
    verticalAlign: "middle"
  }, React.createElement(Button, {
    size: "small",
    width: "default"
  }, " ", "Start", " "))))));
}).add("Highlighted row w/ no border (loose style)", function () {
  return React.createElement("div", null, React.createElement(Table, {
    density: "loose",
    style: "rule",
    tableLayoutAlgorithm: "fixed"
  }, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, null, " Experiment "), React.createElement(Table.TH, null, " Conversion Rate "), React.createElement(Table.TH, null, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, {
    noBorder: true
  }, React.createElement(Table.TD, null, " Header CTA "), React.createElement(Table.TD, {
    width: "20%"
  }, " 12% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, {
    noBorder: true,
    isHighlighted: true
  }, React.createElement(Table.TD, null, " Shorter Contact Form "), React.createElement(Table.TD, null, " 4% "), React.createElement(Table.TD, null, " Draft ")), React.createElement(Table.TR, {
    noBorder: true
  }, React.createElement(Table.TD, null, " Larger search bar "), React.createElement(Table.TD, null, " 6.7% "), React.createElement(Table.TD, null, " Paused ")), React.createElement(Table.TR, {
    noBorder: true
  }, React.createElement(Table.TD, null, " Center aligned headline "), React.createElement(Table.TD, null, " 9.3% "), React.createElement(Table.TD, null, " Running ")))));
}).add("Sortable table", function () {
  var currentOrder = "asc";
  var currentSortedColumn = "Experiment";
  var tableContents = [{
    Experiment: "Header CTA",
    "Conversion Rate": "12%",
    Status: "Paused"
  }, {
    Experiment: "Shorter Contact Form",
    "Conversion Rate": "4%",
    Status: "Draft"
  }, {
    Experiment: "Larger Search Bar",
    "Conversion Rate": "6.7%",
    Status: "Paused"
  }, {
    Experiment: "Center aligned headline",
    "Conversion Rate": "9.3%",
    Status: "Running"
  }]; // See top of file for implementation of a sortable table

  return React.createElement("div", null, React.createElement(SortedTable, {
    tableContents: tableContents,
    currentOrder: currentOrder,
    currentSortedColumn: currentSortedColumn
  }));
}).add("Text Alignment", function () {
  var textAlignment = select("textAlign", {
    center: "center",
    right: "right",
    left: "left"
  }, "left");
  return React.createElement("div", null, React.createElement(Table, null, React.createElement(Table.THead, null, React.createElement(Table.TR, null, React.createElement(Table.TH, {
    textAlign: textAlignment
  }, " Experiment "), React.createElement(Table.TH, {
    textAlign: textAlignment
  }, " Conversion Rate "), React.createElement(Table.TH, {
    textAlign: textAlignment
  }, " Status "))), React.createElement(Table.TBody, null, React.createElement(Table.TR, null, React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Header CTA "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " 12% "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Shorter Contact Form "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " 4% "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Draft ")), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Larger search bar "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " 6.7% "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Paused ")), React.createElement(Table.TR, null, React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Center aligned headline "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " 9.3% "), React.createElement(Table.TD, {
    textAlign: textAlignment
  }, " Running ")))));
});