Page MenuHomePhabricator
Files F3293527

D3367.diff
No OneTemporary
Actions

D3367.diff
View Options

diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -288,37 +288,3 @@
display: flex;
flex-direction: column;
}
-
-div.searchContainer {
- background-color: var(--text-input-bg);
- display: flex;
- align-items: center;
- margin: 1rem;
-}
-
-input.searchInput {
- background-color: var(--text-input-bg);
- font-size: var(--s-font-14);
- padding: 1rem;
- flex: 1;
- border: none;
- color: var(--text-input-color);
- outline: none;
-}
-
-input.searchInput::placeholder {
- color: var(--text-input-placeholder);
-}
-
-button.clearSearch {
- color: var(--text-input-color);
- transition: ease-in-out 0.15s;
- border: none;
- padding: 0 1rem;
- font-size: var(--m-font-16);
- background: none;
-}
-
-button.clearSearchDisabled {
- opacity: 0;
-}
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -5,10 +5,10 @@
import { emptyItemText } from 'lib/shared/thread-utils';
+import Search from '../components/search.react';
import ChatThreadListItem from './chat-thread-list-item.react';
import css from './chat-thread-list.css';
import { ThreadListContext } from './thread-list-provider';
-import ThreadListSearch from './thread-list-search.react';
function ChatThreadList(): React.Node {
const threadListContext = React.useContext(ThreadListContext);
@@ -36,7 +36,11 @@
return (
<div className={css.threadListContainer}>
- <ThreadListSearch onChangeText={setSearchText} searchText={searchText} />
+ <Search
+ onChangeText={setSearchText}
+ searchText={searchText}
+ placeholder="Search threads"
+ />
<div>{threadComponents}</div>
</div>
);
diff --git a/web/chat/clear-search-button.react.js b/web/components/clear-search-button.react.js
rename from web/chat/clear-search-button.react.js
rename to web/components/clear-search-button.react.js
--- a/web/chat/clear-search-button.react.js
+++ b/web/components/clear-search-button.react.js
@@ -5,7 +5,7 @@
import classNames from 'classnames';
import * as React from 'react';
-import css from './chat-thread-list.css';
+import css from './search.css';
type ClearSearchButtonProps = {
+active: boolean,
diff --git a/web/components/search.css b/web/components/search.css
new file mode 100644
--- /dev/null
+++ b/web/components/search.css
@@ -0,0 +1,33 @@
+div.searchContainer {
+ background-color: var(--text-input-bg);
+ display: flex;
+ align-items: center;
+ margin: 1rem;
+}
+
+input.searchInput {
+ background-color: var(--text-input-bg);
+ font-size: var(--s-font-14);
+ padding: 1rem;
+ flex: 1;
+ border: none;
+ color: var(--text-input-color);
+ outline: none;
+}
+
+input.searchInput::placeholder {
+ color: var(--text-input-placeholder);
+}
+
+button.clearSearch {
+ color: var(--text-input-color);
+ transition: ease-in-out 0.15s;
+ border: none;
+ padding: 0 1rem;
+ font-size: var(--m-font-16);
+ background: none;
+}
+
+button.clearSearchDisabled {
+ opacity: 0;
+}
diff --git a/web/chat/thread-list-search.react.js b/web/components/search.react.js
rename from web/chat/thread-list-search.react.js
rename to web/components/search.react.js
--- a/web/chat/thread-list-search.react.js
+++ b/web/components/search.react.js
@@ -2,16 +2,17 @@
import * as React from 'react';
-import css from './chat-thread-list.css';
import ClearSearchButton from './clear-search-button.react';
+import css from './search.css';
-type ThreadListSearchProps = {
+type Props = {
+searchText: string,
+onChangeText: (searchText: string) => mixed,
+ +placeholder?: string,
};
-function ThreadListSearch(props: ThreadListSearchProps): React.Node {
- const { searchText, onChangeText } = props;
+function Search(props: Props): React.Node {
+ const { searchText, onChangeText, placeholder } = props;
const showClearButton = !!searchText;
@@ -33,11 +34,11 @@
onChange={onChange}
value={searchText}
type="text"
- placeholder="Search threads"
+ placeholder={placeholder}
/>
<ClearSearchButton onClick={onClear} active={showClearButton} />
</div>
);
}
-export default ThreadListSearch;
+export default Search;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 5:28 PM (21 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2530757
Default Alt Text
D3367.diff (4 KB)

Event Timeline