Skip to content

Commit

Permalink
docs: add f2 docs and phone demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@cncolder
cncolder committed Jul 10, 2020
1 parent 7ea138f commit 53a52af
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 9 deletions.
13 changes: 12 additions & 1 deletion README.md
View file
Expand Up @@ -28,7 +28,7 @@
<div align="center">
Built with :purple_heart: by
<a href="https://github.com/cncolder">@Colder</a> and
<a href="https://github.com/tarojsx/ui/graphs/contributors">
<a href="https://github.com/tarojsx/library/graphs/contributors">
Contributors
</a>
<div align="center">
Expand Down Expand Up @@ -82,6 +82,10 @@ const config = {

## 模块

### 图表

* [x] [AntV F2](docs/antv-f2.mdx) - 让数据栩栩如生

### 虚拟滚动

* [x] [react-window](docs/react-window.mdx) - 虚拟滚动
Expand All @@ -99,6 +103,13 @@ const config = {

欢迎各种形式的支持. 至少可以给颗星 :star:

### 测试步骤

1. 打开微信开发者工具 CLI/HTTP 调用功能，设置 - 安全设置 - 服务端口
2. 导入项目，目录指向当前项目文件夹。
3. 运行 `npm run test`
4. 如果提示 `Failed to launch wechat web devTools`，请先退出微信开发者工具。

## License

[MIT](LICENSE)
74 changes: 74 additions & 0 deletions docs/antv-f2.mdx
View file
@@ -0,0 +1,74 @@
---
id: antv-f2
title: AntV F2
sidebar_label: AntV F2
---

## [AntV F2](https://antv.gitee.io/zh)

### 需求

- 小程序基础库 >= 2.7.0

### 使用

```jsx
import React from 'react'
import { F2 } from '@tarojsx/library/dist/antv'

const Demo = () => {
return (
<F2
style={{ width: '100vw', height: '50vh' }}
// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
data={[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
]}
>
{
// Step 1: 接收 Chart 对象
({ chart, data }) => {
// Step 2: 载入数据源
chart.source(data)

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')

// Step 4: 渲染图表
chart.render()
}
}
</F2>
)
}
```

import { F2 } from '@tarojsx/library/dist/antv'
import { UI } from '@/ui'

<UI phone title="AntV F2">
{() => {
return (
<F2
style={{ width: '750px', height: '750px' }}
data={[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
]}
>
{({ chart, data }) => {
chart.source(data)
chart.interval().position('genre*sold').color('genre')
chart.render()
}}
</F2>
)
}}
</UI>
73 changes: 69 additions & 4 deletions docs/react-spring.mdx
View file
Expand Up @@ -8,15 +8,14 @@ sidebar_label: react-spring

### 需求

- `requestAnimationFrame`
- `performance.now`
- `requestAnimationFrame`
- `performance.now`

### 使用

```jsx
import React from 'react'
import { useSpring } from 'react-spring'
import { animated } from '@tarojsx/library'
import { animated, useSpring } from '@tarojsx/library/dist/react-spring'

const Demo = () => {
const spring = useSpring({
Expand All @@ -31,3 +30,69 @@ const Demo = () => {
return <animated.View style={spring}>Hello spring</animated.View>
}
```

import { animated, useSpring } from '@tarojsx/library/dist/react-spring'
import { View } from '@tarojs/components'
import { UI } from '@/ui'

<UI phone title="Spring">
{() => {
const colorfulSpring = useSpring({
to: async (next, cancel) => {
while (true) {
await next({ opacity: 1, color: '#ffaaee', fontSize: 60, textAlign: 'center' })
await next({ opacity: 0.5, color: 'rgb(14,26,19)' })
}
},
})
const numberSpring = useSpring({
to: async (next) => {
while (true) {
await next({ number: 1 })
await next({ number: 0 })
}
},
})
const scriptSpring = useSpring({
from: {
position: 'relative',
willChange: 'width, height, left, top',
left: '0%',
top: '0%',
width: '0%',
height: '0%',
background: 'lightgreen',
},
to: async (next) => {
while (1) {
await next({ left: '0%', top: '0%', width: '100%', height: '100%', background: 'lightblue' })
await next({ height: '50%', background: 'lightgreen' })
await next({ width: '50%', left: '50%', background: 'lightgoldenrodyellow' })
await next({ top: '0%', height: '100%', background: 'lightpink' })
await next({ top: '50%', height: '50%', background: 'lightsalmon' })
await next({ width: '100%', left: '0%', background: 'lightcoral' })
await next({ width: '50%', background: 'lightseagreen' })
await next({ top: '0%', height: '100%', background: 'lightskyblue' })
await next({ width: '100%', background: 'lightslategrey' })
}
},
})
return (
<View>
<animated.View style={colorfulSpring}>Hello spring</animated.View>
<animated.View style={{ textAlign: 'center' }}>{numberSpring.number}</animated.View>
<View
style={{
position: 'relative',
overflow: 'hidden',
width: '750px',
height: '750px',
backgroundColor: '#f0f0f0',
}}
>
<animated.View style={scriptSpring} />
</View>
</View>
)
}}
</UI>
77 changes: 75 additions & 2 deletions docs/react-use-gesture.mdx
View file
Expand Up @@ -8,15 +8,15 @@ sidebar_label: react-use-gesture

### 需求

- `requestAnimationFrame`
- `requestAnimationFrame`

### 使用

```jsx
import React from 'react'
import { View } from '@tarojs/components'
import { useDrag } from 'react-use-gesture'
import { useGestureConfig } from '@tarojsx/library'
import { useGestureConfig } from '@tarojsx/library/dist/react-use-gesture'

const Demo = () => {
const [gestureConfig, containerProps] = useGestureConfig()
Expand All @@ -32,3 +32,76 @@ const Demo = () => {
return <View {...containerProps}>{<View {...bind()} />}</View>
}
```

import { useRef, useMemo } from 'react'
import Taro from '@tarojs/taro'
import _clamp from 'lodash/clamp'
import { useGestureConfig, useDrag } from '@tarojsx/library/dist/react-use-gesture'
import { animated, useSprings } from '@tarojsx/library/dist/react-spring'
import { View } from '@tarojs/components'
import { UI } from '@/ui'

<UI phone title="Gesture">
{() => {
const { windowWidth } = useMemo(() => Taro.getSystemInfoSync(), [])
const pages = useMemo(
() => [
'https://img11.360buyimg.com/uba/jfs/t21205/91/853520716/145629/b03d7fa7/5b19f383N6a30536b.jpg',
'https://img14.360buyimg.com/ling/jfs/t1/103557/3/12087/1051626/5e44b357E4cab8765/d8c821c4a3e1060d.png',
'https://storage.360buyimg.com/taro-club-img/b42116392c909d0680788853011c70db',
'https://storage.jd.com/taro-resource/review.jpg',
'https://misc.aotu.io/jimczj/2018-08-27taro-ui.jpg',
'https://img10.360buyimg.com/img/jfs/t1/21860/12/8740/42390/5c790470E1d0bbce9/9f9bb78d01f7564b.png',
],
[]
)
const [gestureConfig, containerProps] = useGestureConfig()
const index = useRef(0)
const [springs, set] = useSprings(pages.length, (i) => ({ x: i * 2 * windowWidth, sc: 1, display: 'block' }))
const drag = useDrag((e) => {
const {
down,
direction: [xDir],
distance,
cancel,
} = e
console.log('useDrag', 'distance', distance)
if (down && distance > windowWidth / 2) {
index.current = _clamp(index.current + (xDir > 0 ? -1 : 1), 0, pages.length - 1)
cancel()
}
set((i) => {
if (i < index.current - 1 || i > index.current + 1) return { display: 'none' }
const x = (i - index.current) * 2 * windowWidth + (down ? xDir * distance : 0)
const sc = down ? 1 - distance / windowWidth / 2 : 1
return { x, sc, display: 'block' }
})
}, gestureConfig)
return (
<View {...containerProps}>
<View style={{ textAlign: 'center', fontSize: '40px' }}>⬅ 拖拽图片 ➡</View>
{springs.map(({ x, display, sc }, i) => (
<animated.View
{...drag()}
key={i}
style={{
position: 'absolute',
display,
width: '750px',
height: '750px',
transform: x.interpolate((x) => `translate3d(${x}px,0,0)`),
}}
>
<animated.View
style={{
height: '100%',
transform: sc.interpolate((s) => `scale(${s})`),
background: `center / contain no-repeat url(${pages[i]})`,
}}
/>
</animated.View>
))}
</View>
)
}}
</UI>
4 changes: 2 additions & 2 deletions docs/react-window.mdx
View file
Expand Up @@ -8,15 +8,15 @@ sidebar_label: react-window

### 需求

- `requestAnimationFrame`
- `requestAnimationFrame`

### 使用

```jsx
import React from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { FixedSizeList } from '@tarojsx/library'
import { FixedSizeList } from '@tarojsx/library/dist/react-window'

const { windowWidth, windowHeight } = Taro.getSystemInfoSync()

Expand Down

0 comments on commit 53a52af

Please sign in to comment.