Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

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

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

# Conflicts:
#	package.json
#	src/packages/checkbox/checkbox.taro.tsx
#	src/packages/checkbox/checkbox.tsx
上级 018744eb c7cfe87a
展开全部 隐藏空白更改
内联 并排
Showing with 2100 addition and 1159 deletion
CHANGELOG.md
浏览文件 @ 4857c6fc
# v1.4.9
`2023-03-01`
* :sparkles: feat: cascader 增加checkedIcon属性，增加视觉元素提取，增加自定义样式demo (#719) @xiaoyatong
* :sparkles: feat: checkbox 增加group样式 (#721) @xiaoyatong
* :sparkles: feat: checkbox 支持跨层级使用 (#750) @oasis-cloud
* :sparkles: feat: picker 替换元素变量 (#729) @xiaoyatong
* :sparkles: feat: tabs 增加元素变量应用，修复垂直排列的active状态样式 (#732) @xiaoyatong
* :sparkles: feat: tabs 增加嵌套布局 (#747) @xiaoyatong
* :sparkles: feat: tabs、tabpane 父子组件整合 (#745) @xiaoyatong
* :sparkles: feat: uploader 增加元素变量，及demo (#728) @xiaoyatong
* :sparkles: feat:新增uploader组件taro和h5上传视频和手动清除上传的功能 (#748) @junjun666
* :bug: fix(animatingnumbers): 修复delaySpeed不生效 (#733) @kasonyang
* :bug: fix: badge初始化classname (#722) @xiaoyatong
* :bug: fix: calendar 适配 taro，支持滚动到某个date，支持scrollview (#744) @xiaoyatong
* :bug: fix: datepicker 不展示title (#746) @xiaoyatong
* :bug: fix: popup class undefined (#752) @xiaoyatong
* :bug: fix: taro H5统一增加了页面paddingTop值，Drag组件demo是fixed定位的，需要对应调整 (#731) @irisSong
* :bug: fix: 修复组件可能存在 undefined 类名的情况，补充相应测试快照 (#726) @AnteeHub
* :bug: fix: 组件依赖时，缺少对依赖组件样式的引用 (#741) @xiaoyatong
* 📖 docs(swipe): format api table & remove theme vars (#737) @eiinu
* 📖 docs: 基础组件 API 文档格式化 (#735) @eiinu
* 📖 docs: 导航组件 API 文档格式化 (#740) @eiinu
* 📖 docs: 展示组件 API 文档格式化 (#742) @eiinu
* 📖 docs: 布局组件、特色组件 API 文档格式化 (#736) @eiinu
* 🔨 chore: 重构h5和taro环境下 barrage组件代码并修复loop循环的问题 (#717) @junjun666
# v1.4.8
`2023-02-15`
......
demo.html
浏览文件 @ 4857c6fc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="telephone=no" name="format-detection" />
<link rel="shortcut icon" href="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<link rel="shortcut icon"
href="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<title>NutUI - 移动端React组件库</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<script type="module" src="/src/sites/mobile/main.tsx"></script>
<noscript>
<strong>We're sorry but it doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/sites/mobile/main.tsx"></script>
</body>
</html>
</html>
\ No newline at end of file
index.html
浏览文件 @ 4857c6fc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="telephone=no" name="format-detection" />
<link rel="shortcut icon" href="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"
/>
<link rel="shortcut icon"
href="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>NutUI - 移动端React组件库</title>
<script src="https://h5.m.jd.com/babelDiy/Zeus/2846ykuM7PwipD9E2RzMj2BGEQpA/plugin/share.min.js"></script>
<style>
......@@ -21,10 +20,10 @@
</style>
<!-- Hotjar Tracking Code for nutui.jd.com -->
<script async>
(function(h, o, t, j, a, r) {
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function() {
function () {
(h.hj.q = h.hj.q || []).push(arguments);
};
h._hjSettings = { hjid: 1900179, hjsv: 6 };
......@@ -36,48 +35,45 @@
})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
</script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="doc"></div>
<script type="module" src="./src/sites/doc/main.tsx"></script>
<script>
//分享配置
var shareOption = {
iconUrl: "https://nutui.jd.com/img/logo_share.png",
url: "https://nutui.jd.com/demo.html#/index",
title: "轻量级移动端Vue组件库 - NutUI 3.0",
desc: "京东风格的Vue组件库",
};
<noscript>
<strong>We're sorry but it doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="doc"></div>
<script type="module" src="./src/sites/doc/main.tsx"></script>
<script>
//分享配置
var shareOption = {
iconUrl: "https://nutui.jd.com/img/logo_share.png",
url: "https://nutui.jd.com/demo.html#/index",
title: "轻量级移动端Vue组件库 - NutUI 3.0",
desc: "京东风格的Vue组件库",
};
try {
/*初始化分享*/
share.shareInit(shareOption);
} catch (e) {
console.log(e);
}
</script>
<script type="text/javascript">
var jaq = jaq || [];
jaq.push(["account", "JA2018_1831300"]);
jaq.push(["domain", "jd.com"]);
(function() {
var ja = document.createElement("script");
ja.type = "text/javascript";
ja.async = true;
ja.src = "//wl.jd.com/joya.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ja, s);
})();
</script>
<script
type="text/javascript"
src="https://s23.cnzz.com/z_stat.php?id=1276268086&web_id=1276268086"
></script>
try {
/*初始化分享*/
share.shareInit(shareOption);
} catch (e) {
console.log(e);
}
</script>
<script type="text/javascript">
var jaq = jaq || [];
jaq.push(["account", "JA2018_1831300"]);
jaq.push(["domain", "jd.com"]);
(function () {
var ja = document.createElement("script");
ja.type = "text/javascript";
ja.async = true;
ja.src = "//wl.jd.com/joya.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ja, s);
})();
</script>
<script type="text/javascript" src="https://s23.cnzz.com/z_stat.php?id=1276268086&web_id=1276268086"></script>
</body>
</html>
</html>
\ No newline at end of file
package.json
浏览文件 @ 4857c6fc
{
"name": "@nutui/nutui-react-taro",
"version": "1.4.8",
"version": "1.4.10-beta.0",
"style": "dist/style.css",
"main": "dist/nutui.react.umd.js",
"module": "dist/esm/nutui-react.es.js",
......@@ -51,12 +51,12 @@
"dev": "npm run checked && vite --open --force",
"dev:theme": "npm run generate:themes-dev && npm run checked && vite --force --config vite.config.theme.ts",
"replace:scss": "node scripts/replace-scss-alias.js",
"build:dts": "node scripts/export-props.js && npx rollup -c rollup.config.dts.js",
"build:dts": "node scripts/export-props.js && npx rollup -c rollup.config.dts.mjs",
"build:loader-style": "node scripts/generate-loader-style.js",
"build:component:css": "node scripts/build-component-css.js",
"build:css": "npm run generate:themes && vite build --config vite.config.build.css.ts && npm run build:replace ",
"build:replace": "npm run replace:scss",
"build:es": "npx rollup -c rollup.config.es.js",
"build:es": "npx rollup -c rollup.config.es.js --bundleConfigAsCjs",
"build:locales": "vite build --config vite.config.build.locales.ts",
"build": "npm run checked && vite build --config vite.config.build.ts && npm run build:es && npm run build:css && npm run build:loader-style && npm run build:dts && npm run build:locales",
"build:site": "npm run checked && vite build --config vite.config.build.site.ts",
......@@ -76,12 +76,12 @@
"dev:taro:h5": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:h5",
"replace:taro:types": "node scripts/taro/replace-taro-types-alias.js",
"build:taro": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run build:taro:es && npm run build:css && npm run build:loader-style && npm --taro run build:dts && npm run build:locales",
"build:taro:es": "npx rollup -c rollup.config.taro.es.js",
"build:taro:es": "npx rollup -c rollup.config.taro.es.js --bundleConfigAsCjs",
"build:taro:weapp": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run build:weapp",
"add:taro:config": "node scripts/taro/generate-taro-route.js"
},
"engines": {
"node": "^14.18.0 || >=15.0.0"
"node": ">=16.0.0"
},
"lint-staged": {
"*.md": "prettier --write",
......@@ -92,8 +92,8 @@
"@bem-react/classname": "^1.5.10",
"@nutui/icons-react": "^0.0.1-0",
"@nutui/icons-react-taro": "0.0.1-1",
"@react-spring/web": "^9.3.2",
"@use-gesture/react": "^10.2.9",
"@react-spring/web": "~9.6.1",
"@use-gesture/react": "10.2.20",
"async-validator": "^4.2.5",
"classnames": "^2.3.1",
"lodash.kebabcase": "^4.1.1",
......@@ -178,7 +178,7 @@
"remark-directive": "^2.0.1",
"remark-gfm": "^3.0.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-dts": "^5.0.0",
"sass": "^1.45.0",
"shelljs": "^0.8.4",
"ts-jest": "^27.1.4",
......@@ -186,7 +186,7 @@
"typescript": "^4.8.2",
"unist-util-visit": "^4.1.0",
"vinyl-fs": "^3.0.3",
"vite": "^2.1.5",
"vite": "^4.1.4",
"vite-plugin-dts": "^1.1.1"
},
"peerDependencies": {
......
rollup.config.dts.js → rollup.config.dts.mjs
浏览文件 @ 4857c6fc
......@@ -19,10 +19,10 @@ const config = [
},
},
}),
// del({
// hook: 'buildEnd',
// targets: ['./dist/esm/types', './dist/types/*.build.ts'],
// }),
del({
hook: 'buildEnd',
targets: ['./dist/esm/types', './dist/types/*.build.ts'],
}),
],
},
]
......
src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx
浏览文件 @ 4857c6fc
......@@ -2,11 +2,18 @@ import React from 'react'
import { render, waitFor } from '@testing-library/react'
import '@testing-library/jest-dom'
import { AnimatingNumbers } from '../animatingnumbers'
import { CountUp } from '@/packages/animatingnumbers/countup'
jest.useFakeTimers()
test('test endNumber props', () => {
const { container } = render(<AnimatingNumbers.CountUp endNumber="678.94" />)
const listNumbers = container.querySelectorAll('.nut-countup__number')
expect(listNumbers[0]).toHaveAttribute(
'style',
'transition: transform 1s ease-in-out;'
)
jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
expect(listNumbers[0]).toHaveAttribute(
'style',
'transition: transform 1s ease-in-out; transform: translate(0, -30%); webkit-transform: translate(0, -30%);'
......@@ -26,6 +33,7 @@ test('test aysnc endNumber and easeSpeed props', async () => {
)
const listNumbers = container.querySelectorAll('.nut-countup__number')
expect(listNumbers.length).toBe(8)
jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
expect(listNumbers[0]).toHaveAttribute(
'style',
'transition: transform 1.2s ease-in-out; transform: translate(0, -50%); webkit-transform: translate(0, -50%);'
......
src/packages/animatingnumbers/countup.tsx
浏览文件 @ 4857c6fc
......@@ -2,6 +2,7 @@ import React, {
CSSProperties,
FunctionComponent,
useEffect,
useMemo,
useRef,
} from 'react'
......@@ -54,7 +55,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
return currNumber.split('')
}
const numerArr = getShowNumber()
const numerArr = useMemo(getShowNumber, [endNumber, maxLen, thousands])
const setNumberTransform = () => {
if (countupRef.current) {
......@@ -88,10 +89,6 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
return () => {
window.clearTimeout(timerRef.current)
}
}, [])
useEffect(() => {
setNumberTransform()
}, [numerArr])
return (
......
src/packages/calendar/demo.taro.tsx
浏览文件 @ 4857c6fc
......@@ -89,13 +89,13 @@ const CalendarDemo = () => {
const d = new Date()
const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
const [date, setDate] = useState(currDay)
const [date1, setDate1] = useState(['2020-01-23', '2020-01-26'])
const [date2, setDate2] = useState('2020-07-08')
const [date1, setDate1] = useState(['2023-01-23', '2023-11-26'])
const [date2, setDate2] = useState('2022-12-08')
const [date3, setDate3] = useState('')
const [date4, setDate4] = useState<string[]>([])
const [date5, setDate5] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date6, setDate6] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date7, setDate7] = useState<string[]>(['2021-12-23', '2021-12-26'])
const [date5, setDate5] = useState<string[]>(['2022-11-23', '2024-01-26'])
const [date6, setDate6] = useState<string[]>(['2022-11-23', '2024-01-26'])
const [date7, setDate7] = useState<string[]>(['2022-12-23', '2023-08-26'])
const [dateWeek, setDateWeek] = useState('')
const [isVisible, setIsVisible] = useState(false)
const [isVisible1, setIsVisible1] = useState(false)
......@@ -204,13 +204,16 @@ const CalendarDemo = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01')
calendarRef.current.scrollToDate('2023-04-01')
}
}
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
setDate7(date)
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -221,6 +224,9 @@ const CalendarDemo = () => {
const yearMonth = `${year}-${month}`
const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onDay = (date: Day) => {
......@@ -396,8 +402,8 @@ const CalendarDemo = () => {
visible={isVisible7}
defaultValue={date7}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
startDate="2022-12-22"
endDate="2023-12-31"
onBtn={onBtn}
onClose={closeSwitch7}
onChoose={setChooseValue7}
......
src/packages/calendar/demo.tsx
浏览文件 @ 4857c6fc
......@@ -90,13 +90,13 @@ const CalendarDemo = () => {
const d = new Date()
const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
const [date, setDate] = useState(currDay)
const [date1, setDate1] = useState(['2020-01-23', '2020-01-26'])
const [date2, setDate2] = useState('2020-07-08')
const [date1, setDate1] = useState(['2023-01-23', '2023-11-26'])
const [date2, setDate2] = useState('2022-12-08')
const [date3, setDate3] = useState('')
const [date4, setDate4] = useState<string[]>([])
const [date5, setDate5] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date6, setDate6] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date7, setDate7] = useState<string[]>(['2021-12-23', '2021-12-26'])
const [date5, setDate5] = useState<string[]>(['2022-11-23', '2024-01-26'])
const [date6, setDate6] = useState<string[]>(['2022-11-23', '2024-01-26'])
const [date7, setDate7] = useState<string[]>(['2022-12-23', '2023-08-26'])
const [dateWeek, setDateWeek] = useState('')
const [isVisible, setIsVisible] = useState(false)
const [isVisible1, setIsVisible1] = useState(false)
......@@ -207,13 +207,16 @@ const CalendarDemo = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01')
calendarRef.current.scrollToDate('2023-04-01')
}
}
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
setDate7(date)
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -224,6 +227,9 @@ const CalendarDemo = () => {
const yearMonth = `${year}-${month}`
const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onDay = (date: Day) => {
......@@ -401,8 +407,8 @@ const CalendarDemo = () => {
visible={isVisible7}
defaultValue={date7}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
startDate="2022-12-22"
endDate="2023-12-31"
onBtn={onBtn}
onClose={closeSwitch7}
onChoose={setChooseValue7}
......
src/packages/calendar/doc.en-US.md
浏览文件 @ 4857c6fc
......@@ -333,13 +333,16 @@ const App = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
calendarRef.current.scrollToDate('2023-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -350,6 +353,9 @@ const App = () => {
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onBtn = () => {
......@@ -424,9 +430,16 @@ export default App;
## API
Through ref, you can get the Calendar instance and call the instance method.
| Name | Description | Arguments |
| ----- | ----- | -- |
| scrollToDate | Scroll to the month of the specified date:'2023-06-30' | `string` |
### Props
| Params | Description | Type | Default |
| Params| Description | Type | Default |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| visible | Is it visible | boolean | `false` |
| type | Type, select 'one' for date and 'range' for interval | string | `one` |
......@@ -450,14 +463,14 @@ export default App;
### Events
| Events | Description | callback parameter |
| Events | Description | callback parameter |
|--------|------------------------------|------------------------------|
| onChoose | Triggered after selection or by clicking the confirm button | Array of dates (including year, month, day and week) |
| onClose | Triggered when closed | - |
| onSelected | Triggered after click/select | `Day: Day` |
### Day
| Params | Description |
| Params| Description |
|-------------------|-----------------|
| day | string \| number |
| type | string |
......
src/packages/calendar/doc.md
浏览文件 @ 4857c6fc
......@@ -230,7 +230,6 @@ const App = () => {
return (
<>
<Cell title="选择日期" desc={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
......@@ -309,7 +308,7 @@ const Utils = {
)[month as any]
},
isLeapYear(y: number): boolean {
return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0
return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
},
};
......@@ -333,13 +332,16 @@ const App = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
calendarRef.current.scrollToDate('2023-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -350,6 +352,9 @@ const App = () => {
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onBtn = () => {
......@@ -424,9 +429,15 @@ export default App;
## API
通过 ref 可以获取到 Calendar 实例并调用实例方法。
| 方法名 | 说明 | 参数 |
| ----- | ----- | -- |
| scrollToDate | 滚动到指定日期所在月,如：'2023-06-30' | `string` |
### Props
| 字段 | 说明 | 类型 | 默认值 |
| 字段| 说明 | 类型 | 默认值 |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| visible | 是否可见 | boolean | `false` |
| type | 类型，日期选择'one'，区间选择'range' | string | `one` |
......@@ -450,7 +461,7 @@ export default App;
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名 | 说明 | 回调参数 |
|--------|------------------------------|------------------------------|
| onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
| onClose | 关闭时触发 | - |
......
src/packages/calendar/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -332,13 +332,16 @@ const App = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
calendarRef.current.scrollToDate('2023-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -349,6 +352,9 @@ const App = () => {
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onBtn = () => {
......@@ -423,6 +429,13 @@ export default App;
## API
通过 ref 可以获取到 Calendar 实例并调用实例方法。
| 方法名 | 说明 | 参数 |
| ----- | ----- | -- |
| scrollToDate | 滚动到指定日期所在月,如：'2023-06-30' | `string` |
### Props
| 字段 | 说明 | 类型 | 默认值 |
......
src/packages/calendar/doc.zh-TW.md
浏览文件 @ 4857c6fc
......@@ -333,13 +333,16 @@ const App = () => {
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
calendarRef.current.scrollToDate('2023-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
if (calendarRef.current) {
calendarRef.current.scrollToDate(date[0])
}
}
const clickBtn1 = () => {
......@@ -350,6 +353,9 @@ const App = () => {
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
if (calendarRef.current) {
calendarRef.current.scrollToDate(`${yearMonth}-01`)
}
}
const onBtn = () => {
......@@ -424,6 +430,13 @@ export default App;
## API
通过 ref 可以获取到 Calendar 实例并调用实例方法。
| 方法名 | 说明 | 参数 |
| ----- | ----- | -- |
| scrollToDate | 滚动到指定日期所在月,如：'2023-06-30' | `string` |
### Props
| 字段 | 說明 | 類型 | 默認值 |
......
src/packages/calendaritem/calendaritem.taro.tsx
浏览文件 @ 4857c6fc
import React, { useState, useEffect, useRef } from 'react'
import classNames from 'classnames'
import { ScrollView } from '@tarojs/components'
import bem from '@/utils/bem'
import Utils from '@/utils/date'
import requestAniFrame from '@/utils/raf'
......@@ -125,6 +126,7 @@ export const CalendarItem = React.forwardRef<
const [monthsData, setMonthsData] = useState<any[]>([])
const [translateY, setTranslateY] = useState(0)
const [monthDefaultRange, setMonthDefaultRange] = useState<number[]>([])
const [scrollTop, setScrollTop] = useState(0)
const [state] = useState<CalendarState>({
currDate: '',
......@@ -476,7 +478,6 @@ export const CalendarItem = React.forwardRef<
) {
state.monthsData.unshift(monthInfo)
}
setMonthsData(state.monthsData)
}
......@@ -502,7 +503,7 @@ export const CalendarItem = React.forwardRef<
setTranslateY(state.monthsData[start].cssScrollHeight)
}
const mothsViewScroll = (e: any) => {
const monthsViewScroll = (e: any) => {
if (state.monthsData.length <= 1) {
return
}
......@@ -748,6 +749,7 @@ export const CalendarItem = React.forwardRef<
state.monthsData.splice(0)
initData()
}
// 暴露出的API
const scrollToDate = (date: string) => {
if (Utils.compareDate(date, state.propStartDate)) {
......@@ -777,11 +779,13 @@ export const CalendarItem = React.forwardRef<
if (months.current) {
months.current.scrollTop =
state.monthsData[index].cssScrollHeight
setScrollTop(months.current.scrollTop)
}
}
}, 40)
} else {
months.current.scrollTop = state.monthsData[index].cssScrollHeight
setScrollTop(months.current.scrollTop)
}
}
}
......@@ -823,9 +827,12 @@ export const CalendarItem = React.forwardRef<
</div>
</div>
{/* content */}
<div
<ScrollView
scrollTop={scrollTop}
scrollY
scrollWithAnimation
className="nut-calendar-content"
onScroll={mothsViewScroll}
onScroll={monthsViewScroll}
ref={months}
>
<div className="calendar-months-panel" ref={monthsPanel}>
......@@ -896,7 +903,7 @@ export const CalendarItem = React.forwardRef<
})}
</div>
</div>
</div>
</ScrollView>
{/* footer */}
{poppable && !isAutoBackFill ? (
<div className="nut-calendar-footer">
......
src/packages/calendaritem/calendaritem.tsx
浏览文件 @ 4857c6fc
......@@ -504,7 +504,7 @@ export const CalendarItem = React.forwardRef<
setTranslateY(state.monthsData[start].cssScrollHeight)
}
const mothsViewScroll = (e: any) => {
const monthsViewScroll = (e: any) => {
if (state.monthsData.length <= 1) {
return
}
......@@ -767,6 +767,7 @@ export const CalendarItem = React.forwardRef<
if (months.current) {
const distance =
state.monthsData[index].cssScrollHeight - months.current.scrollTop
if (toDateAnimation) {
let flag = 0
const interval = setInterval(() => {
......@@ -829,7 +830,7 @@ export const CalendarItem = React.forwardRef<
{/* content */}
<div
className="nut-calendar-content"
onScroll={mothsViewScroll}
onScroll={monthsViewScroll}
ref={months}
>
<div className="calendar-months-panel" ref={monthsPanel}>
......
src/packages/checkbox/checkbox.scss
浏览文件 @ 4857c6fc
@import '../icon/icon.scss';
@import '../checkboxgroup/checkboxgroup.scss';
.nut-theme-dark {
.nut-checkbox {
&__label {
......
src/packages/checkbox/checkbox.taro.tsx
浏览文件 @ 4857c6fc
import React, { FunctionComponent, useEffect, useState } from 'react'
import React, {
FunctionComponent,
useContext,
useEffect,
useState,
} from 'react'
import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react-taro'
import bem from '@/utils/bem'
import CheckboxGroup from '@/packages/checkboxgroup/index.taro'
import bem from '@/utils/bem'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
interface InheritParentProps {
getParentVals?: () => string[] | undefined
max?: number | undefined
}
import Context from '../checkboxgroup/context'
export interface CheckboxProps extends BasicComponent {
checked: boolean
......@@ -20,7 +21,7 @@ export interface CheckboxProps extends BasicComponent {
iconClassPrefix: string
iconFontClassName: string
indeterminate: boolean
label: string
label: string | number
onChange: (state: boolean, label: string) => void
}
......@@ -39,8 +40,7 @@ const defaultProps = {
} as CheckboxProps
export const Checkbox: FunctionComponent<
Partial<CheckboxProps> &
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> &
InheritParentProps
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
> & { Group: typeof CheckboxGroup } = (props) => {
const { children } = {
...defaultProps,
......@@ -52,7 +52,6 @@ export const Checkbox: FunctionComponent<
iconSize,
label,
className,
textPosition,
iconActiveName,
checked,
disabled,
......@@ -61,33 +60,35 @@ export const Checkbox: FunctionComponent<
iconClassPrefix,
iconFontClassName,
iconIndeterminateName,
getParentVals,
max,
...rest
...others
} = props as any
// eslint-disable-next-line prefer-const
let { textPosition, ...rest } = others
const ctx = useContext(Context)
const [innerChecked, setInnerChecked] = useState(checked)
const [innerDisabled, setDisabled] = useState(disabled)
let [innerChecked, setInnerChecked] = useState(checked)
// eslint-disable-next-line prefer-const
let [innerDisabled, setDisabled] = useState(disabled)
const [_indeterminate, setIndeterminate] = useState(indeterminate)
useEffect(() => {
setInnerChecked(checked)
!ctx && setInnerChecked(checked)
setDisabled(disabled)
}, [disabled, checked])
useEffect(() => {
setIndeterminate(indeterminate)
}, [indeterminate])
//
// const getIconName = () => {
// if (!innerChecked) {
// return iconName
// }
// if (_indeterminate) {
// return iconIndeterminateName
// }
// return iconActiveName
// }
}, [disabled, checked, indeterminate])
if (ctx) {
if (ctx.textPosition !== undefined) {
textPosition = ctx.textPosition
}
innerDisabled = ctx.disabled
innerChecked = ctx.checkedValue.includes(label)
setInnerChecked = (checked: boolean) => {
if (ctx.disabled) return
if (checked) ctx.check(label)
if (!checked) ctx.uncheck(label)
}
}
const renderIcon = () => {
if (!innerChecked) {
......@@ -121,8 +122,6 @@ export const Checkbox: FunctionComponent<
return 'nut-checkbox__icon'
}
return 'nut-checkbox__icon--unchecked'
// return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5'
}
const renderLabel = () => {
return (
......@@ -133,12 +132,16 @@ export const Checkbox: FunctionComponent<
}
const handleClick = () => {
if (!disabled) {
const latest = !innerChecked
if (max !== undefined && latest && getParentVals().length >= max) return
onChange && onChange(latest, label || (children as string))
setInnerChecked(latest)
// 禁用的时候直接返回
if (disabled) return
// 先转换状态
const latestChecked = !innerChecked
// 判断是不是有 context 和 max，有的话需要判断是不是超过最大限制
if (ctx && ctx.max !== undefined) {
if (latestChecked && ctx.checkedValue.length >= ctx.max) return
}
onChange && onChange(latestChecked, label || (children as string))
setInnerChecked(latestChecked)
}
return (
......
src/packages/checkbox/checkbox.tsx
浏览文件 @ 4857c6fc
import React, { FunctionComponent, useEffect, useState } from 'react'
import React, {
FunctionComponent,
useContext,
useEffect,
useState,
} from 'react'
import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react'
import bem from '@/utils/bem'
import CheckboxGroup from '@/packages/checkboxgroup'
import bem from '@/utils/bem'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
interface InheritParentProps {
getParentVals?: () => string[] | undefined
max?: number | undefined
}
import Context from '../checkboxgroup/context'
export interface CheckboxProps extends BasicComponent {
checked: boolean
......@@ -20,7 +21,7 @@ export interface CheckboxProps extends BasicComponent {
iconClassPrefix: string
iconFontClassName: string
indeterminate: boolean
label: string
label: string | number
onChange: (state: boolean, label: string) => void
}
......@@ -39,8 +40,7 @@ const defaultProps = {
} as CheckboxProps
export const Checkbox: FunctionComponent<
Partial<CheckboxProps> &
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> &
InheritParentProps
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
> & { Group: typeof CheckboxGroup } = (props) => {
const { children } = {
...defaultProps,
......@@ -52,7 +52,6 @@ export const Checkbox: FunctionComponent<
iconSize,
label,
className,
textPosition,
iconActiveName,
checked,
disabled,
......@@ -61,33 +60,35 @@ export const Checkbox: FunctionComponent<
iconClassPrefix,
iconFontClassName,
iconIndeterminateName,
getParentVals,
max,
...rest
...others
} = props as any
// eslint-disable-next-line prefer-const
let { textPosition, ...rest } = others
const ctx = useContext(Context)
const [innerChecked, setInnerChecked] = useState(checked)
const [innerDisabled, setDisabled] = useState(disabled)
let [innerChecked, setInnerChecked] = useState(checked)
// eslint-disable-next-line prefer-const
let [innerDisabled, setDisabled] = useState(disabled)
const [_indeterminate, setIndeterminate] = useState(indeterminate)
useEffect(() => {
setInnerChecked(checked)
!ctx && setInnerChecked(checked)
setDisabled(disabled)
}, [disabled, checked])
useEffect(() => {
setIndeterminate(indeterminate)
}, [indeterminate])
//
// const getIconName = () => {
// if (!innerChecked) {
// return iconName
// }
// if (_indeterminate) {
// return iconIndeterminateName
// }
// return iconActiveName
// }
}, [disabled, checked, indeterminate])
if (ctx) {
if (ctx.textPosition !== undefined) {
textPosition = ctx.textPosition
}
innerDisabled = ctx.disabled
innerChecked = ctx.checkedValue.includes(label)
setInnerChecked = (checked: boolean) => {
if (ctx.disabled) return
if (checked) ctx.check(label)
if (!checked) ctx.uncheck(label)
}
}
const renderIcon = () => {
if (!innerChecked) {
......@@ -131,12 +132,16 @@ export const Checkbox: FunctionComponent<
}
const handleClick = () => {
if (!disabled) {
const latest = !innerChecked
if (max !== undefined && latest && getParentVals().length >= max) return
onChange && onChange(latest, label || (children as string))
setInnerChecked(latest)
// 禁用的时候直接返回
if (disabled) return
// 先转换状态
const latestChecked = !innerChecked
// 判断是不是有 context 和 max，有的话需要判断是不是超过最大限制
if (ctx && ctx.max !== undefined) {
if (latestChecked && ctx.checkedValue.length >= ctx.max) return
}
onChange && onChange(latestChecked, label || (children as string))
setInnerChecked(latestChecked)
}
return (
......
src/packages/checkbox/demo.taro.tsx
浏览文件 @ 4857c6fc
......@@ -5,99 +5,107 @@ import { Button, Cell, Checkbox, Toast } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
interface T {
'74fc5d8a': string
'48b50759': string
'7db1a8b2': string
f3480b64: string
f3480b646: string
f4e46058: string
'8a2e2847': string
'70ffa5d8': string
'87941cd4': string
'9bbfbbc7': string
'45c21a9e': string
'2cd0f3be': string
'2cd0f3be1': string
b2dd27e8: string
'4584d5bf': string
'7df5c456': string
'77fc8365': string
'3a5040b6': string
f4d4bae5: string
basic: string
checkbox: string
disbaled: string
DisabledState: string
selective: string
disabledState: string
customSize: string
customIcon: string
triggerEvent: string
uncheckedx: string
checked: string
cancel: string
reverse: string
selected: string
options1: string
Disabled: string
selectAndCancel: string
selectAll: string
cancelSelection: string
options: string
max: string
threeState: string
}
const CheckboxDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
'74fc5d8a': '基本用法',
'48b50759': '复选框',
'7db1a8b2': '禁用状态',
f3480b64: '未选时禁用状态',
f3480b646: '半选状态',
f4e46058: '选中时禁用状态',
'8a2e2847': '自定义尺寸',
'70ffa5d8': '自定义图标',
'87941cd4': '点击触发事件',
'9bbfbbc7': '您取消了x的勾选',
'45c21a9e': '选中',
'2cd0f3be': '取消',
b2dd27e8: '您选中了x',
'4584d5bf': '选项',
'7df5c456': '禁用',
'77fc8365': '全选和取消',
'3a5040b6': '全选',
f4d4bae5: '取消全选',
'2cd0f3be1': '反选',
basic: '基本用法',
checkbox: '复选框',
disbaled: '禁用状态',
DisabledState: '未选时禁用状态',
selective: '半选状态',
disabledState: '选中时禁用状态',
customSize: '自定义尺寸',
customIcon: '自定义图标',
triggerEvent: '点击触发事件',
uncheckedx: '您取消了x的勾选',
checked: '选中',
cancel: '取消',
selected: '您选中了x',
options1: '选项',
Disabled: '禁用',
selectAndCancel: '全选和取消',
selectAll: '全选',
cancelSelection: '取消全选',
reverse: '反选',
options: '配置 options 渲染复选按钮',
max: 'checkboxGroup使用，限制最大可选数（2个）',
threeState: '全选/半选/取消',
},
'zh-TW': {
'74fc5d8a': '基本用法',
'48b50759': '複選框',
'7db1a8b2': '禁用狀態',
f3480b64: '未選時禁用狀態',
f3480b646: '半选状态',
f4e46058: '選中時禁用狀態',
'8a2e2847': '自定義尺寸',
'70ffa5d8': '自定義圖示',
'87941cd4': '點擊觸發事件',
'9bbfbbc7': '您取消了x的勾選',
'45c21a9e': '選中',
'2cd0f3be': '取消',
b2dd27e8: '您選取了x',
'4584d5bf': '選項',
'7df5c456': '禁用',
'77fc8365': '全選和取消',
'3a5040b6': '全選',
f4d4bae5: '取消全選',
'2cd0f3be1': '反選',
basic: '基本用法',
checkbox: '複選框',
disbaled: '禁用狀態',
DisabledState: '未選時禁用狀態',
selective: '半选状态',
disabledState: '選中時禁用狀態',
customSize: '自定義尺寸',
customIcon: '自定義圖示',
triggerEvent: '點擊觸發事件',
uncheckedx: '您取消了x的勾選',
checked: '選中',
cancel: '取消',
selected: '您選取了x',
options1: '選項',
Disabled: '禁用',
selectAndCancel: '全選和取消',
selectAll: '全選',
cancelSelection: '取消全選',
reverse: '反選',
options: '配置 options 渲染複選按鈕',
max: 'checkboxGroup使用，限制最大可选数（2个）',
threeState: '全选/半选/取消',
},
'en-US': {
'74fc5d8a': 'Basic Usage',
'48b50759': 'Checkbox',
'7db1a8b2': 'Disabled State',
f3480b64: 'Disabled state',
f3480b646: 'Semi selective',
f4e46058: 'Disabled state',
'8a2e2847': 'Custom size',
'70ffa5d8': 'Custom Icon',
'87941cd4': 'Click Trigger Event',
'9bbfbbc7': 'You unchecked x',
'45c21a9e': 'Checked',
'2cd0f3be': 'Cancel',
b2dd27e8: 'You selected x',
'4584d5bf': 'Options',
'7df5c456': 'Disabled',
'77fc8365': 'All Select and Cancel',
'3a5040b6': 'Select All',
'2cd0f3be1': 'reverse',
f4d4bae5: 'Cancel All Selection',
basic: 'Basic Usage',
checkbox: 'Checkbox',
disbaled: 'Disabled State',
DisabledState: 'Disabled state',
selective: 'Semi selective',
disabledState: 'Disabled state',
customSize: 'Custom size',
customIcon: 'Custom Icon',
triggerEvent: 'Click Trigger Event',
uncheckedx: 'You unchecked x',
checked: 'Checked',
cancel: 'Cancel',
selected: 'You selected x',
options1: 'Options',
Disabled: 'Disabled',
selectAndCancel: 'All Select and Cancel',
selectAll: 'Select All',
reverse: 'reverse',
cancelSelection: 'Cancel All Selection',
options: 'Render radios by configuring options',
max: 'Used by checkboxGroup, limit the maximum number of options (2)',
threeState: 'Select All/Half/Cancel',
},
})
const [checked, setChecked] = useState(true)
const [checked] = useState(true)
const [checkbox1, setCheckbox1] = useState(false)
const [indeterminate, setIndeterminate] = useState(false)
const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
......@@ -109,18 +117,18 @@ const CheckboxDemo = () => {
const checkboxgroup3Ref = useRef(null)
const [show, SetShow] = useState(false)
const [toastMsg, SetToastMsg] = useState('')
const [optionsDemo1, setOptionsDemo1] = useState([
const [optionsDemo1] = useState([
{
label: '选项1',
label: 'Options 1',
value: '1',
},
{
label: '选项2',
label: 'Options 2',
value: '2',
disabled: true,
},
{
label: '选项3',
label: 'Options 3',
value: '3',
},
])
......@@ -140,37 +148,35 @@ const CheckboxDemo = () => {
SetShow(false)
}}
/>
<h2>{translated['74fc5d8a']}</h2>
<h2>{translated.basic}</h2>
<Cell className="nut-cell">
<Checkbox
className="test"
textPosition="left"
label={translated['48b50759']}
label={translated.checkbox}
checked={checked}
/>
</Cell>
<Cell className="nut-cell">
<Checkbox.Group textPosition="left" checkedValue={checkboxgroup1}>
<Checkbox label={optionsDemo1[0].label} checked={false} />
<Checkbox.Group textPosition="left" checkedValue={['选项 1']}>
<span>
<Checkbox label={optionsDemo1[0].label} checked={false} />
</span>
<Checkbox label={optionsDemo1[1].label} checked={false} />
<Checkbox label={optionsDemo1[2].label} checked={false} />
</Checkbox.Group>
</Cell>
<h2>{translated.f3480b646}</h2>
<h2>{translated.selective}</h2>
<Cell>
<Checkbox.Group checkedValue={checkboxgroup1}>
<Checkbox
label={`${translated['48b50759']}1`}
checked
indeterminate
/>
<Checkbox label={`${translated.checkbox}1`} checked indeterminate />
</Checkbox.Group>
</Cell>
<h2>{translated['7db1a8b2']}</h2>
<h2>{translated.disbaled}</h2>
<Cell className="nut-cell">
<Checkbox
textPosition="right"
label={translated.f3480b64}
label={translated.DisabledState}
checked={false}
disabled
/>
......@@ -178,19 +184,19 @@ const CheckboxDemo = () => {
<Cell className="nut-cell">
<Checkbox
textPosition="right"
label={translated.f4e46058}
label={translated.disabledState}
checked
disabled
/>
</Cell>
<h2>{translated['8a2e2847']}</h2>
<h2>{translated.customSize}</h2>
<Cell className="nut-cell">
<Checkbox label={translated['8a2e2847']} iconSize={25} />
<Checkbox label={translated.customSize} iconSize={25} />
</Cell>
<Cell className="nut-cell">
<Checkbox label={translated['8a2e2847']} iconSize={10} />
<Checkbox label={translated.customSize} iconSize={10} />
</Cell>
<h2>{translated['70ffa5d8']}</h2>
<h2>{translated.customIcon}</h2>
<Cell className="nut-cell">
<Checkbox.Group>
<Checkbox
......@@ -198,33 +204,33 @@ const CheckboxDemo = () => {
iconName="checklist"
iconActiveName="checklist"
>
{translated['70ffa5d8']}
{translated.customIcon}
</Checkbox>
<Checkbox
checked={false}
iconName="checklist"
iconActiveName="checklist"
>
<div>{translated['70ffa5d8']}</div>
<div>{translated.customIcon}</div>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
{translated['70ffa5d8']}
{translated.customIcon}
</div>
</Checkbox>
</Checkbox.Group>
</Cell>
<h2>{translated['87941cd4']}</h2>
<h2>{translated.triggerEvent}</h2>
<Cell className="nut-cell">
<Checkbox
checked={false}
onChange={(state, label) => {
if (state) {
toastShow(translated.b2dd27e8.replace('x', label))
toastShow(translated.selected.replace('x', label))
} else {
toastShow(translated['9bbfbbc7'].replace('x', label))
toastShow(translated.uncheckedx.replace('x', label))
}
}}
>
{translated['48b50759']}
{translated.checkbox}
</Checkbox>
</Cell>
<h2>Checkbox.Group</h2>
......@@ -238,39 +244,39 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated['4584d5bf']}
{translated.options1}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
<Cell>
<span>
{translated['45c21a9e']}：{checkboxgroup1.toString()}
{translated.checked}：{checkboxgroup1.toString()}
</span>
</Cell>
<h2>{translated['7df5c456']}</h2>
<h2>{translated.Disabled}</h2>
<Cell>
<Checkbox.Group
checkedValue={checkboxgroup1}
disabled
direction="horizontal"
>
<Checkbox label="1">{translated['4584d5bf']}</Checkbox>
<Checkbox label="2">{translated['4584d5bf']}</Checkbox>
<Checkbox label="3">{translated['4584d5bf']}</Checkbox>
<Checkbox label="4">{translated['4584d5bf']}</Checkbox>
<Checkbox label="1">{translated.options1}</Checkbox>
<Checkbox label="2">{translated.options1}</Checkbox>
<Checkbox label="3">{translated.options1}</Checkbox>
<Checkbox label="4">{translated.options1}</Checkbox>
</Checkbox.Group>
</Cell>
<h2>{translated['77fc8365']}</h2>
<h2>{translated.selectAndCancel}</h2>
<Cell>
<Checkbox.Group
textPosition="left"
......@@ -281,23 +287,23 @@ const CheckboxDemo = () => {
toastShow(
`${
value.length === 4
? translated['3a5040b6']
: translated.f4d4bae5
? translated.selectAll
: translated.cancelSelection
}`
)
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
......@@ -309,7 +315,7 @@ const CheckboxDemo = () => {
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['3a5040b6']}
{translated.selectAll}
</Button>
<Button
type="info"
......@@ -318,7 +324,7 @@ const CheckboxDemo = () => {
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['2cd0f3be']}
{translated.cancel}
</Button>
<Button
type="warning"
......@@ -326,10 +332,10 @@ const CheckboxDemo = () => {
;(checkboxgroup2Ref.current as any).toggleReverse()
}}
>
{translated['2cd0f3be1']}
{translated.reverse}
</Button>
</Cell>
<h2>checkboxGroup使用，限制最大可选数（2个）</h2>
<h2>{translated.max}</h2>
<Cell>
<Checkbox.Group
checkedValue={checkboxgroup3}
......@@ -339,20 +345,20 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
<h2>全选/半选/取消</h2>
<h2>{translated.threeState}</h2>
<Cell>
<div style={{ width: '50%' }}>
<Checkbox
......@@ -366,7 +372,7 @@ const CheckboxDemo = () => {
;(checkboxgroup3Ref.current as any).toggleAll(state)
}}
>
{translated['3a5040b6']}
{translated.selectAll}
</Checkbox>
</div>
......@@ -387,16 +393,16 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
......
src/packages/checkbox/demo.tsx
浏览文件 @ 4857c6fc
......@@ -6,99 +6,107 @@ import { Checkbox } from './checkbox'
import Button from '@/packages/button'
interface T {
'74fc5d8a': string
'48b50759': string
'7db1a8b2': string
f3480b64: string
f3480b646: string
f4e46058: string
'8a2e2847': string
'70ffa5d8': string
'87941cd4': string
'9bbfbbc7': string
'45c21a9e': string
'2cd0f3be': string
'2cd0f3be1': string
b2dd27e8: string
'4584d5bf': string
'7df5c456': string
'77fc8365': string
'3a5040b6': string
f4d4bae5: string
basic: string
checkbox: string
disbaled: string
DisabledState: string
selective: string
disabledState: string
customSize: string
customIcon: string
triggerEvent: string
uncheckedx: string
checked: string
cancel: string
reverse: string
selected: string
options1: string
Disabled: string
selectAndCancel: string
selectAll: string
cancelSelection: string
options: string
max: string
threeState: string
}
const CheckboxDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
'74fc5d8a': '基本用法',
'48b50759': '复选框',
'7db1a8b2': '禁用状态',
f3480b64: '未选时禁用状态',
f3480b646: '半选状态',
f4e46058: '选中时禁用状态',
'8a2e2847': '自定义尺寸',
'70ffa5d8': '自定义图标',
'87941cd4': '点击触发事件',
'9bbfbbc7': '您取消了x的勾选',
'45c21a9e': '选中',
'2cd0f3be': '取消',
b2dd27e8: '您选中了x',
'4584d5bf': '选项',
'7df5c456': '禁用',
'77fc8365': '全选和取消',
'3a5040b6': '全选',
f4d4bae5: '取消全选',
'2cd0f3be1': '反选',
basic: '基本用法',
checkbox: '复选框',
disbaled: '禁用状态',
DisabledState: '未选时禁用状态',
selective: '半选状态',
disabledState: '选中时禁用状态',
customSize: '自定义尺寸',
customIcon: '自定义图标',
triggerEvent: '点击触发事件',
uncheckedx: '您取消了x的勾选',
checked: '选中',
cancel: '取消',
selected: '您选中了x',
options1: '选项',
Disabled: '禁用',
selectAndCancel: '全选和取消',
selectAll: '全选',
cancelSelection: '取消全选',
reverse: '反选',
options: '配置 options 渲染复选按钮',
max: 'checkboxGroup使用，限制最大可选数（2个）',
threeState: '全选/半选/取消',
},
'zh-TW': {
'74fc5d8a': '基本用法',
'48b50759': '複選框',
'7db1a8b2': '禁用狀態',
f3480b64: '未選時禁用狀態',
f3480b646: '半选状态',
f4e46058: '選中時禁用狀態',
'8a2e2847': '自定義尺寸',
'70ffa5d8': '自定義圖示',
'87941cd4': '點擊觸發事件',
'9bbfbbc7': '您取消了x的勾選',
'45c21a9e': '選中',
'2cd0f3be': '取消',
b2dd27e8: '您選取了x',
'4584d5bf': '選項',
'7df5c456': '禁用',
'77fc8365': '全選和取消',
'3a5040b6': '全選',
f4d4bae5: '取消全選',
'2cd0f3be1': '反選',
basic: '基本用法',
checkbox: '複選框',
disbaled: '禁用狀態',
DisabledState: '未選時禁用狀態',
selective: '半选状态',
disabledState: '選中時禁用狀態',
customSize: '自定義尺寸',
customIcon: '自定義圖示',
triggerEvent: '點擊觸發事件',
uncheckedx: '您取消了x的勾選',
checked: '選中',
cancel: '取消',
selected: '您選取了x',
options1: '選項',
Disabled: '禁用',
selectAndCancel: '全選和取消',
selectAll: '全選',
cancelSelection: '取消全選',
reverse: '反選',
options: '配置 options 渲染複選按鈕',
max: 'checkboxGroup使用，限制最大可选数（2个）',
threeState: '全选/半选/取消',
},
'en-US': {
'74fc5d8a': 'Basic Usage',
'48b50759': 'Checkbox',
'7db1a8b2': 'Disabled State',
f3480b64: 'Disabled state',
f3480b646: 'Semi selective',
f4e46058: 'Disabled state',
'8a2e2847': 'Custom size',
'70ffa5d8': 'Custom Icon',
'87941cd4': 'Click Trigger Event',
'9bbfbbc7': 'You unchecked x',
'45c21a9e': 'Checked',
'2cd0f3be': 'Cancel',
b2dd27e8: 'You selected x',
'4584d5bf': 'Options',
'7df5c456': 'Disabled',
'77fc8365': 'All Select and Cancel',
'3a5040b6': 'Select All',
'2cd0f3be1': 'reverse',
f4d4bae5: 'Cancel All Selection',
basic: 'Basic Usage',
checkbox: 'Checkbox',
disbaled: 'Disabled State',
DisabledState: 'Disabled state',
selective: 'Semi selective',
disabledState: 'Disabled state',
customSize: 'Custom size',
customIcon: 'Custom Icon',
triggerEvent: 'Click Trigger Event',
uncheckedx: 'You unchecked x',
checked: 'Checked',
cancel: 'Cancel',
selected: 'You selected x',
options1: 'Options',
Disabled: 'Disabled',
selectAndCancel: 'All Select and Cancel',
selectAll: 'Select All',
reverse: 'reverse',
cancelSelection: 'Cancel All Selection',
options: 'Render radios by configuring options',
max: 'Used by checkboxGroup, limit the maximum number of options (2)',
threeState: 'Select All/Half/Cancel',
},
})
const [checked, setChecked] = useState(true)
const [checked] = useState(true)
const [checkbox1, setCheckbox1] = useState(false)
const [indeterminate, setIndeterminate] = useState(false)
const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
......@@ -108,18 +116,18 @@ const CheckboxDemo = () => {
const [checkboxgroup5, setCheckboxgroup5] = useState<string[]>([])
const checkboxgroup2Ref = useRef(null)
const checkboxgroup3Ref = useRef(null)
const [optionsDemo1, setOptionsDemo1] = useState([
const [optionsDemo1] = useState([
{
label: '选项1',
label: '选项 1',
value: '1',
},
{
label: '选项2',
label: '选项 2',
value: '2',
disabled: true,
},
{
label: '选项3',
label: '选项 3',
value: '3',
},
])
......@@ -127,37 +135,35 @@ const CheckboxDemo = () => {
return (
<>
<div className="demo">
<h2>{translated['74fc5d8a']}</h2>
<h2>{translated.basic}</h2>
<Cell className="nut-cell">
<Checkbox
className="test"
textPosition="left"
label={translated['48b50759']}
label={translated.checkbox}
checked={checked}
/>
</Cell>
<Cell className="nut-cell">
<Checkbox.Group textPosition="left" checkedValue={checkboxgroup1}>
<Checkbox label={optionsDemo1[0].label} checked={false} />
<Checkbox.Group textPosition="left" checkedValue={['选项 1']}>
<span>
<Checkbox label={optionsDemo1[0].label} checked={false} />
</span>
<Checkbox label={optionsDemo1[1].label} checked={false} />
<Checkbox label={optionsDemo1[2].label} checked={false} />
</Checkbox.Group>
</Cell>
<h2>{translated.f3480b646}</h2>
<h2>{translated.selective}</h2>
<Cell>
<Checkbox.Group checkedValue={checkboxgroup1}>
<Checkbox
label={`${translated['48b50759']}1`}
checked
indeterminate
/>
<Checkbox label={`${translated.checkbox}1`} checked indeterminate />
</Checkbox.Group>
</Cell>
<h2>{translated['7db1a8b2']}</h2>
<h2>{translated.disbaled}</h2>
<Cell className="nut-cell">
<Checkbox
textPosition="right"
label={translated.f3480b64}
label={translated.DisabledState}
checked={false}
disabled
/>
......@@ -165,53 +171,55 @@ const CheckboxDemo = () => {
<Cell className="nut-cell">
<Checkbox
textPosition="right"
label={translated.f4e46058}
label={translated.disabledState}
checked
disabled
/>
</Cell>
<h2>{translated['8a2e2847']}</h2>
<h2>{translated.customSize}</h2>
<Cell className="nut-cell">
<Checkbox label={translated['8a2e2847']} iconSize={25} />
<Checkbox label={translated.customSize} iconSize={25} />
</Cell>
<Cell className="nut-cell">
<Checkbox label={translated['8a2e2847']} iconSize={10} />
<Checkbox label={translated.customSize} iconSize={10} />
</Cell>
<h2>{translated['70ffa5d8']}</h2>
<h2>{translated.customIcon}</h2>
<Cell className="nut-cell">
<Checkbox.Group>
<Checkbox
checked={false}
label={1}
iconName="checklist"
iconActiveName="checklist"
>
{translated['70ffa5d8']}
{translated.customIcon}
</Checkbox>
<Checkbox
checked={false}
label={2}
iconName="checklist"
iconActiveName="checklist"
>
<div>{translated['70ffa5d8']}</div>
<div>{translated.customIcon}1</div>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
{translated['70ffa5d8']}
{translated.customIcon}1
</div>
</Checkbox>
</Checkbox.Group>
</Cell>
<h2>{translated['87941cd4']}</h2>
<h2>{translated.triggerEvent}</h2>
<Cell className="nut-cell">
<Checkbox
checked={false}
onChange={(state, label) => {
if (state) {
Toast.text(translated.b2dd27e8.replace('x', label))
Toast.text(translated.selected.replace('x', label))
} else {
Toast.text(translated['9bbfbbc7'].replace('x', label))
Toast.text(translated.uncheckedx.replace('x', label))
}
}}
>
{translated['48b50759']}
{translated.checkbox}
</Checkbox>
</Cell>
<h2>Checkbox.Group</h2>
......@@ -225,39 +233,39 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated['4584d5bf']}
{translated.options1}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
<Cell>
<span>
{translated['45c21a9e']}：{checkboxgroup1.toString()}
{translated.checked}：{checkboxgroup1.toString()}
</span>
</Cell>
<h2>{translated['7df5c456']}</h2>
<h2>{translated.Disabled}</h2>
<Cell>
<Checkbox.Group
checkedValue={checkboxgroup1}
disabled
direction="horizontal"
>
<Checkbox label="1">{translated['4584d5bf']}</Checkbox>
<Checkbox label="2">{translated['4584d5bf']}</Checkbox>
<Checkbox label="3">{translated['4584d5bf']}</Checkbox>
<Checkbox label="4">{translated['4584d5bf']}</Checkbox>
<Checkbox label="1">{translated.options1}</Checkbox>
<Checkbox label="2">{translated.options1}</Checkbox>
<Checkbox label="3">{translated.options1}</Checkbox>
<Checkbox label="4">{translated.options1}</Checkbox>
</Checkbox.Group>
</Cell>
<h2>{translated['77fc8365']}</h2>
<h2>{translated.selectAndCancel}</h2>
<Cell>
<Checkbox.Group
textPosition="left"
......@@ -268,23 +276,23 @@ const CheckboxDemo = () => {
Toast.text(
`${
value.length === 4
? translated['3a5040b6']
: translated.f4d4bae5
? translated.selectAll
: translated.cancelSelection
}`
)
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
......@@ -296,7 +304,7 @@ const CheckboxDemo = () => {
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['3a5040b6']}
{translated.selectAll}
</Button>
<Button
type="info"
......@@ -305,7 +313,7 @@ const CheckboxDemo = () => {
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['2cd0f3be']}
{translated.cancel}
</Button>
<Button
type="warning"
......@@ -313,10 +321,10 @@ const CheckboxDemo = () => {
;(checkboxgroup2Ref.current as any).toggleReverse()
}}
>
{translated['2cd0f3be1']}
{translated.reverse}
</Button>
</Cell>
<h2>checkboxGroup使用，限制最大可选数（2个）</h2>
<h2>{translated.max}</h2>
<Cell>
<Checkbox.Group
checkedValue={checkboxgroup3}
......@@ -326,20 +334,20 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
<h2>全选/半选/取消</h2>
<h2>{translated.threeState}</h2>
<Cell>
<div style={{ width: '50%' }}>
<Checkbox
......@@ -353,7 +361,7 @@ const CheckboxDemo = () => {
;(checkboxgroup3Ref.current as any).toggleAll(state)
}}
>
{translated['3a5040b6']}
{translated.selectAll}
</Checkbox>
</div>
......@@ -374,16 +382,16 @@ const CheckboxDemo = () => {
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
{translated.options1}
</Checkbox>
</Checkbox.Group>
</Cell>
......
src/packages/checkbox/doc.en-US.md
浏览文件 @ 4857c6fc
......@@ -15,7 +15,6 @@ import { Checkbox } from '@nutui/nutui-react';
## Basic Usage
:::demo
```tsx
import React, {useState} from "react";
import { Checkbox } from '@nutui/nutui-react';
......@@ -23,10 +22,34 @@ import { Checkbox } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checked, setChecked] = useState(true)
return (<>
<Checkbox textPosition="left" label="check box"
checked={checked} />
<Checkbox textPosition="right" label="check box"
checked={false} />
<Checkbox textPosition="left" label="checkbox" checked={checked} />
<Checkbox textPosition="right" label="checkbox" checked={false} />
<Checkbox.Group textPosition="left" checkedValue='option1'>
<span>
<Checkbox label='option1' checked={false} />
</span>
<Checkbox label='option2' checked={false} />
<Checkbox label='option3' checked={false} />
</Checkbox.Group>
</>
)
}
export default CheckBoxDemo;
```
:::
## Indeterminate
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checked, setChecked] = useState(true)
return (<>
<Checkbox label='复选框1' checked indeterminate />
</>
)
}
......
src/packages/checkbox/doc.md
浏览文件 @ 4857c6fc
......@@ -15,7 +15,6 @@ import { Checkbox } from '@nutui/nutui-react';
## 基本用法
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox } from '@nutui/nutui-react';
......@@ -25,6 +24,32 @@ const CheckBoxDemo = () => {
return (<>
<Checkbox textPosition="left" label="复选框" checked={checked} />
<Checkbox textPosition="right" label="复选框" checked={false} />
<Checkbox.Group textPosition="left" checkedValue='选项1'>
<span>
<Checkbox label='选项1' checked={false} />
</span>
<Checkbox label='选项2' checked={false} />
<Checkbox label='选项3' checked={false} />
</Checkbox.Group>
</>
)
}
export default CheckBoxDemo;
```
:::
## 半选状态
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checked, setChecked] = useState(true)
return (<>
<Checkbox label='复选框1' checked indeterminate />
</>
)
}
......@@ -142,7 +167,6 @@ const CheckBoxDemo = () => {
<Checkbox.Group
checkedValue={checkboxgroup1}
onChange={(value) => {
console.log(value)
setCheckboxgroup1(value)
}}
>
......
src/packages/checkbox/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -23,6 +23,32 @@ const CheckBoxDemo = () => {
return (<>
<Checkbox textPosition="left" label="复选框" checked={checked} />
<Checkbox textPosition="right" label="复选框" checked={false} />
<Checkbox.Group textPosition="left" checkedValue='选项1'>
<span>
<Checkbox label='选项1' checked={false} />
</span>
<Checkbox label='选项2' checked={false} />
<Checkbox label='选项3' checked={false} />
</Checkbox.Group>
</>
)
}
export default CheckBoxDemo;
```
:::
## 半选状态
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checked, setChecked] = useState(true)
return (<>
<Checkbox label='复选框1' checked indeterminate />
</>
)
}
......
src/packages/checkbox/doc.zh-TW.md
浏览文件 @ 4857c6fc
......@@ -25,6 +25,32 @@ const CheckBoxDemo = () => {
return (<>
<Checkbox textPosition="left" label="複選框" checked={checked} />
<Checkbox textPosition="right" label="複選框" checked={false} />
<Checkbox.Group textPosition="left" checkedValue='选项1'>
<span>
<Checkbox label='选项1' checked={false} />
</span>
<Checkbox label='选项2' checked={false} />
<Checkbox label='选项3' checked={false} />
</Checkbox.Group>
</>
)
}
export default CheckBoxDemo;
```
:::
## 半选状态
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checked, setChecked] = useState(true)
return (<>
<Checkbox label='複選框1' checked indeterminate />
</>
)
}
......
src/packages/checkboxgroup/checkboxgroup.taro.tsx
浏览文件 @ 4857c6fc
......@@ -7,16 +7,17 @@ import React, {
import bem from '@/utils/bem'
import { RadioGroupOptionType } from '@/packages/radiogroup/type'
import { Checkbox } from '../checkbox/checkbox.taro'
import Context from './context'
type Position = 'left' | 'right'
type Direction = 'horizontal' | 'vertical'
export type CheckboxTextPosition = 'left' | 'right'
export type CheckboxDirection = 'horizontal' | 'vertical'
export interface CheckboxGroupProps {
disabled: boolean
checkedValue: string[]
max: number | undefined
textPosition: Position
direction: Direction
textPosition: CheckboxTextPosition
direction: CheckboxDirection
onChange: (value: string[]) => void
options: RadioGroupOptionType[]
}
......@@ -50,9 +51,6 @@ export const CheckboxGroup = React.forwardRef(
...rest
} = props
const [innerDisabled, setInnerDisabled] = useState(disabled)
const [innerValue, setInnerValue] = useState(checkedValue)
useImperativeHandle<any, any>(ref, () => ({
toggleAll(state: boolean) {
if (state === false) {
......@@ -79,86 +77,52 @@ export const CheckboxGroup = React.forwardRef(
},
}))
const [innerValue, setInnerValue] = useState(checkedValue || [])
useEffect(() => {
setInnerDisabled(disabled)
setInnerValue(checkedValue)
}, [disabled, checkedValue])
function handleChildChange(state: boolean, label: string) {
if (max !== undefined && innerValue && innerValue.length > max) return
if (innerValue) {
let clippedValue = []
if (state) {
clippedValue = [...innerValue, label]
} else {
innerValue?.splice(innerValue?.indexOf(label), 1)
clippedValue = [...innerValue]
}
setInnerValue(clippedValue)
onChange && onChange(clippedValue)
}
}
function validateChildChecked(child: any) {
if (!innerValue) return false
return innerValue?.indexOf(child.props.label || child.children) > -1
}
function validateChecked(value: any) {
if (!innerValue) return false
return innerValue?.indexOf(value) > -1
}
function getParentVals() {
return innerValue
}
setInnerValue(checkedValue || [])
}, [checkedValue])
function cloneChildren() {
return React.Children.map(children, (child: any) => {
const childChecked = validateChildChecked(child)
if ((child as any).type.displayName !== 'NutCheckBox') {
return React.cloneElement(child)
}
return React.cloneElement(child, {
disabled: innerDisabled,
checked: childChecked,
onChange: handleChildChange,
getParentVals,
max,
textPosition,
})
})
}
const renderOptionsChildren = useCallback(() => {
const renderOptions = useCallback(() => {
return options?.map(({ label, value, disabled, onChange, ...rest }) => {
const childChecked = validateChecked(value)
return (
<Checkbox
key={value?.toString()}
children={label}
label={value}
disabled={innerDisabled ? true : disabled}
onChange={handleChildChange}
{...rest}
max={max}
textPosition={textPosition}
getParentVals={getParentVals}
checked={childChecked}
/>
)
})
}, [innerValue, options, innerDisabled, max])
}, [options, max])
return (
<div
className={`${b()} nut-checkboxgroup--${props.direction} ${
className || ''
}`}
{...rest}
<Context.Provider
value={{
textPosition: textPosition || 'left',
disabled,
max,
checkedValue: innerValue || [],
check: (value: string) => {
const combined = [...innerValue, value]
setInnerValue(combined)
onChange && onChange(combined)
},
uncheck: (value: string) => {
const reduced = innerValue.filter((item) => item !== value)
setInnerValue(reduced)
onChange && onChange(reduced)
},
}}
>
{options?.length ? renderOptionsChildren() : cloneChildren()}
</div>
<div
className={`${b()} nut-checkboxgroup--${props.direction} ${
className || ''
}`}
{...rest}
>
{options?.length ? renderOptions() : children}
</div>
</Context.Provider>
)
}
)
......
src/packages/checkboxgroup/checkboxgroup.tsx
浏览文件 @ 4857c6fc
......@@ -7,16 +7,16 @@ import React, {
import bem from '@/utils/bem'
import { RadioGroupOptionType } from '@/packages/radiogroup/type'
import { Checkbox } from '../checkbox/checkbox'
import Context from './context'
type Position = 'left' | 'right'
type Direction = 'horizontal' | 'vertical'
export type CheckboxTextPosition = 'left' | 'right'
export type CheckboxDirection = 'horizontal' | 'vertical'
export interface CheckboxGroupProps {
disabled: boolean
checkedValue: string[]
max: number | undefined
textPosition: Position
direction: Direction
textPosition: CheckboxTextPosition
direction: CheckboxDirection
onChange: (value: string[]) => void
options: RadioGroupOptionType[]
}
......@@ -30,6 +30,7 @@ const defaultProps = {
onChange: (value: string[]) => {},
options: [],
} as CheckboxGroupProps
export const CheckboxGroup = React.forwardRef(
(
props: Partial<CheckboxGroupProps> &
......@@ -50,9 +51,6 @@ export const CheckboxGroup = React.forwardRef(
...rest
} = props
const [innerDisabled, setInnerDisabled] = useState(disabled)
const [innerValue, setInnerValue] = useState(checkedValue)
useImperativeHandle<any, any>(ref, () => ({
toggleAll(state: boolean) {
if (state === false) {
......@@ -79,86 +77,52 @@ export const CheckboxGroup = React.forwardRef(
},
}))
const [innerValue, setInnerValue] = useState(checkedValue || [])
useEffect(() => {
setInnerDisabled(disabled)
setInnerValue(checkedValue)
}, [disabled, checkedValue])
function handleChildChange(state: boolean, label: string) {
if (max !== undefined && innerValue && innerValue.length > max) return
if (innerValue) {
let clippedValue = []
if (state) {
clippedValue = [...innerValue, label]
} else {
innerValue?.splice(innerValue?.indexOf(label), 1)
clippedValue = [...innerValue]
}
setInnerValue(clippedValue)
onChange && onChange(clippedValue)
}
}
function validateChildChecked(child: any) {
if (!innerValue) return false
return innerValue?.indexOf(child.props.label || child.children) > -1
}
function validateChecked(value: any) {
if (!innerValue) return false
return innerValue?.indexOf(value) > -1
}
setInnerValue(checkedValue || [])
}, [checkedValue])
function getParentVals() {
return innerValue
}
function cloneChildren() {
return React.Children.map(children, (child: any) => {
const childChecked = validateChildChecked(child)
if ((child as any).type.displayName !== 'NutCheckBox') {
return React.cloneElement(child)
}
return React.cloneElement(child, {
disabled: innerDisabled,
checked: childChecked,
onChange: handleChildChange,
getParentVals,
max,
textPosition,
})
})
}
const renderOptionsChildren = useCallback(() => {
const renderOptions = useCallback(() => {
return options?.map(({ label, value, disabled, onChange, ...rest }) => {
const childChecked = validateChecked(value)
return (
<Checkbox
key={value?.toString()}
children={label}
label={value}
disabled={innerDisabled ? true : disabled}
onChange={handleChildChange}
{...rest}
max={max}
textPosition={textPosition}
getParentVals={getParentVals}
checked={childChecked}
/>
)
})
}, [innerValue, options, innerDisabled, max])
}, [options, max])
return (
<div
className={`${b()} nut-checkboxgroup--${props.direction} ${
className || ''
}`}
{...rest}
<Context.Provider
value={{
textPosition: textPosition || 'left',
disabled,
max,
checkedValue: innerValue || [],
check: (value: string) => {
const combined = [...innerValue, value]
setInnerValue(combined)
onChange && onChange(combined)
},
uncheck: (value: string) => {
const reduced = innerValue.filter((item) => item !== value)
setInnerValue(reduced)
onChange && onChange(reduced)
},
}}
>
{options?.length ? renderOptionsChildren() : cloneChildren()}
</div>
<div
className={`${b()} nut-checkboxgroup--${props.direction} ${
className || ''
}`}
{...rest}
>
{options?.length ? renderOptions() : children}
</div>
</Context.Provider>
)
}
)
......
src/packages/checkboxgroup/context.ts 0 → 100644
浏览文件 @ 4857c6fc
import { createContext } from 'react'
const CheckboxGroupContext =
createContext<{
textPosition: 'left' | 'right'
disabled: boolean | undefined
checkedValue: string[]
max: number | undefined
check: (value: string) => void
uncheck: (value: string) => void
} | null>(null)
export default CheckboxGroupContext
src/packages/countdown/doc.md
浏览文件 @ 4857c6fc
......@@ -363,7 +363,7 @@ export default App;
通过 ref 可以获取到 CountDown 实例并调用实例方法。
| 方法明 | 说明 |
| 方法名 | 说明 |
| ----- | ----- |
| start | 开始倒计时 |
| pause | 暂停倒计时 |
......
src/packages/countdown/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -362,7 +362,7 @@ export default App;
通过 ref 可以获取到 CountDown 实例并调用实例方法。
| 方法明 | 说明 |
| 方法名 | 说明 |
| ----- | ----- |
| start | 开始倒计时 |
| pause | 暂停倒计时 |
......
src/packages/countdown/doc.zh-TW.md
浏览文件 @ 4857c6fc
......@@ -363,7 +363,7 @@ export default App;
通過 ref 可以獲取到 CountDown 實例並調用實例方法。
| 方法明 | 說明 |
| 方法名 | 說明 |
| ----- | ----- |
| start | 開始倒計時 |
| pause | 暫停倒計時 |
......
src/packages/datepicker/datepicker.scss
浏览文件 @ 4857c6fc
@import '../picker/picker.scss';
.nut-datepicker {
}
src/packages/datepicker/datepicker.taro.tsx
浏览文件 @ 4857c6fc
import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
import Picker from '@/packages/picker/index.taro'
import { useConfig } from '@/packages/configprovider'
export interface PickerOption {
text: string | number
......@@ -81,6 +82,7 @@ export const DatePicker: FunctionComponent<
...defaultProps,
...props,
}
const { locale } = useConfig()
const [show, setShow] = useState(false)
const [currentDate, setCurrentDate] = useState<Date | null>(modelValue)
......@@ -95,13 +97,14 @@ export const DatePicker: FunctionComponent<
)
}
const datepickerLang = locale.datepicker
const zhCNType: { [key: string]: string } = {
day: '日',
year: '年',
month: '月',
hour: '时',
minute: '分',
seconds: '秒',
day: datepickerLang.day,
year: datepickerLang.year,
month: datepickerLang.month,
hour: datepickerLang.hour,
minute: datepickerLang.min,
seconds: datepickerLang.seconds,
}
const formatValue = (value: Date | null) => {
let cvalue = value
......@@ -157,7 +160,6 @@ export const DatePicker: FunctionComponent<
const ranges = (date?: Date) => {
const curDate = date || currentDate
console.log(11, currentDate)
if (!curDate) return []
const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } =
getBoundary('max', curDate)
......@@ -369,8 +371,6 @@ export const DatePicker: FunctionComponent<
useEffect(() => {
setCurrentDate(formatValue(modelValue))
// initDefault()
}, [])
useEffect(() => {
......@@ -395,6 +395,7 @@ export const DatePicker: FunctionComponent<
>
{listData.length > 0 && (
<Picker
title={title}
isVisible={show}
listData={listData}
onClose={onCloseDatePicker}
......
src/packages/datepicker/datepicker.tsx
浏览文件 @ 4857c6fc
......@@ -18,10 +18,6 @@ interface pickerRefState {
) => void
}
interface T {
[props: string]: string
}
export interface DatePickerProps {
modelValue: Date | null
visible: boolean
......@@ -87,39 +83,11 @@ export const DatePicker: FunctionComponent<
...props,
}
const { locale } = useConfig()
// const [translated] = useTranslate<T>({
// 'zh-CN': {
// year: '年',
// month: '月',
// day: '日',
// hour: '时',
// min: '分',
// seconds: '秒',
// },
// 'zh-TW': {
// year: '年',
// month: '月',
// day: '日',
// hour: '時',
// min: '分',
// seconds: '秒',
// },
// 'en-US': {
// year: 'Year',
// month: 'Month',
// day: 'Day',
// hour: 'Hour',
// min: 'Minute',
// seconds: 'Second',
// },
// })
const [show, setShow] = useState(false)
const [currentDate, setCurrentDate] = useState<Date | null>(modelValue)
const [defaultValue, setDefaultValue] = useState<(string | number)[]>([])
const [listData, setListData] = useState<PickerOption[][]>([])
const pickerRef = useRef<pickerRefState>(null)
const isDate = (val: Date): val is Date => {
return (
Object.prototype.toString.call(val) === '[object Date]' &&
......@@ -402,8 +370,6 @@ export const DatePicker: FunctionComponent<
useEffect(() => {
setCurrentDate(formatValue(modelValue))
// initDefault()
}, [])
useEffect(() => {
......@@ -428,6 +394,7 @@ export const DatePicker: FunctionComponent<
>
{listData.length > 0 && (
<Picker
title={title}
isVisible={show}
listData={listData}
onClose={onCloseDatePicker}
......
src/packages/imagepreview/doc.en-US.md
浏览文件 @ 4857c6fc
......@@ -219,8 +219,8 @@ export default App;
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| show | Whether to show preview | boolean | `false` |
| videos | Videos Array(Videos are before images, not support in taro) | Array<Object> | `[]`
| images | Images array | { src: string }[] | `[]` |
| videos | Videos Array(Videos are before images, not support in taro) | `Array<Object>` | `[]`
| images | Images array | `{ src: string }[]` | `[]` |
| autoplay | Autoplay time, zero means not autoplay | number \| string | `3000` |
| initNo | Init no | number | `1` |
| paginationVisible | Whether to show pagination | boolean | `false` |
......
src/packages/imagepreview/doc.md
浏览文件 @ 4857c6fc
......@@ -218,8 +218,8 @@ export default App;
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| show | 是否展示预览图片 | boolean | `false` |
| videos | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | Array<Object> | `[]` |
| images | 预览图片数组 | { src: string }[] | `[]` |
| videos | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | `Array<Object>` | `[]` |
| images | 预览图片数组 | `{ src: string }[]` | `[]` |
| autoplay | 自动轮播时长，0表示不会自动轮播 | number \| string | `3000` |
| initNo | 初始页码 | number | `1` |
| paginationVisible | 分页指示器是否展示 | boolean | `false` |
......
src/packages/imagepreview/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -217,8 +217,8 @@ export default App;
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| show | 是否展示预览图片 | boolean | `false` |
| videos | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | Array<Object> | `[]` |
| images | 预览图片数组 | { src: string }[] | `[]` |
| videos | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | `Array<Object>` | `[]` |
| images | 预览图片数组 | `{ src: string }[]` | `[]` |
| autoplay | 自动轮播时长，0表示不会自动轮播 | number \| string | `3000` |
| initNo | 初始页码 | number | `1` |
| paginationVisible | 分页指示器是否展示 | boolean | `false` |
......
src/packages/input/input.taro.tsx
浏览文件 @ 4857c6fc
......@@ -170,9 +170,7 @@ export const Input: FunctionComponent<
...defaultProps,
...props,
}
locale.placeholder = placeholder || locale.placeholder
const inputPlaceholder = placeholder || locale.placeholder
const [inputValue, SetInputValue] = useState('')
const [active, SetActive] = useState(false)
const [classes, setClasses] = useState('')
......@@ -386,7 +384,7 @@ export const Input: FunctionComponent<
height: `${Number(rows) * 24}px`,
}}
maxLength={maxlength}
placeholder={placeholder || locale.placeholder}
placeholder={inputPlaceholder}
disabled={disabled}
readOnly={readonly}
value={inputValue}
......@@ -410,7 +408,7 @@ export const Input: FunctionComponent<
style={{ textAlign: inputAlign }}
type={inputType(type)}
maxLength={maxlength}
placeholder={placeholder || locale.placeholder}
placeholder={inputPlaceholder}
disabled={disabled}
readOnly={readonly}
value={inputValue}
......
src/packages/input/input.tsx
浏览文件 @ 4857c6fc
......@@ -169,7 +169,7 @@ export const Input: FunctionComponent<
...props,
}
locale.placeholder = placeholder || locale.placeholder
const inputPlaceholder = placeholder || locale.placeholder
const [inputValue, SetInputValue] = useState('')
const [active, SetActive] = useState(false)
......@@ -385,7 +385,7 @@ export const Input: FunctionComponent<
height: `${Number(rows) * 24}px`,
}}
maxLength={maxlength}
placeholder={placeholder || locale.placeholder}
placeholder={inputPlaceholder}
disabled={disabled}
readOnly={readonly}
value={inputValue}
......@@ -408,7 +408,7 @@ export const Input: FunctionComponent<
style={{ textAlign: inputAlign }}
type={inputType(type)}
maxLength={maxlength}
placeholder={placeholder || locale.placeholder}
placeholder={inputPlaceholder}
disabled={disabled}
readOnly={readonly}
value={inputValue}
......
src/packages/popup/popup.taro.tsx
浏览文件 @ 4857c6fc
......@@ -132,7 +132,7 @@ export const Popup: FunctionComponent<
round,
[`nut-popup-${position}`]: true,
[`${popClass}`]: true,
[`${className}`]: true,
[`${className || ''}`]: true,
},
b('')
)
......
src/packages/popup/popup.tsx
浏览文件 @ 4857c6fc
......@@ -129,7 +129,7 @@ export const Popup: FunctionComponent<
round,
[`nut-popup-${position}`]: true,
[`${popClass}`]: true,
[`${className}`]: true,
[`${className || ''}`]: true,
},
b('')
)
......
src/packages/radio/radio.scss
浏览文件 @ 4857c6fc
@import '../icon/icon.scss';
@import '../radiogroup/radiogroup.scss';
.nut-theme-dark {
.nut-radio {
&__label {
......
src/packages/searchbar/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -132,7 +132,7 @@ const App = () => {
}
return <>
<SearchBar
change={(val: string, e: Event) => change(val, e)}
onChange={(val: string, e: Event) => change(val, e)}
maxLength={10}
/>
value：{value}
......
src/packages/tabs/demo.taro.tsx
浏览文件 @ 4857c6fc
import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { Tabs, TabPane, Icon } from '@/packages/nutui.react.taro'
import { Tabs, Icon } from '@/packages/nutui.react.taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import Header from '@/sites/components/header'
......@@ -12,6 +12,8 @@ interface T {
title4: string
title5: string
title6: string
title12: string
title13: string
title7: string
title8: string
title9: string
......@@ -32,6 +34,8 @@ const TabsDemo = () => {
title4: '数量多,滚动操作',
title5: '左右布局',
title6: '左右布局-微笑曲线',
title12: '嵌套布局',
title13: '嵌套布局2',
title7: 'Title 字体尺寸：large normal small',
title8: '自定义标签栏',
title9: 'Tabpane 自动高度',
......@@ -49,6 +53,8 @@ const TabsDemo = () => {
title4: 'A large number of scrolling operations',
title5: 'Left and right layout',
title6: 'Left and Right Layout - Smile Curve',
title12: 'Tabs in Tabs',
title13: 'Tabs in Tabs 2',
title7: 'Title font size: large normal small',
title8: 'custom tab bar',
title9: 'Tabpane auto height',
......@@ -67,6 +73,8 @@ const TabsDemo = () => {
const [tab5value, setTab5value] = useState('0')
const [tab6value, setTab6value] = useState('0')
const [tab7value, setTab7value] = useState('c1')
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
const [list3, setList3] = useState(Array.from(new Array(2).keys()))
const list4 = Array.from(new Array(10).keys())
const list5 = Array.from(new Array(2).keys())
......@@ -111,12 +119,12 @@ const TabsDemo = () => {
setTab1value(paneKey)
}}
>
<TabPane title="Tab 1" className="custom-class">
<Tabs.TabPane title="Tab 1" className="custom-class">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title1}</h2>
<Tabs
......@@ -126,26 +134,24 @@ const TabsDemo = () => {
}}
type="smile"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title11}</h2>
<Tabs
value={tab1value}
className="test"
style={{ color: 'red' }}
leftAlign
onChange={({ paneKey }) => {
setTab1value(paneKey)
}}
>
<TabPane title="Tab 1" className="custom-class">
<Tabs.TabPane title="Tab 1" className="custom-class">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title2}</h2>
<Tabs
......@@ -154,18 +160,18 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2" paneKey="1" disabled>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled>
{' '}
Tab 2{' '}
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title10}</h2>
<Tabs
......@@ -175,7 +181,7 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
......@@ -185,8 +191,8 @@ const TabsDemo = () => {
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
......@@ -195,11 +201,11 @@ const TabsDemo = () => {
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title9}</h2>
<Tabs
......@@ -209,20 +215,20 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
{' '}
Tab 2{' '}
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title3}</h2>
<Tabs
......@@ -232,10 +238,10 @@ const TabsDemo = () => {
}}
>
{list3.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title4}</h2>
......@@ -248,10 +254,10 @@ const TabsDemo = () => {
titleGutter="10"
>
{list4.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title5}</h2>
......@@ -265,10 +271,10 @@ const TabsDemo = () => {
direction="vertical"
>
{list5.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title6}</h2>
......@@ -283,12 +289,67 @@ const TabsDemo = () => {
direction="vertical"
>
{list5.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title12}</h2>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title13}</h2>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title7}</h2>
<Tabs
value={tab1value}
......@@ -297,9 +358,9 @@ const TabsDemo = () => {
}}
size="large"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab1value}
......@@ -308,9 +369,9 @@ const TabsDemo = () => {
}}
size="normal"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab1value}
......@@ -319,9 +380,9 @@ const TabsDemo = () => {
}}
size="small"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title8}</h2>
......@@ -346,9 +407,9 @@ const TabsDemo = () => {
}}
>
{list6.map((item) => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</div>
......
src/packages/tabs/demo.tsx
浏览文件 @ 4857c6fc
import React, { useEffect, useState } from 'react'
import { Tabs } from './tabs'
import TabPane from '../tabpane'
import Icon from '@/packages/icon'
import { useTranslate } from '../../sites/assets/locale'
......@@ -12,6 +11,8 @@ interface T {
title4: string
title5: string
title6: string
title12: string
title13: string
title7: string
title8: string
title9: string
......@@ -32,6 +33,8 @@ const TabsDemo = () => {
title4: '数量多,滚动操作',
title5: '左右布局',
title6: '左右布局-微笑曲线',
title12: '嵌套布局',
title13: '嵌套布局2',
title7: 'Title 字体尺寸：large normal small',
title8: '自定义标签栏',
title9: 'Tabpane 自动高度',
......@@ -49,6 +52,8 @@ const TabsDemo = () => {
title4: 'A large number of scrolling operations',
title5: 'Left and right layout',
title6: 'Left and Right Layout - Smile Curve',
title12: 'Tabs in Tabs',
title13: 'Tabs in Tabs 2',
title7: 'Title font size: large normal small',
title8: 'custom tab bar',
title9: 'Tabpane auto height',
......@@ -67,6 +72,8 @@ const TabsDemo = () => {
const [tab5value, setTab5value] = useState('0')
const [tab6value, setTab6value] = useState('0')
const [tab7value, setTab7value] = useState('c1')
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
const [list3, setList3] = useState(Array.from(new Array(2).keys()))
const list4 = Array.from(new Array(10).keys())
const list5 = Array.from(new Array(2).keys())
......@@ -106,12 +113,12 @@ const TabsDemo = () => {
setTab1value(paneKey)
}}
>
<TabPane title="Tab 1" className="custom-class">
<Tabs.TabPane title="Tab 1" className="custom-class">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title1}</h2>
<Tabs
......@@ -121,9 +128,9 @@ const TabsDemo = () => {
}}
type="smile"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title11}</h2>
<Tabs
......@@ -133,12 +140,12 @@ const TabsDemo = () => {
setTab1value(paneKey)
}}
>
<TabPane title="Tab 1" className="custom-class">
<Tabs.TabPane title="Tab 1" className="custom-class">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title2}</h2>
<Tabs
......@@ -147,18 +154,18 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
{' '}
Tab 1{' '}
</TabPane>
<TabPane title="Tab 2" paneKey="1" disabled>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled>
{' '}
Tab 2{' '}
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title10}</h2>
<Tabs
......@@ -168,7 +175,7 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
......@@ -178,8 +185,8 @@ const TabsDemo = () => {
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
......@@ -188,11 +195,11 @@ const TabsDemo = () => {
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title9}</h2>
<Tabs
......@@ -202,20 +209,20 @@ const TabsDemo = () => {
setTab2value(paneKey)
}}
>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
{' '}
Tab 2{' '}
</TabPane>
<TabPane title="Tab 3" paneKey="2">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2">
{' '}
Tab 3{' '}
</TabPane>
</Tabs.TabPane>
</Tabs>
<h2>{translated.title3}</h2>
<Tabs
......@@ -225,10 +232,10 @@ const TabsDemo = () => {
}}
>
{list3.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title4}</h2>
......@@ -241,10 +248,10 @@ const TabsDemo = () => {
titleGutter="10"
>
{list4.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title5}</h2>
......@@ -258,10 +265,10 @@ const TabsDemo = () => {
direction="vertical"
>
{list5.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title6}</h2>
......@@ -276,12 +283,67 @@ const TabsDemo = () => {
direction="vertical"
>
{list5.map((item) => (
<TabPane key={item} title={`Tab ${item}`}>
<Tabs.TabPane key={item} title={`Tab ${item}`}>
{' '}
Tab {item}{' '}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
<h2>{translated.title12}</h2>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title13}</h2>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title7}</h2>
<Tabs
value={tab1value}
......@@ -290,9 +352,9 @@ const TabsDemo = () => {
}}
size="large"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab1value}
......@@ -301,9 +363,9 @@ const TabsDemo = () => {
}}
size="normal"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab1value}
......@@ -312,9 +374,9 @@ const TabsDemo = () => {
}}
size="small"
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<h2>{translated.title8}</h2>
......@@ -339,9 +401,9 @@ const TabsDemo = () => {
}}
>
{list6.map((item) => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</div>
......
src/packages/tabs/doc.en-US.md
浏览文件 @ 4857c6fc
......@@ -8,16 +8,22 @@ It is often used for the storage and display of large blocks of content in the l
```ts
// react
import { Tabs } from '@nutui/nutui-react';
```
```ts
// 1.4.9 废弃
import { Tabs, TabPane } from '@nutui/nutui-react';
```
### Basic Usage
:::demo
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -26,9 +32,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -44,7 +50,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -53,9 +59,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} type="smile">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -71,7 +77,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -80,9 +86,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} leftAlign>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -98,7 +104,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -107,9 +113,9 @@ const App = () => {
<Tabs value={tab2value} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0"> Tab 1 </TabPane>
<TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1" paneKey="0"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -127,7 +133,7 @@ Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will ch
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -136,14 +142,14 @@ const App = () => {
<Tabs value={tab2value} autoHeight onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1"> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -160,7 +166,7 @@ export default App;
```tsx
import React, { useState,useEffect } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab3value, setTab3value] = useState('0');
......@@ -177,8 +183,8 @@ const App = () => {
<Tabs value={tab3value} onChange={({ paneKey }) => {
setTab3value(paneKey)
}}>
{list3.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list3.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -194,7 +200,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab4value, setTab4value] = useState('0');
......@@ -204,8 +210,8 @@ const App = () => {
<Tabs value={tab4value} onChange={({ paneKey }) => {
setTab4value(paneKey)
}} titleScroll titleGutter="10">
{list4.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list4.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -221,7 +227,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab5value, setTab5value] = useState('0');
......@@ -231,8 +237,8 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab5value} onChange={({ paneKey }) => {
setTab5value(paneKey)
}} titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -248,7 +254,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab6value, setTab6value] = useState('0');
......@@ -258,8 +264,79 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab6value} onChange={({ paneKey }) => {
setTab6value(paneKey)
}} type="smile" titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
};
export default App;
```
:::
### Tabs in Tabs
:::demo
```tsx
import React, { useState } from "react";
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
return (
<>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -275,7 +352,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -284,23 +361,23 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="large">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="normal">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="small">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -316,7 +393,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane, Icon } from '@nutui/nutui-react';
import { Tabs, Icon } from '@nutui/nutui-react';
const App = () => {
const [tab7value, setTab7value] = useState('c1');
......@@ -354,9 +431,9 @@ const App = () => {
}>
{list6.map(item => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</>
......@@ -393,7 +470,7 @@ export default App;
|---------|----------------|
| default | Custom Default Content |
### Tabpane Props
### Tabs.TabPane Props
| Attribute | Description | Type | Default |
|----------|-------------------------|---------|------------------|
......
src/packages/tabs/doc.md
浏览文件 @ 4857c6fc
......@@ -8,6 +8,11 @@
```ts
// react
import { Tabs } from '@nutui/nutui-react';
```
```ts
// 1.4.9 废弃
import { Tabs, TabPane } from '@nutui/nutui-react';
```
......@@ -19,7 +24,7 @@ import { Tabs, TabPane } from '@nutui/nutui-react';
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -28,9 +33,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -46,7 +51,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -55,9 +60,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} type="smile">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -73,7 +78,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -82,9 +87,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} leftAlign>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -100,7 +105,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -109,9 +114,9 @@ const App = () => {
<Tabs value={tab2value} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0"> Tab 1 </TabPane>
<TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1" paneKey="0"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -129,7 +134,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -138,7 +143,7 @@ const App = () => {
<Tabs value={tab2value} tabStyle={{ position: 'sticky', top: '0px', zIndex: 1 }} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
......@@ -147,8 +152,8 @@ const App = () => {
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
......@@ -157,8 +162,8 @@ const App = () => {
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
</TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -175,7 +180,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -184,14 +189,14 @@ const App = () => {
<Tabs value={tab2value} autoHeight onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1"> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -207,7 +212,7 @@ export default App;
```tsx
import React, { useState, useEffect } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab3value, setTab3value] = useState('0');
......@@ -224,8 +229,8 @@ const App = () => {
<Tabs value={tab3value} onChange={({ paneKey }) => {
setTab3value(paneKey)
}}>
{list3.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list3.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -241,7 +246,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab4value, setTab4value] = useState('0');
......@@ -251,8 +256,8 @@ const App = () => {
<Tabs value={tab4value} onChange={({ paneKey }) => {
setTab4value(paneKey)
}} titleScroll titleGutter="10">
{list4.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list4.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -268,7 +273,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab5value, setTab5value] = useState('0');
......@@ -278,8 +283,8 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab5value} onChange={({ paneKey }) => {
setTab5value(paneKey)
}} titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -295,7 +300,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab6value, setTab6value] = useState('0');
......@@ -305,8 +310,80 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab6value} onChange={({ paneKey }) => {
setTab6value(paneKey)
}} type="smile" titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
};
export default App;
```
:::
### 嵌套布局
:::demo
```tsx
import React, { useState } from "react";
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
return (
<>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -322,7 +399,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -331,23 +408,23 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="large">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="normal">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="small">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -363,7 +440,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane, Icon } from '@nutui/nutui-react';
import { Tabs, Icon } from '@nutui/nutui-react';
const App = () => {
const [tab7value, setTab7value] = useState('c1');
......@@ -401,9 +478,9 @@ const App = () => {
}>
{list6.map(item => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</>
......@@ -441,7 +518,7 @@ export default App;
|---------|----------------|
| default | 自定义内容 |
### Tabpane Props
### Tabs.Tabpane Props
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-----------------|---------|------------------|
......
src/packages/tabs/doc.taro.md
浏览文件 @ 4857c6fc
......@@ -7,9 +7,16 @@
### 安装
```ts
// react
import { Tabs } from '@nutui/nutui-react-taro';
```
```ts
// 1.4.9 废弃
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
```
## 代码演示
### 基础用法
......@@ -18,7 +25,7 @@ import { Tabs, TabPane } from '@nutui/nutui-react-taro';
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -27,9 +34,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -45,7 +52,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -54,9 +61,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} type="smile">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -73,7 +80,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -82,9 +89,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} leftAlign>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -100,7 +107,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -109,9 +116,9 @@ const App = () => {
<Tabs value={tab2value} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0"> Tab 1 </TabPane>
<TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1" paneKey="0"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -129,7 +136,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -138,7 +145,7 @@ const App = () => {
<Tabs value={tab2value} tabStyle={{ position: 'sticky', top: '0px', zIndex: 1 }} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
......@@ -147,8 +154,8 @@ const App = () => {
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1">
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1">
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
......@@ -157,8 +164,8 @@ const App = () => {
<p>Tab 2</p>
<p>Tab 2</p>
<p>Tab 2</p>
</TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -175,7 +182,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -184,14 +191,14 @@ const App = () => {
<Tabs value={tab2value} autoHeight onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0">
<Tabs.TabPane title="Tab 1" paneKey="0">
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
<p>Tab 1</p>
</TabPane>
<TabPane title="Tab 2" paneKey="1"> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -207,7 +214,7 @@ export default App;
```tsx
import React, { useState, useEffect } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab3value, setTab3value] = useState('0');
......@@ -224,8 +231,8 @@ const App = () => {
<Tabs value={tab3value} onChange={({ paneKey }) => {
setTab3value(paneKey)
}}>
{list3.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list3.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -241,7 +248,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab4value, setTab4value] = useState('0');
......@@ -251,8 +258,8 @@ const App = () => {
<Tabs value={tab4value} onChange={({ paneKey }) => {
setTab4value(paneKey)
}} titleScroll titleGutter="10">
{list4.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list4.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -268,7 +275,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab5value, setTab5value] = useState('0');
......@@ -278,8 +285,8 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab5value} onChange={({ paneKey }) => {
setTab5value(paneKey)
}} titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -295,7 +302,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab6value, setTab6value] = useState('0');
......@@ -305,8 +312,79 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab6value} onChange={({ paneKey }) => {
setTab6value(paneKey)
}} type="smile" titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
};
export default App;
```
:::
### 嵌套布局
:::demo
```tsx
import React, { useState } from "react";
import { Tabs } from '@nutui/nutui-react-taro';
const App = () => {
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
return (
<>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -322,7 +400,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react-taro';
import { Tabs} from '@nutui/nutui-react-taro';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -331,23 +409,23 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="large">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="normal">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="small">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -401,9 +479,9 @@ const App = () => {
}>
{list6.map(item => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</>
......@@ -441,7 +519,7 @@ export default App;
|---------|----------------|
| default | 自定义内容 |
### Tabpane Props
### Tabs.Tabpane Props
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-----------------|---------|------------------|
......
src/packages/tabs/doc.zh-TW.md
浏览文件 @ 4857c6fc
......@@ -8,9 +8,15 @@
```ts
// react
import { Tabs } from '@nutui/nutui-react';
```
```ts
// 1.4.9 废弃
import { Tabs, TabPane } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
......@@ -19,7 +25,7 @@ import { Tabs, TabPane } from '@nutui/nutui-react';
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -28,9 +34,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -46,7 +52,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -55,9 +61,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} type="smile">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -73,7 +79,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -82,9 +88,9 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} leftAlign>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -100,7 +106,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab2value, setTab2value] = useState('0');
......@@ -109,9 +115,9 @@ const App = () => {
<Tabs value={tab2value} onChange={({ paneKey }) => {
setTab2value(paneKey)
}}>
<TabPane title="Tab 1" paneKey="0"> Tab 1 </TabPane>
<TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </TabPane>
<TabPane title="Tab 3" paneKey="2"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1" paneKey="0"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2" paneKey="1" disabled> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3" paneKey="2"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -127,7 +133,7 @@ export default App;
```tsx
import React, { useState,useEffect } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab3value, setTab3value] = useState('0');
......@@ -144,8 +150,8 @@ const App = () => {
<Tabs value={tab3value} onChange={({ paneKey }) => {
setTab3value(paneKey)
}}>
{list3.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list3.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -161,7 +167,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab4value, setTab4value] = useState('0');
......@@ -171,8 +177,8 @@ const App = () => {
<Tabs value={tab4value} onChange={({ paneKey }) => {
setTab4value(paneKey)
}} titleScroll titleGutter="10">
{list4.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list4.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -188,7 +194,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab5value, setTab5value] = useState('0');
......@@ -198,8 +204,8 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab5value} onChange={({ paneKey }) => {
setTab5value(paneKey)
}} titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${ item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
......@@ -215,7 +221,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab6value, setTab6value] = useState('0');
......@@ -225,8 +231,79 @@ const App = () => {
<Tabs style={{ height: '300px' }} value={tab6value} onChange={({ paneKey }) => {
setTab6value(paneKey)
}} type="smile" titleScroll direction="vertical">
{list5.map(item => <TabPane key={item}
title={`Tab ${item}`}> Tab {item} </TabPane>)}
{list5.map(item => <Tabs.TabPane key={item}
title={`Tab ${item}`}> Tab {item} </Tabs.TabPane>)}
</Tabs>
</>
);
};
export default App;
```
:::
### 嵌套布局
:::demo
```tsx
import React, { useState } from "react";
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab8value, setTab8value] = useState('0')
const [tab9value, setTab9value] = useState('0')
return (
<>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
type="smile"
direction="vertical"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
type="smile"
direction="horizontal"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs
value={tab8value}
onChange={({ paneKey }) => {
setTab8value(paneKey)
}}
autoHeight
type="smile"
>
<Tabs.TabPane title="Tab 1">
<Tabs
value={tab9value}
onChange={({ paneKey }) => {
setTab9value(paneKey)
}}
direction="vertical"
>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -242,7 +319,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Tabs, TabPane } from '@nutui/nutui-react';
import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('0');
......@@ -251,23 +328,23 @@ const App = () => {
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="large">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="normal">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
<Tabs value={tab1value} onChange={({ paneKey }) => {
setTab1value(paneKey)
}} size="small">
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
<Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
</Tabs>
</>
);
......@@ -321,9 +398,9 @@ const App = () => {
}>
{list6.map(item => (
<TabPane key={item.paneKey} paneKey={item.paneKey}>
<Tabs.TabPane key={item.paneKey} paneKey={item.paneKey}>
{item.title}
</TabPane>
</Tabs.TabPane>
))}
</Tabs>
</>
......@@ -361,7 +438,7 @@ export default App;
|---------|----------------|
| default | 自定义内容 |
### Tabpane Props
### Tabs.Tabpane Props
| 参数 | 说明 | 类型 | 默认值 |
|----------|-------------------------|---------|------------------|
......
src/packages/tabs/tabs.scss
浏览文件 @ 4857c6fc
......@@ -51,7 +51,7 @@
box-sizing: border-box;
flex-direction: column;
height: 100%;
padding: 10px 0 !important;
padding: 0 !important;
width: $tabs-vertical-titles-width;
flex-shrink: 0;
......@@ -111,6 +111,49 @@
height: 100%;
}
}
.horizontal {
.nut-tabs__titles {
display: flex;
flex-direction: row;
padding: 0 !important;
width: 100%;
.nut-tabs__titles-item {
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
.nut-tabs__titles-item__smile,
.nut-tabs__titles-item__line {
position: absolute;
transition: width 0.3s ease;
width: 0;
height: 0;
content: ' ';
bottom: $tabs-horizontal-tab-line-bottom;
left: 50%;
transform: translate(-50%, 0);
overflow: hidden;
border-radius: $tabs-horizontal-tab-line-border-radius;
opacity: $tabs-horizontal-tab-line-opacity;
}
&.active {
color: $tabs-titles-item-active-color;
font-weight: $tabs-titles-item-active-font-weight;
.nut-tabs__titles-item__line {
content: ' ';
width: $tabs-horizontal-titles-item-active-line-width;
height: $tabs-horizontal-titles-item-active-line-height;
background: $tabs-horizontal-tab-line-color;
}
}
}
}
}
}
.nut-tabs__titles {
......@@ -171,7 +214,6 @@
position: relative;
font-size: $tabs-titles-item-font-size;
min-width: $tabs-horizontal-titles-item-min-width;
width: 0;
display: flex;
align-items: center;
justify-content: center;
......
src/packages/tabs/tabs.taro.tsx
浏览文件 @ 4857c6fc
......@@ -3,6 +3,7 @@ import classNames from 'classnames'
import bem from '@/utils/bem'
import Icon from '@/packages/icon/index.taro'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import TabPane from '@/packages/tabpane/index.taro'
class Title {
title = ''
......@@ -59,7 +60,12 @@ const defaultProps = {
const pxCheck = (value: string | number): string => {
return Number.isNaN(Number(value)) ? String(value) : `${value}px`
}
export const Tabs: FunctionComponent<Partial<TabsProps>> = (props) => {
export const Tabs: FunctionComponent<
Partial<TabsProps>
// & React.HTMLAttributes<HTMLDivElement>
> & {
TabPane: typeof TabPane
} = (props) => {
const {
value,
color,
......@@ -243,3 +249,4 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> = (props) => {
Tabs.defaultProps = defaultProps
Tabs.displayName = 'NutTabs'
Tabs.TabPane = TabPane
src/packages/tabs/tabs.tsx
浏览文件 @ 4857c6fc
......@@ -3,6 +3,7 @@ import classNames from 'classnames'
import bem from '@/utils/bem'
import Icon from '@/packages/icon'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import TabPane from '@/packages/tabpane'
class Title {
title = ''
......@@ -59,7 +60,12 @@ const defaultProps = {
const pxCheck = (value: string | number): string => {
return Number.isNaN(Number(value)) ? String(value) : `${value}px`
}
export const Tabs: FunctionComponent<Partial<TabsProps>> = (props) => {
export const Tabs: FunctionComponent<
Partial<TabsProps>
// & React.HTMLAttributes<HTMLDivElement>
> & {
TabPane: typeof TabPane
} = (props) => {
const {
value,
color,
......@@ -243,3 +249,4 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> = (props) => {
Tabs.defaultProps = defaultProps
Tabs.displayName = 'NutTabs'
Tabs.TabPane = TabPane
src/packages/uploader/demo.scss
浏览文件 @ 4857c6fc
.demo-uploader {
padding: 57px 17px 15px 17px !important;
}
.demo {
.cell-wrap {
flex-wrap: wrap;
}
}
src/packages/uploader/demo.taro.tsx
浏览文件 @ 4857c6fc
......@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Button, Uploader, Progress, Cell } from '@/packages/nutui.react.taro'
import '@/packages/uploader/demo.scss'
import Header from '@/sites/components/header'
export type FileItemStatus =
......@@ -35,6 +36,7 @@ export class FileItem {
interface uploadRefState {
submit: () => void
clear: () => void
}
interface T {
......@@ -55,6 +57,7 @@ interface T {
'37c65f47': string
bb5caa9c: string
'27f1376e': string
videoUploader: string
'0e5eaea3': string
b7454181: string
'5c393e52': string
......@@ -62,6 +65,7 @@ interface T {
uploadXhrCustom: string
'67fffe24': string
fcf01d1a: string
clearBtnUpload: string
'7db1a8b2': string
}
const UploaderDemo = () => {
......@@ -84,6 +88,7 @@ const UploaderDemo = () => {
'37c65f47': '自定义上传样式',
bb5caa9c: '上传文件',
'27f1376e': '直接调起摄像头（移动端生效）',
videoUploader: '使用前摄像头拍摄3s视频并上传(仅支持微信小程序)',
'0e5eaea3': '限制上传数量5个',
b7454181: '限制上传大小（每个文件最大不超过50kb）',
'5c393e52': '图片压缩（在beforeupload钩子中处理）',
......@@ -91,6 +96,7 @@ const UploaderDemo = () => {
uploadXhrCustom: '自定义 Taro.uploadFile 上传方式(before-xhr-upload)',
'67fffe24': '选中文件后，通过按钮手动执行上传',
fcf01d1a: '执行上传',
clearBtnUpload: '手动清空上传',
'7db1a8b2': '禁用状态',
},
'zh-TW': {
......@@ -111,6 +117,7 @@ const UploaderDemo = () => {
'37c65f47': '自定義上傳樣式',
bb5caa9c: '上傳檔',
'27f1376e': '直接調起攝像頭（移動端生效）',
videoUploader: '使用前監視器拍攝3s視頻並上傳（僅支持微信小程式）',
'0e5eaea3': '限制上傳數量5個',
b7454181: '限制上傳大小（每個檔案最大不超過50kb）',
'5c393e52': '圖片壓縮（在beforeupload鉤子中處理）',
......@@ -118,6 +125,7 @@ const UploaderDemo = () => {
uploadXhrCustom: '自定義 Taro.uploadFile 上傳方式(before-xhr-upload)',
'67fffe24': '選取檔後，通過按鈕手動執行上傳',
fcf01d1a: '執行上傳',
clearBtnUpload: '手動清空上傳',
'7db1a8b2': '禁用狀態',
},
'en-US': {
......@@ -138,6 +146,8 @@ const UploaderDemo = () => {
'37c65f47': 'Customize the upload style',
bb5caa9c: 'Upload the file',
'27f1376e': 'Direct camera up (mobile)',
videoUploader:
'Use the front camera to capture 3s video and upload it (only support WeChat applet)',
'0e5eaea3': 'Limit the number of uploads to 5',
b7454181: 'Limit upload size (maximum 50kb per file)',
'5c393e52': 'Image compression (handled in a foreupload hook)',
......@@ -146,6 +156,7 @@ const UploaderDemo = () => {
'67fffe24':
'After selecting Chinese, manually perform the upload via the button',
fcf01d1a: 'Perform the upload',
clearBtnUpload: 'Clear upload manually',
'7db1a8b2': 'Disabled state',
},
})
......@@ -163,7 +174,7 @@ const UploaderDemo = () => {
status: 'success',
message: translated['844759c9'],
type: 'image',
uid: '123',
uid: '122',
},
{
name: translated.df9128ec,
......@@ -196,7 +207,7 @@ const UploaderDemo = () => {
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
uid: '126',
loadingIcon: 'loading1',
},
{
......@@ -205,7 +216,7 @@ const UploaderDemo = () => {
status: 'uploading',
message: translated['403b055e'],
type: 'image',
uid: '125',
uid: '127',
loadingIcon: ' ',
},
]
......@@ -258,16 +269,19 @@ const UploaderDemo = () => {
const submitUpload = () => {
;(uploadRef.current as uploadRefState).submit()
}
const clearUpload = () => {
;(uploadRef.current as uploadRefState).clear()
}
return (
<>
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} bg-w`}>
<h2>{translated['84aa6bce']}</h2>
<Cell>
<Cell className="cell-wrap">
<Uploader
url={uploadUrl}
onStart={onStart}
style={{ marginRight: '10px' }}
style={{ marginRight: '10px', marginBottom: '10px' }}
/>
<Uploader
url={uploadUrl}
......@@ -323,6 +337,14 @@ const UploaderDemo = () => {
<h2>{translated['27f1376e']}</h2>
<Uploader url={uploadUrl} sourceType={['camera']} />
<h2>{translated.videoUploader}</h2>
<Uploader
url={uploadUrl}
maxDuration={3}
sourceType={['camera']}
camera="front"
/>
<h2>{translated['0e5eaea3']}</h2>
<Uploader url={uploadUrl} maximum="5" multiple />
......@@ -351,10 +373,17 @@ const UploaderDemo = () => {
autoUpload={false}
ref={uploadRef}
/>
<br />
<Button type="success" size="small" onClick={submitUpload}>
<Button
type="success"
size="small"
onClick={submitUpload}
style={{ marginRight: '10px', marginTop: '20px' }}
>
{translated.fcf01d1a}
</Button>
<Button type="danger" size="small" onClick={clearUpload}>
{translated.clearBtnUpload}
</Button>
<h2>{translated['7db1a8b2']}</h2>
<Uploader disabled />
......
src/packages/uploader/demo.tsx
浏览文件 @ 4857c6fc
此差异已折叠。
src/packages/uploader/doc.en-US.md
浏览文件 @ 4857c6fc
此差异已折叠。
src/packages/uploader/doc.md
浏览文件 @ 4857c6fc
此差异已折叠。
src/packages/uploader/doc.taro.md
浏览文件 @ 4857c6fc
此差异已折叠。
src/packages/uploader/upload.ts
浏览文件 @ 4857c6fc
此差异已折叠。
src/packages/uploader/uploader.scss
浏览文件 @ 4857c6fc
......@@ -184,6 +184,7 @@
font-size: 12px;
color: $white;
text-align: center;
box-sizing: border-box;
height: $uploader-preview-tips-height;
line-height: $uploader-preview-tips-height;
border-radius: $uploader-picture-border-radius;
......@@ -195,8 +196,9 @@
}
&__c {
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
border-radius: 6px;
}
&__file {
......
src/packages/uploader/uploader.tsx
浏览文件 @ 4857c6fc
此差异已折叠。
src/utils/Interceptor.ts 0 → 100644
浏览文件 @ 4857c6fc
import { isPromise } from './index'
export type Interceptor = (
...args: any[]
) => Promise<boolean> | boolean | undefined | void
export const funcInterceptor = (
interceptor: Interceptor | undefined,
{
args = [],
done,
canceled,
}: {
args?: unknown[]
done: (val?: any) => void
canceled?: () => void
}
) => {
if (interceptor) {
const returnVal = interceptor.apply(null, args)
if (isPromise(returnVal)) {
returnVal
.then((value) => {
if (value) {
done(value)
} else if (canceled) {
canceled()
}
})
.catch(() => {})
} else if (returnVal) {
done()
} else if (canceled) {
canceled()
}
} else {
done()
}
}
src/utils/index.ts
浏览文件 @ 4857c6fc
export const isObject = (val: unknown): val is Record<any, any> =>
val !== null && typeof val === 'object'
export const isFunction = (val: unknown): val is Function =>
typeof val === 'function'
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
vite.config.build.taro.ts
浏览文件 @ 4857c6fc
......@@ -46,7 +46,7 @@ export default defineConfig({
emptyOutDir: true,
rollupOptions: {
// 请确保外部化那些你的库中不需要的依赖
external: ['react', 'react-dom', '@tarojs/taro'],
external: ['react', 'react-dom', '@tarojs/taro', '@tarojs/components'],
output: {
banner,
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或