tc-ui-toolkit/lib/FontSizeSlider/FontSizeSlider.js

React components used to develop tools for the desktop app translationCore

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactBootstrap = require("react-bootstrap");

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));

var _styles = require("@material-ui/core/styles");

var useStyles = (0, _styles.makeStyles)({
  gridItem: {
    cursor: 'pointer'
  },
  smallFont: {
    display: 'flex',
    margin: '0px',
    fontSize: '16px'
  },
  largeFont: {
    margin: '0px',
    cursor: 'pointer',
    fontSize: '22px'
  },
  sliderRoot: {
    color: '#19579E'
  },
  sliderMark: {
    backgroundColor: '#19579E'
  },
  valueLabel: {
    'top': -14,
    'fontSize': '10px',
    'fontWeight': 'bold',
    'userSelect': 'none',
    '& *': {
      background: 'transparent',
      color: 'var(--accent-color-dark)'
    }
  }
});

function FontSizeSlider(_ref) {
  var min = _ref.min,
      max = _ref.max,
      step = _ref.step,
      marks = _ref.marks,
      value = _ref.value,
      onChange = _ref.onChange;
  var classes = useStyles();

  var handleChange = function handleChange(_, newValue) {
    if (newValue >= min) {
      onChange(newValue);
    }
  };

  var handleDecrease = function handleDecrease() {
    if (value > min) {
      onChange(value - step);
    }
  };

  var handleIncrease = function handleIncrease() {
    if (value < max) {
      onChange(value + step);
    }
  };

  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    container: true,
    spacing: 2,
    alignItems: "center"
  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    onClick: handleDecrease,
    classes: {
      root: classes.gridItem
    }
  }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Glyphicon, {
    glyph: "font",
    className: classes.smallFont
  })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    style: {
      display: 'flex',
      width: '120px'
    }
  }, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
    marks: marks,
    min: min,
    max: max,
    step: step,
    onChange: handleChange,
    classes: {
      root: classes.sliderRoot,
      mark: classes.sliderMark,
      valueLabel: classes.valueLabel
    },
    valueLabelDisplay: "on",
    "aria-labelledby": "font-size-slider",
    value: typeof value === 'number' ? value : min
  })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    onClick: handleIncrease,
    classes: {
      root: classes.gridItem
    }
  }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Glyphicon, {
    glyph: "font",
    className: classes.largeFont
  })));
}

