react-component / cascader Goto Github PK

IE不支持scrollTo，仅支持scrollTop，需要判断函数，在调用对应的方法

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

bottomRight
topRight
bottomLeft
topLeft

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

Cascader 级联组件业务上考虑支持多选吗，我想开发支持并提交 PR。

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"
  },
}

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？

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>);
}
})

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

请问下 CascaderProps 里可以将 popupAlign 参数导出么，rc-trigger 已经支持了该参数，我这边希望覆写这个间距

因为在传入rc-select@14.1.2@rc-select中的 BaseSelect ， 的 onKeyDown
：onInternalKeyDown中会根据这个disabled来判断，是否能删除这个已选中的属性。

使用场景是，当配合Form.Item，回填使用的时候当option中已经加了disabled 这时是不能选中。期望是不能删除，但是现在是能删除已经选择的。

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

设置了fieldNames时，代码中直接取的value，会将loadingKeys设置成undefined，进而报错白屏了

应该要判断取设置的fiedNames中value对应的别名字段，如本例中的code

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 直接调用？

I have forked master code of the Cascader repository and encountered errors when running ‘npm run test’.

After investigating, I discovered that the errors are caused by a pull request.
I would like update snapshots to fix this issue.

我这边想要开发一个组件，准备封装 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="请选择" />
    )
  }

}

现在使用[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;
  `

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

Thanks

Currently, with expandTrigger='hover', component changes selection too quickly. Would it be possible to expose a delay prop into the component to control this behavior?

The current hover sandbox found in the docs site is showing a sandbox error

The sand box below is forked with a working example:
https://codesandbox.io/s/confident-swartz-e1kxin?file=/Cascader.tsx:7876-7879

multiple mode like in element-ui

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

https://github.com/react-component/cascader/blob/master/src/Cascader.tsx#L372

没理解为什么这么做， 如果想要传 ’SHOW_CHILD'效果怎么办

I'm using it in a project with:
material-ui
react
typescript
rc-cascader

and it looks like this:

最新版本复现 不知道是否是设计如此

如上图所示

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...

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

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

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

export default Cascader;

在option节点中加入一个disable的功能

隐藏一下icon

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

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

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

• 异常信息如下所示

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

classnames is imported in the Checkbox component

But it is not present under dependencies in package.json.

This causes issues when installing under yarn 2 which is very strict about dependencies.

I was able to work around by adding this to my .yarnrc.yml:

packageExtensions:
  rc-cascader@*:
    dependencies:
      classnames: "*"

In the example, we use , (comma) for values, can we change it to / as AntDesign do?

Would support dropdownRender prop to custom menulist ?

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

showSearch = {
    limit: false,
}

It doesn't work correctly because the condition is formulated incorrectly
https://github.com/react-component/cascader/blob/master/src/hooks/useSearchConfig.ts#L24C9-L24C21

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

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>
);