optimizely-oui
Version:
Optimizely's Component Library.
320 lines (292 loc) • 17.3 kB
JavaScript
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 ")))));
});