@bento-core/tab 1.0.0 → 1.0.1-CDS.0

package/dist/Tabs.js

@@ -5,14 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _ToolTip = _interopRequireDefault(require("@bento-core/tool-tip/src/ToolTip"));
 var _core = require("@material-ui/core");
 var _defaultTheme = require("./defaultTheme");
+var _generateStyle = _interopRequireDefault(require("./utils/generateStyle"));
+const _excluded = ["title"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
 const TabItems = _ref => {
   let {
     tabItems,
@@ -21,7 +27,10 @@ const TabItems = _ref => {
     orientation,
     customTheme = {}
   } = _ref;
-  const getTabLalbel = _ref2 => {
+  const generatedStyle = (0, _generateStyle.default)();
+  const useStyles = (0, _core.makeStyles)(generatedStyle);
+  const classes = useStyles();
+  const getTabLabel = _ref2 => {
     let {
       name,
       count,
@@ -32,15 +41,28 @@ const TabItems = _ref => {
       className: "index_".concat(index, " ").concat(clsName, "_count")
     }, count)));
   };
-  const TABs = tabItems.map((tab, index) => /*#__PURE__*/_react.default.createElement(_core.Tab, {
-    index: index,
-    label: getTabLalbel(_objectSpread(_objectSpread({}, tab), {}, {
-      index
-    })),
-    key: index,
-    className: tab.clsName,
-    disableRipple: true
-  }));
+  const CustomTab = tabItems.map((tab, index) => {
+    const _ref3 = tab.tooltipConfig || {},
+      {
+        title: tooltipTitle
+      } = _ref3,
+      tooltipProps = _objectWithoutProperties(_ref3, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_ToolTip.default, _extends({
+      key: "tab_".concat(index, "_").concat(tab.name),
+      title: tooltipTitle || '',
+      classes: {
+        tooltip: classes.customTooltip,
+        arrow: classes.customArrow
+      }
+    }, tooltipProps), /*#__PURE__*/_react.default.createElement(_core.Tab, {
+      index: index,
+      label: getTabLabel(_objectSpread(_objectSpread({}, tab), {}, {
+        index
+      })),
+      className: tab.clsName,
+      disableRipple: true
+    }));
+  });
   const themeConfig = (0, _core.createTheme)({
     overrides: _objectSpread(_objectSpread({}, (0, _defaultTheme.defaultTheme)()), customTheme)
   });
@@ -55,7 +77,7 @@ const TabItems = _ref => {
       }
     },
     orientation: orientation
-  }, TABs));
+  }, CustomTab));
 };
 var _default = TabItems;
 exports.default = _default;

package/dist/tabsStyle.js

