react-loading-progress
Version:
Loading display components
150 lines (147 loc) • 4.33 kB
JavaScript
var _templateObject = _taggedTemplateLiteral(["\n table {\n width: 100%;\n border-collapse: collapse;\n\n tr {\n border-bottom: 1px solid #ddd;\n }\n\n tr.tr-body:hover {\n background-color: #f5f5f5;\n }\n\n tr.tr-checked {\n background-color: #f5f5f5;\n }\n\n th {\n padding: 0.5rem;\n text-align: left;\n color: #9a9a9a;\n }\n\n td {\n padding: 0.5rem;\n text-align: left;\n }\n }\n"], ["\n table {\n width: 100%;\n border-collapse: collapse;\n\n tr {\n border-bottom: 1px solid #ddd;\n }\n\n tr.tr-body:hover {\n background-color: #f5f5f5;\n }\n\n tr.tr-checked {\n background-color: #f5f5f5;\n }\n\n th {\n padding: 0.5rem;\n text-align: left;\n color: #9a9a9a;\n }\n\n td {\n padding: 0.5rem;\n text-align: left;\n }\n }\n"]);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import React from "react";
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean, number } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import Loading from "./Loading";
var CustomTable = styled.div(_templateObject);
storiesOf("Loading2", module).addDecorator(withKnobs).add("Loading", function () {
return React.createElement(
Loading,
{ loading: boolean("loading", true) },
React.createElement(
CustomTable,
null,
React.createElement(
"table",
null,
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"id"
),
React.createElement(
"th",
null,
"name"
),
React.createElement(
"th",
null,
"description"
)
)
),
React.createElement(
"tbody",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1"
),
React.createElement(
"td",
null,
"foo"
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
"bar"
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"3"
),
React.createElement(
"td",
null,
"bar"
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"4"
),
React.createElement(
"td",
null,
"bar"
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"5"
),
React.createElement(
"td",
null,
"bar"
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("no Child", function () {
return React.createElement(Loading, { loading: boolean("loading", true) });
});