-
Notifications
You must be signed in to change notification settings - Fork 8k
fix: auto check parent after node selected #5794
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
WalkthroughThis pull request updates the tree component to support automatic parent-child selection propagation. It introduces new properties and default values for managing node expansion and transition effects. The internal data types and function signatures are updated to handle new parameters related to parent tracking. Additionally, a new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as Checkbox (handleSelect)
participant T as Tree Component (onSelect)
participant M as Model (modelValue)
U->>C: Click on checkbox
C->>T: Invoke handleSelect()
T->>T: Evaluate autoCheckParent flag
alt autoCheckParent enabled
T->>M: Update modelValue to include parent nodes
else
T->>M: Update modelValue with only child node
end
T->>C: Render updated state via TransitionGroup
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
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.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue (3)
158-186
: Implemented autoCheckParent functionality.The
onSelect
function now includes logic to automatically select parent nodes when a child is selected, but it should also handle the reverse case - when a parent is deselected, the children should be deselected too.Consider enhancing the logic to handle parent deselection by adding:
function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) { if ( !props.checkStrictly && props.multiple && props.autoCheckParent && isSelected ) { flattenData.value .find((i) => { return ( get(i.value, props.valueField) === get(item.value, props.valueField) ); }) ?.parents?.forEach((p) => { if (Array.isArray(modelValue.value) && !modelValue.value.includes(p)) { modelValue.value.push(p); } }); + } else if ( + !props.checkStrictly && + props.multiple && + props.autoCheckParent && + !isSelected + ) { + // If parent is deselected, deselect all its children + const itemValue = get(item.value, props.valueField); + // Find all items that have this item as a parent + const childrenToDeselect = flattenData.value + .filter(i => i.parents.includes(itemValue)) + .map(i => get(i.value, props.valueField)); + + // Remove children from selection + if (Array.isArray(modelValue.value)) { + modelValue.value = modelValue.value.filter( + val => !childrenToDeselect.includes(val) + ); + } } else { if (Array.isArray(modelValue.value)) { const index = modelValue.value.indexOf(get(item.value, props.valueField)); if (index !== -1) { modelValue.value.splice(index, 1); } } } updateTreeValue(); emits('select', item); }
274-275
: Remove commented-out code.There is commented-out code for displaying icons. Either implement it or remove it completely to avoid confusion.
<div v-else class="h-4 w-4"> - <!-- <IconifyIcon v-if="item.value.icon" :icon="item.value.icon" /> --> </div>
282-284
: Cleanup commented-out code in event handlers.There are several commented-out lines in the event handlers that should be removed to improve code clarity.
Clean up the commented code in both handlers:
@click=" () => { handleSelect(); - // onSelect(item, !isSelected); } "
@click=" (_event) => { - // $event.stopPropagation(); - // $event.preventDefault(); handleSelect(); - // onSelect(item, !isSelected); } "Also applies to: 290-295
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
(5 hunks)packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
(1 hunks)playground/src/views/system/role/modules/form.vue
(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Check (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (7)
playground/src/views/system/role/modules/form.vue (1)
101-101
: Added wrapper class to improve layout.The addition of
wrapper-class-name="w-full"
ensures the Spin component uses the full available width, which improves the layout and alignment of the tree component within the form.packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts (1)
6-42
: New TreeProps interface provides well-structured type definitions.The new interface enhances code maintainability by providing clear type definitions and documentation for all tree component properties. The
autoCheckParent
property (line 10) directly implements the functionality mentioned in the PR objectives for automatic parent selection.packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue (5)
7-7
: Added TreeProps import and enabled autoCheckParent by default.Good implementation of the
autoCheckParent
property with a default value oftrue
, which matches the PR objectives for automatically selecting parent nodes when a child is selected.Also applies to: 21-21
25-26
: Updated default behavior for tree expansion and transitions.The addition of
defaultExpandedLevel: 0
and changingtransition
default totrue
improves the user experience by providing better control over initial tree state and enabling smooth animations by default.Also applies to: 33-34
44-48
: Enhanced data structure to track parent-child relationships.The updated
InnerFlattenItem
interface andflatten
function now track parent nodes, which is essential for implementing theautoCheckParent
functionality. This change maintains tree hierarchy information during the flattening process.Also applies to: 51-56, 63-73
222-226
: Added TransitionGroup for smooth animations.Using
TransitionGroup
for animating tree node changes is a good improvement for user experience. The conditional transition name based on thetransition
prop provides flexibility.
314-348
: Added transition styles for smooth animations.The added styles provide smooth animation effects for tree node transitions. The CSS follows best practices with clear comments explaining each part of the transition effect.
Description
增加autoCheckParent属性,控制在非checkStrictly多选模式下,选择子项时,自动勾选祖先节点。
fix: #5703
Type of change
Please delete options that are not relevant.
pnpm-lock.yaml
unless you introduce a new test example.Checklist
pnpm run docs:dev
command.pnpm test
.feat:
,fix:
,perf:
,docs:
, orchore:
.Summary by CodeRabbit
New Features
Style