@@ -6,45 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 const tabsStyle = {
   tabsContainer: {},
-  muiTabs: {
-    root: {
-      marginTop: '15px'
-    },
-    flexContainer: {
-      borderBottom: '10px solid #40789C',
-      overflow: 'visible !important'
-    },
-    indicator: {
-      display: 'none'
-    }
+  muiTabs: {},
+  muiTab: {},
+  tabsLabel: {},
+  tabsPanel: {},
+  customTooltip: {
+    border: '#03A383 1px solid'
   },
-  muiTab: {
-    root: {
-      width: '250px',
-      height: '45px',
-      minHeight: '40px',
-      marginRight: '10px',
-      background: '#EAEAEA',
-      fontSize: '18px',
-      fontFamily: 'Raleway',
-      fontWeight: '400',
-      lineHeight: '18px',
-      paddingLeft: '5px',
-      letterSpacing: '0.25px',
-      borderTop: '1px solid black',
-      borderLeft: '1px solid black',
-      borderRight: '1px solid black',
-      '&$selected': {
-        fontWeight: 'bolder'
-      }
+  customArrow: {
+    '&::before': {
+      border: '#03A383 1px solid'
     }
-  },
-  tabsLabel: {
-    fontFamily: 'Lato',
-    textTransform: 'capitalize',
-    fontSize: '21px'
-  },
-  tabsPanel: {}
+  }
 };
 var _default = tabsStyle;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/tab",
-  "version": "1.0.0",
+  "version": "1.0.1-CDS.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -12,6 +12,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@bento-core/tool-tip": "^1.0.0"
+  },
   "peerDependencies": {
     "@material-ui/core": "^4.12.4",
     "react": "^17.0.2",
@@ -20,5 +23,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "4493c4a5fa666211345fea022ec06841a323d446"
+  "gitHead": "12ceec27794b24a5ab2870e421cbb6ff5970b438"
 }

package/src/Tabs.js

@@ -1,11 +1,14 @@
 import React from 'react';
+import ToolTip from '@bento-core/tool-tip/src/ToolTip';
 import {
   Tab,
   Tabs,
   createTheme,
   ThemeProvider,
+  makeStyles,
 } from '@material-ui/core';
 import { defaultTheme } from './defaultTheme';
+import generateStyle from './utils/generateStyle';
 
 const TabItems = ({
   tabItems,
@@ -14,7 +17,11 @@ const TabItems = ({
   orientation,
   customTheme = {},
 }) => {
-  const getTabLalbel = ({
+  const generatedStyle = generateStyle();
+  const useStyles = makeStyles(generatedStyle);
+  const classes = useStyles();
+
+  const getTabLabel = ({
     name, count, clsName, index,
   }) => (
     <>
@@ -31,17 +38,30 @@ const TabItems = ({
     </>
   );
 
-  const TABs = tabItems.map((tab, index) => (
-    <Tab
-      index={index}
-      label={
-        getTabLalbel({ ...tab, index })
-      }
-      key={index}
-      className={tab.clsName}
-      disableRipple
-    />
-  ));
+  const CustomTab = tabItems.map((tab, index) => {
+    const { title: tooltipTitle, ...tooltipProps } = tab.tooltipConfig || {};
+
+    return (
+      (
+        <ToolTip
+          key={`tab_${index}_${tab.name}`}
+          title={tooltipTitle || ''}
+          classes={{
+            tooltip: classes.customTooltip,
+            arrow: classes.customArrow,
+          }}
+          {...tooltipProps}
+        >
+          <Tab
+            index={index}
+            label={getTabLabel({ ...tab, index })}
+            className={tab.clsName}
+            disableRipple
+          />
+        </ToolTip>
+      )
+    );
+  });
 
   const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });
   return (
@@ -52,7 +72,7 @@ const TabItems = ({
         TabIndicatorProps={{ style: { background: 'none' } }}
         orientation={orientation}
       >
-        {TABs}
+        {CustomTab}
       </Tabs>
     </ThemeProvider>
   );

package/src/tabsStyle.js

@@ -1,44 +1,17 @@
 const tabsStyle = {
   tabsContainer: {},
-  muiTabs: {
-    root: {
-      marginTop: '15px',
-    },
-    flexContainer: {
-      borderBottom: '10px solid #40789C',
-      overflow: 'visible !important',
-    },
-    indicator: {
-      display: 'none',
-    },
+  muiTabs: {},
+  muiTab: {},
+  tabsLabel: {},
+  tabsPanel: {},
+  customTooltip: {
+    border: '#03A383 1px solid',
   },
-  muiTab: {
-    root: {
-      width: '250px',
-      height: '45px',
-      minHeight: '40px',
-      marginRight: '10px',
-      background: '#EAEAEA',
-      fontSize: '18px',
-      fontFamily: 'Raleway',
-      fontWeight: '400',
-      lineHeight: '18px',
-      paddingLeft: '5px',
-      letterSpacing: '0.25px',
-      borderTop: '1px solid black',
-      borderLeft: '1px solid black',
-      borderRight: '1px solid black',
-      '&$selected': {
-        fontWeight: 'bolder',
-      },
+  customArrow: {
+    '&::before': {
+      border: '#03A383 1px solid',
     },
   },
-  tabsLabel: {
-    fontFamily: 'Lato',
-    textTransform: 'capitalize',
-    fontSize: '21px',
-  },
-  tabsPanel: {},
 };
 
 export default tabsStyle;