sag_components 1.0.11 → 1.0.13

package/dist/stories/components/OneColumnContainer.js

@@ -11,14 +11,19 @@ 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 _excluded = ["children", "itemClass", "overStyle", "draggingStyle", "droppedStyle", "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,
+    overStyle = _ref.overStyle,
+    draggingStyle = _ref.draggingStyle,
+    droppedStyle = _ref.droppedStyle,
+    refId = _ref.refId,
     width = _ref.width,
     height = _ref.height,
     infoText = _ref.infoText,
@@ -27,15 +32,28 @@ 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, overStyle, draggingStyle, droppedStyle),
+    ref: setNodeRef,
     width: width,
     height: height
-  }, children);
+  }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+    clicked: clicked,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, null, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+    onClick: onInfoClick
+  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+    clicked: clicked
+  })));
 };
 exports.OneColumnContainer = OneColumnContainer;
 OneColumnContainer.defaultProps = {};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "sag_components",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "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/OneColumnContainer.jsx

@@ -2,26 +2,34 @@ 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";
 /**
  * Primary UI component for user interaction
  */
-export const OneColumnContainer = ({ children,className,ref,width,height,infoText,...props }) => {
+export const OneColumnContainer = ({ children,itemClass,overStyle,draggingStyle,droppedStyle,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,
+      overStyle,
+      draggingStyle,
+      droppedStyle
+    )} ref={setNodeRef} width={width} height={height}>
       {children}
-      {/* <InfoTextContainer clicked={clicked} width={width} height={height}>
+      <InfoTextContainer clicked={clicked} width={width} height={height}>
         <InfoTextLabel>{infoText}</InfoTextLabel>
       </InfoTextContainer>
       <IconContainer onClick={onInfoClick}>
         <InfoIcon clicked={clicked} />
-      </IconContainer> */}
+      </IconContainer>
     </StyledContainer>
   );
 };