@orfeas126/box-ui-elements
Version:
Box UI Elements
1,063 lines (984 loc) • 628 kB
JavaScript
/*!
* Box UI Element
*
* Copyright 2019 Box, Inc. All rights reserved.
*
* This product includes software developed by Box, Inc. ("Box")
* (http://www.box.com)
*
* ALL BOX SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
* WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
* IN NO EVENT SHALL BOX BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* See the Box license for the specific language governing permissions
* and limitations under the license.
*/
"use strict";
(globalThis["webpackChunk_orfeas126_box_ui_elements"] = globalThis["webpackChunk_orfeas126_box_ui_elements"] || []).push([["activity-sidebar"],{
/***/ "./src/components/checkbox/Checkbox.tsx":
/*!**********************************************!*\
!*** ./src/components/checkbox/Checkbox.tsx ***!
\**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/uniqueId */ "./node_modules/lodash/uniqueId.js");
/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _CheckboxTooltip__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./CheckboxTooltip */ "./src/components/checkbox/CheckboxTooltip.tsx");
/* harmony import */ var _Checkbox_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Checkbox.scss */ "./src/components/checkbox/Checkbox.scss");
const _excluded = ["className", "description", "fieldLabel", "hideLabel", "id", "inputClassName", "isChecked", "isDisabled", "label", "name", "onFocus", "onChange", "subsection", "tooltip"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
const Checkbox = _ref => {
let {
className = '',
description,
fieldLabel,
hideLabel,
id,
inputClassName,
isChecked,
isDisabled,
label,
name,
onFocus,
onChange,
subsection,
tooltip
// @TODO: eventually remove `rest` in favor of explicit props
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
const generatedID = react__WEBPACK_IMPORTED_MODULE_0__.useRef(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1___default()('checkbox')).current;
// use passed-in ID from props; otherwise generate one
const inputID = id || generatedID;
const checkboxAndLabel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "checkbox-label"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", _extends({
"aria-describedby": description ? `description_${inputID}` : '',
checked: isChecked,
className: inputClassName,
disabled: isDisabled,
id: inputID,
name: name,
onFocus: onFocus,
onChange: onChange,
type: "checkbox"
}, rest)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "checkbox-pointer-target"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('bdl-Checkbox-labelTooltipWrapper', {
'accessibility-hidden': hideLabel
})
}, label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", {
htmlFor: inputID
}, label), tooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_CheckboxTooltip__WEBPACK_IMPORTED_MODULE_3__["default"], {
tooltip: tooltip
})));
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('checkbox-container', className, {
'is-disabled bdl-is-disabled': isDisabled
})
}, fieldLabel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "label"
}, fieldLabel), checkboxAndLabel, description ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
id: `description_${inputID}`,
className: "checkbox-description"
}, description) : null, subsection ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "checkbox-subsection"
}, subsection) : null);
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Checkbox);
/***/ }),
/***/ "./src/components/checkbox/CheckboxField.tsx":
/*!***************************************************!*\
!*** ./src/components/checkbox/CheckboxField.tsx ***!
\***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _Checkbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Checkbox */ "./src/components/checkbox/Checkbox.tsx");
const _excluded = ["field"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
const CheckboxField = _ref => {
let {
field
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
if (!field) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Checkbox__WEBPACK_IMPORTED_MODULE_1__["default"], rest);
}
const {
value
} = field;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Checkbox__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({}, field, rest, {
isChecked: !!value
}));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CheckboxField);
/***/ }),
/***/ "./src/components/checkbox/CheckboxTooltip.tsx":
/*!*****************************************************!*\
!*** ./src/components/checkbox/CheckboxTooltip.tsx ***!
\*****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/index.js");
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
/* harmony import */ var _icons_general_IconInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../icons/general/IconInfo */ "./src/icons/general/IconInfo.tsx");
/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../tooltip */ "./src/components/tooltip/index.ts");
const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_3__.defineMessages)({
checkboxTooltipIconInfoText: {
"id": "boxui.checkboxTooltip.iconInfoText",
"defaultMessage": "Info"
}
});
const CheckboxTooltip = ({
tooltip
}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "checkbox-tooltip-wrapper"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__["default"], {
text: tooltip
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "info-tooltip"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_icons_general_IconInfo__WEBPACK_IMPORTED_MODULE_1__["default"], {
height: 16,
title: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_4__["default"], messages.checkboxTooltipIconInfoText),
width: 16
}))));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CheckboxTooltip);
/***/ }),
/***/ "./src/components/checkbox/index.ts":
/*!******************************************!*\
!*** ./src/components/checkbox/index.ts ***!
\******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ CheckboxField: () => (/* reexport safe */ _CheckboxField__WEBPACK_IMPORTED_MODULE_1__["default"]),
/* harmony export */ "default": () => (/* reexport safe */ _Checkbox__WEBPACK_IMPORTED_MODULE_0__["default"])
/* harmony export */ });
/* harmony import */ var _Checkbox__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Checkbox */ "./src/components/checkbox/Checkbox.tsx");
/* harmony import */ var _CheckboxField__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CheckboxField */ "./src/components/checkbox/CheckboxField.tsx");
/***/ }),
/***/ "./src/components/contact-datalist-item/ContactDatalistItem.tsx":
/*!**********************************************************************!*\
!*** ./src/components/contact-datalist-item/ContactDatalistItem.tsx ***!
\**********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _avatar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../avatar */ "./src/components/avatar/index.ts");
/* harmony import */ var _datalist_item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../datalist-item */ "./src/components/datalist-item/index.ts");
/* harmony import */ var _ContactDatalistItem_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ContactDatalistItem.scss */ "./src/components/contact-datalist-item/ContactDatalistItem.scss");
const _excluded = ["getContactAvatarUrl", "id", "isExternal", "name", "showAvatar", "subtitle"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class ContactDatalistItem extends react__WEBPACK_IMPORTED_MODULE_0__.PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "isMounted", false);
/**
* Success handler for getting avatar url
*
* @param {string} [avatarUrl] the user avatar url
*/
_defineProperty(this, "getAvatarUrlHandler", avatarUrl => {
if (this.isMounted) {
this.setState({
avatarUrl
});
}
});
this.state = {
avatarUrl: undefined
};
}
/**
* Gets the avatar URL for the user from the getContactAvatarUrl prop
*
* @return {void}
*/
getAvatarUrl() {
const {
getContactAvatarUrl,
id,
type
} = this.props;
Promise.resolve(getContactAvatarUrl && id ? getContactAvatarUrl({
id,
type
}) : undefined).then(this.getAvatarUrlHandler).catch(() => {
// noop
});
}
componentDidMount() {
this.isMounted = true;
this.getAvatarUrl();
}
componentWillUnmount() {
this.isMounted = false;
}
render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _this$props = this.props,
{
getContactAvatarUrl,
id,
isExternal,
name,
showAvatar,
subtitle
} = _this$props,
rest = _objectWithoutProperties(_this$props, _excluded);
const {
avatarUrl
} = this.state;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_datalist_item__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({
className: "contact-data-list-item"
}, rest), showAvatar && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_avatar__WEBPACK_IMPORTED_MODULE_1__["default"], {
className: "contact-avatar",
id: id,
name: name,
isExternal: isExternal,
shouldShowExternal: true,
avatarUrl: avatarUrl
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "contact-name-container"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "contact-text contact-name"
}, name), subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "contact-text contact-sub-name"
}, subtitle)));
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ContactDatalistItem);
/***/ }),
/***/ "./src/components/draft-js-editor/DraftJSEditor.js":
/*!*********************************************************!*\
!*** ./src/components/draft-js-editor/DraftJSEditor.js ***!
\*********************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/uniqueId */ "./node_modules/lodash/uniqueId.js");
/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! draft-js */ "./node_modules/draft-js/lib/Draft.js");
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(draft_js__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var draft_js_dist_Draft_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! draft-js/dist/Draft.css */ "./node_modules/draft-js/dist/Draft.css");
/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tooltip */ "./src/components/tooltip/index.ts");
/* harmony import */ var _common_messages__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../common/messages */ "./src/common/messages.js");
/* harmony import */ var _DraftJSEditor_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./DraftJSEditor.scss */ "./src/components/draft-js-editor/DraftJSEditor.scss");
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const OptionalFormattedMessage = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "bdl-Label-optional"
}, "(", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_6__["default"].optional), ")");
class DraftJSEditor extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
constructor(...args) {
super(...args);
/**
* Calls onChange handler passed in
* @param {EditorState} editorState The new/updated editor state
* @returns {void}
*/
_defineProperty(this, "handleChange", editorState => {
const {
onChange
} = this.props;
onChange(editorState);
});
_defineProperty(this, "handleBlur", editorState => {
const {
onBlur
} = this.props;
onBlur(editorState);
});
/**
* Event handler which being passed to 'handleReturn' prop of DraftJSEditor
* This gives consumer the ability to handle return key event before DraftJSEditor handles it.
* @param {SyntheticKeyboardEvent} event
* @returns {string}
*/
_defineProperty(this, "handleReturn", event => {
const {
onReturn,
inputProps
} = this.props;
if (onReturn && !inputProps['aria-activedescendant']) {
// Return 'handled' tells DraftJS Editor to not handle return key event,
// return 'not-handled' tells DraftJS Editor to continue handle the return key event.
// We encapsulate this DraftJS Editor specific contract here, and use true/fase
// to indicate whether to let DraftJS Editor handle return event or not in the upper level.
return onReturn(event) ? 'handled' : 'not-handled';
}
return 'not-handled';
});
_defineProperty(this, "labelID", lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2___default()('label'));
_defineProperty(this, "descriptionID", lodash_uniqueId__WEBPACK_IMPORTED_MODULE_2___default()('description'));
}
render() {
const {
editorState,
error,
hideLabel,
inputProps,
isDisabled,
isRequired,
label,
description,
onFocus,
placeholder
} = this.props;
const {
handleBlur,
handleChange
} = this;
const classes = classnames__WEBPACK_IMPORTED_MODULE_1___default()({
'draft-js-editor': true,
'is-disabled bdl-is-disabled': isDisabled,
'show-error': !!error
});
let a11yProps = {};
if (inputProps.role) {
a11yProps = {
ariaActiveDescendantID: inputProps['aria-activedescendant'],
ariaAutoComplete: inputProps['aria-autocomplete'],
ariaExpanded: inputProps['aria-expanded'],
ariaOwneeID: inputProps['aria-owns'],
ariaMultiline: true,
role: 'textbox'
};
}
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: classes
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('bdl-Label', {
'accessibility-hidden': hideLabel
}),
id: this.labelID
}, label, !isRequired && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(OptionalFormattedMessage, null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "accessibility-hidden screenreader-description",
id: this.descriptionID
}, description), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tooltip__WEBPACK_IMPORTED_MODULE_5__["default"], {
isShown: !!error,
position: "bottom-left",
text: error ? error.message : '',
theme: "error"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(draft_js__WEBPACK_IMPORTED_MODULE_3__.Editor, _extends({}, a11yProps, {
ariaLabelledBy: this.labelID,
ariaDescribedBy: this.descriptionID,
editorState: editorState,
handleReturn: this.handleReturn,
onBlur: handleBlur,
onChange: handleChange,
onFocus: onFocus,
placeholder: placeholder,
readOnly: isDisabled,
stripPastedStyles: true
})))));
}
}
_defineProperty(DraftJSEditor, "defaultProps", {
inputProps: {},
isRequired: false,
isFocused: false
});
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DraftJSEditor);
/***/ }),
/***/ "./src/components/draft-js-editor/index.js":
/*!*************************************************!*\
!*** ./src/components/draft-js-editor/index.js ***!
\*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* reexport safe */ _DraftJSEditor__WEBPACK_IMPORTED_MODULE_0__["default"])
/* harmony export */ });
/* harmony import */ var _DraftJSEditor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DraftJSEditor */ "./src/components/draft-js-editor/DraftJSEditor.js");
/***/ }),
/***/ "./src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js":
/*!******************************************************************************************!*\
!*** ./src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js ***!
\******************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! draft-js */ "./node_modules/draft-js/lib/Draft.js");
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(draft_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/noop */ "./node_modules/lodash/noop.js");
/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _DraftJSMentionSelectorCore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./DraftJSMentionSelectorCore */ "./src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelectorCore.js");
/* harmony import */ var _DraftMentionItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./DraftMentionItem */ "./src/components/form-elements/draft-js-mention-selector/DraftMentionItem.js");
/* harmony import */ var _form_FormInput__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../form/FormInput */ "./src/components/form-elements/form/FormInput.js");
/* harmony import */ var _input_messages__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../input-messages */ "./src/components/form-elements/input-messages.js");
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Scans a Draft ContentBlock for entity ranges, so they can be annotated
* @see docs at {@link https://draftjs.org/docs/advanced-topics-decorators.html#compositedecorator}
* @param {ContentBlock} contentBlock
* @param {function} callback
* @param {ContentState} contentState
*/
const mentionStrategy = (contentBlock, callback, contentState) => {
contentBlock.findEntityRanges(character => {
const entityKey = character.getEntity();
const ret = entityKey !== null && contentState.getEntity(entityKey).getType() === 'MENTION';
return ret;
}, callback);
};
class DraftJSMentionSelector extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
constructor(props) {
super(props);
/**
* Event handler called on blur. Triggers validation
* @param {SyntheticFocusEvent} event The event object
* @returns {void}
*/
_defineProperty(this, "handleBlur", event => {
if (this.props.validateOnBlur && this.containerEl && event.relatedTarget instanceof Node && !this.containerEl.contains(event.relatedTarget)) {
this.checkValidity();
}
});
_defineProperty(this, "handleFocus", event => {
const {
onFocus
} = this.props;
if (onFocus) {
onFocus(event);
}
});
/**
* Updates editorState, rechecks validity
* @param {EditorState} nextEditorState The new editor state to set in the state
* @returns {void}
*/
_defineProperty(this, "handleChange", nextEditorState => {
const {
internalEditorState
} = this.state;
const {
onChange
} = this.props;
onChange(nextEditorState);
if (internalEditorState) {
this.setState({
internalEditorState: nextEditorState
});
}
});
_defineProperty(this, "handleValidityStateUpdateHandler", () => {
const {
isTouched
} = this.state;
if (!isTouched) {
return;
}
const error = this.getErrorFromValidityState();
this.setState({
error
});
});
_defineProperty(this, "checkValidity", () => {
this.handleValidityStateUpdateHandler();
});
const mentionDecorator = new draft_js__WEBPACK_IMPORTED_MODULE_1__.CompositeDecorator([{
strategy: mentionStrategy,
component: _DraftMentionItem__WEBPACK_IMPORTED_MODULE_4__["default"]
}]);
// @NOTE:
// This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)
// or be a controlled component whose EditorState is passed in via the `editorState` prop.
// If `props.editorState` is set, `internalEditorState` is `null`,
// otherwise we initialize it here
this.state = {
contacts: [],
isTouched: false,
internalEditorState: props.editorState ? null : draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createEmpty(mentionDecorator),
error: null
};
}
static getDerivedStateFromProps(nextProps) {
const {
contacts
} = nextProps;
return contacts ? {
contacts
} : null;
}
componentDidUpdate(prevProps, prevState) {
const {
internalEditorState: prevInternalEditorState
} = prevState;
const {
internalEditorState
} = this.state;
const {
editorState: prevEditorStateFromProps
} = prevProps;
const {
editorState
} = this.props;
// Determine whether we're working with the internal editor state or
// external editor state passed in from props
const prevEditorState = prevInternalEditorState || prevEditorStateFromProps;
const currentEditorState = internalEditorState || editorState;
// Only handle isTouched state transitions and check validity if the
// editorState references are different. This is to avoid getting stuck
// in an infinite loop of checking validity because checkValidity always
// calls setState({ error })
if (prevEditorState && currentEditorState && prevEditorState !== currentEditorState) {
const newState = this.getDerivedStateFromEditorState(currentEditorState, prevEditorState);
if (newState) {
this.setState(newState, this.checkValidityIfAllowed);
} else {
this.checkValidityIfAllowed();
}
}
}
getDerivedStateFromEditorState(currentEditorState, previousEditorState) {
const isPreviousEditorStateEmpty = this.isEditorStateEmpty(previousEditorState);
const isCurrentEditorStateEmpty = this.isEditorStateEmpty(currentEditorState);
const isNewEditorState = isCurrentEditorStateEmpty && !isPreviousEditorStateEmpty;
const isEditorStateDirty = isPreviousEditorStateEmpty && !isCurrentEditorStateEmpty;
let newState = null;
// Detect case where controlled EditorState is created anew and empty.
// If next editorState is empty and the current editorState is not empty
// that means it is a new empty state and this component should not be marked dirty
if (isNewEditorState) {
newState = {
isTouched: false,
error: null
};
} else if (isEditorStateDirty) {
// Detect case where controlled EditorState has been made dirty
// If the current editorState is empty and the next editorState is not
// empty then this is the first interaction so mark this component dirty
newState = {
isTouched: true
};
}
return newState;
}
checkValidityIfAllowed() {
const {
validateOnBlur
} = this.props;
if (!validateOnBlur) {
this.checkValidity();
}
}
isEditorStateEmpty(editorState) {
const text = editorState.getCurrentContent().getPlainText().trim();
const lastChangeType = editorState.getLastChangeType();
return text.length === 0 && lastChangeType === null;
}
/**
* @returns {string}
*/
getErrorFromValidityState() {
const {
editorState: externalEditorState,
isRequired,
maxLength,
minLength
} = this.props;
const {
internalEditorState
} = this.state;
// manually check for content length if isRequired is true
const editorState = internalEditorState || externalEditorState;
const {
length
} = editorState.getCurrentContent().getPlainText().trim();
if (isRequired && !length) {
return _input_messages__WEBPACK_IMPORTED_MODULE_6__.valueMissing();
}
if (typeof minLength !== 'undefined' && length < minLength) {
return _input_messages__WEBPACK_IMPORTED_MODULE_6__.tooShort(minLength);
}
if (typeof maxLength !== 'undefined' && length > maxLength) {
return _input_messages__WEBPACK_IMPORTED_MODULE_6__.tooLong(maxLength);
}
return null;
}
render() {
const {
className = '',
contactsLoaded,
editorState: externalEditorState,
hideLabel,
isDisabled,
isRequired,
label,
description,
mentionTriggers,
name,
onMention,
placeholder,
selectorRow,
startMentionMessage,
onReturn
} = this.props;
const {
contacts,
internalEditorState,
error
} = this.state;
const {
handleBlur,
handleChange,
handleFocus
} = this;
const editorState = internalEditorState || externalEditorState;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
ref: containerEl => {
this.containerEl = containerEl;
},
className: className
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_form_FormInput__WEBPACK_IMPORTED_MODULE_5__["default"], {
name: name,
onValidityStateUpdate: this.handleValidityStateUpdateHandler
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DraftJSMentionSelectorCore__WEBPACK_IMPORTED_MODULE_3__["default"], {
contacts: contacts,
contactsLoaded: contactsLoaded,
editorState: editorState,
error: error,
hideLabel: hideLabel,
isDisabled: isDisabled,
isRequired: isRequired,
label: label,
description: description,
mentionTriggers: mentionTriggers,
onBlur: handleBlur,
onChange: handleChange,
onFocus: handleFocus,
onMention: onMention,
onReturn: onReturn,
placeholder: placeholder,
selectorRow: selectorRow,
startMentionMessage: startMentionMessage
})));
}
}
_defineProperty(DraftJSMentionSelector, "defaultProps", {
isRequired: false,
onChange: (lodash_noop__WEBPACK_IMPORTED_MODULE_2___default()),
validateOnBlur: true
});
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DraftJSMentionSelector);
/***/ }),
/***/ "./src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelectorCore.js":
/*!**********************************************************************************************!*\
!*** ./src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelectorCore.js ***!
\**********************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! draft-js */ "./node_modules/draft-js/lib/Draft.js");
/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(draft_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _datalist_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../datalist-item */ "./src/components/datalist-item/index.ts");
/* harmony import */ var _draft_js_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../draft-js-editor */ "./src/components/draft-js-editor/index.js");
/* harmony import */ var _selector_dropdown__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../selector-dropdown */ "./src/components/selector-dropdown/index.js");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ "./src/components/form-elements/draft-js-mention-selector/utils.js");
/* harmony import */ var _messages__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./messages */ "./src/components/form-elements/draft-js-mention-selector/messages.js");
/* harmony import */ var _MentionSelector_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./MentionSelector.scss */ "./src/components/form-elements/draft-js-mention-selector/MentionSelector.scss");
const _excluded = ["item"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
const DefaultSelectorRow = _ref => {
let {
item = {}
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_datalist_item__WEBPACK_IMPORTED_MODULE_3__["default"], rest, item.name, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "dropdown-secondary-text"
}, item.email));
};
const DefaultStartMentionMessage = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_9__["default"], _messages__WEBPACK_IMPORTED_MODULE_7__["default"].startMention);
const MentionStartState = ({
message
}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
role: "alert",
className: "mention-start-state"
}, message);
class DraftJSMentionSelector extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
constructor(props) {
super(props);
/**
* Called on each keypress when a mention is being composed
* @returns {void}
*/
_defineProperty(this, "handleMention", () => {
const {
onMention
} = this.props;
const {
activeMention
} = this.state;
if (onMention) {
onMention(activeMention ? activeMention.mentionString : '');
}
});
/**
* Method that gets called when a mention contact is selected
* @param {number} index The selected index
* @returns {void}
*/
_defineProperty(this, "handleContactSelected", index => {
const {
contacts
} = this.props;
this.addMention(contacts[index]);
this.setState({
activeMention: null,
isFocused: true
}, () => {
this.handleMention();
});
});
_defineProperty(this, "handleBlur", event => {
const {
onBlur
} = this.props;
this.setState({
isFocused: false
});
if (onBlur) {
onBlur(event);
}
});
_defineProperty(this, "handleFocus", event => {
const {
onFocus
} = this.props;
this.setState({
isFocused: true
});
if (onFocus) {
onFocus(event);
}
});
/**
* Event handler called when DraftJSEditor emits onChange
* Checks current text to see if any mentions were made
* @param {EditorState} editorState The new editor state
* @returns {void}
*/
_defineProperty(this, "handleChange", nextEditorState => {
const {
onChange
} = this.props;
const activeMention = this.getActiveMentionForEditorState(nextEditorState);
this.setState({
activeMention
}, () => {
if (onChange) {
onChange(nextEditorState);
}
if (activeMention && activeMention.mentionString) {
this.handleMention();
}
});
});
/**
* @returns {boolean}
*/
_defineProperty(this, "shouldDisplayMentionLookup", () => {
const {
contacts
} = this.props;
const {
activeMention
} = this.state;
return !!(activeMention && activeMention.mentionString && contacts.length);
});
const mentionTriggers = props.mentionTriggers.reduce((prev, current) => `${prev}\\${current}`, '');
this.state = {
activeMention: null,
isFocused: false,
mentionPattern: new RegExp(`([${mentionTriggers}])([^${mentionTriggers}]*)$`)
};
}
/**
* Lifecycle method that gets called immediately after an update
* @param {object} lastProps Props the component is receiving
* @returns {void}
*/
componentDidUpdate(prevProps) {
const {
contacts: prevContacts
} = prevProps;
const {
contacts: currentContacts
} = this.props;
const {
activeMention
} = this.state;
if (activeMention !== null && !currentContacts.length && prevContacts.length !== currentContacts.length) {
// if empty set of contacts get passed in, set active mention to null
this.setState({
activeMention: null
});
}
}
/**
* Extracts the active mention from the editor state
*
* @param {EditorState} editorState
* @returns {object}
*/
getActiveMentionForEditorState(editorState) {
const {
mentionPattern
} = this.state;
return (0,_utils__WEBPACK_IMPORTED_MODULE_6__.getActiveMentionForEditorState)(editorState, mentionPattern);
}
/**
* Inserts a selected mention into the editor
* @param {object} mention The selected mention to insert
*/
addMention(mention) {
const {
activeMention
} = this.state;
const {
editorState
} = this.props;
const editorStateWithLink = (0,_utils__WEBPACK_IMPORTED_MODULE_6__.addMention)(editorState, activeMention, mention);
this.setState({
activeMention: null
}, () => {
this.handleChange(editorStateWithLink);
});
}
render() {
const {
className,
contacts,
contactsLoaded,
editorState,
error,
hideLabel,
isDisabled,
isRequired,
label,
description,
onReturn,
placeholder,
selectorRow,
startMentionMessage,
onMention
} = this.props;
const {
activeMention,
isFocused
} = this.state;
const classes = classnames__WEBPACK_IMPORTED_MODULE_1___default()('mention-selector-wrapper', className);
const showMentionStartState = !!(onMention && activeMention && !activeMention.mentionString && isFocused);
const usersFoundMessage = this.shouldDisplayMentionLookup() ? _objectSpread(_objectSpread({}, _messages__WEBPACK_IMPORTED_MODULE_7__["default"].usersFound), {}, {
values: {
usersCount: contacts.length
}
}) : _messages__WEBPACK_IMPORTED_MODULE_7__["default"].noUsersFound;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: classes
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_selector_dropdown__WEBPACK_IMPORTED_MODULE_5__["default"], {
onSelect: this.handleContactSelected,
selector: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_draft_js_editor__WEBPACK_IMPORTED_MODULE_4__["default"], {
editorState: editorState,
error: error,
hideLabel: hideLabel,
isDisabled: isDisabled,
isFocused: isFocused,
isRequired: isRequired,
label: label,
description: description,
onBlur: this.handleBlur,
onFocus: this.handleFocus,
onChange: this.handleChange,
onReturn: onReturn,
placeholder: placeholder
})
}, this.shouldDisplayMentionLookup() ? contacts.map(contact => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.cloneElement(selectorRow, _objectSpread(_objectSpread(_objectSpread({}, selectorRow.props), contact), {}, {
key: contact.id
}))) : []), showMentionStartState ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(MentionStartState, {
message: startMentionMessage
}) : null, contactsLoaded && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
className: "accessibility-hidden",
"data-testid": "accessibility-alert",
role: "alert"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_9__["default"], usersFoundMessage)));
}
}
_defineProperty(DraftJSMentionSelector, "defaultProps", {
className: '',
contacts: [],
isDisabled: false,
isRequired: false,
mentionTriggers: _utils__WEBPACK_IMPORTED_MODULE_6__.defaultMentionTriggers,
selectorRow: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(DefaultSelectorRow, null),
startMentionMessage: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(DefaultStartMentionMessage, null)
});
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DraftJSMentionSelector);
/***/ }),
/***/ "./src/components/form-eleme