@cainiaofe/cn-ui-m
Version:
74 lines (73 loc) • 2.83 kB
JavaScript
import { __assign, __rest } from "tslib";
import * as React from 'react';
import cx from 'classnames';
import { useAsyncLoading } from '@cainiaofe/cn-ui-common/es/hooks';
import { CnIcon } from "../cn-icon";
import './index.scss';
export var CnButton = React.forwardRef(function (props, ref) {
var _a;
var children = props.children, className = props.className, component = props.component, type = props.type, text = props.text, inverse = props.inverse, fullWidth = props.fullWidth, htmlType = props.htmlType, disabled = props.disabled, size = props.size, warning = props.warning, href = props.href, target = props.target, others = __rest(props, ["children", "className", "component", "type", "text", "inverse", "fullWidth", "htmlType", "disabled", "size", "warning", "href", "target"]);
var _b = useAsyncLoading(props), loading = _b.loading, onClick = _b.onClick;
var fill = React.useMemo(function () {
if (text) {
return 'none';
}
if (type === 'primary') {
return 'solid';
}
if (type === 'secondary') {
return 'outline';
}
return 'outline';
}, [type, text]);
var color = React.useMemo(function () {
if (inverse) {
return 'inverse';
}
if (warning) {
return 'warning';
}
if (type === 'primary') {
return 'primary';
}
if (type === 'secondary') {
return 'secondary';
}
return 'default';
}, [warning, text, type, inverse]);
var classes = cx(CN_UI_HASH_CLASS_NAME, className, (_a = {
'cn-ui-m-button': true
},
_a["cn-ui-m-button-".concat(color)] = !!color,
_a["cn-ui-m-button-fill-".concat(fill)] = !!fill,
_a["cn-ui-m-button-".concat(size)] = !!size,
_a['cn-ui-m-button-loading'] = !!loading,
_a['cn-ui-m-button-disabled'] = !!disabled,
_a['cn-ui-m-button-fullwidth'] = !!fullWidth,
_a));
var Component = component;
var tagAttrs = {};
if (Component === 'button') {
tagAttrs.type = htmlType;
}
else if (Component === 'a') {
tagAttrs.href = href;
tagAttrs.target = target;
}
return (React.createElement(Component, __assign({}, others, tagAttrs, { ref: ref, onClick: onClick, disabled: disabled, className: classes }),
loading ? (React.createElement(CnIcon, { className: "cn-ui-m-button-loading-icon", type: "progressing", style: { display: 'block' } })) : null,
children));
});
CnButton.displayName = 'CnButton';
CnButton.defaultProps = {
type: 'normal',
size: 'medium',
fullWidth: false,
component: 'button',
htmlType: 'button',
loading: false,
warning: false,
text: false,
inverse: false,
disabled: false,
};