cosmo-ui
Version:
Common React components
106 lines • 7.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var web_1 = require("../web");
var doNothing = function (e) { return e.preventDefault(); };
var EXAMPLE_TRAY_KEY = 'EXAMPLE_TRAY_KEY';
var TrayExample = (function (_super) {
tslib_1.__extends(TrayExample, _super);
function TrayExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
TrayExample.prototype.renderTray = function () {
var showTrayOverflow = true;
return (React.createElement(web_1.Tray, { name: EXAMPLE_TRAY_KEY, id: "testTrayId" },
React.createElement(web_1.TrayItem, { id: "testTrayItemId", onClick: doNothing, icon: "frequency", tooltip: "Choose frequencies", stroke: true, primary: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, icon: "frequency", active: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, icon: "frequency", active: true, disabled: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, icon: "frequency", active: true, disabled: true, stroke: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, icon: "motorbike", active: true, selected: true, dynamic: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, text: "Auto", active: true, selected: true, dynamic: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, text: "Manual", dynamic: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, text: "YR", tooltip: "WO TRAINING CIRCUIT", disabled: true, active: true }),
React.createElement(web_1.TrayItem, { onClick: doNothing, text: "35", tooltip: "JUST-EAT", active: true }),
React.createElement(web_1.TrayItem, { expand: "left" }, "CS"),
showTrayOverflow ?
(React.createElement(web_1.TrayOverflow, { trayName: EXAMPLE_TRAY_KEY, align: "center", width: 435 }, Array.apply(null, { length: 20 })
.map(Number.call, Number)
.map(function (e) { return (React.createElement(web_1.TrayItem, { key: e, onClick: doNothing, text: "XX", tooltip: "WO TRAINING CIRCUIT", disabled: true, active: true })); }))) : null,
React.createElement(web_1.TrayItem, { icon: "search", input: true },
React.createElement("input", { type: "text", placeholder: "Search by job no..." })),
React.createElement(web_1.TrayItem, { icon: "line-views", secondary: true })));
};
TrayExample.prototype.render = function () {
var explode = function () { return new Promise(function (resolve) {
console.log('confirm clicked');
setTimeout(function () {
console.log('"saved"');
alert('goodbye...');
resolve(true);
}, 500);
}); };
return (React.createElement(web_1.Column, { fullWidth: true, id: "testTrayColumnId" },
this.renderTray(),
React.createElement(web_1.Column, { fullWidth: true, style: {
backgroundColor: 'white',
boxSizing: 'border-box',
padding: '20px',
} },
React.createElement(web_1.Table, { striped: true, bordered: true, hover: true, condensed: true },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null, "#"),
React.createElement("th", null, "First Name"),
React.createElement("th", null, "Last Name"),
React.createElement("th", null, "Username"))),
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", null, "1"),
React.createElement("td", null, "Mark"),
React.createElement("td", null, "Otto"),
React.createElement("td", null, "@mdo")),
React.createElement("tr", null,
React.createElement("td", null, "2"),
React.createElement("td", null, "Jacob"),
React.createElement("td", null, "Thornton"),
React.createElement("td", null, "@fat")),
React.createElement("tr", null,
React.createElement("td", null, "3"),
React.createElement("td", { colSpan: 2 }, "Larry the Bird"),
React.createElement("td", null, "@twitter")))),
React.createElement(web_1.ScrollContainer, null,
React.createElement(web_1.Card, { id: "testCardId", style: { minHeight: '3em' } }, "This is a Card"),
React.createElement(web_1.Card, { style: { minHeight: '3em' }, disabled: true }, "This is a disabled"),
React.createElement(web_1.Card, { style: { minHeight: '3em' }, active: true }, "This is an active Card"),
React.createElement(web_1.Card, { style: { minHeight: '3em' } },
"row with actionbox",
React.createElement(web_1.ActionBox, { actions: [{
className: 'expand',
icon: 'motorbike',
tooltip: 'Test',
onClick: function () { return null; },
iconProps: { rotate: 180 },
}, {
className: 'map',
icon: 'a-b',
tooltip: 'Show on the map',
onClick: function () { return null; },
disabled: true,
}] }))),
React.createElement(web_1.Text, null, "An example paragraph text"),
React.createElement(web_1.Spinner, null),
React.createElement(web_1.Button, null, "Example button"),
React.createElement(web_1.List, null,
React.createElement(web_1.ListItem, null, "foo"),
React.createElement(web_1.ListItem, null, "bar"),
React.createElement(web_1.ListItem, null, "baz"))),
React.createElement(web_1.ButtonBar, null,
React.createElement(web_1.Button, { id: "testButton1Id" }, "Button 1"),
React.createElement(web_1.Button, { disabled: true }, "Button 2"),
React.createElement(web_1.Button, null, "Button 3"))));
};
return TrayExample;
}(React.Component));
exports.TrayExample = TrayExample;
//# sourceMappingURL=tray-example.js.map