@tarojsx/ui/dist/Button.js

We reinvents the UI for Taro3+

import { __rest } from "tslib";
import React from 'react';
import classNames from 'classnames';
import { Button as _Button, View } from '@tarojs/components';
import { useThrottleCallback } from '@tarojsx/hooks/dist/useThrottleCallback';
import { Loading } from './Loading';
import { Icon } from './Icon';
import '../style/Button.scss';
export const Button = (props) => {
    const { className, style, type, size, circle, full, transparent, fab, children, clickThrottle, onClick } = props, rest = __rest(props, ["className", "style", "type", "size", "circle", "full", "transparent", "fab", "children", "clickThrottle", "onClick"]);
    const hoverProps = Object.keys(props).reduce((res, key) => (key.startsWith('hover') && props[key] ? Object.assign(Object.assign({}, res), { [key]: props[key] }) : res), {});
    const handleClick = useThrottleCallback(onClick, clickThrottle);
    if (transparent) {
        return (React.createElement(View, Object.assign({ className: classNames('at-button__transparent', className) }, hoverProps),
            children,
            !props.disabled && !props.loading && React.createElement(_Button, Object.assign({ onClick: handleClick }, rest))));
    }
    if (fab) {
        return (React.createElement(View, Object.assign({ className: classNames('at-fab', {
                [`at-fab--${size}`]: size,
            }, className), onClick: handleClick }, rest), children));
    }
    if (size === 'mini') {
        return (React.createElement(View, { className: classNames('at-button__transparent', className) },
            React.createElement(View, Object.assign({ className: classNames('at-button__mini', {
                    [`at-button__mini_${type}`]: type,
                    'at-button_disabled': props.disabled,
                }) }, hoverProps),
                React.createElement(View, { className: classNames({ 'at-button__mini__icon': props.loading || props.iconInfo }) }, props.loading ? React.createElement(Loading, null) : !!props.iconInfo ? React.createElement(Icon, Object.assign({}, props.iconInfo)) : null),
                children),
            !props.disabled && !props.loading && React.createElement(_Button, Object.assign({ onClick: handleClick }, rest))));
    }
    return (React.createElement(View, { className: classNames('at-button', {
            [`at-button--${size}`]: size,
            'at-button--disabled': props.disabled,
            [`at-button--${type}`]: type,
            [`at-button_${type}`]: type,
            'at-button--circle': circle,
            'at-button--full': full,
            'at-button--icon': props.loading,
        }, className), style: style },
        !!props.loading && (React.createElement(View, { className: "at-button__icon" },
            React.createElement(Loading, { color: type === 'primary' ? '#fff' : '', size: size === 'small' ? '30' : 0 }))),
        React.createElement(View, { className: "at-button__text" }, children),
        !props.disabled && !props.loading && (React.createElement(_Button, Object.assign({ className: "at-button__wxbutton", onClick: handleClick }, rest)))));
};
//# sourceMappingURL=Button.js.map