-
Notifications
You must be signed in to change notification settings - Fork 42
/
showcase-helper.js
96 lines (88 loc) · 3.26 KB
/
showcase-helper.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/* eslint-disable react/prop-types */
import React from "react";
import { Text, View } from "react-native";
import pick from "lodash.pick";
import { sections } from "@times-components/storybook";
import articleAdConfig from "@times-components/ad/fixtures/article-ad-config.json";
import { ContextProviderWithDefaults } from "@times-components/context";
import { colours, scales } from "@times-components/styleguide";
import storybookReporter from "@times-components/tealium-utils";
import { MockBookmarksProvider } from "@times-components/provider-test-tools";
import fullArticleFixture from "./fixtures/full-article";
import ArticleSkeleton from "./src/article-skeleton";
const TestHeader = () => (
<View
style={{
alignItems: "center",
borderColor: "#66666",
borderWidth: 1,
justfyContent: "center",
margin: 20,
padding: 20
}}
>
<Text>THIS IS A TEST ARTICLE HEADER</Text>
</View>
);
const preventDefaultedAction = decorateAction =>
decorateAction([
([e, ...args]) => {
e.preventDefault();
return ["[SyntheticEvent (storybook prevented default)]", ...args];
}
]);
const selectScales = select => select("Scale", scales, scales.medium);
const selectSection = select =>
select("Section", pick(colours.section, sections), colours.section.default);
const renderArticleSkeleton = ({
boolean,
decorateAction,
hasScaling,
select
}) => {
const scale = hasScaling ? selectScales(select) : null;
const sectionColour = selectSection(select);
const commentsEnabled = boolean("Comments Enabled?", true);
const relatedArticleSlice = boolean("Related Articles?", true);
const topics = boolean("Topics?", true);
const header = boolean("Header?", false);
const config = {
commentsEnabled: commentsEnabled ? undefined : false,
relatedArticleSlice: relatedArticleSlice ? undefined : null,
topics: topics ? undefined : []
};
const data = fullArticleFixture(config);
const showHeader = header ? () => <TestHeader /> : () => null;
return (
<MockBookmarksProvider delay={1000} articleId={data.id}>
<ContextProviderWithDefaults value={{ theme: { scale, sectionColour } }}>
<ArticleSkeleton
adConfig={articleAdConfig}
analyticsStream={storybookReporter}
data={data}
Header={showHeader}
onAuthorPress={preventDefaultedAction(decorateAction)(
"onAuthorPress"
)}
onCommentGuidelinesPress={preventDefaultedAction(decorateAction)(
"onCommentGuidelinesPress"
)}
onCommentsPress={preventDefaultedAction(decorateAction)(
"onCommentsPress"
)}
onLinkPress={preventDefaultedAction(decorateAction)("onLinkPress")}
onRelatedArticlePress={preventDefaultedAction(decorateAction)(
"onRelatedArticlePress"
)}
onTopicPress={preventDefaultedAction(decorateAction)("onTopicPress")}
onTwitterLinkPress={preventDefaultedAction(decorateAction)(
"onTwitterLinkPress"
)}
onVideoPress={preventDefaultedAction(decorateAction)("onVideoPress")}
onViewableItemsChanged={() => null}
/>
</ContextProviderWithDefaults>
</MockBookmarksProvider>
);
};
export default renderArticleSkeleton;