Skip to content
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.

Sign up for GitHub

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

refactor(panel, shell, tree-item): Add keys to conditionally rendered slots. #3962

Merged
merged 8 commits into from
Jan 20, 2022
Merged

refactor(panel, shell, tree-item): Add keys to conditionally rendered slots. #3962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
71194be
refactor(panel, shell, tree-item): Add keys to conditionally rendered…
driskull Jan 19, 2022
901da6a
add const for key.
driskull Jan 19, 2022
4447130
Merge branch 'master' into dris0000/conditional-default-slot-rendering
driskull Jan 19, 2022
748e953
fix code
driskull Jan 19, 2022
eb68bf9
Merge branch 'master' into dris0000/conditional-default-slot-rendering
driskull Jan 20, 2022
b59c688
Merge branch 'master' into dris0000/conditional-default-slot-rendering
driskull Jan 20, 2022
fa59381
Merge branch 'master' into dris0000/conditional-default-slot-rendering
driskull Jan 20, 2022
dfb48d8
review cleanup
driskull Jan 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/components/calcite-panel/calcite-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,24 +399,27 @@ export class CalcitePanel implements ConditionalSlotComponent {
const { el } = this;
const hasFab = getSlotted(el, SLOTS.fab);

const defaultSlotNode: VNode = <slot key="default-slot" />;
const contentWrapperKey = "content-wrapper";

return hasFab ? (
<div
class={{ [CSS.contentWrapper]: true, [CSS.contentHeight]: true }}
key={contentWrapperKey}
onScroll={this.panelScrollHandler}
tabIndex={0}
>
<section class={CSS.contentContainer}>
<slot />
</section>
<section class={CSS.contentContainer}>{defaultSlotNode}</section>
{this.renderFab()}
</div>
) : (
<section
class={{ [CSS.contentWrapper]: true, [CSS.contentContainer]: true }}
key={contentWrapperKey}
onScroll={this.panelScrollHandler}
tabIndex={0}
>
<slot />
{defaultSlotNode}
</section>
);
}
Expand Down
17 changes: 11 additions & 6 deletions src/components/calcite-shell/calcite-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,22 +67,27 @@ export class CalciteShell implements ConditionalSlotComponent {
}

renderContent(): VNode[] {
const defaultSlotNode: VNode = <slot key="default-slot" />;
const centerRowSlotNode: VNode = <slot key="center-row-slot" name={SLOTS.centerRow} />;
const contentContainerKey = "content-container";

const content = !!this.contentBehind
? [
<div
class={{
[CSS.content]: true,
[CSS.contentBehind]: !!this.contentBehind
[CSS.contentBehind]: true
}}
key={contentContainerKey}
>
<slot />
{defaultSlotNode}
</div>,
<slot name={SLOTS.centerRow} />
centerRowSlotNode
]
: [
<div class={CSS.content}>
<slot />
<slot name={SLOTS.centerRow} />
<div class={CSS.content} key={contentContainerKey}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before merging, can you confirm that the CSS looks correct when contentBehind is toggled?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

{defaultSlotNode}
{centerRowSlotNode}
</div>
];

Expand Down
7 changes: 4 additions & 3 deletions src/components/calcite-tree-item/calcite-tree-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,10 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
scale="s"
/>
) : null;
const defaultSlotNode: VNode = <slot key="default-slot" />;
const checkbox =
this.selectionMode === TreeSelectionMode.Ancestors ? (
<label class={CSS.checkboxLabel}>
<label class={CSS.checkboxLabel} key="checkbox-label">
<calcite-checkbox
checked={this.selected}
class={CSS.checkbox}
Expand All @@ -169,7 +170,7 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
scale={this.scale}
tabIndex={-1}
/>
<slot />
{defaultSlotNode}
</label>
) : null;
const selectedIcon = showBulletPoint
Expand Down Expand Up @@ -210,7 +211,7 @@ export class CalciteTreeItem implements ConditionalSlotComponent {
>
{chevron}
{bulletOrCheckIcon}
{checkbox ? checkbox : <slot />}
{checkbox ? checkbox : defaultSlotNode}
</div>
<div
class={{
Expand Down