@react-vant-next/campaign/es/coupon-list/CouponList.js

React Mobile UI Components based on Vant UI - Next Generation

import { jsxs, jsx } from 'react/jsx-runtime';
import { useSetState } from '@react-vant-next/hooks';
import { ConfigProviderContext, Tabs, Button, Field } from '@react-vant-next/ui';
import { createNamespace, mergeProps } from '@react-vant-next/utils';
import cls from 'clsx';
import { use, useRef, useMemo, useEffect } from 'react';
import Coupon from './Coupon.js';

const [bem] = createNamespace("coupon-list");
const EMPTY_IMAGE = "https://img.yzcdn.cn/vant/coupon-empty.png";
const CouponList = (p) => {
    var _a;
    const props = mergeProps(p, {
        showCount: true,
        showExchangeBar: true,
        showCloseButton: true,
        code: "",
        exchangeMinLength: 1,
        chosenCoupon: -1,
        coupons: [],
        disabledCoupons: [],
        displayedCouponIndex: -1,
        currency: "¥",
        emptyImage: EMPTY_IMAGE,
    });
    const { locale } = use(ConfigProviderContext);
    const innerEffect = useRef(false);
    const [state, updateState] = useSetState({
        tab: 0,
        code: props.code,
    });
    const buttonDisabled = useMemo(() => !props.exchangeButtonLoading
        && (props.exchangeButtonDisabled
            || !state.code
            || state.code.length < props.exchangeMinLength), [
        props.exchangeButtonLoading,
        props.exchangeButtonDisabled,
        state.code,
        props.exchangeMinLength,
    ]);
    const innerChange = (code) => {
        updateState({ code });
        innerEffect.current = true;
    };
    const onExchange = () => {
        if (props.onExchange)
            props.onExchange(state.code);
        // auto clear currentCode when not use v-model
        if (!props.code) {
            innerChange("");
        }
    };
    const renderEmpty = () => (jsxs("div", { className: cls(bem("empty")), children: [jsx("img", { alt: "empty", src: props.emptyImage }), jsx("p", { children: locale.noCoupon })] }));
    const renderExchangeBar = () => {
        if (props.showExchangeBar) {
            return (jsxs("div", { className: cls(bem("exchange-bar")), children: [jsx(Field, { value: state.code, onChange: innerChange, clearable: true, border: false, className: cls(bem("field")), placeholder: props.inputPlaceholder || locale.vanCouponList.placeholder, maxLength: 20 }), jsx(Button, { plain: true, type: "primary", className: cls(bem("exchange")), text: props.exchangeButtonText || locale.vanCouponList.exchange, loading: props.exchangeButtonLoading, disabled: buttonDisabled, onClick: onExchange })] }));
        }
        return null;
    };
    const renderCouponTab = () => {
        const { coupons } = props;
        const count = props.showCount ? ` (${coupons.length})` : "";
        const title = (props.enabledTitle || locale.vanCouponList.enable) + count;
        return (jsx(Tabs.TabPane, { title: title, children: jsxs("div", { className: cls(bem("list", {
                    "with-bar": props.showExchangeBar,
                    "with-bottom": props.showCloseButton,
                })), children: [coupons.map((coupon, index) => (jsx(Coupon, { coupon: coupon, chosen: index === props.chosenCoupon, currency: props.currency, onClick: () => props.onChange(index) }, coupon.id))), !coupons.length && renderEmpty(), props.listFooter] }) }));
    };
    const renderDisabledTab = () => {
        const { disabledCoupons } = props;
        const count = props.showCount ? ` (${disabledCoupons.length})` : "";
        const title = (props.disabledTitle || locale.vanCouponList.disabled) + count;
        return (jsx(Tabs.TabPane, { title: title, children: jsxs("div", { className: cls(bem("list", {
                    "with-bar": props.showExchangeBar,
                    "with-bottom": props.showCloseButton,
                })), children: [disabledCoupons.map(coupon => (jsx(Coupon, { disabled: true, coupon: coupon, currency: props.currency }, coupon.id))), !disabledCoupons.length && renderEmpty(), props.disabledListFooter] }) }));
    };
    useEffect(() => {
        if (innerEffect.current) {
            innerEffect.current = true;
            return;
        }
        updateState({ code: props.code });
    }, [props.code]);
    return (jsxs("div", { className: cls(bem(), props.className), style: props.style, children: [renderExchangeBar(), jsxs(Tabs, Object.assign({ active: state.tab, border: false }, props.tabsProps, { className: cls(bem("tab"), (_a = props.tabsProps) === null || _a === void 0 ? void 0 : _a.className), children: [renderCouponTab(), renderDisabledTab()] })), jsx("div", { className: cls(bem("bottom")), children: jsx(Button, { "v-show": props.showCloseButton, round: true, block: true, type: "primary", className: cls(bem("close")), text: props.closeButtonText || locale.vanCouponList.close, onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, -1); } }) })] }));
};

export { CouponList as default };
//# sourceMappingURL=CouponList.js.map