suomifi-ui-components/dist/esm/core/Link/RouterLink/RouterLink.js

Suomi.fi UI component library

import { __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { forwardRef } from 'react';
import { styled } from 'styled-components';
import { RouterLinkStyles } from './RouterLink.baseStyles.js';
import { IconChevronRight } from 'suomifi-icons';
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 { baseClassName, linkClassNames } from '../BaseLink/BaseLink.js';
import classnames from 'classnames';
import { HtmlA } from '../../../reset/HtmlA/HtmlA.js';
import '../../../reset/HtmlButton/HtmlButton.js';
import '../../../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 '../../../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 { filterDuplicateKeys } from '../../../utils/common/common.js';

var routerLinkClassName = "".concat(baseClassName, "--router");
var PolymorphicLink = function PolymorphicLink(props) {
  var _a;
  var asComponent = props.asComponent;
    props.globalMargins;
    var children = props.children,
    className = props.className,
    smallScreen = props.smallScreen,
    variant = props.variant,
    theme = props.theme,
    _b = props.underline,
    underline = _b === void 0 ? 'hover' : _b,
    forwardedRef = props.forwardedRef,
    rest = __rest(props, ["asComponent", "globalMargins", "children", "className", "smallScreen", "variant", "theme", "underline", "forwardedRef"]);
  var _c = separateMarginProps(rest),
    passProps = _c[1];
  var Component = asComponent || HtmlA;
  var classNames = classnames(baseClassName, routerLinkClassName, className, (_a = {}, _a[linkClassNames.linkUnderline] = underline === 'initial', _a[linkClassNames.accent] = variant === 'accent', _a[linkClassNames.small] = smallScreen, _a));
  if (!!asComponent) {
    return /*#__PURE__*/React.createElement(Component, __assign({
      className: classNames,
      ref: forwardedRef
    }, passProps, {
      style: __assign({}, passProps === null || passProps === void 0 ? void 0 : passProps.style)
    }), variant === 'accent' && ( /*#__PURE__*/React.createElement(IconChevronRight, {
      color: theme.colors.accentBase
    })), children);
  }
  return /*#__PURE__*/React.createElement(Component, __assign({
    className: classNames,
    forwardedRef: forwardedRef
  }, passProps, {
    style: __assign({}, passProps === null || passProps === void 0 ? void 0 : passProps.style)
  }), children);
};
var StyledRouterLink = styled(function (props) {
  var passProps = __rest(props, []);
  return /*#__PURE__*/React.createElement(PolymorphicLink, __assign({}, passProps));
}).withConfig({
  componentId: "sc-1fjvits-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.routerLink, marginProps);
  return RouterLinkStyles(theme, cleanedGlobalMargins, marginProps);
});
var RouterLinkInner = function RouterLinkInner(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(StyledRouterLink, __assign({
        theme: suomifiTheme,
        globalMargins: margins,
        forwardedRef: ref
      }, props));
    });
  });
};
var RouterLink = /*#__PURE__*/forwardRef(RouterLinkInner);
RouterLink.displayName = 'RouterLink';
var templateObject_1;

export { RouterLink };
//# sourceMappingURL=RouterLink.js.map