@react-vant-next/campaign/lib/sku/components/SkuRowItem.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 icons = require('@react-vant-next/icons');
var ui = require('@react-vant-next/ui');
var utils = require('@react-vant-next/utils');
var cls = require('clsx');
var React = require('react');
var utils$1 = require('../utils.js');

const [bem] = utils.createNamespace("sku-row");
const SkuRowItem = (props) => {
    var _a, _b;
    const classPrefix = props.largeImageMode ? "image-item" : "item";
    const imgUrl = React.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 = React.useMemo(() => {
        if (!props.disableSoldoutSku) {
            return true;
        }
        return utils$1.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 (jsxRuntime.jsx(ui.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 (jsxRuntime.jsxs("span", { className: cls(bem(classPrefix, {
            active: choosed,
            disabled: !choosable,
        })), onClick: onSelect, children: [imageRender(), jsxRuntime.jsx("div", { className: cls(bem(`${classPrefix}-name`)), children: props.largeImageMode
                    ? (jsxRuntime.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 || (jsxRuntime.jsx(icons.ExpandO, { className: cls(bem(`${classPrefix}-img-icon`)), onClick: onPreviewImg })))] }));
};

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