Page MenuHomePhabricator
Files F3406987

D10610.id35803.diff
No OneTemporary
Actions

D10610.id35803.diff
View Options

diff --git a/web/app-list/app-list-header.react.js b/web/app-list/app-list-header.react.js
--- a/web/app-list/app-list-header.react.js
+++ b/web/app-list/app-list-header.react.js
@@ -4,8 +4,7 @@
import { useModalContext } from 'lib/components/modal-provider.react.js';
-import css from './app-list-header.css';
-import AddButton from '../components/add-button.react.js';
+import PanelHeader from '../components/panel-header.react.js';
import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
function AppListHeader(): React.Node {
@@ -16,12 +15,7 @@
[pushModal],
);
- return (
- <div className={css.container}>
- <div className={css.headerLabel}>Your apps</div>
- <AddButton onClick={onClickApps} />
- </div>
- );
+ return <PanelHeader headerLabel="Your apps" onClickAddButton={onClickApps} />;
}
export default AppListHeader;
diff --git a/web/app-list/app-list-header.css b/web/components/panel-header.css
rename from web/app-list/app-list-header.css
rename to web/components/panel-header.css
--- a/web/app-list/app-list-header.css
+++ b/web/components/panel-header.css
@@ -2,7 +2,8 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
+ padding: 0 16px;
+ height: 100%;
}
.headerLabel {
diff --git a/web/components/panel-header.react.js b/web/components/panel-header.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/panel-header.react.js
@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './panel-header.css';
+import AddButton from '../components/add-button.react.js';
+
+type Props = {
+ +headerLabel: string,
+ +onClickAddButton?: () => mixed,
+};
+
+function PanelHeader(props: Props): React.Node {
+ const { headerLabel, onClickAddButton } = props;
+
+ const addButton = React.useMemo(() => {
+ if (!onClickAddButton) {
+ return null;
+ }
+
+ return <AddButton onClick={onClickAddButton} />;
+ }, [onClickAddButton]);
+
+ const panelHeader = React.useMemo(
+ () => (
+ <div className={css.container}>
+ <div className={css.headerLabel}>{headerLabel}</div>
+ {addButton}
+ </div>
+ ),
+ [addButton, headerLabel],
+ );
+
+ return panelHeader;
+}
+
+export default PanelHeader;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 3:44 AM (14 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614401
Default Alt Text
D10610.id35803.diff (2 KB)

Event Timeline