ev-product-card/dist/ev-product-card.esm.js

Prueba de despliegue de componentes en NPM

import React, { useState, useRef, useEffect, createContext, useContext, useCallback } from 'react';

var useProduct = _ref => {
  var {
    onChange,
    product,
    value = 0,
    initialValues
  } = _ref;
  var [counter, setCounter] = useState((initialValues == null ? void 0 : initialValues.count) || value);
  var isControlled = useRef(!!onChange);
  var isMounted = useRef(false);

  var increaseBy = value => {
    if (isControlled.current) return onChange({
      quantity: value,
      product
    });
    var newValue = Math.min(Math.max(counter + value, 0), (initialValues == null ? void 0 : initialValues.maxCount) || Infinity);
    setCounter(newValue);
    onChange == null ? void 0 : onChange({
      product,
      quantity: newValue
    });
  };

  var reset = () => {
    setCounter((initialValues == null ? void 0 : initialValues.count) || value);
  };

  useEffect(() => {
    if (!isMounted.current) return;
    setCounter(value);
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, [value]);
  return {
    counter,
    isMaxCountReached: !!(initialValues != null && initialValues.count) && initialValues.maxCount === counter,
    increaseBy,
    reset
  };
};

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\n\n.styles-module_productCard__oaIVo {\n    background-color: #1E2025;\n    border-radius: 15px;\n    box-shadow: 0px 2px 10px rgba(0,0,0,0.15);\n    color: white;\n    padding-bottom: 5px;\n    font-family: Arial, Helvetica, sans-serif;\n    width: 250px;\n    margin-right: 5px;\n    margin-top: 5px;\n}\n\n.styles-module_productImg__vPsTp {\n    border-radius: 15px 15px 0px 0px;\n    width: 100%;\n}\n\n.styles-module_productDescription__Ariub {\n    margin: 10px;\n}\n\n.styles-module_buttonsContainer__ghCDF {\n    margin: 10px;\n    display: flex;\n    flex-direction: row;\n}\n\n.styles-module_buttonMinus__BTgTf {\n    cursor: pointer;\n    background-color: transparent;\n    border: 1px solid white;\n    border-radius: 5px 0px 0px 5px;\n    color: white;\n    font-size: 20px;\n    width: 30px;\n}\n\n.styles-module_buttonMinus__BTgTf:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n}\n\n.styles-module_countLabel__S6HZ- {\n    border-bottom: 1px solid white;\n    border-top: 1px solid white;\n    color: white;\n    font-size: 16px;\n    height: 25px;\n    padding-top: 5px;\n    text-align: center;\n    width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6 {\n    cursor: pointer;\n    background-color: transparent;\n    border: 1px solid white;\n    border-radius: 0px 5px 5px 0px;\n    color: white;\n    font-size: 20px;\n    width: 30px;\n}\n\n.styles-module_buttonAdd__s8wd6:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n}\n\n\n.styles-module_disabled__k5aZm {\n    border-color: grey !important;\n    border-left: 1px solid white !important;\n    color: grey !important;\n}";
var styles = {"productCard":"styles-module_productCard__oaIVo","productImg":"styles-module_productImg__vPsTp","productDescription":"styles-module_productDescription__Ariub","buttonsContainer":"styles-module_buttonsContainer__ghCDF","buttonMinus":"styles-module_buttonMinus__BTgTf","countLabel":"styles-module_countLabel__S6HZ-","buttonAdd":"styles-module_buttonAdd__s8wd6","disabled":"styles-module_disabled__k5aZm"};
styleInject(css_248z);

var ProductContext = /*#__PURE__*/createContext({});
var {
  Provider
} = ProductContext;

var ProductCard = _ref => {
  var {
    children,
    className,
    initialValues,
    onChange,
    product,
    style,
    value
  } = _ref;
  var {
    counter,
    increaseBy,
    isMaxCountReached,
    reset
  } = useProduct({
    onChange,
    product,
    value,
    initialValues
  });
  return React.createElement(Provider, {
    value: {
      counter,
      increaseBy,
      product,
      maxCount: initialValues == null ? void 0 : initialValues.maxCount
    }
  }, React.createElement("div", Object.assign({
    className: styles.productCard + " " + (className != null ? className : '')
  }, {
    style
  }), children({
    counter,
    isMaxCountReached,
    maxCount: (initialValues == null ? void 0 : initialValues.maxCount) || Infinity,
    product,
    increaseBy,
    reset
  })));
};

var ProductButtons = _ref => {
  var {
    className = '',
    style
  } = _ref;
  var {
    counter,
    increaseBy,
    maxCount = Infinity
  } = useContext(ProductContext);
  var isMaxReached = useCallback(() => counter >= maxCount, [counter, maxCount]);
  return React.createElement("div", Object.assign({
    className: styles.buttonsContainer + " " + className
  }, {
    style
  }), React.createElement("button", {
    className: styles.buttonMinus,
    onClick: () => increaseBy(-1)
  }, ' ', "-", ' '), React.createElement("div", {
    className: styles.countLabel
  }, " ", counter, " "), React.createElement("button", {
    className: styles.buttonAdd + " " + (isMaxReached() ? styles.disabled : ''),
    disabled: isMaxReached(),
    onClick: () => increaseBy(1)
  }, ' ', "+", ' '));
};

var ProductImage = _ref => {
  var {
    className = '',
    img,
    style
  } = _ref;
  var {
    product
  } = useContext(ProductContext);
  var imgToShow = img != null ? img : product.img = '';
  return React.createElement("img", Object.assign({
    className: styles.productImg + " " + className,
    src: imgToShow,
    alt: "Coffee Mug"
  }, {
    style
  }));
};

var ProductTitle = _ref => {
  var {
    title,
    className = '',
    style
  } = _ref;
  var {
    product
  } = useContext(ProductContext);
  return React.createElement("span", Object.assign({
    className: styles.productDescription + " " + className
  }, {
    style
  }), title != null ? title : product.title);
};

var ProductCard$1 = /*#__PURE__*/Object.assign(ProductCard, {
  Title: ProductTitle,
  Image: ProductImage,
  Buttons: ProductButtons
});

export { ProductButtons, ProductCard$1 as ProductCard, ProductImage, ProductTitle };
//# sourceMappingURL=ev-product-card.esm.js.map