@confi/conflux-react-ui-test-package/esm/collapse/collapse.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect } from 'react';
import CollapseIcon from './collapse-icon';
import useTheme from '../styles/use-theme';
import Expand from '../shared/expand';
import { useCollapseContext } from './collapse-context';
import useCurrentState from '../utils/use-current-state';
import useWarning from '../utils/use-warning';
var defaultProps = {
  className: '',
  shadow: false,
  initialVisible: false
};

var Collapse = function Collapse(_ref) {
  var children = _ref.children,
      title = _ref.title,
      subtitle = _ref.subtitle,
      initialVisible = _ref.initialVisible,
      shadow = _ref.shadow,
      className = _ref.className,
      index = _ref.index,
      props = _objectWithoutProperties(_ref, ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"]);

  var theme = useTheme();

  var _useCurrentState = useCurrentState(initialVisible),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      visible = _useCurrentState2[0],
      setVisible = _useCurrentState2[1],
      visibleRef = _useCurrentState2[2];

  var _useCollapseContext = useCollapseContext(),
      values = _useCollapseContext.values,
      updateValues = _useCollapseContext.updateValues;

  if (!title) {
    useWarning('"title" is required.', 'Collapse');
  }

  useEffect(function () {
    if (!values.length) return;
    var isActive = !!values.find(function (item) {
      return item === index;
    });
    setVisible(isActive);
  }, [values.join(',')]);

  var clickHandler = function clickHandler() {
    var next = !visibleRef.current;
    setVisible(next);
    updateValues && updateValues(index, next);
  };

  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || "collapse ".concat(shadow ? 'shadow' : '', " ").concat(className))
  }), /*#__PURE__*/React.createElement("div", {
    role: "button",
    onClick: clickHandler,
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]]) + " " + "view"
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]]) + " " + "title"
  }, /*#__PURE__*/React.createElement("h3", {
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]])
  }, title), " ", /*#__PURE__*/React.createElement(CollapseIcon, {
    active: visible
  })), subtitle && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]]) + " " + "subtitle"
  }, subtitle)), /*#__PURE__*/React.createElement(Expand, {
    isExpanded: visible
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1722527585", [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]]]) + " " + "content"
  }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1722527585",
    dynamic: [theme.layout.gap, theme.palette.border, theme.palette.border, theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, theme.layout.gap]
  }, ".collapse.__jsx-style-dynamic-selector{padding:".concat(theme.layout.gap, " 0;border-top:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:1rem;line-height:1.625rem;padding:").concat(theme.layout.gap, " 0;}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
};

Collapse.defaultProps = defaultProps;
export default Collapse;