beem-component 1.5.2 → 1.5.6

package/src/App.js

@@ -1,51 +1,182 @@
-import React, { useState } from "react";
-import map from "lodash/map";
-import { GlobalStyle, BmModal, BmButton } from "./lib/components";
-import Select from "react-select";
+import React from "react";
+import { AttachFile } from "@material-ui/icons";
+import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import { BmChat, BmIcons, BmInput } from "./lib/components";
+import "../src/lib/assets/css/sidebar.scss";
+import image from "../src/lib/assets/chart-img.png";
+import azam from "../src/lib/images/azam1.png";
 
-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,
-    }),
-  );
+const Chat = () => {
   return (
-    <>
-      <GlobalStyle />
-      <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
-            options={VENDOR_ACCOUNT_STATUS_OPTIONS}
-            placeholder="Select"
-          />
-        </BmModal.Body>
-        <BmModal.Footer>
-          <BmButton size="small">Send</BmButton>
-          <BmButton size="small" variant="secondary">
-            View
-          </BmButton>
-        </BmModal.Footer>
-      </BmModal>
-    </>
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          src={image}
+          fileName={<p>attachment.jpg</p>}
+        />
+         <BmChat.Details
+          state="outbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+          src={azam}
+          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
+        >
+          <p>Hekkoi</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>
+            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
+            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
+            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
+            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
+            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
+            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
+            lingine?
+          </p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
+      </BmChat.Footer>
+    </BmChat>
   );
 };
 
-export default App;
+export default Chat;

package/src/App1.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { GlobalStyle, BmChat } from "./lib/components";
+import "./list.scss";
+import { ScrollbarWrapper } from "./lib/components/ScrollBar/scrollBar";
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <ScrollbarWrapper>
+        <BmChat>
+          <BmChat.Body>
+            <BmChat.Details
+              state="inbound"
+              session="bot"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+              sessionDetails={{
+                message: <h3>Session Message</h3>,
+                time: <p>12:00pm</p>,
+              }}
+            >
+              <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>}
+              sessionDetails={{
+                message: <h3>Session Message</h3>,
+                time: <p>12:00pm</p>,
+              }}
+            />
+            <BmChat.Details
+              state="inbound"
+              session="live"
+              displayTime={<p>10:00am</p>}
+              status="failed"
+              fileName={<p>file.csv</p>}
+            />
+            <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>}
+            />
+            <BmChat.Details
+              state="outbound"
+              session="live"
+              displayTime={<p>10:00am</p>}
+              status="failed"
+              fileName={<p>file.csv</p>}
+              onDownload={() => {
+                alert("hello");
+              }}
+            />
+          </BmChat.Body>
+        </BmChat>
+      </ScrollbarWrapper>
+    </>
+  );
+};
+
+export default App;

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

@@ -89,7 +89,7 @@ const Messages = styled.div`
     return `${BmPrimaryWhite}`;
   }};
   border: 0.071rem solid ${BmGrey200};
-  word-break: break-all;
+  word-break: keep-all;
   margin: 0rem;
 `;
 

package/src/lib/components/Lists/listBox.js

@@ -1,3 +1,4 @@
+import React, { useEffect, useRef } from "react";
 import styled from "styled-components";
 import { BmGrey400, BmPrimaryWhite } from "../colors";
 import PropTypes from "prop-types";
@@ -11,24 +12,54 @@ const show = (isOpen) => {
     }
     if (isOpen === false) {
       return `display: none;
-      position: absolute;
+      position: absolute;      
       margin-top: 0.5rem`;
     }
   }
   return "flex";
 };
-export const BmListBox = styled.div`
+
+const BmListBoxWrapper = styled.div`
   ${(props) => show(props.isOpen)};
   flex-direction: column;
-  padding: 0.286rem 0rem;
+  padding: 0.25rem 0rem;
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
-  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
+  box-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
   border-radius: 0.25rem;
