"use strict";

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

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _reactMeasure = _interopRequireDefault(require("react-measure"));

var _constants = require("../../constants");

var _Translate = _interopRequireDefault(require("../Translate"));

var _Link = _interopRequireDefault(require("../Link"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }

// Copyright 1999-2020. Plesk International GmbH. All rights reserved.

/* eslint-disable react/no-did-mount-set-state */

/**
 * `Cuttable` component is used for showing and hiding part of content.
 * @since 0.0.42
 */
class Cuttable extends _react.Component {
  constructor(...args) {
    super(...args);
    (0, _defineProperty2.default)(this, "state", {
      collapsed: undefined,
      autofit: true
    });
    (0, _defineProperty2.default)(this, "contentRef", /*#__PURE__*/(0, _react.createRef)());
    (0, _defineProperty2.default)(this, "handleToggle", () => {
      this.setState(({
        collapsed
      }) => ({
        collapsed: !collapsed,
        autofit: false
      }));
    });
    (0, _defineProperty2.default)(this, "handleResize", () => {
      if (!this.state.autofit) {
        return;
      }

      const content = this.contentRef.current;

      if (content && content.scrollHeight > content.clientHeight) {
        this.setState({
          collapsed: this.props.collapsed
        });
      }
    });
  }

  render() {
    const {
      baseClassName,
      className,
      children,
      collapsed,
      maxHeight,
      locale,
      ...props
    } = this.props;
    const showMoreLessKey = this.state.collapsed ? 'showMore' : 'showLess';
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
      className: (0, _classnames.default)(baseClassName, {
        [`${baseClassName}--collapse`]: this.state.collapsed === true,
        [`${baseClassName}--expand`]: this.state.collapsed === false
      }, className)
    }, props), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
      onResize: this.handleResize,
      innerRef: el => {
        this.contentRef.current = el;
      }
    }, ({
      measureRef
    }) => /*#__PURE__*/_react.default.createElement("div", {
      className: `${baseClassName}__content`,
      style: {
        maxHeight
      },
      ref: measureRef
    }, children)), this.state.collapsed !== undefined && /*#__PURE__*/_react.default.createElement("div", {
      className: `${baseClassName}__action`
    }, /*#__PURE__*/_react.default.createElement(_Link.default, {
      onClick: this.handleToggle
    }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
      content: `Cuttable.${showMoreLessKey}`,
      fallback: locale[showMoreLessKey]
    }))));
  }

}

(0, _defineProperty2.default)(Cuttable, "defaultProps", {
  collapsed: true,
  maxHeight: '7rem',
  locale: {
    showMore: 'Show more',
    showLess: 'Show less'
  },
  baseClassName: `${_constants.CLS_PREFIX}cuttable`
});
var _default = Cuttable;
exports.default = _default;