Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 a7de584e 编写于 作者: E eiinu 提交者： GitHub
浏览文件
操作

chore(collapse): icon 组件替换 (#811) 

* chore(collapse): icon 组件替换

* fix: icon -> expandIcon
上级 da32eaaf
隐藏空白更改
内联 并排
Showing with 356 addition and 351 deletion
src/packages/collapse/__test__/collapse.spec.tsx
浏览文件 @ a7de584e
......@@ -3,18 +3,14 @@ import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { DownArrow, ArrowRight2 } from '@nutui/icons-react'
import { Collapse } from '../collapse'
import { CollapseItem } from '../../collapseitem/collapseitem'
test('should match snapshot', () => {
const { asFragment } = render(
<>
<Collapse
activeName={['1', '2']}
icon="arrow-down"
iconSize="16"
iconColor="#999"
>
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -33,12 +29,7 @@ test('should match snapshot', () => {
test('prop icon iconSize iconColor', () => {
const { getByTestId, container } = render(
<>
<Collapse
activeName={['1', '2']}
icon="arrow-down"
iconSize="16"
iconColor="#999"
>
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -65,12 +56,7 @@ test('prop icon iconSize iconColor', () => {
test('prop activeName', () => {
const { container } = render(
<>
<Collapse
activeName={['1', '2']}
icon="arrow-down"
iconSize="16"
iconColor="#999"
>
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -94,7 +80,7 @@ test('prop activeName', () => {
test('prop accordion', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title="标题1"
name="1"
......@@ -126,19 +112,24 @@ test('prop accordion', () => {
test('prop rotate', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={180}>
<Collapse
activeName={['1']}
accordion
expandIcon={<ArrowRight2 />}
rotate={180}
>
<CollapseItem
title="标题1"
name="1"
icon="arrow-down"
expandIcon={<DownArrow />}
data-testid="collapse-one"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
<CollapseItem title="标题2" name="2" expandIcon={<DownArrow />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3" expandIcon={<DownArrow />}>
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......@@ -155,24 +146,20 @@ test('prop rotate', () => {
test('prop title subTitle titleIconColor titleIconSize titleIconPosition', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-right2">
<Collapse activeName={['1']} accordion expandIcon="arrow-right2">
<CollapseItem
title="标题1"
subTitle="副标题"
name="1"
icon="arrow-down"
titleIcon="checked"
expandIcon={<DownArrow />}
data-testid="collapse-one"
titleIconColor="red"
titleIconPosition="left"
titleIconSize="16"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
<CollapseItem title="标题2" name="2" expandIcon={<DownArrow />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3" expandIcon={<DownArrow />}>
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......
src/packages/collapse/collapse.taro.tsx
浏览文件 @ a7de584e
import React, { FunctionComponent, useEffect, useState, memo } from 'react'
import React, {
FunctionComponent,
useEffect,
useState,
memo,
ReactNode,
} from 'react'
import classNames from 'classnames'
import bem from '@/utils/bem'
......@@ -8,9 +14,7 @@ export interface CollapseProps {
style: React.CSSProperties
activeName: Array<number | string> | number | string
accordion: boolean
icon: string
iconSize: string
iconColor: string
expandIcon: ReactNode
rotate: number
onChange: (isOpen: boolean, name: string) => void
children?: React.ReactNode
......@@ -18,9 +22,7 @@ export interface CollapseProps {
const defaultProps = {
activeName: ['0'],
accordion: false,
icon: '',
iconSize: '16px',
iconColor: '',
expandIcon: null,
rotate: 180,
} as CollapseProps
......@@ -43,10 +45,8 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
children,
activeName,
accordion,
icon,
expandIcon,
rotate,
iconSize,
iconColor,
onChange,
} = {
...defaultProps,
......@@ -103,10 +103,8 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
return React.cloneElement(item, {
isOpen: defaultOpenIndex.includes(item.props.name),
onToggle: (isOpen: boolean, name: string) => onToggle(isOpen, name),
icon,
expandIcon: item.props.expandIcon || expandIcon,
rotate,
iconSize,
iconColor,
})
})}
</div>
......
src/packages/collapse/collapse.tsx
浏览文件 @ a7de584e
import React, { FunctionComponent, useEffect, useState, memo } from 'react'
import React, {
FunctionComponent,
useEffect,
useState,
memo,
ReactNode,
} from 'react'
import classNames from 'classnames'
import bem from '@/utils/bem'
......@@ -8,9 +14,7 @@ export interface CollapseProps {
style: React.CSSProperties
activeName: Array<number | string> | number | string
accordion: boolean
icon: string
iconSize: string
iconColor: string
expandIcon: ReactNode
rotate: number
onChange: (isOpen: boolean, name: string) => void
children?: React.ReactNode
......@@ -19,9 +23,7 @@ const defaultProps = {
style: {},
activeName: ['0'],
accordion: false,
icon: '',
iconSize: '16px',
iconColor: '',
expandIcon: null,
rotate: 180,
} as CollapseProps
......@@ -44,10 +46,8 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
children,
activeName,
accordion,
icon,
expandIcon,
rotate,
iconSize,
iconColor,
onChange,
} = {
...defaultProps,
......@@ -104,10 +104,8 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
return React.cloneElement(item, {
isOpen: defaultOpenIndex.includes(item.props.name),
onToggle: (isOpen: boolean, name: string) => onToggle(isOpen, name),
icon,
expandIcon: item.props.expandIcon || expandIcon,
rotate,
iconSize,
iconColor,
childnull: !!item.props.children,
})
})}
......
src/packages/collapse/demo.taro.tsx
浏览文件 @ a7de584e
import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { Checked, DownArrow, HeartFill, Star } from '@nutui/icons-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Collapse, CollapseItem, Button } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
......@@ -33,7 +34,7 @@ const CollapseDemo = () => {
header2: '无icon样式，绑定点击事件',
header3: '手风琴模式',
header4: '自定义折叠图标',
header5: '自定义title图标',
header5: '自定义 title 与 subTitle',
header6: '动态改变数据',
title1: '标题1',
title2: '标题2',
......@@ -50,7 +51,7 @@ const CollapseDemo = () => {
header2: '無icon樣式，綁定點擊事件',
header3: '手風琴模式',
header4: '自定義折疊圖標',
header5: '自定義title圖標',
header5: '自定義 title & subTitle',
header6: '動態改變數據',
title1: '標題1',
title2: '標題2',
......@@ -67,7 +68,7 @@ const CollapseDemo = () => {
header2: 'No icon style',
header3: 'accordion Mode',
header4: 'Custom collapse Icon',
header5: 'Custom title Icon',
header5: 'Custom title & subTitle',
header6: 'Change Data',
title1: 'title1',
title2: 'title2',
......@@ -142,12 +143,7 @@ const CollapseDemo = () => {
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>translated.header1</h2>
<Collapse
activeName={['1', '2']}
icon="arrow-down"
iconSize="16"
iconColor="#999"
>
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title={translated.title1} name="1">
{translated.content1}
</CollapseItem>
......@@ -174,7 +170,7 @@ const CollapseDemo = () => {
</CollapseItem>
</Collapse>
<h2>{translated.header3}</h2>
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title={translated.title1}
name="1"
......@@ -190,38 +186,66 @@ const CollapseDemo = () => {
</CollapseItem>
</Collapse>
<h2>{translated.header4}</h2>
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title={translated.title1} name="1" icon="arrow-down">
<Collapse
activeName={['1']}
accordion
expandIcon={<DownArrow />}
rotate={90}
>
<CollapseItem
title={translated.title1}
name="1"
expandIcon={<Checked />}
>
{translated.content1}
</CollapseItem>
<CollapseItem title={translated.title2} name="2" icon="arrow-down">
<CollapseItem
title={translated.title2}
name="2"
expandIcon={<HeartFill />}
>
{translated.content2}
</CollapseItem>
<CollapseItem title={translated.title3} name="3" icon="arrow-down">
<CollapseItem title={translated.title3} name="3">
{translated.content3}
</CollapseItem>
</Collapse>
<h2>{translated.header5}</h2>
<Collapse activeName={['1']} accordion icon="star">
<Collapse activeName={['1']} accordion expandIcon={<Star />}>
<CollapseItem
title={translated.title1}
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />
{translated.title1}
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconPosition="left"
>
{translated.content1}
</CollapseItem>
<CollapseItem
title={translated.title2}
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
{translated.title2}
<HeartFill color="red" />
</div>
}
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
>
{translated.content2}
</CollapseItem>
<CollapseItem title={translated.title3} name="3" icon="arrow-down">
<CollapseItem title={translated.title3} name="3">
{translated.content3}
</CollapseItem>
</Collapse>
......
src/packages/collapse/demo.tsx
浏览文件 @ a7de584e
import React, { useState, useEffect } from 'react'
import { DownArrow, Checked, HeartFill, Star } from '@nutui/icons-react'
import { Collapse } from './collapse'
import CollapseItem from '../collapseitem'
import { Button } from '../button/button'
......@@ -33,7 +34,7 @@ const CollapseDemo = () => {
header2: '无icon样式，绑定点击事件',
header3: '手风琴模式',
header4: '自定义折叠图标',
header5: '自定义title图标',
header5: '自定义 title 与 subTitle',
header6: '动态改变数据',
title1: '标题1',
title2: '标题2',
......@@ -50,7 +51,7 @@ const CollapseDemo = () => {
header2: '無icon樣式，綁定點擊事件',
header3: '手風琴模式',
header4: '自定義折疊圖標',
header5: '自定義title圖標',
header5: '自定義 title 與 subTitle',
header6: '動態改變數據',
title1: '標題1',
title2: '標題2',
......@@ -67,7 +68,7 @@ const CollapseDemo = () => {
header2: 'No icon style',
header3: 'accordion Mode',
header4: 'Custom collapse Icon',
header5: 'Custom title Icon',
header5: 'Custom title and subTitle',
header6: 'Change Data',
title1: 'title1',
title2: 'title2',
......@@ -142,9 +143,7 @@ const CollapseDemo = () => {
<Collapse
className="test"
activeName={['1', '2']}
icon="arrow-down"
iconSize="16"
iconColor="#999"
expandIcon={<DownArrow />}
>
<CollapseItem title={translated.title1} name="1">
{translated.content1}
......@@ -172,7 +171,7 @@ const CollapseDemo = () => {
</CollapseItem>
</Collapse>
<h2>{translated.header3}</h2>
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title={translated.title1}
name="1"
......@@ -188,38 +187,66 @@ const CollapseDemo = () => {
</CollapseItem>
</Collapse>
<h2>{translated.header4}</h2>
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title={translated.title1} name="1" icon="arrow-down">
<Collapse
activeName={['1']}
accordion
expandIcon={<DownArrow />}
rotate={90}
>
<CollapseItem
title={translated.title1}
name="1"
expandIcon={<Checked />}
>
{translated.content1}
</CollapseItem>
<CollapseItem title={translated.title2} name="2" icon="arrow-down">
<CollapseItem
title={translated.title2}
name="2"
expandIcon={<HeartFill />}
>
{translated.content2}
</CollapseItem>
<CollapseItem title={translated.title3} name="3" icon="arrow-down">
<CollapseItem title={translated.title3} name="3">
{translated.content3}
</CollapseItem>
</Collapse>
<h2>{translated.header5}</h2>
<Collapse activeName={['1']} accordion icon="star">
<Collapse activeName={['1']} accordion expandIcon={<Star />}>
<CollapseItem
title={translated.title1}
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />
{translated.title1}
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconPosition="left"
>
{translated.content1}
</CollapseItem>
<CollapseItem
title={translated.title2}
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
{translated.title2}
<HeartFill color="red" />
</div>
}
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
>
{translated.content2}
</CollapseItem>
<CollapseItem title={translated.title3} name="3" icon="arrow-down">
<CollapseItem title={translated.title3} name="3">
{translated.content3}
</CollapseItem>
</Collapse>
......
src/packages/collapse/doc.en-US.md
浏览文件 @ a7de584e
......@@ -19,12 +19,13 @@ import { Collapse, CollapseItem } from 'nutui-react'
:::demo
```jsx
import React from "react";
import { Collapse,CollapseItem } from '@nutui/nutui-react';
import { Collapse, CollapseItem } from '@nutui/nutui-react';
import { DownArrow } from '@nutui/icons-react';
const App = () => {
return (
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="title1" name="1">
Nutui-React is a lightweight React component library with JD style
</CollapseItem>
......@@ -46,7 +47,7 @@ export default App;
:::demo
```tsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
const App = () => {
const changeEnv = (isOpen: boolean, name: string) => {
......@@ -75,11 +76,12 @@ export default App;
:::demo
```tsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem} from '@nutui/nutui-react'
import { DownArrow } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem title="title1" name="1" subTitle="文本内容">
Nutui-React is a lightweight React component library with JD style
</CollapseItem>
......@@ -100,18 +102,19 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title="title1" name="1" icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />} rotate={90}>
<CollapseItem title="title1" name="1" expandIcon={<Checked />}>
Nutui-React is a lightweight React component library with JD style
</CollapseItem>
<CollapseItem title="title2" name="2" icon="arrow-down">
<CollapseItem title="title2" name="2" expandIcon={<HeartFill />}>
The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
</CollapseItem>
<CollapseItem title="title3" name="3" icon="arrow-down">
<CollapseItem title="title3" name="3">
Full use of typescipt
</CollapseItem>
</Collapse>
......@@ -120,36 +123,49 @@ const App = () => {
export default App;
```
:::
### Custom title Icon
### Custom title & subTitle
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title="title1"
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />title1
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconColor="red"
titleIconPosition="left"
>
Nutui-React is a lightweight React component library with JD style
</CollapseItem>
<CollapseItem
title="title2"
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
title2<HeartFill color="red" />
</div>
}
>
The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
</CollapseItem>
<CollapseItem title="title3" name="3" icon="arrow-down">
<CollapseItem title="title3" name="3">
Full use of typescipt
</CollapseItem>
</Collapse>
......@@ -163,7 +179,7 @@ export default App;
:::demo
```jsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem, Button } from '@nutui/nutui-react'
const App = () => {
const [currIndex, setCurrIndex] = useState(2)
......@@ -219,7 +235,7 @@ const App = () => {
)
})}
</Collapse>
<button type="button" onClick={() => changeData()}>点击我</button>
<Button type="button" onClick={() => changeData()}>点击我</Button>
</>
)
}
......@@ -236,10 +252,11 @@ const App = () => {
|--------------|----------------------------------|--------|------------------|
| activeName | Of the currently expanded panel name | Accordion mode：string \| number Non accordion mode：(string \| number)[] | - |
| accordion | Whether to turn on accordion mode | boolean | `false` |
| icon | Icon link and / or icon using nutui | string | - |
| iconSize | Icon size | string | `16px` |
| iconColor | Icon color | string | - |
| rotate | Click the rotation angle of collapse and expansion to take effect in the custom icon mode| string \| number | `180` |
| expandIcon`v1.5.0` | Icon | ReactNode | - |
| icon`v1.5.0 deprecated` | use expandIcon | string | - |
| iconSize`v1.5.0 deprecated` | Icon size | string | `16px` |
| iconColor`v1.5.0 deprecated` | Icon color | string | - |
### CollapseItem Prop
......@@ -247,13 +264,13 @@ const App = () => {
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| name | unique identifier, required |string \| number | - |
| title | the content on the left side of the title bar supports slot incoming (props incoming has higher priority) | string | - |
| title | the content on the left side of the title bar supports slot incoming (props incoming has higher priority) | ReactNode | - |
| disabled | whether the title bar is disabled | boolean | `false` |
| subTitle | subtitle of title bar, support slot incoming (props incoming has higher priority) | string | - |
| titleIcon | Icon link and / or icon using nutui | string | - |
| titleIconColor | Icon color of title | string | - |
| titleIconSize | Icon size of title | string | - |
| titleIconPosition | Icon position of title | string | - |
| subTitle | subtitle of title bar, support slot incoming (props incoming has higher priority) | ReactNode | - |
| titleIcon`v1.5.0 deprecated` | Icon link and / or icon using nutui | string | - |
| titleIconColor`v1.5.0 deprecated` | Icon color of title | string | - |
| titleIconSize`v1.5.0 deprecated` | Icon size of title | string | - |
| titleIconPosition`v1.5.0 deprecated` | Icon position of title | string | - |
......
src/packages/collapse/doc.md
浏览文件 @ a7de584e
......@@ -19,12 +19,13 @@ import { Collapse, CollapseItem } from 'nutui-react'
:::demo
```jsx
import React from "react";
import { Collapse,CollapseItem } from '@nutui/nutui-react';
import { Collapse, CollapseItem } from '@nutui/nutui-react';
import { DownArrow } from '@nutui/icons-react';
const App = () => {
return (
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -46,7 +47,8 @@ export default App;
:::demo
```tsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem} from '@nutui/nutui-react'
import { DownArrow } from '@nutui/icons-react'
const App = () => {
const changeEnv = (isOpen: boolean, name: string) => {
......@@ -75,11 +77,12 @@ export default App;
:::demo
```tsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem} from '@nutui/nutui-react'
import { DownArrow } from '@nutui/icons-react'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1" subTitle="文本内容">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -100,18 +103,19 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem} from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title="标题1" name="1" icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />} rotate={90}>
<CollapseItem title="标题1" name="1" expandIcon={<Checked />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
<CollapseItem title="标题2" name="2" expandIcon={<HeartFill />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......@@ -120,36 +124,49 @@ const App = () => {
export default App;
```
:::
### 自定义title图标
### 自定义 title 与 subTitle
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem, Button} from '@nutui/nutui-react'
import { Collapse, CollapseItem, Button} from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title="标题1"
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />标题1
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconColor="red"
titleIconPosition="left"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem
title="标题2"
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
标题2<HeartFill color="red" />
</div>
}
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......@@ -163,7 +180,7 @@ export default App;
:::demo
```jsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem,Button} from '@nutui/nutui-react'
import { Collapse, CollapseItem, Button } from '@nutui/nutui-react'
const oldDate = [
{
......@@ -247,10 +264,11 @@ const App = () => {
|--------------|----------------------------------|--------|------------------|
| activeName | 当前展开面板的 name | 手风琴模式：string \| number 非手风琴模式：(string \| number)[] | - |
| accordion | 是否开启手风琴模式 | boolean | `false` |
| icon | 图标链接/或使用 NutUI 的 icon | string | - |
| iconSize | 图标大小 | string | `16px` |
| iconColor | 图标颜色 | string | - |
| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效| string \| number | `180` |
| expandIcon`v1.5.0` | 自定义展开图标 | ReactNode | - |
| icon`v1.5.0 废弃` | 使用 expandIcon | string | - |
| iconSize`v1.5.0 废弃` | 图标大小 | string | `16px` |
| iconColor`v1.5.0 废弃` | 图标颜色 | string | - |
### CollapseItem Prop
......@@ -258,13 +276,13 @@ const App = () => {
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| name | 唯一标识符，必填 |string \| number | - |
| title | 标题栏左侧内容 | string | - |
| title | 标题栏左侧内容 | ReactNode | - |
| disabled | 标题栏是否禁用 | boolean | `false` |
| subTitle | 标题栏副标题 | string | - |
| titleIcon | 标题图标链接/或使用 NutUI 的 icon | string | - |
| titleIconColor | 标题图标颜色 | string | - |
| titleIconSize | 标题图标大小 | string | - |
| titleIconPosition | 标题图标位置 | string | - |
| subTitle | 标题栏副标题 | ReactNode | - |
| titleIcon`v1.5.0 废弃` | 标题图标链接/或使用 NutUI 的 icon | string | - |
| titleIconColor`v1.5.0 废弃` | 标题图标颜色 | string | - |
| titleIconSize`v1.5.0 废弃` | 标题图标大小 | string | - |
| titleIconPosition`v1.5.0 废弃` | 标题图标位置 | string | - |
......
src/packages/collapse/doc.taro.md
浏览文件 @ a7de584e
......@@ -18,12 +18,13 @@ import { Collapse, CollapseItem } from 'nutui-react-taro'
:::demo
```jsx
import React from "react";
import { Collapse,CollapseItem } from '@nutui/nutui-react-taro';
import { Collapse, CollapseItem } from '@nutui/nutui-react-taro';
import { DownArrow } from '@nutui/icons-react-taro'
const App = () => {
return (
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -45,7 +46,7 @@ export default App;
:::demo
```tsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react-taro'
import { Collapse, CollapseItem} from '@nutui/nutui-react-taro'
const App = () => {
const changeEnv = (isOpen: boolean, name: string) => {
......@@ -74,11 +75,12 @@ export default App;
:::demo
```tsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react-taro'
import { Collapse, CollapseItem} from '@nutui/nutui-react-taro'
import { DownArrow } from '@nutui/icons-react-taro'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem title="标题1" name="1" subTitle="文本内容">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
......@@ -99,18 +101,19 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react-taro'
import { Collapse, CollapseItem} from '@nutui/nutui-react-taro'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react-taro'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title="标题1" name="1" icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />} rotate={90}>
<CollapseItem title="标题1" name="1" expandIcon={<Checked />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
<CollapseItem title="标题2" name="2" expandIcon={<HeartFill />}>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......@@ -124,31 +127,44 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem, Button} from '@nutui/nutui-react-taro'
import { Collapse, CollapseItem } from '@nutui/nutui-react-taro'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react-taro'
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title="标题1"
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />标题1
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconColor="red"
titleIconPosition="left"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem
title="标题2"
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
标题2<HeartFill color="red" />
</div>
}
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
......@@ -162,7 +178,8 @@ export default App;
:::demo
```jsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem,Button} from '@nutui/nutui-react-taro'
import { Collapse, CollapseItem, Button} from '@nutui/nutui-react-taro'
import { DownArrow } from '@nutui/icons-react-taro'
const oldDate = [
{
......@@ -246,10 +263,11 @@ const App = () => {
|--------------|----------------------------------|--------|------------------|
| activeName | 当前展开面板的 name | 手风琴模式：string \| number 非手风琴模式：(string \| number)[] | - |
| accordion | 是否开启手风琴模式 | boolean | `false` |
| icon | 图标链接/或使用 NutUI 的 icon | string | - |
| iconSize | 图标大小 | string | `16px` |
| iconColor | 图标颜色 | string | - |
| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效| string \| number | `180` |
| expandIcon`v1.5.0` | 自定义展开图标 | ReactNode | - |
| icon`v1.5.0 废弃` | 使用 expandIcon | string | - |
| iconSize`v1.5.0 废弃` | 图标大小 | string | `16px` |
| iconColor`v1.5.0 废弃` | 图标颜色 | string | - |
### CollapseItem Prop
......@@ -257,13 +275,13 @@ const App = () => {
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| name | 唯一标识符，必填 |string \| number | - |
| title | 标题栏左侧内容 | string | - |
| title | 标题栏左侧内容 | ReactNode | - |
| disabled | 标题栏是否禁用 | boolean | `false` |
| subTitle | 标题栏副标题 | string | - |
| titleIcon | 标题图标链接/或使用 NutUI 的 icon | string | - |
| titleIconColor | 标题图标颜色 | string | - |
| titleIconSize | 标题图标大小 | string | - |
| titleIconPosition | 标题图标位置 | string | - |
| subTitle | 标题栏副标题 | ReactNode | - |
| titleIcon`v1.5.0 废弃` | 标题图标链接/或使用 NutUI 的 icon | string | - |
| titleIconColor`v1.5.0 废弃` | 标题图标颜色 | string | - |
| titleIconSize`v1.5.0 废弃` | 标题图标大小 | string | - |
| titleIconPosition`v1.5.0 废弃` | 标题图标位置 | string | - |
......
src/packages/collapse/doc.zh-TW.md
浏览文件 @ a7de584e
......@@ -19,12 +19,13 @@ import { Collapse, CollapseItem } from 'nutui-react'
:::demo
```jsx
import React from "react";
import { Collapse,CollapseItem } from '@nutui/nutui-react';
import { Collapse, CollapseItem } from '@nutui/nutui-react';
import { DownArrow } from '@nutui/icons-react';
const App = () => {
return (
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<Collapse activeName={['1', '2']} expandIcon={<DownArrow />}>
<CollapseItem title="標題1" name="1">
Nutui-React 是一套擁有京東風格的輕量級的 React 組件庫
</CollapseItem>
......@@ -46,7 +47,7 @@ export default App;
:::demo
```tsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
const App = () => {
const changeEnv = (isOpen: boolean, name: string) => {
......@@ -75,11 +76,12 @@ export default App;
:::demo
```tsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
import { DownArrow } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem title="標題1" name="1" subTitle="文本内容">
Nutui-React 是一套擁有京東風格的輕量級的 React 組件庫
</CollapseItem>
......@@ -100,18 +102,19 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={90}>
<CollapseItem title="标题1" name="1" icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />} rotate={90}>
<CollapseItem title="标题1" name="1" expandIcon={<Checked />}>
Nutui-React 是一套擁有京東風格的輕量級的 React 組件庫
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
<CollapseItem title="标题2" name="2" expandIcon={<HeartFill />}>
在產品的功能、體驗、易用性和靈活性等各個方面做了全面的升級！
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
全面使用 TypeScipt
</CollapseItem>
</Collapse>
......@@ -125,31 +128,44 @@ export default App;
:::demo
```jsx
import React from 'react'
import { Collapse ,CollapseItem} from '@nutui/nutui-react'
import { Collapse, CollapseItem } from '@nutui/nutui-react'
import { DownArrow, Checked, HeartFill } from '@nutui/icons-react';
const App = () => {
return (
<Collapse activeName={['1']} accordion icon="arrow-down">
<Collapse activeName={['1']} accordion expandIcon={<DownArrow />}>
<CollapseItem
title="标题1"
title={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Checked />标题1
</div>
}
name="1"
titleIcon="checked"
titleIconSize="16"
titleIconColor="red"
titleIconPosition="left"
>
Nutui-React 是一套擁有京東風格的輕量級的 React 組件庫
</CollapseItem>
<CollapseItem
title="标题2"
name="2"
titleIcon="heart-fill"
titleIconColor="red"
titleIconPosition="right"
subTitle={
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
标题2<HeartFill color="red" />
</div>
}
>
在產品的功能、體驗、易用性和靈活性等各個方面做了全面的升級！
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
<CollapseItem title="标题3" name="3">
全面使用 TypeScipt
</CollapseItem>
</Collapse>
......@@ -163,7 +179,7 @@ export default App;
:::demo
```jsx
import React, { useState } from 'react'
import { Collapse ,CollapseItem,Button} from '@nutui/nutui-react'
import { Collapse, CollapseItem, Button} from '@nutui/nutui-react'
const App = () => {
const [currIndex, setCurrIndex] = useState(2)
......@@ -241,10 +257,11 @@ const App = () => {
|--------------|----------------------------------|--------|------------------|
| activeName |當前展開面板的 name | 手風琴模式：string \| number 非手風琴模式：(string \| number)[] | - |
| accordion | 是否開啟手風琴模式 | boolean | `false` |
| icon | 圖標鏈接/或使用 NutUI 的 icon | string | - |
| iconSize | 圖標大小 | string | `16px` |
| iconColor | 圖標顏色 | string | - |
| rotate | 點擊折疊和展開的旋轉角度,在自定義圖標模式下生效| string \| number | `180` |
| expandIcon`v1.5.0` | Icon | ReactNode | - |
| icon`v1.5.0 廢棄` | 使用 expandIcon | string | - |
| iconSize`v1.5.0 廢棄` | 圖標大小 | string | `16px` |
| iconColor`v1.5.0 廢棄` | 圖標顏色 | string | - |
### CollapseItem Prop
......@@ -252,13 +269,13 @@ const App = () => {
| 參數 | 說明 | 類型 | 默認值 |
|--------------|----------------------------------|--------|------------------|
| name | 唯一標識符，必填 |string \| number | - |
| title | 標題欄左側內容 | string | - |
| title | 標題欄左側內容 | ReactNode | - |
| disabled | 標題欄是否禁用 | boolean | `false` |
| subTitle | 標題欄副標題 | string | - |
| titleIcon | 標題圖標鏈接/或使用 NutUI 的 icon | string | - |
| titleIconColor |標題圖標顏色 | string | - |
| titleIconSize | 標題圖標大小 | string | - |
| titleIconPosition | 標題圖標位置 | string | - |
| subTitle | 標題欄副標題 | ReactNode | - |
| titleIcon`v1.5.0 廢棄` | 標題圖標鏈接/或使用 NutUI 的 icon | string | - |
| titleIconColor`v1.5.0 廢棄` |標題圖標顏色 | string | - |
| titleIconSize`v1.5.0 廢棄` | 標題圖標大小 | string | - |
| titleIconPosition`v1.5.0 廢棄` | 標題圖標位置 | string | - |
......
src/packages/collapseitem/collapseitem.taro.tsx
浏览文件 @ a7de584e
......@@ -3,48 +3,37 @@ import React, {
useEffect,
useState,
useCallback,
ReactNode,
} from 'react'
import bem from '@/utils/bem'
import Icon from '@/packages/icon/index.taro'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
export interface CollapseItemProps extends BasicComponent {
title: string
title: ReactNode
name: string
isOpen: boolean
icon: string
iconSize: string
iconColor: string
expandIcon: ReactNode
disabled: boolean
rotate: number
subTitle: string
titleIcon: string
titleIconColor: string
titleIconPosition: string
titleIconSize: string
subTitle: ReactNode
onToggle: (isOpen: boolean, name: string) => void
}
const defaultProps = {
...ComponentDefaults,
title: '',
title: null,
name: '',
isOpen: false,
icon: '',
iconSize: '',
iconColor: '',
expandIcon: null,
disabled: false,
rotate: 180,
subTitle: '',
titleIcon: '',
titleIconColor: '',
titleIconPosition: '',
titleIconSize: '',
subTitle: null,
} as CollapseItemProps
export const CollapseItem: FunctionComponent<
Partial<CollapseItemProps> & React.HTMLAttributes<HTMLDivElement>
Partial<CollapseItemProps> &
Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
> = (props) => {
const {
children,
......@@ -53,17 +42,9 @@ export const CollapseItem: FunctionComponent<
onToggle,
name,
disabled,
icon,
expandIcon,
rotate,
subTitle,
titleIcon,
titleIconColor,
titleIconPosition,
titleIconSize,
iconSize,
iconColor,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -117,41 +98,11 @@ export const CollapseItem: FunctionComponent<
onToggle && onToggle(isOpen, name)
}}
>
<div className={colBem('title')}>
{titleIcon && titleIconPosition === 'left' && (
<b className={colBem('title-icon-left')}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={titleIcon}
size={titleIconSize}
color={disabled ? '#C2C2C2' : titleIconColor}
/>
</b>
)}
{title}
{titleIcon && titleIconPosition === 'right' && (
<b className={colBem('title-icon-right')}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={titleIcon}
size={titleIconSize}
color={disabled ? '#C2C2C2' : titleIconColor}
/>
</b>
)}
</div>
<div className={colBem('title')}>{title}</div>
<div className={colBem('sub-title')}>{subTitle}</div>
<div className={colBem('icon-box')}>
<div className={colBem('icon')} style={iconStyle}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={icon}
size={iconSize}
color={disabled ? '#C2C2C2' : iconColor}
/>
{expandIcon}
</div>
</div>
</div>
......
src/packages/collapseitem/collapseitem.tsx
浏览文件 @ a7de584e
......@@ -3,50 +3,38 @@ import React, {
useEffect,
useState,
useCallback,
ReactNode,
} from 'react'
import bem from '@/utils/bem'
import Icon from '@/packages/icon'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { BasicComponent } from '@/utils/typings'
export interface CollapseItemProps extends BasicComponent {
title: string
title: ReactNode
name: string
isOpen: boolean
icon: string
iconSize: string
iconColor: string
expandIcon: ReactNode
disabled: boolean
rotate: number
subTitle: string
titleIcon: string
titleIconColor: string
titleIconPosition: string
titleIconSize: string
subTitle: ReactNode
childnull: boolean
onToggle: (isOpen: boolean, name: string) => void
}
const defaultProps = {
...ComponentDefaults,
title: '',
title: null,
name: '',
isOpen: false,
icon: '',
iconSize: '',
iconColor: '',
expandIcon: null,
disabled: false,
rotate: 180,
subTitle: '',
titleIcon: '',
titleIconColor: '',
titleIconPosition: '',
titleIconSize: '',
subTitle: null,
childnull: true,
} as CollapseItemProps
export const CollapseItem: FunctionComponent<
Partial<CollapseItemProps> & React.HTMLAttributes<HTMLDivElement>
Partial<CollapseItemProps> &
Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
> = (props) => {
const {
children,
......@@ -55,18 +43,10 @@ export const CollapseItem: FunctionComponent<
onToggle,
name,
disabled,
icon,
expandIcon,
rotate,
subTitle,
titleIcon,
titleIconColor,
titleIconPosition,
titleIconSize,
iconSize,
iconColor,
childnull,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -121,41 +101,11 @@ export const CollapseItem: FunctionComponent<
onToggle && onToggle(isOpen, name)
}}
>
<div className={colBem('title')}>
{titleIcon && titleIconPosition === 'left' && (
<b className={colBem('title-icon-left')}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={titleIcon}
size={titleIconSize}
color={disabled ? '#C2C2C2' : titleIconColor}
/>
</b>
)}
{title}
{titleIcon && titleIconPosition === 'right' && (
<b className={colBem('title-icon-right')}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={titleIcon}
size={titleIconSize}
color={disabled ? '#C2C2C2' : titleIconColor}
/>
</b>
)}
</div>
<div className={colBem('title')}>{title}</div>
<div className={colBem('sub-title')}>{subTitle}</div>
<div className={colBem('icon-box')}>
<div className={colBem('icon')} style={iconStyle}>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={icon}
size={iconSize}
color={disabled ? '#C2C2C2' : iconColor}
/>
{expandIcon}
</div>
</div>
</div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或