Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
f292a54f
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
f292a54f
编写于
2月 27, 2023
作者:
A
AnteeHub
提交者:
GitHub
2月 27, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 修复组件可能存在 undefined 类名的情况,补充相应测试快照 (#726)
上级
a17bb496
变更
23
隐藏空白更改
内联
并排
Showing
23 changed file
with
109 addition
and
76 deletion
+109
-76
src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
...packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
+4
-4
src/packages/badge/badge.taro.tsx
src/packages/badge/badge.taro.tsx
+7
-2
src/packages/badge/badge.tsx
src/packages/badge/badge.tsx
+7
-2
src/packages/card/__test__/__snapshots__/card.spec.tsx.snap
src/packages/card/__test__/__snapshots__/card.spec.tsx.snap
+5
-5
src/packages/card/card.taro.tsx
src/packages/card/card.taro.tsx
+2
-1
src/packages/card/card.tsx
src/packages/card/card.tsx
+2
-1
src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap
...es/collapse/__test__/__snapshots__/collapse.spec.tsx.snap
+1
-1
src/packages/collapse/collapse.taro.tsx
src/packages/collapse/collapse.taro.tsx
+2
-1
src/packages/collapse/collapse.tsx
src/packages/collapse/collapse.tsx
+2
-1
src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap
src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap
+9
-16
src/packages/grid/grid.taro.tsx
src/packages/grid/grid.taro.tsx
+5
-3
src/packages/grid/grid.tsx
src/packages/grid/grid.tsx
+5
-3
src/packages/griditem/griditem.taro.tsx
src/packages/griditem/griditem.taro.tsx
+9
-6
src/packages/griditem/griditem.tsx
src/packages/griditem/griditem.tsx
+9
-6
src/packages/indicator/indicator.taro.tsx
src/packages/indicator/indicator.taro.tsx
+1
-1
src/packages/indicator/indicator.tsx
src/packages/indicator/indicator.tsx
+1
-1
src/packages/rate/rate.taro.tsx
src/packages/rate/rate.taro.tsx
+5
-5
src/packages/rate/rate.tsx
src/packages/rate/rate.tsx
+5
-5
src/packages/sticky/__test__/__snapshots__/sticky.spec.tsx.snap
...ckages/sticky/__test__/__snapshots__/sticky.spec.tsx.snap
+1
-1
src/packages/sticky/sticky.taro.tsx
src/packages/sticky/sticky.taro.tsx
+12
-7
src/packages/sticky/sticky.tsx
src/packages/sticky/sticky.tsx
+11
-2
src/packages/swipe/swipe.taro.tsx
src/packages/swipe/swipe.taro.tsx
+2
-1
src/packages/swipe/swipe.tsx
src/packages/swipe/swipe.tsx
+2
-1
未找到文件。
src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
浏览文件 @
f292a54f
...
@@ -3,7 +3,7 @@
...
@@ -3,7 +3,7 @@
exports[`should match custom icons 1`] = `
exports[`should match custom icons 1`] = `
<DocumentFragment>
<DocumentFragment>
<div
<div
class="nut-badge
undefined
"
class="nut-badge"
>
>
<div
<div
class="slot-icons"
class="slot-icons"
...
@@ -15,7 +15,7 @@ exports[`should match custom icons 1`] = `
...
@@ -15,7 +15,7 @@ exports[`should match custom icons 1`] = `
</div>
</div>
<div />
<div />
<div
<div
class="
nut-badge__content sup"
class="nut-badge__content sup"
style="top: 0px; right: 0px; z-index: 0;"
style="top: 0px; right: 0px; z-index: 0;"
>
>
200
200
...
@@ -27,11 +27,11 @@ exports[`should match custom icons 1`] = `
...
@@ -27,11 +27,11 @@ exports[`should match custom icons 1`] = `
exports[`should match snapshot 1`] = `
exports[`should match snapshot 1`] = `
<DocumentFragment>
<DocumentFragment>
<div
<div
class="nut-badge
undefined
"
class="nut-badge"
>
>
<div />
<div />
<div
<div
class="
nut-badge__content sup"
class="nut-badge__content sup"
style="top: 0px; right: 0px; z-index: 0;"
style="top: 0px; right: 0px; z-index: 0;"
>
>
8
8
...
...
src/packages/badge/badge.taro.tsx
浏览文件 @
f292a54f
import
React
,
{
CSSProperties
,
FunctionComponent
,
ReactNode
}
from
'
react
'
import
React
,
{
CSSProperties
,
FunctionComponent
,
ReactNode
}
from
'
react
'
import
classNames
from
'
classnames
'
import
Icon
from
'
@/packages/icon/index.taro
'
import
Icon
from
'
@/packages/icon/index.taro
'
import
bem
from
'
@/utils/bem
'
import
{
BasicComponent
,
ComponentDefaults
}
from
'
@/utils/typings
'
import
{
BasicComponent
,
ComponentDefaults
}
from
'
@/utils/typings
'
...
@@ -18,6 +20,8 @@ export interface BadgeProps extends BasicComponent {
...
@@ -18,6 +20,8 @@ export interface BadgeProps extends BasicComponent {
export
type
BadgeType
=
'
default
'
|
'
primary
'
|
'
success
'
|
'
warning
'
|
'
danger
'
export
type
BadgeType
=
'
default
'
|
'
primary
'
|
'
success
'
|
'
warning
'
|
'
danger
'
const
b
=
bem
(
'
badge
'
)
const
defaultProps
=
{
const
defaultProps
=
{
...
ComponentDefaults
,
...
ComponentDefaults
,
className
:
''
,
className
:
''
,
...
@@ -64,8 +68,9 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
...
@@ -64,8 +68,9 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
style
.
background
=
color
style
.
background
=
color
return
style
return
style
}
}
return
(
return
(
<
div
className
=
{
`nut-badge
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
>
{
icons
!==
''
&&
(
{
icons
!==
''
&&
(
<
div
className
=
"slot-icons"
>
<
div
className
=
"slot-icons"
>
<
Icon
<
Icon
...
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
...
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
)
}
)
}
<
div
>
{
children
}
</
div
>
<
div
>
{
children
}
</
div
>
<
div
<
div
className
=
{
`
${
dot
?
'
is-dot
'
:
''
}
nut-badge__content sup`
}
className
=
{
classNames
({
'
is-dot
'
:
dot
},
b
(
'
content
'
),
'
sup
'
)
}
style
=
{
getStyle
()
}
style
=
{
getStyle
()
}
>
>
{
content
()
}
{
content
()
}
...
...
src/packages/badge/badge.tsx
浏览文件 @
f292a54f
import
React
,
{
CSSProperties
,
FunctionComponent
,
ReactNode
}
from
'
react
'
import
React
,
{
CSSProperties
,
FunctionComponent
,
ReactNode
}
from
'
react
'
import
classNames
from
'
classnames
'
import
Icon
from
'
@/packages/icon
'
import
Icon
from
'
@/packages/icon
'
import
bem
from
'
@/utils/bem
'
import
{
BasicComponent
,
ComponentDefaults
}
from
'
@/utils/typings
'
import
{
BasicComponent
,
ComponentDefaults
}
from
'
@/utils/typings
'
...
@@ -30,6 +32,9 @@ const defaultProps = {
...
@@ -30,6 +32,9 @@ const defaultProps = {
color
:
''
,
color
:
''
,
icons
:
''
,
icons
:
''
,
}
as
BadgeProps
}
as
BadgeProps
const
b
=
bem
(
'
badge
'
)
export
const
Badge
:
FunctionComponent
<
Partial
<
BadgeProps
>>
=
(
props
)
=>
{
export
const
Badge
:
FunctionComponent
<
Partial
<
BadgeProps
>>
=
(
props
)
=>
{
const
{
const
{
className
,
className
,
...
@@ -65,7 +70,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
...
@@ -65,7 +70,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
return
style
return
style
}
}
return
(
return
(
<
div
className
=
{
`nut-badge
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
>
{
icons
!==
''
&&
(
{
icons
!==
''
&&
(
<
div
className
=
"slot-icons"
>
<
div
className
=
"slot-icons"
>
<
Icon
<
Icon
...
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
...
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
)
}
)
}
<
div
>
{
children
}
</
div
>
<
div
>
{
children
}
</
div
>
<
div
<
div
className
=
{
`
${
dot
?
'
is-dot
'
:
''
}
nut-badge__content sup`
}
className
=
{
classNames
({
'
is-dot
'
:
dot
},
b
(
'
content
'
),
'
sup
'
)
}
style
=
{
getStyle
()
}
style
=
{
getStyle
()
}
>
>
{
content
()
}
{
content
()
}
...
...
src/packages/card/__test__/__snapshots__/card.spec.tsx.snap
浏览文件 @
f292a54f
...
@@ -3,7 +3,7 @@
...
@@ -3,7 +3,7 @@
exports[`footerTpl slot test 1`] = `
exports[`footerTpl slot test 1`] = `
<div>
<div>
<div
<div
class="nut-card
undefined
"
class="nut-card"
>
>
<div
<div
class="nut-card__left"
class="nut-card__left"
...
@@ -118,7 +118,7 @@ exports[`footerTpl slot test 1`] = `
...
@@ -118,7 +118,7 @@ exports[`footerTpl slot test 1`] = `
exports[`originTpl slot test 1`] = `
exports[`originTpl slot test 1`] = `
<div>
<div>
<div
<div
class="nut-card
undefined
"
class="nut-card"
>
>
<div
<div
class="nut-card__left"
class="nut-card__left"
...
@@ -208,7 +208,7 @@ exports[`originTpl slot test 1`] = `
...
@@ -208,7 +208,7 @@ exports[`originTpl slot test 1`] = `
exports[`prolistTpl slot test 1`] = `
exports[`prolistTpl slot test 1`] = `
<div>
<div>
<div
<div
class="nut-card
undefined
"
class="nut-card"
>
>
<div
<div
class="nut-card__left"
class="nut-card__left"
...
@@ -337,7 +337,7 @@ exports[`prolistTpl slot test 1`] = `
...
@@ -337,7 +337,7 @@ exports[`prolistTpl slot test 1`] = `
exports[`props test 1`] = `
exports[`props test 1`] = `
<div>
<div>
<div
<div
class="nut-card
undefined
"
class="nut-card"
>
>
<div
<div
class="nut-card__left"
class="nut-card__left"
...
@@ -447,7 +447,7 @@ exports[`props test 1`] = `
...
@@ -447,7 +447,7 @@ exports[`props test 1`] = `
exports[`shopTagTpl slot test 1`] = `
exports[`shopTagTpl slot test 1`] = `
<div>
<div>
<div
<div
class="nut-card
undefined
"
class="nut-card"
>
>
<div
<div
class="nut-card__left"
class="nut-card__left"
...
...
src/packages/card/card.taro.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
}
from
'
react
'
import
React
,
{
FunctionComponent
}
from
'
react
'
import
classNames
from
'
classnames
'
import
Price
from
'
@/packages/price/index.taro
'
import
Price
from
'
@/packages/price/index.taro
'
import
Tag
from
'
@/packages/tag/index.taro
'
import
Tag
from
'
@/packages/tag/index.taro
'
...
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
...
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
}
}
const
b
=
bem
(
'
card
'
)
const
b
=
bem
(
'
card
'
)
return
(
return
(
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
{
...
rest
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
{
...
rest
}
>
<
div
className
=
{
b
(
'
left
'
)
}
>
<
div
className
=
{
b
(
'
left
'
)
}
>
<
img
src
=
{
imgUrl
}
alt
=
""
/>
<
img
src
=
{
imgUrl
}
alt
=
""
/>
</
div
>
</
div
>
...
...
src/packages/card/card.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
}
from
'
react
'
import
React
,
{
FunctionComponent
}
from
'
react
'
import
classNames
from
'
classnames
'
import
Price
from
'
@/packages/price
'
import
Price
from
'
@/packages/price
'
import
Tag
from
'
@/packages/tag
'
import
Tag
from
'
@/packages/tag
'
...
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
...
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
}
}
const
b
=
bem
(
'
card
'
)
const
b
=
bem
(
'
card
'
)
return
(
return
(
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
{
...
rest
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
{
...
rest
}
>
<
div
className
=
{
b
(
'
left
'
)
}
>
<
div
className
=
{
b
(
'
left
'
)
}
>
<
img
src
=
{
imgUrl
}
alt
=
""
/>
<
img
src
=
{
imgUrl
}
alt
=
""
/>
</
div
>
</
div
>
...
...
src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap
浏览文件 @
f292a54f
...
@@ -3,7 +3,7 @@
...
@@ -3,7 +3,7 @@
exports[`should match snapshot 1`] = `
exports[`should match snapshot 1`] = `
<DocumentFragment>
<DocumentFragment>
<div
<div
class="nut-collapse
undefined
"
class="nut-collapse"
>
>
<div
<div
class="nut-collapse-item"
class="nut-collapse-item"
...
...
src/packages/collapse/collapse.taro.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
,
useEffect
,
useState
,
memo
}
from
'
react
'
import
React
,
{
FunctionComponent
,
useEffect
,
useState
,
memo
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
...
@@ -97,7 +98,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
...
@@ -97,7 +98,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
onChange
&&
onChange
(
!
isOpen
,
name
)
onChange
&&
onChange
(
!
isOpen
,
name
)
}
}
return
(
return
(
<
div
className
=
{
`
${
colBem
()}
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
colBem
(),
className
)
}
style
=
{
style
}
>
{
childrenDom
.
map
((
item
:
any
)
=>
{
{
childrenDom
.
map
((
item
:
any
)
=>
{
return
React
.
cloneElement
(
item
,
{
return
React
.
cloneElement
(
item
,
{
isOpen
:
defaultOpenIndex
.
includes
(
item
.
props
.
name
),
isOpen
:
defaultOpenIndex
.
includes
(
item
.
props
.
name
),
...
...
src/packages/collapse/collapse.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
,
useEffect
,
useState
,
memo
}
from
'
react
'
import
React
,
{
FunctionComponent
,
useEffect
,
useState
,
memo
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
...
@@ -98,7 +99,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
...
@@ -98,7 +99,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
onChange
&&
onChange
(
!
isOpen
,
name
)
onChange
&&
onChange
(
!
isOpen
,
name
)
}
}
return
(
return
(
<
div
className
=
{
`
${
colBem
()}
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
colBem
(),
className
)
}
style
=
{
style
}
>
{
childrenDom
.
map
((
item
:
any
)
=>
{
{
childrenDom
.
map
((
item
:
any
)
=>
{
return
React
.
cloneElement
(
item
,
{
return
React
.
cloneElement
(
item
,
{
isOpen
:
defaultOpenIndex
.
includes
(
item
.
props
.
name
),
isOpen
:
defaultOpenIndex
.
includes
(
item
.
props
.
name
),
...
...
src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap
浏览文件 @
f292a54f
...
@@ -3,15 +3,14 @@
...
@@ -3,15 +3,14 @@
exports[`render with custom content 1`] = `
exports[`render with custom content 1`] = `
<div>
<div>
<div
<div
class="
undefined
nut-grid nut-grid__border"
class="nut-grid nut-grid__border"
>
>
<div
<div
class="nut-grid-item"
class="nut-grid-item"
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--horizontal
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
"
>
>
<i
<i
class="nutui-iconfont nut-icon nut-icon-dongdong "
class="nutui-iconfont nut-icon nut-icon-dongdong "
...
@@ -31,8 +30,7 @@ exports[`render with custom content 1`] = `
...
@@ -31,8 +30,7 @@ exports[`render with custom content 1`] = `
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--horizontal
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
"
>
>
<div
<div
class="nut-grid-item__text"
class="nut-grid-item__text"
...
@@ -53,8 +51,7 @@ exports[`render with custom content 1`] = `
...
@@ -53,8 +51,7 @@ exports[`render with custom content 1`] = `
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--horizontal
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
"
>
>
<div
<div
class="nut-avatar nut-avatar-normal nut-avatar-round demo-avatar"
class="nut-avatar nut-avatar-normal nut-avatar-round demo-avatar"
...
@@ -71,8 +68,7 @@ exports[`render with custom content 1`] = `
...
@@ -71,8 +68,7 @@ exports[`render with custom content 1`] = `
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--horizontal
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
"
>
>
<div
<div
class="nut-avatar nut-avatar-large nut-avatar-round"
class="nut-avatar nut-avatar-large nut-avatar-round"
...
@@ -92,15 +88,14 @@ exports[`render with custom content 1`] = `
...
@@ -92,15 +88,14 @@ exports[`render with custom content 1`] = `
exports[`should match snapshot 1`] = `
exports[`should match snapshot 1`] = `
<div>
<div>
<div
<div
class="
undefined
nut-grid nut-grid__border"
class="nut-grid nut-grid__border"
>
>
<div
<div
class="nut-grid-item"
class="nut-grid-item"
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--vertical
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
"
>
>
<i
<i
class="nutui-iconfont nut-icon nut-icon-dongdong "
class="nutui-iconfont nut-icon nut-icon-dongdong "
...
@@ -118,8 +113,7 @@ exports[`should match snapshot 1`] = `
...
@@ -118,8 +113,7 @@ exports[`should match snapshot 1`] = `
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--vertical
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
"
>
>
<i
<i
class="nutui-iconfont nut-icon nut-icon-dongdong "
class="nutui-iconfont nut-icon nut-icon-dongdong "
...
@@ -137,8 +131,7 @@ exports[`should match snapshot 1`] = `
...
@@ -137,8 +131,7 @@ exports[`should match snapshot 1`] = `
style="flex-basis: 25%;"
style="flex-basis: 25%;"
>
>
<div
<div
class="nut-grid-item__content nut-grid-item__content--border 0 nut-grid-item__content--center false false nut-grid-item__content--vertical
class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
"
>
>
<i
<i
class="nutui-iconfont nut-icon nut-icon-dongdong "
class="nutui-iconfont nut-icon nut-icon-dongdong "
...
...
src/packages/grid/grid.taro.tsx
浏览文件 @
f292a54f
import
React
,
{
CSSProperties
,
FunctionComponent
}
from
'
react
'
import
React
,
{
CSSProperties
,
FunctionComponent
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
useConfig
}
from
'
@/packages/configprovider/configprovider.taro
'
import
{
useConfig
}
from
'
@/packages/configprovider/configprovider.taro
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
GridContext
from
'
./grid.taro.context
'
import
GridContext
from
'
./grid.taro.context
'
import
{
GridItemProps
}
from
'
../griditem/griditem.taro
'
import
{
GridItemProps
}
from
'
../griditem/griditem.taro
'
export
type
GridDirection
=
'
horizontal
'
|
'
vertical
'
export
type
GridDirection
=
'
horizontal
'
|
'
vertical
'
export
interface
GridProps
{
export
interface
GridProps
{
...
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
...
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
const
rootClass
=
()
=>
{
const
rootClass
=
()
=>
{
const
prefixCls
=
b
()
const
prefixCls
=
b
()
return
`
${
className
}
${
prefixCls
}
$
{
return
classNames
(
className
,
prefixCls
,
{
border
&&
!
gutter
?
`
${
b
(
'
border
'
)}
`
:
''
[
b
(
'
border
'
)]:
border
&&
!
gutter
,
}
`
}
)
}
}
const
rootStyle
=
()
=>
{
const
rootStyle
=
()
=>
{
...
...
src/packages/grid/grid.tsx
浏览文件 @
f292a54f
import
React
,
{
CSSProperties
,
FunctionComponent
}
from
'
react
'
import
React
,
{
CSSProperties
,
FunctionComponent
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
useConfig
}
from
'
@/packages/configprovider
'
import
{
useConfig
}
from
'
@/packages/configprovider
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
{
GridItemProps
}
from
'
../griditem/griditem
'
import
{
GridItemProps
}
from
'
../griditem/griditem
'
import
GridContext
from
'
./grid.context
'
import
GridContext
from
'
./grid.context
'
export
type
GridDirection
=
'
horizontal
'
|
'
vertical
'
export
type
GridDirection
=
'
horizontal
'
|
'
vertical
'
export
interface
GridProps
{
export
interface
GridProps
{
...
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
...
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
const
rootClass
=
()
=>
{
const
rootClass
=
()
=>
{
const
prefixCls
=
b
()
const
prefixCls
=
b
()
return
`
${
className
}
${
prefixCls
}
$
{
return
classNames
(
className
,
prefixCls
,
{
border
&&
!
gutter
?
`
${
b
(
'
border
'
)}
`
:
''
[
b
(
'
border
'
)]:
border
&&
!
gutter
,
}
`
}
)
}
}
const
rootStyle
=
()
=>
{
const
rootStyle
=
()
=>
{
...
...
src/packages/griditem/griditem.taro.tsx
浏览文件 @
f292a54f
...
@@ -4,6 +4,7 @@ import React, {
...
@@ -4,6 +4,7 @@ import React, {
ReactNode
,
ReactNode
,
useContext
,
useContext
,
}
from
'
react
'
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
useConfig
}
from
'
@/packages/configprovider/configprovider.taro
'
import
{
useConfig
}
from
'
@/packages/configprovider/configprovider.taro
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
Icon
from
'
@/packages/icon/index.taro
'
import
Icon
from
'
@/packages/icon/index.taro
'
...
@@ -106,12 +107,14 @@ export const GridItem: FunctionComponent<
...
@@ -106,12 +107,14 @@ export const GridItem: FunctionComponent<
}
}
const
contentClass
=
()
=>
{
const
contentClass
=
()
=>
{
return
`
${
b
(
'
content
'
)}
${
border
&&
b
(
'
content--border
'
)}
${
return
classNames
(
b
(
'
content
'
),
{
border
&&
gutter
&&
b
(
'
content--surround
'
)
[
b
(
'
content--border
'
)]:
border
,
}
${
center
&&
b
(
'
content--center
'
)}
${
square
&&
b
(
'
content--square
'
)}
${
[
b
(
'
content--surround
'
)]:
border
&&
gutter
,
reverse
&&
b
(
'
content--reverse
'
)
[
b
(
'
content--center
'
)]:
center
,
}
${
!!
direction
&&
b
(
`content--
${
direction
}
`
)}
[
b
(
'
content--square
'
)]:
square
,
`
[
b
(
'
content--reverse
'
)]:
reverse
,
[
b
(
`content--
${
direction
}
`
)]:
!!
direction
,
})
}
}
const
isIconName
=
()
=>
{
const
isIconName
=
()
=>
{
...
...
src/packages/griditem/griditem.tsx
浏览文件 @
f292a54f
...
@@ -4,6 +4,7 @@ import React, {
...
@@ -4,6 +4,7 @@ import React, {
ReactNode
,
ReactNode
,
useContext
,
useContext
,
}
from
'
react
'
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
useConfig
}
from
'
@/packages/configprovider
'
import
{
useConfig
}
from
'
@/packages/configprovider
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
Icon
from
'
@/packages/icon
'
import
Icon
from
'
@/packages/icon
'
...
@@ -107,12 +108,14 @@ export const GridItem: FunctionComponent<
...
@@ -107,12 +108,14 @@ export const GridItem: FunctionComponent<
}
}
const
contentClass
=
()
=>
{
const
contentClass
=
()
=>
{
return
`
${
b
(
'
content
'
)}
${
border
&&
b
(
'
content--border
'
)}
${
return
classNames
(
b
(
'
content
'
),
{
border
&&
gutter
&&
b
(
'
content--surround
'
)
[
b
(
'
content--border
'
)]:
border
,
}
${
center
&&
b
(
'
content--center
'
)}
${
square
&&
b
(
'
content--square
'
)}
${
[
b
(
'
content--surround
'
)]:
border
&&
gutter
,
reverse
&&
b
(
'
content--reverse
'
)
[
b
(
'
content--center
'
)]:
center
,
}
${
!!
direction
&&
b
(
`content--
${
direction
}
`
)}
[
b
(
'
content--square
'
)]:
square
,
`
[
b
(
'
content--reverse
'
)]:
reverse
,
[
b
(
`content--
${
direction
}
`
)]:
!!
direction
,
})
}
}
const
isIconName
=
()
=>
{
const
isIconName
=
()
=>
{
...
...
src/packages/indicator/indicator.taro.tsx
浏览文件 @
f292a54f
...
@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
...
@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
}
}
useEffect
(()
=>
{},
[])
useEffect
(()
=>
{},
[])
return
(
return
(
<
div
className
=
{
`
${
classes
}
${
className
}
`
}
{
...
rest
}
>
<
div
className
=
{
classNames
(
classes
,
className
)
}
{
...
rest
}
>
{
renderEles
()
}
{
renderEles
()
}
</
div
>
</
div
>
)
)
...
...
src/packages/indicator/indicator.tsx
浏览文件 @
f292a54f
...
@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
...
@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
}
}
useEffect
(()
=>
{},
[])
useEffect
(()
=>
{},
[])
return
(
return
(
<
div
className
=
{
`
${
classes
}
${
className
}
`
}
{
...
rest
}
>
<
div
className
=
{
classNames
(
classes
,
className
)
}
{
...
rest
}
>
{
renderEles
()
}
{
renderEles
()
}
</
div
>
</
div
>
)
)
...
...
src/packages/rate/rate.taro.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
,
useEffect
,
useState
}
from
'
react
'
import
React
,
{
FunctionComponent
,
useEffect
,
useState
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
Icon
from
'
@/packages/icon
'
import
Icon
from
'
@/packages/icon
'
...
@@ -102,7 +102,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
...
@@ -102,7 +102,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
onChange
&&
onChange
(
value
)
onChange
&&
onChange
(
value
)
}
}
return
(
return
(
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
>
{
countArray
.
map
((
n
)
=>
{
{
countArray
.
map
((
n
)
=>
{
return
(
return
(
<
div
<
div
...
@@ -115,9 +115,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
...
@@ -115,9 +115,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
classPrefix
=
{
iconClassPrefix
}
classPrefix
=
{
iconClassPrefix
}
fontClassName
=
{
iconFontClassName
}
fontClassName
=
{
iconFontClassName
}
size
=
{
iconSize
}
size
=
{
iconSize
}
className
=
{
`
${
bi
(
'
icon
'
)}
$
{
className
=
{
classNames
(
bi
(
'
icon
'
),
{
disabled
||
n
>
score
?
bi
(
'
icon--disabled
'
)
:
''
[
bi
(
'
icon--disabled
'
)]:
disabled
||
n
>
score
,
}
`
}
}
)
}
name
=
{
n
<=
score
?
checkedIcon
:
uncheckedIcon
}
name
=
{
n
<=
score
?
checkedIcon
:
uncheckedIcon
}
color
=
{
n
<=
score
?
activeColor
:
voidColor
}
color
=
{
n
<=
score
?
activeColor
:
voidColor
}
/>
/>
...
...
src/packages/rate/rate.tsx
浏览文件 @
f292a54f
import
React
,
{
FunctionComponent
,
useEffect
,
useState
}
from
'
react
'
import
React
,
{
FunctionComponent
,
useEffect
,
useState
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
Icon
from
'
@/packages/icon
'
import
Icon
from
'
@/packages/icon
'
...
@@ -100,7 +100,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
...
@@ -100,7 +100,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
onChange
&&
onChange
(
value
)
onChange
&&
onChange
(
value
)
}
}
return
(
return
(
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
classNames
(
b
(),
className
)
}
style
=
{
style
}
>
{
countArray
.
map
((
n
)
=>
{
{
countArray
.
map
((
n
)
=>
{
return
(
return
(
<
div
<
div
...
@@ -113,9 +113,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
...
@@ -113,9 +113,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
classPrefix
=
{
iconClassPrefix
}
classPrefix
=
{
iconClassPrefix
}
fontClassName
=
{
iconFontClassName
}
fontClassName
=
{
iconFontClassName
}
size
=
{
iconSize
}
size
=
{
iconSize
}
className
=
{
`
${
bi
(
'
icon
'
)}
$
{
className
=
{
classNames
(
bi
(
'
icon
'
),
{
disabled
||
n
>
score
?
bi
(
'
icon--disabled
'
)
:
''
[
bi
(
'
icon--disabled
'
)]:
disabled
||
n
>
score
,
}
`
}
}
)
}
name
=
{
n
<=
score
?
checkedIcon
:
uncheckedIcon
}
name
=
{
n
<=
score
?
checkedIcon
:
uncheckedIcon
}
color
=
{
n
<=
score
?
activeColor
:
voidColor
}
color
=
{
n
<=
score
?
activeColor
:
voidColor
}
/>
/>
...
...
src/packages/sticky/__test__/__snapshots__/sticky.spec.tsx.snap
浏览文件 @
f292a54f
...
@@ -8,7 +8,7 @@ exports[`should match snapshot 1`] = `
...
@@ -8,7 +8,7 @@ exports[`should match snapshot 1`] = `
to=""
to=""
>
>
<div
<div
class="nut-sticky
undefined
"
class="nut-sticky"
>
>
<div
<div
class="nut-sticky-box"
class="nut-sticky-box"
...
...
src/packages/sticky/sticky.taro.tsx
浏览文件 @
f292a54f
...
@@ -7,17 +7,19 @@ import React, {
...
@@ -7,17 +7,19 @@ import React, {
useCallback
,
useCallback
,
useEffect
,
useEffect
,
}
from
'
react
'
}
from
'
react
'
import
{
BasicComponent
}
from
'
@/utils/typings
'
import
classNames
from
'
classnames
'
import
useWatch
from
'
@/utils/useWatch
'
import
{
getRectByTaro
}
from
'
@/utils/useClientRect
'
import
{
import
{
PageScrollObject
,
PageScrollObject
,
usePageScroll
,
usePageScroll
,
getSystemInfoSync
,
getSystemInfoSync
,
getEnv
,
getEnv
,
}
from
'
@tarojs/taro
'
}
from
'
@tarojs/taro
'
import
{
BasicComponent
}
from
'
@/utils/typings
'
import
useWatch
from
'
@/utils/useWatch
'
import
{
getRectByTaro
}
from
'
@/utils/useClientRect
'
import
{
getScrollParent
}
from
'
@/utils/get-scroll-parent
'
import
{
getScrollParent
}
from
'
@/utils/get-scroll-parent
'
import
bem
from
'
@/utils/bem
'
export
interface
StickyProps
extends
BasicComponent
{
export
interface
StickyProps
extends
BasicComponent
{
container
?:
React
.
RefObject
<
HTMLElement
>
container
?:
React
.
RefObject
<
HTMLElement
>
position
?:
'
top
'
|
'
bottom
'
position
?:
'
top
'
|
'
bottom
'
...
@@ -56,6 +58,8 @@ const defaultProps = {
...
@@ -56,6 +58,8 @@ const defaultProps = {
zIndex
:
2000
,
zIndex
:
2000
,
}
as
StickyProps
}
as
StickyProps
const
b
=
bem
(
'
sticky
'
)
export
const
Sticky
:
FunctionComponent
<
StickyProps
>
=
(
props
)
=>
{
export
const
Sticky
:
FunctionComponent
<
StickyProps
>
=
(
props
)
=>
{
const
{
const
{
position
=
'
top
'
,
position
=
'
top
'
,
...
@@ -74,7 +78,7 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
...
@@ -74,7 +78,7 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
const
offset
=
position
===
'
top
'
?
top
:
bottom
const
offset
=
position
===
'
top
'
?
top
:
bottom
const
[
rootRect
,
setRootRect
]
=
useState
<
Partial
<
StickyRect
>>
({})
const
[
rootRect
,
setRootRect
]
=
useState
<
Partial
<
StickyRect
>>
({})
const
[
fixed
,
setFixed
]
=
useState
(
false
)
const
[
fixed
,
setFixed
]
=
useState
(
false
)
const
[
transform
,
setTransform
]
=
useState
(
0
)
//相对容器偏移距离
const
[
transform
,
setTransform
]
=
useState
(
0
)
//
相对容器偏移距离
useWatch
(
fixed
,
()
=>
{
useWatch
(
fixed
,
()
=>
{
onChange
&&
onChange
(
fixed
)
onChange
&&
onChange
(
fixed
)
...
@@ -161,11 +165,12 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
...
@@ -161,11 +165,12 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
<
div
<
div
ref
=
{
rootRef
}
ref
=
{
rootRef
}
style
=
{
rootStyle
}
style
=
{
rootStyle
}
className
=
{
`nut-sticky
${
className
}
`
}
className
=
{
classNames
(
b
(),
className
)
}
{
...
rest
}
{
...
rest
}
>
>
<
div
<
div
className
=
{
`nut-sticky-box
${
fixed
?
'
nut-sticky-fixed
'
:
''
}
`
}
// 应符合 bem 规范
className
=
{
classNames
(
'
nut-sticky-box
'
,
{
'
nut-sticky-fixed
'
:
fixed
})
}
ref
=
{
stickyRef
}
ref
=
{
stickyRef
}
style
=
{
stickyStyle
}
style
=
{
stickyStyle
}
>
>
...
...
src/packages/sticky/sticky.tsx
浏览文件 @
f292a54f
...
@@ -5,10 +5,12 @@ import React, {
...
@@ -5,10 +5,12 @@ import React, {
useRef
,
useRef
,
useState
,
useState
,
}
from
'
react
'
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
getScrollParent
}
from
'
@/utils/get-scroll-parent
'
import
{
getScrollParent
}
from
'
@/utils/get-scroll-parent
'
import
{
getRect
}
from
'
@/utils/useClientRect
'
import
{
getRect
}
from
'
@/utils/useClientRect
'
import
useWatch
from
'
@/utils/useWatch
'
import
useWatch
from
'
@/utils/useWatch
'
import
{
BasicComponent
}
from
'
@/utils/typings
'
import
{
BasicComponent
}
from
'
@/utils/typings
'
import
bem
from
'
@/utils/bem
'
export
interface
StickyProps
extends
BasicComponent
{
export
interface
StickyProps
extends
BasicComponent
{
container
?:
React
.
RefObject
<
HTMLElement
>
container
?:
React
.
RefObject
<
HTMLElement
>
...
@@ -28,6 +30,8 @@ const defaultProps = {
...
@@ -28,6 +30,8 @@ const defaultProps = {
zIndex
:
2000
,
zIndex
:
2000
,
}
as
StickyProps
}
as
StickyProps
const
b
=
bem
(
'
sticky
'
)
export
const
Sticky
:
FunctionComponent
<
StickyProps
>
=
(
props
)
=>
{
export
const
Sticky
:
FunctionComponent
<
StickyProps
>
=
(
props
)
=>
{
const
{
const
{
position
=
'
top
'
,
position
=
'
top
'
,
...
@@ -174,10 +178,15 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
...
@@ -174,10 +178,15 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
<
div
<
div
ref
=
{
rootRef
}
ref
=
{
rootRef
}
style
=
{
rootStyle
}
style
=
{
rootStyle
}
className
=
{
`nut-sticky
${
className
}
`
}
className
=
{
classNames
(
b
(),
className
)
}
{
...
rest
}
{
...
rest
}
>
>
<
div
className
=
"nut-sticky-box"
ref
=
{
stickyRef
}
style
=
{
stickyStyle
}
>
<
div
// 应符合 bem 规范
className
=
"nut-sticky-box"
ref
=
{
stickyRef
}
style
=
{
stickyStyle
}
>
{
children
}
{
children
}
</
div
>
</
div
>
</
div
>
</
div
>
...
...
src/packages/swipe/swipe.taro.tsx
浏览文件 @
f292a54f
...
@@ -7,6 +7,7 @@ import React, {
...
@@ -7,6 +7,7 @@ import React, {
useImperativeHandle
,
useImperativeHandle
,
useEffect
,
useEffect
,
}
from
'
react
'
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
nextTick
,
useReady
}
from
'
@tarojs/taro
'
import
{
nextTick
,
useReady
}
from
'
@tarojs/taro
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
{
useTouch
}
from
'
@/utils/useTouch
'
import
{
useTouch
}
from
'
@/utils/useTouch
'
...
@@ -278,7 +279,7 @@ export const Swipe = forwardRef<
...
@@ -278,7 +279,7 @@ export const Swipe = forwardRef<
return
(
return
(
<
div
<
div
ref
=
{
root
}
ref
=
{
root
}
className
=
{
`
${
swipeBem
()}
${
className
}
`
}
className
=
{
classNames
(
swipeBem
(),
className
)
}
onTouchStart
=
{
(
e
:
any
)
=>
onTouchStart
(
e
)
}
onTouchStart
=
{
(
e
:
any
)
=>
onTouchStart
(
e
)
}
onTouchMove
=
{
(
e
:
any
)
=>
onTouchMove
(
e
)
}
onTouchMove
=
{
(
e
:
any
)
=>
onTouchMove
(
e
)
}
onTouchEnd
=
{
(
e
:
any
)
=>
onTouchEnd
(
e
)
}
onTouchEnd
=
{
(
e
:
any
)
=>
onTouchEnd
(
e
)
}
...
...
src/packages/swipe/swipe.tsx
浏览文件 @
f292a54f
...
@@ -8,6 +8,7 @@ import React, {
...
@@ -8,6 +8,7 @@ import React, {
useImperativeHandle
,
useImperativeHandle
,
useEffect
,
useEffect
,
}
from
'
react
'
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
bem
from
'
@/utils/bem
'
import
{
useTouch
}
from
'
@/utils/useTouch
'
import
{
useTouch
}
from
'
@/utils/useTouch
'
import
{
getRect
}
from
'
@/utils/useClientRect
'
import
{
getRect
}
from
'
@/utils/useClientRect
'
...
@@ -277,7 +278,7 @@ export const Swipe = forwardRef<
...
@@ -277,7 +278,7 @@ export const Swipe = forwardRef<
return
(
return
(
<
div
<
div
ref
=
{
root
}
ref
=
{
root
}
className
=
{
`
${
swipeBem
()}
${
className
}
`
}
className
=
{
classNames
(
swipeBem
(),
className
)
}
onTouchStart
=
{
(
e
:
any
)
=>
onTouchStart
(
e
)
}
onTouchStart
=
{
(
e
:
any
)
=>
onTouchStart
(
e
)
}
onTouchMove
=
{
(
e
:
any
)
=>
onTouchMove
(
e
)
}
onTouchMove
=
{
(
e
:
any
)
=>
onTouchMove
(
e
)
}
onTouchEnd
=
{
(
e
:
any
)
=>
onTouchEnd
(
e
)
}
onTouchEnd
=
{
(
e
:
any
)
=>
onTouchEnd
(
e
)
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录