@get-set/gs-sortable 0.0.13 → 0.0.15

package/dist/components/GSSortable.js

@@ -5,19 +5,21 @@ import init from '../actions/init';
 import destroy from '../actions/destroy';
 import PropTypes from 'prop-types';
 import defaultParams from '../constants/defaultParams';
-import initMouseMove from "../actions/initMouseMove";
-import initSortEnd from "../actions/initSortEnd";
-import initScroll from "../actions/initScroll";
+import initMouseMove from '../actions/initMouseMove';
+import initSortEnd from '../actions/initSortEnd';
+import initScroll from '../actions/initScroll';
 import types from '../constants/types';
 import './styles/GSSortable.css';
 
 const params = {
   reference: PropTypes.string,
   handler: PropTypes.string,
+  className: PropTypes.string,
+  gsx: PropTypes.object,
   gap: PropTypes.string,
   allowOutOfBox: PropTypes.bool,
   count: PropTypes.number,
-  type: PropTypes.oneOf([types.column, types.row, types.grid])
+  type: PropTypes.oneOf([types.column, types.row, types.grid]),
 };
 
 /**
@@ -26,6 +28,8 @@ const params = {
  * @component
  * @param {Object} props - The props object.
  * @param {string} props.reference - Unique key for each sortable.
+ * @param {boolean} props.className - Enable add classes.
+ * @param {React.CSSProperties & Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties>>>} props.gsx
  * @param {string} props.gap - Allows set gap among elements.
  * @param {string} props.handler - selector of target element to move.
  * @param {number} props.count - Shows items count per row.
@@ -58,14 +62,14 @@ const GSSortable = ({ children, ...rest }) => {
             }
           },
         };
-        
-        window.addEventListener("mousemove", (e) => {
+
+        window.addEventListener('mousemove', e => {
           initMouseMove(e);
         });
-        window.addEventListener("mouseup", (e) => {
+        window.addEventListener('mouseup', e => {
           initSortEnd(e);
         });
-        window.addEventListener("scroll", () => {
+        window.addEventListener('scroll', () => {
           initScroll();
         });
       }
@@ -81,7 +85,7 @@ const GSSortable = ({ children, ...rest }) => {
           ref: {
             isAddjusting: false,
             grid: gridRef.current,
-            currentParams : {...currentParams, reference: componentKey},
+            currentParams: { ...currentParams, reference: componentKey },
             destroy: () => {
               destroy(window.GSSortableConfigue.instance(componentKey));
             },
@@ -114,9 +118,18 @@ const GSSortable = ({ children, ...rest }) => {
     );
   }, []);
 
+  useEffect(() => {
+    if (componentKey != null) {
+      const ref = window.GSSortableConfigue.instance(componentKey);
+      if (ref !== undefined) {
+        ref.refresh();
+      }
+    }
+  }, [children]);
+
   return (
     <div
-      className={`gs-sortable-instance gs-sortable-${params.type}`}
+      className={`gs-sortable-instance gs-sortable-${params.type} ${rest.className}`}
       ref={gridRef}
       {...Object.fromEntries(
         Object.entries({ ...rest }).filter(([key]) => !(key in defaultParams)),

package/dist/components/styles/GSSortable.css

@@ -1,39 +1,39 @@
-.gs-sortable-instance {
-  box-sizing: border-box;
-  -webkit-user-select: none !important;
-     -moz-user-select: none !important;
-          user-select: none !important;
-  transition: 0.4s;
-  z-index: 1;
-}
-.gs-sortable-instance.gs-sortable-active {
-  z-index: 2;
-}
-.gs-sortable-instance * {
-  -webkit-user-select: none !important;
-     -moz-user-select: none !important;
-          user-select: none !important;
-}
-.gs-sortable-instance .gs-sortable-placeholder {
-  position: absolute;
-  background-color: #f1f1f1;
-  border: 1px solid;
-  z-index: 1;
-}
-.gs-sortable-instance .gs-sortable-item {
-  z-index: 2;
-}
-.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
-  z-index: 3;
-}
-.gs-sortable-instance .gs-sortable-item-inmove {
-  transition: none !important;
-  z-index: 99999;
-}
-.gs-sortable-instance .gs-sortable-item-addjusting {
-  z-index: 99999;
-}
-.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
-  width: -moz-max-content;
-  width: max-content;
+.gs-sortable-instance {
+  box-sizing: border-box;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+}
+.gs-sortable-instance.gs-sortable-active {
+  z-index: 2;
+}
+.gs-sortable-instance * {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.gs-sortable-instance .gs-sortable-placeholder {
+  position: absolute;
+  background-color: #f1f1f1;
+  border: 1px solid;
+  z-index: 1;
+}
+.gs-sortable-instance .gs-sortable-item {
+  z-index: 2;
+}
+.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
+  z-index: 3;
+}
+.gs-sortable-instance .gs-sortable-item-inmove {
+  transition: none !important;
+  z-index: 99999;
+}
+.gs-sortable-instance .gs-sortable-item-addjusting {
+  z-index: 99999;
+}
+.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
+  width: -moz-max-content;
+  width: max-content;
 }/*# sourceMappingURL=GSSortable.css.map */

package/dist/constants/defaultParams.js

@@ -2,9 +2,11 @@ import types from './types';
 
 const defaultParams = {
   acceptFrom: [],
+  className: '',
   reference: '',
   count: 3,
   gap: '',
+  gsx: undefined,
   handler: '',
   width: 'auto',
   type: types.column,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@get-set/gs-sortable",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Get-Set Sortable",
   "main": "index.js",
   "author": "Get-Set",