Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
006abe5e
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
006abe5e
编写于
9月 24, 2020
作者:
K
Kermit Xuan
提交者:
GitHub
9月 24, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore(slider): optimize type definition (#26884)
上级
aac1d4e4
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
92 addition
and
103 deletion
+92
-103
components/slider/index.tsx
components/slider/index.tsx
+91
-94
package.json
package.json
+1
-1
typings/custom-typings.d.ts
typings/custom-typings.d.ts
+0
-8
未找到文件。
components/slider/index.tsx
浏览文件 @
006abe5e
import
*
as
React
from
'
react
'
;
import
RcSlider
from
'
rc-slider/lib/Slider
'
;
import
RcRange
from
'
rc-slider/lib/Range
'
;
import
RcHandle
from
'
rc-slider/lib/Handle
'
;
import
RcSlider
,
{
Range
as
RcRange
,
Handle
as
RcHandle
}
from
'
rc-slider
'
;
import
classNames
from
'
classnames
'
;
import
{
TooltipPlacement
}
from
'
../tooltip
'
;
import
SliderTooltip
from
'
./SliderTooltip
'
;
...
...
@@ -18,16 +16,15 @@ export interface SliderMarks {
interface
HandleGeneratorInfo
{
value
?:
number
;
dragging
:
boolean
;
dragging
?
:
boolean
;
index
:
number
;
rest
:
any
[];
}
export
type
HandleGeneratorFn
=
(
config
:
{
tooltipPrefixCls
?:
string
;
prefixCls
?:
string
;
info
:
HandleGeneratorInfo
;
})
=>
React
.
React
Node
;
})
=>
React
.
React
Element
;
export
interface
SliderBaseProps
{
prefixCls
?:
string
;
...
...
@@ -35,7 +32,7 @@ export interface SliderBaseProps {
reverse
?:
boolean
;
min
?:
number
;
max
?:
number
;
step
?:
number
|
null
;
step
?:
number
;
marks
?:
SliderMarks
;
dots
?:
boolean
;
included
?:
boolean
;
...
...
@@ -70,81 +67,98 @@ export interface SliderRangeProps extends SliderBaseProps {
export
type
Visibles
=
{
[
index
:
number
]:
boolean
};
const
Slider
=
React
.
forwardRef
<
unknown
,
SliderSingleProps
|
SliderRangeProps
>
((
props
,
ref
)
=>
{
const
{
getPrefixCls
,
direction
,
getPopupContainer
}
=
React
.
useContext
(
ConfigContext
);
const
[
visibles
,
setVisibles
]
=
React
.
useState
<
Visibles
>
({});
const
Slider
=
React
.
forwardRef
<
unknown
,
SliderSingleProps
|
SliderRangeProps
>
(
(
props
,
ref
:
any
)
=>
{
const
{
getPrefixCls
,
direction
,
getPopupContainer
}
=
React
.
useContext
(
ConfigContext
);
const
[
visibles
,
setVisibles
]
=
React
.
useState
<
Visibles
>
({});
const
toggleTooltipVisible
=
(
index
:
number
,
visible
:
boolean
)
=>
{
setVisibles
((
prev
:
Visibles
)
=>
{
return
{
...
prev
,
[
index
]:
visible
};
});
};
const
toggleTooltipVisible
=
(
index
:
number
,
visible
:
boolean
)
=>
{
setVisibles
((
prev
:
Visibles
)
=>
{
return
{
...
prev
,
[
index
]:
visible
};
});
};
const
getTooltipPlacement
=
(
tooltipPlacement
?:
TooltipPlacement
,
vertical
?:
boolean
)
=>
{
if
(
tooltipPlacement
)
{
return
tooltipPlacement
;
}
if
(
!
vertical
)
{
return
'
top
'
;
}
return
direction
===
'
rtl
'
?
'
left
'
:
'
right
'
;
};
const
getTooltipPlacement
=
(
tooltipPlacement
?:
TooltipPlacement
,
vertical
?:
boolean
)
=>
{
if
(
tooltipPlacement
)
{
return
tooltipPlacement
;
}
if
(
!
vertical
)
{
return
'
top
'
;
}
return
direction
===
'
rtl
'
?
'
left
'
:
'
right
'
;
};
const
handleWithTooltip
:
HandleGeneratorFn
=
({
tooltipPrefixCls
,
prefixCls
,
info
:
{
value
,
dragging
,
index
,
...
restProps
},
})
=>
{
const
{
tipFormatter
,
tooltipVisible
,
tooltipPlacement
,
getTooltipPopupContainer
,
vertical
,
}
=
props
;
const
isTipFormatter
=
tipFormatter
?
visibles
[
index
]
||
dragging
:
false
;
const
visible
=
tooltipVisible
||
(
tooltipVisible
===
undefined
&&
isTipFormatter
);
return
(
<
SliderTooltip
prefixCls
=
{
tooltipPrefixCls
}
title
=
{
tipFormatter
?
tipFormatter
(
value
)
:
''
}
visible
=
{
visible
}
placement
=
{
getTooltipPlacement
(
tooltipPlacement
,
vertical
)
}
transitionName
=
"zoom-down"
key
=
{
index
}
overlayClassName
=
{
`
${
prefixCls
}
-tooltip`
}
getPopupContainer
=
{
getTooltipPopupContainer
||
getPopupContainer
||
(()
=>
document
.
body
)
}
>
<
RcHandle
{
...
restProps
}
value
=
{
value
}
onMouseEnter
=
{
()
=>
toggleTooltipVisible
(
index
,
true
)
}
onMouseLeave
=
{
()
=>
toggleTooltipVisible
(
index
,
false
)
}
/>
</
SliderTooltip
>
);
};
const
handleWithTooltip
:
HandleGeneratorFn
=
({
tooltipPrefixCls
,
prefixCls
,
info
:
{
value
,
dragging
,
index
,
...
restProps
},
})
=>
{
const
{
tipFormatter
,
tooltip
Visible
,
tooltipPlacement
,
getTooltipPopupContainer
,
vertical
,
prefixCls
:
customizePrefixCls
,
tooltip
PrefixCls
:
customizeTooltipPrefixCls
,
range
,
className
,
...
restProps
}
=
props
;
const
isTipFormatter
=
tipFormatter
?
visibles
[
index
]
||
dragging
:
false
;
const
visible
=
tooltipVisible
||
(
tooltipVisible
===
undefined
&&
isTipFormatter
);
return
(
<
SliderTooltip
prefixCls
=
{
tooltipPrefixCls
}
title
=
{
tipFormatter
?
tipFormatter
(
value
)
:
''
}
visible
=
{
visible
}
placement
=
{
getTooltipPlacement
(
tooltipPlacement
,
vertical
)
}
transitionName
=
"zoom-down"
key
=
{
index
}
overlayClassName
=
{
`
${
prefixCls
}
-tooltip`
}
getPopupContainer
=
{
getTooltipPopupContainer
||
getPopupContainer
||
(()
=>
document
.
body
)
}
>
<
RcHandle
{
...
restProps
}
value
=
{
value
}
onMouseEnter
=
{
()
=>
toggleTooltipVisible
(
index
,
true
)
}
onMouseLeave
=
{
()
=>
toggleTooltipVisible
(
index
,
false
)
}
const
prefixCls
=
getPrefixCls
(
'
slider
'
,
customizePrefixCls
);
const
tooltipPrefixCls
=
getPrefixCls
(
'
tooltip
'
,
customizeTooltipPrefixCls
);
const
cls
=
classNames
(
className
,
{
[
`
${
prefixCls
}
-rtl`
]:
direction
===
'
rtl
'
,
});
// make reverse default on rtl direction
if
(
direction
===
'
rtl
'
&&
!
restProps
.
vertical
)
{
restProps
.
reverse
=
!
restProps
.
reverse
;
}
if
(
range
)
{
return
(
<
RcRange
{
...(
restProps
as
SliderRangeProps
)
}
className
=
{
cls
}
ref
=
{
ref
}
handle
=
{
(
info
:
HandleGeneratorInfo
)
=>
handleWithTooltip
({
tooltipPrefixCls
,
prefixCls
,
info
,
})
}
prefixCls
=
{
prefixCls
}
/>
</
SliderTooltip
>
);
};
const
{
prefixCls
:
customizePrefixCls
,
tooltipPrefixCls
:
customizeTooltipPrefixCls
,
range
,
className
,
...
restProps
}
=
props
;
const
prefixCls
=
getPrefixCls
(
'
slider
'
,
customizePrefixCls
);
const
tooltipPrefixCls
=
getPrefixCls
(
'
tooltip
'
,
customizeTooltipPrefixCls
);
const
cls
=
classNames
(
className
,
{
[
`
${
prefixCls
}
-rtl`
]:
direction
===
'
rtl
'
,
});
// make reverse default on rtl direction
if
(
direction
===
'
rtl
'
&&
!
restProps
.
vertical
)
{
restProps
.
reverse
=
!
restProps
.
reverse
;
}
if
(
range
)
{
);
}
return
(
<
Rc
Range
{
...
restProps
}
<
Rc
Slider
{
...
(
restProps
as
SliderSingleProps
)
}
className
=
{
cls
}
ref
=
{
ref
}
handle
=
{
(
info
:
HandleGeneratorInfo
)
=>
...
...
@@ -155,27 +169,10 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>((
})
}
prefixCls
=
{
prefixCls
}
tooltipPrefixCls
=
{
tooltipPrefixCls
}
/>
);
}
return
(
<
RcSlider
{
...
restProps
}
className
=
{
cls
}
ref
=
{
ref
}
handle
=
{
(
info
:
HandleGeneratorInfo
)
=>
handleWithTooltip
({
tooltipPrefixCls
,
prefixCls
,
info
,
})
}
prefixCls
=
{
prefixCls
}
tooltipPrefixCls
=
{
tooltipPrefixCls
}
/>
);
});
},
);
Slider
.
displayName
=
'
Slider
'
;
...
...
package.json
浏览文件 @
006abe5e
...
...
@@ -137,7 +137,7 @@
"
rc-rate
"
:
"
~2.8.2
"
,
"
rc-resize-observer
"
:
"
^0.2.3
"
,
"
rc-select
"
:
"
~11.3.2
"
,
"
rc-slider
"
:
"
~9.
4
.1
"
,
"
rc-slider
"
:
"
~9.
5
.1
"
,
"
rc-steps
"
:
"
~4.1.0
"
,
"
rc-switch
"
:
"
~3.2.0
"
,
"
rc-table
"
:
"
~7.9.2
"
,
...
...
typings/custom-typings.d.ts
浏览文件 @
006abe5e
...
...
@@ -46,14 +46,6 @@ declare module 'rc-rate';
declare
module
'
rc-queue-anim
'
;
declare
module
'
rc-slider
'
;
declare
module
'
rc-slider/lib/Slider
'
;
declare
module
'
rc-slider/lib/Range
'
;
declare
module
'
rc-slider/lib/Handle
'
;
declare
module
'
rc-steps
'
;
declare
module
'
rc-switch
'
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录