Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
7b83bc27
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
7b83bc27
编写于
2月 11, 2022
作者:
L
lkjh3214
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'upstream_main' into dev
上级
e628f164
fe41f22f
变更
7
显示空白变更内容
内联
并排
Showing
7 changed file
with
279 addition
and
140 deletion
+279
-140
README.md
README.md
+120
-55
package.json
package.json
+1
-1
scripts/replace-types-alias.js
scripts/replace-types-alias.js
+17
-14
src/packages/address/address.tsx
src/packages/address/address.tsx
+2
-0
src/packages/address/customRender.tsx
src/packages/address/customRender.tsx
+34
-0
src/packages/address/demo.tsx
src/packages/address/demo.tsx
+30
-21
src/packages/address/doc.md
src/packages/address/doc.md
+75
-49
未找到文件。
README.md
浏览文件 @
7b83bc27
<p
align=
"center"
>
<img
alt=
"logo"
src=
"https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png"
width=
"150"
style=
"margin-bottom: 10px;"
>
</p>
...
...
@@ -6,61 +7,125 @@
<p
align=
"center"
>
<a
href=
"http://makeapullrequest.com"
>
<img
src=
"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"
alt=
"PRs Welcome"
>
</a>
<a
href=
"https://github.com/jdf2e/nutui-react"
>
<img
src=
"https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master"
alt=
"Coverage Status"
/>
</a>
<a
href=
"https://github.com/jdf2e/nutui-react"
>
<img
src=
"https://img.shields.io/travis/jdf2e/nutui.svg?style=flat-square"
>
<img
src=
"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"
alt=
"PRs Welcome"
/>
</a>
<a
href=
"https://github.com/jdf2e/nutui-react"
>
<a
href=
"https://github.com/jdf2e/nutui"
>
<img src="https://img.shields.io/npm/l/@nutui/nutui-react.svg" alt="license"/>
</a>
<a
href=
"https://www.npmjs.com/package/@nutui/nutui-react"
>
<img src="https://img.shields.io/npm/v/@nutui/nutui-react.svg?style=flat-square">
</a>
<a
href=
"https://www.npmjs.com/package/@nutui/nutui-react"
>
<img src="https://img.shields.io/npm/dt/@nutui/nutui-react.svg?style=flat-square">
</a>
<a
href=
"https://github.com/jdf2e/nutui"
>
<img
src=
"https://img.shields.io/github/contributors/jdf2e/nutui-react"
alt=
"GitHub contributors"
>
</a>
</p>
> Nut[nʌt],源自电影《冰河世纪》里松鼠 Scrat "执迷不悟",一生追求,即便引发大灾难也绝不松手的坚果。
---
## 特性
*
🚀 70+ 高质量组件(React 1.0 持续开发中),覆盖移动端主流场景
*
📖 基于京东APP 10.0 视觉规范
*
🍭 支持按需引用
*
📖 详尽的文档和示例
*
💪 支持 TypeScript
*
💪 支持服务端渲染(测试阶段)
*
🍭 支持定制主题
*
🍭 单元测试覆盖(1.0 开发中),保障稳定性
*
📖 提供 Sketch 设计资源
## 示例 H5 & 小程序
<p>
<img
src=
"https://img12.360buyimg.com/imagetools/jfs/t1/202336/18/18586/7437/61b832ccE0b13d53d/18605da7232a5a0e.png"
height=
"250"
alt=
"NutUI"
/>
</p>
## 构建版本
> AMD 环境、Webpack、Vite 等构建工具环境、服务端建议使用 es 版,非模块化环境(如通过 `<script>` 标签直接引用)建议使用 umd 压缩版。
*
es
**nutui.react.es.js**
*
umd
**nutui.umd.js**
## 链接
<ul>
<li>
<a
href=
"https://github.com/jdf2e/nutui-react/discussions"
>
Discussions (用👍投票)
</a>
<a
href=
"https://github.com/jdf2e/nutui-react"
>
<img
src=
"https://img.shields.io/github/commit-activity/w/jdf2e/nutui-react"
alt=
"GitHub commit activity"
>
</li>
<li>
<a
href=
"https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22"
>
Feature Requests (用👍投票)
</a>
<a
href=
"https://github.com/jdf2e/nutui-react"
>
<img
src=
"https://img.shields.io/github/issues-closed/jdf2e/nutui-react"
alt=
"GitHub closed issues"
>
</li>
<li>
<a
href=
"https://github.com/jdf2e/nutui-react/labels/bug%203.0"
>
Bugs (用👍投票)
</a>
</p>
</li>
<li>
<a
href=
"https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion"
>
Question (用👍投票)
</a>
</li>
</ul>
[
//
]:
#
(## 开发交流)
[
//
]:
#
()
[
//
]:
#
(| 版本 | 微信群 |内部咚咚群 |)
[
//
]:
#
(| --- | --- |--- |)
[
//
]:
#
(| [NutUI React](https://github.com/jdf2e/nutui-react/issues) | 回复「NutUI」 | 1022619199)
[
//
]:
#
(| [NutUI Vue](https://github.com/jdf2e/nutui/issues) | <img src="https://nutui.jd.com/3x/3.1.12/vx-code1.png" width="100" /> 关注后回复「NutUI」 | 82957939)
[
//
]:
#
(| [NutUI x Taro](https://github.com/jdf2e/nutui/issues) | <img src="https://camo.githubusercontent.com/db4276b4ee4b443158195e943e9e678cb4d2afb7580f70d4d817ef0a90413aec/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f7461726f2d6a642d636f6d2f7374617469632f636f6e746163745f7461726f5f6e757475695f71722e706e67" width="100" /> 关注后回复「NutUI」 | 1022545110 |)
[
//
]:
#
()
[
//
]:
#
(## 贡献者们)
[
//
]:
#
()
[
//
]:
#
(感谢以下小伙伴们为 NutUI 发展做出的贡献:)
[
//
]:
#
()
[
//
]:
#
(<a href="https://github.com/jdf2e/nutui/graphs/contributors">)
[
//
]:
#
( <img src="https://opencollective.com/nutui/contributors.svg?width=890&button=false" alt="contributors">)
[
//
]:
#
(</a>)
## 参与共建
非常欢迎社区开发者为 NutUI 贡献代码,在贡献之前请先阅读
[
贡献指南
](
https://nutui.jd.com/#/contributing
)
,参与共建提
[
PR
](
https://github.com/jdf2e/nutui/pulls
)
。
感谢以下所有给 NutUI 贡献过代码的
[
开发者
](
https://github.com/jdf2e/nutui/graphs/contributors
)
。
## 开发计划
[
Milestones
](
https://github.com/jdf2e/nutui-react/projects
)
## 更新日志
本项目遵从
[
Angular Style Commit Message Conventions
](
https://gist.github.com/stephenparish/9941e89d80e2bc58a153
)
,更新日志请查阅
[
Release
](
https://github.com/jdf2e/nutui-react/releases
)
。
## 开源协议
## 背景
随着 NutUI 的用户越来越多,在 NutUI 的交流群里对 React 版本的呼声也越来越高,我们积极响应社区的期待,于 2021 年年中开始规划并启动 React 版的开发,经过近半年的开发和打磨,将在 2022 年元旦前隆重推出 NutUI-React 元旦版。
## 组件开发状态
### 基础组件
-
[ ] Button
-
[ ] Cell
-
[ ] Icon
-
[ ] Layout
-
[ ] Popup
-
[ ] Toast
-
[ ] Calendar
-
[ ] Checkbox
-
[ ] DatePicker
-
[ ] Picker
-
[ ] Radio
-
[ ] Rate
-
[ ] Switch
-
[ ] Uploader
-
[ ] ActionSheet
-
[ ] Dialog
-
[ ] Notify
-
[ ] Overlay
-
[ ] PullRefresh
-
[ ] Badge
-
[ ] Circle
-
[ ] Collapse
-
[ ] CountDown
-
[ ] NoticeBar
-
[ ] Steps
-
[ ] NavBar
-
[ ] Tab
-
[ ] Tabbar
-
[ ] TreeSelect
本项目基于
**MIT**
协议
package.json
浏览文件 @
7b83bc27
...
...
@@ -4,7 +4,7 @@
"style"
:
"dist/style.css"
,
"main"
:
"dist/nutui.react.umd.js"
,
"module"
:
"dist/esm/nutui-react.es.js"
,
"typings"
:
"dist/
esm/types/src/packag
es/nutui.react.d.ts"
,
"typings"
:
"dist/
typ
es/nutui.react.d.ts"
,
"sideEffects"
:
[
"*.scss"
,
"dist/esm/**/style/*"
,
...
...
scripts/replace-types-alias.js
浏览文件 @
7b83bc27
// replace types alias for build
const
vfs
=
require
(
'
vinyl-fs
'
)
const
map
=
require
(
'
map-stream
'
)
const
dest_docs
=
'
./dist/esm/types/src/packages
'
const
fs
=
require
(
'
fs-extra
'
)
const
dest_docs
=
'
./dist/types
'
vfs
.
src
([
'
./dist/esm/types/src/packages/nutui.react.d.ts
'
])
...
...
@@ -16,9 +17,8 @@ vfs
})
)
.
pipe
(
vfs
.
dest
(
dest_docs
,
{
overwrite
:
true
}))
.
on
(
'
end
'
,
()
=>
{})
vfs
.
on
(
'
end
'
,
()
=>
{
vfs
.
src
([
'
./dist/esm/types/src/packages/**/*.d.ts
'
,
'
!./dist/esm/types/src/packages/*.d.ts
'
])
.
pipe
(
map
((
file
,
cb
)
=>
{
...
...
@@ -28,4 +28,7 @@ vfs
})
)
.
pipe
(
vfs
.
dest
(
dest_docs
,
{
overwrite
:
true
}))
.
on
(
'
end
'
,
()
=>
{})
.
on
(
'
end
'
,
()
=>
{
fs
.
remove
(
'
./dist/esm/types
'
)
})
})
src/packages/address/address.tsx
浏览文件 @
7b83bc27
...
...
@@ -172,6 +172,8 @@ export const Address: FunctionComponent<
[
tabName
[
i
]]:
{},
})
}
console
.
log
(
selectedRegion
)
}
// 关闭
const
closeFun
=
()
=>
{
...
...
src/packages/address/customRender.tsx
浏览文件 @
7b83bc27
...
...
@@ -223,6 +223,40 @@ export const CustomRender: FunctionComponent<
nextAreaList
(
item
)
}
useEffect
(()
=>
{
const
{
province
}
=
{
...
defaultProps
,
...
props
}
setRegionList
({
...
regionList
,
province
:
isCustom2
()
?
transformData
(
province
)
:
province
,
})
},
[
province
])
useEffect
(()
=>
{
const
{
city
}
=
{
...
defaultProps
,
...
props
}
setRegionList
({
...
regionList
,
city
:
isCustom2
()
?
transformData
(
city
)
:
city
,
})
},
[
city
])
useEffect
(()
=>
{
const
{
country
}
=
{
...
defaultProps
,
...
props
}
setRegionList
({
...
regionList
,
country
:
isCustom2
()
?
transformData
(
country
)
:
country
,
})
},
[
country
])
useEffect
(()
=>
{
const
{
town
}
=
{
...
defaultProps
,
...
props
}
setRegionList
({
...
regionList
,
town
:
isCustom2
()
?
transformData
(
town
)
:
town
,
})
},
[
town
])
return
(
<
div
className
=
{
b
(
'
custom
'
)
}
>
<
div
className
=
{
b
(
'
region-tab
'
)
}
>
...
...
src/packages/address/demo.tsx
浏览文件 @
7b83bc27
...
...
@@ -45,20 +45,9 @@ const AddressDemo = () => {
{
id
:
5
,
name
:
'
浙江
'
,
title
:
'
Z
'
},
])
const
[
city
,
setCity
]
=
useState
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
const
[
city
,
setCity
]
=
useState
([])
const
[
country
,
setCountry
]
=
useState
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
const
[
country
,
setCountry
]
=
useState
([])
const
[
town
,
setTown
]
=
useState
([])
...
...
@@ -136,14 +125,34 @@ const AddressDemo = () => {
}
const
onChange
=
(
cal
:
CalBack
,
tag
:
string
)
=>
{
console
.
log
(
'
change
'
)
const
name
=
(
address
as
any
)[
cal
.
next
]
if
(
name
.
length
<
1
)
{
console
.
log
(
'
change
'
,
cal
)
setTimeout
(()
=>
{
switch
(
cal
.
next
)
{
case
'
city
'
:
setCity
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
break
case
'
country
'
:
setCountry
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
break
default
:
setShowPopup
({
...
showPopup
,
[
tag
]:
false
,
})
}
},
200
)
}
const
selected
=
(
prevExistAdd
:
AddressList
,
nowExistAdd
:
AddressList
,
arr
:
AddressList
[])
=>
{
...
...
src/packages/address/doc.md
浏览文件 @
7b83bc27
...
...
@@ -29,21 +29,11 @@ const App = () => {
{
id
:
5
,
name
:
'
浙江
'
,
title
:
'
Z
'
},
])
const
[
city
,
setCity
]
=
useState
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
const
[
city
,
setCity
]
=
useState
([])
const
[
country
,
setCountry
]
=
useState
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
const
[
country
,
setCountry
]
=
useState
([])
const
[
town
,
setTown
]
=
useState
([])
const
[
address
,
setAddress
]
=
useState
({
province
:
province
,
city
:
city
,
...
...
@@ -53,10 +43,29 @@ const App = () => {
const
onChange
=
(
cal
)
=>
{
const
name
=
address
[
cal
.
next
]
if
(
name
.
length
<
1
)
{
setTimeout
(()
=>
{
switch
(
cal
.
next
){
case
'
city
'
:
setCity
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
break
;
case
'
country
'
:
setCountry
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
break
;
default
:
setNormal
(
false
)
}
},
200
)
}
const
close
=
(
val
)
=>
{
console
.
log
(
val
)
...
...
@@ -104,7 +113,22 @@ const App = () => {
{
id
:
5
,
name
:
'
浙江
'
,
title
:
'
Z
'
},
])
const
[
city
,
setCity
]
=
useState
([
const
[
city
,
setCity
]
=
useState
([])
const
[
country
,
setCountry
]
=
useState
([])
const
[
town
,
setTown
]
=
useState
([])
const
[
address
,
setAddress
]
=
useState
({
province
:
province
,
city
:
city
,
country
:
country
,
town
:
town
,
})
const
onChange
=
(
cal
)
=>
{
setTimeout
(()
=>
{
switch
(
cal
.
next
){
case
'
city
'
:
setCity
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
...
...
@@ -112,25 +136,18 @@ const App = () => {
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
const
[
country
,
setCountry
]
=
useState
([
break
;
case
'
country
'
:
setCountry
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
const
[
town
,
setTown
]
=
useState
([])
const
[
address
,
setAddress
]
=
useState
({
province
:
province
,
city
:
city
,
country
:
country
,
town
:
town
,
})
const
onChange
=
(
cal
)
=>
{
const
name
=
address
[
cal
.
next
]
if
(
name
.
length
<
1
)
{
break
;
default
:
setNormal2
(
false
)
}
},
200
)
}
const
close
=
(
val
)
=>
{
setNormal2
(
false
)
...
...
@@ -360,20 +377,9 @@ const App = () => {
{
id
:
5
,
name
:
'
浙江
'
,
title
:
'
Z
'
},
])
const
[
city
,
setCity
]
=
useState
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
const
[
city
,
setCity
]
=
useState
([])
const
[
country
,
setCountry
]
=
useState
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
const
[
country
,
setCountry
]
=
useState
([])
const
[
town
,
setTown
]
=
useState
([])
const
[
address
,
setAddress
]
=
useState
({
province
:
province
,
...
...
@@ -422,10 +428,30 @@ const App = () => {
}
const
onChange
=
(
cal
)
=>
{
const
name
=
address
[
cal
.
next
]
if
(
name
.
length
<
1
)
{
setTimeout
(()
=>
{
switch
(
cal
.
next
){
case
'
city
'
:
setCity
([
{
id
:
7
,
name
:
'
朝阳区
'
,
title
:
'
C
'
},
{
id
:
8
,
name
:
'
崇文区
'
,
title
:
'
C
'
},
{
id
:
9
,
name
:
'
昌平区
'
,
title
:
'
C
'
},
{
id
:
6
,
name
:
'
石景山区
'
,
title
:
'
S
'
},
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
])
break
;
case
'
country
'
:
setCountry
([
{
id
:
3
,
name
:
'
八里庄街道
'
,
title
:
'
B
'
},
{
id
:
9
,
name
:
'
北苑
'
,
title
:
'
B
'
},
{
id
:
4
,
name
:
'
常营乡
'
,
title
:
'
C
'
},
])
break
;
default
:
setOther
(
false
)
}
},
200
)
}
const
close
=
(
val
)
=>
{
setOther
(
false
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录