Code Monkey home page Code Monkey logo

cascader's Introduction

rc-cascader

React Cascader Component

NPM version npm download build status Codecov bundle size dumi

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Screenshots

Example

https://cascader-react-component.vercel.app

Install

rc-cascader

$ npm install rc-cascader --save

Usage

import React from 'react';
import Cascader from 'rc-cascader';

const options = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
    }],
  }, {
    'label': '泉州',
    'value': 'quanzhou',
  }],
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
    }],
  }],
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',
  }],
}];

React.render(
  <Cascader options={options}>
    ...
  </Cascader>
, container);

API

props

name type default description
autoClearSearchValue boolean true Whether the current search will be cleared on selecting an item. Only applies when checkable
options Object The data options of cascade
value Array selected value
defaultValue Array initial selected value
onChange Function(value, selectedOptions) callback when finishing cascader select
changeOnSelect Boolean false change value on each selection
loadData Function(selectedOptions) callback when click any option, use for loading more options
expandTrigger String 'click' expand current item when click or hover
open Boolean visibility of popup overlay
onDropdownVisibleChange Function(visible) callback when popup overlay's visibility changed
transitionName String transition className like "slide-up"
prefixCls String rc-cascader prefix className of popup overlay
dropdownClassName String additional className of popup overlay
popupPlacement String bottomLeft use preset popup align config from builtinPlacements:bottomRight topRight bottomLeft topLeft
getPopupContainer function(trigger:Node):Node () => document.body container which popup select menu rendered into
dropdownMenuColumnStyle Object style object for each cascader pop menu
fieldNames Object { label: 'label', value: 'value', children: 'children' } custom field name for label and value and children
expandIcon ReactNode > specific the default expand icon
loadingIcon ReactNode > specific the default loading icon
hidePopupOnSelect Boolean >true hide popup on select

option

name type default description
label String option text to display
value String option value as react key
disabled Boolean disabled option
children Array children options

Development

$ npm install
$ npm start

Test Case

$ npm test

Coverage

$ npm run coverage

License

rc-cascader is released under the MIT license.

cascader's People

Contributors

adispring avatar afc163 avatar babycannotsay avatar benjycui avatar boyyangzai avatar crazyair avatar ddcat1115 avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar dunqing avatar heiyu4585 avatar heskeybaozi avatar kiner-tang avatar layouwen avatar lgtm-com[bot] avatar li-jia-nan avatar liangkuku avatar luolonghao avatar madccc avatar mighty-phoenix avatar mygitzone avatar shaodahong avatar songlinn avatar wfk007 avatar xrkffgg avatar yesmeck avatar yoyo837 avatar yuiai01 avatar zombiej avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cascader's Issues

keyboard shotcut issue

Precondition: cursor focused in the search input,
Operation: key board <
Expect: move the cursor left.
Actual: dropdown closed

So can Cascader allow user forbidden keyboard shotcut or optimize keyboard shotcut?
image

全局引入样式不生效

f4e5e152eb27f2e1a0713dc0b7747fe
全局引入样式文件后样式不生效,按照demo中的写法引入到局部文件中级联选择无法消失,还是选择使用了rc-tree-select

Error when running npm run test.

I have forked master code of the Cascader repository and encountered errors when running ‘npm run test’.
image
After investigating, I discovered that the errors are caused by a pull request.
I would like update snapshots to fix this issue.

性能需求

在li渲染大数据的时候有性能问题,有考虑li 换为 rc-virtual-list 么?

options need a "key" property

option value as react key at present, but if i set value as a object, like {value: {id: 123, type: 'childeNode'}}, the warning

"Warning:Encountered two children with the same key, [object Object]."
repeat repeat repeat...

Got typescript error when set strictFunctionTypes.

The SingleCascaderProps.onChange conflicts with BaseCascaderProps.onChange when i set typescript compilerOptions.strict or compilerOptions.strictFunctionTypes.

