helkyle / antd-multi-cascader Goto Github PK

View Code? Open in Web Editor NEW

89.0 1.0 23.0 5.48 MB

A multiple cascader component for antd

Home Page: https://codesandbox.io/s/dreamy-jennings-2y1ff?file=/src/App.tsx

License: MIT License

JavaScript 2.49% TypeScript 92.91% Less 4.60%

antd cascader typescript cascader-multiselect antd-multi-cascader

antd-multi-cascader's Introduction

🎉🎉🎉 News

[email protected] has supported multiple cascader features. Should consider it first.

antd-multi-cascader

A multiple cascader component for antd

Online Demo，How it works?

How to use?

npm install antd-multi-cascader or yarn add antd-multi-cascader

const [value, setValue] = React.useState<string[]>([]);

return (
  <MultiCascader
    value={value}
    onChange={setValue}
    data={options}
    placeholder="Select Cities"
  />
)

Props

🚨 Please install 1.3.0 version or set popupTransitionName=slide-up manually if your antd version below 4.13.0
🚨 如果你使用的 antd 版本小于 4.13.0，请安装 1.3.0 的版本，或手动设置 popupTransitionName=slide-up

Props	Type	Description
value	string[]	Selected value
data	TreeNode[]	Cascader options TreeNode { title: string, value: string, children?: TreeNode, isLeaf?: boolean }
allowClear	boolean	Whether allow clear
placeholder	string	The input placeholder
onChange	(newVal) => void	Callback when finishing value select
selectAll	boolean	Whether allow select all
className	string	The additional css class
style	React.CSSProperties	The additional style
disabled	boolean	Whether disabled select
okText	string	The text of the Confirm button
cancelText	string	The text of the Cancel button
selectAllText	string	The text of the SelectAll radio
onCascaderChange	(node: TreeNode, operations: { add: (children: TreeNode[]) => TreeNode[] }) => void	Trigger when click a menu item
popupTransitionName	string	Should set 'slide-up' manually if antd version below 4.13.0
getPopupContainer	(props: any) => HTMLElement	Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative
maxTagCount	Max tag count to show. responsive will cost render performance	number \| responsive

Async Data Example

const [asyncOptions, setAsyncOptions] = React.useState([
  {
    value: 'ParentNode1',
    title: 'ParentNode1',
    // tell component this node is not a leaf node
    isLeaf: false,
  },
  {
    value: 'ParentNode2',
    title: 'ParentNode2',
  },
])

const handleCascaderChange = React.useCallback((node, { add }) => {
  // call add function to append children nodes
  if (node.value === 'ParentNode1' && !node.children) {
    setTimeout(() => {
      setAsyncOptions(
        add([
          {
            value: 'ParentNode1-1',
            title: 'ParentNode1-1',
          },
        ])
      )
    }, 1000)
  }
}, [])

<MultiCascader
  selectAll
  data={asyncOptions}
  onCascaderChange={handleCascaderChange}
  placeholder="Async Data"
/>

antd-multi-cascader's People

Stargazers

Watchers

antd-multi-cascader's Issues

让 title 支持 ReactNode 类型

我们需要在 item 内容中展示 antd icon，所以需要让 title 支持传入 ReactNode 类型

popupvisible没有生效

我用rc-trigger时 popupVisible 已经为false了但是弹窗还是展开态是怎么回事呢

使用高版本的antd时，无法交互

我是使用的15.3的antd，无法点击，在您的codesandbox里面更换antd的一些较高版本后也是无法点击，无法关闭，好像是rc-trigger 有点问题

请问支持只最后一级多选吗？还有当选择某一级全部子节点时结果展示为各子节点的tag形式，而不是父节点？

如题，请问怎么配置呢

点击select框触发子集弹层的时候，元素新增了pointer-events: none;属性导致无法选中

getPopupContainer is not working

index.js:1406 Warning: React does not recognize the getPopupContainer prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase getpopupcontainer instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Selector)
in Selector (created by ForwardRef)
in Trigger (created by ForwardRef)
in ForwardRef
in ForwardRef (created by ForwardRef)
in Provider (created by ForwardRef)

是否可以把footer 去掉呢？有参数吗? 以及获取焦点，支持输入搜索呢？

The whole module is not working now

Last time forgot to restart the server
TypeError: Cannot read property '_context' of undefined
getting this error on the latest version the older version is still working

使用高版本的antd时，无法交互

我是使用的15.3的antd，无法点击，在您的codesandbox里面更换antd的一些较高版本后也是无法点击，无法关闭，好像是rc-trigger 有点问题

不能收起来呢？

点击取消或者确定或者其他地方都不能收起来呢？？？

data变化时没有重新渲染

例如默认是空数组，请求回来的数据传给data还是空数组，导致点击展开菜单报错

在antd3 react17 情况下使用antd-multi-cascader 1.3.0 要报错

Cannot read properties of undefined (reading '_context')

考虑支持“动态加载选项”吗？

同 https://ant.design/components/cascader-cn/#components-cascader-demo-lazy

无法点击

引入项目后点击不生效

Can you also add dropdownMatchSelectWidth from antd Select

It will fix one of the CSS issues of the dropdown
and if you can also add dropdownClassName later it will be great
but the dropdownMatchSelectWidth is the most important one

antd 4.13.4 以上版本出现样式问题

antd 4.13.4 以上版本
出现确认取消按钮失效问题

动态渲染data会报错，如下

export default function App() {
  const [options, setOptions] = React.useState<any[]>([]);
  React.useEffect(()=>{
      setTimeout(()=>{
        setOptions([{
          value: 'Node1',
          title: 'Node1'
      },
      {
          value: 'Node2-1',
          title: 'Node2',
          children: [ ]
      }])
    },500);
  },[]);

  return (
    <div className="App">
      <section>
        <header>Form Control</header>
        <MultiCascader
          data={options}
          placeholder="Select Nodes"
        />
      </section>
    </div>
  );
}

Dropdown is moving with the main scroll bar

The whole dropdown moves when the main scrollbar of the page is used.
No prop called getPopupContainer can be passed like in Antd components to fix this issue.

Not exactly an issue just suggestion, to add maxTagCount and check on text click

There's an attribute called maxTagCount in antd Select which lets you select the number of tags that can be displayed it would be helpful if that was present here because as of right now if there are multiple tags selected and the component has a fixed width and height then the tags will either overflow or there will be a scrollbar inside the component.
And the other would be a quality of life change, to select a checkbox currently the user has to click on the checkbox it won't work if someone clicked on the text, it would be better if the user could click on the text as well to check the checkbox.

虽然现在可以通过ref拿到matchAllLeafValue方法,但是每次都得调用比较麻烦.