Skip to content

Commit 9f79e44

Browse files
agjsagjs
committed
chore: Update DraggableList onDragged event handler and add order property to items
1 parent fe390f0 commit 9f79e44

File tree

6 files changed

+101
-16
lines changed

6 files changed

+101
-16
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.174",
3+
"version": "1.0.175",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Accordion/Accordion.stories.tsx

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const Primary = () => {
6767
setSections={setSections}
6868
expanded={expandedSections}
6969
hasDraggableSections={true}
70-
hasDraggableSetionItems={true}
70+
hasDraggableSectionItems={true}
7171
setExpanded={(expanded: number[]) => {
7272
setExpandedSections(expanded);
7373
}}
@@ -81,3 +81,83 @@ export const Primary = () => {
8181
</div>
8282
);
8383
};
84+
85+
export const NonInteractive = () => {
86+
const [sections, setSections] = useState<ISection[]>([]);
87+
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
88+
89+
useEffect(() => {
90+
if (sections.length) {
91+
return;
92+
}
93+
94+
setSections(dummySections);
95+
}, []);
96+
97+
useEffect(() => {
98+
console.log("Changed", sections);
99+
}, [sections]);
100+
101+
if (!sections.length) {
102+
return <div>Loading...</div>;
103+
}
104+
105+
return (
106+
<div>
107+
<Accordion
108+
className='yl-w-[500px]'
109+
selectedId={2}
110+
sections={sections}
111+
setSections={setSections}
112+
expanded={expandedSections}
113+
hasDraggableSections={true}
114+
hasDraggableSectionItems={true}
115+
setExpanded={(expanded: number[]) => {
116+
setExpandedSections(expanded);
117+
}}
118+
onSelected={item => {
119+
action("onSelected")(item);
120+
}}
121+
/>
122+
</div>
123+
);
124+
};
125+
126+
export const WithoutDragAndDrop = () => {
127+
const [sections, setSections] = useState<ISection[]>([]);
128+
const [expandedSections, setExpandedSections] = useState<number[]>([1]);
129+
130+
useEffect(() => {
131+
if (sections.length) {
132+
return;
133+
}
134+
135+
setSections(dummySections);
136+
}, []);
137+
138+
useEffect(() => {
139+
console.log("Changed", sections);
140+
}, [sections]);
141+
142+
if (!sections.length) {
143+
return <div>Loading...</div>;
144+
}
145+
146+
return (
147+
<div>
148+
<Accordion
149+
className='yl-w-[500px]'
150+
selectedId={2}
151+
sections={sections}
152+
setSections={setSections}
153+
expanded={expandedSections}
154+
setExpanded={(expanded: number[]) => {
155+
setExpandedSections(expanded);
156+
}}
157+
onSelected={item => {
158+
action("onSelected")(item);
159+
}}
160+
/>
161+
</div>
162+
);
163+
};

