-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(sidebar): develop new component (#2868)
* chore: save my content * chore: save my content * chore: save my content * fix: adopt some AI adivice * chore: add unit test rate * chore: add unit test rate * feat: v15 style adaption * feat: migrate doc update * fix: review * fix: support word wrap * fix: support word wrap * fix: disabled * fix: make css easier * fix: adjust some doc details --------- Co-authored-by: xiaoyatong <[email protected]>
- Loading branch information
1 parent
5e3428d
commit 16bfab6
Showing
34 changed files
with
1,540 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import * as React from 'react' | ||
import { fireEvent, render } from '@testing-library/react' | ||
import '@testing-library/jest-dom' | ||
import { SideBar } from '../sidebar' | ||
|
||
const list = Array.from(new Array(3).keys()) | ||
|
||
test('should render defaultValue correctly', async () => { | ||
const { container } = render( | ||
<SideBar style={{ height: 300 }} value="0"> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`}> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
) | ||
const item = container.querySelectorAll('.nut-sidebar-titles-item')[0] | ||
expect(item).toHaveClass('nut-sidebar-titles-item-active') | ||
}) | ||
|
||
test('should choose and scroll to the right option', async () => { | ||
const onChange = vi.fn() | ||
const { container } = render( | ||
<SideBar style={{ height: 300 }} value="0" onChange={onChange}> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`}> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
) | ||
const items = container.querySelectorAll('.nut-sidebar-titles-item') | ||
fireEvent.click(items[1]) | ||
expect(onChange).toHaveBeenCalledWith(1) | ||
}) | ||
test('disabled option', async () => { | ||
const onChange = vi.fn() | ||
const { container } = render( | ||
<SideBar style={{ height: 300 }} value="0" onChange={onChange}> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`} disabled> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
) | ||
const items = container.querySelectorAll('.nut-sidebar-titles-item') | ||
fireEvent.click(items[1]) | ||
expect(onChange).not.toHaveBeenCalled() | ||
}) | ||
test('matchByValue', async () => { | ||
const list1 = [ | ||
{ value: 'a', title: 'Opt a Opt a Opt a Opt a' }, | ||
{ value: 'b', title: 'Opt b' }, | ||
{ value: 'c', title: 'Opt c' }, | ||
] | ||
const onChange = vi.fn() | ||
const { container } = render( | ||
<SideBar style={{ height: 300 }} value="b" onChange={onChange}> | ||
{list1.map((item) => ( | ||
<SideBar.Item key={item.value} title={item.title} value={item.value}> | ||
Content {item.value} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
) | ||
const items = container.querySelectorAll('.nut-sidebar-titles-item') | ||
expect(items[1]).toHaveClass('nut-sidebar-titles-item-active') | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react' | ||
import Taro from '@tarojs/taro' | ||
import { ScrollView, View } from '@tarojs/components' | ||
import { useTranslate } from '@/sites/assets/locale/taro' | ||
import Header from '@/sites/components/header' | ||
import Demo1 from './demos/taro/demo1' | ||
import Demo2 from './demos/taro/demo2' | ||
import Demo3 from './demos/taro/demo3' | ||
import Demo4 from './demos/taro/demo4' | ||
import Demo5 from './demos/taro/demo5' | ||
import Demo6 from './demos/taro/demo6' | ||
|
||
const TabsDemo = () => { | ||
const [translated] = useTranslate({ | ||
'zh-CN': { | ||
basic: '基础用法', | ||
disabled: '禁用选项', | ||
matchByValue: '根据value匹配', | ||
multiTitle: '多个标题', | ||
setDuration: '设置滚动动画时长', | ||
padding: '内容区域留白边距', | ||
}, | ||
'en-US': { | ||
basic: 'Basic Usage', | ||
disabled: 'Disabled', | ||
matchByValue: 'Match By Value', | ||
multiTitle: 'Multiple Titles', | ||
setDuration: 'Set Scroll Animation Duration', | ||
padding: 'Set Content Padding', | ||
}, | ||
}) | ||
|
||
return ( | ||
<> | ||
<Header /> | ||
<ScrollView | ||
className={`demo ${Taro.getEnv() === 'WEB' ? 'web full' : ''}`} | ||
> | ||
<View className="h2">{translated.basic}</View> | ||
<Demo1 /> | ||
<View className="h2">{translated.disabled}</View> | ||
<Demo2 /> | ||
<View className="h2">{translated.matchByValue}</View> | ||
<Demo3 /> | ||
<View className="h2">{translated.multiTitle}</View> | ||
<Demo4 /> | ||
<View className="h2">{translated.setDuration}</View> | ||
<Demo5 /> | ||
<View className="h2">{translated.padding}</View> | ||
<Demo6 /> | ||
</ScrollView> | ||
</> | ||
) | ||
} | ||
|
||
export default TabsDemo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import React from 'react' | ||
import { useTranslate } from '@/sites/assets/locale' | ||
import Demo1 from './demos/h5/demo1' | ||
import Demo2 from './demos/h5/demo2' | ||
import Demo3 from './demos/h5/demo3' | ||
import Demo4 from './demos/h5/demo4' | ||
import Demo5 from './demos/h5/demo5' | ||
import Demo6 from './demos/h5/demo6' | ||
|
||
const SideNavBarDemo = () => { | ||
const [translated] = useTranslate({ | ||
'zh-CN': { | ||
basic: '基础用法', | ||
disabled: '禁用选项', | ||
matchByValue: '根据value匹配', | ||
multiTitle: '多个标题', | ||
setDuration: '设置滚动动画时长', | ||
padding: '内容区域留白边距', | ||
}, | ||
'en-US': { | ||
basic: 'Basic Usage', | ||
disabled: 'Disabled', | ||
matchByValue: 'Match By Value', | ||
multiTitle: 'Multiple Titles', | ||
setDuration: 'Set Scroll Animation Duration', | ||
padding: 'Set Content Padding', | ||
}, | ||
}) | ||
|
||
return ( | ||
<> | ||
<div className="demo"> | ||
<h2>{translated.basic}</h2> | ||
<Demo1 /> | ||
<h2>{translated.disabled}</h2> | ||
<Demo2 /> | ||
<h2>{translated.matchByValue}</h2> | ||
<Demo3 /> | ||
<h2>{translated.multiTitle}</h2> | ||
<Demo4 /> | ||
<h2>{translated.setDuration}</h2> | ||
<Demo5 /> | ||
<h2>{translated.padding}</h2> | ||
<Demo6 /> | ||
</div> | ||
</> | ||
) | ||
} | ||
|
||
export default SideNavBarDemo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React, { useState } from 'react' | ||
import { SideBar } from '@nutui/nutui-react' | ||
|
||
const Demo1 = () => { | ||
const [value, setValue] = useState<number | string>('0') | ||
const list = Array.from(new Array(3).keys()) | ||
return ( | ||
<> | ||
<SideBar | ||
style={{ height: 300 }} | ||
value={value} | ||
onChange={(value) => { | ||
setValue(value) | ||
}} | ||
> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`}> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
</> | ||
) | ||
} | ||
export default Demo1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React, { useState } from 'react' | ||
import { SideBar } from '@nutui/nutui-react' | ||
|
||
const Demo2 = () => { | ||
const [value, setValue] = useState<number | string>('0') | ||
return ( | ||
<> | ||
<SideBar | ||
style={{ height: 300 }} | ||
value={value} | ||
onChange={(value) => { | ||
setValue(value) | ||
}} | ||
> | ||
<SideBar.Item title="Opt 1">Content 1</SideBar.Item> | ||
<SideBar.Item title="Opt 2">Content 2</SideBar.Item> | ||
<SideBar.Item title="Opt 3" disabled /> | ||
</SideBar> | ||
</> | ||
) | ||
} | ||
export default Demo2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React, { useState } from 'react' | ||
import { SideBar } from '@nutui/nutui-react' | ||
|
||
const Demo3 = () => { | ||
const [value, setValue] = useState<number | string>('b') | ||
return ( | ||
<> | ||
<SideBar | ||
style={{ height: 300 }} | ||
value={value} | ||
onChange={(value) => { | ||
setValue(value) | ||
}} | ||
> | ||
<SideBar.Item title="Opt 1" value="a"> | ||
Content 1 | ||
</SideBar.Item> | ||
<SideBar.Item title="Opt 2" value="b"> | ||
Content 2 | ||
</SideBar.Item> | ||
<SideBar.Item title="Opt 3" value="c"> | ||
Content 3 | ||
</SideBar.Item> | ||
</SideBar> | ||
</> | ||
) | ||
} | ||
export default Demo3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React, { useState } from 'react' | ||
import { SideBar } from '@nutui/nutui-react' | ||
|
||
const Demo4 = () => { | ||
const [value, setValue] = useState<number | string>('0') | ||
const list = Array.from(new Array(20).keys()) | ||
return ( | ||
<> | ||
<SideBar | ||
style={{ height: 300 }} | ||
value={value} | ||
onChange={(value) => { | ||
setValue(value) | ||
}} | ||
> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`}> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
</> | ||
) | ||
} | ||
export default Demo4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import React, { useState } from 'react' | ||
import { SideBar } from '@nutui/nutui-react' | ||
|
||
const Demo5 = () => { | ||
const [value, setValue] = useState<number | string>('0') | ||
const list = Array.from(new Array(20).keys()) | ||
return ( | ||
<> | ||
<SideBar | ||
style={{ height: 300 }} | ||
value={value} | ||
contentDuration={500} | ||
sidebarDuration={300} | ||
onChange={(value) => { | ||
setValue(value) | ||
}} | ||
> | ||
{list.map((item) => ( | ||
<SideBar.Item key={item} title={`Opt ${item + 1}`}> | ||
Content {item + 1} | ||
</SideBar.Item> | ||
))} | ||
</SideBar> | ||
</> | ||
) | ||
} | ||
export default Demo5 |
Oops, something went wrong.