@wulperstudio/cms/modern/components/TextForLinesOutput/TextForLinesOutput.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["text", "clines", "variantElipsis", "elipsisProps", "onClickElipsis", "containerProps"],
  _excluded2 = ["textElipsis"];
import React from 'react';
import { Box, Typography, useTheme } from '@mui/material';
import { Clines } from './styled';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
var TextForLinesOutput = function TextForLinesOutput(_ref) {
  var text = _ref.text,
    clines = _ref.clines,
    _ref$variantElipsis = _ref.variantElipsis,
    variantElipsis = _ref$variantElipsis === void 0 ? 'default' : _ref$variantElipsis,
    elipsisProps = _ref.elipsisProps,
    onClickElipsis = _ref.onClickElipsis,
    containerProps = _ref.containerProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _ref2 = elipsisProps || {},
    textElipsis = _ref2.textElipsis,
    rest = _objectWithoutProperties(_ref2, _excluded2);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isElipsis = _React$useState2[0],
    setIsElipsis = _React$useState2[1];
  var handleIsElipsis = function handleIsElipsis() {
    return setIsElipsis(function (prev) {
      return !prev;
    });
  };
  return /*#__PURE__*/_jsxs(Box, Object.assign({}, containerProps, {
    children: [/*#__PURE__*/_jsx(Clines, {
      isElipsis: isElipsis,
      clines: clines,
      children: /*#__PURE__*/_jsxs(Typography, Object.assign({}, props, {
        children: [text, ' ']
      }))
    }), variantElipsis === 'showMore' && /*#__PURE__*/_jsx(Box, {
      onClick: function onClick(e) {
        handleIsElipsis();
        onClickElipsis == null || onClickElipsis(e);
      },
      component: "span",
      sx: Object.assign({
        color: 'text.primary',
        fontSize: theme.typography.fontSize,
        textDecoration: 'underline',
        cursor: 'pointer'
      }, rest.sx),
      children: isElipsis ? (textElipsis == null ? void 0 : textElipsis.less) || 'show less' : (textElipsis == null ? void 0 : textElipsis.more) || 'show more'
    })]
  }));
};
export default TextForLinesOutput;