FontSizeSlider.defaultProps = {
  min: 80,
  max: 240,
  step: 20,
  value: 100,
  // 100%
  marks: true
};
FontSizeSlider.propTypes = {
  marks: _propTypes["default"].bool,
  min: _propTypes["default"].number,
  max: _propTypes["default"].number,
  step: _propTypes["default"].number,
  value: _propTypes["default"].number,
  onChange: _propTypes["default"].func.isRequired
};
var _default = FontSizeSlider;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Gb250U2l6ZVNsaWRlci9Gb250U2l6ZVNsaWRlci5qcyJdLCJuYW1lcyI6WyJ1c2VTdHlsZXMiLCJncmlkSXRlbSIsImN1cnNvciIsInNtYWxsRm9udCIsImRpc3BsYXkiLCJtYXJnaW4iLCJmb250U2l6ZSIsImxhcmdlRm9udCIsInNsaWRlclJvb3QiLCJjb2xvciIsInNsaWRlck1hcmsiLCJiYWNrZ3JvdW5kQ29sb3IiLCJ2YWx1ZUxhYmVsIiwiYmFja2dyb3VuZCIsIkZvbnRTaXplU2xpZGVyIiwibWluIiwibWF4Iiwic3RlcCIsIm1hcmtzIiwidmFsdWUiLCJvbkNoYW5nZSIsImNsYXNzZXMiLCJoYW5kbGVDaGFuZ2UiLCJfIiwibmV3VmFsdWUiLCJoYW5kbGVEZWNyZWFzZSIsImhhbmRsZUluY3JlYXNlIiwicm9vdCIsIndpZHRoIiwibWFyayIsImRlZmF1bHRQcm9wcyIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsImJvb2wiLCJudW1iZXIiLCJmdW5jIiwiaXNSZXF1aXJlZCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBRUEsSUFBTUEsU0FBUyxHQUFHLHdCQUFXO0FBQzNCQyxFQUFBQSxRQUFRLEVBQUU7QUFBRUMsSUFBQUEsTUFBTSxFQUFFO0FBQVYsR0FEaUI7QUFFM0JDLEVBQUFBLFNBQVMsRUFBRTtBQUNUQyxJQUFBQSxPQUFPLEVBQUUsTUFEQTtBQUVUQyxJQUFBQSxNQUFNLEVBQUUsS0FGQztBQUdUQyxJQUFBQSxRQUFRLEVBQUU7QUFIRCxHQUZnQjtBQU8zQkMsRUFBQUEsU0FBUyxFQUFFO0FBQ1RGLElBQUFBLE1BQU0sRUFBRSxLQURDO0FBRVRILElBQUFBLE1BQU0sRUFBRSxTQUZDO0FBR1RJLElBQUFBLFFBQVEsRUFBRTtBQUhELEdBUGdCO0FBWTNCRSxFQUFBQSxVQUFVLEVBQUU7QUFBRUMsSUFBQUEsS0FBSyxFQUFFO0FBQVQsR0FaZTtBQWEzQkMs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QUU7QUFBRUMsTUFBQUEsSUFBSSxFQUFFTixPQUFPLENBQUNwQjtBQUFoQjtBQUE3QyxrQkFDRSxnQ0FBQyx5QkFBRDtBQUNFLElBQUEsS0FBSyxFQUFDLE1BRFI7QUFFRSxJQUFBLFNBQVMsRUFBRW9CLE9BQU8sQ0FBQ2Q7QUFGckIsSUFERixDQXhCRixDQURGO0FBaUNEOztBQUVETyxjQUFjLENBQUNnQixZQUFmLEdBQThCO0FBQzVCZixFQUFBQSxHQUFHLEVBQUUsRUFEdUI7QUFFNUJDLEVBQUFBLEdBQUcsRUFBRSxHQUZ1QjtBQUc1QkMsRUFBQUEsSUFBSSxFQUFFLEVBSHNCO0FBSTVCRSxFQUFBQSxLQUFLLEVBQUUsR0FKcUI7QUFJakI7QUFDWEQsRUFBQUEsS0FBSyxFQUFFO0FBTHFCLENBQTlCO0FBUUFKLGNBQWMsQ0FBQ2lCLFNBQWYsR0FBMkI7QUFDekJiLEVBQUFBLEtBQUssRUFBRWMsc0JBQVVDLElBRFE7QUFFekJsQixFQUFBQSxHQUFHLEVBQUVpQixzQkFBVUUsTUFGVTtBQUd6QmxCLEVBQUFBLEdBQUcsRUFBRWdCLHNCQUFVRSxNQUhVO0FBSXpCakIsRUFBQUEsSUFBSSxFQUFFZSxzQkFBVUUsTUFKUztBQUt6QmYsRUFBQUEsS0FBSyxFQUFFYSxzQkFBVUUsTUFMUTtBQU16QmQsRUFBQUEsUUFBUSxFQUFFWSxzQkFBVUcsSUFBVixDQUFlQztBQU5BLENBQTNCO2VBU2V0QixjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBHbHlwaGljb24gfSBmcm9tICdyZWFjdC1ib290c3RyYXAnO1xuaW1wb3J0IEdyaWQgZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUvR3JpZCc7XG5pbXBvcnQgU2xpZGVyIGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL1NsaWRlcic7XG5pbXBvcnQgeyBtYWtlU3R5bGVzIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUvc3R5bGVzJztcblxuY29uc3QgdXNlU3R5bGVzID0gbWFrZVN0eWxlcyh7XG4gIGdyaWRJdGVtOiB7IGN1cnNvcjogJ3BvaW50ZXInIH0sXG4gIHNtYWxsRm9udDoge1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBtYXJnaW46ICcwcHgnLFxuICAgIGZvbnRTaXplOiAnMTZweCcsXG4gIH0sXG4gIGxhcmdlRm9udDoge1xuICAgIG1hcmdpbjogJzBweCcsXG4gICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgZm9udFNpemU6ICcyMnB4JyxcbiAgfSxcbiAgc2xpZGVyUm9vdDogeyBjb2xvcjogJyMxOTU3OUUnIH0sXG4gIHNsaWRlck1hcms6IHsgYmFja2dyb3VuZENvbG9yOiAnIzE5NTc5RScgfSxcbiAgdmFsdWVMYWJlbDoge1xuICAgICd0b3AnOiAtMTQsXG4gICAgJ2ZvbnRTaXplJzogJzEwcHgnLFxuICAgICdmb250V2VpZ2h0JzogJ2JvbGQnLFxuICAgICd1c2VyU2VsZWN0JzogJ25vbmUnLFxuICAgICcmIConOiB7XG4gICAgICBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLFxuICAgICAgY29sb3I6ICd2YXIoLS1hY2NlbnQtY29sb3ItZGFyayknLFxuICAgIH0sXG4gIH0sXG59KTtcblxuZnVuY3Rpb24gRm9udFNpemVTbGlkZXIoe1xuICBtaW4sXG4gIG1heCxcbiAgc3RlcCxcbiAgbWFya3MsXG4gIHZhbHVlLFxuICBvbkNoYW5nZSxcbn0pIHtcbiAgY29uc3QgY2xhc3NlcyA9IHVzZVN0eWxlcygpO1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChfLCBuZXdWYWx1ZSkgPT4ge1xuICAgIGlmIChuZXdWYWx1ZSA+PSBtaW4pIHtcbiAgICAgIG9uQ2hhbmdlKG5ld1ZhbHVlKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlRGVjcmVhc2UgPSAoKSA9PiB7XG4gICAgaWYgKHZhbHVlID4gbWluKSB7XG4gICAgICBvbkNoYW5nZSh2YWx1ZSAtIHN0ZXApO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVJbmNyZWFzZSA9ICgpID0+IHtcbiAgICBpZiAodmFsdWUgPCBtYXgpIHtcbiAgICAgIG9uQ2hhbmdlKHZhbHVlICsgc3RlcCk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWQgY29udGFpbmVyIHNwYWNpbmc9ezJ9IGFsaWduSXRlbXM9J2NlbnRlcic+XG4gICAgICA8R3JpZCBpdGVtIG9uQ2xpY2s9e2hhbmRsZURlY3JlYXNlfSBjbGFzc2VzPXt7IHJvb3Q6IGNsYXNzZXMuZ3JpZEl0ZW0gfX0+XG4gICAgICAgIDxHbHlwaGljb25cbiAgICAgICAgICBnbHlwaD0nZm9udCdcbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzZXMuc21hbGxGb250fVxuICAgICAgICAvPlxuICAgICAgPC9HcmlkPlxuICAgICAgPEdyaWQgaXRlbSBzdHlsZT17eyBkaXNwbGF5OiAnZmxleCcsIHdpZHRoOiAnMTIwcHgnIH19PlxuICAgICAgICA8U2xpZGVyXG4gICAgICAgICAgbWFya3M9e21hcmtzfVxuICAgICAgICAgIG1pbj17bWlufVxuICAgICAgICAgIG1heD17bWF4fVxuICAgICAgICAgIHN0ZXA9e3N0ZXB9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgICBjbGFzc2VzPXt7XG4gICAgICAgICAgICByb290OiBjbGFzc2VzLnNsaWRlclJvb3QsXG4gICAgICAgICAgICBtYXJrOiBjbGFzc2VzLnNsaWRlck1hcmssXG4gICAgICAgICAgICB2YWx1ZUxhYmVsOiBjbGFzc2VzLnZhbHVlTGFiZWwsXG4gICAgICAgICAgfX1cbiAgICAgICAgICB2YWx1ZUxhYmVsRGlzcGxheT0nb24nXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PSdmb250LXNpemUtc2xpZGVyJ1xuICAgICAgICAgIHZhbHVlPXt0eXBlb2YgdmFsdWUgPT09ICdudW1iZXInID8gdmFsdWUgOiBtaW59XG4gICAgICAgIC8+XG4gICAgICA8L0dyaWQ+XG4gICAgICA8R3JpZCBpdGVtIG9uQ2xpY2s9e2hhbmRsZUluY3JlYXNlfSBjbGFzc2VzPXt7IHJvb3Q6IGNsYXNzZXMuZ3JpZEl0ZW0gfX0+XG4gICAgICAgIDxHbHlwaGljb25cbiAgICAgICAgICBnbHlwaD0nZm9udCdcbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzZXMubGFyZ2VGb250fVxuICAgICAgICAvPlxuICAgICAgPC9HcmlkPlxuICAgIDwvR3JpZD5cbiAgKTtcbn1cblxuRm9udFNpemVTbGlkZXIuZGVmYXVsdFByb3BzID0ge1xuICBtaW46IDgwLFxuICBtYXg6IDI0MCxcbiAgc3RlcDogMjAsXG4gIHZhbHVlOiAxMDAsLy8gMTAwJVxuICBtYXJrczogdHJ1ZSxcbn07XG5cbkZvbnRTaXplU2xpZGVyLnByb3BUeXBlcyA9IHtcbiAgbWFya3M6IFByb3BUeXBlcy5ib29sLFxuICBtaW46IFByb3BUeXBlcy5udW1iZXIsXG4gIG1heDogUHJvcFR5cGVzLm51bWJlcixcbiAgc3RlcDogUHJvcFR5cGVzLm51bWJlcixcbiAgdmFsdWU6IFByb3BUeXBlcy5udW1iZXIsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgRm9udFNpemVTbGlkZXI7XG4iXX0=