react-common-use-components
Version:
A React mobile commonly used component library
65 lines (64 loc) • 2.2 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const utils_1 = require("../../utils");
const Button = ({ children, onClick, type = '', style, disabled = false, isDebounce = false, debounceDelay = 500, className }) => {
const click = async () => {
if (!onClick) {
return;
}
if (!(0, utils_1.isFunction)(onClick)) {
return;
}
if (isDebounce) {
(0, utils_1.debounce)(onClick, debounceDelay | 500);
}
else {
onClick();
}
};
const getStyle = () => {
if (type === 'default' || !type) {
return {
backgroundColor: "#fffffF",
border: "1px solid #f0f0f0",
color: "#000000",
};
}
else if (type === 'primary') {
return {
backgroundColor: "#1677ff",
border: "1px solid #1677ff",
color: "#FFFFFF",
};
}
else if (type === 'success') {
return {
backgroundColor: "#00b578",
border: "1px solid #00b578",
color: "#FFFFFF",
};
}
else if (type === 'danger') {
return {
backgroundColor: "#FF3141",
border: "1px solid #FF3141",
color: "#FFFFFF",
};
}
else if (type === 'warning') {
return {
backgroundColor: "#ff8f1f",
border: "1px solid #ff8f1f",
color: "#FFFFFF",
};
}
};
return (<button className={className} disabled={disabled} onClick={click} style={Object.assign(Object.assign({ display: "flex", justifyContent: "center", alignItems: "center", minWidth: "4rem", minHeight: "2rem", borderRadius: "0.25rem", fontSize: "0.875rem", outline: "none" }, getStyle()), style)}>
{children}
</button>);
};
exports.default = Button;