Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix react native server #7187

Merged
merged 10 commits into from
Jun 29, 2019
Merged

Fix react native server #7187

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5f11fbc
Updated to new story api. Properly listens to server.
Gongreg Jun 25, 2019
e062493
accidental port reverted.
Gongreg Jun 25, 2019
4b864ff
Added comments in the story store
Gongreg Jun 25, 2019
9513529
Updated equality check
Gongreg Jun 25, 2019
058a8ab
updated key
Gongreg Jun 25, 2019
cb94c60
updated key
Gongreg Jun 25, 2019
9232a15
Merge branch 'next' into fix-react-native-server
ndelangen Jun 25, 2019
3b015d5
CHANGE linting config to also lint react-native && FIX all linting is…
ndelangen Jun 25, 2019
ea23847
Merge branch 'next' into fix-react-native-server
shilman Jun 29, 2019
7a18b75
Remove unused eslint directives
shilman Jun 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 1 addition & 8 deletions app/react-native-server/src/client/manager/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ export default class ReactProvider extends Provider {
<Consumer filter={mapper} pure>
{({ storiesHash, storyId, api, viewMode }) => {
if (storiesHash[storyId]) {
const { kind, story } = storiesHash[storyId];
api.emit(Events.SET_CURRENT_STORY, { kind, story });
api.emit(Events.SET_CURRENT_STORY, { storyId });
}
return viewMode === 'story' ? <PreviewHelp /> : null;
}}
Expand All @@ -62,12 +61,6 @@ export default class ReactProvider extends Provider {

handleAPI(api) {
addons.loadAddons(api);
api.on(Events.STORY_CHANGED, () => {
api.emit(Events.SET_CURRENT_STORY, this.selection);
});
api.on(Events.GET_CURRENT_STORY, () => {
api.emit(Events.SET_CURRENT_STORY, this.selection);
});
api.emit(Events.GET_STORIES);
}
}
51 changes: 2 additions & 49 deletions app/react-native/src/preview/components/OnDeviceUI/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
TouchableOpacityProps,
} from 'react-native';
import styled from '@emotion/native';
import Events from '@storybook/core-events';
import addons from '@storybook/addons';
import Channel from '@storybook/channels';
import StoryListView from '../StoryListView';
Expand Down Expand Up @@ -36,14 +35,11 @@ interface OnDeviceUIProps {
url?: string;
tabOpen?: number;
isUIHidden?: boolean;
getInitialStory?: (...args: any[]) => any;
shouldDisableKeyboardAvoidingView?: boolean;
keyboardAvoidingViewVerticalOffset?: number;
}

interface OnDeviceUIState {
selection: any;
storyFn: any;
tabOpen: number;
slideBetweenAnimation: boolean;
previewWidth: number;
Expand Down Expand Up @@ -72,33 +68,13 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
this.state = {
tabOpen,
slideBetweenAnimation: false,
selection: {},
storyFn: null,
previewWidth: 0,
previewHeight: 0,
};
this.animatedValue = new Animated.Value(tabOpen);
this.channel = addons.getChannel();
}

async componentWillMount() {
const { getInitialStory } = this.props;
if (getInitialStory) {
const story = await getInitialStory();
this.setState({
selection: story || {},
storyFn: story ? story.storyFn : null,
});
}
this.channel.on(Events.SELECT_STORY, this.handleStoryChange);
this.channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
}

componentWillUnmount() {
this.channel.removeListener(Events.SELECT_STORY, this.handleStoryChange);
this.channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
}

onLayout = ({ previewWidth, previewHeight }: PreviewDimens) => {
this.setState({ previewWidth, previewHeight });
};
Expand All @@ -107,24 +83,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
this.handleToggleTab(PREVIEW);
};

forceReRender = () => {
this.forceUpdate();
};

handleStoryChange = (selection: any) => {
const { selection: prevSelection } = this.state;
if (selection.kind === prevSelection.kind && selection.story === prevSelection.story) {
this.handleToggleTab(PREVIEW);
}
this.setState({
selection: {
kind: selection.kind,
story: selection.story,
},
storyFn: selection.storyFn,
});
};

