@orfeas126/box-ui-elements
Version:
Box UI Elements
1,063 lines (955 loc) • 144 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.
*/
(globalThis["webpackChunk_orfeas126_box_ui_elements"] = globalThis["webpackChunk_orfeas126_box_ui_elements"] || []).push([["skills-sidebar"],{
/***/ "./src/components/pill-cloud/PillCloud.js":
/*!************************************************!*\
!*** ./src/components/pill-cloud/PillCloud.js ***!
\************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 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_isEqual__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/isEqual */ "./node_modules/lodash/isEqual.js");
/* harmony import */ var lodash_isEqual__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_isEqual__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../button */ "./src/components/button/index.ts");
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); }
const PillCloud = ({
options,
onSelect,
selectedOptions = [],
buttonProps = {}
}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "bdl-PillCloud pill-cloud-container"
}, options && options.map(option => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_button__WEBPACK_IMPORTED_MODULE_3__["default"], _extends({
key: option.value,
className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('bdl-Pill', 'bdl-PillCloud-button', 'pill', 'pill-cloud-button', {
'is-selected': selectedOptions.find(op => lodash_isEqual__WEBPACK_IMPORTED_MODULE_2___default()(op, option))
}),
onClick: onSelect ? () => onSelect(option) : undefined,
"data-resin-target": option.value
}, buttonProps), option.displayText)));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PillCloud);
/***/ }),
/***/ "./src/components/primary-button/PrimaryButton.tsx":
/*!*********************************************************!*\
!*** ./src/components/primary-button/PrimaryButton.tsx ***!
\*********************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 _button_Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../button/Button */ "./src/components/button/Button.tsx");
const _excluded = ["children", "className"];
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 PrimaryButton = _ref => {
let {
children,
className = ''
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_button_Button__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({
className: `btn-primary ${className}`
}, rest), children);
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PrimaryButton);
/***/ }),
/***/ "./src/elements/content-sidebar/SkillsSidebar.js":
/*!*******************************************************!*\
!*** ./src/elements/content-sidebar/SkillsSidebar.js ***!
\*******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ SkillsSidebarComponent: () => (/* binding */ SkillsSidebar),
/* 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_flow__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/flow */ "./node_modules/lodash/flow.js");
/* harmony import */ var lodash_flow__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_flow__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/get */ "./node_modules/lodash/get.js");
/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_get__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash/noop */ "./node_modules/lodash/noop.js");
/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! react-intl */ "./node_modules/react-intl/lib/src/components/message.js");
/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../api */ "./src/api/index.js");
/* harmony import */ var _components_loading_indicator_LoadingIndicator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../components/loading-indicator/LoadingIndicator */ "./src/components/loading-indicator/LoadingIndicator.tsx");
/* harmony import */ var _common_messages__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common/messages */ "./src/elements/common/messages.js");
/* harmony import */ var _SidebarContent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./SidebarContent */ "./src/elements/content-sidebar/SidebarContent.js");
/* harmony import */ var _skills_SidebarSkills__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./skills/SidebarSkills */ "./src/elements/content-sidebar/skills/SidebarSkills.js");
/* harmony import */ var _common_logger_constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../common/logger/constants */ "./src/elements/common/logger/constants.js");
/* harmony import */ var _utils_performance__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils/performance */ "./src/utils/performance.js");
/* harmony import */ var _common_api_context__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../common/api-context */ "./src/elements/common/api-context/index.js");
/* harmony import */ var _common_error_boundary__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../common/error-boundary */ "./src/elements/common/error-boundary/index.js");
/* harmony import */ var _common_logger__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../common/logger */ "./src/elements/common/logger/index.js");
/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../constants */ "./src/constants.js");
/* harmony import */ var _SkillsSidebar_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./SkillsSidebar.scss */ "./src/elements/content-sidebar/SkillsSidebar.scss");
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); }
/**
*
* @file Skills sidebar component
* @author Box
*/
const MARK_NAME_JS_READY = `${_constants__WEBPACK_IMPORTED_MODULE_14__.ORIGIN_SKILLS_SIDEBAR}_${_common_logger_constants__WEBPACK_IMPORTED_MODULE_9__.EVENT_JS_READY}`;
(0,_utils_performance__WEBPACK_IMPORTED_MODULE_10__.mark)(MARK_NAME_JS_READY);
class SkillsSidebar extends react__WEBPACK_IMPORTED_MODULE_0__.PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "state", {
errors: {}
});
/**
* Handles skills fetch success
*
* @private
* @param {Array<SkillCard>} cards - Skills cards
* @return {void}
*/
_defineProperty(this, "fetchSkillsSuccessCallback", cards => {
this.updatePreviewTranscript(cards);
this.setState({
cards
});
});
/**
* Updates Preview with transcript data
*
* @private
* @param {Array<SkillCard>} cards - Skills cards
* @return {void}
*/
_defineProperty(this, "updatePreviewTranscript", cards => {
const {
getPreview,
getViewer
} = this.props;
const preview = getPreview ? getPreview() : null;
const viewer = getViewer ? getViewer() : null;
const transcriptCard = cards.find(card => card.skill_card_type === _constants__WEBPACK_IMPORTED_MODULE_14__.SKILLS_TRANSCRIPT);
if (!transcriptCard || !preview) {
return;
}
if (!viewer) {
preview.addListener('load', ({
viewer: loadedViewer
}) => {
if (typeof loadedViewer.loadAutoGeneratedCaptions === 'function') {
loadedViewer.loadAutoGeneratedCaptions(transcriptCard);
}
});
} else if (typeof viewer.loadAutoGeneratedCaptions === 'function') {
viewer.loadAutoGeneratedCaptions(transcriptCard);
}
});
/**
* Success handler for save
*
* @private
* @param {Array} updatedCards - updated skill cards
* @param {number} index - index of the card being edited
* @return {void}
*/
_defineProperty(this, "onSaveSuccessHandler", (index, updatedCards) => {
const {
errors
} = this.state;
const clone = _objectSpread({}, errors);
delete clone[index];
this.updatePreviewTranscript(updatedCards);
this.setState({
cards: updatedCards,
errors: clone
});
});
/**
* Error handler for save
*
* @private
* @param {number} index - index of the card being edited
* @return {void}
*/
_defineProperty(this, "onSaveErrorHandler", index => {
const {
errors
} = this.state;
const clone = _objectSpread({}, errors);
clone[index] = true;
this.setState({
errors: clone
});
});
/**
* Updates skill metadata
*
* @private
* @param {number} index - index of the card being edited
* @param {Array} removes - entries to remove
* @param {Array} adds - entries to add
* @param {Array} replaces - entries to replace
* @return {void}
*/
_defineProperty(this, "onSave", (index, removes = [], adds = [], replaces = []) => {
const {
api,
file
} = this.props;
const {
cards = []
} = this.state;
const card = cards[index];
const path = `/cards/${index}`;
const ops = [];
const canEdit = lodash_get__WEBPACK_IMPORTED_MODULE_2___default()(file, _constants__WEBPACK_IMPORTED_MODULE_14__.FIELD_PERMISSIONS_CAN_UPLOAD, false);
if (!canEdit || !card) {
return;
}
if (Array.isArray(replaces)) {
replaces.forEach(({
replaced,
replacement
}) => {
const idx = card.entries.findIndex(entry => entry === replaced);
if (idx > -1) {
ops.push({
op: 'replace',
path: `${path}/entries/${idx}`,
value: replacement
});
}
});
}
if (Array.isArray(removes)) {
const deletes = [];
removes.forEach(removed => {
const idx = card.entries.findIndex(entry => entry === removed);
if (idx > -1) {
deletes.push(idx);
}
});
// To maintain metadata index positions, removes should be
// done is reverse order with largest index being removed first.
// Remove operations are atomic and don't happen in batch.
deletes.sort((a, b) => b - a) // number sort in descending order
.forEach(idx => {
ops.push({
op: 'remove',
path: `${path}/entries/${idx}`
});
});
}
if (Array.isArray(adds)) {
adds.forEach(added => {
ops.push({
op: 'add',
path: `${path}/entries/-`,
value: added
});
});
}
// If no ops, don't proceed
if (ops.length === 0) {
return;
}
// Add test ops before any other ops
ops.splice(0, 0, {
op: 'test',
path,
value: card
});
api.getMetadataAPI(false).updateSkills(file, ops, updatedCards => {
this.onSaveSuccessHandler(index, updatedCards);
}, () => {
this.onSaveErrorHandler(index);
});
});
const {
logger
} = this.props;
logger.onReadyMetric({
endMarkName: MARK_NAME_JS_READY
});
}
componentDidMount() {
const {
api,
file
} = this.props;
api.getMetadataAPI(false).getSkills(file, this.fetchSkillsSuccessCallback, (lodash_noop__WEBPACK_IMPORTED_MODULE_3___default()));
}
componentDidUpdate({
refreshIdentity: prevRefreshIdentity
}) {
const {
api,
file,
refreshIdentity
} = this.props;
if (refreshIdentity !== prevRefreshIdentity) {
api.getMetadataAPI(false).getSkills(file, this.fetchSkillsSuccessCallback, (lodash_noop__WEBPACK_IMPORTED_MODULE_3___default()));
}
}
render() {
const {
file,
getViewer,
elementId
} = this.props;
const {
cards,
errors
} = this.state;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SidebarContent__WEBPACK_IMPORTED_MODULE_7__["default"], {
className: "bcs-skills",
elementId: elementId,
sidebarView: _constants__WEBPACK_IMPORTED_MODULE_14__.SIDEBAR_VIEW_SKILLS,
title: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_16__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_6__["default"].sidebarSkillsTitle)
}, cards ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_skills_SidebarSkills__WEBPACK_IMPORTED_MODULE_8__["default"], {
cards: cards,
errors: errors,
file: file,
getViewer: getViewer,
onSkillChange: this.onSave
}) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_loading_indicator_LoadingIndicator__WEBPACK_IMPORTED_MODULE_5__["default"], null));
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (lodash_flow__WEBPACK_IMPORTED_MODULE_1___default()([(0,_common_logger__WEBPACK_IMPORTED_MODULE_13__.withLogger)(_constants__WEBPACK_IMPORTED_MODULE_14__.ORIGIN_SKILLS_SIDEBAR), (0,_common_error_boundary__WEBPACK_IMPORTED_MODULE_12__.withErrorBoundary)(_constants__WEBPACK_IMPORTED_MODULE_14__.ORIGIN_SKILLS_SIDEBAR), _common_api_context__WEBPACK_IMPORTED_MODULE_11__.withAPIContext])(SkillsSidebar));
/***/ }),
/***/ "./src/elements/content-sidebar/skills/SidebarSkills.js":
/*!**************************************************************!*\
!*** ./src/elements/content-sidebar/skills/SidebarSkills.js ***!
\**************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 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 _common_messages__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../common/messages */ "./src/elements/common/messages.js");
/* harmony import */ var _common_interactionTargets__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../common/interactionTargets */ "./src/elements/common/interactionTargets.js");
/* harmony import */ var _SidebarSection__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../SidebarSection */ "./src/elements/content-sidebar/SidebarSection.js");
/* harmony import */ var _skillUtils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./skillUtils */ "./src/elements/content-sidebar/skills/skillUtils.js");
/* harmony import */ var _SidebarSkillsCard__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./SidebarSkillsCard */ "./src/elements/content-sidebar/skills/SidebarSkillsCard.js");
/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../constants */ "./src/constants.js");
/**
*
* @file Details sidebar component
* @author Box
*/
/**
* Get ths skill interaction target based on card type
*
* @param {Object} card - skill card
* @return {string} - interaction target
*/
const getCardInteractionTarget = ({
skill_card_type
}) => {
switch (skill_card_type) {
case _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_KEYWORD:
return _common_interactionTargets__WEBPACK_IMPORTED_MODULE_3__.SKILLS_TARGETS.KEYWORDS.CARD;
case _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_FACE:
case _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_TIMELINE:
return _common_interactionTargets__WEBPACK_IMPORTED_MODULE_3__.SKILLS_TARGETS.FACES.CARD;
case _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_TRANSCRIPT:
return _common_interactionTargets__WEBPACK_IMPORTED_MODULE_3__.SKILLS_TARGETS.TRANSCRIPTS.CARD;
default:
return '';
}
};
/**
* Get ths string skill title based on card title
*
* @param {Object} card - skill card
* @return {string} - skill title
*/
const getCardTitle = ({
skill_card_type,
skill_card_title = {}
}) => {
const {
code,
message
} = skill_card_title;
const defaultKey = `${skill_card_type}Skill`;
const defaultMessage = _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"][defaultKey] || _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].defaultSkill;
switch (code) {
case 'skills_faces':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].faceSkill);
case 'skills_transcript':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].transcriptSkill);
case 'skills_topics':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].topicsSkill);
case 'skills_status':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].statusSkill);
case 'skills_error':
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_2__["default"].error);
default:
return message || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_8__["default"], defaultMessage);
}
};
const SidebarSkills = ({
file,
cards,
errors,
getViewer,
onSkillChange
}) => {
const {
permissions = {}
} = file;
const isSkillEditable = !!permissions.can_upload;
return cards.map((card, index) => {
if (card.error && !card.status) {
card.skill_card_type = _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_STATUS;
card.status = {
code: _constants__WEBPACK_IMPORTED_MODULE_7__.SKILLS_ERROR_UNKNOWN
};
delete card.error;
}
const {
id
} = card;
const cardId = id || lodash_uniqueId__WEBPACK_IMPORTED_MODULE_1___default()('card_');
const isValid = (0,_skillUtils__WEBPACK_IMPORTED_MODULE_5__.isValidSkillsCard)(file, card);
const interactionTarget = getCardInteractionTarget(card);
const title = getCardTitle(card);
const hasEntries = Array.isArray(card.entries) ? card.entries.length > 0 : isValid;
return isValid ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SidebarSection__WEBPACK_IMPORTED_MODULE_4__["default"], {
key: cardId,
interactionTarget: interactionTarget,
isOpen: hasEntries,
title: title
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SidebarSkillsCard__WEBPACK_IMPORTED_MODULE_6__["default"], {
card: card,
cards: cards,
getViewer: getViewer,
hasError: !!errors[index],
isEditable: isSkillEditable,
onSkillChange: (...args) => onSkillChange(index, ...args)
})) : null;
});
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SidebarSkills);
/***/ }),
/***/ "./src/elements/content-sidebar/skills/SidebarSkillsCard.js":
/*!******************************************************************!*\
!*** ./src/elements/content-sidebar/skills/SidebarSkillsCard.js ***!
\******************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 _status__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./status */ "./src/elements/content-sidebar/skills/status/index.js");
/* harmony import */ var _transcript__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./transcript */ "./src/elements/content-sidebar/skills/transcript/index.js");
/* harmony import */ var _keywords__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./keywords */ "./src/elements/content-sidebar/skills/keywords/index.js");
/* harmony import */ var _faces__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./faces */ "./src/elements/content-sidebar/skills/faces/index.js");
/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../constants */ "./src/constants.js");
/**
*
* @file Skills card component
* @author Box
*/
const SidebarSkillsCard = ({
card,
cards,
hasError,
isEditable,
onSkillChange,
getViewer
}) => {
switch (card.skill_card_type) {
case _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_KEYWORD:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_keywords__WEBPACK_IMPORTED_MODULE_3__["default"], {
card: card,
getViewer: getViewer,
hasError: hasError,
isEditable: isEditable,
onSkillChange: onSkillChange,
transcript: isEditable ? cards.find(({
skill_card_type
}) => skill_card_type === _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_TRANSCRIPT) : undefined
});
case _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_TIMELINE:
case _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_FACE:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_faces__WEBPACK_IMPORTED_MODULE_4__["default"], {
card: card,
getViewer: getViewer,
hasError: hasError,
isEditable: isEditable,
onSkillChange: onSkillChange
});
case _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_TRANSCRIPT:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_transcript__WEBPACK_IMPORTED_MODULE_2__["default"], {
card: card,
getViewer: getViewer,
hasError: hasError,
isEditable: isEditable,
onSkillChange: onSkillChange
});
case _constants__WEBPACK_IMPORTED_MODULE_5__.SKILLS_STATUS:
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_status__WEBPACK_IMPORTED_MODULE_1__["default"], {
card: card
});
default:
return null;
}
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SidebarSkillsCard);
/***/ }),
/***/ "./src/elements/content-sidebar/skills/faces/Face.js":
/*!***********************************************************!*\
!*** ./src/elements/content-sidebar/skills/faces/Face.js ***!
\***********************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 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 _components_plain_button_PlainButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../components/plain-button/PlainButton */ "./src/components/plain-button/PlainButton.tsx");
/* harmony import */ var _icons_general_IconClose__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../icons/general/IconClose */ "./src/icons/general/IconClose.tsx");
/* harmony import */ var _icons_general_IconMinus__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../icons/general/IconMinus */ "./src/icons/general/IconMinus.tsx");
/* harmony import */ var _common_interactionTargets__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../common/interactionTargets */ "./src/elements/common/interactionTargets.js");
/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../constants */ "./src/constants.js");
/* harmony import */ var _Face_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Face.scss */ "./src/elements/content-sidebar/skills/faces/Face.scss");
/**
*
* @file File Keywords SkillCard component
* @author Box
*/
const Face = ({
face,
selected,
isEditing,
onDelete,
onSelect
}) => {
const isAnyFaceSelected = !!selected;
const isCurrentFaceSelected = face === selected;
const isFaceSelected = isAnyFaceSelected && isCurrentFaceSelected && !isEditing;
const faceClassName = classnames__WEBPACK_IMPORTED_MODULE_1___default()('be-face-wrapper', {
'be-face-unselected': !isEditing && isAnyFaceSelected && !isCurrentFaceSelected
});
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: faceClassName
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_plain_button_PlainButton__WEBPACK_IMPORTED_MODULE_2__["default"], {
className: "be-face",
"data-resin-target": _common_interactionTargets__WEBPACK_IMPORTED_MODULE_5__.SKILLS_TARGETS.FACES.FACE,
onClick: () => !isEditing && onSelect(face),
type: "button"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("img", {
alt: face.text,
src: face.image_url,
title: face.text
}), isFaceSelected && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_icons_general_IconMinus__WEBPACK_IMPORTED_MODULE_4__["default"], {
color: _constants__WEBPACK_IMPORTED_MODULE_6__.COLOR_WHITE
})), isEditing && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_plain_button_PlainButton__WEBPACK_IMPORTED_MODULE_2__["default"], {
className: "be-face-delete",
"data-resin-target": _common_interactionTargets__WEBPACK_IMPORTED_MODULE_5__.SKILLS_TARGETS.FACES.DELETE,
onClick: () => onDelete(face),
type: "button"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_icons_general_IconClose__WEBPACK_IMPORTED_MODULE_3__["default"], {
color: _constants__WEBPACK_IMPORTED_MODULE_6__.COLOR_999,
height: 16,
width: 16
})));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Face);
/***/ }),
/***/ "./src/elements/content-sidebar/skills/faces/Faces.js":
/*!************************************************************!*\
!*** ./src/elements/content-sidebar/skills/faces/Faces.js ***!
\************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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_14__ = __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 _components_plain_button_PlainButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../components/plain-button/PlainButton */ "./src/components/plain-button/PlainButton.tsx");
/* harmony import */ var _components_primary_button_PrimaryButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../components/primary-button/PrimaryButton */ "./src/components/primary-button/PrimaryButton.tsx");
/* harmony import */ var _components_loading_indicator_LoadingIndicatorWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../components/loading-indicator/LoadingIndicatorWrapper */ "./src/components/loading-indicator/LoadingIndicatorWrapper.tsx");
/* harmony import */ var _components_inline_error_InlineError__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../components/inline-error/InlineError */ "./src/components/inline-error/InlineError.js");
/* harmony import */ var _components_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../components/tooltip/Tooltip */ "./src/components/tooltip/Tooltip.tsx");
/* harmony import */ var _components_button_Button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../components/button/Button */ "./src/components/button/Button.tsx");
/* harmony import */ var _icons_general_IconEdit__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../icons/general/IconEdit */ "./src/icons/general/IconEdit.tsx");
/* harmony import */ var _common_messages__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../common/messages */ "./src/elements/common/messages.js");
/* harmony import */ var _common_interactionTargets__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../common/interactionTargets */ "./src/elements/common/interactionTargets.js");
/* harmony import */ var _Face__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Face */ "./src/elements/content-sidebar/skills/faces/Face.js");
/* harmony import */ var _timeline__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../timeline */ "./src/elements/content-sidebar/skills/timeline/index.js");
/* harmony import */ var _Faces_scss__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Faces.scss */ "./src/elements/content-sidebar/skills/faces/Faces.scss");
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); }
/**
*
* @file Faces Skill Card component
* @author Box
*/
class Faces extends react__WEBPACK_IMPORTED_MODULE_0__.PureComponent {
/**
* [constructor]
*
* @public
* @return {Faces}
*/
constructor(props) {
super(props);
/**
* Toggles the edit mode
*
* @private
* @return {void}
*/
_defineProperty(this, "toggleIsEditing", () => {
this.setState(prevState => ({
isEditing: !prevState.isEditing
}));
});
/**
* Toggles face selection
*
* @private
* @return {void}
*/
_defineProperty(this, "onSelect", face => {
const {
selected
} = this.state;
this.setState({
selected: selected === face ? undefined : face
});
});
/**
* Deletes a face
*
* @private
* @return {void}
*/
_defineProperty(this, "onDelete", face => {
const {
removes
} = this.state;
removes.push(face);
this.setState({
removes: removes.slice(0)
});
});
/**
* Saves the new card data
*
* @private
* @return {void}
*/
_defineProperty(this, "onSave", () => {
const {
onSkillChange
} = this.props;
const {
removes
} = this.state;
this.toggleIsEditing();
if (removes.length > 0) {
this.setState({
isLoading: true
});
onSkillChange(removes);
}
});
/**
* Cancels editing
*
* @private
* @return {void}
*/
_defineProperty(this, "onCancel", () => {
this.resetState(this.props);
});
this.state = {
faces: props.card.entries,
removes: [],
isEditing: props.hasError,
hasError: props.hasError,
isLoading: false
};
}
/**
* Helper to reset the state
*
* @private
* @param {Object} props - component props
* @return {void}
*/
resetState(props) {
this.setState({
faces: props.card.entries,
removes: [],
isEditing: false,
selected: undefined,
hasError: false,
isLoading: false
});
}
/**
* Renders the faces
*
* @private
* @return {void}
*/
render() {
const {
card,
isEditable,
getViewer
} = this.props;
const {
selected,
faces,
removes,
isEditing,
hasError,
isLoading
} = this.state;
const {
duration
} = card;
const hasFaces = faces.length > 0;
const entries = faces.filter(face => !removes.includes(face));
const editClassName = classnames__WEBPACK_IMPORTED_MODULE_1___default()('be-face-edit', {
'be-faces-is-editing': isEditing
});
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_loading_indicator_LoadingIndicatorWrapper__WEBPACK_IMPORTED_MODULE_4__["default"], {
className: "be-faces",
isLoading: isLoading
}, hasFaces && isEditable && !isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_6__["default"], {
text: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].editLabel)
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_plain_button_PlainButton__WEBPACK_IMPORTED_MODULE_2__["default"], {
className: editClassName,
"data-resin-target": _common_interactionTargets__WEBPACK_IMPORTED_MODULE_10__.SKILLS_TARGETS.FACES.EDIT,
onClick: this.toggleIsEditing,
type: "button"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_icons_general_IconEdit__WEBPACK_IMPORTED_MODULE_8__["default"], null))), hasError && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_inline_error_InlineError__WEBPACK_IMPORTED_MODULE_5__["default"], {
title: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].sidebarSkillsErrorTitle)
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].sidebarSkillsErrorContent)), hasFaces ? entries.map((face, index) =>
/*#__PURE__*/
/* eslint-disable react/no-array-index-key */
react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Face__WEBPACK_IMPORTED_MODULE_11__["default"], {
key: index,
face: face,
isEditing: isEditing,
onDelete: this.onDelete,
onSelect: this.onSelect,
selected: selected
})
/* eslint-enable react/no-array-index-key */) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].skillNoInfoFoundError), !!selected && !isEditing && Array.isArray(selected.appears) && selected.appears.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_timeline__WEBPACK_IMPORTED_MODULE_12__["default"], {
duration: duration,
getViewer: getViewer,
interactionTarget: _common_interactionTargets__WEBPACK_IMPORTED_MODULE_10__.SKILLS_TARGETS.FACES.TIMELINE,
timeslices: selected.appears
}), isEditing && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "be-faces-buttons"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_button_Button__WEBPACK_IMPORTED_MODULE_7__["default"], {
"data-resin-target": _common_interactionTargets__WEBPACK_IMPORTED_MODULE_10__.SKILLS_TARGETS.FACES.EDIT_CANCEL,
onClick: this.onCancel,
type: "button"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].cancel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_primary_button_PrimaryButton__WEBPACK_IMPORTED_MODULE_3__["default"], {
"data-resin-target": _common_interactionTargets__WEBPACK_IMPORTED_MODULE_10__.SKILLS_TARGETS.FACES.EDIT_SAVE,
onClick: this.onSave,
type: "button"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_intl__WEBPACK_IMPORTED_MODULE_14__["default"], _common_messages__WEBPACK_IMPORTED_MODULE_9__["default"].save))));
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Faces);
/***/ }),
/***/ "./src/elements/content-sidebar/skills/faces/index.js":
/*!************************************************************!*\
!*** ./src/elements/content-sidebar/skills/faces/index.js ***!
\************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* reexport safe */ _Faces__WEBPACK_IMPORTED_MODULE_0__["default"])
/* harmony export */ });
/* harmony import */ var _Faces__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Faces */ "./src/elements/content-sidebar/skills/faces/Faces.js");
/***/ }),
/***/ "./src/elements/content-sidebar/skills/keywords/EditableKeywords.js":
/*!**************************************************************************!*\
!*** ./src/elements/content-sidebar/skills/keywords/EditableKeywords.js ***!
\**************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__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 _components_pill_selector_dropdown_PillSelector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../components/pill-selector-dropdown/PillSelector */ "./src/components/pill-selector-dropdown/PillSelector.js");
/* harmony import */ var _components_primary_button_PrimaryButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../components/primary-button/PrimaryButton */ "./src/components/primary-button/PrimaryButton.tsx");
/* harmony import */ var _components_button_Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../components/button/Button */ "./src/components/button/Button.tsx");
/* harmony import */ var _common_messages__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../common/messages */ "./src/elements/common/messages.js");
/* harmony import */ var _common_interactionTargets__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../common/interactionTargets */ "./src/elements/common/interactionTargets.js");
/* harmony import */ var _keywordUtils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./keywordUtils */ "./src/elements/content-sidebar/skills/keywords/keywordUtils.js");
/* harmony import */ var _EditableKeywords_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./EditableKeywords.scss */ "./src/elements/content-sidebar/skills/keywords/EditableKeywords.scss");
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); }
/**
*
* @file Editable Skill Keywords card component
* @author Box
*/
class EditableKeywords extends react__WEBPACK_IMPORTED_MODULE_0__.PureComponent {
/**
* [constructor]
*
* @public
* @return {EditableKeywords}
*/
constructor(props) {
super(props);
/**
* Called when keywords gets new properties.
* Should reset to original state.
*
* @private
* @param {Object} option - pill
* @param {number} index - pill index
* @return {void}
*/
_defineProperty(this, "onRemove", (option, index) => {
// eslint-disable-line
const {
onDelete,
keywords
} = this.props;
onDelete(keywords[index]);
});
/**
* When pressing enter in the pill input box
*
* @private
* @param {Event} event - keyboard event
* @return {void}
*/
_defineProperty(this, "onKeyDown", ({
key
}) => {
if (key === 'Enter' && !this.state.isInCompositionMode) {
this.onBlur();
}
});
/**
* Called when pill selector is blurred.
* Adds a new pill if needed.
*
* @private
* @return {void}
*/
_defineProperty(this, "onBlur", () => {
const {
onAdd
} = this.props;
const {
keyword
} = this.state;
if (keyword) {
onAdd({
type: 'text',
text: keyword
});
}
});
/**
* Enables composition mode.
*
* @private
* @return {void}
*/
_defineProperty(this, "onCompositionStart", () => {
this.setState({
isInCompositionMode: true
});
});
/**
* Disables composition mode.
*
* @private
* @return {void}
*/
_defineProperty(this, "onCompositionEnd", () => {
this.setState({
isInCompositionMode: false
});
});
/**
* Called when pill selector gets new input value.
*
* @private
* @return {void}
*/
_defineProperty(this, "onInput", event => {
const currentTarget = event.currentTarget;
this.setState({
keyword: currentTarget.value
});
});
this.state = {
pills: (0,_keywordUtils__WEBPACK_IMPORTED_MODULE_6__["default"])(props.keyw