@react-vant-next/campaign/es/sku/components/SkuRowItem.js

React Mobile UI Components based on Vant UI - Next Generation

import { jsxs, jsx } from 'react/jsx-runtime';
import { ExpandO } from '@react-vant-next/icons';
import { Image } from '@react-vant-next/ui';
import { createNamespace } from '@react-vant-next/utils';
import cls from 'clsx';
import { useMemo } from 'react';
import { isSkuChoosable } from '../utils.js';

const [bem] = createNamespace("sku-row");
const SkuRowItem = (props) => {
    var _a, _b;
    const classPrefix = props.largeImageMode ? "image-item" : "item";
    const imgUrl = useMemo(() => {
        const url = props.skuValue.imgUrl || props.skuValue.img_url;
        return props.largeImageMode
            ? url
                || "https://img01.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png"
            : url;
    }, [props.skuValue]);
    const choosable = useMemo(() => {
        if (!props.disableSoldoutSku) {
            return true;
        }
        return isSkuChoosable(props.skuList, props.selectedSku, {
            key: props.skuKeyStr,
            valueId: props.skuValue.id,
        });
    }, [
        JSON.stringify(props.skuList),
        JSON.stringify(props.selectedSku),
        props.skuKeyStr,
    ]);
    const imageRender = () => {
        if (imgUrl) {
            return (jsx(Image, { fit: "cover", src: imgUrl, lazyload: props.lazyload, className: cls(bem(`${classPrefix}-img`)) }));
        }
        return null;
    };
    const onSelect = () => {
        if (choosable) {
            props.onSkuSelected(Object.assign(Object.assign({}, props.skuValue), { skuKeyStr: props.skuKeyStr }));
        }
    };
    const onPreviewImg = (event) => {
        event.stopPropagation();
        const { skuValue, skuKeyStr } = props;
        props.onSkuPreviewImage(Object.assign(Object.assign({}, skuValue), { ks: skuKeyStr, imgUrl: skuValue.imgUrl || skuValue.img_url }));
    };
    const choosed = props.skuValue.id === props.selectedSku[props.skuKeyStr];
    return (jsxs("span", { className: cls(bem(classPrefix, {
            active: choosed,
            disabled: !choosable,
        })), onClick: onSelect, children: [imageRender(), jsx("div", { className: cls(bem(`${classPrefix}-name`)), children: props.largeImageMode
                    ? (jsx("span", { className: cls("rv-multi-ellipsis--l2"), children: (_a = props.skuValue) === null || _a === void 0 ? void 0 : _a.name }))
                    : ((_b = props.skuValue) === null || _b === void 0 ? void 0 : _b.name) }), props.largeImageMode
                && (props.previewIcon || (jsx(ExpandO, { className: cls(bem(`${classPrefix}-img-icon`)), onClick: onPreviewImg })))] }));
};

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