@bento-core/tab 1.0.0-alpha.0 → 1.0.0-c3dc.1

package/dist/Tabs.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
+var _toolTip = _interopRequireDefault(require("@bento-core/tool-tip"));
 var _defaultTheme = require("./defaultTheme");
 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; }
@@ -28,11 +30,39 @@ const TabItems = _ref => {
       clsName,
       index
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, name, count && /*#__PURE__*/_react.default.createElement("span", {
-      className: "index_".concat(index, " ").concat(clsName, "_count")
-    }, count)));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, name.split(' ').map((word, index2) => /*#__PURE__*/_react.default.createElement("span", {
+      key: index2
+    }, word))), count && /*#__PURE__*/_react.default.createElement("span", {
+      className: "index_".concat(index, " ").concat(clsName, "_count"),
+      style: {
+        paddingLeft: '4px'
+      }
+    }, count));
   };
-  const TABs = tabItems.map((tab, index) => /*#__PURE__*/_react.default.createElement(_core.Tab, {
+  const TABs = tabItems.map((tab, index) => tab.hasToolTip ? /*#__PURE__*/_react.default.createElement(_toolTip.default, _extends({}, tab.tooltipStyles, {
+    title: tab.toolTipText || '.',
+    arrow: true,
+    placement: "top"
+  }), /*#__PURE__*/_react.default.createElement(_core.Tab, {
+    index: index,
+    label: getTabLalbel(_objectSpread(_objectSpread({}, tab), {}, {
+      index
+    })),
+    key: index,
+    className: tab.clsName,
+    disableRipple: true
+  })) : /*#__PURE__*/_react.default.createElement(_core.Tab, {
     index: index,
     label: getTabLalbel(_objectSpread(_objectSpread({}, tab), {}, {
       index

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/tab",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-c3dc.1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -14,11 +14,11 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.4",
+    "@bento-core/tool-tip": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC",
-  "gitHead": "a2b58e6757e02360c33611cc425674a227bd7e5b"
+  "license": "ISC"
 }

package/src/Tabs.js

@@ -5,6 +5,7 @@ import {
   createTheme,
   ThemeProvider,
 } from '@material-ui/core';
+import ToolTip from '@bento-core/tool-tip';
 import { defaultTheme } from './defaultTheme';
 
 const TabItems = ({
@@ -17,30 +18,51 @@ const TabItems = ({
   const getTabLalbel = ({
     name, count, clsName, index,
   }) => (
-    <>
-      <span>
-        {name}
-        {count && (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+      <span style={{ display: 'flex', flexDirection: 'column' }}>
+        {name.split(' ').map((word, index2) => (
+          <span key={index2}>{word}</span>
+        ))}
+      </span>
+      {count && (
         <span
           className={`index_${index} ${clsName}_count`}
+          style={{ paddingLeft: '4px' }}
         >
           {count}
         </span>
-        )}
-      </span>
-    </>
+      )}
+    </div>
   );
 
   const TABs = tabItems.map((tab, index) => (
-    <Tab
-      index={index}
-      label={
+
+    tab.hasToolTip
+      ? (
+        <ToolTip {...tab.tooltipStyles} title={tab.toolTipText || '.'} arrow placement="top">
+          <Tab
+            index={index}
+            label={
         getTabLalbel({ ...tab, index })
       }
-      key={index}
-      className={tab.clsName}
-      disableRipple
-    />
+            key={index}
+            className={tab.clsName}
+            disableRipple
+          />
+        </ToolTip>
+      )
+      : (
+        <Tab
+          index={index}
+          label={
+    getTabLalbel({ ...tab, index })
+  }
+          key={index}
+          className={tab.clsName}
+          disableRipple
+        />
+      )
+
   ));
 
   const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });