From b142d72e972e39db467528ea440cb81d423fb81d Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 26 Aug 2020 11:52:28 +0100 Subject: [PATCH 01/63] Upgrade matrix-js-sdk to 8.2.0-rc.1 --- package.json | 2 +- yarn.lock | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ab71f68b08..fc24a79b48 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "is-ip": "^2.0.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.19", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", + "matrix-js-sdk": "8.2.0-rc.1", "minimist": "^1.2.5", "pako": "^1.0.11", "parse5": "^5.1.1", diff --git a/yarn.lock b/yarn.lock index 9ee9374945..12c29e98a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6475,9 +6475,10 @@ mathml-tag-names@^2.0.1: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop": - version "8.1.0" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/64cdd73b93a475d10284977b69ef73138315b3be" +matrix-js-sdk@8.2.0-rc.1: + version "8.2.0-rc.1" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-8.2.0-rc.1.tgz#1870ab25af7062def4b757ca5da04199df269241" + integrity sha512-vZTZOIoYXTFTO+NgBnP+mJMdwNwlIF8GQPeqra+esyoKcas7jVumAwektu3SXhFJPy9vnmufs7zXx4geiNNkpA== dependencies: "@babel/runtime" "^7.8.3" another-json "^0.2.0" From af76a1213d19f41ab8a41398eedec8a17de50f5e Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 26 Aug 2020 12:02:10 +0100 Subject: [PATCH 02/63] Prepare changelog for v3.3.0-rc.1 --- CHANGELOG.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 29cbb040f4..ae9027696c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,66 @@ +Changes in [3.3.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.3.0-rc.1) (2020-08-26) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.2.0...v3.3.0-rc.1) + + * Upgrade to JS SDK 8.2.0-rc.1 + * Update from Weblate + [\#5146](https://github.com/matrix-org/matrix-react-sdk/pull/5146) + * BaseAvatar avoid initial render with default avatar + [\#5142](https://github.com/matrix-org/matrix-react-sdk/pull/5142) + * Enforce Secure Backup completion when requested by HS + [\#5130](https://github.com/matrix-org/matrix-react-sdk/pull/5130) + * Communities v2 prototype: Explore rooms, global state, and default room + [\#5139](https://github.com/matrix-org/matrix-react-sdk/pull/5139) + * Add communities v2 prototyping feature flag + initial tag panel prototypes + [\#5133](https://github.com/matrix-org/matrix-react-sdk/pull/5133) + * Remove some unused components + [\#5134](https://github.com/matrix-org/matrix-react-sdk/pull/5134) + * Allow avatar image view for 1:1 rooms + [\#5137](https://github.com/matrix-org/matrix-react-sdk/pull/5137) + * Send mx_local_settings in rageshake + [\#5136](https://github.com/matrix-org/matrix-react-sdk/pull/5136) + * Run all room leaving behaviour through a single function + [\#5132](https://github.com/matrix-org/matrix-react-sdk/pull/5132) + * Add clarifying comment in media device selection + [\#5131](https://github.com/matrix-org/matrix-react-sdk/pull/5131) + * Settings v3: Feature flag changes + [\#5124](https://github.com/matrix-org/matrix-react-sdk/pull/5124) + * Clear url previews if they all get edited out of the event + [\#5129](https://github.com/matrix-org/matrix-react-sdk/pull/5129) + * Consider tab completions as modifications for editing purposes to unlock + sending + [\#5128](https://github.com/matrix-org/matrix-react-sdk/pull/5128) + * Use matrix-doc for SAS emoji translations + [\#5125](https://github.com/matrix-org/matrix-react-sdk/pull/5125) + * Add a rageshake function to download the logs locally + [\#3849](https://github.com/matrix-org/matrix-react-sdk/pull/3849) + * Room List filtering visual tweaks + [\#5123](https://github.com/matrix-org/matrix-react-sdk/pull/5123) + * Make reply preview not an overlay so you can see new messages + [\#5072](https://github.com/matrix-org/matrix-react-sdk/pull/5072) + * Allow room tile context menu when minimized using right click + [\#5113](https://github.com/matrix-org/matrix-react-sdk/pull/5113) + * Add null guard to group inviter for corrupted groups + [\#5121](https://github.com/matrix-org/matrix-react-sdk/pull/5121) + * Room List styling tweaks + [\#5118](https://github.com/matrix-org/matrix-react-sdk/pull/5118) + * Fix corner rounding on images not always affecting right side + [\#5120](https://github.com/matrix-org/matrix-react-sdk/pull/5120) + * Change add room action for rooms to context menu + [\#5108](https://github.com/matrix-org/matrix-react-sdk/pull/5108) + * Switch out the globe icon and colour it depending on theme + [\#5106](https://github.com/matrix-org/matrix-react-sdk/pull/5106) + * Message Action Bar watch for event send changes + [\#5115](https://github.com/matrix-org/matrix-react-sdk/pull/5115) + * Put message previews for Emoji behind Labs + [\#5110](https://github.com/matrix-org/matrix-react-sdk/pull/5110) + * Fix styling for selected community marker + [\#5107](https://github.com/matrix-org/matrix-react-sdk/pull/5107) + * Fix action bar safe area regression + [\#5111](https://github.com/matrix-org/matrix-react-sdk/pull/5111) + * Fix /op slash command + [\#5109](https://github.com/matrix-org/matrix-react-sdk/pull/5109) + Changes in [3.2.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.2.0) (2020-08-17) =================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.2.0-rc.1...v3.2.0) From d0358ab19640a3c369e3dd72e1be40bbc6fe2d8c Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 26 Aug 2020 12:02:11 +0100 Subject: [PATCH 03/63] v3.3.0-rc.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fc24a79b48..b59c32f121 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.2.0", + "version": "3.3.0-rc.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { From 2c20afc04729f157698a51471d47e4b1edd66fff Mon Sep 17 00:00:00 2001 From: resynth1943 Date: Wed, 26 Aug 2020 23:04:56 +0100 Subject: [PATCH 04/63] Fix lodash imports Signed-off-by: resynth1943 --- src/Markdown.js | 2 +- src/SendHistoryManager.js | 2 +- src/autocomplete/CommunityProvider.tsx | 2 +- src/autocomplete/RoomProvider.tsx | 3 ++- src/components/structures/RoomSearch.tsx | 1 - src/components/structures/SearchBox.js | 2 +- .../views/dialogs/secretstorage/AccessSecretStorageDialog.js | 2 +- src/components/views/elements/Field.tsx | 2 +- src/components/views/rooms/Autocomplete.tsx | 2 +- src/emojipicker/recent.ts | 2 +- src/ratelimitedfunc.js | 2 +- src/stores/CustomRoomTagStore.js | 2 +- src/stores/OwnProfileStore.ts | 2 +- src/stores/room-list/filters/NameFilterCondition.ts | 2 +- src/utils/DMRoomMap.js | 2 +- src/utils/ResizeNotifier.js | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/Markdown.js b/src/Markdown.js index e57507b4de..7a573996c3 100644 --- a/src/Markdown.js +++ b/src/Markdown.js @@ -15,7 +15,7 @@ limitations under the License. */ import commonmark from 'commonmark'; -import escape from 'lodash/escape'; +import escape from "lodash/escape"; const ALLOWED_HTML_TAGS = ['sub', 'sup', 'del', 'u']; diff --git a/src/SendHistoryManager.js b/src/SendHistoryManager.js index 794a58ad6f..d38227ae76 100644 --- a/src/SendHistoryManager.js +++ b/src/SendHistoryManager.js @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import _clamp from 'lodash/clamp'; +import _clamp from "lodash/clamp"; export default class SendHistoryManager { history: Array = []; diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx index f34fee890e..e2baa29026 100644 --- a/src/autocomplete/CommunityProvider.tsx +++ b/src/autocomplete/CommunityProvider.tsx @@ -23,7 +23,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg'; import QueryMatcher from './QueryMatcher'; import {PillCompletion} from './Components'; import * as sdk from '../index'; -import _sortBy from 'lodash/sortBy'; +import _sortBy from "lodash/sortBy"; import {makeGroupPermalink} from "../utils/permalinks/Permalinks"; import {ICompletion, ISelectionRange} from "./Autocompleter"; import FlairStore from "../stores/FlairStore"; diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index b18b2d132c..30a322d6b1 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -27,7 +27,8 @@ import {PillCompletion} from './Components'; import * as sdk from '../index'; import {makeRoomPermalink} from "../utils/permalinks/Permalinks"; import {ICompletion, ISelectionRange} from "./Autocompleter"; -import { uniqBy, sortBy } from 'lodash'; +import uniqBy from "lodash/uniqBy"; +import sortBy from "lodash/sortBy"; const ROOM_REGEX = /\B#\S*/g; diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx index f6b8d42c30..fc8b7a3a12 100644 --- a/src/components/structures/RoomSearch.tsx +++ b/src/components/structures/RoomSearch.tsx @@ -20,7 +20,6 @@ import classNames from "classnames"; import defaultDispatcher from "../../dispatcher/dispatcher"; import { _t } from "../../languageHandler"; import { ActionPayload } from "../../dispatcher/payloads"; -import { throttle } from 'lodash'; import { Key } from "../../Keyboard"; import AccessibleButton from "../views/elements/AccessibleButton"; import { Action } from "../../dispatcher/actions"; diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 7e9d290bce..ef0ee38ce6 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -20,7 +20,7 @@ import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import { Key } from '../../Keyboard'; import dis from '../../dispatcher/dispatcher'; -import { throttle } from 'lodash'; +import throttle from 'lodash/throttle'; import AccessibleButton from '../../components/views/elements/AccessibleButton'; import classNames from 'classnames'; diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js index 5c01a6907f..2d556aa597 100644 --- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js +++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { debounce } from 'lodash'; +import debounce from "lodash/debounce"; import classNames from 'classnames'; import React from 'react'; import PropTypes from "prop-types"; diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index d9fd59dc11..935d452aaa 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react'; import classNames from 'classnames'; import * as sdk from '../../../index'; -import { debounce } from 'lodash'; +import debounce from "lodash/debounce"; import {IFieldState, IValidationResult} from "./Validation"; // Invoke validation from user input (when typing, etc.) at most once every N ms. diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx index 70f7556550..8fa623bd91 100644 --- a/src/components/views/rooms/Autocomplete.tsx +++ b/src/components/views/rooms/Autocomplete.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {createRef, KeyboardEvent} from 'react'; import classNames from 'classnames'; -import flatMap from 'lodash/flatMap'; +import flatMap from "lodash/flatMap"; import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter'; import {Room} from 'matrix-js-sdk/src/models/room'; diff --git a/src/emojipicker/recent.ts b/src/emojipicker/recent.ts index d86aad660d..0f005214a3 100644 --- a/src/emojipicker/recent.ts +++ b/src/emojipicker/recent.ts @@ -16,7 +16,7 @@ limitations under the License. */ import SettingsStore from "../settings/SettingsStore"; -import {orderBy} from "lodash"; +import orderBy from "lodash/orderBy"; import { SettingLevel } from "../settings/SettingLevel"; interface ILegacyFormat { diff --git a/src/ratelimitedfunc.js b/src/ratelimitedfunc.js index 1f15f11d91..691671a086 100644 --- a/src/ratelimitedfunc.js +++ b/src/ratelimitedfunc.js @@ -26,7 +26,7 @@ limitations under the License. * on unmount or similar to cancel any pending update. */ -import { throttle } from "lodash"; +import throttle from "lodash/throttle"; export default function ratelimitedfunc(fn, time) { const throttledFn = throttle(fn, time, { diff --git a/src/stores/CustomRoomTagStore.js b/src/stores/CustomRoomTagStore.js index 39177181b4..ceee67c1e1 100644 --- a/src/stores/CustomRoomTagStore.js +++ b/src/stores/CustomRoomTagStore.js @@ -17,7 +17,7 @@ limitations under the License. import dis from '../dispatcher/dispatcher'; import EventEmitter from 'events'; -import {throttle} from "lodash"; +import throttle from "lodash/throttle"; import SettingsStore from "../settings/SettingsStore"; import RoomListStore, {LISTS_UPDATE_EVENT} from "./room-list/RoomListStore"; import {RoomNotificationStateStore} from "./notifications/RoomNotificationStateStore"; diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts index 1aa761e1c4..af615b07b6 100644 --- a/src/stores/OwnProfileStore.ts +++ b/src/stores/OwnProfileStore.ts @@ -19,7 +19,7 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient"; import defaultDispatcher from "../dispatcher/dispatcher"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { User } from "matrix-js-sdk/src/models/user"; -import { throttle } from "lodash"; +import throttle from "lodash/throttle"; import { MatrixClientPeg } from "../MatrixClientPeg"; import { _t } from "../languageHandler"; diff --git a/src/stores/room-list/filters/NameFilterCondition.ts b/src/stores/room-list/filters/NameFilterCondition.ts index 88edaecfb6..13c75f3d4d 100644 --- a/src/stores/room-list/filters/NameFilterCondition.ts +++ b/src/stores/room-list/filters/NameFilterCondition.ts @@ -18,7 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { FILTER_CHANGED, FilterPriority, IFilterCondition } from "./IFilterCondition"; import { EventEmitter } from "events"; import { removeHiddenChars } from "matrix-js-sdk/src/utils"; -import { throttle } from "lodash"; +import throttle from "lodash/throttle"; /** * A filter condition for the room list which reveals rooms of a particular diff --git a/src/utils/DMRoomMap.js b/src/utils/DMRoomMap.js index 6ce92a0458..c6ba0d4d83 100644 --- a/src/utils/DMRoomMap.js +++ b/src/utils/DMRoomMap.js @@ -16,7 +16,7 @@ limitations under the License. */ import {MatrixClientPeg} from '../MatrixClientPeg'; -import _uniq from 'lodash/uniq'; +import _uniq from "lodash/uniq"; import {Room} from "matrix-js-sdk/src/matrix"; /** diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.js index 5467716576..c43e2c8250 100644 --- a/src/utils/ResizeNotifier.js +++ b/src/utils/ResizeNotifier.js @@ -23,7 +23,7 @@ limitations under the License. * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy" */ import { EventEmitter } from "events"; -import { throttle } from "lodash"; +import throttle from "lodash/throttle"; export default class ResizeNotifier extends EventEmitter { constructor() { From cc2fc911afc82915067bc6ee5790e419dd6d83dc Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 10:03:27 -0600 Subject: [PATCH 05/63] Minor copy addition to DM dialog for communities prototype --- res/css/views/dialogs/_InviteDialog.scss | 7 +++++++ src/components/views/dialogs/InviteDialog.js | 10 ++++++++++ src/i18n/strings/en_EN.json | 1 + 3 files changed, 18 insertions(+) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a77d0bfbba..a0f98d74e9 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -89,6 +89,13 @@ limitations under the License. font-weight: bold; text-transform: uppercase; } + + .mx_InviteDialog_subname { + margin-bottom: 10px; + margin-top: -10px; // HACK: Positioning with margins is bad + font-size: $font-12px; + color: $muted-fg-color; + } } .mx_InviteDialog_roomTile { diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js index 6cd0b22505..ba4abb31a7 100644 --- a/src/components/views/dialogs/InviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -37,6 +37,8 @@ import {Key} from "../../../Keyboard"; import {Action} from "../../../dispatcher/actions"; import {DefaultTagID} from "../../../stores/room-list/models"; import RoomListStore from "../../../stores/room-list/RoomListStore"; +import TagOrderStore from "../../../stores/TagOrderStore"; +import GroupStore from "../../../stores/GroupStore"; // we have a number of types defined from the Matrix spec which can't reasonably be altered here. /* eslint-disable camelcase */ @@ -915,6 +917,13 @@ export default class InviteDialog extends React.PureComponent { const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this); const lastActive = (m) => kind === 'recents' ? m.lastActive : null; let sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions"); + let sectionSubname = null; + + if (kind === 'suggestions' && TagOrderStore.getSelectedPrototypeTag()) { + const summary = GroupStore.getSummary(TagOrderStore.getSelectedPrototypeTag()); + const communityName = summary?.profile?.name || TagOrderStore.getSelectedPrototypeTag(); + sectionSubname = _t("May include members not in %(communityName)s", {communityName}); + } if (this.props.kind === KIND_INVITE) { sectionName = kind === 'recents' ? _t("Recently Direct Messaged") : _t("Suggestions"); @@ -993,6 +1002,7 @@ export default class InviteDialog extends React.PureComponent { return (

{sectionName}

+ {sectionSubname ?

{sectionSubname}

: null} {tiles} {showMore}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 442f07499c..2a914641f1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1709,6 +1709,7 @@ "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s", "Recent Conversations": "Recent Conversations", "Suggestions": "Suggestions", + "May include members not in %(communityName)s": "May include members not in %(communityName)s", "Recently Direct Messaged": "Recently Direct Messaged", "Direct Messages": "Direct Messages", "Start a conversation with someone using their name, username (like ) or email address.": "Start a conversation with someone using their name, username (like ) or email address.", From 1fc55b33c1d03423395ad5d149a8796d0fe4f52b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 28 Aug 2020 18:53:43 +0100 Subject: [PATCH 06/63] Stash lodash import optimization --- src/Markdown.js | 2 +- src/SendHistoryManager.js | 4 ++-- src/autocomplete/CommunityProvider.tsx | 4 ++-- src/autocomplete/EmojiProvider.tsx | 5 ++--- src/autocomplete/QueryMatcher.ts | 7 +++---- src/autocomplete/RoomProvider.tsx | 3 +-- src/autocomplete/UserProvider.tsx | 4 ++-- src/components/structures/SearchBox.js | 2 +- .../dialogs/secretstorage/AccessSecretStorageDialog.js | 2 +- src/components/views/elements/Field.tsx | 2 +- src/components/views/rooms/Autocomplete.tsx | 2 +- src/emojipicker/recent.ts | 2 +- src/ratelimitedfunc.js | 2 +- src/stores/CustomRoomTagStore.js | 2 +- src/stores/OwnProfileStore.ts | 2 +- src/stores/room-list/filters/NameFilterCondition.ts | 2 +- src/utils/DMRoomMap.js | 4 ++-- src/utils/ResizeNotifier.js | 2 +- 18 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/Markdown.js b/src/Markdown.js index 7a573996c3..492450e87d 100644 --- a/src/Markdown.js +++ b/src/Markdown.js @@ -15,7 +15,7 @@ limitations under the License. */ import commonmark from 'commonmark'; -import escape from "lodash/escape"; +import {escape} from "lodash"; const ALLOWED_HTML_TAGS = ['sub', 'sup', 'del', 'u']; diff --git a/src/SendHistoryManager.js b/src/SendHistoryManager.js index d38227ae76..d9955727a4 100644 --- a/src/SendHistoryManager.js +++ b/src/SendHistoryManager.js @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import _clamp from "lodash/clamp"; +import {clamp} from "lodash"; export default class SendHistoryManager { history: Array = []; @@ -54,7 +54,7 @@ export default class SendHistoryManager { } getItem(offset: number): ?HistoryItem { - this.currentIndex = _clamp(this.currentIndex + offset, 0, this.history.length - 1); + this.currentIndex = clamp(this.currentIndex + offset, 0, this.history.length - 1); return this.history[this.currentIndex]; } } diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx index e2baa29026..43217cc1bb 100644 --- a/src/autocomplete/CommunityProvider.tsx +++ b/src/autocomplete/CommunityProvider.tsx @@ -23,7 +23,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg'; import QueryMatcher from './QueryMatcher'; import {PillCompletion} from './Components'; import * as sdk from '../index'; -import _sortBy from "lodash/sortBy"; +import {sortBy} from "lodash"; import {makeGroupPermalink} from "../utils/permalinks/Permalinks"; import {ICompletion, ISelectionRange} from "./Autocompleter"; import FlairStore from "../stores/FlairStore"; @@ -81,7 +81,7 @@ export default class CommunityProvider extends AutocompleteProvider { const matchedString = command[0]; completions = this.matcher.match(matchedString); - completions = _sortBy(completions, [ + completions = sortBy(completions, [ (c) => score(matchedString, c.groupId), (c) => c.groupId.length, ]).map(({avatarUrl, groupId, name}) => ({ diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx index 147d68f5ff..1ccbc41bd6 100644 --- a/src/autocomplete/EmojiProvider.tsx +++ b/src/autocomplete/EmojiProvider.tsx @@ -23,8 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider'; import QueryMatcher from './QueryMatcher'; import {PillCompletion} from './Components'; import {ICompletion, ISelectionRange} from './Autocompleter'; -import _uniq from 'lodash/uniq'; -import _sortBy from 'lodash/sortBy'; +import {uniq, sortBy} from 'lodash'; import SettingsStore from "../settings/SettingsStore"; import { shortcodeToUnicode } from '../HtmlUtils'; import { EMOJI, IEmoji } from '../emoji'; @@ -115,7 +114,7 @@ export default class EmojiProvider extends AutocompleteProvider { } // Finally, sort by original ordering sorters.push((c) => c._orderBy); - completions = _sortBy(_uniq(completions), sorters); + completions = sortBy(uniq(completions), sorters); completions = completions.map(({shortname}) => { const unicode = shortcodeToUnicode(shortname); diff --git a/src/autocomplete/QueryMatcher.ts b/src/autocomplete/QueryMatcher.ts index 9c91414556..a07ed29c7e 100644 --- a/src/autocomplete/QueryMatcher.ts +++ b/src/autocomplete/QueryMatcher.ts @@ -16,8 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import _at from 'lodash/at'; -import _uniq from 'lodash/uniq'; +import {at, uniq} from 'lodash'; import {removeHiddenChars} from "matrix-js-sdk/src/utils"; interface IOptions { @@ -73,7 +72,7 @@ export default class QueryMatcher { // type for their values. We assume that those values who's keys have // been specified will be string. Also, we cannot infer all the // types of the keys of the objects at compile. - const keyValues = _at(object, this._options.keys); + const keyValues = at(object, this._options.keys); if (this._options.funcs) { for (const f of this._options.funcs) { @@ -137,7 +136,7 @@ export default class QueryMatcher { }); // Now map the keys to the result objects. Also remove any duplicates. - return _uniq(matches.map((match) => match.object)); + return uniq(matches.map((match) => match.object)); } private processQuery(query: string): string { diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index 30a322d6b1..de16e68e01 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -27,8 +27,7 @@ import {PillCompletion} from './Components'; import * as sdk from '../index'; import {makeRoomPermalink} from "../utils/permalinks/Permalinks"; import {ICompletion, ISelectionRange} from "./Autocompleter"; -import uniqBy from "lodash/uniqBy"; -import sortBy from "lodash/sortBy"; +import {uniqBy, sortBy} from "lodash"; const ROOM_REGEX = /\B#\S*/g; diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx index c957b5e597..d592421ef2 100644 --- a/src/autocomplete/UserProvider.tsx +++ b/src/autocomplete/UserProvider.tsx @@ -23,7 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider'; import {PillCompletion} from './Components'; import * as sdk from '../index'; import QueryMatcher from './QueryMatcher'; -import _sortBy from 'lodash/sortBy'; +import {sortBy} from 'lodash'; import {MatrixClientPeg} from '../MatrixClientPeg'; import MatrixEvent from "matrix-js-sdk/src/models/event"; @@ -151,7 +151,7 @@ export default class UserProvider extends AutocompleteProvider { const currentUserId = MatrixClientPeg.get().credentials.userId; this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId); - this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20); + this.users = sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20); this.matcher.setObjects(this.users); } diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index ef0ee38ce6..e4befee863 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -20,7 +20,7 @@ import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import { Key } from '../../Keyboard'; import dis from '../../dispatcher/dispatcher'; -import throttle from 'lodash/throttle'; +import {throttle} from 'lodash'; import AccessibleButton from '../../components/views/elements/AccessibleButton'; import classNames from 'classnames'; diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js index 2d556aa597..85ace249a3 100644 --- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js +++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import debounce from "lodash/debounce"; +import {debounce} from "lodash"; import classNames from 'classnames'; import React from 'react'; import PropTypes from "prop-types"; diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index 935d452aaa..8c4e6aed31 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react'; import classNames from 'classnames'; import * as sdk from '../../../index'; -import debounce from "lodash/debounce"; +import {debounce} from "lodash"; import {IFieldState, IValidationResult} from "./Validation"; // Invoke validation from user input (when typing, etc.) at most once every N ms. diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx index 8fa623bd91..15af75084a 100644 --- a/src/components/views/rooms/Autocomplete.tsx +++ b/src/components/views/rooms/Autocomplete.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {createRef, KeyboardEvent} from 'react'; import classNames from 'classnames'; -import flatMap from "lodash/flatMap"; +import {flatMap} from "lodash"; import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter'; import {Room} from 'matrix-js-sdk/src/models/room'; diff --git a/src/emojipicker/recent.ts b/src/emojipicker/recent.ts index 0f005214a3..d86aad660d 100644 --- a/src/emojipicker/recent.ts +++ b/src/emojipicker/recent.ts @@ -16,7 +16,7 @@ limitations under the License. */ import SettingsStore from "../settings/SettingsStore"; -import orderBy from "lodash/orderBy"; +import {orderBy} from "lodash"; import { SettingLevel } from "../settings/SettingLevel"; interface ILegacyFormat { diff --git a/src/ratelimitedfunc.js b/src/ratelimitedfunc.js index 691671a086..3df3db615e 100644 --- a/src/ratelimitedfunc.js +++ b/src/ratelimitedfunc.js @@ -26,7 +26,7 @@ limitations under the License. * on unmount or similar to cancel any pending update. */ -import throttle from "lodash/throttle"; +import {throttle} from "lodash"; export default function ratelimitedfunc(fn, time) { const throttledFn = throttle(fn, time, { diff --git a/src/stores/CustomRoomTagStore.js b/src/stores/CustomRoomTagStore.js index ceee67c1e1..39177181b4 100644 --- a/src/stores/CustomRoomTagStore.js +++ b/src/stores/CustomRoomTagStore.js @@ -17,7 +17,7 @@ limitations under the License. import dis from '../dispatcher/dispatcher'; import EventEmitter from 'events'; -import throttle from "lodash/throttle"; +import {throttle} from "lodash"; import SettingsStore from "../settings/SettingsStore"; import RoomListStore, {LISTS_UPDATE_EVENT} from "./room-list/RoomListStore"; import {RoomNotificationStateStore} from "./notifications/RoomNotificationStateStore"; diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts index af615b07b6..1aa761e1c4 100644 --- a/src/stores/OwnProfileStore.ts +++ b/src/stores/OwnProfileStore.ts @@ -19,7 +19,7 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient"; import defaultDispatcher from "../dispatcher/dispatcher"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { User } from "matrix-js-sdk/src/models/user"; -import throttle from "lodash/throttle"; +import { throttle } from "lodash"; import { MatrixClientPeg } from "../MatrixClientPeg"; import { _t } from "../languageHandler"; diff --git a/src/stores/room-list/filters/NameFilterCondition.ts b/src/stores/room-list/filters/NameFilterCondition.ts index 13c75f3d4d..88edaecfb6 100644 --- a/src/stores/room-list/filters/NameFilterCondition.ts +++ b/src/stores/room-list/filters/NameFilterCondition.ts @@ -18,7 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { FILTER_CHANGED, FilterPriority, IFilterCondition } from "./IFilterCondition"; import { EventEmitter } from "events"; import { removeHiddenChars } from "matrix-js-sdk/src/utils"; -import throttle from "lodash/throttle"; +import { throttle } from "lodash"; /** * A filter condition for the room list which reveals rooms of a particular diff --git a/src/utils/DMRoomMap.js b/src/utils/DMRoomMap.js index c6ba0d4d83..4e219b1611 100644 --- a/src/utils/DMRoomMap.js +++ b/src/utils/DMRoomMap.js @@ -16,7 +16,7 @@ limitations under the License. */ import {MatrixClientPeg} from '../MatrixClientPeg'; -import _uniq from "lodash/uniq"; +import {uniq} from "lodash"; import {Room} from "matrix-js-sdk/src/matrix"; /** @@ -111,7 +111,7 @@ export default class DMRoomMap { userToRooms[userId] = [roomId]; } else { roomIds.push(roomId); - userToRooms[userId] = _uniq(roomIds); + userToRooms[userId] = uniq(roomIds); } }); return true; diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.js index c43e2c8250..5467716576 100644 --- a/src/utils/ResizeNotifier.js +++ b/src/utils/ResizeNotifier.js @@ -23,7 +23,7 @@ limitations under the License. * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy" */ import { EventEmitter } from "events"; -import throttle from "lodash/throttle"; +import { throttle } from "lodash"; export default class ResizeNotifier extends EventEmitter { constructor() { From e58b514803d934005434ae1745fcfddb677d73d3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 13:22:20 -0600 Subject: [PATCH 07/63] Add clarifying text to DM dialog about what is about to happen --- res/css/views/dialogs/_InviteDialog.scss | 4 ++++ src/RoomInvite.js | 20 +++++++++++++++++ src/components/views/dialogs/InviteDialog.js | 23 +++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 4 files changed, 47 insertions(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a0f98d74e9..b9063f46b9 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -233,3 +233,7 @@ limitations under the License. .mx_InviteDialog_addressBar { margin-right: 45px; } + +.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link { + padding: 0; +} diff --git a/src/RoomInvite.js b/src/RoomInvite.js index 420561ea41..408b4c9c6c 100644 --- a/src/RoomInvite.js +++ b/src/RoomInvite.js @@ -24,6 +24,8 @@ import * as sdk from './'; import { _t } from './languageHandler'; import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog"; import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog"; +import GroupStore from "./stores/GroupStore"; +import dis from "./dispatcher/dispatcher"; /** * Invites multiple addresses to a room @@ -64,6 +66,24 @@ export function showCommunityRoomInviteDialog(roomId, communityName) { ); } +export function showCommunityInviteDialog(communityId) { + const rooms = GroupStore.getGroupRooms(communityId) + .map(r => MatrixClientPeg.get().getRoom(r.roomId)) + .filter(r => !!r); + let chat = rooms.find(r => { + const idState = r.currentState.getStateEvents("im.vector.general_chat", ""); + if (!idState || idState.getContent()['groupId'] !== communityId) return false; + return true; + }); + if (!chat) chat = rooms[0]; + if (chat) { + const summary = GroupStore.getSummary(communityId); + showCommunityRoomInviteDialog(chat.roomId, summary?.profile?.name || communityId); + } else { + throw new Error("Failed to locate appropriate room to start an invite in"); + } +} + /** * Checks if the given MatrixEvent is a valid 3rd party user invite. * @param {MatrixEvent} event The event to check diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js index ba4abb31a7..b70f2fee10 100644 --- a/src/components/views/dialogs/InviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -32,7 +32,7 @@ import IdentityAuthClient from "../../../IdentityAuthClient"; import Modal from "../../../Modal"; import {humanizeTime} from "../../../utils/humanize"; import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom"; -import {inviteMultipleToRoom} from "../../../RoomInvite"; +import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite"; import {Key} from "../../../Keyboard"; import {Action} from "../../../dispatcher/actions"; import {DefaultTagID} from "../../../stores/room-list/models"; @@ -911,6 +911,11 @@ export default class InviteDialog extends React.PureComponent { this.props.onFinished(); }; + _onCommunityInviteClick = (e) => { + this.props.onFinished(); + showCommunityInviteDialog(TagOrderStore.getSelectedPrototypeTag()); + }; + _renderSection(kind: "recents"|"suggestions") { let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions; let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown; @@ -1093,6 +1098,22 @@ export default class InviteDialog extends React.PureComponent { return {userId}; }}, ); + if (TagOrderStore.getSelectedPrototypeTag()) { + const communityId = TagOrderStore.getSelectedPrototypeTag(); + const communityName = GroupStore.getSummary(communityId)?.profile?.name || communityId; + helpText = _t( + "Start a conversation with someone using their name, username (like ) or email address. " + + "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here.", + {communityName}, { + userId: () => { + return {userId}; + }, + a: (sub) => { + return {sub} + }, + }, + ) + } buttonText = _t("Go"); goButtonFn = this._startDm; } else { // KIND_INVITE diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2a914641f1..0d01fd47c8 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1713,6 +1713,7 @@ "Recently Direct Messaged": "Recently Direct Messaged", "Direct Messages": "Direct Messages", "Start a conversation with someone using their name, username (like ) or email address.": "Start a conversation with someone using their name, username (like ) or email address.", + "Start a conversation with someone using their name, username (like ) or email address. This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here.": "Start a conversation with someone using their name, username (like ) or email address. This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here.", "Go": "Go", "Invite someone using their name, username (like ), email address or share this room.": "Invite someone using their name, username (like ), email address or share this room.", "a new master key signature": "a new master key signature", From 6f237161fd841ee181fd38bfd3b8452020494c05 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 13:28:54 -0600 Subject: [PATCH 08/63] Appease the linter --- src/components/views/dialogs/InviteDialog.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js index b70f2fee10..934ed12ac1 100644 --- a/src/components/views/dialogs/InviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -1103,16 +1103,28 @@ export default class InviteDialog extends React.PureComponent { const communityName = GroupStore.getSummary(communityId)?.profile?.name || communityId; helpText = _t( "Start a conversation with someone using their name, username (like ) or email address. " + - "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here.", + "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click " + + "here.", {communityName}, { userId: () => { - return {userId}; + return ( + {userId} + ); }, a: (sub) => { - return {sub} + return ( + {sub} + ); }, }, - ) + ); } buttonText = _t("Go"); goButtonFn = this._startDm; From fb54b62be99ba4ae1f2c2a2bf9ffd448aeab72a2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 13:42:19 -0600 Subject: [PATCH 09/63] Appease the rest of the linter --- src/RoomInvite.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/RoomInvite.js b/src/RoomInvite.js index 408b4c9c6c..cae4501901 100644 --- a/src/RoomInvite.js +++ b/src/RoomInvite.js @@ -25,7 +25,6 @@ import { _t } from './languageHandler'; import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog"; import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog"; import GroupStore from "./stores/GroupStore"; -import dis from "./dispatcher/dispatcher"; /** * Invites multiple addresses to a room From 90d9d7128d2ccd7767aee6a8ef4053f38174fdd4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 14:56:59 -0600 Subject: [PATCH 10/63] Use FlairStore's cache for group naming Turns out GroupStore doesn't really know much. --- src/RoomInvite.js | 4 ++-- src/components/views/dialogs/CreateRoomDialog.js | 5 ++--- src/components/views/dialogs/InviteDialog.js | 8 +++----- src/stores/CommunityPrototypeStore.ts | 11 +++++++++++ src/stores/FlairStore.js | 16 ++++++++++++++++ 5 files changed, 34 insertions(+), 10 deletions(-) diff --git a/src/RoomInvite.js b/src/RoomInvite.js index cae4501901..7f2eec32f3 100644 --- a/src/RoomInvite.js +++ b/src/RoomInvite.js @@ -76,8 +76,8 @@ export function showCommunityInviteDialog(communityId) { }); if (!chat) chat = rooms[0]; if (chat) { - const summary = GroupStore.getSummary(communityId); - showCommunityRoomInviteDialog(chat.roomId, summary?.profile?.name || communityId); + const name = CommunityPrototypeInviteDialog.instance.getCommunityName(communityId); + showCommunityRoomInviteDialog(chat.roomId, name); } else { throw new Error("Failed to locate appropriate room to start an invite in"); } diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js index 4890626527..bdd3de07c0 100644 --- a/src/components/views/dialogs/CreateRoomDialog.js +++ b/src/components/views/dialogs/CreateRoomDialog.js @@ -26,7 +26,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {Key} from "../../../Keyboard"; import {privateShouldBeEncrypted} from "../../../createRoom"; import TagOrderStore from "../../../stores/TagOrderStore"; -import GroupStore from "../../../stores/GroupStore"; +import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; export default createReactClass({ displayName: 'CreateRoomDialog', @@ -240,8 +240,7 @@ export default createReactClass({ let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room'); if (TagOrderStore.getSelectedPrototypeTag()) { - const summary = GroupStore.getSummary(TagOrderStore.getSelectedPrototypeTag()); - const name = summary?.profile?.name || TagOrderStore.getSelectedPrototypeTag(); + const name = CommunityPrototypeStore.instance.getSelectedCommunityName(); title = _t("Create a room in %(communityName)s", {communityName: name}); } return ( diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js index 934ed12ac1..c2fd7e5b0e 100644 --- a/src/components/views/dialogs/InviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -38,7 +38,7 @@ import {Action} from "../../../dispatcher/actions"; import {DefaultTagID} from "../../../stores/room-list/models"; import RoomListStore from "../../../stores/room-list/RoomListStore"; import TagOrderStore from "../../../stores/TagOrderStore"; -import GroupStore from "../../../stores/GroupStore"; +import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; // we have a number of types defined from the Matrix spec which can't reasonably be altered here. /* eslint-disable camelcase */ @@ -925,8 +925,7 @@ export default class InviteDialog extends React.PureComponent { let sectionSubname = null; if (kind === 'suggestions' && TagOrderStore.getSelectedPrototypeTag()) { - const summary = GroupStore.getSummary(TagOrderStore.getSelectedPrototypeTag()); - const communityName = summary?.profile?.name || TagOrderStore.getSelectedPrototypeTag(); + const communityName = CommunityPrototypeStore.instance.getCommunityName(TagOrderStore.getSelectedPrototypeTag()); sectionSubname = _t("May include members not in %(communityName)s", {communityName}); } @@ -1099,8 +1098,7 @@ export default class InviteDialog extends React.PureComponent { }}, ); if (TagOrderStore.getSelectedPrototypeTag()) { - const communityId = TagOrderStore.getSelectedPrototypeTag(); - const communityName = GroupStore.getSummary(communityId)?.profile?.name || communityId; + const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); helpText = _t( "Start a conversation with someone using their name, username (like ) or email address. " + "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click " + diff --git a/src/stores/CommunityPrototypeStore.ts b/src/stores/CommunityPrototypeStore.ts index 581f8a97c8..eec0a8aab8 100644 --- a/src/stores/CommunityPrototypeStore.ts +++ b/src/stores/CommunityPrototypeStore.ts @@ -22,6 +22,8 @@ import { EffectiveMembership, getEffectiveMembership } from "../utils/membership import SettingsStore from "../settings/SettingsStore"; import * as utils from "matrix-js-sdk/src/utils"; import { UPDATE_EVENT } from "./AsyncStore"; +import FlairStore from "./FlairStore"; +import TagOrderStore from "./TagOrderStore"; interface IState { // nothing of value - we use account data @@ -43,6 +45,15 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient { return CommunityPrototypeStore.internalInstance; } + public getSelectedCommunityName(): string { + return CommunityPrototypeStore.instance.getCommunityName(TagOrderStore.getSelectedPrototypeTag()); + } + + public getCommunityName(communityId: string): string { + const profile = FlairStore.getGroupProfileCachedFast(this.matrixClient, communityId); + return profile?.name || communityId; + } + protected async onAction(payload: ActionPayload): Promise { if (!this.matrixClient || !SettingsStore.getValue("feature_communities_v2_prototypes")) { return; diff --git a/src/stores/FlairStore.js b/src/stores/FlairStore.js index 94b81c1ba5..10a4d96921 100644 --- a/src/stores/FlairStore.js +++ b/src/stores/FlairStore.js @@ -148,6 +148,22 @@ class FlairStore extends EventEmitter { }); } + /** + * Gets the profile for the given group if known, otherwise returns null. + * This triggers `getGroupProfileCached` if needed, though the result of the + * call will not be returned by this function. + * @param matrixClient The matrix client to use to fetch the profile, if needed. + * @param groupId The group ID to get the profile for. + * @returns The profile if known, otherwise null. + */ + getGroupProfileCachedFast(matrixClient, groupId) { + if (this._groupProfiles[groupId]) { + return this._groupProfiles[groupId]; + } + this.getGroupProfileCached(matrixClient, groupId); + return null; + } + async getGroupProfileCached(matrixClient, groupId) { if (this._groupProfiles[groupId]) { return this._groupProfiles[groupId]; From 0ffa5488647a29682fe91391126eee3d2703ba09 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 15:37:23 -0600 Subject: [PATCH 11/63] Change the menu button to a chevron by design request --- res/css/structures/_UserMenu.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 78795c85a2..b4e3a08e18 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_UserMenu { - // to make the ... button sort of aligned with the explore button below + // to make the menu button sort of aligned with the explore button below padding-right: 6px; .mx_UserMenu_headerButtons { @@ -36,7 +36,7 @@ limitations under the License. mask-size: contain; mask-repeat: no-repeat; background: $primary-fg-color; - mask-image: url('$(res)/img/element-icons/context-menu.svg'); + mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } } From 01b0acbe62c2ad2d3113df7d92957ce33b55cb9c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 16:14:08 -0600 Subject: [PATCH 12/63] Make the UserMenu echo the current community name --- res/css/structures/_UserMenu.scss | 46 ++++++++++++++++++++++++++ src/components/structures/UserMenu.tsx | 35 +++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 3 files changed, 81 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index b4e3a08e18..08fb1f49f0 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -19,6 +19,30 @@ limitations under the License. // to make the menu button sort of aligned with the explore button below padding-right: 6px; + &.mx_UserMenu_prototype { + // The margin & padding combination between here and the ::after is to + // align the border line with the tag panel. + margin-bottom: 6px; + + padding-right: 0; // make the right edge line up with the explore button + + .mx_UserMenu_headerButtons { + // considering we've eliminated right padding on the menu itself, we need to + // push the chevron in slightly (roughly lining up with the center of the + // plus buttons) + margin-right: 2px; + } + + // we cheat opacity on the theme colour with an after selector here + &::after { + content: ''; + border-bottom: 1px solid $roomsublist-divider-color; + opacity: 0.2; + display: block; + padding-top: 8px; + } + } + .mx_UserMenu_headerButtons { width: 16px; height: 16px; @@ -56,6 +80,28 @@ limitations under the License. } } + .mx_UserMenu_doubleName { + flex: 1; + min-width: 0; // make flexbox aware that it can crush this to a tiny width + + .mx_UserMenu_userName, + .mx_UserMenu_subUserName { + display: block; + } + + .mx_UserMenu_subUserName { + color: $muted-fg-color; + font-size: $font-13px; + line-height: $font-18px; + flex: 1; + + // Ellipsize any text overflow + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + .mx_UserMenu_userName { font-weight: 600; font-size: $font-15px; diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 30be71abcb..a1039f23b9 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -42,6 +42,9 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../views/context_menus/IconizedContextMenu"; +import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore"; +import * as fbEmitter from "fbemitter"; +import TagOrderStore from "../../stores/TagOrderStore"; interface IProps { isMinimized: boolean; @@ -58,6 +61,7 @@ export default class UserMenu extends React.Component { private dispatcherRef: string; private themeWatcherRef: string; private buttonRef: React.RefObject = createRef(); + private tagStoreRef: fbEmitter.EventSubscription; constructor(props: IProps) { super(props); @@ -77,14 +81,20 @@ export default class UserMenu extends React.Component { public componentDidMount() { this.dispatcherRef = defaultDispatcher.register(this.onAction); this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged); + this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate); } public componentWillUnmount() { if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef); if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef); OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); + this.tagStoreRef.remove(); } + private onTagStoreUpdate = () => { + this.forceUpdate(); // we don't have anything useful in state to update + }; + private isUserOnDarkTheme(): boolean { const theme = SettingsStore.getValue("theme"); if (theme.startsWith("custom-")) { @@ -298,12 +308,34 @@ export default class UserMenu extends React.Component { const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId(); const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); + const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); + + let isPrototype = false; + let menuName = _t("User menu"); let name = {displayName}; let buttons = ( {/* masked image in CSS */} ); + if (prototypeCommunityName) { + name = ( +
+ {prototypeCommunityName} + {displayName} +
+ ); + menuName = _t("Community and user menu"); + isPrototype = true; + } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) { + name = ( +
+ {_t("Home")} + {displayName} +
+ ); + isPrototype = true; + } if (this.props.isMinimized) { name = null; buttons = null; @@ -312,6 +344,7 @@ export default class UserMenu extends React.Component { const classes = classNames({ 'mx_UserMenu': true, 'mx_UserMenu_minimized': this.props.isMinimized, + 'mx_UserMenu_prototype': isPrototype, }); return ( @@ -320,7 +353,7 @@ export default class UserMenu extends React.Component { className={classes} onClick={this.onOpenMenuClick} inputRef={this.buttonRef} - label={_t("User menu")} + label={menuName} isExpanded={!!this.state.contextMenuPosition} onContextMenu={this.onContextMenu} > diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0d01fd47c8..3589c2ba76 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2129,6 +2129,7 @@ "All settings": "All settings", "Feedback": "Feedback", "User menu": "User menu", + "Community and user menu": "Community and user menu", "Could not load user profile": "Could not load user profile", "Verify this login": "Verify this login", "Session verified": "Session verified", From 02095389e7b82ceeaba192e6099689d93eada97d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 28 Aug 2020 17:03:17 -0600 Subject: [PATCH 13/63] Add structure for mixed prototype UserMenu --- res/css/structures/_UserMenu.scss | 46 ++++++ src/components/structures/UserMenu.tsx | 197 +++++++++++++++++++------ src/i18n/strings/en_EN.json | 6 +- 3 files changed, 199 insertions(+), 50 deletions(-) diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 08fb1f49f0..8c944935ed 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -135,6 +135,44 @@ limitations under the License. .mx_UserMenu_contextMenu { width: 247px; + // These override the styles already present on the user menu rather than try to + // define a new menu. They are specifically for the stacked menu when a community + // is being represented as a prototype. + &.mx_UserMenu_contextMenu_prototype { + padding-bottom: 16px; + + .mx_UserMenu_contextMenu_header { + padding-bottom: 0; + padding-top: 16px; + + &:nth-child(n + 2) { + padding-top: 8px; + } + } + + hr { + width: 85%; + opacity: 0.2; + border: none; + border-bottom: 1px solid $roomsublist-divider-color; + } + + &.mx_IconizedContextMenu { + > .mx_IconizedContextMenu_optionList { + margin-top: 4px; + + &::before { + border: none; + } + + > .mx_AccessibleButton { + padding-top: 2px; + padding-bottom: 2px; + } + } + } + } + &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red { .mx_AccessibleButton { padding-top: 16px; @@ -239,4 +277,12 @@ limitations under the License. .mx_UserMenu_iconSignOut::before { mask-image: url('$(res)/img/element-icons/leave.svg'); } + + .mx_UserMenu_iconMembers::before { + mask-image: url('$(res)/img/element-icons/room/members.svg'); + } + + .mx_UserMenu_iconInvite::before { + mask-image: url('$(res)/img/element-icons/room/invite.svg'); + } } diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index a1039f23b9..5db5371842 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -199,9 +199,32 @@ export default class UserMenu extends React.Component { defaultDispatcher.dispatch({action: 'view_home_page'}); }; + private onCommunitySettingsClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + console.log("TODO@onCommunitySettingsClick"); + }; + + private onCommunityMembersClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + console.log("TODO@onCommunityMembersClick"); + }; + + private onCommunityInviteClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + console.log("TODO@onCommunityInviteClick"); + }; + private renderContextMenu = (): React.ReactNode => { if (!this.state.contextMenuPosition) return null; + const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); + let hostingLink; const signupLink = getHostingLink("user-context-menu"); if (signupLink) { @@ -235,22 +258,135 @@ export default class UserMenu extends React.Component { ); } + let primaryHeader = ( +
+ + {OwnProfileStore.instance.displayName} + + + {MatrixClientPeg.get().getUserId()} + +
+ ); + let primaryOptionList = ( + + + {homeButton} + this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)} + /> + this.onSettingsOpen(e, USER_SECURITY_TAB)} + /> + this.onSettingsOpen(e, null)} + /> + {/* */} + + + + + + + ); + let secondarySection = null; + + if (prototypeCommunityName) { + primaryHeader = ( +
+ + {prototypeCommunityName} + +
+ ); + primaryOptionList = ( + + + + + + ); + secondarySection = ( + +
+
+
+ + {OwnProfileStore.instance.displayName} + + + {MatrixClientPeg.get().getUserId()} + +
+
+ + this.onSettingsOpen(e, null)} + /> + + + + + + + ) + } + + const classes = classNames({ + "mx_UserMenu_contextMenu": true, + "mx_UserMenu_contextMenu_prototype": !!prototypeCommunityName, + }); + return
-
- - {OwnProfileStore.instance.displayName} - - - {MatrixClientPeg.get().getUserId()} - -
+ {primaryHeader} {
{hostingLink} - - {homeButton} - this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)} - /> - this.onSettingsOpen(e, USER_SECURITY_TAB)} - /> - this.onSettingsOpen(e, null)} - /> - {/* */} - - - - - + {primaryOptionList} + {secondarySection} ; }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3589c2ba76..39b6061f27 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2121,13 +2121,13 @@ "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others", "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s", "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other", - "Switch to light mode": "Switch to light mode", - "Switch to dark mode": "Switch to dark mode", - "Switch theme": "Switch theme", "Notification settings": "Notification settings", "Security & privacy": "Security & privacy", "All settings": "All settings", "Feedback": "Feedback", + "Switch to light mode": "Switch to light mode", + "Switch to dark mode": "Switch to dark mode", + "Switch theme": "Switch theme", "User menu": "User menu", "Community and user menu": "Community and user menu", "Could not load user profile": "Could not load user profile", From 9ba33c7f80e3c812825415923994eaf98181524f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 29 Aug 2020 01:11:08 +0100 Subject: [PATCH 14/63] Fix eslint ts override tsx matching and delint --- .eslintrc.js | 2 +- src/ContentMessages.tsx | 20 ++++--- src/HtmlUtils.tsx | 11 +++- src/Modal.tsx | 8 +-- src/SlashCommands.tsx | 14 ++--- src/accessibility/KeyboardShortcuts.tsx | 2 +- src/accessibility/RovingTabIndex.tsx | 2 +- src/accessibility/Toolbar.tsx | 3 +- .../context_menu/ContextMenuTooltipButton.tsx | 2 +- .../roving/RovingAccessibleTooltipButton.tsx | 3 +- .../roving/RovingTabIndexWrapper.tsx | 1 - src/autocomplete/CommandProvider.tsx | 6 ++- src/autocomplete/CommunityProvider.tsx | 12 ++--- src/autocomplete/Components.tsx | 12 ++--- src/autocomplete/EmojiProvider.tsx | 6 ++- src/autocomplete/RoomProvider.tsx | 4 +- src/autocomplete/UserProvider.tsx | 15 ++++-- src/components/structures/ContextMenu.tsx | 3 +- src/components/structures/LeftPanel.tsx | 2 +- src/components/structures/LoggedInView.tsx | 37 +++++++------ src/components/structures/MatrixChat.tsx | 17 +++--- src/components/structures/RoomSearch.tsx | 3 +- src/components/structures/TabbedView.tsx | 1 - src/components/structures/UserMenu.tsx | 12 ++--- src/components/views/avatars/BaseAvatar.tsx | 4 +- .../views/avatars/DecoratedRoomAvatar.tsx | 2 +- src/components/views/avatars/GroupAvatar.tsx | 2 +- src/components/views/avatars/PulsedAvatar.tsx | 2 +- .../CommunityPrototypeInviteDialog.tsx | 52 ++++++++----------- .../CreateCommunityPrototypeDialog.tsx | 10 +++- src/components/views/dialogs/ShareDialog.tsx | 20 +++---- src/components/views/elements/Draggable.tsx | 4 +- .../views/elements/EventTilePreview.tsx | 14 +++-- src/components/views/elements/Field.tsx | 6 +-- .../elements/IRCTimelineProfileResizer.tsx | 7 ++- src/components/views/elements/InfoTooltip.tsx | 1 - src/components/views/elements/QRCode.tsx | 2 +- src/components/views/elements/Slider.tsx | 19 ++++--- .../views/elements/StyledCheckbox.tsx | 7 ++- .../views/right_panel/EncryptionInfo.tsx | 6 ++- .../views/right_panel/HeaderButtons.tsx | 16 +++--- .../views/right_panel/VerificationPanel.tsx | 23 ++++---- .../views/rooms/NotificationBadge.tsx | 1 + src/components/views/rooms/RoomList.tsx | 32 ++++++------ src/components/views/rooms/RoomSublist.tsx | 25 +++++---- src/components/views/rooms/RoomTile.tsx | 6 +-- src/components/views/rooms/TemporaryTile.tsx | 2 - .../views/settings/UpdateCheckButton.tsx | 2 +- .../tabs/user/AppearanceUserSettingsTab.tsx | 4 +- .../views/toasts/GenericExpiringToast.tsx | 10 +++- src/components/views/toasts/GenericToast.tsx | 8 ++- src/components/views/voip/CallView.tsx | 5 +- src/components/views/voip/IncomingCallBox.tsx | 3 +- src/languageHandler.tsx | 6 +-- 54 files changed, 268 insertions(+), 231 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index fc82e75ce2..bc2a142c2d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,7 +19,7 @@ module.exports = { }, overrides: [{ - "files": ["src/**/*.{ts, tsx}"], + "files": ["src/**/*.{ts,tsx}"], "extends": ["matrix-org/ts"], "rules": { // We disable this while we're transitioning diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx index 6f55a75d0c..eb8fff0eb1 100644 --- a/src/ContentMessages.tsx +++ b/src/ContentMessages.tsx @@ -70,6 +70,7 @@ interface IContent { interface IThumbnail { info: { + // eslint-disable-next-line camelcase thumbnail_info: { w: number; h: number; @@ -104,7 +105,12 @@ interface IAbortablePromise extends Promise { * @return {Promise} A promise that resolves with an object with an info key * and a thumbnail key. */ -function createThumbnail(element: ThumbnailableElement, inputWidth: number, inputHeight: number, mimeType: string): Promise { +function createThumbnail( + element: ThumbnailableElement, + inputWidth: number, + inputHeight: number, + mimeType: string, +): Promise { return new Promise((resolve) => { let targetWidth = inputWidth; let targetHeight = inputHeight; @@ -437,11 +443,13 @@ export default class ContentMessages { for (let i = 0; i < okFiles.length; ++i) { const file = okFiles[i]; if (!uploadAll) { - const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation', '', UploadConfirmDialog, { - file, - currentIndex: i, - totalFiles: okFiles.length, - }); + const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation', + '', UploadConfirmDialog, { + file, + currentIndex: i, + totalFiles: okFiles.length, + }, + ); const [shouldContinue, shouldUploadAll] = await finished; if (!shouldContinue) break; if (shouldUploadAll) { diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 5d33645bb7..2ce9e40aa6 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -339,6 +339,7 @@ class HtmlHighlighter extends BaseHighlighter { } } +// eslint-disable-next-line @typescript-eslint/no-unused-vars class TextHighlighter extends BaseHighlighter { private key = 0; @@ -366,6 +367,7 @@ class TextHighlighter extends BaseHighlighter { interface IContent { format?: string; + // eslint-disable-next-line camelcase formatted_body?: string; body: string; } @@ -474,8 +476,13 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts }); return isDisplayedWithHtml ? - : - { strippedBody }; + : { strippedBody }; } /** diff --git a/src/Modal.tsx b/src/Modal.tsx index 82ed33b794..0a36813961 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -151,7 +151,7 @@ export class ModalManager { prom: Promise, props?: IProps, className?: string, - options?: IOptions + options?: IOptions, ) { const modal: IModal = { onFinished: props ? props.onFinished : null, @@ -182,7 +182,7 @@ export class ModalManager { private getCloseFn( modal: IModal, - props: IProps + props: IProps, ): [IHandle["close"], IHandle["finished"]] { const deferred = defer(); return [async (...args: T) => { @@ -264,7 +264,7 @@ export class ModalManager { className?: string, isPriorityModal = false, isStaticModal = false, - options: IOptions = {} + options: IOptions = {}, ): IHandle { const {modal, closeDialog, onFinishedProm} = this.buildModal(prom, props, className, options); if (isPriorityModal) { @@ -287,7 +287,7 @@ export class ModalManager { private appendDialogAsync( prom: Promise, props?: IProps, - className?: string + className?: string, ): IHandle { const {modal, closeDialog, onFinishedProm} = this.buildModal(prom, props, className, {}); diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index d674634109..661ab74e6f 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -860,12 +860,12 @@ export const Commands = [ _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session' + ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' + '"%(fingerprint)s". This could mean your communications are being intercepted!', - { - fprint, - userId, - deviceId, - fingerprint, - })); + { + fprint, + userId, + deviceId, + fingerprint, + })); } await cli.setDeviceVerified(userId, deviceId, true); @@ -879,7 +879,7 @@ export const Commands = [ { _t('The signing key you provided matches the signing key you received ' + 'from %(userId)s\'s session %(deviceId)s. Session marked as verified.', - {userId, deviceId}) + {userId, deviceId}) }

, diff --git a/src/accessibility/KeyboardShortcuts.tsx b/src/accessibility/KeyboardShortcuts.tsx index f527ab4a14..58d8124122 100644 --- a/src/accessibility/KeyboardShortcuts.tsx +++ b/src/accessibility/KeyboardShortcuts.tsx @@ -168,7 +168,7 @@ const shortcuts: Record = { key: Key.U, }], description: _td("Upload a file"), - } + }, ], [Categories.ROOM_LIST]: [ diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx index 5a650d4b6e..b1dbb56a01 100644 --- a/src/accessibility/RovingTabIndex.tsx +++ b/src/accessibility/RovingTabIndex.tsx @@ -190,7 +190,7 @@ export const RovingTabIndexProvider: React.FC = ({children, handleHomeEn ev.preventDefault(); ev.stopPropagation(); } else if (onKeyDown) { - return onKeyDown(ev, state); + return onKeyDown(ev, context.state); } }, [context.state, onKeyDown, handleHomeEnd]); diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx index 0e968461a8..cc2a1769c7 100644 --- a/src/accessibility/Toolbar.tsx +++ b/src/accessibility/Toolbar.tsx @@ -30,6 +30,7 @@ const Toolbar: React.FC = ({children, ...props}) => { const target = ev.target as HTMLElement; let handled = true; + // HOME and END are handled by RovingTabIndexProvider switch (ev.key) { case Key.ARROW_UP: case Key.ARROW_DOWN: @@ -47,8 +48,6 @@ const Toolbar: React.FC = ({children, ...props}) => { } break; - // HOME and END are handled by RovingTabIndexProvider - default: handled = false; } diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx index abc5412100..49f57ca7b6 100644 --- a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx +++ b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx @@ -20,7 +20,7 @@ import React from "react"; import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton"; -interface IProps extends React.ComponentProps { +interface IProps extends React.ComponentProps { // whether or not the context menu is currently open isExpanded: boolean; } diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx index cc824fef22..2cb974d60e 100644 --- a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx +++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx @@ -20,7 +20,8 @@ import AccessibleTooltipButton from "../../components/views/elements/AccessibleT import {useRovingTabIndex} from "../RovingTabIndex"; import {Ref} from "./types"; -interface IProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> { +type ATBProps = React.ComponentProps; +interface IProps extends Omit { inputRef?: Ref; } diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx index c826b74497..5211f30215 100644 --- a/src/accessibility/roving/RovingTabIndexWrapper.tsx +++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; -import AccessibleButton from "../../components/views/elements/AccessibleButton"; import {useRovingTabIndex} from "../RovingTabIndex"; import {FocusHandler, Ref} from "./types"; diff --git a/src/autocomplete/CommandProvider.tsx b/src/autocomplete/CommandProvider.tsx index e7a6f44536..3ff8ff0469 100644 --- a/src/autocomplete/CommandProvider.tsx +++ b/src/autocomplete/CommandProvider.tsx @@ -89,7 +89,11 @@ export default class CommandProvider extends AutocompleteProvider { renderCompletions(completions: React.ReactNode[]): React.ReactNode { return ( -
+
{ completions }
); diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx index f34fee890e..031fcd6169 100644 --- a/src/autocomplete/CommunityProvider.tsx +++ b/src/autocomplete/CommunityProvider.tsx @@ -91,15 +91,15 @@ export default class CommunityProvider extends AutocompleteProvider { href: makeGroupPermalink(groupId), component: ( - + ), range, - })) - .slice(0, 4); + })).slice(0, 4); } return completions; } diff --git a/src/autocomplete/Components.tsx b/src/autocomplete/Components.tsx index 6ac2f4db14..4b0d35698d 100644 --- a/src/autocomplete/Components.tsx +++ b/src/autocomplete/Components.tsx @@ -34,9 +34,9 @@ export const TextualCompletion = forwardRef((props const {title, subtitle, description, className, ...restProps} = props; return (
{ title } { subtitle } @@ -53,9 +53,9 @@ export const PillCompletion = forwardRef((props, ref) const {title, subtitle, description, className, children, ...restProps} = props; return (
{ children } { title } diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx index 147d68f5ff..eaca42b0dd 100644 --- a/src/autocomplete/EmojiProvider.tsx +++ b/src/autocomplete/EmojiProvider.tsx @@ -139,7 +139,11 @@ export default class EmojiProvider extends AutocompleteProvider { renderCompletions(completions: React.ReactNode[]): React.ReactNode { return ( -
+
{ completions }
); diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index b18b2d132c..defbc8c47f 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -110,9 +110,7 @@ export default class RoomProvider extends AutocompleteProvider { ), range, }; - }) - .filter((completion) => !!completion.completion && completion.completion.length > 0) - .slice(0, 4); + }).filter((completion) => !!completion.completion && completion.completion.length > 0).slice(0, 4); } return completions; } diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx index c957b5e597..3bde4b1d07 100644 --- a/src/autocomplete/UserProvider.tsx +++ b/src/autocomplete/UserProvider.tsx @@ -71,8 +71,13 @@ export default class UserProvider extends AutocompleteProvider { } } - private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean, - data: IRoomTimelineData) => { + private onRoomTimeline = ( + ev: MatrixEvent, + room: Room, + toStartOfTimeline: boolean, + removed: boolean, + data: IRoomTimelineData, + ) => { if (!room) return; if (removed) return; if (room.roomId !== this.room.roomId) return; @@ -171,7 +176,11 @@ export default class UserProvider extends AutocompleteProvider { renderCompletions(completions: React.ReactNode[]): React.ReactNode { return ( -
+
{ completions }
); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 587ae2cb6b..64e0160d83 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -233,8 +233,7 @@ export class ContextMenu extends React.PureComponent { switch (ev.key) { case Key.TAB: case Key.ESCAPE: - // close on left and right arrows too for when it is a context menu on a - case Key.ARROW_LEFT: + case Key.ARROW_LEFT: // close on left and right arrows too for when it is a context menu on a case Key.ARROW_RIGHT: this.props.onFinished(); break; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 899dfe222d..1c2295384c 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -377,7 +377,7 @@ export default class LeftPanel extends React.Component { public render(): React.ReactNode { const tagPanel = !this.state.showTagPanel ? null : (
- + {SettingsStore.getValue("feature_custom_tags") ? : null}
); diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index d7f2c73a0b..e427eb92cb 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -43,11 +43,11 @@ import PlatformPeg from "../../PlatformPeg"; import { DefaultTagID } from "../../stores/room-list/models"; import { showToast as showSetPasswordToast, - hideToast as hideSetPasswordToast + hideToast as hideSetPasswordToast, } from "../../toasts/SetPasswordToast"; import { showToast as showServerLimitToast, - hideToast as hideServerLimitToast + hideToast as hideServerLimitToast, } from "../../toasts/ServerLimitToast"; import { Action } from "../../dispatcher/actions"; import LeftPanel from "./LeftPanel"; @@ -79,6 +79,7 @@ interface IProps { initialEventPixelOffset: number; leftDisabled: boolean; rightDisabled: boolean; + // eslint-disable-next-line camelcase page_type: string; autoJoin: boolean; thirdPartyInvite?: object; @@ -98,7 +99,9 @@ interface IProps { } interface IUsageLimit { + // eslint-disable-next-line camelcase limit_type: "monthly_active_user" | string; + // eslint-disable-next-line camelcase admin_contact?: string; } @@ -316,10 +319,10 @@ class LoggedInView extends React.Component { } }; - _calculateServerLimitToast(syncErrorData: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) { - const error = syncErrorData && syncErrorData.error && syncErrorData.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED"; + _calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) { + const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED"; if (error) { - usageLimitEventContent = syncErrorData.error.data; + usageLimitEventContent = syncError.error.data; } if (usageLimitEventContent) { @@ -620,18 +623,18 @@ class LoggedInView extends React.Component { switch (this.props.page_type) { case PageTypes.RoomView: pageElement = ; + ref={this._roomView} + autoJoin={this.props.autoJoin} + onRegistered={this.props.onRegistered} + thirdPartyInvite={this.props.thirdPartyInvite} + oobData={this.props.roomOobData} + viaServers={this.props.viaServers} + eventPixelOffset={this.props.initialEventPixelOffset} + key={this.props.currentRoomId || 'roomview'} + disabled={this.props.middleDisabled} + ConferenceHandler={this.props.ConferenceHandler} + resizeNotifier={this.props.resizeNotifier} + />; break; case PageTypes.MyGroups: diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 9d51062b7d..176aaf95a3 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -69,7 +69,7 @@ import { ViewUserPayload } from "../../dispatcher/payloads/ViewUserPayload"; import { Action } from "../../dispatcher/actions"; import { showToast as showAnalyticsToast, - hideToast as hideAnalyticsToast + hideToast as hideAnalyticsToast, } from "../../toasts/AnalyticsToast"; import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; @@ -129,6 +129,7 @@ interface IScreen { params?: object; } +/* eslint-disable camelcase */ interface IRoomInfo { room_id?: string; room_alias?: string; @@ -140,6 +141,7 @@ interface IRoomInfo { oob_data?: object; via_servers?: string[]; } +/* eslint-enable camelcase */ interface IProps { // TODO type things better config: Record; @@ -165,6 +167,7 @@ interface IState { // the master view we are showing. view: Views; // What the LoggedInView would be showing if visible + // eslint-disable-next-line camelcase page_type?: PageTypes; // The ID of the room we're viewing. This is either populated directly // in the case where we view a room by ID or by RoomView when it resolves @@ -180,8 +183,11 @@ interface IState { middleDisabled: boolean; // the right panel's disabled state is tracked in its store. // Parameters used in the registration dance with the IS + // eslint-disable-next-line camelcase register_client_secret?: string; + // eslint-disable-next-line camelcase register_session_id?: string; + // eslint-disable-next-line camelcase register_id_sid?: string; // When showing Modal dialogs we need to set aria-hidden on the root app element // and disable it when there are no dialogs @@ -341,6 +347,7 @@ export default class MatrixChat extends React.PureComponent { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage + // eslint-disable-next-line camelcase UNSAFE_componentWillUpdate(props, state) { if (this.shouldTrackPageChange(this.state, state)) { this.startPageChangeTimer(); @@ -610,8 +617,7 @@ export default class MatrixChat extends React.PureComponent { const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog"); Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {initialTabId: tabPayload.initialTabId}, - /*className=*/null, /*isPriority=*/false, /*isStatic=*/true - ); + /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); // View the welcome or home page if we need something to look at this.viewSomethingBehindModal(); @@ -1080,7 +1086,7 @@ export default class MatrixChat extends React.PureComponent { title: _t("Leave room"), description: ( - { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) } + { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) } { warnings } ), @@ -1433,7 +1439,6 @@ export default class MatrixChat extends React.PureComponent { cli.on("crypto.warning", (type) => { switch (type) { case 'CRYPTO_WARNING_OLD_VERSION_DETECTED': - const brand = SdkConfig.get().brand; Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, { title: _t('Old cryptography data detected'), description: _t( @@ -1444,7 +1449,7 @@ export default class MatrixChat extends React.PureComponent { "in this version. This may also cause messages exchanged with this " + "version to fail. If you experience problems, log out and back in " + "again. To retain message history, export and re-import your keys.", - { brand }, + { brand: SdkConfig.get().brand }, ), }); break; diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx index f6b8d42c30..768bc38d23 100644 --- a/src/components/structures/RoomSearch.tsx +++ b/src/components/structures/RoomSearch.tsx @@ -20,7 +20,6 @@ import classNames from "classnames"; import defaultDispatcher from "../../dispatcher/dispatcher"; import { _t } from "../../languageHandler"; import { ActionPayload } from "../../dispatcher/payloads"; -import { throttle } from 'lodash'; import { Key } from "../../Keyboard"; import AccessibleButton from "../views/elements/AccessibleButton"; import { Action } from "../../dispatcher/actions"; @@ -137,7 +136,7 @@ export default class RoomSearch extends React.PureComponent { }); let icon = ( -
+
); let input = ( { >
- - {OwnProfileStore.instance.displayName} - + + {OwnProfileStore.instance.displayName} + - {MatrixClientPeg.get().getUserId()} - + {MatrixClientPeg.get().getUserId()} +
{ urls, width = 40, height = 40, - resizeMethod = "crop", // eslint-disable-line no-unused-vars + resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars defaultToInitialLetter = true, onClick, inputRef, diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index e6dadf676c..d7e012467b 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -126,7 +126,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent { if (this.isUnmounted) return; - let newIcon = this.getPresenceIcon(); + const newIcon = this.getPresenceIcon(); if (newIcon !== this.state.icon) this.setState({icon: newIcon}); }; diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx index e55e2e6fac..51327605c0 100644 --- a/src/components/views/avatars/GroupAvatar.tsx +++ b/src/components/views/avatars/GroupAvatar.tsx @@ -47,7 +47,7 @@ export default class GroupAvatar extends React.Component { render() { // extract the props we use from props so we can pass any others through // should consider adding this as a global rule in js-sdk? - /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/ + /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */ const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props; return ( diff --git a/src/components/views/avatars/PulsedAvatar.tsx b/src/components/views/avatars/PulsedAvatar.tsx index 94a6c87687..b4e876b9f6 100644 --- a/src/components/views/avatars/PulsedAvatar.tsx +++ b/src/components/views/avatars/PulsedAvatar.tsx @@ -25,4 +25,4 @@ const PulsedAvatar: React.FC = (props) => {
; }; -export default PulsedAvatar; \ No newline at end of file +export default PulsedAvatar; diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx index 7a500cd053..4a454c8cbb 100644 --- a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx +++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx @@ -21,9 +21,6 @@ import { IDialogProps } from "./IDialogProps"; import Field from "../elements/Field"; import AccessibleButton from "../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import InfoTooltip from "../elements/InfoTooltip"; -import dis from "../../../dispatcher/dispatcher"; -import {showCommunityRoomInviteDialog} from "../../../RoomInvite"; import { arrayFastClone } from "../../../utils/arrays"; import SdkConfig from "../../../SdkConfig"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; @@ -31,7 +28,6 @@ import InviteDialog from "./InviteDialog"; import BaseAvatar from "../avatars/BaseAvatar"; import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo"; import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite"; -import {humanizeTime} from "../../../utils/humanize"; import StyledCheckbox from "../elements/StyledCheckbox"; import Modal from "../../../Modal"; import ErrorDialog from "./ErrorDialog"; @@ -171,44 +167,38 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent< public render() { const emailAddresses = []; this.state.emailTargets.forEach((address, i) => { - emailAddresses.push( - this.onAddressChange(e, i)} - label={_t("Email address")} - placeholder={_t("Email address")} - onBlur={() => this.onAddressBlur(i)} - /> - ); + emailAddresses.push( this.onAddressChange(e, i)} + label={_t("Email address")} + placeholder={_t("Email address")} + onBlur={() => this.onAddressBlur(i)} + />); }); // Push a clean input - emailAddresses.push( - this.onAddressChange(e, emailAddresses.length)} - label={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")} - placeholder={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")} - /> - ); + emailAddresses.push( this.onAddressChange(e, emailAddresses.length)} + label={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")} + placeholder={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")} + />); let peopleIntro = null; - let people = []; + const people = []; if (this.state.showPeople) { const humansToPresent = this.state.people.slice(0, this.state.numPeople); humansToPresent.forEach((person, i) => { people.push(this.renderPerson(person, i)); }); if (humansToPresent.length < this.state.people.length) { - people.push( - {_t("Show more")} - ); + people.push({_t("Show more")}); } } if (this.state.people.length > 0) { diff --git a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx index 58412c23d6..dbfc208583 100644 --- a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx +++ b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx @@ -164,7 +164,10 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent< ); if (this.state.error) { helpText = ( - + {this.state.error} ); @@ -205,7 +208,10 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent< ref={this.avatarUploadRef} accept="image/*" onChange={this.onAvatarChanged} /> - + {preview}
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx index 22f83d391c..e849f7efe3 100644 --- a/src/components/views/dialogs/ShareDialog.tsx +++ b/src/components/views/dialogs/ShareDialog.tsx @@ -186,8 +186,8 @@ export default class ShareDialog extends React.PureComponent { title = _t('Share Room Message'); checkbox =
{ _t('Link to selected message') } @@ -198,16 +198,18 @@ export default class ShareDialog extends React.PureComponent { const encodedUrl = encodeURIComponent(matrixToUrl); const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - return
- { matrixToUrl } diff --git a/src/components/views/elements/Draggable.tsx b/src/components/views/elements/Draggable.tsx index 3397fd901c..a6eb8323f3 100644 --- a/src/components/views/elements/Draggable.tsx +++ b/src/components/views/elements/Draggable.tsx @@ -34,7 +34,6 @@ export interface ILocationState { } export default class Draggable extends React.Component { - constructor(props: IProps) { super(props); @@ -77,5 +76,4 @@ export default class Draggable extends React.Component { render() { return
; } - -} \ No newline at end of file +} diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 7d8b774955..98f6850e6b 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -39,6 +39,7 @@ interface IProps { className: string; } +/* eslint-disable camelcase */ interface IState { userId: string; displayname: string; @@ -72,7 +73,6 @@ export default class EventTilePreview extends React.Component { displayname: profileInfo.displayname, avatar_url, }); - } private fakeEvent({userId, displayname, avatar_url}: IState) { @@ -114,16 +114,14 @@ export default class EventTilePreview extends React.Component { public render() { const event = this.fakeEvent(this.state); - let className = classnames( - this.props.className, - { - "mx_IRCLayout": this.props.useIRCLayout, - "mx_GroupLayout": !this.props.useIRCLayout, - } - ); + const className = classnames(this.props.className, { + "mx_IRCLayout": this.props.useIRCLayout, + "mx_GroupLayout": !this.props.useIRCLayout, + }); return
; } } +/* eslint-enable camelcase */ diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index d9fd59dc11..d2869f68c8 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -198,11 +198,9 @@ export default class Field extends React.PureComponent { } } - - public render() { - const { - element, prefixComponent, postfixComponent, className, onValidate, children, + /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */ + const { element, prefixComponent, postfixComponent, className, onValidate, children, tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props; // Set some defaults for the element diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx index 1098d0293e..ecd63816de 100644 --- a/src/components/views/elements/IRCTimelineProfileResizer.tsx +++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx @@ -78,7 +78,12 @@ export default class IRCTimelineProfileResizer extends React.Component = ({data, className, ...options}) => { return () => { cancelled = true; }; - }, [JSON.stringify(data), options]); + }, [JSON.stringify(data), options]); // eslint-disable-line react-hooks/exhaustive-deps return
{ dataUri ? {_t("QR : } diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx index a88c581d07..b7c8e1b533 100644 --- a/src/components/views/elements/Slider.tsx +++ b/src/components/views/elements/Slider.tsx @@ -45,7 +45,7 @@ export default class Slider extends React.Component { // non linear slider. private offset(values: number[], value: number): number { // the index of the first number greater than value. - let closest = values.reduce((prev, curr) => { + const closest = values.reduce((prev, curr) => { return (value > curr ? prev + 1 : prev); }, 0); @@ -68,17 +68,16 @@ export default class Slider extends React.Component { const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue); return 100 * (closest - 1 + linearInterpolation) * intervalWidth; - } render(): React.ReactNode { - const dots = this.props.values.map(v => - {} : () => this.props.onSelectionChange(v)} - key={v} - disabled={this.props.disabled} - />); + const dots = this.props.values.map(v => {} : () => this.props.onSelectionChange(v)} + key={v} + disabled={this.props.disabled} + />); let selection = null; @@ -93,7 +92,7 @@ export default class Slider extends React.Component { return
-
{} : this.onClick.bind(this)}/> +
{} : this.onClick.bind(this)} /> { selection }
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx index be983828ff..f8d2665d07 100644 --- a/src/components/views/elements/StyledCheckbox.tsx +++ b/src/components/views/elements/StyledCheckbox.tsx @@ -17,8 +17,6 @@ limitations under the License. import React from "react"; import { randomString } from "matrix-js-sdk/src/randomstring"; -const CHECK_BOX_SVG = require("../../../../res/img/feather-customised/check.svg"); - interface IProps extends React.InputHTMLAttributes { } @@ -39,13 +37,14 @@ export default class StyledCheckbox extends React.PureComponent } public render() { + /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */ const { children, className, ...otherProps } = this.props; return