Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

feat cascader支持自定义最大层级 #722

Merged
merged 1 commit into from
Mar 23, 2023
Merged

feat cascader支持自定义最大层级 #722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/react-impression/src/components/Cascader/Cascader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,10 @@ Cascader.propTypes = {
* 是否可清除
*/
clearable: PropTypes.bool,
/**
* 最多显示多少个层级
*/
maxLevel: PropTypes.number,
}
Cascader.defaultProps = {
expandTrigger: 'click',
Expand All @@ -381,6 +385,7 @@ Cascader.defaultProps = {
clearable: false,
placeholder: '请选择',
disabled: false,
maxLevel: 4,
// value: [],
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-impression/src/components/Cascader/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Cascader 级联组件

**_注意 ⚠️：弹出层最多支持四级展示， 目前只支持受控用法_**
**_注意 ⚠️：弹出层支持自定义最多层级，默认最多展示 4 级， 目前只支持受控用法_**

**基本用法**

Expand Down
14 changes: 7 additions & 7 deletions packages/react-impression/src/components/Cascader/components/PopupMenus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as R from 'ramda'
import classnames from 'classnames'
import { usePrevious } from '../hooks/usePrevious'

const MAX_LEVEL = 4
function PopupMenus(props) {
const {
fieldNames,
Expand All @@ -16,6 +15,7 @@ function PopupMenus(props) {
changeOnSelect,
loadData,
onOptions,
maxLevel,
} = props
const [showOptions, setShowOptions] = useState([])
const [currentPath, setCurrentPath] = useState([]) // 暂存当前显示路径
Expand Down Expand Up @@ -47,7 +47,7 @@ function PopupMenus(props) {
let initialShowOption = [options]
let initialPath = []
// 当选中选项路径上选项被禁用时，则子集不展开，不反选
let disabledLevel = MAX_LEVEL // 被禁用选项级数
let disabledLevel = maxLevel // 被禁用选项级数
initialValue.forEach((valueItem, index) => {
const currentOption =
filterOptions.find(n => n[fieldNames.value] === valueItem) || {}
Expand All @@ -65,7 +65,7 @@ function PopupMenus(props) {
setCurrentPath(initialPath)
setSelectPath(initialPath)
},
[value, defaultValue, options, fieldNames, previousValue]
[value, defaultValue, options, fieldNames, previousValue, maxLevel]
)
// 显示下级菜单
const showNextLevel = async (option = {}, level) => {
Expand All @@ -75,7 +75,7 @@ function PopupMenus(props) {
setCurrentPath(path)

// 当前为叶子节点，直接返回, 最多支持四级展示，最后一级直接返回
if ((loadData && isLeaf) || level >= MAX_LEVEL - 1) {
if ((loadData && isLeaf) || level >= maxLevel - 1) {
return
}
// 非叶子节点，并且子集不存在时，加载下一级
Expand Down Expand Up @@ -138,15 +138,15 @@ function PopupMenus(props) {
const handleClick = (option = {}, level, hasChildren) => {
if (isLoading.current) return
// 有子集 显示下一集菜单
if (hasChildren || (!option.isLeaf && loadData && level < MAX_LEVEL - 1)) {
if (hasChildren || (!option.isLeaf && loadData && level < maxLevel - 1)) {
showNextLevel(option, level)
}
// 无子集，非动态加载/父级可选/动态加载并且为叶子节点
if (
(!hasChildren && !loadData) ||
changeOnSelect ||
(option.isLeaf && loadData) ||
level >= MAX_LEVEL - 1
level >= maxLevel - 1
) {
handleSelect(option, level)
}
Expand Down Expand Up @@ -188,7 +188,7 @@ function PopupMenus(props) {
{option[fieldNames.label]}
</span>
{(isHasChildren || (!option.isLeaf && loadData)) &&
level < MAX_LEVEL - 1 &&
level < maxLevel - 1 &&
(lastPath[fieldNames.value] === option[fieldNames.value] &&
isLoading.current ? (
<i className='dada-ico dada-ico-rotate-right offset-l animation-loading' />
Expand Down