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

React Mobile UI Components based on Vant UI - Next Generation

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var hooks = require('@react-vant-next/hooks');
var ui = require('@react-vant-next/ui');
var utils = require('@react-vant-next/utils');
var cls = require('clsx');
var React = require('react');
var Coupon = require('./Coupon.js');

const [bem] = utils.createNamespace("coupon-list");
const EMPTY_IMAGE = "https://img.yzcdn.cn/vant/coupon-empty.png";
const CouponList = (p) => {
    var _a;
    const props = utils.mergeProps(p, {
        showCount: true,
        showExchangeBar: true,
        showCloseButton: true,
        code: "",
        exchangeMinLength: 1,
        chosenCoupon: -1,
        coupons: [],
        disabledCoupons: [],
        displayedCouponIndex: -1,
        currency: "¥",
        emptyImage: EMPTY_IMAGE,
    });
    const { locale } = React.use(ui.ConfigProviderContext);
    const innerEffect = React.useRef(false);
    const [state, updateState] = hooks.useSetState({
        tab: 0,
        code: props.code,
    });
    const buttonDisabled = React.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 = () => (jsxRuntime.jsxs("div", { className: cls(bem("empty")), children: [jsxRuntime.jsx("img", { alt: "empty", src: props.emptyImage }), jsxRuntime.jsx("p", { children: locale.noCoupon })] }));
    const renderExchangeBar = () => {
        if (props.showExchangeBar) {
            return (jsxRuntime.jsxs("div", { className: cls(bem("exchange-bar")), children: [jsxRuntime.jsx(ui.Field, { value: state.code, onChange: innerChange, clearable: true, border: false, className: cls(bem("field")), placeholder: props.inputPlaceholder || locale.vanCouponList.placeholder, maxLength: 20 }), jsxRuntime.jsx(ui.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 (jsxRuntime.jsx(ui.Tabs.TabPane, { title: title, children: jsxRuntime.jsxs("div", { className: cls(bem("list", {
                    "with-bar": props.showExchangeBar,
                    "with-bottom": props.showCloseButton,
                })), children: [coupons.map((coupon, index) => (jsxRuntime.jsx(Coupon.default, { 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 (jsxRuntime.jsx(ui.Tabs.TabPane, { title: title, children: jsxRuntime.jsxs("div", { className: cls(bem("list", {
                    "with-bar": props.showExchangeBar,
                    "with-bottom": props.showCloseButton,
                })), children: [disabledCoupons.map(coupon => (jsxRuntime.jsx(Coupon.default, { disabled: true, coupon: coupon, currency: props.currency }, coupon.id))), !disabledCoupons.length && renderEmpty(), props.disabledListFooter] }) }));
    };
    React.useEffect(() => {
        if (innerEffect.current) {
            innerEffect.current = true;
            return;
        }
        updateState({ code: props.code });
    }, [props.code]);
    return (jsxRuntime.jsxs("div", { className: cls(bem(), props.className), style: props.style, children: [renderExchangeBar(), jsxRuntime.jsxs(ui.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()] })), jsxRuntime.jsx("div", { className: cls(bem("bottom")), children: jsxRuntime.jsx(ui.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); } }) })] }));
};

exports.default = CouponList;
//# sourceMappingURL=CouponList.js.map