Skip to content

Commit

Permalink
Refactoring to hooks + new context API (#139)
Browse files Browse the repository at this point in the history
  • Loading branch information
Marvin Frachet authored Sep 18, 2020
1 parent ef75b45 commit 9d8b8e4
Show file tree
Hide file tree
Showing 14 changed files with 189 additions and 230 deletions.
60 changes: 30 additions & 30 deletions example/__snapshots__/storyshots.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1839,7 +1839,7 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand Down Expand Up @@ -1867,7 +1867,7 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -1888,7 +1888,7 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -1909,7 +1909,7 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand All @@ -1932,7 +1932,7 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -8892,7 +8892,7 @@ exports[`Storyshots rn-placeholder Custom Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand Down Expand Up @@ -8920,7 +8920,7 @@ exports[`Storyshots rn-placeholder Custom Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -8941,7 +8941,7 @@ exports[`Storyshots rn-placeholder Custom Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -8964,7 +8964,7 @@ exports[`Storyshots rn-placeholder Custom Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand All @@ -8987,7 +8987,7 @@ exports[`Storyshots rn-placeholder Custom Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -18644,7 +18644,7 @@ exports[`Storyshots rn-placeholder Custom animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand Down Expand Up @@ -18672,7 +18672,7 @@ exports[`Storyshots rn-placeholder Custom animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -18693,7 +18693,7 @@ exports[`Storyshots rn-placeholder Custom animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -18714,7 +18714,7 @@ exports[`Storyshots rn-placeholder Custom animations 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -23800,7 +23800,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand Down Expand Up @@ -23828,7 +23828,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -23849,7 +23849,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -23870,7 +23870,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand All @@ -23893,7 +23893,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -25229,7 +25229,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand Down Expand Up @@ -25257,7 +25257,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -25278,7 +25278,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -25299,7 +25299,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -26504,7 +26504,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -26525,7 +26525,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -26546,7 +26546,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand All @@ -26569,7 +26569,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down Expand Up @@ -27773,7 +27773,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -27794,7 +27794,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
<View
Expand All @@ -27815,7 +27815,7 @@ exports[`Storyshots rn-placeholder Line and Media 1`] = `
}
>
<View
style={null}
style={Object {}}
/>
</View>
</View>
Expand Down
12 changes: 6 additions & 6 deletions src/Placeholder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StyleSheet, View, ViewProps } from "react-native";
import { Raw } from "./animations/Raw";
import { SIZES } from "./tokens";

export interface IPlaceholder extends ViewProps {
export interface PlaceholderProps extends ViewProps {
/* An optional component that animates the placeholder */
Animation?: React.ComponentType;
/* An optional component to display on the left */
Expand All @@ -12,7 +12,7 @@ export interface IPlaceholder extends ViewProps {
Right?: React.ComponentType<ViewProps>;
}

export const Placeholder: React.FC<IPlaceholder> = ({
export const Placeholder: React.FC<PlaceholderProps> = ({
children,
style,
Left,
Expand All @@ -35,13 +35,13 @@ export const Placeholder: React.FC<IPlaceholder> = ({

const styles = StyleSheet.create({
full: {
flex: 1
flex: 1,
},
left: {
marginRight: SIZES.normal
marginRight: SIZES.normal,
},
right: {
marginLeft: SIZES.normal
marginLeft: SIZES.normal,
},
row: { flexDirection: "row", width: "100%" }
row: { flexDirection: "row", width: "100%" },
});
20 changes: 11 additions & 9 deletions src/PlaceholderLine.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from "react";
import { StyleSheet, View, ViewProps } from "react-native";
import { AnimationConsumer } from "./animations/AnimationConsumer";
import { Animated, StyleSheet, View, ViewProps } from "react-native";
import { useAnimation } from "./animations/context";
import { COLORS, SIZES } from "./tokens";

export interface ILine extends ViewProps {
export interface PlaceholderLineProps extends ViewProps {
/* The line height, default is 12 */
height?: number;
/* The line color, default is #efefef */
Expand All @@ -16,12 +16,12 @@ export interface ILine extends ViewProps {
style?: ViewProps["style"];
}

export const PlaceholderLine: React.FC<ILine> = ({
export const PlaceholderLine: React.FC<PlaceholderLineProps> = ({
height = SIZES.normal,
color = COLORS.primary,
width = 100,
noMargin = false,
style
style,
}) => {
const backgroundColor = color;
const borderRadius = height / 4;
Expand All @@ -32,18 +32,20 @@ export const PlaceholderLine: React.FC<ILine> = ({
borderRadius,
height,
marginBottom,
width: `${width}%`
width: `${width}%`,
};

const animationStyle = useAnimation();

return (
<View style={[computedStyle, style, styles.line]}>
<AnimationConsumer />
<Animated.View style={animationStyle} />
</View>
);
};

const styles = StyleSheet.create({
line: {
overflow: "hidden"
}
overflow: "hidden",
},
});
Loading

0 comments on commit 9d8b8e4

Please sign in to comment.