Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

提交 af4f8c85 编写于 作者: O oasis-cloud
浏览文件
操作

Merge remote-tracking branch 'origin/main' into chore/iconnode 

# Conflicts:
#	src/packages/table/demo.taro.tsx
#	src/packages/table/demo.tsx
#	src/packages/table/table.taro.tsx
#	src/packages/table/table.tsx
上级 18217539 2730b092
隐藏空白更改
内联 并排
Showing with 585 addition and 66 deletion
src/packages/datepicker/datepicker.taro.tsx
浏览文件 @ af4f8c85
......@@ -22,7 +22,14 @@ export interface DatePickerProps {
modelValue: Date | null
visible: boolean
title: string
type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime'
type:
| 'date'
| 'time'
| 'year-month'
| 'month-day'
| 'datehour'
| 'datetime'
| 'hour-minutes'
isShowChinese: boolean
minuteStep: number
minDate: Date
......@@ -207,6 +214,9 @@ export const DatePicker: FunctionComponent<
case 'year-month':
result = result.slice(0, 2)
break
case 'hour-minutes':
result = result.slice(3, 5)
break
case 'month-day':
result = result.slice(1, 3)
break
......
src/packages/datepicker/datepicker.tsx
浏览文件 @ af4f8c85
......@@ -22,7 +22,14 @@ export interface DatePickerProps {
modelValue: Date | null
visible: boolean
title: string
type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime'
type:
| 'date'
| 'time'
| 'year-month'
| 'month-day'
| 'datehour'
| 'datetime'
| 'hour-minutes'
isShowChinese: boolean
minuteStep: number
minDate: Date
......@@ -206,6 +213,9 @@ export const DatePicker: FunctionComponent<
case 'year-month':
result = result.slice(0, 2)
break
case 'hour-minutes':
result = result.slice(3, 5)
break
case 'month-day':
result = result.slice(1, 3)
break
......
src/packages/datepicker/demo.taro.tsx
浏览文件 @ af4f8c85
import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { Cell, DatePicker } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
interface PickerOption {
text: string | number
......@@ -11,7 +12,77 @@ interface PickerOption {
className?: string | number
}
interface T {
[props: string]: string
}
const DatePickerDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
basic: '选择日期',
showChinese: '显示中文',
mmdd: '选择月日',
showAll: '选择年月日时分',
time: '选择时分秒',
hourMinutes: '选择时分',
format: '格式化选项',
stepMins: '分钟数递增步长设置',
filter: '过滤选项',
setStartEnd: '限制开始结束时间',
chooseDate: '日期时间选择',
chooseTime: '时间选择',
forever: '永远有效',
year: '年',
month: '月',
day: '日',
hour: '时',
min: '分',
seconds: '秒',
},
'zh-TW': {
basic: '選擇日期',
showChinese: '顯示中文',
mmdd: '選擇月日',
showAll: '選擇年月日時分',
time: '選擇時分秒',
hourMinutes: '選擇時分',
format: '格式化选项',
stepMins: '分鐘數遞增步長設置',
filter: '過濾選項',
setStartEnd: '限制開始結束時間',
chooseDate: '日期時間選擇',
chooseTime: '時間選擇',
forever: '永遠有效',
year: '年',
month: '月',
day: '日',
hour: '時',
min: '分',
seconds: '秒',
},
'en-US': {
basic: 'Choose Date',
showChinese: 'Show Chinese',
mmdd: 'Choose Month-Day',
showAll: 'Choose DateTime',
time: 'Choose Time',
hourMinutes: 'Selective time',
format: 'Option Formatter',
stepMins: 'Option Steps',
filter: 'Option Filter',
setStartEnd: 'Limit the start and end time',
chooseDate: 'Choose Time',
chooseTime: 'Choose Time',
forever: 'Forever',
year: 'Year',
month: 'Month',
day: 'Day',
hour: 'Hour',
min: 'Minute',
seconds: 'Second',
},
})
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [desc1, setDesc1] = useState('2012年 01月 01日')
......@@ -21,6 +92,7 @@ const DatePickerDemo = () => {
const [desc5, setDesc5] = useState('2020年 05月 10日 10:10')
const [desc6, setDesc6] = useState('10:10:00')
const [desc7, setDesc7] = useState('2022年05月10日 00时')
const [desc8, setDesc8] = useState('10:10')
const [show1, setShow1] = useState(false)
const [show2, setShow2] = useState(false)
......@@ -29,6 +101,7 @@ const DatePickerDemo = () => {
const [show5, setShow5] = useState(false)
const [show6, setShow6] = useState(false)
const [show7, setShow7] = useState(false)
const [show8, setShow8] = useState(false)
const confirm1 = (values: (string | number)[], options: PickerOption[]) => {
setDesc1(options.map((option) => option.text).join(' '))
......@@ -68,6 +141,10 @@ const DatePickerDemo = () => {
setDesc7(options.map((option) => option.text).join(' '))
}
const confirm8 = (values: (string | number)[], options: PickerOption[]) => {
setDesc8(options.map((option) => option.text).join(':'))
}
const filter = (type: string, options: PickerOption[]) => {
if (type === 'hour') {
return options.filter((option) => Number(option.value) % 6 === 0)
......@@ -82,16 +159,16 @@ const DatePickerDemo = () => {
op.text += ''
break
case 'month':
op.text += '月'
op.text += translated.month
break
case 'day':
op.text += '日'
op.text += translated.day
break
case 'hour':
op.text += '时'
op.text += translated.hour
break
case 'minute':
op.text += '分'
op.text += translated.min
break
default:
op.text += ''
......@@ -103,16 +180,16 @@ const DatePickerDemo = () => {
const op = option
switch (type) {
case 'year':
op.text += `年`
op.text += translated.year
break
case 'month':
op.text += `月`
op.text += translated.month
break
case 'day':
op.text += `日`
op.text += translated.day
break
case 'hour':
op.text += `时`
op.text += translated.hour
break
default:
op.text += ''
......@@ -124,37 +201,57 @@ const DatePickerDemo = () => {
<>
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>选择日期</h2>
<Cell title="显示中文" desc={desc1} onClick={() => setShow1(true)} />
<h2>选择月日</h2>
<h2>{translated.basic}</h2>
<Cell
title={translated.showChinese}
desc={desc1}
onClick={() => setShow1(true)}
/>
<h2>{translated.mmdd}</h2>
<Cell
title="限制开始结束时间"
title={translated.setStartEnd}
desc={desc2}
onClick={() => setShow2(true)}
/>
<h2>选择年月日时分</h2>
<h2>{translated.showAll}</h2>
<Cell
title="日期时间选择"
title={translated.chooseDate}
desc={desc3}
onClick={() => setShow3(true)}
/>
<h2>选择时分秒</h2>
<Cell title="时间选择" desc={desc4} onClick={() => setShow4(true)} />
<h2>格式化选项</h2>
<Cell title="时间选择" desc={desc5} onClick={() => setShow5(true)} />
<h2>分钟数递增步长设置</h2>
<Cell title="时间选择" desc={desc6} onClick={() => setShow6(true)} />
<h2>过滤选项</h2>
<Cell title="时间选择" desc={desc7} onClick={() => setShow7(true)} />
<h2>{translated.time}</h2>
<Cell
title={translated.time}
desc={desc4}
onClick={() => setShow4(true)}
/>
<h2>{translated.hourMinutes}</h2>
<Cell
title={translated.hourMinutes}
desc={desc8}
onClick={() => setShow8(true)}
/>
<h2>{translated.format}</h2>
<Cell
title={translated.time}
desc={desc5}
onClick={() => setShow5(true)}
/>
<h2>{translated.stepMins}</h2>
<Cell
title={translated.time}
desc={desc6}
onClick={() => setShow6(true)}
/>
<h2>{translated.filter}</h2>
<Cell
title={translated.time}
desc={desc7}
onClick={() => setShow7(true)}
/>
{/* 选择日期 */}
<DatePicker
title="日期选择"
title={translated.basic}
visible={show1}
isShowChinese
onCloseDatePicker={() => setShow1(false)}
......@@ -163,7 +260,7 @@ const DatePickerDemo = () => {
/>
{/* 选择月日 */}
<DatePicker
title="日期选择"
title={translated.basic}
minDate={new Date(2022, 0, 1)}
maxDate={new Date(2022, 7, 1)}
type="month-day"
......@@ -173,7 +270,7 @@ const DatePickerDemo = () => {
/>
{/* 选择年月日时分 */}
<DatePicker
title="日期时间选择"
title={translated.chooseDate}
minDate={minDate}
maxDate={maxDate}
visible={show3}
......@@ -183,7 +280,7 @@ const DatePickerDemo = () => {
/>
{/* 选择时分秒 */}
<DatePicker
title="时间选择"
title={translated.chooseTime}
type="time"
minDate={minDate}
maxDate={maxDate}
......@@ -191,10 +288,19 @@ const DatePickerDemo = () => {
onCloseDatePicker={() => setShow4(false)}
onConfirmDatePicker={(values, options) => confirm4(values, options)}
/>
{/* 选择时分 */}
<DatePicker
title={translated.chooseTime}
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values, options) => confirm8(values, options)}
/>
{/* 格式化选项 */}
<DatePicker
title="时间选择"
title={translated.chooseTime}
type="datetime"
minDate={new Date(2022, 0, 1)}
maxDate={new Date(2022, 10, 1)}
......@@ -205,7 +311,7 @@ const DatePickerDemo = () => {
/>
{/* 分钟步长 */}
<DatePicker
title="时间选择"
title={translated.chooseTime}
type="time"
minDate={minDate}
maxDate={maxDate}
......@@ -214,10 +320,9 @@ const DatePickerDemo = () => {
onCloseDatePicker={() => setShow6(false)}
onConfirmDatePicker={(values, options) => confirm6(values, options)}
/>
{/* 过滤选项 */}
<DatePicker
title="时间选择"
title={translated.chooseTime}
type="datehour"
minDate={minDate}
maxDate={maxDate}
......
src/packages/datepicker/demo.tsx
浏览文件 @ af4f8c85
......@@ -23,6 +23,7 @@ const DatePickerDemo = () => {
mmdd: '选择月日',
showAll: '选择年月日时分',
time: '选择时分秒',
hourMinutes: '选择时分',
format: '格式化选项',
stepMins: '分钟数递增步长设置',
filter: '过滤选项',
......@@ -43,6 +44,7 @@ const DatePickerDemo = () => {
mmdd: '選擇月日',
showAll: '選擇年月日時分',
time: '選擇時分秒',
hourMinutes: '選擇時分',
format: '格式化选项',
stepMins: '分鐘數遞增步長設置',
filter: '過濾選項',
......@@ -63,6 +65,7 @@ const DatePickerDemo = () => {
mmdd: 'Choose Month-Day',
showAll: 'Choose DateTime',
time: 'Choose Time',
hourMinutes: 'Selective time',
format: 'Option Formatter',
stepMins: 'Option Steps',
filter: 'Option Filter',
......@@ -88,6 +91,7 @@ const DatePickerDemo = () => {
const [desc5, setDesc5] = useState('2020 05 10 10:10')
const [desc6, setDesc6] = useState('10:10:00')
const [desc7, setDesc7] = useState('2022-05-10 00')
const [desc8, setDesc8] = useState('10:10')
const [show1, setShow1] = useState(false)
const [show2, setShow2] = useState(false)
......@@ -96,6 +100,7 @@ const DatePickerDemo = () => {
const [show5, setShow5] = useState(false)
const [show6, setShow6] = useState(false)
const [show7, setShow7] = useState(false)
const [show8, setShow8] = useState(false)
const confirm1 = (values: (string | number)[], options: PickerOption[]) => {
setDesc1(options.map((option) => option.text).join(' '))
......@@ -135,6 +140,10 @@ const DatePickerDemo = () => {
setDesc7(options.map((option) => option.text).join(' '))
}
const confirm8 = (values: (string | number)[], options: PickerOption[]) => {
setDesc8(options.map((option) => option.text).join(':'))
}
const filter = (type: string, options: PickerOption[]) => {
if (type === 'hour') {
return options.filter((option) => Number(option.value) % 6 === 0)
......@@ -202,42 +211,42 @@ const DatePickerDemo = () => {
desc={desc2}
onClick={() => setShow2(true)}
/>
<h2>{translated.showAll}</h2>
<Cell
title={translated.chooseDate}
desc={desc3}
onClick={() => setShow3(true)}
/>
<h2>{translated.time}</h2>
<Cell
title={translated.time}
desc={desc4}
onClick={() => setShow4(true)}
/>
<h2>{translated.hourMinutes}</h2>
<Cell
title={translated.hourMinutes}
desc={desc8}
onClick={() => setShow8(true)}
/>
<h2>{translated.format}</h2>
<Cell
title={translated.time}
desc={desc5}
onClick={() => setShow5(true)}
/>
<h2>{translated.stepMins}</h2>
<Cell
title={translated.time}
desc={desc6}
onClick={() => setShow6(true)}
/>
<h2>{translated.filter}</h2>
<Cell
title={translated.time}
desc={desc7}
onClick={() => setShow7(true)}
/>
{/* 选择日期 */}
<DatePicker
title={translated.basic}
......@@ -277,7 +286,16 @@ const DatePickerDemo = () => {
onCloseDatePicker={() => setShow4(false)}
onConfirmDatePicker={(values, options) => confirm4(values, options)}
/>
{/* 选择时分 */}
<DatePicker
title={translated.chooseTime}
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values, options) => confirm8(values, options)}
/>
{/* 格式化选项 */}
<DatePicker
title={translated.chooseTime}
......@@ -300,7 +318,6 @@ const DatePickerDemo = () => {
onCloseDatePicker={() => setShow6(false)}
onConfirmDatePicker={(values, options) => confirm6(values, options)}
/>
{/* 过滤选项 */}
<DatePicker
title={translated.chooseTime}
......
src/packages/datepicker/doc.en-US.md
浏览文件 @ af4f8c85
......@@ -142,6 +142,41 @@ const App = () => {
};
export default App;
```
:::
### Selective time
:::demo
```tsx
import React, { useState } from "react";
import { DatePicker,Cell } from '@nutui/nutui-react';
const App = () => {
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [show8, setShow8] = useState(false)
const [desc8, setDesc8] = useState('10:10')
const confirm4 = (values:(string|number)[],options:PickerOption[])=>{
setDesc4(options.map((option) => option.text).join(':'))
}
return (
<>
<Cell title="Choose Time" desc={desc8} onClick={() => setShow8(true)} />
<DatePicker
title="Choose Time"
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values,options) => confirm8(values,options)}
/>
</>
);
};
export default App;
```
:::
### Option Formatter
......@@ -319,7 +354,7 @@ export default App;
|---------------------------|---------------------------------------------------|---------|----------|
| modelValue | Default Date | Date | `null` |
| visible | Is Show | boolean | `false` |
| type | Can be set to date time year-month month-day datehour | string | `date` |
| type | Can be set to date time year-month month-day datehour hour-minutes | string | `date` |
| minuteStep | Option minute step | number | `1` |
| isShowChinese | Show Chinese | boolean | `false` |
| title | Title | string | `null` |
......
src/packages/datepicker/doc.md
浏览文件 @ af4f8c85
......@@ -148,6 +148,42 @@ export default App;
```
:::
### 选择时分
:::demo
```tsx
import React, { useState } from "react";
import { DatePicker,Cell } from '@nutui/nutui-react';
const App = () => {
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [show8, setShow8] = useState(false)
const [desc8, setDesc8] = useState('10:10')
const confirm4 = (values:(string|number)[],options:PickerOption[])=>{
setDesc4(options.map((option) => option.text).join(':'))
}
return (
<>
<Cell title="时间选择" desc={desc8} onClick={() => setShow8(true)} />
<DatePicker
title="时间选择"
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values,options) => confirm8(values,options)}
/>
</>
);
};
export default App;
```
:::
### 格式化选项
通过传入 formatter 函数，可以对选项文字进行格式化处理。 isShowChinese 属性同样是也为选项后面添加文案，但 formatter 函数的优先级高于 isShowChinese 属性。
......@@ -326,7 +362,7 @@ export default App;
|---------------------------|---------------------------------------------------|---------|----------|
| modelValue | 初始值 | Date | `null` |
| visible | 是否可见 | boolean | `false` |
| type | 类时间类型，可选值 date time year-month month-day datehour datetime | string | `date` |
| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | string | `date` |
| minuteStep | 分钟步进值 | number | `1` |
| isShowChinese | 每列是否展示中文 | boolean | `false` |
| title | 设置标题 | string | `null` |
......
src/packages/datepicker/doc.taro.md
浏览文件 @ af4f8c85
......@@ -147,6 +147,42 @@ export default App;
```
:::
### 选择时分
:::demo
```tsx
import React, { useState } from "react";
import { DatePicker,Cell } from '@nutui/nutui-react-taro';
const App = () => {
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [show8, setShow8] = useState(false)
const [desc8, setDesc8] = useState('10:10')
const confirm4 = (values:(string|number)[],options:PickerOption[])=>{
setDesc4(options.map((option) => option.text).join(':'))
}
return (
<>
<Cell title="时间选择" desc={desc8} onClick={() => setShow8(true)} />
<DatePicker
title="时间选择"
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values,options) => confirm8(values,options)}
/>
</>
);
};
export default App;
```
:::
### 格式化选项
通过传入 formatter 函数，可以对选项文字进行格式化处理。 isShowChinese 属性同样是也为选项后面添加文案，但 formatter 函数的优先级高于 isShowChinese 属性。
......@@ -325,7 +361,7 @@ export default App;
|---------------------------|---------------------------------------------------|---------|----------|
| modelValue | 初始值 | Date | `null` |
| visible | 是否可见 | boolean | `false` |
| type | 类时间类型，可选值 date time year-month month-day datehour datetime | string | `date` |
| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | string | `date` |
| minuteStep | 分钟步进值 | number | `1` |
| isShowChinese | 每列是否展示中文 | boolean | `false` |
| title | 设置标题 | string | `null` |
......
src/packages/datepicker/doc.zh-TW.md
浏览文件 @ af4f8c85
......@@ -146,6 +146,41 @@ const App = () => {
};
export default App;
```
:::
### 選擇時分
:::demo
```tsx
import React, { useState } from "react";
import { DatePicker,Cell } from '@nutui/nutui-react';
const App = () => {
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [show8, setShow8] = useState(false)
const [desc8, setDesc8] = useState('10:10')
const confirm4 = (values:(string|number)[],options:PickerOption[])=>{
setDesc4(options.map((option) => option.text).join(':'))
}
return (
<>
<Cell title="時間選擇" desc={desc8} onClick={() => setShow8(true)} />
<DatePicker
title="時間選擇"
type="hour-minutes"
minDate={minDate}
maxDate={maxDate}
visible={show8}
onCloseDatePicker={() => setShow8(false)}
onConfirmDatePicker={(values,options) => confirm8(values,options)}
/>
</>
);
};
export default App;
```
:::
### 格式化選項
......@@ -326,7 +361,7 @@ export default App;
|---------------------------|---------------------------------------------------|---------|----------|
| modelValue | 初始值 | Date | `null` |
| visible | 是否可見 | boolean | `false` |
| type | 類時間類型，可選值 date time year-month month-day datehour datetime | string | `date` |
| type | 類時間類型，可選值 date time year-month month-day datehour datetime hour-minutes | string | `date` |
| minuteStep | 分鐘步進值 | number | `1` |
| isShowChinese | 每列是否展示中文 | boolean | `false` |
| title | 設置標題 | string | `null` |
......
src/packages/searchbar/searchbar.taro.tsx
浏览文件 @ af4f8c85
......@@ -133,10 +133,16 @@ export const SearchBar: FunctionComponent<
const alignClass = `${align}`
const forceFocus = () => {
const searchSelf: HTMLInputElement | null = searchRef.current
searchSelf && searchSelf.focus()
}
const change = (event: Event) => {
const { value } = event.target as any
onChange && onChange?.(value, event)
setValue(value)
value === '' && forceFocus()
}
const focus = (event: Event) => {
const { value } = event.target as any
......@@ -154,10 +160,7 @@ export const SearchBar: FunctionComponent<
}, [props.value])
useEffect(() => {
if (autoFocus) {
const searchSelf: HTMLInputElement | null = searchRef.current
searchSelf && searchSelf.focus()
}
autoFocus && forceFocus()
}, [autoFocus])
const renderField = () => {
......@@ -269,6 +272,7 @@ export const SearchBar: FunctionComponent<
}
setValue('')
onClear && onClear(event)
forceFocus()
}
const renderRightLabel = () => {
......
src/packages/searchbar/searchbar.tsx
浏览文件 @ af4f8c85
......@@ -132,6 +132,11 @@ export const SearchBar: FunctionComponent<
const alignClass = `${align}`
const forceFocus = () => {
const searchSelf: HTMLInputElement | null = searchRef.current
searchSelf && searchSelf.focus()
}
const change = (event: Event) => {
const { value } = event.target as any
onChange && onChange?.(value, event)
......@@ -153,10 +158,7 @@ export const SearchBar: FunctionComponent<
}, [props.value])
useEffect(() => {
if (autoFocus) {
const searchSelf: HTMLInputElement | null = searchRef.current
searchSelf && searchSelf.focus()
}
autoFocus && forceFocus()
}, [autoFocus])
const renderField = () => {
......@@ -268,6 +270,7 @@ export const SearchBar: FunctionComponent<
}
setValue('')
onClear && onClear(event)
forceFocus()
}
const renderRightLabel = () => {
......
src/packages/table/demo.taro.tsx
浏览文件 @ af4f8c85
......@@ -4,6 +4,7 @@ import { Dongdong, TriangleDown } from '@nutui/icons-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Button, Toast, Table } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
interface T {
basic: string
......@@ -17,6 +18,7 @@ interface T {
asynchronousRendering: string
sorting: string
sorterIcon: string
hideHeader: string
}
interface TableColumnProps {
......@@ -35,6 +37,7 @@ const TableDemo = () => {
summaryTitle: '显示总结栏',
summary: '这是总结栏',
striped: '条纹、明暗交替',
hideHeader: '隐藏表头',
noDataTitle: '无数据默认展示，支持自定义',
customNoData: '这里是自定义展示',
customCell: '自定义单元格',
......@@ -48,6 +51,7 @@ const TableDemo = () => {
summaryTitle: 'Show summary bar',
summary: 'This is the summary column',
striped: 'Stripes, alternating light and shade',
hideHeader: 'Hide table header',
noDataTitle:
'No data is displayed by default, and customization is supported',
customNoData: 'Here is the custom display',
......@@ -279,6 +283,13 @@ const TableDemo = () => {
style={{ background: '#fff' }}
striped
/>
<h2>{translated.hideHeader}</h2>
<Table
columns={columns1}
data={data1}
style={{ background: '#fff' }}
showHeader={false}
/>
<h2>{translated.noDataTitle}</h2>
<Table columns={columns1} data={data2} style={{ background: '#fff' }} />
<Table
......
src/packages/table/demo.tsx
浏览文件 @ af4f8c85
......@@ -18,6 +18,7 @@ interface T {
asynchronousRendering: string
sorting: string
sorterIcon: string
hideHeader: string
}
const TableDemo = () => {
......@@ -28,6 +29,7 @@ const TableDemo = () => {
summaryTitle: '显示总结栏',
summary: '这是总结栏',
striped: '条纹、明暗交替',
hideHeader: '隐藏表头',
noDataTitle: '无数据默认展示，支持自定义',
customNoData: '这里是自定义展示',
customCell: '自定义单元格',
......@@ -41,6 +43,7 @@ const TableDemo = () => {
summaryTitle: 'Show summary bar',
summary: 'This is the summary column',
striped: 'Stripes, alternating light and shade',
hideHeader: 'Hide table header',
noDataTitle:
'No data is displayed by default, and customization is supported',
customNoData: 'Here is the custom display',
......@@ -252,6 +255,13 @@ const TableDemo = () => {
style={{ background: '#fff' }}
striped
/>
<h2>{translated.hideHeader}</h2>
<Table
columns={columns1}
data={data1}
style={{ background: '#fff' }}
showHeader={false}
/>
<h2>{translated.noDataTitle}</h2>
<Table columns={columns1} data={data2} style={{ background: '#fff' }} />
<Table
......
src/packages/table/doc.en-US.md
浏览文件 @ af4f8c85
......@@ -255,6 +255,71 @@ export default App;
```
:::
### Hide table header
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react';
interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}
const App = () => {
const [columns1, setColumns1] = useState([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])
const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])
return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::
### No data is displayed by default, and customization is supported
:::demo
```tsx
......@@ -594,6 +659,7 @@ export default App;
| data | Table data | Object[] | `[]` |
| summary | Show profile | ReactNode | - |
| striped | Whether the stripes alternate light and dark | boolean | `false` |
| showHeader`v1.5.0` | Show Header | boolean | `true` |
| noData | Custom noData | ReactNode | - |
| sorterIcon`v1.5.0` | Sort icon | ReactNode | `<DownArrow />` |
......
src/packages/table/doc.md
浏览文件 @ af4f8c85
......@@ -265,6 +265,71 @@ export default App;
```
:::
### 隐藏表头
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react';
interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}
const App = () => {
const [columns1, setColumns1] = useState<Array<TableColumnProps>>([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])
const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])
return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::
### 无数据默认展示，支持自定义
:::demo
```tsx
......@@ -604,6 +669,7 @@ export default App;
| data | 表格数据 | Object[] | `[]` |
| summary | 是否显示简介 | ReactNode | - |
| striped | 条纹是否明暗交替 | boolean | `false` |
| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` |
| noData | 自定义无数据 | ReactNode | - |
### TableColumnProps
......
src/packages/table/doc.taro.md
浏览文件 @ af4f8c85
......@@ -264,6 +264,71 @@ export default App;
```
:::
### 隐藏表头
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react-taro';
interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}
const App = () => {
const [columns1, setColumns1] = useState<Array<TableColumnProps>>([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])
const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])
return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::
### 无数据默认展示，支持自定义
:::demo
```tsx
......@@ -603,6 +668,7 @@ export default App;
| data | 表格数据 | Object[] | `[]` |
| summary | 是否显示简介 | ReactNode | - |
| striped | 条纹是否明暗交替 | boolean | false |
| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` |
| noData | 自定义无数据 | ReactNode | - |
### TableColumnProps
......
src/packages/table/table.taro.tsx
浏览文件 @ af4f8c85
......@@ -18,6 +18,7 @@ const defaultProps = {
striped: false,
noData: '无数据',
sorterIcon: null,
showHeader: true,
} as TableProps
export const Table: FunctionComponent<
Partial<TableProps> & React.HTMLAttributes<HTMLDivElement>
......@@ -37,6 +38,7 @@ export const Table: FunctionComponent<
noData,
sorterIcon,
onSorter,
showHeader,
...rest
} = {
...defaultProps,
......@@ -139,9 +141,11 @@ export const Table: FunctionComponent<
'nut-table__main--striped': striped,
})}
>
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
{showHeader && (
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
)}
<div className="nut-table__main__body">{renderBoyTrs()}</div>
</div>
{summary && (
......
src/packages/table/table.tsx
浏览文件 @ af4f8c85
......@@ -18,6 +18,7 @@ const defaultProps = {
striped: false,
noData: '无数据',
sorterIcon: null,
showHeader: true,
} as TableProps
export const Table: FunctionComponent<
Partial<TableProps> & React.HTMLAttributes<HTMLDivElement>
......@@ -37,6 +38,7 @@ export const Table: FunctionComponent<
noData,
onSorter,
sorterIcon,
showHeader,
...rest
} = {
...defaultProps,
......@@ -140,9 +142,11 @@ export const Table: FunctionComponent<
'nut-table__main--striped': striped,
})}
>
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
{showHeader && (
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
)}
<div className="nut-table__main__body">{renderBoyTrs()}</div>
</div>
{summary && (
......
src/packages/table/types.ts
浏览文件 @ af4f8c85
......@@ -12,6 +12,7 @@ export interface BasicTableProps extends BasicComponent {
noData?: React.ReactNode
sorterIcon?: React.ReactNode
onSorter?: (item: TableColumnProps, data: Array<any>) => void
showHeader?: boolean
}
export interface TableColumnProps {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或