GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:31:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update StoryView to use emotion

Browse Source
This commit is contained in:
Benoit Dion 2019-04-23 23:24:56 -04:00
parent 3324dec7d9
commit a99350632e
2 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/react-native/src/preview/components/StoryView/index.tsx
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import styled from '@emotion/native';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';
import style from './style';
interface Props {
listenToEvents: boolean;
@ -16,6 +16,14 @@ interface State {
selection?: any;
}
const HelpContainer = styled.View`
flex: 1;
padding-horizontal: 15;
padding-vertical: 15;
align-items: center;
justify-content: center;
`;
export default class StoryView extends Component<Props, State> {
componentDidMount() {
if (this.props.listenToEvents) {
@ -46,7 +54,7 @@ export default class StoryView extends Component<Props, State> {
renderHelp = () => {
const { url } = this.props;
return (
<View style={style.help}>
<HelpContainer>
{url && url.length ? (
<Text>
Please open the Storybook UI ({url}) with a web browser and select a story for preview.
@ -56,14 +64,14 @@ export default class StoryView extends Component<Props, State> {
Please open the Storybook UI with a web browser and select a story for preview.
</Text>
)}
</View>
</HelpContainer>
);
};
renderOnDeviceUIHelp = () => (
<View style={style.help}>
<HelpContainer>
<Text>Please open navigator and select a story to preview.</Text>
</View>
</HelpContainer>
);
render() {
@ -84,7 +92,7 @@ export default class StoryView extends Component<Props, State> {
const { kind, story } = selection;
return storyFn ? (
<View key={`${kind}:::${story}`} style={style.main}>
<View key={`${kind}:::${story}`} style={{ flex: 1 }}>
{storyFn()}
</View>
) : (
@ -97,7 +105,7 @@ export default class StoryView extends Component<Props, State> {
const { kind, story } = selection;
return storyFn ? (
<View key={`${kind}:::${story}`} style={style.main}>
<View key={`${kind}:::${story}`} style={{ flex: 1 }}>
{storyFn()}
</View>
) : (

12
app/react-native/src/preview/components/StoryView/style.ts
View File

@ -1,12 +0,0 @@
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
main: {
flex: 1,
},
help: {
flex: 1,
padding: 15,
alignItems: 'center',
justifyContent: 'center',
},
});