react-loading-progress
Version:
Loading display components
945 lines (936 loc) • 22.5 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 Loading2 from "./Loading/Loading";
import Loading from "./Loading";
import Progress from "./Progress/Connected";
import Ripple from "./Ripple";
import Fade from "./Fade";
import Rolling from "./Rolling.svg";
import Bubble from "./Bubble.svg";
import Fountain from "./Fountain.svg";
import Spinner from "./Spinner";
import { ProgressItem, ProgressUpdateItem, DefaultProgress } from "./Customize";
var CustomTable = styled.div(_templateObject);
storiesOf("Customize", module).addDecorator(withKnobs).add("DefaultProgress", function () {
return React.createElement(DefaultProgress, null);
});
storiesOf("Icon", module).addDecorator(withKnobs).add("Spinner", function () {
return React.createElement(Spinner, null);
});
storiesOf("Fade", module).addDecorator(withKnobs).add("Fade", function () {
return React.createElement(Fade, { width: 300, height: 200, fadeOut: boolean("fadeOut", true) });
});
storiesOf("Ripple", module).addDecorator(withKnobs).add("Ripple", function () {
return React.createElement(Ripple, { width: 100, height: 25 });
});
storiesOf("Loading", module).addDecorator(withKnobs).add("Loading", function () {
return React.createElement(
Loading,
{ loading: boolean("loading", true) },
React.createElement(
Progress,
null,
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"
)
)
)
)
)
)
);
}).add("Loading with mask", function () {
return React.createElement(
Loading,
{ loading: boolean("loading", true) },
React.createElement(
Progress,
{ mask: 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"
)
)
)
)
)
)
);
}).add("Loading with error", function () {
return React.createElement(
Loading,
{
loading: boolean("loading", false),
error: boolean("error", false)
},
React.createElement(
Progress,
null,
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"
)
)
)
)
)
)
);
}).add("item Loading", function () {
return React.createElement(
Loading,
{
loading: boolean("loading", false),
error: boolean("error", false)
},
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,
React.createElement(
Progress,
{
placement: "left",
errorNoChild: true,
errorText: "Error!! update",
center: true
},
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
Progress,
{
placement: "left",
errorNoChild: true,
errorText: "Error!! update",
center: true
},
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Loading with noChild", 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,
React.createElement(
ProgressItem,
null,
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
ProgressItem,
null,
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Loading with ripple effect", function () {
return React.createElement(
Loading,
{ loading: boolean("loading", false) },
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,
React.createElement(
ProgressItem,
{ ripple: true },
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
ProgressItem,
{ ripple: true },
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Update", function () {
return React.createElement(
Loading,
{ loading: boolean("loading", false) },
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,
React.createElement(
ProgressUpdateItem,
{ ripple: true },
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
ProgressUpdateItem,
{ ripple: true },
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Default loading", function () {
return React.createElement(
"div",
{
style: {
width: "600px",
height: "1200px",
border: "medium solid #eee"
}
},
React.createElement(
Loading,
{ loading: boolean("loading", true) },
React.createElement(Progress, { size: 0.75 })
)
);
});
storiesOf("Example customize icon", module).addDecorator(withKnobs).add("Rolling", function () {
return React.createElement(
Loading,
{
icon: React.createElement("img", { src: Rolling, alt: "loading" }),
loading: boolean("loading", true)
},
React.createElement(
Progress,
null,
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"
)
)
)
)
)
)
);
}).add("Bubble", function () {
return React.createElement(
Loading,
{
icon: React.createElement("img", { src: Bubble, alt: "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,
React.createElement(
Progress,
{ placement: "left", noChild: true, size: 1 },
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
Progress,
{ placement: "left", noChild: true, size: 1 },
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Fountain", function () {
return React.createElement(
Loading,
{
icon: React.createElement("img", { src: Fountain, alt: "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,
React.createElement(
Progress,
{ placement: "left", noChild: true, size: 0.75, widthSize: 6 },
"foo"
)
),
React.createElement(
"td",
null,
"baz"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"2"
),
React.createElement(
"td",
null,
React.createElement(
Progress,
{ placement: "left", noChild: true, size: 0.75, widthSize: 6 },
"bar"
)
),
React.createElement(
"td",
null,
"baz"
)
)
)
)
)
);
}).add("Default Fountain", function () {
return React.createElement(
"div",
{
style: {
width: "600px",
height: "200px",
border: "medium solid #eee"
}
},
React.createElement(
Loading,
{
icon: React.createElement("img", { src: Fountain, alt: "loading" }),
loading: boolean("loading", true)
},
React.createElement(Progress, { size: 0.5, heightSize: 0.2, widthSize: 3.5 })
)
);
});