beem-component 1.9.9 → 2.0.0

package/dist/components/MojaAccordion/MojaAccordion.js

@@ -29,12 +29,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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 _React$createContext = /*#__PURE__*/_react.default.createContext({}),
-  Provider = _React$createContext.Provider,
-  Consumer = _React$createContext.Consumer;
-var Dropdown = function Dropdown(value, rest) {
+var AccordionContext = /*#__PURE__*/_react.default.createContext({});
+var Dropdown = function Dropdown(_ref) {
+  var value = _ref.value,
+    rest = _ref.rest;
   if (value.expandIcon && value.expandIcon === 'none') {
-    return;
+    return null;
   }
   if (!value.expandIcon) {
     return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
@@ -48,6 +48,7 @@ var Dropdown = function Dropdown(value, rest) {
       icon: value.expandIcon
     });
   }
+  return null;
 };
 var BmAccordionMenu = _styledComponents.default.div.withConfig({
   displayName: "MojaAccordion__BmAccordionMenu"
@@ -58,18 +59,18 @@ var BmAccordionDetails = _styledComponents.default.div.withConfig({
 var BmAccordionWrapper = _styledComponents.default.div.withConfig({
   displayName: "MojaAccordion__BmAccordionWrapper"
 })(["display:flex;flex-direction:column;"]);
-var BmChatAccordion = function BmChatAccordion(_ref) {
-  var children = _ref.children,
-    disabled = _ref.disabled,
-    expandIcon = _ref.expandIcon,
-    Open = _ref.Open,
-    expandIconPosition = _ref.expandIconPosition,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var BmChatAccordion = function BmChatAccordion(_ref2) {
+  var children = _ref2.children,
+    disabled = _ref2.disabled,
+    expandIcon = _ref2.expandIcon,
+    Open = _ref2.Open,
+    expandIconPosition = _ref2.expandIconPosition,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useState = (0, _react.useState)(!!Open),
     _useState2 = _slicedToArray(_useState, 2),
     toggle = _useState2[0],
     setToggle = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, /*#__PURE__*/_react.default.createElement(Provider, {
+  return /*#__PURE__*/_react.default.createElement(AccordionContext.Provider, {
     value: _objectSpread({
       toggle: toggle,
       setToggle: setToggle,
@@ -77,43 +78,56 @@ var BmChatAccordion = function BmChatAccordion(_ref) {
       expandIcon: expandIcon,
       expandIconPosition: expandIconPosition
     }, rest)
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, null, children));
 };
-BmChatAccordion.Title = function (_ref2) {
-  var children = _ref2.children,
-    leadingIcon = _ref2.leadingIcon,
-    trailingIcon = _ref2.trailingIcon,
-    size = _ref2.size,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
-    return /*#__PURE__*/_react.default.createElement(BmAccordionMenu, _extends({}, rest, {
-      onClick: function onClick() {
-        return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
-      }
-    }), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-      icon: leadingIcon,
-      size: size
-    }), (value.expandIconPosition === 'left' || value.expandIconPosition === undefined) && Dropdown(value, rest), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-      icon: trailingIcon,
-      size: size
-    }), value.expandIconPosition === 'right' && Dropdown(value, rest));
-  });
+BmChatAccordion.Title = function (_ref3) {
+  var children = _ref3.children,
+    leadingIcon = _ref3.leadingIcon,
+    trailingIcon = _ref3.trailingIcon,
+    size = _ref3.size,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var value = (0, _react.useContext)(AccordionContext);
+  return /*#__PURE__*/_react.default.createElement(BmAccordionMenu, _extends({}, rest, {
+    onClick: function onClick() {
+      return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
+    }
+  }), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: leadingIcon,
+    size: size
+  }), (value.expandIconPosition === 'left' || value.expandIconPosition === undefined) && /*#__PURE__*/_react.default.createElement(Dropdown, {
+    value: value,
+    rest: rest
+  }), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: trailingIcon,
+    size: size
+  }), value.expandIconPosition === 'right' && /*#__PURE__*/_react.default.createElement(Dropdown, {
+    value: value,
+    rest: rest
+  }));
 };
-BmChatAccordion.Body = function (_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
-    return value.toggle && /*#__PURE__*/_react.default.createElement("div", null, children);
-  });
+BmChatAccordion.Body = function (_ref4) {
+  var children = _ref4.children;
+  var value = (0, _react.useContext)(AccordionContext);
+  return value.toggle ? /*#__PURE__*/_react.default.createElement("div", null, children) : null;
 };
 BmChatAccordion.propTypes = {
-  children: _propTypes.default.object,
+  children: _propTypes.default.node,
   size: _propTypes.default.string,
-  expandIcon: _propTypes.default.string,
+  expandIcon: _propTypes.default.node,
   expandIconPosition: _propTypes.default.string,
   leadingIcon: _propTypes.default.node,
   trailingIcon: _propTypes.default.node,
   disabled: _propTypes.default.bool,
   Open: _propTypes.default.bool
 };
