refactor: Refactored components under src/preview/components/OnDevice…

…UI to functional components, with the exception of absolute-positioned-keyboard-aware-view.tsx, OnDeviceUI.tsx (to be done later) and Addons.tsx (done in another PR). Updated Podfile.lock for the react-native example project

app/react-native/src/preview/components/OnDeviceUI/Panel.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
 
@@ -8,11 +8,10 @@ const Container = styled(Animated.View)(({ theme }) => ({
 
 interface Props {
  style: any[];
+ children: ReactNode;
 }
 
-export default class Panel extends PureComponent<Props> {
- render() {
- const { children, style } = this.props;
- return <Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>;
- }
-}
+const Panel = React.memo(({ children, style }: Props) => (
+ <Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>
+));
+export default Panel;

app/react-native/src/preview/components/OnDeviceUI/addons/List.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { ScrollView } from 'react-native';
 import styled from '@emotion/native';
 import { Collection } from '@storybook/addons';
@@ -16,32 +16,25 @@ export interface Props {
  onPressAddon: (id: string) => void;
 }
 
-export default class AddonList extends PureComponent<Props> {
- renderTab = (id: string, title: string) => {
- const { addonSelected, onPressAddon } = this.props;
+const AddonList = React.memo(({ panels, addonSelected, onPressAddon }: Props) => {
+ const addonKeys = Object.keys(panels);
 
- return (
- <Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
- {title.toUpperCase()}
- </Button>
- );
- };
+ const renderTab = (id: string, title: string) => (
+ <Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
+ {title.toUpperCase()}
+ </Button>
+ );
 
- render() {
- const { panels } = this.props;
- const addonKeys = Object.keys(panels);
-
- return (
- <Container>
- <ScrollView showsHorizontalScrollIndicator={false} horizontal>
- {addonKeys.map((id) => {
- const { title } = panels[id];
- // @ts-ignore
- const resolvedTitle = typeof title === 'function' ? title() : title;
- return this.renderTab(id, resolvedTitle);
- })}
- </ScrollView>
- </Container>
- );
- }
-}
+ return (
+ <Container>
+ <ScrollView showsHorizontalScrollIndicator={false} horizontal>
+ {addonKeys.map((id) => {
+ const { title } = panels[id];
+ const resolvedTitle = typeof title === 'function' ? title() : title;
+ return renderTab(id, resolvedTitle);
+ })}
+ </ScrollView>
+ </Container>
+ );
+});
+export default AddonList;

app/react-native/src/preview/components/OnDeviceUI/addons/Wrapper.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { View, ScrollView, StyleSheet } from 'react-native';
 import { Collection } from '@storybook/addons';
 
@@ -19,24 +19,18 @@ const style = StyleSheet.create({
  },
 });
 
-export default class Wrapper extends PureComponent<Props> {
- static defaultProps = {
-  addonSelected: '',
- };
+const Wrapper = React.memo(({ panels, addonSelected }: Props) => {
+ const addonKeys = Object.keys(panels);
+ const content = addonKeys.map((id) => {
+  const selected = addonSelected === id;
 
- render() {
- const { panels, addonSelected } = this.props;
+ return (
+ <View key={id} style={selected ? style.flex : style.invisible}>
+ <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
+ </View>
+ );
+ });
 
- const addonKeys = Object.keys(panels);
-
- return addonKeys.map((id) => {
- const selected = addonSelected === id;
-
- return (
- <View key={id} style={selected ? style.flex : style.invisible}>
- <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
- </View>
- );
- });
- }
-}
+ return <>{content}</>;
+});
+export default Wrapper;

app/react-native/src/preview/components/OnDeviceUI/navigation/Bar.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import styled from '@emotion/native';
 import Button from './Button';
 import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
@@ -17,31 +17,22 @@ export interface Props {
  onPress: (id: number) => void;
 }
 
-export default class Bar extends PureComponent<Props> {
- render() {
- const { index, onPress } = this.props;
- return (
- <Container>
- <Button
- onPress={onPress}
- testID="BottomMenu.Navigator"
- id={NAVIGATOR}
- active={index === NAVIGATOR}
- >
- NAVIGATOR
- </Button>
- <Button
- onPress={onPress}
- testID="BottomMenu.Preview"
- id={PREVIEW}
- active={index === PREVIEW}
- >
- PREVIEW
- </Button>
- <Button onPress={onPress} testID="BottomMenu.Addons" id={ADDONS} active={index === ADDONS}>
- ADDONS
- </Button>
- </Container>
- );
- }
-}
+const Bar = React.memo(({ index, onPress }: Props) => (
+ <Container>
+ <Button
+ onPress={onPress}
+ testID="BottomMenu.Navigator"
+ id={NAVIGATOR}
+ active={index === NAVIGATOR}
+ >
+ NAVIGATOR
+ </Button>
+ <Button onPress={onPress} testID="BottomMenu.Preview" id={PREVIEW} active={index === PREVIEW}>
+ PREVIEW
+ </Button>
+ <Button onPress={onPress} testID="BottomMenu.Addons" id={ADDONS} active={index === ADDONS}>
+ ADDONS
+ </Button>
+ </Container>
+));
+export default Bar;

app/react-native/src/preview/components/OnDeviceUI/navigation/Button.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
 
@@ -19,22 +19,13 @@ interface Props {
  active: boolean;
  onPress: (id: number | string) => void;
  testID?: string;
+ children: ReactNode;
 }
 
-export default class Button extends PureComponent<Props> {
- onPress = () => {
- const { onPress, id } = this.props;
- onPress(id);
- };
-
- render() {
- const { active, children, testID } = this.props;
-
- return (
- <TouchableOpacity testID={testID} onPress={this.onPress} activeOpacity={0.8}>
- <ButtonText active={active}>{children}</ButtonText>
- <ActiveBorder active={active} />
- </TouchableOpacity>
- );
- }
-}
+const Button = React.memo(({ onPress, id, active, children, testID }: Props) => (
+ <TouchableOpacity testID={testID} onPress={() => onPress(id)} activeOpacity={0.8}>
+ <ButtonText active={active}>{children}</ButtonText>
+ <ActiveBorder active={active} />
+ </TouchableOpacity>
+));
+export default Button;

app/react-native/src/preview/components/OnDeviceUI/navigation/Navigation.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/destructuring-assignment */
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 import { View, SafeAreaView } from 'react-native';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import Bar from './Bar';
@@ -16,52 +15,44 @@ interface Props {
  onChangeTab: (index: number) => void;
 }
 
-export default class Navigation extends PureComponent<Props> {
- state = {
- isUIVisible: this.props.initialUiVisible !== undefined ? this.props.initialUiVisible : true,
- };
-
- handleToggleUI = () => {
- const { isUIVisible } = this.state;
+const Navigation = React.memo(({ tabOpen, onChangeTab, initialUiVisible }: Props) => {
+ const [isUIVisible, setIsUIVisible] = useState(
+ initialUiVisible !== undefined ? initialUiVisible : true
+ );
 
- this.setState({ isUIVisible: !isUIVisible });
+ const handleToggleUI = () => {
+ setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
  };
 
- handleSwipeLeft = () => {
- const { tabOpen, onChangeTab } = this.props;
+ const handleSwipeLeft = () => {
  if (tabOpen < 1) {
  onChangeTab(tabOpen + 1);
  }
  };
 
- handleSwipeRight = () => {
- const { tabOpen, onChangeTab } = this.props;
+ const handleSwipeRight = () => {
  if (tabOpen > -1) {
  onChangeTab(tabOpen - 1);
  }
  };
 
- render() {
- const { tabOpen, onChangeTab } = this.props;
- const { isUIVisible } = this.state;
-
- return (
- <View>
- <SafeAreaView>
- {isUIVisible && (
- <GestureRecognizer
- onSwipeLeft={this.handleSwipeLeft}
- onSwipeRight={this.handleSwipeRight}
- config={SWIPE_CONFIG}
- >
- <Bar index={tabOpen} onPress={onChangeTab} />
- </GestureRecognizer>
- )}
- <View>
- <VisibilityButton onPress={this.handleToggleUI} />
- </View>
- </SafeAreaView>
- </View>
- );
- }
-}
+ return (
+ <View>
+ <SafeAreaView>
+ {isUIVisible && (
+ <GestureRecognizer
+ onSwipeLeft={handleSwipeLeft}
+ onSwipeRight={handleSwipeRight}
+ config={SWIPE_CONFIG}
+ >
+ <Bar index={tabOpen} onPress={onChangeTab} />
+ </GestureRecognizer>
+ )}
+ <View>
+ <VisibilityButton onPress={handleToggleUI} />
+ </View>
+ </SafeAreaView>
+ </View>
+ );
+});
+export default Navigation;

app/react-native/src/preview/components/OnDeviceUI/navigation/VisibilityButton.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import styled from '@emotion/native';
 
 interface Props {
@@ -18,18 +18,14 @@ const HideIcon = styled.Text(({ theme }) => ({
  color: theme.buttonTextColor || '#999999',
 }));
 
-export default class VisibilityButton extends PureComponent<Props> {
- render() {
- const { onPress } = this.props;
- return (
- <Touchable
- onPress={onPress}
- testID="Storybook.OnDeviceUI.toggleUI"
- accessibilityLabel="Storybook.OnDeviceUI.toggleUI"
- hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
- >
- <HideIcon>□</HideIcon>
- </Touchable>
- );
- }
-}
+const VisibilityButton = React.memo(({ onPress }: Props) => (
+ <Touchable
+ onPress={onPress}
+ testID="Storybook.OnDeviceUI.toggleUI"
+ accessibilityLabel="Storybook.OnDeviceUI.toggleUI"
+ hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
+ >
+ <HideIcon>□</HideIcon>
+ </Touchable>
+));
+export default VisibilityButton;

examples/native/ios/Podfile.lock

@@ -452,17 +452,17 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
- DoubleConversion: cde416483dac037923206447da6e1454df403714
+ DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
  FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
- FBReactNativeSpec: 60baaee9d10a9d225389062decbbf2b0bd6420ce
+ FBReactNativeSpec: ba3bc03e12cb0bea22d69a8a9458eaf3e92521a8
  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
  Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
  Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
  Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
  Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
  FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
- glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+ glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
  RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c