@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
55 lines (54 loc) • 2.63 kB
JavaScript
import { _ as __rest } from "./tslib.es6.js";
import React__default, { useCallback } from "react";
import classNames from "classnames";
import { Loading } from "@nutui/icons-react";
import { C as ComponentDefaults } from "./typings.js";
const prefixCls = "nut-button";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { color: "", type: "default", size: "normal", shape: "round", fill: "outline", loading: false, disabled: false, block: false, icon: null, rightIcon: null, nativeType: "button", onClick: (e) => {
} });
const Button = React__default.forwardRef((props, ref) => {
const _a = Object.assign(Object.assign({}, defaultProps), props), { color, shape, fill, loading, disabled, type, size, block, icon, rightIcon, children, className, style, nativeType, onClick } = _a, rest = __rest(_a, ["color", "shape", "fill", "loading", "disabled", "type", "size", "block", "icon", "rightIcon", "children", "className", "style", "nativeType", "onClick"]);
const getStyle = useCallback(() => {
const style2 = {};
if (props.color) {
if (props.fill === "outline" || props.fill === "dashed") {
style2.color = color;
if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
style2.borderColor = color;
}
} else {
style2.color = "#fff";
style2.background = color;
style2.borderColor = "transparent";
}
}
return style2;
}, [color]);
const handleClick = (e) => {
if (!loading && !disabled && onClick) {
onClick(e);
}
};
return React__default.createElement(
"button",
Object.assign({}, rest, { ref, type: nativeType, className: classNames(prefixCls, `${prefixCls}-${type}`, props.fill ? `${prefixCls}-${fill}` : null, children ? "" : `${prefixCls}-icononly`, {
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-block`]: block,
[`${prefixCls}-disabled`]: disabled || loading,
[`${prefixCls}-loading`]: loading
}, className), style: Object.assign(Object.assign({}, getStyle()), style), onClick: (e) => handleClick(e) }),
React__default.createElement(
"div",
{ className: "nut-button-wrap" },
loading && React__default.createElement(Loading, { className: "nut-icon-loading" }),
!loading && icon ? icon : null,
children && React__default.createElement("div", { className: `${icon || loading ? "nut-button-text" : ""}${rightIcon ? " nut-button-text right" : ""}` }, children),
rightIcon || null
)
);
});
Button.displayName = "NutButton";
export {
Button as B
};