saagie-ui/src/react/projects/mapInteraction/MapInteractionControls.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../core/atoms/icon/Icon';

const propTypes = {
  onScale: PropTypes.func,
  onFitScale: PropTypes.func,
  scale: PropTypes.number,
  minScale: PropTypes.number,
  maxScale: PropTypes.number,
};

const defaultProps = {
  onScale: () => {},
  onFitScale: () => {},
  scale: 1,
  minScale: 0.4,
  maxScale: 1,
};

const SCALE_STEPS = 8;

export const MapInteractionControls = ({
  onScale,
  onFitScale,
  scale,
  minScale,
  maxScale,
}) => {
  const scalePercent = Math.round(scale * 100);

  const scaleStepSize = Math.abs(maxScale - minScale) / SCALE_STEPS;

  return (
    <div className="sui-prj-map-interaction-controls">
      {scale !== 1 && (
        <div className="sui-prj-map-interaction-controls__zoom as--secondary">
          <button
            className="sui-prj-map-interaction-controls__button"
            type="button"
            onClick={() => onScale(1)}
          >
            <Icon name="zoom-reset" position="start" />
            Reset Zoom
          </button>
        </div>
      )}
      <div className="sui-prj-map-interaction-controls__zoom as--secondary">
        <button
          className="sui-prj-map-interaction-controls__button"
          type="button"
          onClick={() => onFitScale()}
        >
          <Icon name="zoom-content" position="start" />
          Zoom to content
        </button>
      </div>
      <div className="sui-prj-map-interaction-controls__zoom">
        <button
          type="button"
          className="sui-prj-map-interaction-controls__button"
          disabled={scale <= minScale}
          onClick={() => onScale(scale - scaleStepSize)}
        >
          <Icon name="minus" size="sm" />
        </button>
        <div>{`${scalePercent}%`}</div>
        <button
          type="button"
          className="sui-prj-map-interaction-controls__button"
          disabled={scale >= maxScale}
          onClick={() => onScale(scale + scaleStepSize)}
        >
          <Icon name="plus" size="sm" />
        </button>
      </div>
    </div>
  );
};

MapInteractionControls.propTypes = propTypes;
MapInteractionControls.defaultProps = defaultProps;