cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
291 lines (290 loc) • 14.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatCreatePoll = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _chat = require("@cometchat-pro/chat");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../..");
var _Shared = require("../../Shared");
var _2 = require("../");
var _hooks = require("./hooks");
var _CometChatCreatePollOptions = require("../CometChatCreatePollOptions");
var _style = require("./style");
var _plus = _interopRequireDefault(require("./resources/plus.svg"));
var _delete = _interopRequireDefault(require("./resources/delete.svg"));
var _close = _interopRequireDefault(require("./resources/close.svg"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var CometChatCreatePoll = function CometChatCreatePoll(props) {
var _CometChatTheme;
var _React$useState = _react["default"].useState(null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
loggedInUser = _React$useState2[0],
setLoggedInUser = _React$useState2[1];
var _React$useState3 = _react["default"].useState(null),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
chatWith = _React$useState4[0],
setChatWith = _React$useState4[1];
var _React$useState5 = _react["default"].useState(null),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
chatWithId = _React$useState6[0],
setChatWithId = _React$useState6[1];
var _React$useState7 = _react["default"].useState([]),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
pollOptions = _React$useState8[0],
setPollOptions = _React$useState8[1];
var _React$useState9 = _react["default"].useState(null),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
error = _React$useState10[0],
setError = _React$useState10[1];
var _React$useState11 = _react["default"].useState(false),
_React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
isCreating = _React$useState12[0],
setIsCreating = _React$useState12[1];
var questionRef = /*#__PURE__*/_react["default"].createRef();
var optionOneRef = /*#__PURE__*/_react["default"].createRef();
var optionTwoRef = /*#__PURE__*/_react["default"].createRef();
var chatRef = _react["default"].useRef(chatWith);
var theme = (_CometChatTheme = new _Shared.CometChatTheme(props.theme)) !== null && _CometChatTheme !== void 0 ? _CometChatTheme : new _Shared.CometChatTheme({});
var addPollOption = function addPollOption() {
var options = (0, _toConsumableArray2["default"])(pollOptions);
options.push({
value: "",
id: new Date().getTime()
});
setPollOptions(options);
};
var removePollOption = function removePollOption(option) {
var options = (0, _toConsumableArray2["default"])(pollOptions);
var optionKey = options.findIndex(function (opt) {
return opt.id === option.id;
});
if (optionKey > -1) {
options.splice(optionKey, 1);
setPollOptions(options);
}
};
var optionChangeHandler = function optionChangeHandler(event, option) {
var options = (0, _toConsumableArray2["default"])(pollOptions);
var optionKey = options.findIndex(function (opt) {
return opt.id === option.id;
});
if (optionKey > -1) {
var newOption = _objectSpread(_objectSpread({}, option), {}, {
value: event.target.value
});
options.splice(optionKey, 1, newOption);
setPollOptions(options);
}
};
var createPoll = function createPoll() {
var question = questionRef.current.value.trim();
var firstOption = optionOneRef.current.value.trim();
var secondOption = optionTwoRef.current.value.trim();
var optionItems = [firstOption, secondOption];
if (question.length === 0) {
setError((0, _.localize)("INVALID_POLL_QUESTION"));
return false;
}
if (firstOption.length === 0 || secondOption.length === 0) {
setError((0, _.localize)("INVALID_POLL_OPTION"));
return false;
}
pollOptions.forEach(function (option) {
optionItems.push(option.value);
});
setIsCreating(true);
setError((0, _.localize)(""));
_chat.CometChat.callExtension(_Shared.ExtensionConstants.polls, _Shared.ExtensionConstants.post, _Shared.ExtensionURLs.poll, {
question: question,
options: optionItems,
receiver: chatWithId,
receiverType: chatWith
}).then(function (response) {
if (response && response.hasOwnProperty("success") && response["success"] === true) {
setIsCreating(false);
props.onCreatePoll();
//this.props.actionGenerated(enums.ACTIONS["POLL_CREATED"]);
} else {
setError((0, _.localize)("SOMETHING_WRONG"));
}
})["catch"](function (error) {
setIsCreating(false);
setError((0, _.localize)("SOMETHING_WRONG"));
_2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, error);
});
};
(0, _hooks.Hooks)(props, setLoggedInUser, setChatWith, setChatWithId, chatRef);
var optionList = (0, _toConsumableArray2["default"])(pollOptions);
var pollOptionView = optionList.map(function (option, index) {
var _theme$palette;
return /*#__PURE__*/_react["default"].createElement(_CometChatCreatePollOptions.CometChatCreatePollOptions, {
key: index,
option: option,
style: _objectSpread(_objectSpread({}, new _Shared.BaseStyles("100%", "46px", props.style.answerInputBackground, props.style.answerInputBorder, props.style.answerInputBorderRadius, "")), {}, {
deleteIconTint: props.style.deleteIconTint || theme.palette.accent600[theme.palette.mode],
boxShadow: props.style.answerInputBoxShadow || "",
inputTextFont: props.style.answerInputTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
inputTextColor: props.style.answerInputTextColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getAccent()),
placeholderTextFont: props.style.answerPlaceholderTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
placeholderTextColor: props.style.answerPlaceholderTextColor || theme.palette.accent600[theme.palette.mode],
inputStyles: (0, _style.answerInputStyle)(props)
}),
theme: theme,
styles: (0, _style.createPollQuestionAnsStyle)(),
placeholderText: "".concat((0, _.localize)("ANSWER"), " ").concat(index + 3),
deleteIconURL: _delete["default"],
onDeleteClick: removePollOption,
onChangeHandler: optionChangeHandler
});
});
var createText = isCreating ? "Sending" : "Send";
return /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__wrapper",
style: (0, _style.createPollWrapperStyle)(props, theme)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__header"
}, /*#__PURE__*/_react["default"].createElement("p", {
className: "createpoll__title",
style: (0, _style.createPollTitleStyle)(props, theme)
}, props.title), /*#__PURE__*/_react["default"].createElement("span", {
className: "close__createpoll",
style: (0, _style.closeIconStyle)(props, _close["default"], theme),
onClick: props.onClose
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__body",
style: (0, _style.createPollBodyStyle)()
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__warning__message"
}, /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.createPollWarnMessageStyle)(props, theme)
}, error)), /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__question__wrapper",
style: (0, _style.createPollQuestionAnsStyle)()
}, /*#__PURE__*/_react["default"].createElement("input", {
ref: questionRef,
type: "text",
autoFocus: true,
tabIndex: "1",
style: (0, _style.questionInputStyle)(props, theme),
placeholder: props.questionPlaceholderText
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__helper__text",
style: (0, _style.helperTextStyle)(props, theme)
}, /*#__PURE__*/_react["default"].createElement("label", null, props.answerHelpText)), /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__answer__wrapper",
style: (0, _style.createPollQuestionAnsStyle)()
}, /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
tabIndex: "1",
style: (0, _style.answerInputStyle)(props, theme),
placeholder: "".concat(props.answerPlaceholderText, " 1"),
ref: optionOneRef
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "createpoll__answer__wrapper",
style: (0, _style.createPollQuestionAnsStyle)()
}, /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
tabIndex: "1",
style: (0, _style.answerInputStyle)(props, theme),
placeholder: "".concat(props.answerPlaceholderText, " 2"),
ref: optionTwoRef
})), pollOptionView, /*#__PURE__*/_react["default"].createElement("div", {
className: "addanswer__inputfield",
style: (0, _style.addAnswerInutFieldStyle)()
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "remove__answer__field",
style: (0, _style.iconWrapperStyle)()
}, /*#__PURE__*/_react["default"].createElement("span", {
style: (0, _style.addOptionIconStyle)(props, _plus["default"], theme),
onClick: addPollOption
})), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
className: "add__answer__button__text",
style: (0, _style.addItemStyle)(props, theme)
}, props.addAnswerText))), /*#__PURE__*/_react["default"].createElement("div", {
className: "send__button",
style: (0, _style.sendButtonStyle)()
}, /*#__PURE__*/_react["default"].createElement("button", {
style: (0, _style.buttonStyle)(props, theme),
onClick: createPoll
}, createText))));
};
exports.CometChatCreatePoll = CometChatCreatePoll;
CometChatCreatePoll.defaultProps = {
user: null,
group: null,
title: "",
defaultAnswers: 2,
questionPlaceholderText: "",
answerPlaceholderText: "",
answerHelpText: "",
addAnswerText: "",
addAnswerIconURL: "",
closeIconURL: "",
createPollButtonText: "",
deleteIconURL: "",
onClose: null,
onCreatePoll: null,
style: {
width: "280px",
height: "100%",
border: "1px solid RGBA(20, 20, 20, 0.04)",
borderRadius: "12px",
background: "#fff",
boxShadow: "",
titleFont: "700 22px Inter,sans-serif",
titleColor: "RGB(20, 20, 20)",
closeIconTint: "RGB(51, 153, 255)",
errorTextFont: "400 12px Inter,sans-serif",
errorTextColor: "red",
questionInputBorder: "1px solid RGBA(20, 20, 20, 0.04)",
questionInputBorderRadius: "8px",
questionInputBoxShadow: "",
questionInputBackground: "RGBA(20, 20, 20, 0.04)",
questionPlaceholderTextFont: "400 15px Inter,sans-serif",
questionPlaceholderTextColor: "RGBA(20, 20, 20, 0.6)",
questionInputTextFont: "400 15px Inter,sans-serif",
questionInputTextColor: "RGB(20, 20, 20)",
answerHelpTextFont: "500 12px Inter,sans-serif",
answerHelpTextColor: "RGBA(20, 20, 20, 0.46)",
answerInputBoxShadow: "",
answerInputBackground: "RGBA(20, 20, 20, 0.04)",
answerInputTextFont: "400 15px Inter,sans-serif",
answerInputTextColor: "RGB(20, 20, 20)",
answerInputBorder: "1px solid RGBA(20, 20, 20, 0.04)",
answerInputBorderRadius: "8px",
answerPlaceholderTextFont: "400 15px Inter,sans-serif",
answerPlaceholderTextColor: "RGBA(20, 20, 20, 0.6)",
addAnswerButtonTextColor: "RGB(51, 153, 255)",
addAnswerButtonTextFont: "500 15px Inter,sans-serif",
addAnswerIconTint: "RGB(51, 153, 255)",
createPollButtonBorder: "1px solid RGB(51, 153, 255)",
createPollButtonBorderRadius: "12px",
createPollButtonBackground: "RGB(51, 153, 255)",
createPollButtonTextFont: "400 15px Inter,sans-serif",
createPollButtonTextColor: "#fff"
}
};
CometChatCreatePoll.propTypes = {
user: _propTypes["default"].object,
group: _propTypes["default"].object,
title: _propTypes["default"].string,
defaultAnswers: _propTypes["default"].number,
questionPlaceholderText: _propTypes["default"].string,
answerPlaceholderText: _propTypes["default"].string,
answerHelpText: _propTypes["default"].string,
addAnswerText: _propTypes["default"].string,
addAnswerIconURL: _propTypes["default"].string,
onClose: _propTypes["default"].func,
onCreatePoll: _propTypes["default"].func,
deleteIconURL: _propTypes["default"].string,
closeIconURL: _propTypes["default"].string,
createPollButtonText: _propTypes["default"].string,
style: _propTypes["default"].object
};