matrix-react-sdk
Version:
SDK for matrix.org using React
85 lines (82 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _Field = _interopRequireDefault(require("./Field"));
var _languageHandler = require("../../../languageHandler");
var _AccessibleButton = _interopRequireDefault(require("./AccessibleButton"));
var _Tag = require("./Tag");
/*
Copyright 2024 New Vector Ltd.
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/**
* A simple, controlled, composer for entering string tags. Contains a simple
* input, add button, and per-tag remove button.
*/
class TagComposer extends _react.default.PureComponent {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "onInputChange", ev => {
this.setState({
newTag: ev.target.value
});
});
(0, _defineProperty2.default)(this, "onAdd", ev => {
ev.preventDefault();
if (!this.state.newTag) return;
this.props.onAdd(this.state.newTag);
this.setState({
newTag: ""
});
});
this.state = {
newTag: ""
};
}
onRemove(tag) {
// We probably don't need to proxy this, but for
// sanity of `this` we'll do so anyways.
this.props.onRemove(tag);
}
render() {
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)("mx_TagComposer", {
mx_TagComposer_disabled: this.props.disabled
})
}, /*#__PURE__*/_react.default.createElement("form", {
className: "mx_TagComposer_input",
onSubmit: this.onAdd
}, /*#__PURE__*/_react.default.createElement(_Field.default, {
id: this.props.id ? this.props.id + "_field" : undefined,
value: this.state.newTag,
onChange: this.onInputChange,
label: this.props.label || (0, _languageHandler._t)("notifications|keyword"),
placeholder: this.props.placeholder || (0, _languageHandler._t)("notifications|keyword_new"),
disabled: this.props.disabled,
autoComplete: "off"
}), /*#__PURE__*/_react.default.createElement(_AccessibleButton.default, {
onClick: this.onAdd,
kind: "primary",
disabled: this.props.disabled
}, (0, _languageHandler._t)("action|add"))), /*#__PURE__*/_react.default.createElement("div", {
className: "mx_TagComposer_tags",
role: "list"
}, this.props.tags.map((t, i) => /*#__PURE__*/_react.default.createElement(_Tag.Tag, {
label: t,
key: t,
onDeleteClick: this.onRemove.bind(this, t),
disabled: this.props.disabled,
role: "listitem"
}))));
}
}
exports.default = TagComposer;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfY2xhc3NuYW1lcyIsIl9pbnRlcm9wUmVxdWlyZURlZmF1bHQiLCJyZXF1aXJlIiwiX3JlYWN0IiwiX0ZpZWxkIiwiX2xhbmd1YWdlSGFuZGxlciIsIl9BY2Nlc3NpYmxlQnV0dG9uIiwiX1RhZyIsIlRhZ0NvbXBvc2VyIiwiUmVhY3QiLCJQdXJlQ29tcG9uZW50IiwiY29uc3RydWN0b3IiLCJwcm9wcyIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJkZWZhdWx0IiwiZXYiLCJzZXRTdGF0ZSIsIm5ld1RhZyIsInRhcmdldCIsInZhbHVlIiwicHJldmVudERlZmF1bHQiLCJzdGF0ZSIsIm9uQWRkIiwib25SZW1vdmUiLCJ0YWciLCJyZW5kZXIiLCJjcmVhdGVFbGVtZW50IiwiY2xhc3NOYW1lIiwiY2xhc3NOYW1lcyIsIm14X1RhZ0NvbXBvc2VyX2Rpc2FibGVkIiwiZGlzYWJsZWQiLCJvblN1Ym1pdCIsImlkIiwidW5kZWZpbmVkIiwib25DaGFuZ2UiLCJvbklucHV0Q2hhbmdlIiwibGFiZWwiLCJfdCIsInBsYWNlaG9sZGVyIiwiYXV0b0NvbXBsZXRlIiwib25DbGljayIsImtpbmQiLCJyb2xlIiwidGFncyIsIm1hcCIsInQiLCJpIiwiVGFnIiwia2V5Iiwib25EZWxldGVDbGljayIsImJpbmQiLCJleHBvcnRzIl0sInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdmlld3MvZWxlbWVudHMvVGFnQ29tcG9zZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qXG5Db3B5cmlnaHQgMjAyNCBOZXcgVmVjdG9yIEx0ZC5cbkNvcHlyaWdodCAyMDIxLTIwMjMgVGhlIE1hdHJpeC5vcmcgRm91bmRhdGlvbiBDLkkuQy5cblxuU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IEFHUEwtMy4wLW9ubHkgT1IgR1BMLTMuMC1vbmx5XG5QbGVhc2Ugc2VlIExJQ0VOU0UgZmlsZXMgaW4gdGhlIHJlcG9zaXRvcnkgcm9vdCBmb3IgZnVsbCBkZXRhaWxzLlxuKi9cblxuaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSBcImNsYXNzbmFtZXNcIjtcbmltcG9ydCBSZWFjdCwgeyBDaGFuZ2VFdmVudCwgRm9ybUV2ZW50IH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCBGaWVsZCBmcm9tIFwiLi9GaWVsZFwiO1xuaW1wb3J0IHsgX3QgfSBmcm9tIFwiLi4vLi4vLi4vbGFuZ3VhZ2VIYW5kbGVyXCI7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tIFwiLi9BY2Nlc3NpYmxlQnV0dG9uXCI7XG5pbXBvcnQgeyBUYWcgfSBmcm9tIFwiLi9UYWdcIjtcblxuaW50ZXJmYWNlIElQcm9wcyB7XG4gICAgaWQ/OiBzdHJpbmc7XG4gICAgdGFnczogc3RyaW5nW107XG4gICAgb25BZGQ6ICh0YWc6IHN0cmluZykgPT4gdm9pZDtcbiAgICBvblJlbW92ZTogKHRhZzogc3RyaW5nKSA9PiB2b2lkO1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgICBsYWJlbD86IHN0cmluZztcbiAgICBwbGFjZWhvbGRlcj86IHN0cmluZztcbn1cblxuaW50ZXJmYWNlIElTdGF0ZSB7XG4gICAgbmV3VGFnOiBzdHJpbmc7XG59XG5cbi8qKlxuICogQSBzaW1wbGUsIGNvbnRyb2xsZWQsIGNvbXBvc2VyIGZvciBlbnRlcmluZyBzdHJpbmcgdGFncy4gQ29udGFpbnMgYSBzaW1wbGVcbiAqIGlucHV0LCBhZGQgYnV0dG9uLCBhbmQgcGVyLXRhZyByZW1vdmUgYnV0dG9uLlxuICovXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBUYWdDb21wb3NlciBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQ8SVByb3BzLCBJU3RhdGU+IHtcbiAgICBwdWJsaWMgY29uc3RydWN0b3IocHJvcHM6IElQcm9wcykge1xuICAgICAgICBzdXBlcihwcm9wcyk7XG5cbiAgICAgICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgICAgICAgIG5ld1RhZzogXCJcIixcbiAgICAgICAgfTtcbiAgICB9XG5cbiAgICBwcml2YXRlIG9uSW5wdXRDaGFuZ2UgPSAoZXY6IENoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KTogdm9pZCA9PiB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoeyBuZXdUYWc6IGV2LnRhcmdldC52YWx1ZSB9KTtcbiAgICB9O1xuXG4gICAgcHJpdmF0ZSBvbkFkZCA9IChldjogRm9ybUV2ZW50KTogdm9pZCA9PiB7XG4gICAgICAgIGV2LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGlmICghdGhpcy5zdGF0ZS5uZXdUYWcpIHJldHVybjtcblxuICAgICAgICB0aGlzLnByb3BzLm9uQWRkKHRoaXMuc3RhdGUubmV3VGFnKTtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IG5ld1RhZzogXCJcIiB9KTtcbiAgICB9O1xuXG4gICAgcHJpdmF0ZSBvblJlbW92ZSh0YWc6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICAvLyBXZSBwcm9iYWJseSBkb24ndCBuZWVkIHRvIHByb3h5IHRoaXMsIGJ1dCBmb3JcbiAgICAgICAgLy8gc2FuaXR5IG9mIGB0aGlzYCB3ZSdsbCBkbyBzbyBhbnl3YXlzLlxuICAgICAgICB0aGlzLnByb3BzLm9uUmVtb3ZlKHRhZyk7XG4gICAgfVxuXG4gICAgcHVibGljIHJlbmRlcigpOiBSZWFjdC5SZWFjdE5vZGUge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhcIm14X1RhZ0NvbXBvc2VyXCIsIHtcbiAgICAgICAgICAgICAgICAgICAgbXhfVGFnQ29tcG9zZXJfZGlzYWJsZWQ6IHRoaXMucHJvcHMuZGlzYWJsZWQsXG4gICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGZvcm0gY2xhc3NOYW1lPVwibXhfVGFnQ29tcG9zZXJfaW5wdXRcIiBvblN1Ym1pdD17dGhpcy5vbkFkZH0+XG4gICAgICAgICAgICAgICAgICAgIDxGaWVsZFxuICAgICAgICAgICAgICAgICAgICAgICAgaWQ9e3RoaXMucHJvcHMuaWQgPyB0aGlzLnByb3BzLmlkICsgXCJfZmllbGRcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlPXt0aGlzLnN0YXRlLm5ld1RhZ31cbiAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXt0aGlzLm9uSW5wdXRDaGFuZ2V9XG4gICAgICAgICAgICAgICAgICAgICAgICBsYWJlbD17dGhpcy5wcm9wcy5sYWJlbCB8fCBfdChcIm5vdGlmaWNhdGlvbnN8a2V5d29yZFwiKX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHBsYWNlaG9sZGVyPXt0aGlzLnByb3BzLnBsYWNlaG9sZGVyIHx8IF90KFwibm90aWZpY2F0aW9uc3xrZXl3b3JkX25ld1wiKX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGRpc2FibGVkPXt0aGlzLnByb3BzLmRpc2FibGVkfVxuICAgICAgICAgICAgICAgICAgICAgICAgYXV0b0NvbXBsZXRlPVwib2ZmXCJcbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgPEFjY2Vzc2libGVCdXR0b24gb25DbGljaz17dGhpcy5vbkFkZH0ga2luZD1cInByaW1hcnlcIiBkaXNhYmxlZD17dGhpcy5wcm9wcy5kaXNhYmxlZH0+XG4gICAgICAgICAgICAgICAgICAgICAgICB7X3QoXCJhY3Rpb258YWRkXCIpfVxuICAgICAgICAgICAgICAgICAgICA8L0FjY2Vzc2libGVCdXR0b24+XG4gICAgICAgICAgICAgICAgPC9mb3JtPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwibXhfVGFnQ29tcG9zZXJfdGFnc1wiIHJvbGU9XCJsaXN0XCI+XG4gICAgICAgICAgICAgICAgICAgIHt0aGlzLnByb3BzLnRhZ3MubWFwKCh0LCBpKSA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8VGFnXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw9e3R9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAga2V5PXt0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uRGVsZXRlQ2xpY2s9e3RoaXMub25SZW1vdmUuYmluZCh0aGlzLCB0KX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBkaXNhYmxlZD17dGhpcy5wcm9wcy5kaXNhYmxlZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByb2xlPVwibGlzdGl0ZW1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKTtcbiAgICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBUUEsSUFBQUEsV0FBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUMsTUFBQSxHQUFBRixzQkFBQSxDQUFBQyxPQUFBO0FBRUEsSUFBQUUsTUFBQSxHQUFBSCxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUcsZ0JBQUEsR0FBQUgsT0FBQTtBQUNBLElBQUFJLGlCQUFBLEdBQUFMLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBSyxJQUFBLEdBQUFMLE9BQUE7QUFkQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUF3QkE7QUFDQTtBQUNBO0FBQ0E7QUFDZSxNQUFNTSxXQUFXLFNBQVNDLGNBQUssQ0FBQ0MsYUFBYSxDQUFpQjtFQUNsRUMsV0FBV0EsQ0FBQ0MsS0FBYSxFQUFFO0lBQzlCLEtBQUssQ0FBQ0EsS0FBSyxDQUFDO0lBQUMsSUFBQUMsZ0JBQUEsQ0FBQUMsT0FBQSx5QkFPUUMsRUFBaUMsSUFBVztNQUNqRSxJQUFJLENBQUNDLFFBQVEsQ0FBQztRQUFFQyxNQUFNLEVBQUVGLEVBQUUsQ0FBQ0csTUFBTSxDQUFDQztNQUFNLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBQUEsSUFBQU4sZ0JBQUEsQ0FBQUMsT0FBQSxpQkFFZ0JDLEVBQWEsSUFBVztNQUNyQ0EsRUFBRSxDQUFDSyxjQUFjLENBQUMsQ0FBQztNQUNuQixJQUFJLENBQUMsSUFBSSxDQUFDQyxLQUFLLENBQUNKLE1BQU0sRUFBRTtNQUV4QixJQUFJLENBQUNMLEtBQUssQ0FBQ1UsS0FBSyxDQUFDLElBQUksQ0FBQ0QsS0FBSyxDQUFDSixNQUFNLENBQUM7TUFDbkMsSUFBSSxDQUFDRCxRQUFRLENBQUM7UUFBRUMsTUFBTSxFQUFFO01BQUcsQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFmRyxJQUFJLENBQUNJLEtBQUssR0FBRztNQUNUSixNQUFNLEVBQUU7SUFDWixDQUFDO0VBQ0w7RUFjUU0sUUFBUUEsQ0FBQ0MsR0FBVyxFQUFRO0lBQ2hDO0lBQ0E7SUFDQSxJQUFJLENBQUNaLEtBQUssQ0FBQ1csUUFBUSxDQUFDQyxHQUFHLENBQUM7RUFDNUI7RUFFT0MsTUFBTUEsQ0FBQSxFQUFvQjtJQUM3QixvQkFDSXRCLE1BQUEsQ0FBQVcsT0FBQSxDQUFBWSxhQUFBO01BQ0lDLFNBQVMsRUFBRSxJQUFBQyxtQkFBVSxFQUFDLGdCQUFnQixFQUFFO1FBQ3BDQyx1QkFBdUIsRUFBRSxJQUFJLENBQUNqQixLQUFLLENBQUNrQjtNQUN4QyxDQUFDO0lBQUUsZ0JBRUgzQixNQUFBLENBQUFXLE9BQUEsQ0FBQVksYUFBQTtNQUFNQyxTQUFTLEVBQUMsc0JBQXNCO01BQUNJLFFBQVEsRUFBRSxJQUFJLENBQUNUO0lBQU0sZ0JBQ3hEbkIsTUFBQSxDQUFBVyxPQUFBLENBQUFZLGFBQUEsQ0FBQ3RCLE1BQUEsQ0FBQVUsT0FBSztNQUNGa0IsRUFBRSxFQUFFLElBQUksQ0FBQ3BCLEtBQUssQ0FBQ29CLEVBQUUsR0FBRyxJQUFJLENBQUNwQixLQUFLLENBQUNvQixFQUFFLEdBQUcsUUFBUSxHQUFHQyxTQUFVO01BQ3pEZCxLQUFLLEVBQUUsSUFBSSxDQUFDRSxLQUFLLENBQUNKLE1BQU87TUFDekJpQixRQUFRLEVBQUUsSUFBSSxDQUFDQyxhQUFjO01BQzdCQyxLQUFLLEVBQUUsSUFBSSxDQUFDeEIsS0FBSyxDQUFDd0IsS0FBSyxJQUFJLElBQUFDLG1CQUFFLEVBQUMsdUJBQXVCLENBQUU7TUFDdkRDLFdBQVcsRUFBRSxJQUFJLENBQUMxQixLQUFLLENBQUMwQixXQUFXLElBQUksSUFBQUQsbUJBQUUsRUFBQywyQkFBMkIsQ0FBRTtNQUN2RVAsUUFBUSxFQUFFLElBQUksQ0FBQ2xCLEtBQUssQ0FBQ2tCLFFBQVM7TUFDOUJTLFlBQVksRUFBQztJQUFLLENBQ3JCLENBQUMsZUFDRnBDLE1BQUEsQ0FBQVcsT0FBQSxDQUFBWSxhQUFBLENBQUNwQixpQkFBQSxDQUFBUSxPQUFnQjtNQUFDMEIsT0FBTyxFQUFFLElBQUksQ0FBQ2xCLEtBQU07TUFBQ21CLElBQUksRUFBQyxTQUFTO01BQUNYLFFBQVEsRUFBRSxJQUFJLENBQUNsQixLQUFLLENBQUNrQjtJQUFTLEdBQy9FLElBQUFPLG1CQUFFLEVBQUMsWUFBWSxDQUNGLENBQ2hCLENBQUMsZUFDUGxDLE1BQUEsQ0FBQVcsT0FBQSxDQUFBWSxhQUFBO01BQUtDLFNBQVMsRUFBQyxxQkFBcUI7TUFBQ2UsSUFBSSxFQUFDO0lBQU0sR0FDM0MsSUFBSSxDQUFDOUIsS0FBSyxDQUFDK0IsSUFBSSxDQUFDQyxHQUFHLENBQUMsQ0FBQ0MsQ0FBQyxFQUFFQyxDQUFDLGtCQUN0QjNDLE1BQUEsQ0FBQVcsT0FBQSxDQUFBWSxhQUFBLENBQUNuQixJQUFBLENBQUF3QyxHQUFHO01BQ0FYLEtBQUssRUFBRVMsQ0FBRTtNQUNURyxHQUFHLEVBQUVILENBQUU7TUFDUEksYUFBYSxFQUFFLElBQUksQ0FBQzFCLFFBQVEsQ0FBQzJCLElBQUksQ0FBQyxJQUFJLEVBQUVMLENBQUMsQ0FBRTtNQUMzQ2YsUUFBUSxFQUFFLElBQUksQ0FBQ2xCLEtBQUssQ0FBQ2tCLFFBQVM7TUFDOUJZLElBQUksRUFBQztJQUFVLENBQ2xCLENBQ0osQ0FDQSxDQUNKLENBQUM7RUFFZDtBQUNKO0FBQUNTLE9BQUEsQ0FBQXJDLE9BQUEsR0FBQU4sV0FBQSIsImlnbm9yZUxpc3QiOltdfQ==