Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
353 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| Cascader 级联选择 | ||
| === | ||
|
|
||
| [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-cascader/file/README.md) | ||
| [](https://www.npmjs.com/package/@uiw/react-cascader) | ||
| [](https://npmjs.com/@uiw/react-cascader) | ||
|
|
||
| 级联选择框。v4.16.0中添加 | ||
|
|
||
| ```jsx | ||
| import { Cascader } from 'uiw'; | ||
| // or | ||
| import Cascader from '@uiw/react-cascader'; | ||
| ``` | ||
|
|
||
| ## 基础示例 | ||
|
|
||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| import ReactDOM from 'react-dom'; | ||
| import { Cascader } from 'uiw'; | ||
|
|
||
| const Demo = () => { | ||
|
|
||
| const options = [ | ||
| { | ||
| value: 'zhejiang', | ||
| label: 'Zhejiang', | ||
| children: [ | ||
| { | ||
| value: 'hangzhou', | ||
| label: 'Hangzhou', | ||
| children: [ | ||
| { | ||
| value: 'xihu', | ||
| label: 'West Lake', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| value: 'jiangsu', | ||
| label: 'Jiangsu', | ||
| children: [ | ||
| { | ||
| value: 'nanjing', | ||
| label: 'Nanjing', | ||
| children: [ | ||
| { | ||
| value: 'zhonghuamen', | ||
| label: 'Zhong Hua Men', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| return( | ||
| <div style={{ width: 200 }}> | ||
| <Cascader placeholder="请选择" option={options} onChange={(value,seleteds)=>console.log(value,seleteds)}/> | ||
| </div> | ||
| ) | ||
| }; | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | 版本 | | ||
| | ---- | ---- | ---- | ---- | ---- | | ||
| | allowClear | 支持清除 | Boolean | `false` | - | | ||
| | placeholder | 选择框默认文字 | String | - | - | | ||
| | option | 选项菜单 | { value: String \| Number, label: React.ReactNode, children: Array<String \| Number>} | - | - | | ||
| | value | 指定当前选中的条目，多选时为一个数组 | String[] \| Number[] | - | - | | ||
| | onChange | 选中选项调用此函数 | function(value, selectedOptions) | - | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| { | ||
| "name": "@uiw/react-cascader", | ||
| "version": "4.15.1", | ||
| "description": "Cascader component", | ||
| "author": "Kenny Wong <wowohoo@qq.com>", | ||
| "homepage": "https://uiwjs.github.io/#/components/cascader", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/uiwjs/uiw.git" | ||
| }, | ||
| "license": "MIT", | ||
| "main": "cjs/index.js", | ||
| "module": "esm/index.js", | ||
| "files": [ | ||
| "dist.css", | ||
| "cjs", | ||
| "esm", | ||
| "src" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "keywords": [ | ||
| "cascader", | ||
| "design", | ||
| "uiw", | ||
| "uiw-react", | ||
| "react.js", | ||
| "react", | ||
| "react-component", | ||
| "component", | ||
| "components", | ||
| "ui", | ||
| "css", | ||
| "uikit", | ||
| "react-ui", | ||
| "framework", | ||
| "front-end", | ||
| "frontend" | ||
| ], | ||
| "peerDependencies": { | ||
| "react": ">=16.9.0", | ||
| "react-dom": ">=16.9.0" | ||
| }, | ||
| "dependencies": { | ||
| "@uiw/react-dropdown": "^4.15.1", | ||
| "@uiw/react-icon": "^4.15.1", | ||
| "@uiw/react-input": "^4.15.1", | ||
| "@uiw/react-loader": "^4.15.1", | ||
| "@uiw/react-menu": "^4.15.1", | ||
| "@uiw/react-tag": "^4.15.1", | ||
| "@uiw/utils": "^4.15.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React, { useState, useEffect, useMemo } from 'react'; | ||
| import Input from '@uiw/react-input'; | ||
| import { IProps } from '@uiw/utils'; | ||
| import Dropdown, { DropdownProps } from '@uiw/react-dropdown'; | ||
| import Menu from '@uiw/react-menu'; | ||
| import Icon from '@uiw/react-icon'; | ||
|
|
||
| type ValueType = Array<string | number>; | ||
| type optionType = { value: string | number; label: React.ReactNode; children?: Array<optionType> }; | ||
|
|
||
| export interface CascaderProps extends IProps, DropdownProps { | ||
| option?: Array<optionType>; | ||
| value?: ValueType; | ||
| onChange?: (value: ValueType, selectedOptions: Array<optionType>) => void; | ||
| allowClear?: boolean; | ||
| placeholder?: string; | ||
| isOpen?: boolean; | ||
| } | ||
|
|
||
| function Cascader(props: CascaderProps) { | ||
| const { placeholder, prefixCls = 'w-search-select', className, style = { width: 200 }, option = [], others } = props; | ||
|
|
||
| const cls = [prefixCls, className].filter(Boolean).join(' ').trim(); | ||
| const [innerIsOpen, setInnerIsOpen] = useState(false); | ||
| const [selectedValue, setSelectedValue] = useState<Array<optionType>>([]); | ||
|
|
||
| function onVisibleChange(isOpen: boolean) { | ||
| setInnerIsOpen(isOpen); | ||
| } | ||
|
|
||
| const handleItemClick = (optionsItem: optionType, level: number) => { | ||
| selectedValue.splice(level, selectedValue.length - level, optionsItem); | ||
| setSelectedValue([...selectedValue]); | ||
|
|
||
| handelChange(); | ||
| }; | ||
|
|
||
| const handelChange = () => { | ||
| const value = selectedValue.map((item) => item.value); | ||
| props.onChange?.(value, selectedValue); | ||
| }; | ||
|
|
||
| const widths = (style?.width as number) * 0.6 || undefined; | ||
|
|
||
| const OptionIter = (option: Array<optionType>, level: number = 0) => { | ||
| if (!option) return; | ||
|
|
||
| return ( | ||
| <Menu | ||
| key={level} | ||
| bordered | ||
| style={{ | ||
| minHeight: 25, | ||
| minWidth: widths, | ||
| overflowY: 'scroll', | ||
| width: widths, | ||
| }} | ||
| > | ||
| {!option || option.length === 0 ? ( | ||
| <div style={{ color: '#c7c7c7', fontSize: 12 }}>{'没有数据'}</div> | ||
| ) : ( | ||
| option.map((item, index) => { | ||
| const active = selectedValue[level]?.value === item.value; | ||
| return ( | ||
| <Menu.Item | ||
| active={active} | ||
| key={index} | ||
| text={item.label} | ||
| addonAfter={item.children ? <Icon type="right" /> : undefined} | ||
| onClick={() => handleItemClick(item, level)} | ||
| /> | ||
| ); | ||
| }) | ||
| )} | ||
| </Menu> | ||
| ) as JSX.Element; | ||
| }; | ||
|
|
||
| const inputValue = useMemo(() => { | ||
| return selectedValue.map((item) => item.label).join(' / '); | ||
| }, [selectedValue.length]); | ||
|
|
||
| return ( | ||
| <Dropdown | ||
| className={cls} | ||
| trigger="click" | ||
| style={{ marginTop: 5, ...style }} | ||
| overlayStyl={{ width: 100 }} | ||
| {...others} | ||
| onVisibleChange={onVisibleChange} | ||
| isOpen={innerIsOpen} | ||
| menu={ | ||
| <div style={{ display: 'flex' }}> | ||
| {new Array(selectedValue.length + 1) | ||
| .fill(0) | ||
| .map((_, index) => { | ||
| const options = index ? selectedValue[index - 1]?.children! : option; | ||
| return OptionIter(options, index); | ||
| }) | ||
| .filter((m) => !!m)} | ||
| </div> | ||
| } | ||
| > | ||
| <Input value={inputValue} onChange={() => {}} placeholder={placeholder} style={{ width: style?.width }} /> | ||
| </Dropdown> | ||
| ); | ||
| } | ||
|
|
||
| export default Cascader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| @w-search-select: ~'w-search-select'; | ||
|
|
||
| .@{w-search-select} { | ||
| &-input-contents { | ||
| input { | ||
| box-shadow: none; | ||
| padding: 0px; | ||
| min-width: 50px; | ||
| height: 22px; | ||
| } | ||
|
|
||
| .w-input-inner { | ||
| &:hover { | ||
| box-shadow: none !important; | ||
| } | ||
|
|
||
| &:focus { | ||
| box-shadow: none !important; | ||
| } | ||
|
|
||
| &.disabled { | ||
| box-shadow: none; | ||
| background: #dddddd; | ||
| opacity: 0.75; | ||
| color: #a5a5a5; | ||
| cursor: not-allowed; | ||
| resize: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &-inner { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| outline: none; | ||
| border: none; | ||
| align-items: center; | ||
| border-radius: 3px; | ||
| box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), | ||
| inset 0 1px 1px rgba(16, 22, 26, 0.2); | ||
| box-sizing: border-box; | ||
| background: #fff; | ||
| min-height: 30px; | ||
| margin: 0 !important; | ||
| padding: 3px 10px 3px 10px; | ||
| vertical-align: middle; | ||
| line-height: 30px; | ||
| color: #393e48; | ||
| font-weight: 400; | ||
| font-size: inherit; | ||
| transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9); | ||
| appearance: none; | ||
|
|
||
| &:focus { | ||
| box-shadow: 0 0 0 1px #393e48, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2); | ||
| } | ||
|
|
||
| &:hover { | ||
| box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2); | ||
| } | ||
|
|
||
| &:focus&:hover { | ||
| box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2); | ||
| } | ||
|
|
||
| &:disabled { | ||
| box-shadow: none; | ||
| background: #dddddd; | ||
| opacity: 0.75; | ||
| color: #a5a5a5; | ||
| cursor: not-allowed; | ||
| resize: none; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "extends": "../../tsconfig", | ||
| "include": ["src/**/*"], | ||
| "compilerOptions": { | ||
| "outDir": "./cjs", | ||
| "baseUrl": "." | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.