// tsconfig.json
// [email protected]
{
  "compilerOptions": {
    "jsx": "react",
    "target": "ES5",
    "module": "commonjs",
    "lib": ["dom", "es2017", "ES2018", "ES2019", "ES2020"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "importHelpers": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    // "strict": true,
    "strictFunctionTypes": true,
    "outDir": "./lib",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "moduleResolution": "node"
  },
}

image

popupClassName 还是 dropdownClassName ?

现在使用[email protected],Cascader组件使用popupClassName或者dropdownClassName都提示deprecated,到底用哪个
rc-cascader
/** @deprecated UsedropdownClassName` instead */

popupClassName?: string;
dropdownClassName?: string;
`

antd
`
/**

  • @deprecated dropdownClassName is deprecated which will be removed in next major
  • version.Please use popupClassName instead.
    */
    dropdownClassName?: string;
    `

data 为空时不要显示

Test = React.createClass({
getInitialState() {
  return {data:[]}
}, 
fetch() {
  setTimeout(() => {
 this.setState({
data:[{value,children}]
})
},1000);
}
render(){
  return (<Cascader data={this.state.data}>
<input onChange={this.fetch}/>
</Cascader>);
}
})

点击不应该弹出一个空白区域

querySelect报错

const ele = containerRef.current?.querySelector<HTMLElement>(
`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]`, // matches unescaped double quotes
);

当代码中Selector中存在双引号时,代码将会抛出异常

  • 测试代码: document.querySelector('"asdlfjlksj"')

  • 异常信息如下所示

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '"asdlfjlksj"' is not a valid selector.

columnNodes 返回的子节点能否自定义?

  1. 因为这样容易让开发者自定义
  2. 扩展性更强
 const mergedOptionColumns = isEmpty ? [{ options: emptyList }] : optionColumns;

const columnNodes: React.ReactElement[] = mergedOptionColumns.map(
    (col, index) => {
        const prevValuePath = activeValueCells.slice(0, index);
        const activeValue = activeValueCells[index];
        // return item
        const custormRenderColumnItem = this.props?.custormRenderColumnItem;
        const isCustormRenderItem =
            custormRenderColumnItem &&
            typeof custormRenderColumnItem === "function";
        if (isCustormRenderItem) {
            const CustormRenderColumnItem = custormRenderColumnItem();
            return (
                <CustormRenderColumnItem
                    key={index}
                    {...columnProps}
                    prefixCls={mergedPrefixCls}
                    options={col.options}
                    prevValuePath={prevValuePath}
                    activeValue={activeValue}
                />
            );
        }

        return (
            <Column
                key={index}
                {...columnProps}
                prefixCls={mergedPrefixCls}
                options={col.options}
                prevValuePath={prevValuePath}
                activeValue={activeValue}
            />
        );
    }
);

// >>>>> Render
return (
    <div
        className={classNames(`${mergedPrefixCls}-menus`, {
            [`${mergedPrefixCls}-menu-empty`]: isEmpty,
            [`${mergedPrefixCls}-rtl`]: rtl,
        })}
        ref={containerRef}
    >
        {columnNodes}
    </div>
);

loadData的时候异步的改变枝节点为叶节点,并且关闭浮层

现在有一个需求,因为一些原因,后台传过来数据的时候不知道此时的节点是枝节点还是叶节点。每次需要等待传回来的数据判断。这时候想要有一个回调,如果传回来的数据表示当前节点是叶节点,设置值为当前节点并且关闭浮层。

README.md 的文档是错误的

var Cascader = require('rc-cascader');
var React = require('react');

const addressOptions = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
    }],
  }, {
    'label': '泉州',
    'value': 'quanzhou',
  }],
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
    }],
  }],
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',
  }],
}];

React.render(<Cascader options={options} />, container);

一个是 addressOptions 和 options={options}, 然后我看详细的demo,都是 Cascader 包裹一个children。
Cascader 可以不存在 children 直接调用?

搜索能做成节流吗?

用lodash的throttle试过,貌似不行,filterOption外包装一层就无法使用,在搜索省市区的时候有点卡

problems with yarn berry / pnp setups

When using yarn berry, I am getting:

../../.yarn/__virtual__/rc-cascader-virtual-b23b4687e9/3/.yarn/berry/cache/rc-cascader-npm-3.20.0-70d36b442e-10c0.zip/node_modules/rc-cascader/lib/Cascader.d.ts:1:40 - error TS2307: Cannot find module '@rc-component/trigger/lib/interface' or its corresponding type declarations.

1 import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in ../../.yarn/__virtual__/rc-cascader-virtual-b23b4687e9/3/.yarn/berry/cache/rc-cascader-npm-3.20.0-70d36b442e-10c0.zip/node_modules/rc-cascader/lib/Cascader.d.ts:1

using:

cat .yarnrc.yml

nodeLinker: pnp

however, with this, it will work:

cat .yarnrc.yml

nodeLinker: node-modules

能否增加props属性以控制scroll

如下代码,当展开下拉菜单时将导致自动滚动到顶部,原因是调用scrollIntoParentView时,下拉菜单尚未完成渲染,导致自动滚动到顶部。希望在props中增加对scroll的控制。

const Cascader: FC<CascaderProps> = (props) => {
  const rolePropOptions = useModel('dubbing', ({ rolePropOptions }) => rolePropOptions);

  return <AntdCascader options={rolePropOptions} {...props} />;
};

export default Cascader;

demo运行不起来

React.cloneElement(...): The argument must be a React element, but you passed undefined.

改动备忘

  1. 数据子属性 options => children
  2. values => values defaultValues => defaultValue
  3. 和 rc-form 配合使用。

单独使用 rc-cascader 时 trigger 组件出现问题

我这边想要开发一个组件,准备封装 rc-cascader ,所以单独 npm i rc-cascader,然后直接 import Cascader from 'rc-cascader',在使用时出现问题,报错信息如下:

复现代码:

const React = require('react');
const Cascader = require('rc-cascader');
// import { Cascader } from 'antd';

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class CascadeSelect extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
        <Cascader options={ options } placeholder="请选择" />
    )
  }

}

Ability to set auto height

Is there any option to pass in order to have the height set to auto if there are only few options in 1 column?
height-request

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.