@brizy/ui
Version:
React elements in Brizy style
42 lines (41 loc) • 2.62 kB
JavaScript
var __rest = (this && this.__rest) || function (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;
};
import React, { useMemo } from "react";
import { classNames } from "../classNamesFn";
import { ifElse } from "ramda";
import { getCustomSize, getHoverColor, getColor, getRadius, getDisabledWidth } from "./utils";
import AntButton from "antd/lib/button";
import { emptyStyles, isString } from "../utils";
import { Loading } from "../Loading";
const smallSize = { size: "12px" };
export const Button = props => {
const { title, shadow, radius, size, color, hoverColor, type = "default", disabled = false, href, target, fullWidth = false, icon, onClick, children, loading } = props, extra = __rest(props, ["title", "shadow", "radius", "size", "color", "hoverColor", "type", "disabled", "href", "target", "fullWidth", "icon", "onClick", "children", "loading"]);
const makeHoverColor = ifElse(isString, getHoverColor, emptyStyles);
const makeColor = ifElse(isString, getColor, emptyStyles);
const buttonClassNames = classNames()({
"btn--colored": color || hoverColor,
[`btn--${color}`]: color,
[`btn--hover-${hoverColor}`]: hoverColor && !disabled,
"btn-shadow": shadow,
"btn-custom": typeof size === "number" || typeof size === "object",
"btn-disabled": disabled,
"btn--loading": loading,
});
const className = classNames()("button", `button--${type}`, {
"button-disabled-background": disabled,
});
const loadingSize = useMemo(() => size === "small" && smallSize, [size]);
return (React.createElement("div", { className: className, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getDisabledWidth(fullWidth)), getCustomSize(size)), getRadius(radius)), makeHoverColor(hoverColor)), makeColor(color)) },
React.createElement(AntButton, Object.assign({ className: buttonClassNames, title: title, href: href, size: typeof size === "string" ? size : undefined, type: type, disabled: disabled, block: fullWidth, icon: icon, target: target, onClick: onClick }, extra),
children,
loading && React.createElement(Loading, Object.assign({ color: "inherit" }, loadingSize)))));
};