@get-set/gs-sortable 0.0.14 → 0.0.16

package/dist/components/GSSortable.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import NewGuid from '../helpers/uihelpers';
 import getCurrentParams from '../actions/getCurrentParams';
 import init from '../actions/init';
 import destroy from '../actions/destroy';
@@ -10,10 +9,17 @@ import initSortEnd from '../actions/initSortEnd';
 import initScroll from '../actions/initScroll';
 import types from '../constants/types';
 import './styles/GSSortable.css';
+import {
+  NewGuid,
+  convertScssToCss,
+  injectCssToHead,
+} from '../helpers/uihelpers';
 
 const params = {
   reference: PropTypes.string,
   handler: PropTypes.string,
+  className: PropTypes.string,
+  gsx: PropTypes.object,
   gap: PropTypes.string,
   allowOutOfBox: PropTypes.bool,
   count: PropTypes.number,
@@ -26,6 +32,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.
@@ -95,6 +103,15 @@ const GSSortable = ({ children, ...rest }) => {
         const currentRef = window.GSSortableConfigue.references.find(
           x => x.key === componentKey,
         ).ref;
+
+        if (params.gsx != undefined) {
+          const scss = {};
+          scss[`[data-key='${componentKey}']`] = {
+            ...params.gsx,
+          };
+          const style = convertScssToCss(scss);
+          injectCssToHead(style, componentKey);
+        }
         init(currentRef);
       }
       return () => {
@@ -104,6 +121,7 @@ const GSSortable = ({ children, ...rest }) => {
               x => x.key !== componentKey,
             );
         }
+        removeCssToHead(componentKey);
       };
     }
   }, [componentKey]);
@@ -115,7 +133,6 @@ const GSSortable = ({ children, ...rest }) => {
   }, []);
 
   useEffect(() => {
-    console.log('children change');
     if (componentKey != null) {
       const ref = window.GSSortableConfigue.instance(componentKey);
       if (ref !== undefined) {
@@ -126,7 +143,7 @@ const GSSortable = ({ children, ...rest }) => {
 
   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/dist/helpers/uihelpers.js

@@ -1,4 +1,4 @@
-const NewGuid = () => {
+export const NewGuid = () => {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     const r = (Math.random() * 16) | 0,
       v = c == 'x' ? r : (r & 0x3) | 0x8;
@@ -6,4 +6,47 @@ const NewGuid = () => {
   });
 };
 
-export default NewGuid;
+export const removeCssToHead = key => {
+  const style = document.querySelector(`head style[data-key='${key}']`);
+  if (style != null) {
+    style.remove();
+  }
+};
+export const injectCssToHead = (css, key) => {
+  // Create a <style> element
+  const style = document.createElement('style');
+  style.dataset.key = key;
+  // Set the CSS as the inner content of the <style> element
+  style.innerHTML = css;
+  // Append the <style> element to the <head>
+  document.head.appendChild(style);
+};
+
+const camelToKebab = str =>
+  str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+export const convertScssToCss = scssObj => {
+  // Helper function to handle nested objects
+  const convertObjectToCss = (obj, parent = '') => {
+    let css = '';
+
+    // Iterate over each key-value pair in the SCSS object
+    for (let key in obj) {
+      const value = obj[key];
+
+      if (typeof value === 'object') {
+        // If the value is an object, it's a nested rule, so we recurse
+        const newParent = parent ? `${parent} ${key}` : key;
+        css += convertObjectToCss(value, newParent); // Recurse and concatenate
+      } else {
+        // Otherwise, it's a property-value pair (e.g. color: red)
+        css += `${parent} { ${camelToKebab(key)}: ${value}; }\n`;
+      }
+    }
+
+    return css;
+  };
+
+  // Start recursion with the top-level object
+  return convertObjectToCss(scssObj, '');
+};

package/package.json

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