sag_components 1.0.10 → 1.0.12

package/dist/stories/components/OneColumnContainer.js

@@ -11,14 +11,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _OneColumnContainer = require("../OneColumnContainer.style");
 var _InfoIcon = require("./InfoIcon");
-var _excluded = ["children", "className", "ref", "width", "height", "infoText"];
+var _core = require("@dnd-kit/core");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _DroppableModule = _interopRequireDefault(require("./Droppable.module.css"));
+var _excluded = ["children", "itemClass", "refId", "width", "height", "infoText"];
 /**
  * Primary UI component for user interaction
  */
 var OneColumnContainer = function OneColumnContainer(_ref) {
   var children = _ref.children,
-    className = _ref.className,
-    ref = _ref.ref,
+    itemClass = _ref.itemClass,
+    refId = _ref.refId,
     width = _ref.width,
     height = _ref.height,
     infoText = _ref.infoText,
@@ -27,12 +30,17 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     clicked = _useState2[0],
     setClicked = _useState2[1];
+  var _useDroppable = (0, _core.useDroppable)({
+      refId: refId
+    }),
+    isOver = _useDroppable.isOver,
+    setNodeRef = _useDroppable.setNodeRef;
   var onInfoClick = function onInfoClick() {
     setClicked(!clicked);
   };
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
-    className: className,
-    ref: ref,
+    className: (0, _classnames.default)(itemClass, isOver && _DroppableModule.default.over, dragging && _DroppableModule.default.dragging, children && _DroppableModule.default.dropped),
+    ref: setNodeRef,
     width: width,
     height: height
   }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "sag_components",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "",
-  "main": "dist/index.js",                                    
+  "main": "dist/index.js",
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env BABEL_ENV=production babel src -d dist",
@@ -39,6 +39,7 @@
     "styled-components": "^5.3.10"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^4.5.8",
@@ -47,7 +48,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
-    "@mui/styled-engine-sc": "^5.12.0",   
+    "@mui/styled-engine-sc": "^5.12.0",
+    "classnames": "^2.3.2",
     "hoopy": "^0.1.4",
     "react-scripts": "5.0.1"
   },

package/src/stories/components/Droppable.module.css

@@ -0,0 +1,106 @@
+.Droppable {
+
+    position: relative;
+  
+    padding-top: 80px;
+  
+    text-align: center;
+  
+    border-radius: 10px;
+  
+    width: 340px;
+  
+    height: 340px;
+  
+    box-sizing: border-box;
+  
+    background-color: #fff;
+  
+    box-shadow: inset rgba(201, 211, 219, 0.5) 0 0 0 2px,
+  
+      rgba(255, 255, 255, 0) 0 0 0 1px, rgba(201, 211, 219, 0.25) 20px 14px 24px;
+  
+    transition: box-shadow 250ms ease;
+  
+  
+  
+  
+    > svg {
+  
+      position: absolute;
+  
+      left: 50%;
+  
+      top: 50%;
+  
+      width: 200px;
+  
+      transform: translate3d(-50%, -50%, 0);
+  
+      opacity: 0.8;
+  
+      transition: opacity 300ms ease, transform 200ms ease;
+  
+      user-select: none;
+  
+      pointer-events: none;
+  
+    }
+  
+  
+  
+  
+    &.dragging {
+  
+      > svg {
+  
+        opacity: 0.8;
+  
+      }
+  
+    }
+  
+  
+  
+  
+    &.over {
+  
+      box-shadow: inset #ffffff 0 0 0 3px, rgba(201, 211, 219, 0.5) 20px 14px 24px;
+  
+  
+  
+  
+      > svg {
+  
+        opacity: 1;
+  
+      }
+  
+  
+  
+  
+      &.dropped {
+  
+        box-shadow: inset rgba(4, 49, 85, 0.7) 0 0 0 3px,
+  
+          rgba(201, 211, 219, 0.5) 20px 14px 24px;
+  
+      }
+  
+    }
+  
+  
+  
+  
+    &.dropped {
+  
+      > svg {
+  
+        opacity: 0.2;
+  
+        transform: translate3d(-50%, 100%, 0) scale(0.8);
+  
+      }
+  
+    }
+}

package/src/stories/components/OneColumnContainer.jsx

@@ -2,19 +2,28 @@ import React from 'react';
 import { useState } from "react";
 import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '../OneColumnContainer.style';
 import { InfoIcon } from "./InfoIcon";
-
+import { useDroppable, UniqueIdentifier } from "@dnd-kit/core";
+import classNames from "classnames";
+import styles from "./Droppable.module.css"
 /**
  * Primary UI component for user interaction
  */
-export const OneColumnContainer = ({ children,className,ref,width,height,infoText,...props }) => {
+export const OneColumnContainer = ({ children,itemClass,refId,width,height,infoText,...props }) => {
   const [clicked, setClicked] = useState(false);
-
+  const { isOver, setNodeRef } = useDroppable({
+    refId,
+  });
   const onInfoClick = ()=>{
     setClicked(!clicked)
   }
 
   return (
-    <StyledContainer className={className} ref={ref} width={width} height={height}>
+    <StyledContainer className={classNames(
+      itemClass,
+      isOver && styles.over,
+      dragging && styles.dragging,
+      children && styles.dropped
+    )} ref={setNodeRef} width={width} height={height}>
       {children}
       <InfoTextContainer clicked={clicked} width={width} height={height}>
         <InfoTextLabel>{infoText}</InfoTextLabel>