diff --git a/package.json b/package.json index d3b12791f..41b04d124 100644 --- a/package.json +++ b/package.json @@ -103,10 +103,11 @@ "pify": "3.0.0", "protobufjs": "^6.9.0", "rc-slider": "^8.7.1", - "react": "16.8.3", + "react": "^16.13.1", "react-autosize-textarea": "^7.0.0", "react-contextmenu": "2.11.0", "react-dom": "16.8.3", + "react-dropzone": "^11.0.2", "react-emoji": "^0.5.0", "react-h5-audio-player": "^3.2.0", "react-portal": "^4.2.0", diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 9b5e2ac1e..b3312b7a5 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -24,6 +24,8 @@ interface Props { onLoadVoiceNoteView: any; onExitVoiceNoteView: any; + + dropZoneFiles: FileList; } interface State { @@ -81,11 +83,7 @@ export class SessionCompositionBox extends React.Component { // Events this.onKeyDown = this.onKeyDown.bind(this); this.onChange = this.onChange.bind(this); - this.onTextareaContainerClick = this.onTextareaContainerClick.bind(this); - } - - public componentWillReceiveProps() { - console.log(`[vince][info] Here are my composition props: `, this.props); + this.focusCompositionBox = this.focusCompositionBox.bind(this); } public async componentWillMount() { @@ -93,6 +91,10 @@ export class SessionCompositionBox extends React.Component { this.setState({ mediaSetting }); } + public componentDidMount() { + setTimeout(this.focusCompositionBox, 100); + } + public render() { const { showRecordingView } = this.state; @@ -176,7 +178,7 @@ export class SessionCompositionBox extends React.Component { onClick={this.onLoadVoiceNoteView} /> -
+
{ // handle Attachments const { attachments } = this.state; - console.log(`[vince][msg] Message:`, messagePlaintext); - console.log(`[vince][msg] fileAttachments:`, attachments); - // Handle emojis // Send message @@ -411,9 +410,9 @@ export class SessionCompositionBox extends React.Component { }); } - private onTextareaContainerClick() { + private focusCompositionBox() { // Focus the textarea when user clicks anywhere in the composition box - setTimeout(() => this.textarea.current?.focus(), 50); + this.textarea.current?.focus(); } } diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index c7ce3ff11..f7015b21e 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -1,6 +1,7 @@ // tslint:disable: no-backbone-get-set-outside-model import React from 'react'; + import classNames from 'classnames'; import { ConversationHeader } from '../../conversation/ConversationHeader'; @@ -39,6 +40,9 @@ interface State { showRecordingView: boolean; showOptionsPane: boolean; showScrollButton: boolean; + + // dropZoneFiles?: FileList + dropZoneFiles: any; } export class SessionConversation extends React.Component { @@ -52,9 +56,8 @@ export class SessionConversation extends React.Component { const conversation = this.props.conversations.conversationLookup[ conversationKey ]; - const unreadCount = conversation.unreadCount; - console.log(`[conv] Conversation:`, conversation); + const unreadCount = conversation.unreadCount; this.state = { sendingProgress: 0, @@ -72,6 +75,8 @@ export class SessionConversation extends React.Component { showRecordingView: false, showOptionsPane: false, showScrollButton: false, + + dropZoneFiles: undefined, // <-- FileList or something else? }; this.handleScroll = this.handleScroll.bind(this); @@ -131,8 +136,6 @@ export class SessionConversation extends React.Component { if (this.state.isScrolledToBottom) { this.scrollToBottom(); } - - console.log(`[update] Props: `, this.props); } public async componentWillReceiveProps() { @@ -176,7 +179,7 @@ export class SessionConversation extends React.Component { const groupSettingsProps = this.getGroupSettingsProps(); return ( - <> +
{ {!isRss && ( { public renderHeader() { const headerProps = this.getHeaderProps(); - console.log(`[header] Headerprops: `, headerProps); - return ( { const pageHeight = messageContainer.clientHeight; const arrowScrollPx = 50; - const pageScrollPx = 0.8 * pageHeight; - - console.log(`[vince][key] event: `, event); + const pageScrollPx = pageHeight * 0.8; - console.log(`[vince][key] key: `, event.key); - console.log(`[vince][key] key: `, event.keyCode); if (event.key === 'Escape') { - // + // EXIT MEDIA VIEW + + if (recordingMode) { + // EXIT RECORDING VIEW + } + // EXIT WHAT ELSE? } switch (event.key) { diff --git a/yarn.lock b/yarn.lock index 874c7d738..0cf4f3a24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1079,6 +1079,11 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +attr-accept@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.1.0.tgz#a231a854385d36ff7a99647bb77b33c8a5175aee" + integrity sha512-sLzVM3zCCmmDtDNhI0i96k6PUztkotSOXqE4kDGQt/6iDi5M+H0srjeF+QC6jN581l4X/Zq3Zu/tgcErEssavg== + autoprefixer@^6.3.1: version "6.7.7" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" @@ -3862,6 +3867,13 @@ file-entry-cache@^2.0.0: flat-cache "^1.2.1" object-assign "^4.0.1" +file-selector@^0.1.12: + version "0.1.12" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0" + integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ== + dependencies: + tslib "^1.9.0" + file-sync-cmp@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz#a5e7a8ffbfa493b43b923bbd4ca89a53b63b612b" @@ -8488,6 +8500,15 @@ react-dom@16.8.3: prop-types "^15.6.2" scheduler "^0.13.3" +react-dropzone@^11.0.2: + version "11.0.2" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.0.2.tgz#1a4084f520c2eafbeb24026760b3ee8f3759cfd3" + integrity sha512-/Wde9Il1aJ1FtWllg3N2taIeJh4aftx6UGUG8R1TmLnZit2RnDcEjcKwEEbKwgLXTTh8QQpiZWQJq45jTy1jCA== + dependencies: + attr-accept "^2.0.0" + file-selector "^0.1.12" + prop-types "^15.7.2" + react-emoji@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/react-emoji/-/react-emoji-0.5.0.tgz#14b91cc6b3ce3c3246f740e7ef5de2ec0bee664b" @@ -8644,15 +8665,14 @@ react-virtualized@9.21.0: prop-types "^15.6.0" react-lifecycles-compat "^3.0.4" -react@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9" - integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA== +react@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" + integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" read-chunk@^1.0.1: version "1.0.1" @@ -10470,6 +10490,11 @@ tslib@^1.8.0, tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35" integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA== +tslib@^1.9.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" + integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== + tslint-microsoft-contrib@6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/tslint-microsoft-contrib/-/tslint-microsoft-contrib-6.0.0.tgz#7bff73c9ad7a0b7eb5cdb04906de58f42a2bf7a2"