Expose Panel and useLocalStorageState

Summary: Expose a Panel api from Sandy, which is quite similar to the old one, except that it uses Antd, and it will remember the users closed / open preference through sessions, a much requested feature.

Reviewed By: nikoant

Differential Revision: D27966607

fbshipit-source-id: 9b18df377215c1e6c5844d0bf972058c8c574cbb

desktop/flipper-plugin/src/ui/Panel.tsx

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {Collapse} from 'antd';
+import {TrackingScope} from './Tracked';
+import {useLocalStorageState} from '../utils/useLocalStorageState';
+import {useCallback} from 'react';
+import styled from '@emotion/styled';
+import {Spacing, theme} from './theme';
+import {Layout} from './Layout';
+
+export const Panel: React.FC<{
+  title: string;
+  /**
+   * Whether the panel can be collapsed. Defaults to true
+   */
+  collapsible?: boolean;
+  /**
+   * Initial state for panel if it is collapsable
+   */
+  collapsed?: boolean;
+  pad: Spacing;
+}> = (props) => {
+  const [collapsed, setCollapsed] = useLocalStorageState(
+    `panel:${props.title}:collapsed`,
+    props.collapsed,
+  );
+
+  const toggle = useCallback(() => {
+    console.log('click');
+    setCollapsed((c) => !c);
+  }, [setCollapsed]);
+
+  return (
+    <TrackingScope scope={props.title}>
+      <StyledCollapse
+        bordered={false}
+        activeKey={collapsed ? undefined : props.title}
+        onChange={toggle}>
+        <Collapse.Panel
+          key={props.title}
+          collapsible={props.collapsible ? undefined : 'disabled'}
+          header={props.title}>
+          <Layout.Container pad={props.pad}>{props.children}</Layout.Container>
+        </Collapse.Panel>
+      </StyledCollapse>
+    </TrackingScope>
+  );
+};
+
+Panel.defaultProps = {
+  collapsed: false,
+  collapsible: true,
+};
+
+const StyledCollapse = styled(Collapse)({
+  background: theme.backgroundDefault,
+  borderRadius: 0,
+  '& > .ant-collapse-item .ant-collapse-header': {
+    background: theme.backgroundWash,
+    paddingTop: theme.space.tiny,
+    paddingBottom: theme.space.tiny,
+    paddingLeft: 26,
+    fontWeight: 'bold',
+    '> .anticon': {
+      padding: `5px 0px`,
+      left: 8,
+      fontSize: '10px',
+      fontWeight: 'bold',
+    },
+  },
+  '& > .ant-collapse-item': {
+    borderBottom: 'none',
+  },
+  '& > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box': {
+    padding: 0,
+  },
+});