@ia2coop/ia2-annotation-tool
Version:
Annotation tool components library for IA² Project
231 lines (207 loc) • 8.76 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = MultipleEntitiesSelector;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactRedux = require("react-redux");
var _core = require("@material-ui/core");
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _anonymizerSlice = require("../Editor/anonymizerSlice");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var ITEM_HEIGHT = 48;
var ITEM_PADDING_TOP = 8;
var MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250
}
}
};
var useStyles = (0, _core.makeStyles)(function (theme) {
var _selector;
return (0, _core.createStyles)({
root: {
display: "flex"
},
chips: {
display: "flex",
flexWrap: "wrap"
},
chip: {
margin: 2
},
noLabel: {
marginTop: theme.spacing(3)
},
container: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
width: "60%"
},
selectInput: {
display: "flex",
flexDirection: "row",
backgroundColor: theme.palette.common.white,
borderRadius: theme.spacing(10),
color: theme.palette.secondary.main,
padding: theme.spacing(1, 3),
fontSize: "medium",
fontWeight: "bold",
"&:hover, &:focus": {
color: theme.palette.primary.main,
borderRadius: theme.spacing(10),
backgroundColor: "none"
}
},
selectIcon: {
color: theme.palette.primary.main,
paddingRight: theme.spacing(2)
},
selector: (_selector = {}, (0, _defineProperty2.default)(_selector, theme.breakpoints.down("lg"), {
width: theme.spacing(30)
}), (0, _defineProperty2.default)(_selector, theme.breakpoints.up("lg"), {
width: theme.spacing(50)
}), _selector),
tagDescription: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden"
},
tagTitle: {
marginRight: theme.spacing(1)
},
selectorContainer: {
flexGrow: 1,
marginRight: theme.spacing(2),
alignItems: "center"
},
selectorIcon: {
color: theme.palette.primary.main,
paddingRight: theme.spacing(1)
},
button: {
fontWeight: "bold",
width: "max-content",
borderRadius: theme.spacing(10),
color: theme.palette.secondary.main,
backgroundColor: theme.palette.primary.main,
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2),
"&:hover": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white
}
}
});
});
function getStyles(name, selectedTag, theme) {
return {
fontWeight: selectedTag.indexOf(name) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium
};
}
function MultipleEntitiesSelector(_ref) {
var onMultipleSelection = _ref.onMultipleSelection;
var _useSelector = (0, _reactRedux.useSelector)(_anonymizerSlice.selectAnonymizer),
present = _useSelector.present;
var dispatch = (0, _reactRedux.useDispatch)();
var classes = useStyles();
var theme = (0, _core.useTheme)();
var filteredTags = present.tags.filter(function (tag) {
return tag.enable_multiple_selection;
});
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = (0, _react.useState)(["PER"]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
selectedTags = _useState4[0],
setSelectedTags = _useState4[1];
var handleClickOpen = function handleClickOpen() {
setOpen(true);
};
var handleClose = function handleClose() {
setOpen(false);
};
var handleChange = function handleChange(event) {
setSelectedTags(event.target.value);
};
var handleUpdate = function handleUpdate() {
onMultipleSelection(present.newAnnotations, present.deleteAnnotations, selectedTags.map(function (tagName) {
return filteredTags.find(function (tag) {
return tag.name === tagName;
}).id;
}));
dispatch((0, _anonymizerSlice.clearNewAnnotations)());
dispatch((0, _anonymizerSlice.clearDeleteAnnotations)());
};
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "contained",
className: classes.button,
onClick: handleClickOpen
}, "Selecci\xF3n m\xFAltiple"), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
disableBackdropClick: true,
disableEscapeKeyDown: true,
open: open,
onClose: handleClose
}, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Selecci\xF3n m\xFAltiple de entidades etiquetadas"), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement(_core.DialogContentText, null, "Esta funcionalidad agiliza el proceso de selecci\xF3n de entidades que se repiten en el documento. Mediante esta acci\xF3n ser\xE1n detectadas todas las ocurrencias de cada una de las entidades actualmente etiquetadas. S\xF3lo se buscar\xE1n las entidades que sean parte de las categor\xEDas que seleccione. Considere que es una b\xFAsqueda literal del texto de las entidades etiquetadas."), /*#__PURE__*/_react.default.createElement("form", {
className: classes.container
}, /*#__PURE__*/_react.default.createElement(_core.FormControl, {
className: classes.formControl
}, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
id: "mutiple-chip-label"
}, "Categor\xEDas seleccionadas"), /*#__PURE__*/_react.default.createElement(_core.Select, {
className: classes.selector,
placeholder: "Haz click para seleccionar",
color: "secondary",
classes: {
icon: classes.selectorIcon,
select: classes.selectInput
},
labelId: "mutiple-chip-label",
id: "mutiple-chip",
multiple: true,
label: "Standard",
value: selectedTags || "Haz click para seleccionar",
onChange: handleChange,
input: /*#__PURE__*/_react.default.createElement(_core.Input, {
placeholder: "Haz click para seleccionar",
id: "select-multiple-chip"
}),
renderValue: function renderValue(selected) {
return /*#__PURE__*/_react.default.createElement("div", {
className: classes.chips
}, selected.map(function (value) {
return /*#__PURE__*/_react.default.createElement(_core.Chip, {
key: value,
label: value,
className: classes.chip
});
}));
},
MenuProps: MenuProps
}, filteredTags.map(function (tag) {
return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
key: tag.name,
value: tag.name,
style: getStyles(tag.name, selectedTags, theme)
}, tag.name);
}))))), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: handleUpdate,
color: "primary"
}, "Buscar todas"), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: handleClose,
color: "secondary"
}, "Cancelar"))));
}