+BmChatAccordion.Title.propTypes = {
+  children: _propTypes.default.node,
+  leadingIcon: _propTypes.default.node,
+  trailingIcon: _propTypes.default.node,
+  size: _propTypes.default.string
+};
+BmChatAccordion.Body.propTypes = {
+  children: _propTypes.default.node
+};
 var _default = BmChatAccordion;
 exports.default = _default;

package/package.json

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

package/src/App.js

@@ -195,7 +195,7 @@ const Chat = () => {
         </BmChat.Body>
       </BmChat>
       <div>
-        <BmChatAccordion Open={false} expandIconPosition="right">
+        <BmChatAccordion Open expandIconPosition="left">
           <BmChatAccordion.Title
           // trailingIcon={<AbcIcon />}
           // leadingIcon={<AbcIcon />}

package/src/lib/components/MojaAccordion/MojaAccordion.js

@@ -1,16 +1,16 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react/destructuring-assignment */
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons';
 import { BmIcons } from '../iconStyles';
 
-const { Provider, Consumer } = React.createContext({});
+const AccordionContext = React.createContext({});
 
-const Dropdown = (value, rest) => {
+const Dropdown = ({ value, rest }) => {
   if (value.expandIcon && value.expandIcon === 'none') {
-    return;
+    return null;
   }
   if (!value.expandIcon) {
     return value.toggle ? (
@@ -22,7 +22,9 @@ const Dropdown = (value, rest) => {
   if (value.expandIcon && value.expandIcon !== 'none') {
     return <BmIcons icon={value.expandIcon} />;
   }
+  return null;
 };
+
 const BmAccordionMenu = styled.div`
   display: flex;
   align-items: center;
@@ -58,20 +60,18 @@ const BmChatAccordion = ({
   const [toggle, setToggle] = useState(!!Open);
 
   return (
-    <BmAccordionWrapper>
-      <Provider
-        value={{
-          toggle,
-          setToggle,
-          disabled,
-          expandIcon,
-          expandIconPosition,
-          ...rest,
-        }}
-      >
-        {children}
-      </Provider>
-    </BmAccordionWrapper>
+    <AccordionContext.Provider
+      value={{
+        toggle,
+        setToggle,
+        disabled,
+        expandIcon,
+        expandIconPosition,
+        ...rest,
+      }}
+    >
+      <BmAccordionWrapper>{children}</BmAccordionWrapper>
+    </AccordionContext.Provider>
   );
 };
 
@@ -82,40 +82,39 @@ BmChatAccordion.Title = ({
   size,
   ...rest
 }) => {
+  const value = useContext(AccordionContext);
   return (
-    <Consumer>
-      {(value) => (
-        <BmAccordionMenu
-          {...rest}
-          onClick={() =>
-            !value.disabled || value.disabled === false
-              ? value.setToggle(!value.toggle)
-              : value.setToggle(false)
-          }
-        >
-          {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
-          {(value.expandIconPosition === 'left' ||
-            value.expandIconPosition === undefined) &&
-            Dropdown(value, rest)}
-          <BmAccordionDetails>{children}</BmAccordionDetails>
-          {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
-          {value.expandIconPosition === 'right' && Dropdown(value, rest)}
-        </BmAccordionMenu>
+    <BmAccordionMenu
+      {...rest}
+      onClick={() =>
+        !value.disabled || value.disabled === false
+          ? value.setToggle(!value.toggle)
+          : value.setToggle(false)
+      }
+    >
+      {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
+      {(value.expandIconPosition === 'left' ||
+        value.expandIconPosition === undefined) && (
+        <Dropdown value={value} rest={rest} />
+      )}
+      <BmAccordionDetails>{children}</BmAccordionDetails>
+      {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
+      {value.expandIconPosition === 'right' && (
+        <Dropdown value={value} rest={rest} />
       )}
-    </Consumer>
+    </BmAccordionMenu>
   );
 };
 
 BmChatAccordion.Body = ({ children }) => {
-  return (
-    <Consumer>{(value) => value.toggle && <div>{children}</div>}</Consumer>
-  );
+  const value = useContext(AccordionContext);
+  return value.toggle ? <div>{children}</div> : null;
 };
 
 BmChatAccordion.propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.node,
   size: PropTypes.string,
-  expandIcon: PropTypes.string,
+  expandIcon: PropTypes.node,
   expandIconPosition: PropTypes.string,
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
@@ -123,4 +122,15 @@ BmChatAccordion.propTypes = {
   Open: PropTypes.bool,
 };
 
+BmChatAccordion.Title.propTypes = {
+  children: PropTypes.node,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
+  size: PropTypes.string,
+};
+
+BmChatAccordion.Body.propTypes = {
+  children: PropTypes.node,
+};
+
 export default BmChatAccordion;