Skip to content

Commit

Permalink
Merge pull request #5 from toshusai/fix-tree-item-width
Browse files Browse the repository at this point in the history 
Fix: The width of TreeViewItem is not fully extended.
  • Loading branch information
@toshusai
toshusai authored Mar 20, 2024
2 parents 7a3058d + 5492f1e commit 0c9aacc
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 6 deletions.
104 changes: 104 additions & 0 deletions src/components/TreeView/__snapshots__/index.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,3 +204,107 @@ exports[`View/TreeView Basic smoke-test 1`] = `
</div>
</div>
`;

exports[`View/TreeView Scroll smoke-test 1`] = `
<div style="width: 256px; padding-bottom: 32px; overflow: auto;">
<div class="cmpui_tree-view__root">
<ol class="cmpui_tree-view__ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.05); padding-left: 0px; white-space: nowrap;">
root
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.1); padding-left: 16px; white-space: nowrap;">
child-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.15); padding-left: 32px; white-space: nowrap;">
child-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.2); padding-left: 48px; white-space: nowrap;">
child-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.25); padding-left: 64px; white-space: nowrap;">
child-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.3); padding-left: 80px; white-space: nowrap;">
child-1-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.35); padding-left: 96px; white-space: nowrap;">
child-1-1-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.4); padding-left: 112px; white-space: nowrap;">
child-1-1-1-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.45); padding-left: 128px; white-space: nowrap;">
child-1-1-1-1-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.5); padding-left: 144px; white-space: nowrap;">
child-1-1-1-1-1-1-1-1-1
</div>
</li>
<li class="cmpui_tree-view__item-dir">
<ol class="cmpui_tree-view__item-dir-ol">
<li class="cmpui_tree-view__item">
<div style="background-color: rgba(0, 0, 0, 0.55); padding-left: 160px; white-space: nowrap;">
child-1-1-1-1-1-1-1-1-1-1
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
</div>
`;
4 changes: 2 additions & 2 deletions src/components/TreeView/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
list-style: none;
margin: 0;
padding: 0;
width: 100%;
width: fit-content;
}

.cmpui_tree-view__item {
Expand Down Expand Up @@ -38,7 +38,7 @@
pointer-events: none;
position: absolute;
top: 0;
width: 100px;
width: 100%;
z-index: 100;
box-sizing: border-box;
}
Expand Down
83 changes: 83 additions & 0 deletions src/components/TreeView/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,3 +414,86 @@ export const Basic: Story = {
);
},
};

export const Scroll: Story = {
render: function Render() {
return (
<div
style={{
width: 256,
paddingBottom: 32,
overflow: "auto",
}}
>
<TreeView
items={[
{
id: "root",
children: [
{
id: "child-1",
children: [
{
id: "child-1-1",
children: [
{
id: "child-1-1-1",
children: [
{
id: "child-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1-1-1-1-1",
children: [
{
id: "child-1-1-1-1-1-1-1-1-1-1",
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
]}
render={(props) => (
<div
style={{
backgroundColor: `rgba(0, 0, 0, ${0.05 + props.depth * 0.05})`,
paddingLeft: props.depth * 16,
whiteSpace: "nowrap",
}}
>
{props.item.id}
</div>
)}
/>
</div>
);
},
};
9 changes: 5 additions & 4 deletions src/components/TreeView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,16 @@ export function TreeView<T extends ITree>(props: TreeViewProps<T>) {
render={props.render}
onOrderChange={props.onOrderChange}
updateIndicator={props.updateIndicator}
onUpdateIndicator={(el, type, depth) => {
onUpdateIndicator={(el, type) => {
const rootRect = ref.current?.getBoundingClientRect();
if (!rootRect) return;
const rect = el.getBoundingClientRect();

const padLeft = depth * 8;
const child = el.firstElementChild;
if (!child) return;
const padLeft = parseInt(getComputedStyle(child).paddingLeft);

setX(padLeft);
setWidth(rootRect.width - padLeft - 8);
setWidth(rect.width - padLeft);
if (type === OrderType.Child) {
setY(rect.top - rootRect.top);
setHeight(rect.height);
Expand Down

0 comments on commit 0c9aacc

Please sign in to comment.