@homecode/ui 4.22.6 → 4.22.8

package/dist/esm/src/components/Draggable/Draggable.js

@@ -30,10 +30,23 @@ class Draggable extends Component {
         if (prevProps.items.join(',') !== this.props.items.join(',')) {
             this.dropUnder();
         }
+        if (prevProps.disabled !== this.props.disabled) {
+            this.dropUnder();
+            if (this.props.disabled)
+                this.unsubscribeMoveUp();
+        }
     }
     componentWillUnmount() {
         this.timers.clear();
     }
+    subscribeMoveUp = () => {
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    unsubscribeMoveUp = () => {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
     onPointerDown = e => {
         const { clientX: x, clientY: y, currentTarget } = e;
         e.stopPropagation();
@@ -41,11 +54,10 @@ class Draggable extends Component {
         this.startPos = { x, y };
         this.draggingElem = currentTarget;
         this.draggingElemBounds = currentTarget.getBoundingClientRect();
-        document.addEventListener('pointermove', this.onPointerMove);
-        document.addEventListener('pointerup', this.onPointerUp);
+        this.subscribeMoveUp();
     };
     onPointerMove = e => {
-        if (!this.draggingElem)
+        if (!this.draggingElem || this.props.disabled)
             return;
         const { clientX: x, clientY: y } = e;
         if (!this.store.draggingId) {
@@ -94,8 +106,7 @@ class Draggable extends Component {
             e.stopPropagation();
             e.preventDefault();
         }
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
+        this.unsubscribeMoveUp();
         this.dragStartFired = false;
         this.startPos = null;
         this.store.draggingId = null;
@@ -127,9 +138,9 @@ class Draggable extends Component {
         this.store.underOffset = null;
     }
     render() {
-        const { items, className, itemClassName, renderItem, children } = this.props;
+        const { items, className, itemClassName, renderItem, children, disabled } = this.props;
         const { draggingId, underId, underOffset } = this.store;
-        return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
+        return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: disabled ? undefined : this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
     }
 }
 

package/dist/esm/src/components/Icon/icons/dragHandlerHorizontal.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgDragHandlerHorizontal = function SvgDragHandlerHorizontal(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M16 9.293a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 20 9.297a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 16 9.293m-2-.003a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 10 9.286a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 14 9.29m-6-.007a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 4 9.28a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 8 9.283m8 6.01a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 20 15.297a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 16 15.293m-2-.003a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 10 15.286a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 14 15.29m-6-.007a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 4 15.28a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 8 15.283"
+  })));
+};
+
+export { SvgDragHandlerHorizontal as default };

package/dist/esm/src/components/Icon/icons/dragHandlerVertical.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgDragHandlerVertical = function SvgDragHandlerVertical(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M14.995 16.288a2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002 2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002m.003-2A2.006 2.006 0 0 0 17 12.29a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 13 12.286a2.006 2.006 0 0 0 1.998 2.002m.007-6a2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002 2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002m-6.01 8a2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002 2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002m.003-2A2.006 2.006 0 0 0 11 12.29a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 7 12.286a2.006 2.006 0 0 0 1.998 2.002m.007-6a2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002 2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002"
+  })));
+};
+
+export { SvgDragHandlerVertical as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -18,6 +18,8 @@ var ICONS = {
     clearAll: () => import('./clearAll.svg.js'),
     delete: () => import('./delete.svg.js'),
     draft: () => import('./draft.svg.js'),
+    dragHandlerHorizontal: () => import('./dragHandlerHorizontal.svg.js'),
+    dragHandlerVertical: () => import('./dragHandlerVertical.svg.js'),
     edit: () => import('./edit.svg.js'),
     email: () => import('./email.svg.js'),
     externalLink: () => import('./externalLink.svg.js'),

package/dist/esm/types/src/components/Draggable/Draggable.d.ts

@@ -10,6 +10,8 @@ export declare class Draggable extends Component<T.Props> {
     constructor(props: any);
     componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
+    subscribeMoveUp: () => void;
+    unsubscribeMoveUp: () => void;
     onPointerDown: (e: any) => void;
     onPointerMove: (e: any) => void;
     checkUnderElem: any;

package/dist/esm/types/src/components/Draggable/Draggable.types.d.ts

@@ -3,6 +3,7 @@ export type Props = {
     items: string[];
     className?: string;
     itemClassName?: string;
+    disabled?: boolean;
     renderItem: (id: string, index: number, isActive: boolean) => ReactNode;
     onDragStart?: (id: string) => void;
     onDragEnd?: (id: string) => void;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
     clearAll: () => Promise<any>;
     delete: () => Promise<any>;
     draft: () => Promise<any>;
+    dragHandlerHorizontal: () => Promise<any>;
+    dragHandlerVertical: () => Promise<any>;
     edit: () => Promise<any>;
     email: () => Promise<any>;
     externalLink: () => Promise<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.22.6",
+  "version": "4.22.8",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",