5bf9541e05
Summary: Code blocks are quite common in Flipper, and a bit verbose in Ant, so let's standardize! Changelog: Standardize CodeBlock component Reviewed By: passy Differential Revision: D28117560 fbshipit-source-id: 5a5538a49b59ef40c814d22055fac56e7598cbbb
91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
/**
|
|
* 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;
|
|
gap?: Spacing;
|
|
}> = (props) => {
|
|
const [collapsed, setCollapsed] = useLocalStorageState(
|
|
`panel:${props.title}:collapsed`,
|
|
props.collapsible === false ? false : props.collapsed,
|
|
);
|
|
|
|
const toggle = useCallback(() => {
|
|
if (props.collapsible === false) {
|
|
return;
|
|
}
|
|
setCollapsed((c) => !c);
|
|
}, [setCollapsed, props.collapsible]);
|
|
|
|
return (
|
|
<TrackingScope scope={props.title}>
|
|
<StyledCollapse
|
|
bordered={false}
|
|
activeKey={collapsed ? undefined : props.title}
|
|
onChange={toggle}>
|
|
<Collapse.Panel
|
|
key={props.title}
|
|
header={props.title}
|
|
showArrow={props.collapsible !== false}>
|
|
<Layout.Container pad={props.pad} gap={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: theme.bold,
|
|
},
|
|
},
|
|
'& > .ant-collapse-item': {
|
|
borderBottom: 'none',
|
|
},
|
|
'& > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box': {
|
|
padding: 0,
|
|
},
|
|
});
|