e8370e9fc1
Summary: This diff introduces: - ScrollContainer - Make sure Ant Link components always open URLs externally, to avoid users needing to use electron api's - Introduce a design systems page where people can find docs on how to organise sandy layout, and it also provides a convenient way to test layout mechanisms. - Fixed several layout bugs found as a result of adding the design system page In next diff: - more convenience around organizing paddings - making the design system accessible from the menu Reviewed By: cekkaewnumchai Differential Revision: D23930274 fbshipit-source-id: 4aab058d15b3391287e0e32513a5d83831448857
85 lines
2.5 KiB
TypeScript
85 lines
2.5 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 React from 'react';
|
|
import {Button, Dropdown, Menu, Radio, Input} from 'antd';
|
|
import {LeftSidebar, SidebarTitle, InfoIcon} from './LeftSidebar';
|
|
import {
|
|
AppleOutlined,
|
|
AndroidOutlined,
|
|
SettingOutlined,
|
|
} from '@ant-design/icons';
|
|
import {Layout, Link} from '../ui';
|
|
import {theme} from './theme';
|
|
|
|
const appTooltip = (
|
|
<>
|
|
Inspect apps by selecting connected devices and emulators. Navigate and
|
|
bookmark frequent destinations in the app. Refresh, screenshot and
|
|
screenrecord is also available.{' '}
|
|
<Link href="https://fbflipper.com/docs/getting-started/index">
|
|
Learn More
|
|
</Link>
|
|
</>
|
|
);
|
|
|
|
export function AppInspect() {
|
|
return (
|
|
<LeftSidebar>
|
|
<Layout.Top scrollable>
|
|
<Layout.Container borderBottom>
|
|
<SidebarTitle actions={<InfoIcon>{appTooltip}</InfoIcon>}>
|
|
App Inspect
|
|
</SidebarTitle>
|
|
<Layout.Vertical
|
|
padding={`${theme.space.small}px ${theme.space.medium}px`}
|
|
gap={theme.space.large}>
|
|
<DeviceDropdown />
|
|
<Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
|
|
<Layout.Horizontal gap={theme.space.small}>
|
|
<Button icon={<SettingOutlined />} type="link" />
|
|
<Button icon={<SettingOutlined />} type="link" />
|
|
<Button icon={<SettingOutlined />} type="link" />
|
|
</Layout.Horizontal>
|
|
</Layout.Vertical>
|
|
</Layout.Container>
|
|
<Layout.Container>Dynamic section</Layout.Container>
|
|
</Layout.Top>
|
|
</LeftSidebar>
|
|
);
|
|
}
|
|
|
|
function DeviceDropdown() {
|
|
return (
|
|
<Radio.Group value={1} size="small">
|
|
<Dropdown
|
|
overlay={
|
|
<Menu>
|
|
<Menu.Item icon={<AppleOutlined />} style={{fontWeight: 'bold'}}>
|
|
IPhone 11
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<Radio value={1}>Facebook</Radio>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<Radio value={3}>Instagram</Radio>
|
|
</Menu.Item>
|
|
<Menu.Item icon={<AndroidOutlined />} style={{fontWeight: 'bold'}}>
|
|
Android
|
|
</Menu.Item>
|
|
</Menu>
|
|
}>
|
|
<Button icon={<AppleOutlined />} style={{width: '100%'}}>
|
|
Facebook Iphone11
|
|
</Button>
|
|
</Dropdown>
|
|
</Radio.Group>
|
|
);
|
|
}
|