retabler
Version:
React Component library via Tabler
1,067 lines (1,006 loc) • 205 kB
JavaScript
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
import React__default, { createElement, useRef, useEffect, createContext, Component } from 'react';
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
function getCjsExportFromNamespace (n) {
return n && n['default'] || n;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
var Alert = function (_a) {
var children = _a.children, className = _a.className, _b = _a.dismiss, dismiss = _b === void 0 ? true : _b, style = _a.style, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c;
var _d = React__default.useState(visible), isVisible = _d[0], setVisible = _d[1];
if (!isVisible) {
return null;
}
var classes = classnames("alert", "alert-" + variant, {
"alert-dismissible": dismiss,
}, className);
var onClick = function (e) {
setVisible(false);
e.preventDefault();
};
return (React__default.createElement("div", { className: classes, style: style, role: "alert" },
dismiss && (React__default.createElement("a", { href: "#", className: "close", "data-dismiss": "alert", "aria-label": "close", onClick: onClick }, "\u00D7")),
children));
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
var AvatarList = function (_a) {
var children = _a.children, className = _a.className, _b = _a.stacked, stacked = _b === void 0 ? false : _b;
var classes = classnames("avatar-list", { "avatar-list-stacked": stacked }, className);
return createElement("div", { className: classes }, children);
};
var Avatar = function (_a) {
var _b;
var children = _a.children, className = _a.className, imageURL = _a.imageURL, shape = _a.shape, style = _a.style, size = _a.size, status = _a.status, color = _a.color;
var classes = classnames((_b = {
avatar: true
},
_b[shape] = true,
_b["avatar-" + size] = !!size,
_b["bg-" + color + "-lt"] = !!color,
_b), className);
var styles = imageURL
? __assign(__assign({}, style), { backgroundImage: "url(" + imageURL + ")" }) : style;
return (createElement("span", { className: classes, style: styles },
status && createElement("span", { className: "badge bg-" + status }),
children));
};
Avatar.List = AvatarList;
var Addon = function (_a) {
var _b;
var children = _a.children, color = _a.color;
var classes = classnames("badge-addon", (_b = {}, _b["bg-" + color] = color, _b));
return createElement("span", { className: classes }, children);
};
var Avatar$1 = function (_a) {
var children = _a.children, imageURL = _a.imageURL, _b = _a.style, style = _b === void 0 ? {} : _b;
return (createElement("span", { className: "badge-avatar", style: __assign(__assign({}, style), { backgroundImage: "url(" + imageURL + ")" }) }, children));
};
var Badge = function (_a) {
var _b;
var className = _a.className, children = _a.children, _c = _a.pill, pill = _c === void 0 ? false : _c, _d = _a.soft, soft = _d === void 0 ? false : _d, style = _a.style, color = _a.color, variant = _a.variant, _e = _a.link, link = _e === void 0 ? null : _e;
var classes = classnames((_b = {
badge: true,
"badge-pill": pill
},
_b["bg-" + variant] = !!variant,
_b[!soft ? "bg-" + color : "bg-" + color + "-lt"] = color,
_b), className);
if (link) {
return (createElement("a", { className: classes, href: link }, children));
}
return (createElement("span", { style: style, className: classes }, children));
};
Badge.Addon = Addon;
Badge.Avatar = Avatar$1;
var BreadcrumbItem = function (_a) {
var children = _a.children, className = _a.className, active = _a.active;
var classes = classnames("breadcrumb-item", { active: active }, className);
var props = {};
if (active) {
props["aria-current"] = "page";
}
return (React__default.createElement("li", __assign({ className: classes }, props), children));
};
var Breadcrumb = function (_a) {
var children = _a.children, className = _a.className, type = _a.type, _b = _a.alternate, alternate = _b === void 0 ? false : _b;
var classes = classnames("breadcrumb", {
"breadcrumb-dots": type === "dots",
"breadcrumb-arrows": type === "arrows",
"breadcrumb-bullets": type === "bullets",
"breadcrumb-alternate": alternate,
}, className);
return (React__default.createElement("ol", { className: classes, "aria-label": "breadcrumbs" }, children));
};
Breadcrumb.Item = BreadcrumbItem;
var List = function (_a) {
var className = _a.className, children = _a.children;
var classes = classnames("btn-list", className);
return React__default.createElement("div", { className: classes }, children);
};
var getClassName = function (_a) {
var _b;
var size = _a.size, block = _a.block, variant = _a.variant, outline = _a.outline, link = _a.link, disabled = _a.disabled, color = _a.color, pill = _a.pill, icon = _a.icon, loading = _a.loading, square = _a.square, social = _a.social, className = _a.className, ghost = _a.ghost;
var classes = classnames((_b = {
btn: true
},
_b["btn-ghost-" + variant] = ghost,
_b["btn-" + size] = !!size,
_b["btn-block"] = block,
_b["btn-outline-" + variant] = outline && !!variant,
_b["btn-link"] = link,
_b.disabled = disabled,
_b["btn-" + social] = !!social,
_b["btn-" + color] = !!color && !outline,
_b["btn-" + variant] = !!variant && !outline,
_b["btn-square"] = square,
_b["btn-pill"] = pill,
_b["btn-icon"] = icon,
_b["btn-loading"] = loading,
_b), className);
return classes;
};
var Anchor = React__default.forwardRef(function (props, ref) {
var classes = getClassName(props);
return (React__default.createElement("a", __assign({ ref: ref }, props, { className: classes }), props.children));
});
var Input = React__default.forwardRef(function (props, ref) {
var classes = getClassName(props);
return React__default.createElement("input", __assign({ type: "button", ref: ref }, props, { className: classes }));
});
var Button = React__default.forwardRef(function (props, ref) {
var classes = getClassName(props);
return (React__default.createElement("button", __assign({ ref: ref }, props, { className: classes }), props.children));
});
var Buttons = function () { };
Buttons.Anchor = Anchor;
Buttons.Button = Button;
Buttons.Input = Input;
Buttons.List = List;
function CardOptions(_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-options", className);
return createElement("div", { className: classes }, children);
}
function CardStatus(_a) {
var _b;
var color = _a.color, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
var classes = classnames((_b = {
"card-status": true
},
_b["bg-" + color] = true,
_b["card-status-top"] = top,
_b["card-status-right"] = right,
_b["card-status-bottom"] = bottom,
_b["card-status-left"] = left,
_b));
return createElement("div", { className: classes });
}
function CardHeader(_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-header", className);
return createElement("div", { className: classes }, children);
}
var CardTitle = function (_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-title", className);
return createElement("h3", { className: classes }, children);
};
var CardSubtitle = function (_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-subtitle", className);
return createElement("div", { className: classes }, children);
};
var Loading = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "dimmer active" },
React__default.createElement("div", { className: "loader" }),
React__default.createElement("div", { className: "dimmer-content" }, children)));
};
function CardBody(_a) {
var className = _a.className, children = _a.children, style = _a.style, _b = _a.loading, loading = _b === void 0 ? false : _b;
var classes = classnames("card-body", className);
return (React__default.createElement("div", { className: classes, style: style }, loading ? React__default.createElement(Loading, null, children) : children));
}
function CardFooter(_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-footer", className);
return React__default.createElement("div", { className: classes }, children);
}
function CardGroup(_a) {
var className = _a.className, children = _a.children;
var classes = classnames("card-group", className);
return React__default.createElement("div", { className: classes }, children);
}
var CardImage = function (_a) {
var className = _a.className, top = _a.top, bottom = _a.bottom, props = __rest(_a, ["className", "top", "bottom"]);
var classes = classnames({ "card-img-bottom": bottom, "card-img-top": top }, className);
return React__default.createElement("img", __assign({ className: classes }, props));
};
var Card = function (_a) {
var _b;
var className = _a.className, children = _a.children, aside = _a.aside, active = _a.active, inactive = _a.inactive, stacked = _a.stacked, size = _a.size, style = _a.style;
var classes = classnames("card", (_b = {
aside: aside,
"card-active": active,
"card-inactive": inactive
},
_b["card-" + size] = size,
_b["card-stacked"] = stacked,
_b), className);
return (React__default.createElement("div", { className: classes, style: style }, children));
};
Card.Header = CardHeader;
Card.Title = CardTitle;
Card.Subtitle = CardSubtitle;
Card.Body = CardBody;
Card.Footer = CardFooter;
Card.Options = CardOptions;
Card.Status = CardStatus;
Card.Group = CardGroup;
Card.Image = CardImage;
var CarouselItem = function (_a) {
var active = _a.active, children = _a.children, src = _a.src, style = _a.style;
var classes = classnames("carousel-item", { active: active });
return (React__default.createElement("div", { className: classes },
React__default.createElement("img", { className: "d-block w-100", src: src, "data-holder-rendered": "true", style: style }),
React__default.createElement("div", { className: "carousel-caption" }, children)));
};
var Carousel = function (_a) {
var children = _a.children, _b = _a.interval, interval = _b === void 0 ? 5000 : _b, _c = _a.slide, slide = _c === void 0 ? true : _c, _d = _a.controls, controls = _d === void 0 ? true : _d, _e = _a.indicators, indicators = _e === void 0 ? true : _e;
var _f = React__default.useState(0), current = _f[0], setCurrent = _f[1];
var slides = children.length;
var previous = current === 0 ? slides - 1 : current - 1;
var next = current === slides - 1 ? 0 : current + 1;
var indicatorChildren = Array.from(Array(slides).keys()).map(function (i) {
var props = {
className: current === i ? "active" : "",
onClick: function () { return setCurrent(i); },
};
return React__default.createElement("li", __assign({ key: "indicator-" + i }, props));
});
if (slide) {
React__default.useEffect(function () {
var slideDelay = setInterval(function () { return setCurrent(next); }, interval);
return function () {
clearTimeout(slideDelay);
};
});
}
var onNext = function (e) {
e.preventDefault();
setCurrent(next);
};
var onPrevious = function (e) {
e.preventDefault();
setCurrent(previous);
};
return (React__default.createElement("div", { className: "carousel slide", "data-ride": "carousel" },
indicators && (React__default.createElement("ol", { className: "carousel-indicators" }, indicatorChildren)),
React__default.createElement("div", { className: "carousel-inner" }, children.map(function (child, i) {
return React__default.cloneElement(child, {
active: i === current,
});
})),
controls && (React__default.createElement(React__default.Fragment, null,
React__default.createElement("a", { className: "carousel-control-prev", role: "button", href: "#", onClick: onPrevious },
React__default.createElement("span", { "aria-hidden": "true", className: "carousel-control-prev-icon" }),
React__default.createElement("span", { className: "sr-only" }, "Previous")),
React__default.createElement("a", { className: "carousel-control-next", role: "button", href: "#", onClick: onNext },
React__default.createElement("span", { "aria-hidden": "true", className: "carousel-control-next-icon" }),
React__default.createElement("span", { className: "sr-only" }, "Next"))))));
};
Carousel.Item = CarouselItem;
var NavContext = React__default.createContext({
menuVisible: false,
});
var Toggle = function () {
var _a = React__default.useContext(NavContext), menuVisible = _a.menuVisible, setMenuVisible = _a.setMenuVisible;
var onClick = function (e) {
setMenuVisible(!menuVisible);
e.preventDefault();
};
return (React__default.createElement("button", { className: "navbar-toggler collapsed", type: "button", "data-toggle": "collapse", "data-target": "#navbar-menu", "aria-expanded": "false", onClick: onClick },
React__default.createElement("span", { className: "navbar-toggler-icon" })));
};
var Fill = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center" }, children));
};
var Header = function (_a) {
var _b;
var children = _a.children, light = _a.light, dark = _a.dark, style = _a.style, className = _a.className, size = _a.size;
var classes = classnames("navbar navbar-expand-md", {
"navbar-light": light,
"navbar-dark": dark,
}, className);
var containerClasses = classnames((_b = { container: !size }, _b["container-" + size] = size, _b));
return (React__default.createElement("header", { style: style, className: classes },
React__default.createElement("div", { className: containerClasses },
React__default.createElement(Toggle, null),
children)));
};
var HeaderCollapse = function (_a) {
var children = _a.children;
var menuVisible = React__default.useContext(NavContext).menuVisible;
var classes = classnames("navbar-collapse collapse ", { show: menuVisible });
return (React__default.createElement("div", { className: classes, id: "navbar-menu" }, children));
};
var Expand = function (_a) {
var children = _a.children;
var menuVisible = React__default.useContext(NavContext).menuVisible;
var classes = classnames("navbar navbar-collapse navbar-light collapse", {
show: menuVisible,
});
return (React__default.createElement("div", { className: "navbar-expand-md" },
React__default.createElement("div", { className: classes, id: "navbar-menu" },
React__default.createElement("div", { className: "container-xl" },
React__default.createElement("div", { className: "d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center" }, children)))));
};
var List$1 = function (_a) {
var children = _a.children, className = _a.className;
var classes = classnames("navbar-nav", className);
return React__default.createElement("ul", { className: classes }, children);
};
var ListItem = function (_a) {
var children = _a.children, active = _a.active, _b = _a.dropdown, dropdown = _b === void 0 ? false : _b;
var ref = React__default.useRef(null);
var _c = React__default.useState(false), dropdownVisible = _c[0], setDropdownVisible = _c[1];
var classes = classnames("nav-item", { active: active, dropdown: dropdown });
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target) && dropdownVisible) {
setDropdownVisible(false);
}
}
React__default.useEffect(function () {
document.addEventListener("mousedown", handleClickOutside);
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
});
return (React__default.createElement(DropdownContext.Provider, { value: { dropdownVisible: dropdownVisible, setDropdownVisible: setDropdownVisible } },
React__default.createElement("li", { ref: ref, className: classes }, children)));
};
var Link = function (_a) {
var children = _a.children, dropdown = _a.dropdown, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
var _c = React__default.useContext(DropdownContext), dropdownVisible = _c.dropdownVisible, setDropdownVisible = _c.setDropdownVisible;
var onClick = function (e) {
setDropdownVisible(!dropdownVisible);
e.preventDefault();
};
var classes = classnames("nav-link", { "dropdown-toggle": dropdown, disabled: disabled }, className);
return (React__default.createElement("a", { className: classes, onClick: onClick }, children));
};
var LinkIcon = function (_a) {
var children = _a.children;
return (React__default.createElement("span", { className: "nav-link-icon d-md-none d-lg-inline-block" }, children));
};
var LinkTitle = function (_a) {
var children = _a.children;
return (React__default.createElement("span", { className: "nav-link-title" }, children));
};
var DropdownMenu = function (_a) {
var children = _a.children;
var dropdownVisible = React__default.useContext(DropdownContext).dropdownVisible;
var classes = classnames("dropdown-menu", { show: dropdownVisible });
return React__default.createElement("ul", { className: classes }, children);
};
var DropdownMenuItem = function (_a) {
var children = _a.children;
return (React__default.createElement("li", null,
React__default.createElement("a", { className: "dropdown-item" }, children)));
};
var Extra = function (_a) {
var children = _a.children, className = _a.className;
var classes = classnames("navbar-nav flex-row order-md-last", className);
return React__default.createElement("div", { className: classes }, children);
};
var Item = function (_a) {
var children = _a.children, className = _a.className;
var classes = classnames("nav-item", className);
return React__default.createElement("div", { className: classes }, children);
};
var Image = React__default.forwardRef(function (_a, ref) {
var className = _a.className, props = __rest(_a, ["className"]);
var classes = classnames("navbar-brand-image", className);
return React__default.createElement("img", __assign({ ref: ref }, props, { className: classes }));
});
var Logo = function (_a) {
var children = _a.children;
return (React__default.createElement("a", { href: ".", className: "navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3" }, children));
};
var Aside = function (_a) {
var children = _a.children, _b = _a.right, right = _b === void 0 ? false : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.light, light = _d === void 0 ? true : _d;
var classes = classnames("navbar navbar-vertical navbar-expand-lg", {
"navbar-dark": dark,
"navbar-light": light,
"navbar-right": right,
});
return (React__default.createElement("aside", { className: classes },
React__default.createElement("div", { className: "container-xl" }, children)));
};
var Nav = function (_a) {
var children = _a.children;
var _b = React__default.useState(false), menuVisible = _b[0], setMenuVisible = _b[1];
return (React__default.createElement(NavContext.Provider, { value: { menuVisible: menuVisible, setMenuVisible: setMenuVisible } }, children));
};
Nav.Toggle = Toggle;
Nav.DropdownMenu = DropdownMenu;
Nav.DropdownMenuItem = DropdownMenuItem;
Nav.LinkTitle = LinkTitle;
Nav.LinkIcon = LinkIcon;
Nav.Link = Link;
Nav.List = List$1;
Nav.Fill = Fill;
Nav.ListItem = ListItem;
Nav.Item = Item;
Nav.Expand = Expand;
Nav.HeaderCollapse = HeaderCollapse;
Nav.Header = Header;
Nav.Extra = Extra;
Nav.Logo = Logo;
Nav.Image = Image;
Nav.Aside = Aside;
var DropdownContext = React__default.createContext({
dropdownVisible: false,
});
var DropdownHeader = function (_a) {
var children = _a.children;
return (React__default.createElement("span", { className: "dropdown-header" }, children));
};
var DropdownItem = function (_a) {
var className = _a.className, children = _a.children, active = _a.active, disabled = _a.disabled;
var classes = classnames("dropdown-item", { active: active, disabled: disabled }, className);
return (React__default.createElement("a", { className: classes, href: "#", onClick: function (e) { return e.preventDefault(); } }, children));
};
var DropdownMenu$1 = function (_a) {
var children = _a.children, className = _a.className, arrow = _a.arrow, card = _a.card, position = _a.position, style = _a.style, dark = _a.dark;
var dropdownVisible = React__default.useContext(DropdownContext).dropdownVisible;
var optionalClasses = {
show: dropdownVisible,
"dropdown-menu-arrow": arrow,
"dropdown-menu-card": card,
"dropdown-menu-right": position === "right",
"dropdown-menu-left": position === "left",
"bg-dark text-white": dark,
};
var classes = classnames("dropdown-menu", optionalClasses, className);
return (React__default.createElement("div", { className: classes, style: style }, children));
};
var Dropdown = function (_a) {
var className = _a.className, children = _a.children;
var ref = useRef(null);
var _b = React__default.useState(false), dropdownVisible = _b[0], setDropdownVisible = _b[1];
var classes = classnames("dropdown", className);
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target) && dropdownVisible) {
setDropdownVisible(false);
}
}
useEffect(function () {
document.addEventListener("mousedown", handleClickOutside);
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
});
return (React__default.createElement(DropdownContext.Provider, { value: { dropdownVisible: dropdownVisible, setDropdownVisible: setDropdownVisible } },
React__default.createElement("div", { ref: ref, className: classes }, children)));
};
var DropdownButton = function (_a) {
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
var _b = React__default.useContext(DropdownContext), dropdownVisible = _b.dropdownVisible, setDropdownVisible = _b.setDropdownVisible;
var onClick = function () { return setDropdownVisible(!dropdownVisible); };
var classes = classnames("dropdown-toggle", className);
return (React__default.createElement(Buttons.Button, __assign({ onClick: onClick, className: classes }, props, { "data-toggle": "dropdown", "aria-expanded": dropdownVisible }), children));
};
var DropdownLink = function (_a) {
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
var _b = React__default.useContext(DropdownContext), dropdownVisible = _b.dropdownVisible, setDropdownVisible = _b.setDropdownVisible;
var onClick = function (e) {
setDropdownVisible(!dropdownVisible);
e.preventDefault();
};
var classes = classnames(className);
return (React__default.createElement(Nav.Link, __assign({ onClick: onClick, className: classes }, props, { "data-toggle": "dropdown", "aria-expanded": dropdownVisible }), children));
};
var DropdownDivider = function () { return React__default.createElement("div", { className: "dropdown-divider" }); };
Dropdown.Button = DropdownButton;
Dropdown.Link = DropdownLink;
Dropdown.Menu = DropdownMenu$1;
Dropdown.Item = DropdownItem;
Dropdown.Divider = DropdownDivider;
Dropdown.Header = DropdownHeader;
var Flag = function (_a) {
var _b;
var className = _a.className, country = _a.country, size = _a.size;
var classes = classnames("flag flag-country-" + country, (_b = {}, _b["flag-" + size] = !!size, _b), className);
return React__default.createElement("span", { className: classes });
};
var FormGroup = function (_a) {
var children = _a.children, className = _a.className;
var classes = classnames(className);
return React__default.createElement("div", { className: classes }, children);
};
var FormLabel = function (_a) {
var children = _a.children, className = _a.className, required = _a.required;
var classes = classnames("form-label", { required: required }, className);
return React__default.createElement("label", { className: classes }, children);
};
var FormFieldset = function (_a) {
var children = _a.children;
return React__default.createElement("fieldset", { className: "form-fieldset" }, children);
};
var Form = function (_a) {
var children = _a.children, onSubmit = _a.onSubmit, props = __rest(_a, ["children", "onSubmit"]);
return (React__default.createElement("form", __assign({ onSubmit: onSubmit }, props), children));
};
Form.Group = FormGroup;
Form.Label = FormLabel;
Form.Fieldset = FormFieldset;
var Row = function (_a) {
var _b;
var className = _a.className, children = _a.children, cards = _a.cards, deck = _a.deck, gutters = _a.gutters, alignItems = _a.alignItems, justifyContent = _a.justifyContent, size = _a.size, style = _a.style;
var classes = classnames("row", (_b = {
"row-cards": cards,
"row-deck": deck,
"no-gutters": gutters === false
},
_b["align-items-" + alignItems] = alignItems,
_b["justify-content-" + justifyContent] = justifyContent,
_b["row-" + size] = size,
_b), className);
return (React__default.createElement("div", { className: classes, style: style }, children));
};
var Col = function (_a) {
var _b;
var className = _a.className, children = _a.children, _c = _a.width, width = _c === void 0 ? 0 : _c, _d = _a.xs, xs = _d === void 0 ? 0 : _d, _e = _a.sm, sm = _e === void 0 ? 0 : _e, _f = _a.md, md = _f === void 0 ? 0 : _f, _g = _a.lg, lg = _g === void 0 ? 0 : _g, _h = _a.xl, xl = _h === void 0 ? 0 : _h, xsAuto = _a.xsAuto, smAuto = _a.smAuto, mdAuto = _a.mdAuto, lgAuto = _a.lgAuto, xlAuto = _a.xlAuto, auto = _a.auto, _j = _a.offset, offset = _j === void 0 ? 0 : _j, _k = _a.offsetXs, offsetXs = _k === void 0 ? 0 : _k, _l = _a.offsetSm, offsetSm = _l === void 0 ? 0 : _l, _m = _a.offsetMd, offsetMd = _m === void 0 ? 0 : _m, _o = _a.offsetLg, offsetLg = _o === void 0 ? 0 : _o, _p = _a.offsetXl, offsetXl = _p === void 0 ? 0 : _p;
var classes = classnames((_b = {},
_b["col-" + width] = width,
_b["col-xs-" + xs] = xs,
_b["col-xs-auto"] = xsAuto,
_b["col-sm-" + sm] = sm,
_b["col-sm-auto"] = smAuto,
_b["col-md-" + md] = md,
_b["col-md-auto"] = mdAuto,
_b["col-lg-" + lg] = lg,
_b["col-lg-auto"] = lgAuto,
_b["col-xl-" + xl] = xl,
_b["col-xl-auto"] = xlAuto,
_b["col-auto"] = auto,
_b["offset-" + offset] = offset,
_b["offset-xs-" + offsetXs] = offsetXs,
_b["offset-sm-" + offsetSm] = offsetSm,
_b["offset-md-" + offsetMd] = offsetMd,
_b["offset-lg-" + offsetLg] = offsetLg,
_b["offset-xl-" + offsetXl] = offsetXl,
_b), className);
return React__default.createElement("div", { className: classes || "col" }, children);
};
var Grid = function (_a) {
var children = _a.children;
return ({ children: children });
};
Grid.Row = Row;
Grid.Col = Col;
function ListItem$1(_a) {
var className = _a.className, children = _a.children, inline = _a.inline, separated = _a.separated;
var classes = classnames({ "list-inline-item": inline, "list-separated-item": separated }, className);
return createElement("li", { className: classes }, children);
}
function ListGroup(_a) {
var className = _a.className, children = _a.children, transparent = _a.transparent, isCardBody = _a.isCardBody;
var classes = classnames("list-group", "mb-0", {
"list-group-transparent": transparent,
"card-list-group": isCardBody,
}, className);
return createElement("div", { className: classes }, children);
}
function ListGroupItem(_a) {
var className = _a.className, children = _a.children, _b = _a.as, as = _b === void 0 ? "a" : _b, active = _a.active, action = _a.action, icon = _a.icon;
var classes = classnames("list-group-item", {
"list-group-item-action": action,
}, {
active: active,
}, className);
var Component = as;
return (createElement(Component, { className: classes },
icon && createElement("span", { className: "mr-3 icon" }, "TODO"),
children));
}
function List$2(_a) {
var className = _a.className, children = _a.children, unstyled = _a.unstyled, seperated = _a.seperated, inline = _a.inline;
var classes = classnames({
list: !unstyled,
"list-unstyled": unstyled,
"list-seperated": seperated,
"list-inline": inline,
}, className);
return createElement("ul", { className: classes }, children);
}
List$2.Item = ListItem$1;
List$2.Group = ListGroup;
List$2.GroupItem = ListGroupItem;
var ModalContext = React__default.createContext({});
var ModalHeader = function (_a) {
var children = _a.children;
var onHide = React__default.useContext(ModalContext).onHide;
return (React__default.createElement("div", { className: "modal-header" },
React__default.createElement("div", { className: "modal-title h4" }, children),
React__default.createElement("button", { type: "button", className: "close", onClick: onHide },
React__default.createElement("span", { "aria-hidden": "true" }, "\u00D7"),
React__default.createElement("span", { className: "sr-only" }, "Close"))));
};
var ModalBody = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "modal-body" }, children);
};
var ModalFooter = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "modal-footer" }, children);
};
var Modal = function (_a) {
var _b;
var show = _a.show, _c = _a.blur, blur = _c === void 0 ? true : _c, onHide = _a.onHide, children = _a.children, size = _a.size, fullWidth = _a.fullWidth, scrollable = _a.scrollable;
if (!show) {
return null;
}
var classes = classnames("modal", { "modal-blur": blur });
var dialogClasses = classnames("modal-dialog", (_b = {
"modal-dialog-scrollable": scrollable,
"modal-full-width": fullWidth
},
_b["modal-" + size] = !!size,
_b));
return (React__default.createElement(ModalContext.Provider, { value: { onHide: onHide } },
React__default.createElement("div", { className: classes, role: "dialog", "aria-modal": true, style: { display: "block" } },
React__default.createElement("div", { className: dialogClasses, role: "document" },
React__default.createElement("div", { className: "modal-content" }, children)))));
};
Modal.Header = ModalHeader;
Modal.Body = ModalBody;
Modal.Footer = ModalFooter;
var Page = function (_a) {
var children = _a.children;
var _b = React__default.useState(false), menuVisible = _b[0], setMenuVisible = _b[1];
return (React__default.createElement(NavContext.Provider, { value: { menuVisible: menuVisible, setMenuVisible: setMenuVisible } },
React__default.createElement("div", { className: "page" }, children)));
};
var PageHeader = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "page-header" }, children);
};
var PagePreTitle = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "page-pretitle" }, children));
};
var PageTitle = function (_a) {
var children = _a.children;
return React__default.createElement("h2", { className: "page-title" }, children);
};
var PageSubTitle = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "page-subtitle" }, children));
};
var PageOptions = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "page-options d-flex" }, children));
};
var Content = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "content" }, children);
};
var Footer = function (_a) {
var children = _a.children;
return React__default.createElement("footer", { className: "footer" }, children);
};
var SubFooter = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "footer" }, children);
};
var Container = function (_a) {
var _b;
var children = _a.children, size = _a.size;
var classes = classnames((_b = { container: !size }, _b["container-" + size] = size, _b));
return React__default.createElement("div", { className: classes }, children);
};
var Empty = function (_a) {
var children = _a.children;
return React__default.createElement("div", { className: "empty" }, children);
};
Page.Header = PageHeader;
Page.Pretitle = PagePreTitle;
Page.Title = PageTitle;
Page.SubTitle = PageSubTitle;
Page.Options = PageOptions;
Page.Content = Content;
Page.Footer = Footer;
Page.SubFooter = SubFooter;
Page.Container = Container;
Page.Empty = Empty;
var Payment = function (_a) {
var _b;
var className = _a.className, provider = _a.provider, size = _a.size;
var classes = classnames("payment payment-sm", (_b = {}, _b["payment-provider-" + provider] = provider, _b["payment-" + size] = !!size, _b), className);
return React__default.createElement("span", { className: classes });
};
var ProgressBar = function (_a) {
var _b;
var className = _a.className, color = _a.color, _c = _a.indeterminate, indeterminate = _c === void 0 ? false : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, style = _a.style, rest = __rest(_a, ["className", "color", "indeterminate", "width", "style"]);
var classes = classnames("progress-bar", (_b = {},
_b["bg-" + color] = !!color,
_b["progress-bar-indeterminate"] = indeterminate,
_b), className);
return (createElement("div", __assign({ className: classes, style: __assign({ width: width + "%" }, style) }, rest, { role: "progressbar", "aria-valuenow": width, "aria-valuemin": 0, "aria-valuemax": 100 }),
createElement("span", { className: "sr-only" },
width,
"% Complete")));
};
function Progress(_a) {
var _b;
var className = _a.className, children = _a.children, card = _a.card, size = _a.size, rest = __rest(_a, ["className", "children", "card", "size"]);
var classes = classnames("progress", (_b = {}, _b["progress-" + size] = !!size, _b["card-progress"] = card, _b), className);
return (createElement("div", __assign({ className: classes }, rest), children));
}
Progress.Bar = ProgressBar;
var Ribbon = function (_a) {
var _b;
var children = _a.children, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, bookmark = _a.bookmark, color = _a.color;
var classes = classnames("ribbon", (_b = {
"ribbon-top": top,
"ribbon-right": right,
"ribbon-bottom": bottom,
"ribbon-left": left
},
_b["bg-" + color] = !!color,
_b["ribbon-bookmark"] = bookmark,
_b));
return createElement("div", { className: classes }, children);
};
var Spinner = function (_a) {
var _b;
var className = _a.className, color = _a.color, size = _a.size, _c = _a.grow, grow = _c === void 0 ? false : _c;
var classes = classnames(grow ? "spinner-grow" : "spinner-border", (_b = {},
_b["text-" + color] = !!color,
_b["spinner-border-" + size] = !!size,
_b), className);
return React__default.createElement("div", { className: classes, role: "status" });
};
var Step = React__default.forwardRef(function (_a, ref) {
var active = _a.active, children = _a.children, props = __rest(_a, ["active", "children"]);
var classes = classnames("step-item", { active: active });
return (React__default.createElement("a", __assign({ ref: ref }, props, { className: classes }), children));
});
var Steps = function (_a) {
var _b;
var className = _a.className, children = _a.children, color = _a.color, numbers = _a.numbers;
var classes = classnames("steps", (_b = {},
_b["steps-" + color] = !!color,
_b["steps-counter"] = numbers,
_b), className);
return React__default.createElement("div", { className: classes }, children);
};
Steps.Step = Step;
function TableHeader(_a) {
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
var classes = classnames(className);
return (React__default.createElement("thead", __assign({ className: classes }, props), children));
}
function TableBody(_a) {
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
var classes = classnames(className);
return (createElement("tbody", __assign({ className: classes }, props), children));
}
function TableRow(_a) {
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
var classes = classnames(className);
return (createElement("tr", __assign({ className: classes }, props), children));
}
function TableCol(_a) {
var _b;
var className = _a.className, children = _a.children, alignContent = _a.alignContent, rest = __rest(_a, ["className", "children", "alignContent"]);
var classes = classnames((_b = {}, _b["text-" + alignContent] = alignContent, _b), className);
return (createElement("td", __assign({ className: classes }, rest), children));
}
function TableColHeader(_a) {
var _b;
var className = _a.className, children = _a.children, alignContent = _a.alignContent, _c = _a.colspan, colspan = _c === void 0 ? 1 : _c;
var classes = classnames((_b = {}, _b["text-" + alignContent] = alignContent, _b), className);
return (React__default.createElement("th", { className: classes, colSpan: colspan }, children));
}
function Table(_a) {
var className = _a.className, children = _a.children, cards = _a.cards, striped = _a.striped, responsive = _a.responsive, highlightRowOnHover = _a.highlightRowOnHover, hasOutline = _a.hasOutline, verticalAlign = _a.verticalAlign, props = __rest(_a, ["className", "children", "cards", "striped", "responsive", "highlightRowOnHover", "hasOutline", "verticalAlign"]);
var classes = classnames("table", {
"card-table": cards,
"table-striped": striped,
"table-hover": highlightRowOnHover,
"table-outline": hasOutline,
"table-vcenter": verticalAlign === "center",
}, className);
var table = (React__default.createElement("table", __assign({ className: classes }, props), children));
return !responsive ? table : React__default.createElement("div", { className: "table-responsive" }, table);
}
Table.defaultProps = {
cards: false,
striped: false,
responsive: false,
};
Table.Header = TableHeader;
Table.Body = TableBody;
Table.Row = TableRow;
Table.Col = TableCol;
Table.ColHeader = TableColHeader;
var TabContext = React__default.createContext({});
var Nav$1 = function (_a) {
var tabs = _a.tabs, _b = _a.fill, fill = _b === void 0 ? false : _b, _c = _a.alt, alt = _c === void 0 ? false : _c;
var _d = React__default.useContext(TabContext), active = _d.active, setActive = _d.setActive;
var classes = classnames("nav nav-tabs", { "nav-fill": fill, "nav-tabs-alt": alt });
return (React__default.createElement("ul", { className: classes }, Object.keys(tabs).map(function (item) {
var classes = classnames("nav-link", { active: item === active });
return (React__default.createElement("li", { key: "tab-" + item, className: "nav-item", onClick: function () { return setActive(item); } },
React__default.createElement("a", { className: classes }, tabs[item].title)));
})));
};
var CardTabs = function (props) { return (React__default.createElement("div", { className: "card-tabs" },
React__default.createElement(Nav$1, __assign({}, props)),
React__default.createElement("div", { className: "tab-content" },
React__default.createElement("div", { className: "tab-pane card active" },
React__default.createElement(Card.Body, null, props.children))))); };
var DefaultTabs = function (props) { return (React__default.createElement(Card, null,
React__default.createElement(Nav$1, __assign({}, props)),
React__default.createElement(Card.Body, null,
React__default.createElement("div", { className: "tab-content" },
React__default.createElement("div", { className: "tab-pane active" }, props.children))))); };
var Tab = function (props) { return props.children; };
var Tabs = function (_a) {
var _b = _a.cards, cards = _b === void 0 ? false : _b, children = _a.children, defaultEventKey = _a.defaultEventKey, props = __rest(_a, ["cards", "children", "defaultEventKey"]);
var _c = React__default.useState(defaultEventKey), active = _c[0], setActive = _c[1];
var _d = React__default.useState({}), tabs = _d[0], setTabs = _d[1];
React__default.useEffect(function () {
// construct tab headers on initial mount only
setTabs(React__default.Children.map(children, function (child) { return child; }).reduce(function (result, child) {
var _a = child.props, eventKey = _a.eventKey, title = _a.title, children = _a.children;
result[eventKey] = { title: title, children: children };
return result;
}, {}));
}, []);
if (!tabs.hasOwnProperty(active) && Object.keys(tabs).length > 0) {
// Set default active eventKey if no match found
setActive(Object.keys(tabs)[0]);
}
var Component = cards ? CardTabs : DefaultTabs;
return (React__default.createElement(TabContext.Provider, { value: { active: active, setActive: setActive } },
React__default.createElement(Component, __assign({ tabs: tabs }, props), tabs.hasOwnProperty(active) ? tabs[active].children : null)));
};
Tabs.Tab = Tab;
var ThemeContext = React__default.createContext({ theme: "light" });
var ThemeProvider = function (_a) {
var children = _a.children;
var _b = React__default.useState("light"), theme = _b[0], setTheme = _b[1];
var _c = React__default.useState(""), bodyClasses = _c[0], setBodyClasses = _c[1];
var bodyElement = document.getElementsByTagName("BODY")[0];
var toggleTheme = function () {
var body = bodyElement;
var isDark = theme === "dark";
body.className = classnames(bodyClasses, { "theme-dark": !isDark });
setTheme(isDark ? "light" : "dark");
};
var state = {
theme: theme,
toggleTheme: toggleTheme,
};
React__default.useEffect(function () {
setBodyClasses(bodyElement.className);
return function () {
bodyElement.className = bodyClasses;
};
}, []);
return React__default.createElement(ThemeContext.Provider, { value: state }, children);
};
var TimelineTitle = function (_a) {
var children = _a.children;
return (React__default.createElement("p", { className: "list-timeline-title" }, children));
};
var TimelineContent = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "list-timeline-content" }, children));
};
var TimelineTime = function (_a) {
var children = _a.children;
return (React__default.createElement("div", { className: "list-timeline-time" }, children));
};
var TimelineIcon = function (_a) {
var className = _a.className, children = _a.children;
var classes = classnames("list-timeline-icon", className);
return React__default.createElement("div", { className: classes }, children);
};
var TimelineItem = function (_a) {
var children = _a.children;
return React__default.createElement("li", null, children);
};
var Timeline = function (_a) {
var children = _a.children, className = _a.className, _b = _a.simple, simple = _b === void 0 ? false : _b;
var classes = classnames("list list-timeline", { "list-timeline-simple": simple }, className);
return React__default.createElement("ul", { className: classes }, children);
};
Timeline.Item = TimelineItem;
Timeline.Icon = TimelineIcon;
Timeline.Time = TimelineTime;
Timeline.Title = TimelineTitle;
Timeline.Content = TimelineContent;
var ToastContext = React__default.createContext({});
var ToastTitle = function (_a) {
var className = _a.className, children = _a.children;
var classes = classnames(className, "mr-auto");
return React__default.createElement("strong", { className: classes }, children);
};
var ToastHeader = function (_a) {
var children = _a.children;
var onHide = React__default.useContext(ToastContext).onHide;
return (React__default.createElement("div", { className: "toast-header" },
children,
React__default.createElement(Butt