@lskjs/image/Image.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Image = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _link = _interopRequireDefault(require("@lskjs/link"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

// import Img from './Image.styles';
// const textSizeRatio = 3;
var textSizePercent = 30;

var Image = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(Image, _PureComponent);

  var _super = _createSuper(Image);

  function Image() {
    (0, _classCallCheck2["default"])(this, Image);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(Image, [{
    key: "getInnerStyle",
    value: function getInnerStyle() {
      var _this$props = this.props,
          size = _this$props.size,
          innerStyle = _this$props.innerStyle,
          textColor = _this$props.textColor,
          objectFit = _this$props.objectFit;
      var width = this.props.width || size;
      var height = this.props.height || size;
      var lineHeight = size;
      var fontSize = Math.min( // Math.floor(size / textSizeRatio * textScale),
      Math.floor(size * textSizePercent / 100), lineHeight);
      return _objectSpread({
        boxSizing: 'border-box',
        maxWidth: '100%',
        maxHeight: 500,
        objectFit: objectFit,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        // overflow: 'hidden',
        width: width,
        height: height,
        textAlign: 'center',
        fontFamily: 'Helvetica, Arial, sans-serif',
        fontSize: "".concat(fontSize, "px"),
        lineHeight: "".concat(lineHeight, "px"),
        color: textColor
      }, innerStyle);
    }
  }, {
    key: "renderAsImage",
    value: function renderAsImage() {
      var title = this.props.title || this.props.name;
      var src = this.props.src || this.props.image;
      var _this$props2 = this.props,
          _this$props2$style = _this$props2.style,
          style = _this$props2$style === void 0 ? {} : _this$props2$style,
          props = (0, _objectWithoutProperties2["default"])(_this$props2, ["style"]);
      return /*#__PURE__*/_react["default"].createElement(_reactImageFallback["default"], (0, _extends2["default"])({
        src: src,
        fallbackImage: this.constructor.defaultImage,
        initialImage: this.constructor.defaultImage,
        style: _objectSpread(_objectSpread({}, this.getInnerStyle()), style),
        alt: title,
        title: title
      }, props));
    }
  }, {
    key: "renderAsText",
    value: function renderAsText() {
      var placeholder = this.props.placeholder;
      var placeholderLimit = this.props.placeholderLimit;
      var title = this.props.title || this.props.name || placeholder || '';

      if (!placeholder) {
        placeholder = title.split(' ').map(function (s) {
          return s.charAt(0);
        }).join('').substr(0, placeholderLimit);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: this.getInnerStyle()
      }, placeholder);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          size = _this$props3.size,
          style = _this$props3.style,
          className = _this$props3.className,
          children = _this$props3.children,
          componentClass = _this$props3.componentClass; // const src = this.props.src || this.props.image;

      var width = this.props.width || size;
      var height = this.props.height || size;

      var wrapperStyle = _objectSpread({
        display: 'block',
        position: 'relative',
        width: width,
        height: height
      }, style);

      var link = this.props.link || this.props.href;
      var Component = componentClass || (link ? _link["default"] : 'div');
      return /*#__PURE__*/_react["default"].createElement(Component, {
        href: link,
        className: className,
        style: wrapperStyle
      }, this.renderAsImage(), children);
    }
  }]);
  return Image;
}(_react.PureComponent);

exports.Image = Image;
Image.propTypes = {
  title: _propTypes["default"].string,
  name: _propTypes["default"].string,
  src: _propTypes["default"].string,
  size: _propTypes["default"].number,
  objectFit: _propTypes["default"].string,
  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  // color: PropTypes.string,
  textColor: _propTypes["default"].string,
  // textScale: PropTypes.number,
  placeholder: _propTypes["default"].string,
  placeholderLimit: _propTypes["default"].number,
  style: _propTypes["default"].object,
  innerStyle: _propTypes["default"].object
};
Image.defaultImage = 'https://increasify.com.au/wp-content/uploads/2016/08/default-image.png';
Image.defaultProps = {
  title: '',
  name: '',
  src: null,
  size: 64,
  width: 'auto',
  height: 'auto',
  objectFit: 'cover',
  // backgroundColor: '#838383',
  textColor: 'var(--colors-gray, #d9d9d9)',
  // textScale: 1,
  placeholder: null,
  placeholderLimit: 3,
  style: {},
  innerStyle: {}
};
var _default = Image;
exports["default"] = _default;
//# sourceMappingURL=Image.js.map