suomifi-ui-components/dist/cjs/core/Modal/ModalTitle/ModalTitle.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
require('../../../reset/HtmlInput/HtmlInput.js');
require('../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
var HtmlSpan = require('../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var Heading = require('../../Heading/Heading.js');
var Modal = require('../Modal/Modal.js');
var ModalTitle_baseStyles = require('./ModalTitle.baseStyles.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../theme/SpacingProvider/SpacingProvider.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var titleClassName = "".concat(Modal.baseClassName, "_title");
var titleClassNames = {
  smallScreen: "".concat(titleClassName, "--smallScreen"),
  focusWrapper: "".concat(titleClassName, "_focus-wrapper")
};
var BaseModalTitle = function (_super) {
  tslib.__extends(BaseModalTitle, _super);
  function BaseModalTitle() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.state = {
      titleFocusable: true
    };
    return _this;
  }
  BaseModalTitle.prototype.render = function () {
    var _a;
    var _this = this;
    var _b = this.props,
      className = _b.className;
      _b.theme;
      var children = _b.children,
      focusTitleOnOpen = _b.focusTitleOnOpen,
      titleRef = _b.titleRef,
      modalVariant = _b.modalVariant;
      _b.scrollable;
      var _c = _b.variant,
      variant = _c === void 0 ? 'h3' : _c,
      _d = _b.as,
      as = _d === void 0 ? 'h2' : _d,
      passProps = tslib.__rest(_b, ["className", "theme", "children", "focusTitleOnOpen", "titleRef", "modalVariant", "scrollable", "variant", "as"]);
    return /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
      className: classnames__default.default(className, titleClassName, (_a = {}, _a[titleClassNames.smallScreen] = modalVariant === 'smallScreen', _a))
    }, /*#__PURE__*/React__default.default.createElement(Heading.Heading, tslib.__assign({
      className: titleClassNames.focusWrapper
    }, this.state.titleFocusable && focusTitleOnOpen ? {
      tabIndex: 0
    } : {}, {
      onBlur: function onBlur() {
        return _this.setState({
          titleFocusable: false
        });
      },
      variant: variant,
      ref: titleRef,
      as: as
    }, passProps), children));
  };
  return BaseModalTitle;
}(React.Component);
var StyledModalTitle = styled.styled(BaseModalTitle).withConfig({
  componentId: "sc-z38xtw-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return ModalTitle_baseStyles.baseStyles(theme);
});
var ModalTitle = function ModalTitle(props) {
  return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React__default.default.createElement(Modal.ModalConsumer, null, function (_a) {
      var focusTitleOnOpen = _a.focusTitleOnOpen,
        titleRef = _a.titleRef,
        variant = _a.variant,
        scrollable = _a.scrollable;
      return /*#__PURE__*/React__default.default.createElement(StyledModalTitle, tslib.__assign({
        focusTitleOnOpen: focusTitleOnOpen
      }, titleRef ? {
        titleRef: titleRef
      } : {}, {
        modalVariant: variant,
        scrollable: scrollable,
        theme: suomifiTheme
      }, props));
    });
  });
};
ModalTitle.displayName = 'ModalTitle';
var templateObject_1;

exports.ModalTitle = ModalTitle;
//# sourceMappingURL=ModalTitle.js.map