zent/es/button/Directive.js

一套前端设计语言和基于React的实现

import { __assign, __spreadArray } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import { isElement, isFragment } from 'react-is';
import { Children, cloneElement, useCallback, useContext, useRef } from 'react';
import Icon from '../icon';
import { DisabledContext } from '../disabled';
import { PopoverHoverTriggerContext } from '../popover';
import { renderCompatibleChildren } from './utils';
export function ButtonDirective(props) {
    var _a;
    var disabledContext = useContext(DisabledContext);
    var popoverHoverTriggerContext = useContext(PopoverHoverTriggerContext);
    var outline = props.outline, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, block = props.block, loading = props.loading, _d = props.disabled, disabled = _d === void 0 ? disabledContext.value : _d, _e = props.bordered, bordered = _e === void 0 ? true : _e, icon = props.icon, children = props.children, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
    if (!isElement(children) || isFragment(children)) {
        throw new Error('Button Directive child must be a non fragment element, string | number | boolean | null is not accepted');
    }
    var disabledRef = useRef(disabled);
    disabledRef.current = disabled;
    var propsRef = useRef(props);
    propsRef.current = props;
    var childElement = children;
    var onClick = useCallback(function (e) {
        var _a = propsRef.current, loading = _a.loading, children = _a.children;
        var onClick = children.props.onClick;
        var disabled = disabledRef.current;
        if (loading || disabled) {
            e.preventDefault();
            return;
        }
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
    }, []);
    var iconNode = icon ? _jsx(Icon, { type: icon }, void 0) : null;
    var needOutline = type !== 'text' && type !== 'icon' && outline;
    var className = cx((_a = {},
        _a["zent-btn-" + type + (needOutline ? '-outline' : '')] = type !== 'default',
        _a["zent-btn-" + size] = size !== 'medium',
        _a['zent-btn-block'] = block,
        _a['zent-btn-loading'] = loading,
        _a['zent-btn-disabled'] = disabled,
        _a['zent-btn-border-transparent'] = !bordered,
        _a), 'zent-btn', childElement.props.className);
    var commonChildren = cloneElement.apply(void 0, __spreadArray([children,
        {
            className: className,
            disabled: !!(disabled || loading),
            onClick: onClick,
            'data-zv': "10.0.17",
        },
        iconNode], (Children.map(childElement.props.children, function (child) {
        return typeof child === 'string' ? _jsx("span", __assign({ "data-zv": '10.0.17' }, { children: child }), void 0) : child;
    }) || [])));
    return renderCompatibleChildren(commonChildren, {
        fixMouseEventsOnDisabledChildren: popoverHoverTriggerContext.fixMouseEventsOnDisabledChildren,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
    });
}