Skip to content

feat(grid): v14 #2771

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

Merged
oasis-cloud merged 9 commits into from
Nov 29, 2024
Merged

feat(grid): v14 #2771

Show file tree
Hide file tree
Changes from all 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/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@
"sort": 5,
"show": true,
"taro": true,
"v14": true,
"author": "yangxiaolu"
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/packages/animatingnumbers/countup.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
} = mergeProps(defaultProps, props)
const classPrefix = 'nut-countup'
const countupRef = useRef<HTMLDivElement>(null)
const timerRef = useRef()
const timerRef = useRef<ReturnType<typeof setTimeout>>()
const numbers = Array.from({ length: 10 }, (v, i) => i)

const getShowNumber = useCallback(() => {
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
Loading