feat(pro:search): add 'cascader' searchField
#1485
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
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,110 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
| */ | ||
|
|
||
| import { defineComponent, inject, onUnmounted, watch } from 'vue' | ||
|
|
||
| import { type VKey, callEmit } from '@idux/cdk/utils' | ||
| import { CascaderPanelProps, IxCascaderPanel } from '@idux/components/cascader' | ||
|
|
||
| import PanelFooter from './PanelFooter' | ||
| import { proSearchContext } from '../token' | ||
| import { proSearchCascaderPanelProps } from '../types' | ||
|
|
||
| export default defineComponent({ | ||
| props: proSearchCascaderPanelProps, | ||
| setup(props) { | ||
| const { mergedPrefixCls, locale } = inject(proSearchContext)! | ||
|
|
||
| watch( | ||
| () => props.searchValue, | ||
| searchValue => { | ||
| callEmit(props.onSearch, searchValue ?? '') | ||
| }, | ||
| ) | ||
| onUnmounted(() => { | ||
| if (props.searchValue) { | ||
| callEmit(props.onSearch, '') | ||
| } | ||
| }) | ||
|
|
||
| const changeSelected = (keys: VKey[] | VKey[] | VKey[][]) => { | ||
| callEmit(props.onChange, props.multiple ? keys : [keys]) | ||
| } | ||
|
|
||
| const handleConfirm = () => { | ||
| callEmit(props.onConfirm) | ||
| } | ||
| const handleCancel = () => { | ||
| callEmit(props.onCancel) | ||
| } | ||
|
|
||
| const renderFooter = () => { | ||
| if (!props.multiple) { | ||
| return | ||
| } | ||
|
|
||
| return ( | ||
| <PanelFooter | ||
| prefixCls={mergedPrefixCls.value} | ||
| locale={locale} | ||
| onConfirm={handleConfirm} | ||
| onCancel={handleCancel} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return () => { | ||
| const prefixCls = `${mergedPrefixCls.value}-cascader-panel` | ||
| const { | ||
| dataSource, | ||
| disableData, | ||
| expandIcon, | ||
| expandTrigger, | ||
| fullPath, | ||
| loadChildren, | ||
| multiple, | ||
|
|
||
| searchValue, | ||
| searchFn, | ||
| separator, | ||
| strategy, | ||
| virtual, | ||
|
|
||
| onExpand, | ||
| onLoaded, | ||
| } = props | ||
| const panelProps = { | ||
| selectedKeys: props.value, | ||
| dataSource, | ||
| disableData, | ||
| childrenKey: 'children', | ||
| getKey: 'key', | ||
| expandIcon, | ||
| expandTrigger, | ||
| fullPath, | ||
| loadChildren, | ||
| labelKey: 'label', | ||
| multiple, | ||
| searchFn, | ||
| searchValue, | ||
| separator, | ||
| strategy, | ||
| virtual, | ||
| onExpand, | ||
| onLoaded, | ||
| 'onUpdate:selectedKeys': changeSelected, | ||
| } as CascaderPanelProps | ||
|
|
||
| return ( | ||
| <div class={prefixCls} tabindex={-1} onMousedown={evt => evt.preventDefault()}> | ||
| <IxCascaderPanel {...panelProps} /> | ||
| {renderFooter()} | ||
| </div> | ||
| ) | ||
| } | ||
| }, | ||
| }) | ||
|
There was a problem hiding this comment. code review First of all, the code looks well formatted and organized. There is no risk of any bugs here. However, there are some potential improvements that can be made.
Overall, the code looks well written and bug-free. |
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
with a brief code review.
Firstly, it looks like the code is written correctly, and there are no obvious bugs or errors in the code. However, there could be some possible improvements.
Firstly, it might be better to make sure that the dataSource is defined outside of the searchFields array, so that it can be more easily reused in other places.
Also, it would be good to add some validation when entering the data, to make sure all the keys and labels are unique.
Finally, it would be a good idea to add comments to the code, so that it is easier to understand what is going on.
Overall, it looks like the code is written correctly, and all the necessary checks have been made.