-  z-index: 99999;
+  z-index: 10000;
   cursor: pointer;
 `;
 
+export const BmListBox = ({ children, showList, setShowList, ...rest }) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    const checkIfClickedOutside = (e) => {
+      if (showList && ref.current && !ref.current.contains(e.target)) {
+        setShowList(false);
+      }
+    };
+    document.addEventListener("mousedown", checkIfClickedOutside);
+    return () => {
+      document.removeEventListener("mousedown", checkIfClickedOutside);
+    };
+  }, [setShowList, showList]);
+
+  return (
+    <BmListBoxWrapper
+      ref={ref}
+      onClick={() => {
+        setShowList((oldState) => !oldState);
+      }}
+      isOpen={showList}
+      {...rest}
+    >
+      {children}
+    </BmListBoxWrapper>
+  );
+};
+
 BmListBox.propTypes = {
   isOpen: PropTypes.bool,
-}
+};

package/src/lib/components/Lists/listBox.stories.js

@@ -9,10 +9,15 @@ export default {
   component: BmListBox,
   title: "components/Lists/ListBox",
   argTypes: {
-    isOpen: {
+    showList: {
       description:
-        "true/false (optional), Used for handling the display of listbox",
+        "Used for handling the display of listbox",
     },
+    setShowList: {
+      description:
+        "Function for handling the display of listbox",
+    },
+    
   },
 };
 
@@ -34,7 +39,7 @@ export const FunctionalListBox = () => {
   return (
     <>
       <BmButton onClick={() => showList(!List)}>Click Me!</BmButton>
-      <BmListBox isOpen={List}>
+      <BmListBox showList={List} setShowList={showList}>
         <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
           <h4>Row Label</h4>
         </BmRowLabel>

package/src/lib/components/ScrollBar/scrollBar.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ScrollbarWrapper = styled.div(() => ({
+  "::-webkit-scrollbar-thumb": {
+    background: "blue",
+    maxHeight: "10px",
+    display: "block",
+    width: "10em",
+    overflow: "auto",
+    height: "2em",
+  },
+}));
+
+export const Scrollbar = styled.div`
+::-webkit-scrollbar {
+    width: 0.714rem !important;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #E2E2E2;
+}`;
+
+export const Content = styled.div(() => ({
+  direction: "ltr", // if you want to show the scroll bar on the left
+}));
+
+export default ScrollbarWrapper;

package/src/lib/components/globalStyles.js

@@ -10,4 +10,7 @@ export const GlobalStyle = createGlobalStyle`
   p  { ${p} }
   input {${input}}
   a {${a}}
+  ::-webkit-scrollbar-thumb: {
+  background:red;
+  maxHeight: '10px'}
 `;

package/src/list.scss

@@ -0,0 +1,4 @@
+.listbox {
+    position: relative;
+    top: 1rem;
+}

package/src/Chat.js

@@ -1,182 +0,0 @@
-import React from "react";
-import { AttachFile } from "@material-ui/icons";
-import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import { BmChat, BmIcons, BmInput } from "./lib/components";
-import "../src/lib/assets/css/sidebar.scss";
-import image from "../src/lib/assets/chart-img.png";
-import azam from "../src/lib/images/azam1.png";
-
-const Chat = () => {
-  return (
-    <BmChat>
-      <BmChat.Body>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          src={image}
-          fileName={<p>attachment.jpg</p>}
-        />
-         <BmChat.Details
-          state="outbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-          src={azam}
-          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
-        >
-          <p>Hekkoi</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>
-            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
-            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
-            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
-            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
-            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
-            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
-            lingine?
-          </p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-      </BmChat.Body>
-      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        </div>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-          <BmIcons icon={<AttachFile />} size="xlarge" />
-          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
-          <BmIcons icon={<SendIcon />} size="xlarge" />
-        </div>
-      </BmChat.Footer>
-    </BmChat>
-  );
-};
-
-export default Chat;