Skip to content

Commit 0ebc9ff

Browse files
malangfoxmalangfox
authored
docs: add sample code to plugins (#904)
1 parent d607c30 commit 0ebc9ff

File tree

18 files changed

+378
-146
lines changed

18 files changed

+378
-146
lines changed

‎docs/src/component/SourceCode.tsx‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React from "react";
44
import Tabs from "@theme/Tabs";
55
import TabItem from "@theme/TabItem";
6+
import CodeBlock from "@theme/CodeBlock";
67

78
import JavaScriptCode from "./code/JavaScriptCode";
89
import ReactCode from "./code/ReactCode";
@@ -15,39 +16,43 @@ import { SourceContext } from "./code/type";
1516

1617
// eslint-disable-next-line @typescript-eslint/naming-convention
1718
export default ({
18-
js, react, vue, vue3, angular, preact, svelte,
19+
js, react, vue, vue3, angular, preact, svelte, style,
1920
...otherProps
20-
}: SourceContext) => <Tabs
21-
groupId="cfc"
22-
defaultValue="js"
23-
values={[
24-
{ label: "JavaScript", value: "js" },
25-
{ label: "React", value: "react" },
26-
{ label: "Vue@2", value: "vue" },
27-
{ label: "Vue@3", value: "vue3" },
28-
{ label: "Angular", value: "angular" },
29-
{ label: "Preact", value: "preact" },
30-
{ label: "Svelte", value: "svelte" }
31-
]}>
32-
<TabItem value="js">
33-
{ js ? js : <JavaScriptCode {...otherProps} /> }
34-
</TabItem>
35-
<TabItem value="react">
36-
{ react ? react : <ReactCode {...otherProps} /> }
37-
</TabItem>
38-
<TabItem value="vue">
39-
{ vue ? vue : <VueCode {...otherProps} /> }
40-
</TabItem>
41-
<TabItem value="vue3">
42-
{ vue3 ? vue3 : <Vue3Code {...otherProps} /> }
43-
</TabItem>
44-
<TabItem value="angular">
45-
{angular ? angular : <AngularCode {...otherProps} /> }
46-
</TabItem>
47-
<TabItem value="preact">
48-
{preact ? preact : <PreactCode {...otherProps} /> }
49-
</TabItem>
50-
<TabItem value="svelte">
51-
{svelte ? svelte : <SvelteCode {...otherProps} /> }
52-
</TabItem>
53-
</Tabs>;
21+
}: SourceContext) => <div>
22+
<Tabs
23+
groupId="cfc"
24+
defaultValue="js"
25+
values={[
26+
{ label: "JavaScript", value: "js" },
27+
{ label: "React", value: "react" },
28+
{ label: "Vue@2", value: "vue" },
29+
{ label: "Vue@3", value: "vue3" },
30+
{ label: "Angular", value: "angular" },
31+
{ label: "Preact", value: "preact" },
32+
{ label: "Svelte", value: "svelte" }
33+
]}>
34+
<TabItem value="js">
35+
{ js ? js : <JavaScriptCode {...otherProps} /> }
36+
</TabItem>
37+
<TabItem value="react">
38+
{ react ? react : <ReactCode {...otherProps} /> }
39+
</TabItem>
40+
<TabItem value="vue">
41+
{ vue ? vue : <VueCode {...otherProps} /> }
42+
</TabItem>
43+
<TabItem value="vue3">
44+
{ vue3 ? vue3 : <Vue3Code {...otherProps} /> }
45+
</TabItem>
46+
<TabItem value="angular">
47+
{angular ? angular : <AngularCode {...otherProps} /> }
48+
</TabItem>
49+
<TabItem value="preact">
50+
{preact ? preact : <PreactCode {...otherProps} /> }
51+
</TabItem>
52+
<TabItem value="svelte">
53+
{svelte ? svelte : <SvelteCode {...otherProps} /> }
54+
</TabItem>
55+
</Tabs>
56+
57+
{ style && <CodeBlock className="language-css" title="style">{`${style}`}</CodeBlock> }
58+
</div>;

‎docs/src/component/code/AngularCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
88
const optionsObject = getOptionsObject(options);
99
const pluginsDeclaration = plugins
1010
? `\n public plugins: Plugin[] = [${getPlugins(plugins)}];\n`
@@ -33,7 +33,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
3333
const eventStatement = Object.keys(events).map(evt => ` (${evt})="${events[evt]}($event)"`).join("");
3434

