Skip to content

Commit fadb09b

Browse files
daybrushdaybrush
authored
docs: add 2 demo (#928)
* docs: add 2 demo * fix: fix reactive tests
1 parent 4abd2cb commit fadb09b

File tree

4 files changed

+92
-8
lines changed

4 files changed

+92
-8
lines changed

‎docs/src/css/custom.css‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,15 @@
2020
--ifm-color-success: #48c78e;
2121
--ifm-code-font-size: 95%;
2222
}
23+
2324
html[data-theme='dark'] {
2425
--ifm-background-color: #242526 !important;
2526
}
2627

2728
.title {
2829
color: var(--ifm-font-color-base) !important;
2930
}
31+
3032
.subtitle {
3133
color: var(--ifm-font-color-base) !important;
3234
}
@@ -35,12 +37,15 @@ html[data-theme='dark'] {
3537
.navbar__logo {
3638
margin-right: 0 !important;
3739
}
40+
3841
.navbar__brand {
3942
padding: var(--ifm-navbar-item-padding-vertical) 1rem;
4043
}
44+
4145
.navbar--fixed-top {
4246
z-index: 2002;
4347
}
48+
4449
html[data-theme='dark'] .navbar__logo {
4550
content: url("@site/static/img/flicking_textonly_white.svg");
4651
}
@@ -65,11 +70,11 @@ article a {
6570
}
6671

6772
.codesandbox-playground {
68-
width:100%;
69-
height:500px;
70-
border:0;
73+
width: 100%;
74+
height: 500px;
75+
border: 0;
7176
border-radius: 4px;
72-
overflow:hidden;
77+
overflow: hidden;
7378
}
7479

7580
.flicking-viewport {
@@ -78,7 +83,8 @@ article a {
7883
margin-left: auto;
7984
margin-right: auto;
8085
}
81-
.flicking-viewport.vertical > .flicking-camera {
86+
87+
.flicking-viewport.vertical>.flicking-camera {
8288
align-items: center;
8389
}
8490

@@ -98,11 +104,13 @@ article a {
98104
box-sizing: border-box;
99105
position: relative;
100106
}
107+
101108
.flicking-index {
102109
min-width: 60px;
103110
text-align: center;
104111
position: relative;
105112
}
113+
106114
.flicking-index::before {
107115
content: "";
108116
position: absolute;
@@ -111,9 +119,11 @@ article a {
111119
width: 80%;
112120
border-bottom: 2px solid white;
113121
}
122+
114123
.flicking-panel.has-background-warning .flicking-index::before {
115-
border-color: rgba(0,0,0,.7);
124+
border-color: rgba(0, 0, 0, .7);
116125
}
126+
117127
.flicking-index::after {
118128
content: "PANEL";
119129
font-weight: bold;
@@ -128,21 +138,26 @@ article a {
128138
.flicking-panel.high {
129139
height: 300px;
130140
}
141+
131142
.flicking-panel.higher {
132143
height: 400px;
133144
}
145+
134146
.flicking-panel.full {
135147
width: 100%;
136148
}
149+
137150
.flicking-panel.thumb {
138151
padding: 0;
139152
width: 20%;
140153
height: 100px;
141154
margin-bottom: 0;
142155
}
156+
143157
.flicking-panel.thumb.active {
144158
border: 5px solid #48c78e;
145159
}
160+
146161
.flicking-panel .thumb-image {
147162
width: 100%;
148163
height: 100%;
@@ -162,6 +177,7 @@ article a {
162177
user-select: none;
163178
-webkit-user-select: none;
164179
}
180+
165181
.panel-with-link .flicking-panel {
166182
width: 100%;
167183
margin: 0;
@@ -200,20 +216,33 @@ article a {
200216
justify-content: center;
201217
align-items: flex-start;
202218
}
219+
203220
.skeleton-bar {
204221
height: 10px;
205222
border-radius: 5px;
206223
background: white;
207224
}
225+
208226
.skeleton-bar-size1 {
209227
width: 100px;
210228
}
229+
211230
.skeleton-bar-size2 {
212231
width: 120px;
213232
}
233+
214234
.skeleton-bar-size3 {
215235
width: 160px;
216236
}
237+
217238
.skeleton-bar-size4 {
218239
width: 200px;
219240
}
241+
242+
.flicking-coverflow {
243+
perspective: 400px;
244+
}
245+
246+
.flicking-coverflow .flicking-camera {
247+
transform-style: preserve-3d;
248+
}

‎docs/src/demo/reactive/Coverflow.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
3+
import Panel from "../../component/Panel";
4+
5+
export default () => {
6+
const flickingRef = React.createRef<Flicking>();
7+
const {
8+
indexProgress
9+
} = useFlickingReactiveAPI(flickingRef);
10+
11+
const length = 5;
12+
return (
13+
<Flicking ref={flickingRef} circular={true} className="flicking-coverflow">
14+
{[0, 1, 2, 3, 4].map((index) => {
15+
const childProgress = (index - indexProgress + length * 1.5) % length - length * 0.5;
16+
const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);
17+
18+
return <Panel key={index} index={index} style={{
19+
transformOrigin: `${50 - childProgress * 50}% 50%`,
20+
transform: `rotateY(${-childProgress * 50}deg) scale(${scale})`
21+
}} />;
22+
})}
23+
</Flicking>
24+
);
25+
};

‎docs/src/demo/reactive/Creative.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
3+
import Panel from "../../component/Panel";
4+
5+
export default () => {
6+
const flickingRef = React.createRef<Flicking>();
7+
const {
8+
indexProgress
9+
} = useFlickingReactiveAPI(flickingRef);
10+
11+
const length = 5;
12+
return (
13+
<Flicking ref={flickingRef} style={{ maxWidth: "300px" }}>
14+
{[0, 1, 2, 3, 4].map((index) => {
15+
const childProgress = (index - indexProgress + length * 1.5) % length - length * 0.5;
16+
const pos = childProgress < 0 ? `${-childProgress * 100}%` : "0px";
17+
const scale = childProgress < 0 ? `${Math.max(0, 1 - Math.abs(childProgress))}` : 1;
18+
19+
return <Panel key={index} index={index} style={{
20+
width: "100%",
21+
transform: `translate(${pos}) scale(${scale})`
22+
}} />;
23+
})}
24+
</Flicking>
25+
);
26+
};

‎test/unit/reactive/reactive.spec.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { expect } from "chai";
22
import Flicking from "~/Flicking";
3-
import { connectFlickingReactiveAPI } from "~/reactive";
3+
import { connectFlickingReactiveAPI, FlickingReactiveObject } from "~/reactive";
44
import {
55
cleanup,
66
createFlicking,
@@ -12,7 +12,7 @@ import El from "../helper/El";
1212
describe("Reactive API", () => {
1313
let container: HTMLElement;
1414
let flicking: Flicking;
15-
let stateApi: ReturnType<typeof connectFlickingReactiveAPI>;
15+
let stateApi: FlickingReactiveObject;
1616

1717
beforeEach(async () => {
1818
container = createSandbox("reactive-test");
@@ -32,6 +32,7 @@ describe("Reactive API", () => {
3232
expect(stateApi.totalPanelCount).to.equal(3);
3333
expect(stateApi.currentPanelIndex).to.equal(0);
3434
expect(stateApi.progress).to.equal(0);
35+
expect(stateApi.indexProgress).to.equal(0);
3536
});
3637
});
3738

@@ -44,6 +45,7 @@ describe("Reactive API", () => {
4445
expect(stateApi.isReachStart).to.be.false;
4546
expect(stateApi.isReachEnd).to.be.false;
4647
expect(stateApi.currentPanelIndex).to.equal(1);
48+
expect(stateApi.indexProgress).to.equal(1);
4749
expect(stateApi.progress).to.equal(50);
4850
});
4951

@@ -55,6 +57,7 @@ describe("Reactive API", () => {
5557
expect(stateApi.isReachStart).to.be.false;
5658
expect(stateApi.isReachEnd).to.be.true;
5759
expect(stateApi.currentPanelIndex).to.equal(2);
60+
expect(stateApi.indexProgress).to.equal(2);
5861
expect(stateApi.progress).to.equal(100);
5962
});
6063

@@ -80,6 +83,7 @@ describe("Reactive API", () => {
8083
await promise;
8184

8285
expect(stateApi.currentPanelIndex).to.equal(1);
86+
expect(stateApi.indexProgress).to.equal(1);
8387
expect(stateApi.progress).to.equal(50);
8488
});
8589
});

0 commit comments

Comments
 (0)