@get-set/gs-sortable 0.0.20 → 0.0.21

package/dist/components/GSSortable.js

@@ -1,33 +1,50 @@
-import { useEffect, useRef, useState } from 'react';
-import getCurrentParams from '../actions/getCurrentParams';
-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 types from '../constants/types';
-import './styles/GSSortable.css';
-import {
-  NewGuid,
-  convertScssToCss,
-  injectCssToHead,
-  removeCssToHead,
-} from '../helpers/uihelpers';
-
-const params = {
-  reference: PropTypes.string,
-  handler: PropTypes.string,
-  className: PropTypes.string,
-  afterSort: PropTypes.func,
-  gsx: PropTypes.object,
-  gap: PropTypes.string,
-  allowOutOfBox: PropTypes.bool,
-  count: PropTypes.number,
-  type: PropTypes.oneOf([types.column, types.row, types.grid]),
-};
-
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _getCurrentParams = _interopRequireDefault(require("../actions/getCurrentParams"));
+var _init = _interopRequireDefault(require("../actions/init"));
+var _destroy2 = _interopRequireDefault(require("../actions/destroy"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultParams = _interopRequireDefault(require("../constants/defaultParams"));
+var _initMouseMove = _interopRequireDefault(require("../actions/initMouseMove"));
+var _initSortEnd = _interopRequireDefault(require("../actions/initSortEnd"));
+var _initScroll = _interopRequireDefault(require("../actions/initScroll"));
+var _types = _interopRequireDefault(require("../constants/types"));
+require("./styles/GSSortable.css");
+var _uihelpers = require("../helpers/uihelpers");
+var _excluded = ["children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var params = {
+  reference: _propTypes["default"].string,
+  handler: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  afterSort: _propTypes["default"].func,
+  gsx: _propTypes["default"].object,
+  gap: _propTypes["default"].string,
+  allowOutOfBox: _propTypes["default"].bool,
+  count: _propTypes["default"].number,
+  type: _propTypes["default"].oneOf([_types["default"].column, _types["default"].row, _types["default"].grid])
+};
+
 /**
  * GSSortable component to display a customizable sortable.
  *
@@ -46,135 +63,110 @@ const params = {
  * @param {number} props.responsive[].windowSize - Minimum window size for this configuration.
  * @param {Object} props.responsive[].params - The responsive configuration for the grid.
  * @returns {JSX.Element} The rendered sortable component.
- */
-
-const GSSortable = ({ children, ...rest }) => {
-  const params = { ...rest };
-  const [componentKey, setComponentKey] = useState(null);
-  const gridRef = useRef(null);
-
-  useEffect(() => {
-    if (componentKey != null) {
-      if (typeof window.GSSortableConfigue === 'undefined') {
-        window.GSSortableConfigue = {
-          references: [],
-          instance: ref => {
-            if (ref != undefined && ref != '') {
-              const instance = window.GSSortableConfigue.references.find(
-                x => x.key === ref,
-              );
-              if (instance != undefined) {
-                return instance.ref;
-              }
-            }
-          },
-        };
-
-        window.addEventListener('mousemove', e => {
-          initMouseMove(e);
-        });
-        window.addEventListener('mouseup', e => {
-          initSortEnd(e);
-        });
-        window.addEventListener('scroll', () => {
-          initScroll();
-        });
-      }
-      if (
-        window.GSSortableConfigue.references.find(
-          x => x.key === componentKey,
-        ) === undefined
-      ) {
-        const currentParams = getCurrentParams(params);
-
-        window.GSSortableConfigue.references.push({
-          key: componentKey,
-          ref: {
-            isAddjusting: false,
-            grid: gridRef.current,
-            currentParams: { ...currentParams, reference: componentKey },
-            destroy: () => {
-              destroy(window.GSSortableConfigue.instance(componentKey));
-            },
-            refresh: () => {
-              destroy(window.GSSortableConfigue.instance(componentKey));
-              init(window.GSSortableConfigue.instance(componentKey));
-            },
-          },
-        });
-
-        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 () => {
-        if (window.GSCarouselConfigue != undefined) {
-          window.GSCarouselConfigue.references =
-            window.GSCarouselConfigue.references.filter(
-              x => x.key !== componentKey,
-            );
-        }
-        removeCssToHead(componentKey);
-      };
-    }
-  }, [componentKey]);
-
-  useEffect(() => {
-    setComponentKey(
-      params.reference != undefined ? params.reference : NewGuid(),
-    );
-  }, []);
-
-  useEffect(() => {
-    if (componentKey != null) {
-      const ref = window.GSSortableConfigue.instance(componentKey);
-      if (ref !== undefined) {
-        ref.refresh();
-      }
-    }
-  }, [children]);
-
-  return (
-    <>
-      {componentKey != null ? (
-        <div
-          className={`gs-sortable-instance gs-sortable-${params.type} ${rest.className}`}
-          ref={gridRef}
-          data-key={componentKey}
-          {...Object.fromEntries(
-            Object.entries({ ...rest }).filter(
-              ([key]) => !(key in defaultParams),
-            ),
-          )}>
-          {children}
-        </div>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};
-
-GSSortable.propTypes = {
-  ...params,
-  responsive: PropTypes.arrayOf(
-    PropTypes.shape({
-      windowSize: PropTypes.number,
-      params: PropTypes.shape({
-        ...params,
-      }),
-    }),
-  ),
-};
-
-export default GSSortable;
+ */
+
+var GSSortable = function GSSortable(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var params = _objectSpread({}, rest);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    componentKey = _useState2[0],
+    setComponentKey = _useState2[1];
+  var gridRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (componentKey != null) {
+      if (typeof window.GSSortableConfigue === 'undefined') {
+        window.GSSortableConfigue = {
+          references: [],
+          instance: function instance(ref) {
+            if (ref != undefined && ref != '') {
+              var instance = window.GSSortableConfigue.references.find(function (x) {
+                return x.key === ref;
+              });
+              if (instance != undefined) {
+                return instance.ref;
+              }
+            }
+          }
+        };
+        window.addEventListener('mousemove', function (e) {
+          (0, _initMouseMove["default"])(e);
+        });
+        window.addEventListener('mouseup', function (e) {
+          (0, _initSortEnd["default"])(e);
+        });
+        window.addEventListener('scroll', function () {
+          (0, _initScroll["default"])();
+        });
+      }
+      if (window.GSSortableConfigue.references.find(function (x) {
+        return x.key === componentKey;
+      }) === undefined) {
+        var currentParams = (0, _getCurrentParams["default"])(params);
+        window.GSSortableConfigue.references.push({
+          key: componentKey,
+          ref: {
+            isAddjusting: false,
+            grid: gridRef.current,
+            currentParams: _objectSpread(_objectSpread({}, currentParams), {}, {
+              reference: componentKey
+            }),
+            destroy: function destroy() {
+              (0, _destroy2["default"])(window.GSSortableConfigue.instance(componentKey));
+            },
+            refresh: function refresh() {
+              (0, _destroy2["default"])(window.GSSortableConfigue.instance(componentKey));
+              (0, _init["default"])(window.GSSortableConfigue.instance(componentKey));
+            }
+          }
+        });
+        var currentRef = window.GSSortableConfigue.references.find(function (x) {
+          return x.key === componentKey;
+        }).ref;
+        if (params.gsx != undefined) {
+          var scss = {};
+          scss["[data-key='".concat(componentKey, "']")] = _objectSpread({}, params.gsx);
+          var style = (0, _uihelpers.convertScssToCss)(scss);
+          (0, _uihelpers.injectCssToHead)(style, componentKey);
+        }
+        (0, _init["default"])(currentRef);
+      }
+      return function () {
+        if (window.GSCarouselConfigue != undefined) {
+          window.GSCarouselConfigue.references = window.GSCarouselConfigue.references.filter(function (x) {
+            return x.key !== componentKey;
+          });
+        }
+        (0, _uihelpers.removeCssToHead)(componentKey);
+      };
+    }
+  }, [componentKey]);
+  (0, _react.useEffect)(function () {
+    setComponentKey(params.reference != undefined ? params.reference : (0, _uihelpers.NewGuid)());
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (componentKey != null) {
+      var ref = window.GSSortableConfigue.instance(componentKey);
+      if (ref !== undefined) {
+        ref.refresh();
+      }
+    }
+  }, [children]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, componentKey != null ? /*#__PURE__*/React.createElement("div", _extends({
+    className: "gs-sortable-instance gs-sortable-".concat(params.type, " ").concat(rest.className),
+    ref: gridRef,
+    "data-key": componentKey
+  }, Object.fromEntries(Object.entries(_objectSpread({}, rest)).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+      key = _ref3[0];
+    return !(key in _defaultParams["default"]);
+  }))), children) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+GSSortable.propTypes = _objectSpread(_objectSpread({}, params), {}, {
+  responsive: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    windowSize: _propTypes["default"].number,
+    params: _propTypes["default"].shape(_objectSpread({}, params))
+  }))
+});
+var _default = exports["default"] = GSSortable;

package/dist/constants/constParams.js

@@ -1,5 +1,10 @@
-const constParams = {
-  animateionSpeed: 400,
-};
-
-export default Object.freeze(constParams);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var constParams = {
+  animateionSpeed: 400
+};
+var _default = exports["default"] = Object.freeze(constParams);

package/dist/constants/defaultParams.js

@@ -1,19 +1,24 @@
-import types from './types';
-
-const defaultParams = {
-  acceptFrom: [],
-  className: '',
-  takeClone: false,
-  reference: '',
-  count: 3,
-  gap: '',
-  gsx: undefined,
-  handler: '',
-  width: 'auto',
-  type: types.column,
-  allowOutOfBox: true,
-  responsive: [],
-  afterSort: () => {},
-};
-
-export default Object.freeze(defaultParams);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _types = _interopRequireDefault(require("./types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var defaultParams = {
+  acceptFrom: [],
+  className: '',
+  takeClone: false,
+  reference: '',
+  count: 3,
+  gap: '',
+  gsx: undefined,
+  handler: '',
+  width: 'auto',
+  type: _types["default"].column,
+  allowOutOfBox: true,
+  responsive: [],
+  afterSort: function afterSort() {}
+};
+var _default = exports["default"] = Object.freeze(defaultParams);

package/dist/constants/types.js

@@ -1,7 +1,12 @@
-const types = {
-  row: 'row',
-  column: 'column',
-  grid: 'grid',
-};
-
-export default Object.freeze(types);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var types = {
+  row: 'row',
+  column: 'column',
+  grid: 'grid'
+};
+var _default = exports["default"] = Object.freeze(types);

package/dist/helpers/uihelpers.js

@@ -1,52 +1,56 @@
-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;
-    return v.toString(16);
-  });
-};
-
-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, '');
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeCssToHead = exports.injectCssToHead = exports.convertScssToCss = exports.NewGuid = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var NewGuid = exports.NewGuid = function NewGuid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0,
+      v = c == 'x' ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+};
+var removeCssToHead = exports.removeCssToHead = function removeCssToHead(key) {
+  var style = document.querySelector("head style[data-key='".concat(key, "']"));
+  if (style != null) {
+    style.remove();
+  }
+};
+var injectCssToHead = exports.injectCssToHead = function injectCssToHead(css, key) {
+  // Create a <style> element
+  var 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);
+};
+var camelToKebab = function camelToKebab(str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
+var convertScssToCss = exports.convertScssToCss = function convertScssToCss(scssObj) {
+  // Helper function to handle nested objects
+  var _convertObjectToCss = function convertObjectToCss(obj) {
+    var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var css = '';
+
+    // Iterate over each key-value pair in the SCSS object
+    for (var key in obj) {
+      var value = obj[key];
+      if (_typeof(value) === 'object') {
+        // If the value is an object, it's a nested rule, so we recurse
+        var newParent = parent ? "".concat(parent, " ").concat(key) : key;
+        css += _convertObjectToCss(value, newParent); // Recurse and concatenate
+      } else {
+        // Otherwise, it's a property-value pair (e.g. color: red)
+        css += "".concat(parent, " { ").concat(camelToKebab(key), ": ").concat(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.20",
+  "version": "0.0.21",
   "description": "Get-Set Sortable",
   "main": "index.js",
   "author": "Get-Set",
@@ -10,10 +10,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "cp -r src/* dist/"
+    "build": "babel src --out-dir dist --copy-files --ignore 'src/**/*.test.js'"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": ">=16.0.0"
   },
   "keywords": [
     "grid",