chore: Update package version to 1.0.186 and improve Accordion component

Programmer-Network · May 11, 2024 · e74a953 · e74a953
1 parent b49baee
commit e74a953
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.185",
+  "version": "1.0.186",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

diff --git a/src/Components/Accordion/Accordion.stories.tsx b/src/Components/Accordion/Accordion.stories.tsx
@@ -62,7 +62,9 @@ export const Primary = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        onSorted={setSections}
+        onSorted={(type, data) => {
+          setSections(data);
+        }}
         expanded={expandedSections}
         hasDraggableSections={true}
         hasDraggableSectionItems={true}
@@ -102,7 +104,9 @@ export const NonInteractive = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        onSorted={setSections}
+        onSorted={(type, sections) => {
+          setSections(sections);
+        }}
         expanded={expandedSections}
         setExpanded={(expanded: number[]) => {
           setExpandedSections(expanded);
@@ -137,7 +141,9 @@ export const WithoutDragAndDrop = () => {
         className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
-        onSorted={setSections}
+        onSorted={(type, sections) => {
+          setSections(sections);
+        }}
         expanded={expandedSections}
         setExpanded={(expanded: number[]) => {
           setExpandedSections(expanded);
@@ -204,7 +210,9 @@ export const AddSectionAndSectionItem = () => {
 
           setSections([newSection]);
         }}
-        onSorted={setSections}
+        onSorted={(type, sections) => {
+          setSections(sections);
+        }}
         onAddSection={() => {
           action("onAddSection")();
         }}
@@ -246,7 +254,9 @@ export const WithAddLabels = () => {
         selectedId={2}
         sections={sections}
         expanded={expandedSections}
-        onSorted={setSections}
+        onSorted={(type, sections) => {
+          setSections(sections);
+        }}
         onAddSection={() => {
           action("onAddSection")();
         }}

diff --git a/src/Components/Accordion/index.tsx b/src/Components/Accordion/index.tsx
@@ -13,7 +13,7 @@ import { Paragraph } from "Components/Typography";
 
 import ArrayUtils from "Utils/Array";
 
-import { IAccordionProps } from "./types";
+import { AccordionOrderType, IAccordionProps } from "./types";
 
 const Accordion: FC<IAccordionProps> = ({
   className,
@@ -66,8 +66,10 @@ const Accordion: FC<IAccordionProps> = ({
 
   const handleSectionDrop = (e: React.DragEvent<Element>) => {
     e.preventDefault();
+    e.stopPropagation();
     if (draggedId != null && draggedOverId != null) {
       onSorted(
+        AccordionOrderType.SECTIONS,
         ArrayUtils.reorder(
           sections,
           sections.findIndex(item => item.id === draggedId),
@@ -182,6 +184,7 @@ const Accordion: FC<IAccordionProps> = ({
                   }}
                   onDragged={(items: IDraggableListItem[]) => {
                     onSorted(
+                      AccordionOrderType.LECTURES,
                       [
                         ...sections.map(s =>
                           s.id === section.id ? { ...s, items } : s

diff --git a/src/Components/Accordion/types.ts b/src/Components/Accordion/types.ts
@@ -24,6 +24,7 @@ export interface IAccordionProps {
   sections: ISection[];
   sectionTitleClassName?: string;
   onSorted: (
+    type: AccordionOrderType,
     sections: ISection[],
     section: { sectionId: number; items: IDraggableListItem[] }
   ) => void;

diff --git a/src/Components/DraggableList/index.tsx b/src/Components/DraggableList/index.tsx
@@ -33,6 +33,7 @@ const DraggableList: FC<IDraggableList> = ({
 
   const handleDrop = (e: DragEvent<Element>) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (draggedId != null && draggedOverId != null) {
       const draggedIndex = items.findIndex(item => item.id === draggedId);