handleToggleTab = (newTabOpen: number) => {
const { tabOpen } = this.state;
if (newTabOpen === tabOpen) {
Expand Down Expand Up @@ -158,8 +116,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
const {
tabOpen,
slideBetweenAnimation,
selection,
storyFn,
previewWidth,
previewHeight,
} = this.state;
Expand Down Expand Up @@ -192,18 +148,15 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
>
<StoryView
url={url}
selection={selection}
storyFn={storyFn}
listenToEvents={false}
onDevice
stories={stories}
/>
</Preview>
</Animated.View>
</Animated.View>
<Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
<StoryListView
stories={stories}
selectedKind={selection.kind}
selectedStory={selection.story}
/>
</Panel>
<Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
Expand Down
45 changes: 23 additions & 22 deletions app/react-native/src/preview/components/StoryListView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({ kind, title, selecte

interface Props {
stories: any;
selectedKind?: string;
selectedStory?: string;
}

interface State {
Expand All @@ -90,31 +88,34 @@ export default class StoryListView extends Component<Props, State> {
componentDidMount() {
const channel = addons.getChannel();
channel.on(Events.STORY_ADDED, this.handleStoryAdded);
channel.on(Events.SELECT_STORY, this.forceReRender);
this.handleStoryAdded();
}

componentWillUnmount() {
const channel = addons.getChannel();
channel.removeListener(Events.STORY_ADDED, this.handleStoryAdded);
channel.removeListener(Events.SELECT_STORY, this.forceReRender);
}

forceReRender = () => {
this.forceUpdate();
};

handleStoryAdded = () => {
const { stories } = this.props;
const {stories} = this.props;

if (stories) {
const data = stories.dumpStoryBook().map(
(section: any) => ({
title: section.kind,
data: section.stories.map((story: any) => ({
key: story,
name: story,
kind: section.kind,
})),
}),
{}
);

this.setState({ data, originalData: data });
const data = Object.values(stories.raw().reduce((acc: {[kind: string]: {title: string, data: any[]}}, story: any) => {
acc[story.kind] = {
title: story.kind,
data: (acc[story.kind] ? acc[story.kind].data : []).concat(story)
};

return acc;
}, {}));

this.setState({data, originalData: data});
}
};

Expand Down Expand Up @@ -146,13 +147,13 @@ export default class StoryListView extends Component<Props, State> {
this.setState({ data: filteredData });
};

changeStory(kind: string, story: string) {
changeStory(storyId: string) {
const channel = addons.getChannel();
channel.emit(Events.SET_CURRENT_STORY, { kind, story });
channel.emit(Events.SET_CURRENT_STORY, { storyId });
}

render() {
const { selectedKind, selectedStory } = this.props;
const selectedStory = this.props.stories.getSelection();
const { data } = this.state;

return (
Expand All @@ -171,12 +172,12 @@ export default class StoryListView extends Component<Props, State> {
<ListItem
title={item.name}
kind={item.kind}
selected={item.kind === selectedKind && item.name === selectedStory}
onPress={() => this.changeStory(item.kind, item.name)}
selected={item.kind === selectedStory.kind && item.name === selectedStory.story}
Gongreg marked this conversation as resolved.
Show resolved Hide resolved
onPress={() => this.changeStory(item.id)}
/>
)}
renderSectionHeader={({ section: { title } }) => (
<SectionHeader title={title} selected={title === selectedKind} />
<SectionHeader title={title} selected={title === selectedStory.kind}/>
)}
keyExtractor={(item, index) => item + index}
sections={data}
Expand Down
74 changes: 18 additions & 56 deletions app/react-native/src/preview/components/StoryView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import React, {Component} from 'react';
import {View, Text} from 'react-native';
Gongreg marked this conversation as resolved.
Show resolved Hide resolved
import styled from '@emotion/native';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';

interface Props {
listenToEvents: boolean;
selection?: any;
storyFn?: any;
stories: any;
url: string;
}

interface State {
storyFn?: any;
selection?: any;
onDevice?: boolean;
}

const HelpContainer = styled.View`
Expand All @@ -24,35 +18,25 @@ const HelpContainer = styled.View`
justify-content: center;
`;

export default class StoryView extends Component<Props, State> {
export default class StoryView extends Component<Props> {
componentDidMount() {
if (this.props.listenToEvents) {
const channel = addons.getChannel();
channel.on(Events.SELECT_STORY, this.selectStory);
channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
}
const channel = addons.getChannel();
channel.on(Events.STORY_RENDER, this.forceReRender);
channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
}

componentWillUnmount() {
const { listenToEvents } = this.props;

if (listenToEvents) {
const channel = addons.getChannel();
channel.removeListener(Events.SELECT_STORY, this.selectStory);
channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
}
const channel = addons.getChannel();
channel.removeListener(Events.STORY_RENDER, this.forceReRender);
channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
}

forceReRender = () => {
this.forceUpdate();
};

selectStory = (selection: any) => {
this.setState({ storyFn: selection.storyFn, selection });
};

renderHelp = () => {
const { url } = this.props;
const {url} = this.props;
return (
<HelpContainer>
{url && url.length ? (
Expand All @@ -75,41 +59,19 @@ export default class StoryView extends Component<Props, State> {
);

render() {
const { listenToEvents } = this.props;
const {onDevice, stories} = this.props;

if (listenToEvents) {
return this.renderListening();
} else {
return this.renderOnDevice();
}
}
const selection = stories.getSelection();

renderListening = () => {
if (!this.state) {
return null;
}
const { storyFn, selection } = this.state;
const { kind, story } = selection;
const {kind, story, storyFn} = selection;

return storyFn ? (
<View key={`${kind}:::${story}`} style={{ flex: 1 }}>
<View key={`${kind}:::${story}`} style={{flex: 1}}>
Gongreg marked this conversation as resolved.
Show resolved Hide resolved
{storyFn()}
</View>
) : (
this.renderHelp()
onDevice ? this.renderOnDeviceUIHelp() : this.renderHelp()
);
};

renderOnDevice = () => {
const { storyFn, selection } = this.props;
const { kind, story } = selection;

return storyFn ? (
<View key={`${kind}:::${story}`} style={{ flex: 1 }}>
{storyFn()}
</View>
) : (
this.renderOnDeviceUIHelp()
);
};
}
}
Loading