‎src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`Accordion component > renders correctly 1`] = `
1111
>
1212
<h3
1313
aria-expanded="true"
14-
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-py-2 yl-pl-2 yl-pr-8 yl-bg-primary-text-color/5"
14+
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4 yl-bg-primary-text-color/5"
1515
role="button"
1616
tabindex="0"
1717
>
@@ -45,12 +45,12 @@ exports[`Accordion component > renders correctly 1`] = `
4545
class="yl-relative yl-text-primary-text-color yl-gap-4 yl-flex yl-flex-col yl-py-4"
4646
>
4747
<li
48-
class="yl-relative yl-flex yl-cursor-pointer yl-items-center hover:text-primary cursor-pointer break-all leading-normal yl-px-2 yl-cursor-pointer yl-text-primary-text-color"
48+
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-primary break-all leading-normal yl-px-4 yl-cursor-pointer yl-text-primary-text-color"
4949
>
5050
Item A
5151
</li>
5252
<li
53-
class="yl-relative yl-flex yl-cursor-pointer yl-items-center hover:text-primary cursor-pointer break-all leading-normal yl-px-2 yl-cursor-pointer yl-text-primary-text-color"
53+
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-primary break-all leading-normal yl-px-4 yl-cursor-pointer yl-text-primary-text-color"
5454
>
5555
Item B
5656
</li>
@@ -62,7 +62,7 @@ exports[`Accordion component > renders correctly 1`] = `
6262
>
6363
<h3
6464
aria-expanded="false"
65-
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-py-2 yl-pl-2 yl-pr-8"
65+
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4"
6666
role="button"
6767
tabindex="0"
6868
>

‎src/Components/Accordion/index.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ const Accordion: FC<IAccordionProps> = ({
1616
setSections,
1717
sectionTitleClassName,
1818
onSectionItemClick,
19+
onSectionClick,
1920
onSelected,
2021
expanded,
2122
setExpanded,
2223
selectedId,
2324
hasDraggableSections,
24-
hasDraggableSetionItems
25+
hasDraggableSectionItems
2526
}) => {
2627
const [selectedItemId, setSelectedItemId] = useState<
2728
number | null | undefined
@@ -70,7 +71,8 @@ const Accordion: FC<IAccordionProps> = ({
7071
{sections.map((section, idx) => (
7172
<div
7273
key={section.id}
73-
draggable={hasDraggableSections && sections.length > 1}
74+
onClick={() => onSectionClick?.(section)}
75+
draggable={hasDraggableSections}
7476
onDrag={e => handleDrag(e, section)}
7577
onDragOver={() =>
7678
hasDraggableSections && setDraggedOverId(section.id)
@@ -94,7 +96,7 @@ const Accordion: FC<IAccordionProps> = ({
9496
>
9597
<h3
9698
className={classNames(
97-
"yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-py-2 yl-pl-2 yl-pr-8",
99+
"yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4",
98100
sectionTitleClassName,
99101
{ "yl-bg-primary-text-color/5": expanded.includes(section.id) }
100102
)}
@@ -106,7 +108,7 @@ const Accordion: FC<IAccordionProps> = ({
106108
role='button'
107109
aria-expanded={expanded.includes(section.id)}
108110
>
109-
{hasDraggableSetionItems && (
111+
{hasDraggableSections && (
110112
<div>
111113
<IconDrag className='yl-w-6 yl-opacity-50 yl-mr-1' />
112114
</div>
@@ -136,16 +138,17 @@ const Accordion: FC<IAccordionProps> = ({
136138
)
137139
]);
138140
}}
139-
isDraggable={hasDraggableSetionItems}
141+
isDraggable={hasDraggableSectionItems}
140142
className='yl-gap-4 yl-flex yl-flex-col yl-py-4'
141143
draggedOverClassName='yl-border-t-2 yl-border-primary'
142144
liClassName={(item: IDraggableListItem) =>
143145
classNames(
144-
"hover:text-primary cursor-pointer break-all leading-normal yl-px-2",
146+
"yl-cursor-default hover:text-primary break-all leading-normal yl-px-4",
145147
{
146148
"yl-cursor-pointer": onSectionItemClick,
147149
"yl-text-primary-text-color": selectedItemId !== item.id,
148-
"yl-text-primary": selectedItemId === item.id,
150+
"yl-text-primary":
151+
onSectionItemClick && selectedItemId === item.id,
149152
"yl-pl-9": section.items.length === 1
150153
}
151154
)

‎src/Components/Accordion/types.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ export interface IAccordionProps {
2525
setSections: (sections: ISection[]) => void;
2626
sectionTitleClassName?: string;
2727
onSectionItemClick?: (item: IDraggableListItem) => void;
28+
onSectionClick?: (item: IDraggableListItem) => void;
2829
onSelected?: (item: IDraggableListItem) => void;
2930
expanded: number[];
3031
setExpanded: (sections: number[]) => void;
3132
selectedId?: number;
3233
hasDraggableSections?: boolean;
33-
hasDraggableSetionItems?: boolean;
34+
hasDraggableSectionItems?: boolean;
3435
}

‎src/Components/DraggableList/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,13 @@ const DraggableList: FC<IDraggableList> = ({
6767
return (
6868
<li
6969
className={classNames(
70-
"yl-relative yl-flex yl-cursor-pointer yl-items-center",
70+
"yl-relative yl-flex yl-items-center",
7171
liClassName?.(item, index),
7272
{
7373
[draggedClassName ?? ""]: draggedId === item.id,
7474
[draggedOverClassName ?? ""]: draggedOverId === item.id,
75-
"yl-text-primary": activeItemId === item.id
75+
"yl-text-primary yl-cursor-pointer":
76+
onClick && activeItemId === item.id
7677
}
7778
)}
7879
draggable={canDrag}

0 commit comments

Comments
 (0)