baseui/map-marker/floating-route-marker.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styles = require("../styles");
var _overrides = require("../helpers/overrides");
var _typography = require("../typography");
var _constants = require("./constants");
var _styledComponents = require("./styled-components");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const FloatingRouteMarker = ({
  label,
  secondaryLabel,
  startEnhancer: StartEnhancer,
  endEnhancer: EndEnhancer,
  selected = false,
  anchorPosition = _constants.FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft,
  overrides = {}
}) => {
  const [css, theme] = (0, _styles.useStyletron)();
  const backgroundColor = selected ? theme.colors.backgroundInversePrimary : theme.colors.backgroundPrimary;
  const color = selected ? theme.colors.contentInversePrimary : theme.colors.contentPrimary;
  const secondaryLabelColor = selected ? theme.colors.contentInverseSecondary : theme.colors.contentSecondary;
  const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledFloatingRouteMarkerRoot);
  const [IconContainer, iconContainerProps] = (0, _overrides.getOverrides)(overrides.IconContainer, _styledComponents.StyledLabelSlot);
  const [PrimaryLabel, primaryLabelProps] = (0, _overrides.getOverrides)(overrides.Label, _typography.LabelMedium);
  const [SecondaryLabel, secondaryLabelProps] = (0, _overrides.getOverrides)(overrides.SecondaryLabel, _typography.LabelSmall);
  const [Pointer, pointerProps] = (0, _overrides.getOverrides)(overrides.Pointer, _styledComponents.StyledFloatingRouteMarkerPointer);
  const [PointerContainer, pointerContainerProps] = (0, _overrides.getOverrides)(overrides.PointerContainer, _styledComponents.StyledFloatingRouteMarkerPointerContainer);
  const size = _constants.PINHEAD_SIZES_SHAPES.medium;
  const {
    icon
  } = _constants.PINHEAD_DIMENSIONS[size];
  const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
  const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
  return /*#__PURE__*/React.createElement(Root, _extends({
    "data-baseweb": "floating-route-map-marker",
    $background: backgroundColor,
    $gridTemplateColumns: gridTemplateColumns
  }, rootProps), StartEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
    $color: color,
    $size: size
  }, iconContainerProps), /*#__PURE__*/React.createElement(StartEnhancer, {
    size: icon
  })), label && /*#__PURE__*/React.createElement("div", {
    className: css({
      display: 'flex',
      flexDirection: 'column'
    })
  }, /*#__PURE__*/React.createElement(PrimaryLabel, _extends({
    $color: color
  }, primaryLabelProps), label), /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
    $color: secondaryLabelColor
  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
    $color: color,
    $size: size
  }, iconContainerProps), /*#__PURE__*/React.createElement(EndEnhancer, {
    size: icon
  })), /*#__PURE__*/React.createElement(PointerContainer, _extends({
    $position: anchorPosition,
    xmlns: "http://www.w3.org/2000/svg"
  }, _constants.FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES[_constants.FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].type], pointerContainerProps), /*#__PURE__*/React.createElement(Pointer, _extends({
    d: _constants.FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].path,
    $background: backgroundColor
  }, pointerProps))));
};
var _default = exports.default = FloatingRouteMarker;