@ia2coop/ia2-annotation-tool/dist/Instructions/Instructions.js

Annotation tool components library for IA² Project

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Instructions;

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

var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));

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

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

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return (0, _styles.createStyles)({
    container: {
      marginRight: theme.spacing(6),
      marginLeft: theme.spacing(6),
      paddingTop: theme.spacing(10)
    },
    root: {
      display: "flex",
      flexWrap: "wrap",
      "& > *": {
        marginBottom: theme.spacing(5),
        "@media (max-width:780px)": {
          height: theme.spacing(10)
        },
        "@media (min-width:780px)": {
          height: theme.spacing(20)
        },
        "@media (min-width:1024px)": {
          height: theme.spacing(30)
        },
        "@media (min-width:1920px)": {
          height: theme.spacing(60)
        }
      }
    },
    title: {
      fontWeight: "bold",
      paddingTop: theme.spacing(1.5),
      paddingBottom: theme.spacing(0.5)
    },
    instructionsIcon: {
      padding: theme.spacing(3),
      alignSelf: "flex-start",
      paddingTop: theme.spacing(1)
    },
    instructions: {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.common.white,
      display: "flex",
      flexDirection: "row",
      fontFamily: theme.typography.fontFamily,
      alignItems: "center",
      borderTopRightRadius: theme.spacing(2),
      borderTopLeftRadius: theme.spacing(2)
    },
    textContainer: {
      width: theme.spacing(45)
    },
    smallbox: {
      float: "left",
      width: "10px",
      height: "10px",
      marginTop: "5px",
      marginBottom: "5px",
      marginRight: "5px",
      border: "1px solid rgba(0, 0, 0, 0.2)"
    },
    legendsBox: {
      display: "flex",
      backgroundColor: "transparent",
      marginTop: "0.7rem",
      marginBottom: "0.7rem",
      justifyContent: "flex-start",
      width: "70%"
    }
  });
});

function Instructions(props) {
  var classes = useStyles();
  var title = props.title,
      subtitle = props.subtitle,
      legends = props.legends,
      children = props.children;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    square: true,
    className: classes.instructions,
    elevation: 3
  }, /*#__PURE__*/_react.default.createElement(_InfoRounded.default, {
    className: classes.instructionsIcon,
    fontSize: "large"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.textContainer
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
    className: classes.title,
    component: "h1",
    variant: "subtitle1"
  }, title), /*#__PURE__*/_react.default.createElement(_core.Typography, {
    component: "h1",
    variant: "body2"
  }, subtitle), /*#__PURE__*/_react.default.createElement(_core.Box, {
    className: classes.legendsBox
  }, legends.map(function (legend, index) {
    return /*#__PURE__*/_react.default.createElement(_core.Typography, {
      key: legend.id,
      component: "span",
      style: {
        display: "flex",
        alignItems: "center"
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: classes.smallbox,
      style: {
        backgroundColor: legend.color,
        marginLeft: index !== 0 ? "5px" : "0px"
      }
    }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
      variant: "caption"
    }, legend.description));
  }))), children || null));
}

Instructions.defaultProps = {
  subtitle: "",
  legends: [],
  children: null
};