suomifi-ui-components/dist/esm/core/Expander/ExpanderGroup/ExpanderGroup.js

Suomi.fi UI component library

import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import '../../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import '../../../reset/HtmlInput/HtmlInput.js';
import '../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import { HtmlSpan } from '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../../theme/SpacingProvider/SpacingProvider.js';
import { separateMarginProps } from '../../theme/utils/spacing.js';
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
import { baseStyles } from './ExpanderGroup.baseStyles.js';
import { filterDuplicateKeys } from '../../../utils/common/common.js';

var baseClassName = 'fi-expander-group';
var openClassName = "".concat(baseClassName, "--open");
var expandersContainerClassName = "".concat(baseClassName, "_expanders");
var openAllButtonClassName = "".concat(baseClassName, "_all-button");
var defaultProviderValue = {
  onExpanderOpenChange: function onExpanderOpenChange() {
    return null;
  },
  expanderGroupOpenState: {
    targetOpenState: false
  }
};
var _a = /*#__PURE__*/React.createContext(defaultProviderValue),
  Provider = _a.Provider,
  ExpanderGroupConsumer = _a.Consumer;
var BaseExpanderGroup = function (_super) {
  __extends(BaseExpanderGroup, _super);
  function BaseExpanderGroup() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.state = {
      allOpen: undefined,
      expanderGroupOpenState: {
        targetOpenState: false
      }
    };
    _this.expanders = {};
    _this.openExpanderCount = 0;
    _this.expanderCount = 0;
    _this.handleExpanderOpenChange = function (id, newState) {
      if (newState !== undefined) {
        if (_this.expanders[id] !== undefined && _this.expanders[id] !== newState) {
          if (newState === true) {
            _this.openExpanderCount += 1;
          } else {
            _this.openExpanderCount -= 1;
          }
        }
        if (_this.expanders[id] === undefined) {
          _this.expanderCount += 1;
          if (newState === true) {
            _this.openExpanderCount += 1;
          }
        }
        _this.expanders[id] = newState;
      } else {
        if (_this.expanders[id] === true) {
          _this.openExpanderCount -= 1;
        }
        _this.expanderCount -= 1;
        delete _this.expanders[id];
      }
      var allOpen = _this.openExpanderCount === _this.expanderCount;
      if (_this.state.allOpen !== allOpen) {
        _this.setState({
          allOpen: allOpen
        });
      }
    };
    _this.handleAllToggleClick = function () {
      _this.setState(function (prevState) {
        return {
          expanderGroupOpenState: {
            targetOpenState: !prevState.allOpen
          }
        };
      });
    };
    return _this;
  }
  BaseExpanderGroup.prototype.render = function () {
    var _a;
    var _b = this.props,
      className = _b.className;
      _b.theme;
      var children = _b.children,
      openAllText = _b.openAllText,
      ariaOpenAllText = _b.ariaOpenAllText,
      closeAllText = _b.closeAllText,
      ariaCloseAllText = _b.ariaCloseAllText,
      _c = _b.showToggleAllButton,
      showToggleAllButton = _c === void 0 ? true : _c,
      toggleAllButtonProps = _b.toggleAllButtonProps,
      forwardedRef = _b.forwardedRef,
      style = _b.style,
      rest = __rest(_b, ["className", "theme", "children", "openAllText", "ariaOpenAllText", "closeAllText", "ariaCloseAllText", "showToggleAllButton", "toggleAllButtonProps", "forwardedRef", "style"]);
    var _d = separateMarginProps(rest),
      passProps = _d[1];
    var _e = this.state,
      expanderGroupOpenState = _e.expanderGroupOpenState,
      allOpen = _e.allOpen;
    return /*#__PURE__*/React.createElement(HtmlDiv, __assign({}, passProps, {
      className: classnames(className, baseClassName, (_a = {}, _a[openClassName] = this.openExpanderCount > 0, _a)),
      style: style
    }), !!showToggleAllButton && ( /*#__PURE__*/React.createElement(HtmlButton, __assign({}, toggleAllButtonProps, {
      onClick: this.handleAllToggleClick,
      className: classnames(toggleAllButtonProps === null || toggleAllButtonProps === void 0 ? void 0 : toggleAllButtonProps.className, openAllButtonClassName),
      forwardedRef: forwardedRef
    }), /*#__PURE__*/React.createElement(HtmlSpan, {
      "aria-hidden": true
    }, allOpen ? closeAllText : openAllText), /*#__PURE__*/React.createElement(VisuallyHidden, null, allOpen ? ariaCloseAllText || closeAllText : ariaOpenAllText || openAllText))), /*#__PURE__*/React.createElement(HtmlDiv, {
      className: expandersContainerClassName
    }, /*#__PURE__*/React.createElement(Provider, {
      value: {
        onExpanderOpenChange: this.handleExpanderOpenChange,
        expanderGroupOpenState: expanderGroupOpenState
      }
    }, children)));
  };
  return BaseExpanderGroup;
}(Component);
var StyledExpanderGroup = styled(function (props) {
  props.globalMargins;
    var passProps = __rest(props, ["globalMargins"]);
  return /*#__PURE__*/React.createElement(BaseExpanderGroup, __assign({}, passProps));
}).withConfig({
  componentId: "sc-1nicijb-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme,
    globalMargins = _a.globalMargins,
    rest = __rest(_a, ["theme", "globalMargins"]);
  var _b = separateMarginProps(rest),
    marginProps = _b[0];
  var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.expanderGroup, marginProps);
  return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var ExpanderGroup = /*#__PURE__*/forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
    var margins = _a.margins;
    return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
      var suomifiTheme = _a.suomifiTheme;
      return /*#__PURE__*/React.createElement(StyledExpanderGroup, __assign({
        theme: suomifiTheme,
        globalMargins: margins,
        forwardedRef: ref
      }, props));
    });
  });
});
ExpanderGroup.displayName = 'ExpanderGroup';
var templateObject_1;

export { ExpanderGroup, ExpanderGroupConsumer };
//# sourceMappingURL=ExpanderGroup.js.map