Page MenuHomePhabricator
Differential D7500

[native] Style RegistrationNavigator header
ClosedPublic
Actions

Authored by ashoat on Apr 18 2023, 12:54 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 9, 11:49 AM
Unknown Object (File)
Sun, Mar 9, 3:42 AM
Unknown Object (File)
Sun, Mar 9, 3:42 AM
Unknown Object (File)
Sun, Mar 9, 3:42 AM
Unknown Object (File)
Sun, Mar 9, 3:38 AM
Unknown Object (File)
Mar 3 2025, 4:44 PM
Unknown Object (File)
Mar 1 2025, 4:33 AM
Unknown Object (File)
Feb 27 2025, 5:49 PM
View All 96 Files
Subscribers
tomek

Details

Reviewers
ginsu
atul
Commits
rCOMM61d1812e0178: [native] Style RegistrationNavigator header
Summary

The header should be transparent and should only have a single back button.

Depends on D7496

Test Plan
beforeafter

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ashoat created this revision.Apr 18 2023, 12:54 PM
Herald added a subscriber: tomek. · View Herald TranscriptApr 18 2023, 12:54 PM
ashoat edited the test plan for this revision. (Show Details)Apr 18 2023, 12:55 PM
ashoat edited the test plan for this revision. (Show Details)
ashoat edited the test plan for this revision. (Show Details)
ashoat edited the test plan for this revision. (Show Details)
ashoat added inline comments.Apr 18 2023, 12:59 PM
native/account/registration/keyserver-selection.react.js
19 ↗(On Diff #25301)

Context on why this is necessary is here.

I tried putting this in RegistrationNavigator but didn't succeed, either by nesting it between the Registration.Navigator and Registration.Screen, nor by putting it above the Registration.Navigator.

I think we'll need this for every screen, so I'll factor it out into a more convenient component in the next diff.

ashoat added a child revision: D7501: [native] Introduce RegistrationContainer.Apr 18 2023, 1:05 PM
Harbormaster completed remote builds in B18475: Diff 25301.Apr 18 2023, 1:12 PM
ashoat requested review of this revision.Apr 18 2023, 1:12 PM
atul accepted this revision.Apr 19 2023, 9:44 AM
This revision is now accepted and ready to land.Apr 19 2023, 9:44 AM
Closed by commit rCOMM61d1812e0178: [native] Style RegistrationNavigator header (authored by ashoat). · Explain WhyApr 19 2023, 6:39 PM
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMM61d1812e0178: [native] Style RegistrationNavigator header.

Revision Contents
Changeset List

PathSize
native/
account/
registration/
13 lines
10 lines

Diff 25442

View Options

native/account/registration/keyserver-selection.react.js

// @flow // @flow
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
import SearchIndex from 'lib/shared/search-index'; import SearchIndex from 'lib/shared/search-index';
import { threadSearchText } from 'lib/shared/thread-utils'; import { threadSearchText } from 'lib/shared/thread-utils';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import chatThreadListCSS from '../../chat/chat-thread-list.css'; import chatThreadListCSS from '../../chat/chat-thread-list.css';
import SidebarItem from '../../chat/sidebar-item.react'; import SidebarItem from '../../chat/sidebar-item.react';
import { useSelector } from '../../redux/redux-utils'; import { useSelector } from '../../redux/redux-utils';
import globalCSS from '../../style.css'; import globalCSS from '../../style.css';
import { MagnifyingGlass } from '../../vectors.react'; import { MagnifyingGlass } from '../../vectors.react';
import Input from '../input.react'; import Input from '../input.react';
import { useModalContext } from '../modal-provider.react'; import { useModalContext } from '../modal-provider.react';
import Modal from '../modal.react'; import Modal from '../modal.react';
type Props = { type Props = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function SidebarListModal(props: Props): React.Node { function SidebarListModal(props: Props): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [searchState, setSearchState] = React.useState({ const { listData, searchState, setSearchState } = useSearchSidebars(
text: '', threadInfo,
results: new Set<string>(), );
});
const { popModal } = useModalContext(); const { popModal } = useModalContext();
const sidebarInfos = useSelector( const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadInfo.id] ?? [], state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
); );
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
const listData = React.useMemo(() => {
if (!searchState.text) {
return sidebarInfos;
}
return sidebarInfos.filter(sidebarInfo =>
searchState.results.has(sidebarInfo.threadInfo.id),
);
}, [sidebarInfos, searchState]);
const sidebars = React.useMemo( const sidebars = React.useMemo(
() => () =>
listData.map(item => ( listData.map(item => (
<div <div
className={classNames( className={classNames(
chatThreadListCSS.thread, chatThreadListCSS.thread,
chatThreadListCSS.sidebar, chatThreadListCSS.sidebar,
)} )}
Show All 21 Lines const searchIndex = React.useMemo(() => {
return index; return index;
}, [sidebarInfos, userInfos, viewerID]); }, [sidebarInfos, userInfos, viewerID]);
React.useEffect(() => { React.useEffect(() => {
setSearchState(curState => ({ setSearchState(curState => ({
...curState, ...curState,
results: new Set(searchIndex.getSearchResults(curState.text)), results: new Set(searchIndex.getSearchResults(curState.text)),
})); }));
}, [searchIndex]); }, [searchIndex, setSearchState]);
const onChangeSearchText = React.useCallback( const onChangeSearchText = React.useCallback(
(event: SyntheticEvent<HTMLInputElement>) => { (event: SyntheticEvent<HTMLInputElement>) => {
const searchText = event.currentTarget.value; const searchText = event.currentTarget.value;
setSearchState({ setSearchState({
text: searchText, text: searchText,
results: new Set(searchIndex.getSearchResults(searchText)), results: new Set(searchIndex.getSearchResults(searchText)),
}); });
}, },
[searchIndex], [searchIndex, setSearchState],
); );
const clearQuery = React.useCallback( const clearQuery = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => { (event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault(); event.preventDefault();
setSearchState({ text: '', results: [] }); setSearchState({ text: '', results: new Set() });
}, },
[], [setSearchState],
); );
let clearQueryButton = null; let clearQueryButton = null;
if (searchState.text) { if (searchState.text) {
clearQueryButton = ( clearQueryButton = (
<a href="#" onClick={clearQuery}> <a href="#" onClick={clearQuery}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faTimesCircle} icon={faTimesCircle}
Show All 33 Lines
View Options

native/account/registration/registration-navigator.react.js

// @flow // @flow
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
import SearchIndex from 'lib/shared/search-index'; import SearchIndex from 'lib/shared/search-index';
import { threadSearchText } from 'lib/shared/thread-utils'; import { threadSearchText } from 'lib/shared/thread-utils';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import chatThreadListCSS from '../../chat/chat-thread-list.css'; import chatThreadListCSS from '../../chat/chat-thread-list.css';
import SidebarItem from '../../chat/sidebar-item.react'; import SidebarItem from '../../chat/sidebar-item.react';
import { useSelector } from '../../redux/redux-utils'; import { useSelector } from '../../redux/redux-utils';
import globalCSS from '../../style.css'; import globalCSS from '../../style.css';
import { MagnifyingGlass } from '../../vectors.react'; import { MagnifyingGlass } from '../../vectors.react';
import Input from '../input.react'; import Input from '../input.react';
import { useModalContext } from '../modal-provider.react'; import { useModalContext } from '../modal-provider.react';
import Modal from '../modal.react'; import Modal from '../modal.react';
type Props = { type Props = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function SidebarListModal(props: Props): React.Node { function SidebarListModal(props: Props): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [searchState, setSearchState] = React.useState({ const { listData, searchState, setSearchState } = useSearchSidebars(
text: '', threadInfo,
results: new Set<string>(), );
});
const { popModal } = useModalContext(); const { popModal } = useModalContext();
const sidebarInfos = useSelector( const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadInfo.id] ?? [], state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
); );
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
const listData = React.useMemo(() => {
if (!searchState.text) {
return sidebarInfos;
}
return sidebarInfos.filter(sidebarInfo =>
searchState.results.has(sidebarInfo.threadInfo.id),
);
}, [sidebarInfos, searchState]);
const sidebars = React.useMemo( const sidebars = React.useMemo(
() => () =>
listData.map(item => ( listData.map(item => (
<div <div
className={classNames( className={classNames(
chatThreadListCSS.thread, chatThreadListCSS.thread,
chatThreadListCSS.sidebar, chatThreadListCSS.sidebar,
)} )}
Show All 21 Lines const searchIndex = React.useMemo(() => {
return index; return index;
}, [sidebarInfos, userInfos, viewerID]); }, [sidebarInfos, userInfos, viewerID]);
React.useEffect(() => { React.useEffect(() => {
setSearchState(curState => ({ setSearchState(curState => ({
...curState, ...curState,
results: new Set(searchIndex.getSearchResults(curState.text)), results: new Set(searchIndex.getSearchResults(curState.text)),
})); }));
}, [searchIndex]); }, [searchIndex, setSearchState]);
const onChangeSearchText = React.useCallback( const onChangeSearchText = React.useCallback(
(event: SyntheticEvent<HTMLInputElement>) => { (event: SyntheticEvent<HTMLInputElement>) => {
const searchText = event.currentTarget.value; const searchText = event.currentTarget.value;
setSearchState({ setSearchState({
text: searchText, text: searchText,
results: new Set(searchIndex.getSearchResults(searchText)), results: new Set(searchIndex.getSearchResults(searchText)),
}); });
}, },
[searchIndex], [searchIndex, setSearchState],
); );
const clearQuery = React.useCallback( const clearQuery = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => { (event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault(); event.preventDefault();
setSearchState({ text: '', results: [] }); setSearchState({ text: '', results: new Set() });
}, },
[], [setSearchState],
); );
let clearQueryButton = null; let clearQueryButton = null;
if (searchState.text) { if (searchState.text) {
clearQueryButton = ( clearQueryButton = (
<a href="#" onClick={clearQuery}> <a href="#" onClick={clearQuery}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faTimesCircle} icon={faTimesCircle}
Show All 33 Lines