nicohc185-do-product-cart/dist/nicohc185-do-product-cart.cjs.development.js

Este es un paquete de pruebas de despliegue en NPM

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

var useProducts = function useProducts(_ref) {
  var product = _ref.product,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? 0 : _ref$value,
    onChange = _ref.onChange,
    initialValues = _ref.initialValues;
  var isMounted = React.useRef(false);
  var _useState = React.useState((initialValues == null ? void 0 : initialValues.count) || value),
    counter = _useState[0],
    setCounter = _useState[1];
  var increaseBy = function increaseBy(valueIncrease) {
    var newValue = Math.max(counter + valueIncrease, 0);
    if (initialValues != null && initialValues.maxCount) newValue = Math.min(newValue, initialValues.maxCount);
    setCounter(newValue);
    onChange && onChange({
      product: product,
      count: newValue
    });
  };
  var reset = function reset() {
    setCounter((initialValues == null ? void 0 : initialValues.count) || value);
  };
  React.useEffect(function () {
    if (!isMounted.current) return;
    setCounter(value);
  }, [value]);
  React.useEffect(function () {
    isMounted.current = true;
  }, []);
  return {
    count: counter,
    counter: counter,
    maxCount: initialValues == null ? void 0 : initialValues.maxCount,
    increaseBy: increaseBy,
    isMaxCountReached: !!(initialValues != null && initialValues.count) && initialValues.maxCount === counter,
    reset: 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__*/React.createContext({});
var Provider = ProductContext.Provider;
var ProductCard = function ProductCard(_ref) {
  var product = _ref.product,
    children = _ref.children,
    className = _ref.className,
    style = _ref.style,
    value = _ref.value,
    onChange = _ref.onChange,
    initialValues = _ref.initialValues;
  var _useProducts = useProducts({
      product: product,
      value: value,
      onChange: onChange,
      initialValues: initialValues
    }),
    counter = _useProducts.counter,
    maxCount = _useProducts.maxCount,
    increaseBy = _useProducts.increaseBy,
    isMaxCountReached = _useProducts.isMaxCountReached,
    reset = _useProducts.reset;
  return React__default.createElement(Provider, {
    value: {
      counter: counter,
      maxCount: maxCount,
      increaseBy: increaseBy,
      product: product
    }
  }, React__default.createElement("div", {
    className: styles.productCard + " " + className,
    style: style
  }, children({
    count: counter,
    maxCount: maxCount,
    product: product,
    increaseBy: increaseBy,
    isMaxCountReached: isMaxCountReached,
    reset: reset
  })));
};

var ProductButtons = function ProductButtons(_ref) {
  var className = _ref.className,
    style = _ref.style;
  var _useContext = React.useContext(ProductContext),
    counter = _useContext.counter,
    maxCount = _useContext.maxCount,
    increaseBy = _useContext.increaseBy;
  var isMaxReached = React.useCallback(function () {
    return counter === maxCount;
  }, [counter, maxCount]);
  return React__default.createElement("div", {
    className: styles.buttonsContainer + " " + className,
    style: style
  }, React__default.createElement(ProductButtonMinus, {
    increaseBy: increaseBy
  }), React__default.createElement("div", {
    className: styles.countLabel
  }, " ", counter, " "), React__default.createElement(ProductButtonAdd, {
    increaseBy: increaseBy,
    disabled: isMaxReached()
  }));
};
var ProductButtonMinus = function ProductButtonMinus(_ref2) {
  var increaseBy = _ref2.increaseBy,
    disabled = _ref2.disabled;
  return React__default.createElement("button", {
    className: styles.buttonMinus + " " + (disabled && styles.disabled),
    onClick: function onClick() {
      return !disabled && increaseBy(-1);
    }
  }, "-");
};
var ProductButtonAdd = function ProductButtonAdd(_ref3) {
  var increaseBy = _ref3.increaseBy,
    disabled = _ref3.disabled;
  return React__default.createElement("button", {
    className: styles.buttonAdd + " " + (disabled && styles.disabled),
    onClick: function onClick() {
      return !disabled && increaseBy(1);
    }
  }, "+");
};

var ProductImage = function ProductImage(_ref) {
  var img = _ref.img,
    className = _ref.className,
    style = _ref.style;
  var _useContext = React.useContext(ProductContext),
    product = _useContext.product;
  var imgSrc = React.useMemo(function () {
    return (product == null ? void 0 : product.img) || img || '../assets/no-image.jpg';
  }, [product, img]);
  return React__default.createElement("img", {
    className: styles.productImg + " " + className,
    style: style,
    src: imgSrc,
    alt: 'Product img'
  });
};

var ProductTitle = function ProductTitle(_ref) {
  var title = _ref.title,
    className = _ref.className,
    style = _ref.style;
  var _useContext = React.useContext(ProductContext),
    product = _useContext.product;
  return React__default.createElement("span", {
    className: styles.productDescription + " " + className,
    style: style
  }, title ? title : product.title);
};

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

var product = {
  id: '1',
  title: 'Coffe mug - sin imagen'
};
var Example = function Example() {
  return React.createElement(ProductCard$1, {
    product: product,
    initialValues: {
      count: 0
    }
  }, function () {
    return React.createElement(React.Fragment, null, React.createElement(ProductImage, null), React.createElement(ProductTitle, null), React.createElement(ProductButtons, null));
  });
};

exports.Example = Example;
exports.ProductButtons = ProductButtons;
exports.ProductCard = ProductCard$1;
exports.ProductImage = ProductImage;
exports.ProductTitle = ProductTitle;
//# sourceMappingURL=nicohc185-do-product-cart.cjs.development.js.map