3535
return <><CodeBlock className="language-html" title="demo.component.html">
36-
{`<ngx-flicking${options ? ` [options]="{ ${optionsObject} }"` : ""}${plugins ? " [plugins]=\"plugins\"" : ""}${eventStatement}>
36+
{`<ngx-flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` [options]="{ ${optionsObject} }"` : ""}${plugins ? " [plugins]=\"plugins\"" : ""}${eventStatement}>
3737
${panels.map(panel => `<${panel.tag} ${panel.isSlot ? "in-viewport" : "flicking-panel"}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n ")}
3838
</ngx-flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
3939
</CodeBlock>

‎docs/src/component/code/JavaScriptCode.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getStyle, withQuoteIfString } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [], viewportClass="" }: SourceContext) => {
88
const getOptions = (opts: { [key: string]: any }) => `${Object.keys(opts).map(key => `${key}: ${withQuoteIfString(opts[key])}`).join(",\n ")}`;
99

1010
const declareVars = Object.keys(methods).map(name => `const ${name} = ${methods[name]};\n`).join("");
@@ -16,7 +16,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl
1616
: "const flicking = new Flicking(\"#flick\")";
1717

1818
const addPlugins = plugins.length > 0
19-
? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n ${getOptions(plugin[1])}\n}` : ""})`)});` : "";
19+
? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n ${typeof plugin[1] === "object" ? getOptions(plugin[1]) : plugin[1] ?? ""}\n}` : ""})`)});` : "";
2020
const allImports = [...plugins.map(plugin => [`{ ${plugin[0]} }`, "@egjs/flicking-plugins"]), ...imports];
2121
const addEvents = Object.keys(events).map(evt => {
2222
const callback = events[evt];
@@ -26,7 +26,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl
2626
const slots = panels.filter(panel => panel.isSlot);
2727

2828
return <><CodeBlock className="language-html" title="html">
29-
{`<div id="flick" class="flicking-viewport${options.horizontal === false ? " vertical" : "" }">
29+
{`<div id="flick" class="flicking-viewport${viewportClass && ` ${viewportClass}` }${options.horizontal === false ? " vertical" : "" }">
3030
<div class="flicking-camera">
3131
${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n ")}
3232
</div>${slots.length ? `\n ${slots.map(slot => `<${slot.tag}${getClass(slot)}${getStyle(slot)}>${slot.content}</${slot.tag}>`).join("\n ")}` : ""}

‎docs/src/component/code/PreactCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
88
const declarePlugins = plugins ? `\n private _plugins = [${getPlugins(plugins)}];\n` : "";
99
const slots = panels.filter(panel => panel.isSlot);
1010

@@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
3535
${declareVars}
3636
export default class DemoComponent extends Component {${declarePlugins}
3737
public render() {
38-
return ${siblings ? "<>\n " : ""}<Flicking${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
38+
return ${siblings ? "<>\n " : ""}<Flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
3939
${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}</${panel.tag}>`).join("\n ")}${slotsTemplate}
4040
</Flicking>${siblings ? `\n ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}</${el.tag}>`).join("\n ")}\n </>` : ""};
4141
}

‎docs/src/component/code/ReactCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
88
const declarePlugins = plugins ? `\n private _plugins = [${getPlugins(plugins)}];\n` : "";
99
const slots = panels.filter(panel => panel.isSlot);
1010

@@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
3535
${declareVars}
3636
export default class DemoComponent extends Component {${declarePlugins}
3737
public render() {
38-
return ${siblings ? "<>\n " : ""}<Flicking${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
38+
return ${siblings ? "<>\n " : ""}<Flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
3939
${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}</${panel.tag}>`).join("\n ")}${slotsTemplate}
4040
</Flicking>${siblings ? `\n ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}</${el.tag}>`).join("\n ")}\n </>` : ""};
4141
}

‎docs/src/component/code/SvelteCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
88
const optionsObject = getOptionsObject(options);
99
const declarePlugins = plugins ? `\n\nconst plugins = [${getPlugins(plugins)}];` : "";
1010
const slots = panels.filter(panel => panel.isSlot);
@@ -34,7 +34,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
3434
${getImports(defaultImports, { includeFlicking: false })}${declarePlugins}${declareMethods}
3535
</script>
3636
37-
<Flicking${options ? ` options={{ ${optionsObject} }}` : ""}${plugins ? " plugins={plugins}" : ""}${eventStatement}>
37+
<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` options={{ ${optionsObject} }}` : ""}${plugins ? " plugins={plugins}" : ""}${eventStatement}>
3838
${panels.filter(panel => !panel.isSlot).map(panel => `<FlickingPanel${getClass(panel)}${getStyle(panel)}>${panel.content}</FlickingPanel>`).join("\n ")}${slotsTemplate}
3939
</Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
4040
</CodeBlock>;

‎docs/src/component/code/Vue3Code.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
88
const optionsObject = getOptionsObject(options);
99
const slots = panels.filter(panel => panel.isSlot);
1010
const declarePlugins = plugins ? `,
@@ -31,7 +31,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
3131
const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join("");
3232

3333
return <><CodeBlock className="language-html" title="template">
34-
{`<Flicking${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
34+
{`<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
3535
${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n ")}${slotsTemplate}
3636
</Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
3737
</CodeBlock>

‎docs/src/component/code/VueCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
44
import { SourceContext } from "./type";
55
import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
66

7-
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
7+
export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
88
const optionsObject = getOptionsObject(options);
99
const declarePlugins = plugins ? `,
1010
data() {
@@ -23,7 +23,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
2323
const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join("");
2424

2525
return <><CodeBlock className="language-html" title="template">
26-
{`<Flicking${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
26+
{`<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
2727
${panels.map(panel => `<${panel.tag}${panel.isSlot ? " slot=\"viewport\"" : ""}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n ")}
2828
</Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
2929
</CodeBlock>

‎docs/src/component/code/type.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export interface SourceContext {
1313
angular?: React.ReactElement;
1414
preact?: React.ReactElement;
1515
svelte?: React.ReactElement;
16+
viewportClass?: string;
17+
style?: string;
1618
}
1719

1820
export interface InnerElement {

‎docs/src/component/code/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ export const getImports = (otherImports, {
2525

2626
return `${imports.map(imp => Array.isArray(imp) ? `import ${imp[0]} from "${imp[1]}";` : `import "${imp}";`).join("\n")}`;
2727
};
28-
export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{ ${getOptionsObject(plugin[1])} }` : ""}`).join(", ")})`;
28+
export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${typeof plugin[1] === "object" ? `{ ${getOptionsObject(plugin[1])} }` : plugin[1] ?? ""}`).join(", ")})`;

0 commit comments

Comments
 (0)