@r3l/app
Version:
270 lines (240 loc) • 9.19 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = TextAreaWithMention;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactRedux = require("react-redux");
var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
var _user = require("../../user/user.actions");
var _web = require("../../styled/web");
var _styled = require("../../styled");
var _avatarbox = _interopRequireDefault(require("../../user/avatarbox.component"));
var _commentBody = _interopRequireDefault(require("../../comment/commentBody"));
var _community = require("../../community/community.selectors");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
TextAreaWithMention.propTypes = {
textArea: _propTypes.default.shape({
current: _propTypes.default.any
}),
value: _propTypes.default.string,
autoFocus: _propTypes.default.bool,
leftPadding: _propTypes.default.number,
onChange: _propTypes.default.func,
onBlur: _propTypes.default.func,
setFocused: _propTypes.default.func,
withPreview: _propTypes.default.bool,
children: _propTypes.default.node,
placeholder: _propTypes.default.string,
minheight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
ImageUpload: _propTypes.default.func,
PasteTextButton: _propTypes.default.func
};
function TextAreaWithMention(_ref) {
var textArea = _ref.textArea,
value = _ref.value,
autoFocus = _ref.autoFocus,
leftPadding = _ref.leftPadding,
onChange = _ref.onChange,
_onBlur = _ref.onBlur,
setFocused = _ref.setFocused,
children = _ref.children,
withPreview = _ref.withPreview,
placeholder = _ref.placeholder,
minheight = _ref.minheight,
ImageUpload = _ref.ImageUpload,
_ref$PasteTextButton = _ref.PasteTextButton,
PasteTextButton = _ref$PasteTextButton === void 0 ? function () {
return null;
} : _ref$PasteTextButton;
var dispatch = (0, _reactRedux.useDispatch)();
var innerTextAreaRef = (0, _react.useRef)();
var _useState = (0, _react.useState)('write'),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
mode = _useState2[0],
setMode = _useState2[1];
var _ref2 = (0, _community.useCommunity)() || {},
allowImages = _ref2.allowImages;
var showWrite = mode === 'write';
var showPreview = mode === 'preview';
(0, _react.useEffect)(function () {
return function () {
return dispatch((0, _user.searchUser)());
};
}, []); // eslint-disable-line
return /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
flexDirection: 'column'
}
}, withPreview && /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
mb: 1
}
}, /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
mr: 2
}
}, /*#__PURE__*/_react.default.createElement(_styled.CTALink, {
sx: {
color: 'black',
textDecorationLine: showWrite ? 'underline' : 'none'
},
onPress: function onPress() {
return setMode('write');
}
}, "Write")), /*#__PURE__*/_react.default.createElement(_web.View, null, /*#__PURE__*/_react.default.createElement(_styled.CTALink, {
sx: {
color: 'black',
textDecorationLine: showPreview ? 'underline' : 'none'
},
onPress: function onPress() {
return setMode('preview');
}
}, "Preview Markdown"))), showWrite && /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
position: 'relative',
flex: 1,
flexDirection: 'column',
alignItems: 'stretch'
}
}, /*#__PURE__*/_react.default.createElement(_web.StyledTextareaAutocomplete, {
containerStyle: {
display: 'flex',
flex: 'auto',
flexDirection: 'column'
},
listStyle: {
display: 'flex',
flexWrap: 'wrap',
listStyleType: 'none',
padding: 0
},
style: {
flex: 'auto'
},
innerRef: function innerRef(c) {
return textArea.current = c;
},
ref: function ref(c) {
return innerTextAreaRef.current = c;
},
rows: 2,
placeholder: placeholder,
value: value // onKeyDown={handleKeydown}
,
onChange: onChange,
sx: {
m: 0,
flex: 1,
pl: leftPadding,
minHeight: minheight + 0.0001
},
autoFocus: !!autoFocus,
onFocus: function onFocus() {
setFocused && setFocused(true);
setTimeout(function () {
var p = innerTextAreaRef.current.getCaretPosition();
if (p === 0) innerTextAreaRef.current.setCaretPosition(value.length);
});
} // bug with autocomplete
// https://github.com/webscopeio/react-textarea-autocomplete/issues/178
,
onBlur: function onBlur(e) {
e.type === 'blur' && _onBlur && _onBlur(e); // e.type === 'blur' && setFocused && setFocused(false);
},
textAreaComponent: {
component: _reactTextareaAutosize.default,
ref: 'inputRef'
},
loadingComponent: function loadingComponent() {
return /*#__PURE__*/_react.default.createElement("span", null, "Loading");
},
trigger: {
'@': {
dataProvider: function () {
var _dataProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(token) {
var users;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return dispatch((0, _user.searchUser)(token));
case 2:
users = _context.sent;
return _context.abrupt("return", users.map(function (u) {
return {
user: u,
name: u.handle
};
}));
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
}));
function dataProvider(_x) {
return _dataProvider.apply(this, arguments);
}
return dataProvider;
}(),
component: Item,
output: function output(item) {
return '@' + item.name;
}
}
}
}), children, /*#__PURE__*/_react.default.createElement(PasteTextButton, null)), showPreview && /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
minHeight: minheight || 9,
p: 2,
pt: 1,
variant: 'borders.input'
}
}, /*#__PURE__*/_react.default.createElement(_commentBody.default, {
noLink: true,
comment: {
body: value
},
noPostLink: true
})), allowImages ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
mt: 1
}
}), /*#__PURE__*/_react.default.createElement(ImageUpload, null)) : null, /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
mt: 2
}
}));
}
Item.propTypes = {
entity: {
user: _propTypes.default.object
}
};
function Item(_ref3) {
var entity = _ref3.entity;
return /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
p: 1,
pr: 2,
cursor: 'pointer',
'&:hover': {
bg: 'lightGrey'
}
}
}, /*#__PURE__*/_react.default.createElement(_avatarbox.default, {
user: entity.user,
noLink: true
}));
}
//# sourceMappingURL=textAreaWithMention.js.map