From da6d6593a564bea16d5528e9562964aa879c6dc0 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Mon, 16 Nov 2020 13:08:05 -0800 Subject: [PATCH] Update seammamals plugin to Sandy Reviewed By: nikoant Differential Revision: D24951251 fbshipit-source-id: 5510c2777d232fe4290f6b248b736c80306fb44e --- desktop/plugins/seamammals/package.json | 3 +- .../src/__tests__/seamammals.spec.tsx | 29 ++++-- desktop/plugins/seamammals/src/index.tsx | 98 +++++++------------ react-native/ReactNativeFlipperExample/App.js | 49 +++++++++- 4 files changed, 106 insertions(+), 73 deletions(-) diff --git a/desktop/plugins/seamammals/package.json b/desktop/plugins/seamammals/package.json index 881346d1a..aba9fccdb 100644 --- a/desktop/plugins/seamammals/package.json +++ b/desktop/plugins/seamammals/package.json @@ -23,11 +23,10 @@ "prepack": "flipper-pkg lint && flipper-pkg bundle --production" }, "peerDependencies": { - "flipper": "0.65.0", + "antd": "*", "flipper-plugin": "0.65.0" }, "devDependencies": { - "flipper": "0.65.0", "flipper-pkg": "0.65.0" } } diff --git a/desktop/plugins/seamammals/src/__tests__/seamammals.spec.tsx b/desktop/plugins/seamammals/src/__tests__/seamammals.spec.tsx index 7979c18d1..5d6157fea 100644 --- a/desktop/plugins/seamammals/src/__tests__/seamammals.spec.tsx +++ b/desktop/plugins/seamammals/src/__tests__/seamammals.spec.tsx @@ -92,18 +92,31 @@ test('It can have selection and render details', async () => { // Let's assert the structure of the Turtle card as well expect(await renderer.findByTestId('Turtle')).toMatchInlineSnapshot(`
- - Turtle - +
+
+ Turtle +
+
+
+
+
+
`); // Nothing selected, so we should not have a sidebar diff --git a/desktop/plugins/seamammals/src/index.tsx b/desktop/plugins/seamammals/src/index.tsx index c616a201d..56fd703c1 100644 --- a/desktop/plugins/seamammals/src/index.tsx +++ b/desktop/plugins/seamammals/src/index.tsx @@ -7,19 +7,17 @@ * @format */ -import { - Text, - Panel, - ManagedDataInspector, - DetailSidebar, - FlexRow, - FlexColumn, - styled, - colors, -} from 'flipper'; import React, {memo} from 'react'; - -import {PluginClient, usePlugin, createState, useValue} from 'flipper-plugin'; +import {Typography, Card} from 'antd'; +import { + Layout, + PluginClient, + usePlugin, + createState, + useValue, + theme, +} from 'flipper-plugin'; +import {ManagedDataInspector, DetailSidebar, styled} from 'flipper'; type Row = { id: number; @@ -80,27 +78,34 @@ export function Component() { const selectedID = useValue(instance.selectedID); return ( - - {Object.entries(rows).map(([id, row]) => ( - - ))} + <> + + + {Object.entries(rows).map(([id, row]) => ( + + ))} + + {selectedID && renderSidebar(rows[selectedID])} - + ); } function renderSidebar(row: Row) { return ( - + + Extras - + ); } @@ -109,51 +114,24 @@ type CardProps = { selected: boolean; row: Row; }; -const Card = memo(({row, selected, onSelect}: CardProps) => { +const MammalCard = memo(({row, selected, onSelect}: CardProps) => { return ( - onSelect(row.id)} - selected={selected}> + title={row.title} + style={{ + width: 150, + borderColor: selected ? theme.primaryColor : undefined, + }}> - {row.title} - + ); }); -const Container = styled(FlexRow)({ - backgroundColor: colors.macOSTitleBarBackgroundBlur, - flexWrap: 'wrap', - alignItems: 'flex-start', - alignContent: 'flex-start', - flexGrow: 1, - overflow: 'scroll', -}); - -const CardContainer = styled(FlexColumn)<{selected?: boolean}>((props) => ({ - margin: 10, - borderRadius: 5, - border: '2px solid black', - backgroundColor: colors.white, - borderColor: props.selected ? colors.macOSTitleBarIconSelected : colors.white, - padding: 0, - width: 150, - overflow: 'hidden', - boxShadow: '1px 1px 4px rgba(0,0,0,0.1)', - cursor: 'pointer', -})); - const Image = styled.div({ backgroundSize: 'cover', width: '100%', paddingTop: '100%', }); - -const Title = styled(Text)({ - fontSize: 14, - fontWeight: 'bold', - padding: '10px 5px', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -}); diff --git a/react-native/ReactNativeFlipperExample/App.js b/react-native/ReactNativeFlipperExample/App.js index ebbb3df21..f6b753c61 100644 --- a/react-native/ReactNativeFlipperExample/App.js +++ b/react-native/ReactNativeFlipperExample/App.js @@ -28,6 +28,49 @@ import { ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; +import {addPlugin} from 'react-native-flipper'; + +if (__DEV__ || true) { + const mammals = [ + { + id: 'Polar Bear', + title: 'Polar Bear', + url: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ursus_maritimus_4_1996-08-04.jpg/190px-Ursus_maritimus_4_1996-08-04.jpg', + }, + { + id: 'Sea Otter', + title: 'Sea Otter', + url: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Sea_otter_cropped.jpg/220px-Sea_otter_cropped.jpg', + }, + { + id: 'West Indian Manatee', + title: 'West Indian Manatee', + url: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/FL_fig04.jpg/230px-FL_fig04.jpg', + }, + { + id: 'Bottlenose Dolphin', + title: 'Bottlenose Dolphin', + url: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/220px-Tursiops_truncatus_01.jpg', + }, + ]; + // minimal plugin that connects to sea-mammals plugin + addPlugin({ + getId() { + return 'sea-mammals'; + }, + onConnect(connection) { + mammals.forEach((m) => { + connection.send('newRow', m); + }); + }, + onDisconnect() {}, + }); +} + import FlipperTicTacToe from './FlipperTicTacToe'; const API = 'https://status.npmjs.org/'; @@ -59,14 +102,14 @@ const App: () => React$Node = () => { onPress={() => { console.log('Making request to ' + API); fetch(API, {headers: {accept: 'application/json'}}) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { console.log( 'Got status: ' + JSON.stringify(data, null, 2), ); setNpmStatus(data.status.description); }) - .catch(e => { + .catch((e) => { console.error('Failed to fetch status: ' + e); console.error(e); setNpmStatus('Error: ' + e);