Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(grid): v14 #2771

Merged
merged 9 commits into from
Nov 29, 2024
Merged

feat(grid): v14 #2771

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0dcd069
feat(grid): v14
irisSong Nov 19, 2024
412408f
fix: update test
irisSong Nov 19, 2024
055db68
fix: remove customTheme
irisSong Nov 21, 2024
8182f2f
Merge remote-tracking branch 'upstream/V3.0' into 3.0-grid
irisSong Nov 21, 2024
3b33363
fix: modify ts
irisSong Nov 21, 2024
2dfed2b
fix: optimize demo writing
irisSong Nov 21, 2024
2c661f3
fix: modify ts
irisSong Nov 21, 2024
db8f66c
feat: add marking
irisSong Nov 25, 2024
6b65534
Merge branch 'feat_v3.x' into 3.0-grid
xiaoyatong Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/packages/animatingnumbers/countup.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,13 @@
})
.exec()
}
}, [numberArr])

Check warning on line 88 in src/packages/animatingnumbers/countup.taro.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useCallback has a missing dependency: 'duration'. Either include it or remove the dependency array

useEffect(() => {
if (numberArr.length) {
if (!isLoaded.current) {
isLoaded.current = true
// @ts-ignore
timerRef.current = setTimeout(() => {
setNumberTransform()
}, delay)
irisSong marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
239 changes: 223 additions & 16 deletions src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,223 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`render with column num 1`] = `
<div>
<div
class="nut-grid"
>
<div
class="nut-grid-item"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
<div
class="nut-grid-item"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
<div
class="nut-grid-item"
style=""
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
<div
class="nut-grid-item"
style="margin-right: 9px; margin-top: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
<div
class="nut-grid-item"
style="margin-right: 9px; margin-top: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
<div
class="nut-grid-item"
style="margin-top: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
class="nut-icon nut-icon-Image "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0"
fill="currentColor"
fill-opacity="0.9"
/>
,
<path
d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74M594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<div
class="nut-grid-item-text"
>
文本
</div>
</div>
</div>
</div>
</div>
`;

exports[`render with custom content 1`] = `
<div>
<div
class="nut-grid nut-grid-border"
class="nut-grid"
>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-horizontal"
>
<svg
aria-labelledby="Image"
Expand Down Expand Up @@ -42,10 +249,10 @@ exports[`render with custom content 1`] = `
</div>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-horizontal"
>
<div
class="nut-grid-item-text nut-grid-item-text-horizontal"
Expand Down Expand Up @@ -80,10 +287,10 @@ exports[`render with custom content 1`] = `
</div>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-horizontal"
>
<div
class="nut-avatar nut-avatar-normal nut-avatar-round nut-avatar-normal-round demo-avatar"
Expand Down Expand Up @@ -114,10 +321,10 @@ exports[`render with custom content 1`] = `
</div>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style=""
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-horizontal"
>
<div
class="nut-avatar nut-avatar-large nut-avatar-round nut-avatar-large-round"
Expand Down Expand Up @@ -166,14 +373,14 @@ exports[`render with custom content 1`] = `
exports[`should match snapshot 1`] = `
<div>
<div
class="nut-grid nut-grid-border"
class="nut-grid"
>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
Expand Down Expand Up @@ -203,10 +410,10 @@ exports[`should match snapshot 1`] = `
</div>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
Expand Down Expand Up @@ -236,10 +443,10 @@ exports[`should match snapshot 1`] = `
</div>
<div
class="nut-grid-item"
style="flex-basis: 25%;"
style="margin-right: 9px;"
>
<div
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"
class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-surround nut-grid-item-content-center nut-grid-item-content-square nut-grid-item-content-vertical"
>
<svg
aria-labelledby="Image"
Expand Down
9 changes: 4 additions & 5 deletions src/packages/grid/__test__/grid.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,13 @@ test('render with column num', () => {
</>
)

const regionItem = container.querySelector('.nut-grid-item')
expect(regionItem).toHaveStyle('flex-basis:33.333333333333336%')
expect(container).toMatchSnapshot()
})

test('render with props gap', () => {
const { container } = render(
<>
<Grid gap={3}>
<Grid gap={10}>
<Grid.Item text="文本">
<ImageIcon />
</Grid.Item>
Expand Down Expand Up @@ -88,8 +87,8 @@ test('render with props gap', () => {
</>
)

const regionItem = container.querySelector('.nut-grid-item')
expect(regionItem).toHaveStyle('padding-right:3px')
const regionItem = container.querySelectorAll('.nut-grid-item')[0]
expect(regionItem).toHaveStyle('margin-right: 10px')
})

test('render with props reverse', () => {
Expand Down
16 changes: 11 additions & 5 deletions src/packages/grid/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import { useTranslate } from '@/sites/assets/locale/taro'
import { harmony } from '@/utils/platform-taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
Expand All @@ -19,7 +20,7 @@ const GridDemo = () => {
'zh-CN': {
basic: '基础用法',
columns: '自定义列数',
square: '正方形格子',
custom: '自定义格子',
gap: '格子间距',
reverse: '内容翻转',
horizontal: '内容横向',
Expand All @@ -31,7 +32,7 @@ const GridDemo = () => {
'zh-TW': {
basic: '基础用法',
columns: '自定義列數',
square: '正方形格子',
custom: '自定義格子',
gap: '格子間距',
reverse: '內容翻轉',
horizontal: '內容橫向',
Expand All @@ -43,7 +44,7 @@ const GridDemo = () => {
'en-US': {
basic: 'Basic Usage',
columns: 'Column Num',
square: 'Square',
custom: 'Custom Grids',
gap: 'Gap',
reverse: 'Reverse',
horizontal: 'Horizontal',
Expand All @@ -65,8 +66,13 @@ const GridDemo = () => {
<Demo1 />
<View className="h2">{translated.columns}</View>
<Demo2 />
<View className="h2">{translated.square}</View>
<Demo3 />
{/* harmony 不支持 css 变量 */}
{harmony() ? null : (
<>
<View className="h2">{translated.custom}</View>
<Demo3 />
</>
)}
<View className="h2">{translated.gap}</View>
<Demo4 />
<View className="h2">{translated.reverse}</View>
Expand Down
Loading
Loading