@pie-lib/text-select/lib/legend.js

Some react components for text selection

"use strict";

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

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

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

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

var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _renderUi = require("@pie-lib/render-ui");

var _translator = _interopRequireDefault(require("@pie-lib/translator"));

var _classnames = _interopRequireDefault(require("classnames"));

var translator = _translator["default"].translator;
var Legend = (0, _styles.withStyles)(function (theme) {
  return {
    flexContainer: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      gap: "".concat(2 * theme.spacing.unit, "px"),
      borderBottom: '1px solid lightgrey',
      borderTop: '1px solid lightgrey',
      paddingBottom: theme.spacing.unit,
      paddingTop: theme.spacing.unit,
      marginBottom: theme.spacing.unit
    },
    key: {
      fontSize: '14px',
      fontWeight: 'bold',
      color: _renderUi.color.black(),
      marginLeft: theme.spacing.unit
    },
    container: {
      position: 'relative',
      padding: '4px',
      fontSize: '14px',
      borderRadius: '4px'
    },
    correct: {
      border: "".concat(_renderUi.color.correctTertiary(), " solid 2px")
    },
    incorrect: {
      border: "".concat(_renderUi.color.incorrectWithIcon(), " solid 2px")
    },
    missing: {
      border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
    },
    incorrectIcon: {
      backgroundColor: _renderUi.color.incorrectWithIcon()
    },
    correctIcon: {
      backgroundColor: _renderUi.color.correctTertiary()
    },
    icon: {
      color: _renderUi.color.white(),
      position: 'absolute',
      top: '-8px',
      left: '-8px',
      borderRadius: '50%',
      fontSize: '12px',
      padding: '2px'
    }
  };
})(function (_ref) {
  var classes = _ref.classes,
      language = _ref.language,
      showOnlyCorrect = _ref.showOnlyCorrect;
  var legendItems = [{
    Icon: _Check["default"],
    label: translator.t('selectText.correctAnswerSelected', {
      lng: language
    }),
    containerClass: (0, _classnames["default"])(classes.correct, classes.container),
    iconClass: (0, _classnames["default"])(classes.correctIcon, classes.icon)
  }, {
    Icon: _Close["default"],
    label: translator.t('selectText.incorrectSelection', {
      lng: language
    }),
    containerClass: (0, _classnames["default"])(classes.incorrect, classes.container),
    iconClass: (0, _classnames["default"])(classes.incorrectIcon, classes.icon)
  }, {
    Icon: _Close["default"],
    label: translator.t('selectText.correctAnswerNotSelected', {
      lng: language
    }),
    containerClass: (0, _classnames["default"])(classes.missing, classes.container),
    iconClass: (0, _classnames["default"])(classes.incorrectIcon, classes.icon)
  }];

  if (showOnlyCorrect) {
    legendItems.splice(1, 2);
  }

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.flexContainer
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: classes.key
  }, translator.t('selectText.key', {
    lng: language
  })), legendItems.map(function (_ref2, idx) {
    var Icon = _ref2.Icon,
        label = _ref2.label,
        containerClass = _ref2.containerClass,
        iconClass = _ref2.iconClass;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: idx,
      className: containerClass
    }, /*#__PURE__*/_react["default"].createElement(Icon, {
      className: iconClass
    }), /*#__PURE__*/_react["default"].createElement("span", null, label));
  }));
});
exports.Legend = Legend;
//# sourceMappingURL=legend.js.map