beem-component 1.4.8 → 1.5.1

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -43,7 +43,7 @@ var BmChat = _styledComponents.default.div(_templateObject || (_templateObject =
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
-BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n  border: 10px solid green;\n"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n"])));
 
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n  ", "\n"])), function (_ref) {
   var state = _ref.state;

package/dist/components/ChatComponents/ChatBody/sessionDetails.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SessionDetails = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../../colors");
@@ -30,10 +32,10 @@ var SessionDetails = function SessionDetails(_ref) {
       time = _ref.time,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(SessionDetailsWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(SessionDetailsWrapper, _extends({
     time: time,
     message: message
-  }, rest), /*#__PURE__*/React.createElement("p", null, "\xA0"), message || /*#__PURE__*/React.createElement("p", null, "\xA0"), time || /*#__PURE__*/React.createElement("p", null, "\xA0"));
+  }, rest), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), time || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"));
 };
 
 exports.SessionDetails = SessionDetails;

package/dist/components/Modals/modal.js

@@ -133,19 +133,20 @@ BmModal.Header = function (_ref2) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  max-height: ", ";\n  overflow: auto;\n"])), function (_ref3) {
-  var size = _ref3.size;
-
-  if (size) {
-    if (size === "small") return "21.429rem";
-    if (size === "default") return "35.714rem";
-    if (size === "large") return "57.143rem";
-    if (size === "xlarge") return "81.429rem";
-    return size;
-  }
-
-  return "35.714rem";
-});
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n  ", "\n"])), ''
+/* max-height: ${({ size }) => {
+if (size) {
+if (size === "small") return "21.429rem";
+if (size === "default") return "35.714rem";
+if (size === "large") return "57.143rem";
+if (size === "xlarge") return "81.429rem";
+return size;
+}
+return "35.714rem";
+}}; */
+, ''
+/* overflow: auto; */
+);
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.4.8",
+    "version": "1.5.1",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,67 +1,54 @@
-import React from "react";
-import { GlobalStyle, BmChat } from "./lib/components";
-import image from "../src/lib/assets/chart-img.png";
+import React, { useState } from "react";
+import map from "lodash/map";
+import { GlobalStyle, BmModal, BmButton } from "./lib/components";
+import Select from 'react-select';
 
 const App = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const VENDOR_ACCOUNT_STATUSES = {
+    0: "Inactive",
+    1: "Active",
+  };
+
+  const VENDOR_ACCOUNT_STATUS_OPTIONS = map(
+    VENDOR_ACCOUNT_STATUSES,
+    (type, key) => ({
+      value: key,
+      label: type,
+    }),
+  );
   return (
     <>
       <GlobalStyle />
-      <BmChat>
-        <BmChat.Body>
-          <BmChat.Details
-            state="inbound"
-            session="bot"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-          >
-            <p>Inbound Text Message</p>
-          </BmChat.Details>
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src={image}
-            sessionDetails={{ message: <h3>tejal</h3>, time: <p>today</p> }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="bot"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-          >
-            <p>Outbound Text Message</p>
-          </BmChat.Details>
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-            onDownload={() => {
-              alert("hello");
-            }}
-          />
-        </BmChat.Body>
-      </BmChat>
+      <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      <BmModal
+        size="small"
+        show={showModal}
+        onHide={() => setShowModal(false)}
+        centered
+      >
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <Select
+            // value={{
+            //   label: VENDOR_ACCOUNT_STATUSES[values.active],
+            //   value: values.active,
+            // }}
+            options={VENDOR_ACCOUNT_STATUS_OPTIONS}
+            placeholder="Select"
+            // onChange={(option) => setFieldValue("active", option.value)}
+          />{" "}
+        </BmModal.Body>
+        <BmModal.Footer>
+          <BmButton size="small">Send</BmButton>
+          <BmButton size="small" variant="secondary">
+            View
+          </BmButton>
+        </BmModal.Footer>
+      </BmModal>
     </>
   );
 };

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -28,7 +28,6 @@ BmChat.Body = styled.div`
   flex-grow: 1;
   overflow: auto;
   height: 100%;
-  border: 10px solid green;
 `;
 
 const Details = styled.div`

package/src/lib/components/ChatComponents/ChatBody/sessionDetails.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from "styled-components";
 import { BmGrey200 } from "../../colors";
 

package/src/lib/components/Modals/modal.js

@@ -134,7 +134,7 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  max-height: ${({ size }) => {
+  ${'' /* max-height: ${({ size }) => {
     if (size) {
       if (size === "small") return "21.429rem";
       if (size === "default") return "35.714rem";
@@ -143,8 +143,8 @@ BmModal.Body = styled.div`
       return size;
     }
     return "35.714rem";
-  }};
-  overflow: auto;
+  }}; */}
+  ${'' /* overflow: auto; */}
 `;
 
 BmModal.Footer = styled.div`