@rc-component/cascader 1.0.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present alipay.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,300 @@
+# rc-cascader
+
+React Cascader Component.
+
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-cascader.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-cascader
+[travis-image]: https://img.shields.io/travis/react-component/cascader/master?style=flat-square
+[travis-url]: https://travis-ci.com/react-component/cascader
+[github-actions-image]: https://github.com/react-component/cascader/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/cascader/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/cascader/master.svg?style=flat-square
+[codecov-url]: https://app.codecov.io/gh/react-component/cascader
+[david-url]: https://david-dm.org/react-component/cascader
+[david-image]: https://david-dm.org/react-component/cascader/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/cascader?type=dev
+[david-dev-image]: https://david-dm.org/react-component/cascader/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/rc-cascader.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-cascader
+[bundlephobia-url]: https://bundlephobia.com/package/rc-cascader
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-cascader
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+
+## Browser Support
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## Screenshots
+
+<img src="https://os.alipayobjects.com/rmsportal/TYFXEbuQXIaMqQF.png" width="288"/>
+
+## Example
+
+https://cascader-react-component.vercel.app
+
+## Install
+
+[![rc-cascader](https://nodei.co/npm/rc-cascader.png)](https://npmjs.org/package/rc-cascader)
+
+```bash
+$ npm install rc-cascader --save
+```
+
+## Usage
+
+```js
+import React from 'react';
+import Cascader from '@rc-component/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
+
+<table class="table table-bordered table-striped">
+  <thead>
+  <tr>
+    <th style="width: 100px;">name</th>
+    <th style="width: 50px;">type</th>
+    <th style="width: 50px;">default</th>
+    <th>description</th>
+  </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>autoClearSearchValue</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Whether the current search will be cleared on selecting an item. Only applies when checkable</td>
+    </tr>
+    <tr>
+      <td>options</td>
+      <td>Object</td>
+      <td></td>
+      <td>The data options of cascade</td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>Array</td>
+      <td></td>
+      <td>selected value</td>
+    </tr>
+    <tr>
+      <td>defaultValue</td>
+      <td>Array</td>
+      <td></td>
+      <td>initial selected value</td>
+    </tr>
+    <tr>
+      <td>onChange</td>
+      <td>Function(value, selectedOptions)</td>
+      <td></td>
+      <td>callback when finishing cascader select</td>
+    </tr>
+    <tr>
+      <td>changeOnSelect</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>change value on each selection</td>
+    </tr>
+    <tr>
+      <td>loadData</td>
+      <td>Function(selectedOptions)</td>
+      <td></td>
+      <td>callback when click any option, use for loading more options</td>
+    </tr>
+    <tr>
+      <td>expandTrigger</td>
+      <td>String</td>
+      <td>'click'</td>
+      <td>expand current item when click or hover</td>
+    </tr>
+    <tr>
+      <td>open</td>
+      <td>Boolean</td>
+      <td></td>
+      <td>visibility of popup overlay</td>
+    </tr>
+    <tr>
+      <td>onPopupVisibleChange</td>
+      <td>Function(visible)</td>
+      <td></td>
+      <td>callback when popup overlay's visibility changed</td>
+    </tr>
+    <tr>
+      <td>transitionName</td>
+      <td>String</td>
+      <td></td>
+      <td>transition className like "slide-up"</td>
+    </tr>
+    <tr>
+      <td>prefixCls</td>
+      <td>String</td>
+      <td>rc-cascader</td>
+      <td>prefix className of popup overlay</td>
+    </tr>
+    <tr>
+      <td>popupClassName</td>
+      <td>String</td>
+      <td></td>
+      <td>additional className of popup overlay</td>
+    </tr>
+    <tr>
+      <td>popupPlacement</td>
+      <td>String</td>
+      <td>bottomLeft</td>
+      <td>use preset popup align config from builtinPlacements：bottomRight topRight bottomLeft topLeft</td>
+    </tr>
+    <tr>
+      <td>getPopupContainer</td>
+      <td>function(trigger:Node):Node</td>
+      <td>() => document.body</td>
+      <td>container which popup select menu rendered into</td>
+    </tr>
+    <tr>
+      <td>dropdownMenuColumnStyle</td>
+      <td>Object</td>
+      <td></td>
+      <td>style object for each cascader pop menu</td>
+    </tr>
+    <tr>
+      <td>fieldNames</td>
+      <td>Object</td>
+      <td>{ label: 'label', value: 'value', children: 'children' }</td>
+      <td>custom field name for label and value and children</td>
+    </tr>
+    <tr>
+      <td>expandIcon</td>
+      <td>ReactNode</td>
+      <td>></td>
+      <td>specific the default expand icon</td>
+    </tr>
+    <tr>
+      <td>loadingIcon</td>
+      <td>ReactNode</td>
+      <td>></td>
+      <td>specific the default loading icon</td>
+    </tr>
+    <tr>
+      <td>hidePopupOnSelect</td>
+      <td>Boolean</td>
+      <td>>true</td>
+      <td>hide popup on select</td>
+    </tr>
+  </tbody>
+</table>
+
+### option
+
+<table class="table table-bordered table-striped">
+  <thead>
+  <tr>
+    <th style="width: 100px;">name</th>
+    <th style="width: 50px;">type</th>
+    <th style="width: 50px;">default</th>
+    <th>description</th>
+  </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>label</td>
+      <td>String</td>
+      <td></td>
+      <td>option text to display</td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>String</td>
+      <td></td>
+      <td>option value as react key</td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td>Boolean</td>
+      <td></td>
+      <td>disabled option</td>
+    </tr>
+    <tr>
+      <td>children</td>
+      <td>Array</td>
+      <td></td>
+      <td>children options</td>
+    </tr>
+  </tbody>
+</table>
+
+## Development
+
+```bash
+$ npm install
+$ npm start
+```
+
+## Test Case
+
+```bash
+$ npm test
+```
+
+## Coverage
+
+```bash
+$ npm run coverage
+```
+
+## License
+
+rc-cascader is released under the MIT license.

package/assets/index.less

@@ -0,0 +1,3 @@
+@import "./select.less";
+@import "./list.less";
+@import "./panel.less";

package/assets/list.less

@@ -0,0 +1,106 @@
+@select-prefix: ~'rc-cascader';
+
+.@{select-prefix} {
+  &-dropdown {
+    min-height: auto;
+  }
+
+  &-menus {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &-menu {
+    flex: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-left: 1px solid blue;
+    height: 180px;
+    min-width: 100px;
+    overflow: auto;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &-item {
+      display: flex;
+      flex-wrap: nowrap;
+      padding-right: 20px;
+      position: relative;
+
+      &:hover {
+        background: rgba(0, 0, 255, 0.1);
+      }
+
+      &-selected {
+        background: rgba(0, 0, 255, 0.05);
+      }
+
+      &-active {
+        background: rgba(0, 255, 0, 0.1);
+      }
+
+      &-disabled {
+        opacity: 0.5;
+      }
+
+      
+
+      &-content {
+        flex: auto;
+      }
+
+      &-expand-icon {
+        position: absolute;
+        right: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-checkbox {
+    position: relative;
+    display: block;
+    flex: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid blue;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+    }
+
+    &-checked::after {
+      content: '✔️';
+    }
+
+    &-indeterminate::after {
+      content: '➖';
+    }
+  }
+
+  // ====================== RTL ======================
+  &-rtl {
+    direction: rtl;
+
+    .@{select-prefix}-menu {
+      flex: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      border-left: none;
+      border-right: 1px solid blue;
+
+      &:first-child {
+        border-right: 0;
+      }
+    }
+  }
+}

package/assets/panel.less

@@ -0,0 +1,7 @@
+@import (reference) './index.less';
+
+.@{select-prefix} {
+  &-panel {
+    border: 1px solid green;
+  }
+}

package/assets/select.less

@@ -0,0 +1,3 @@
+@import '~@rc-component/select/assets/index';
+
+@select-prefix: ~'rc-cascader';

package/es/Cascader.d.ts

@@ -0,0 +1,88 @@
+import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
+import type { BaseSelectPropsWithoutPrivate, BaseSelectRef } from '@rc-component/select';
+import type { Placement } from '@rc-component/select/lib/BaseSelect';
+import * as React from 'react';
+import Panel from './Panel';
+import { SHOW_CHILD, SHOW_PARENT } from './utils/commonUtil';
+export interface BaseOptionType {
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    label?: React.ReactNode;
+    value?: string | number | null;
+    children?: DefaultOptionType[];
+}
+export type DefaultOptionType = BaseOptionType & Record<string, any>;
+export interface ShowSearchType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
+    filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames<OptionType, ValueField>) => boolean;
+    render?: (inputValue: string, path: OptionType[], prefixCls: string, fieldNames: FieldNames<OptionType, ValueField>) => React.ReactNode;
+    sort?: (a: OptionType[], b: OptionType[], inputValue: string, fieldNames: FieldNames<OptionType, ValueField>) => number;
+    matchInputWidth?: boolean;
+    limit?: number | false;
+}
+export type ShowCheckedStrategy = typeof SHOW_PARENT | typeof SHOW_CHILD;
+interface BaseCascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'> {
+    id?: string;
+    prefixCls?: string;
+    fieldNames?: FieldNames<OptionType, ValueField>;
+    optionRender?: (option: OptionType) => React.ReactNode;
+    children?: React.ReactElement;
+    changeOnSelect?: boolean;
+    displayRender?: (label: string[], selectedOptions?: OptionType[]) => React.ReactNode;
+    checkable?: boolean | React.ReactNode;
+    showCheckedStrategy?: ShowCheckedStrategy;
+    autoClearSearchValue?: boolean;
+    showSearch?: boolean | ShowSearchType<OptionType>;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    expandTrigger?: 'hover' | 'click';
+    options?: OptionType[];
+    /** @private Internal usage. Do not use in your production. */
+    dropdownPrefixCls?: string;
+    loadData?: (selectOptions: OptionType[]) => void;
+    /** @deprecated Use `open` instead */
+    popupVisible?: boolean;
+    popupClassName?: string;
+    dropdownMenuColumnStyle?: React.CSSProperties;
+    /** @deprecated Use `placement` instead */
+    popupPlacement?: Placement;
+    placement?: Placement;
+    builtinPlacements?: BuildInPlacements;
+    onPopupVisibleChange?: (open: boolean) => void;
+    expandIcon?: React.ReactNode;
+    loadingIcon?: React.ReactNode;
+}
+export interface FieldNames<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
+    label?: keyof OptionType;
+    value?: keyof OptionType | ValueField;
+    children?: keyof OptionType;
+}
+export type ValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = keyof OptionType extends ValueField ? unknown extends OptionType['value'] ? OptionType[ValueField] : OptionType['value'] : OptionType[ValueField];
+export type GetValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? ValueType<Required<OptionType>, ValueField>[] : ValueType<Required<OptionType>, ValueField>[][];
+export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> extends BaseCascaderProps<OptionType, ValueField> {
+    checkable?: Multiple;
+    value?: GetValueType<OptionType, ValueField, Multiple>;
+    defaultValue?: GetValueType<OptionType, ValueField, Multiple>;
+    onChange?: (value: GetValueType<OptionType, ValueField, Multiple>, selectOptions: OptionType[]) => void;
+}
+export type SingleValueType = (string | number)[];
+export type InternalValueType = SingleValueType | SingleValueType[];
+export interface InternalFieldNames extends Required<FieldNames> {
+    key: string;
+}
+export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | 'defaultValue'> & {
+    value?: InternalValueType;
+    defaultValue?: InternalValueType;
+    onChange?: (value: InternalValueType, selectOptions: BaseOptionType[] | BaseOptionType[][]) => void;
+};
+export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;
+declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends React.ReactNode = false>(props: CascaderProps<OptionType, ValueField, Multiple> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<CascaderRef> | undefined;
+}) => React.ReactElement) & {
+    displayName?: string | undefined;
+    SHOW_PARENT: typeof SHOW_PARENT;
+    SHOW_CHILD: typeof SHOW_CHILD;
+    Panel: typeof Panel;
+};
+export default Cascader;