@procore/core-react/dist/Thumbnail/ThumbnailCaption.js

React library of Procore Design Guidelines

var _excluded = ["disabled", "caption", "error", "layout", "qa", "onCaptionOverflowChange"],
  _excluded2 = ["caption", "error", "disabled", "layout", "qa", "onCaptionOverflowChange"],
  _excluded3 = ["layout", "disabled", "error", "caption", "hasCaptionPlaceholder", "multiline", "qa"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { useEffect } from 'react';
import { useOverflowObserver } from '../_hooks/OverflowObserver';
import { parseFilename } from '../_utils/filename';
import { StyledCaptionText, StyledMultilineCaption, StyledPlaceholderCaption, StyledSingleLineCaption, StyledSinglelineCaptionBody, StyledSinglelineCaptionEnding } from './Thumbnail.styles';
function MultilineCaption(_ref) {
  var disabled = _ref.disabled,
    caption = _ref.caption,
    error = _ref.error,
    layout = _ref.layout,
    qa = _ref.qa,
    onCaptionOverflowChange = _ref.onCaptionOverflowChange,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useOverflowObserver = useOverflowObserver(),
    ref = _useOverflowObserver.ref,
    isOverflowing = _useOverflowObserver.isOverflowing;
  useEffect(function () {
    onCaptionOverflowChange === null || onCaptionOverflowChange === void 0 ? void 0 : onCaptionOverflowChange(isOverflowing);
  }, [isOverflowing, onCaptionOverflowChange]);
  return /*#__PURE__*/React.createElement("span", {
    "data-qa": qa
  }, /*#__PURE__*/React.createElement(StyledMultilineCaption, _extends({
    ref: ref,
    $disabled: disabled,
    $error: error,
    $layout: layout
  }, props), /*#__PURE__*/React.createElement(StyledCaptionText, null, caption)));
}
function SinglelineCaption(_ref2) {
  var caption = _ref2.caption,
    error = _ref2.error,
    disabled = _ref2.disabled,
    layout = _ref2.layout,
    qa = _ref2.qa,
    onCaptionOverflowChange = _ref2.onCaptionOverflowChange,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var _useOverflowObserver2 = useOverflowObserver(),
    ref = _useOverflowObserver2.ref,
    isOverflowing = _useOverflowObserver2.isOverflowing;
  var _parseFilename = parseFilename(caption),
    filename = _parseFilename.filename,
    extension = _parseFilename.extension,
    isFilename = _parseFilename.isFilename;
  useEffect(function () {
    onCaptionOverflowChange === null || onCaptionOverflowChange === void 0 ? void 0 : onCaptionOverflowChange(isOverflowing);
  }, [isOverflowing, onCaptionOverflowChange]);
  return /*#__PURE__*/React.createElement(StyledSingleLineCaption, _extends({
    $error: error,
    $disabled: disabled,
    $layout: layout,
    "data-qa": qa
  }, props), /*#__PURE__*/React.createElement(StyledSinglelineCaptionBody, {
    ref: ref
  }, isFilename ? "".concat(filename, ".") : caption), isFilename && /*#__PURE__*/React.createElement(StyledSinglelineCaptionEnding, null, extension));
}
export function ThumbnailCaption(_ref3) {
  var layout = _ref3.layout,
    _ref3$disabled = _ref3.disabled,
    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
    _ref3$error = _ref3.error,
    error = _ref3$error === void 0 ? false : _ref3$error,
    caption = _ref3.caption,
    hasCaptionPlaceholder = _ref3.hasCaptionPlaceholder,
    multiline = _ref3.multiline,
    _ref3$qa = _ref3.qa,
    qa = _ref3$qa === void 0 ? '' : _ref3$qa,
    props = _objectWithoutProperties(_ref3, _excluded3);
  if (!caption) {
    var captionPlaceholder = hasCaptionPlaceholder && '- -';
    if (captionPlaceholder) {
      return /*#__PURE__*/React.createElement(StyledPlaceholderCaption, {
        $disabled: disabled,
        $error: error,
        $layout: layout,
        "data-qa": qa
      }, /*#__PURE__*/React.createElement(StyledCaptionText, null, captionPlaceholder));
    }
    return null;
  }
  if (multiline) {
    return /*#__PURE__*/React.createElement(MultilineCaption, _extends({
      disabled: disabled,
      caption: caption,
      error: error,
      layout: layout,
      qa: qa,
      onCaptionOverflowChange: props.onCaptionOverflowChange
    }, props));
  }
  return /*#__PURE__*/React.createElement(SinglelineCaption, _extends({
    caption: caption,
    disabled: disabled,
    error: error,
    layout: layout,
    qa: qa,
    onCaptionOverflowChange: props.onCaptionOverflowChange
  }, props));
}
//# sourceMappingURL=ThumbnailCaption.js.map