Skip to content

Commit dd4c84a

Browse files
agjsagjs
committed
chore: Refactor DraggableList component and update package version to 1.0.177
1 parent e4012ac commit dd4c84a

File tree

3 files changed

+131
-127
lines changed

3 files changed

+131
-127
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.176",
3+
"version": "1.0.177",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Accordion/index.tsx‎

Lines changed: 92 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -69,103 +69,105 @@ const Accordion: FC<IAccordionProps> = ({
6969

7070
return (
7171
<section onDragEnd={handleSectionDrop} className={classNames(className)}>
72-
{sections.map((section, idx) => (
73-
<div
74-
key={section.id}
75-
onClick={() => onSectionClick?.(section)}
76-
draggable={hasDraggableSections}
77-
onDrag={e => handleDrag(e, section)}
78-
onDragOver={() =>
79-
hasDraggableSections && setDraggedOverId(section.id)
80-
}
81-
onMouseOver={() => hasDraggableSections && setHoveredId(section.id)}
82-
onMouseLeave={() => hasDraggableSections && setHoveredId(null)}
83-
className={classNames(
84-
"yl-border-2 yl-border-primary-text-color/20",
85-
{
86-
"yl-border-b-0": idx !== sections.length - 1,
87-
"yl-rounded-tl-md yl-rounded-tr-md": idx === 0,
88-
"yl-rounded-bl-md yl-rounded-br-md": idx === sections.length - 1
89-
},
90-
{
91-
"yl-bg-primary-text-color/5": draggedOverId === section.id,
92-
"yl-bg-primary-text-color/10":
93-
draggedId && hoveredId === section.id
72+
{sections
73+
.toSorted((a, b) => a.order - b.order)
74+
.map((section, idx) => (
75+
<div
76+
key={section.id}
77+
onClick={() => onSectionClick?.(section)}
78+
draggable={hasDraggableSections}
79+
onDrag={e => handleDrag(e, section)}
80+
onDragOver={() =>
81+
hasDraggableSections && setDraggedOverId(section.id)
9482
}
95-
)}
96-
role='presentation'
97-
>
98-
<h3
83+
onMouseOver={() => hasDraggableSections && setHoveredId(section.id)}
84+
onMouseLeave={() => hasDraggableSections && setHoveredId(null)}
9985
className={classNames(
100-
"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",
101-
sectionTitleClassName,
102-
{ "yl-bg-primary-text-color/5": expanded.includes(section.id) }
86+
"yl-border-2 yl-border-primary-text-color/20",
87+
{
88+
"yl-border-b-0": idx !== sections.length - 1,
89+
"yl-rounded-tl-md yl-rounded-tr-md": idx === 0,
90+
"yl-rounded-bl-md yl-rounded-br-md": idx === sections.length - 1
91+
},
92+
{
93+
"yl-bg-primary-text-color/5": draggedOverId === section.id,
94+
"yl-bg-primary-text-color/10":
95+
draggedId && hoveredId === section.id
96+
}
10397
)}
104-
onClick={() => toggleExpand(section.id)}
105-
onKeyDown={e =>
106-
["Enter", " "].includes(e.key) && toggleExpand(section.id)
107-
}
108-
tabIndex={0}
109-
role='button'
110-
aria-expanded={expanded.includes(section.id)}
98+
role='presentation'
11199
>
112-
{hasDraggableSections && (
113-
<div>
114-
<IconDrag className='yl-w-6 yl-opacity-50 yl-mr-1' />
115-
</div>
116-
)}
117-
<div className='yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
118-
{expanded.includes(section.id) ? (
119-
<IconExpandLess className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
120-
) : (
121-
<IconExpandMore className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
100+
<h3
101+
className={classNames(
102+
"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",
103+
sectionTitleClassName,
104+
{ "yl-bg-primary-text-color/5": expanded.includes(section.id) }
122105
)}
123-
{section.title}
124-
{section.description && (
125-
<Paragraph className='yl-text-xs yl-text-primary-text-color/70'>
126-
{section.description}
127-
</Paragraph>
106+
onClick={() => toggleExpand(section.id)}
107+
onKeyDown={e =>
108+
["Enter", " "].includes(e.key) && toggleExpand(section.id)
109+
}
110+
tabIndex={0}
111+
role='button'
112+
aria-expanded={expanded.includes(section.id)}
113+
>
114+
{hasDraggableSections && (
115+
<div>
116+
<IconDrag className='yl-w-6 yl-opacity-50 yl-mr-1' />
117+
</div>
128118
)}
129-
</div>
130-
</h3>
119+
<div className='yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
120+
{expanded.includes(section.id) ? (
121+
<IconExpandLess className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
122+
) : (
123+
<IconExpandMore className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
124+
)}
125+
{section.title}
126+
{section.description && (
127+
<Paragraph className='yl-text-xs yl-text-primary-text-color/70'>
128+
{section.description}
129+
</Paragraph>
130+
)}
131+
</div>
132+
</h3>
131133

132-
{expanded.includes(section.id) && (
133-
<DraggableList
134-
items={section.items}
135-
onDragged={(items: IDraggableListItem[]) => {
136-
setSections(
137-
[
138-
...sections.map(s =>
139-
s.id === section.id ? { ...s, items } : s
140-
)
141-
],
142-
{ sectionId: section.id, items }
143-
);
144-
}}
145-
isDraggable={hasDraggableSectionItems}
146-
className='yl-gap-4 yl-flex yl-flex-col yl-py-4'
147-
draggedOverClassName='yl-border-t-2 yl-border-primary'
148-
liClassName={(item: IDraggableListItem) =>
149-
classNames(
150-
"yl-cursor-default hover:text-primary break-all leading-normal yl-px-4",
151-
{
152-
"yl-cursor-pointer": onSectionItemClick,
153-
"yl-text-primary-text-color": selectedItemId !== item.id,
154-
"yl-text-primary":
155-
onSectionItemClick && selectedItemId === item.id,
156-
"yl-pl-9": section.items.length === 1
157-
}
158-
)
159-
}
160-
onClick={(item: IDraggableListItem) => {
161-
onSectionItemClick?.(item);
162-
onSelected?.(item);
163-
setSelectedItemId(item.id);
164-
}}
165-
/>
166-
)}
167-
</div>
168-
))}
134+
{expanded.includes(section.id) && (
135+
<DraggableList
136+
items={section.items}
137+
onDragged={(items: IDraggableListItem[]) => {
138+
setSections(
139+
[
140+
...sections.map(s =>
141+
s.id === section.id ? { ...s, items } : s
142+
)
143+
],
144+
{ sectionId: section.id, items }
145+
);
146+
}}
147+
isDraggable={hasDraggableSectionItems}
148+
className='yl-gap-4 yl-flex yl-flex-col yl-py-4'
149+
draggedOverClassName='yl-border-t-2 yl-border-primary'
150+
liClassName={(item: IDraggableListItem) =>
151+
classNames(
152+
"yl-cursor-default hover:text-primary break-all leading-normal yl-px-4",
153+
{
154+
"yl-cursor-pointer": onSectionItemClick,
155+
"yl-text-primary-text-color": selectedItemId !== item.id,
156+
"yl-text-primary":
157+
onSectionItemClick && selectedItemId === item.id,
158+
"yl-pl-9": section.items.length === 1
159+
}
160+
)
161+
}
162+
onClick={(item: IDraggableListItem) => {
163+
onSectionItemClick?.(item);
164+
onSelected?.(item);
165+
setSelectedItemId(item.id);
166+
}}
167+
/>
168+
)}
169+
</div>
170+
))}
169171
</section>
170172
);
171173
};

‎src/Components/DraggableList/index.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -63,42 +63,44 @@ const DraggableList: FC<IDraggableList> = ({
6363
)}
6464
onDragEnd={handleDrop}
6565
>
66-
{localItems.map((item, index) => {
67-
return (
68-
<li
69-
className={classNames(
70-
"yl-relative yl-flex yl-items-center",
71-
liClassName?.(item, index),
72-
{
73-
[draggedClassName ?? ""]: draggedId === item.id,
74-
[draggedOverClassName ?? ""]: draggedOverId === item.id,
75-
"yl-text-primary yl-cursor-pointer":
76-
onClick && activeItemId === item.id
77-
}
78-
)}
79-
draggable={canDrag}
80-
key={item.order}
81-
onDrag={e => (canDrag ? handleDrag(e, item) : null)}
82-
onDragOver={() => (canDrag ? setDraggedOverId(item.id) : null)}
83-
onMouseOver={() => (canDrag ? setHoveredId(item.id) : null)}
84-
onMouseLeave={() => (canDrag ? setHoveredId(null) : null)}
85-
onClick={() => {
86-
onClick?.(item);
87-
}}
88-
>
89-
{canDrag && (
90-
<div>
91-
<IconDrag
92-
className={classNames("yl-w-6 yl-opacity-50 yl-mr-1", {
93-
"yl-cursor-move yl-opacity-100": hoveredId === item.id
94-
})}
95-
/>
96-
</div>
97-
)}
98-
{item.title}
99-
</li>
100-
);
101-
})}
66+
{localItems
67+
.toSorted((a, b) => a.order - b.order)
68+
.map((item, index) => {
69+
return (
70+
<li
71+
className={classNames(
72+
"yl-relative yl-flex yl-items-center",
73+
liClassName?.(item, index),
74+
{
75+
[draggedClassName ?? ""]: draggedId === item.id,
76+
[draggedOverClassName ?? ""]: draggedOverId === item.id,
77+
"yl-text-primary yl-cursor-pointer":
78+
onClick && activeItemId === item.id
79+
}
80+
)}
81+
draggable={canDrag}
82+
key={item.order}
83+
onDrag={e => (canDrag ? handleDrag(e, item) : null)}
84+
onDragOver={() => (canDrag ? setDraggedOverId(item.id) : null)}
85+
onMouseOver={() => (canDrag ? setHoveredId(item.id) : null)}
86+
onMouseLeave={() => (canDrag ? setHoveredId(null) : null)}
87+
onClick={() => {
88+
onClick?.(item);
89+
}}
90+
>
91+
{canDrag && (
92+
<div>
93+
<IconDrag
94+
className={classNames("yl-w-6 yl-opacity-50 yl-mr-1", {
95+
"yl-cursor-move yl-opacity-100": hoveredId === item.id
96+
})}
97+
/>
98+
</div>
99+
)}
100+
{item.title}
101+
</li>
102+
);
103+
})}
102104
</ul>
103105
);
104106
};

0 commit comments

Comments
 (0)