@bento-core/tab 0.2.0

package/babel.config.json

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-react-jsx",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/dist/TabThemeProvider.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+var _default = _ref => {
+  let {
+    children,
+    extraStyles,
+    muiTabsTheme,
+    muiTabTheme,
+    themes,
+    overrides
+  } = _ref;
+  const style = [];
+  const overridesObj = themes.light.overrides;
+  if (extraStyles) style.push(extraStyles);
+  const MuiTabs = muiTabsTheme;
+  const MuiTab = muiTabTheme;
+  overridesObj.MuiTabs = MuiTabs;
+  overridesObj.MuiTab = MuiTab;
+  style.push(overridesObj);
+  const computedTheme = (0, _styles.createTheme)(_objectSpread(_objectSpread(_objectSpread({}, themes.light), overrides), style));
+  return /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
+    theme: computedTheme
+  }, children);
+};
+exports.default = _default;

package/dist/Tabs.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _defaultTheme = require("./defaultTheme");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const TabItems = _ref => {
+  let {
+    tabItems,
+    handleTabChange,
+    currentTab,
+    orientation,
+    customTheme = {}
+  } = _ref;
+  const getTabLalbel = _ref2 => {
+    let {
+      name,
+      count,
+      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)));
+  };
+  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 themeConfig = (0, _core.createTheme)({
+    overrides: _objectSpread(_objectSpread({}, (0, _defaultTheme.defaultTheme)()), customTheme)
+  });
+  return /*#__PURE__*/_react.default.createElement(_core.ThemeProvider, {
+    theme: themeConfig
+  }, /*#__PURE__*/_react.default.createElement(_core.Tabs, {
+    onChange: (event, value) => handleTabChange(event, value),
+    value: currentTab,
+    TabIndicatorProps: {
+      style: {
+        background: 'none'
+      }
+    },
+    orientation: orientation
+  }, TABs));
+};
+var _default = TabItems;
+exports.default = _default;

package/dist/defaultTheme.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTheme = void 0;
+const defaultTheme = () => ({
+  defaultStyle: {
+    fontFamily: 'Open Sans',
+    textTransform: 'none',
+    fontSize: '17px'
+  },
+  flexContainer: {
+    flexDirection: 'column'
+  },
+  indicator: {
+    display: 'none'
+  },
+  tabHighlightColor: {
+    color: '#6d9eba'
+  },
+  tabs: {
+    paddingLeft: '10px'
+  },
+  MuiTab: {
+    root: {
+      fontFamily: 'Open Sans',
+      textTransform: 'none',
+      fontSize: '17px'
+    }
+  }
+});
+exports.defaultTheme = defaultTheme;

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.default;
+  }
+});
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/tabsStyle.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const tabsStyle = {
+  tabsContainer: {},
+  muiTabs: {
+    root: {
+      marginTop: '15px'
+    },
+    flexContainer: {
+      borderBottom: '10px solid #40789C',
+      overflow: 'visible !important'
+    },
+    indicator: {
+      display: 'none'
+    }
+  },
+  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'
+      }
+    }
+  },
+  tabsLabel: {
+    fontFamily: 'Lato',
+    textTransform: 'capitalize',
+    fontSize: '21px'
+  },
+  tabsPanel: {}
+};
+var _default = tabsStyle;
+exports.default = _default;

package/dist/utils/generateStyle.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tabsStyle = _interopRequireDefault(require("../tabsStyle"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const generateStyle = function generateStyle() {
+  let customStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const style = _objectSpread({}, _tabsStyle.default);
+  if (customStyle.tabsContainer) {
+    style.tabsContainer = _objectSpread(_objectSpread({}, style.tabsContainer), customStyle.tabsContainer);
+  }
+  if (customStyle.tabsLabel) {
+    style.tabsLabel = _objectSpread(_objectSpread({}, style.tabsLabel), customStyle.tabsLabel);
+  }
+  if (customStyle.tabsPanel) {
+    style.tabsPanel = _objectSpread(_objectSpread({}, style.tabsPanel), customStyle.tabsPanel);
+  }
+  if (customStyle.muiTabs) {
+    style.muiTabs = _objectSpread(_objectSpread({}, style.muiTabs), customStyle.muiTabs);
+  }
+  if (customStyle.muiTab) {
+    style.muiTab = _objectSpread(_objectSpread({}, style.muiTab), customStyle.muiTab);
+  }
+  return style;
+};
+var _default = generateStyle;
+exports.default = _default;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@bento-core/tab",
+  "version": "0.2.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.1"
+  },
+  "author": "CTOS Bento Team",
+  "license": "ISC",
+  "gitHead": "10ee9deeae6dd0f139ecb7a70afc4c96a4e33d74"
+}

package/src/TabThemeProvider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+
+export default ({
+  children, extraStyles, muiTabsTheme, muiTabTheme,themes, overrides
+}) => {
+  const style = [];
+  const overridesObj = themes.light.overrides;
+
+  if (extraStyles) style.push(extraStyles);
+
+  const MuiTabs = muiTabsTheme;
+
+  const MuiTab = muiTabTheme;
+
+  overridesObj.MuiTabs = MuiTabs;
+  overridesObj.MuiTab = MuiTab;
+  style.push(overridesObj);
+
+  const computedTheme = createTheme({ ...themes.light, ...overrides, ...style });
+
+  return (
+    <MuiThemeProvider theme={computedTheme}>
+      {children}
+    </MuiThemeProvider>
+  );
+};

package/src/Tabs.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Tab,
+  Tabs,
+  createTheme, 
+  ThemeProvider,
+} from '@material-ui/core';
+import { defaultTheme } from './defaultTheme';
+
+const TabItems = ({
+  tabItems,
+  handleTabChange,
+  currentTab,
+  orientation,
+  customTheme = {},
+}) => {
+  const getTabLalbel = ({ name, count, clsName, index }) => (
+    <>
+      <span>
+        {name}
+        {count && (
+          <span
+            className={`index_${index} ${clsName}_count`}
+          >
+            {count}
+          </span>
+        )}
+      </span>
+    </>
+  );
+
+  const TABs = tabItems.map((tab, index) => (
+    <Tab
+      index={index}
+      label={
+        getTabLalbel({ ...tab, index })
+      }
+      key={index}
+      className={tab.clsName}
+      disableRipple
+    />
+  ));
+
+  const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });
+  return (
+    <ThemeProvider theme={themeConfig}>
+      <Tabs
+        onChange={(event, value) => handleTabChange(event, value)}
+        value={currentTab}
+        TabIndicatorProps={{ style: { background: 'none' } }}
+        orientation={orientation}
+      >
+        {TABs}
+      </Tabs>
+    </ThemeProvider>
+  );
+};
+
+export default TabItems;

package/src/defaultTheme.js

@@ -0,0 +1,26 @@
+export const defaultTheme = () => ({
+  defaultStyle: {
+    fontFamily: 'Open Sans',
+    textTransform: 'none',
+    fontSize: '17px',
+  },
+  flexContainer: {
+    flexDirection: 'column',
+  },
+  indicator: {
+    display: 'none',
+  },
+  tabHighlightColor: {
+    color: '#6d9eba',
+  },
+  tabs: {
+    paddingLeft: '10px',
+  },
+  MuiTab: {
+    root: {
+      fontFamily: 'Open Sans',
+      textTransform: 'none',
+      fontSize: '17px',
+    },
+  },
+});

package/src/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs';

package/src/tabsStyle.js

@@ -0,0 +1,44 @@
+const tabsStyle = {
+  tabsContainer: {},
+  muiTabs: {
+    root: {
+      marginTop: '15px',
+    },
+    flexContainer: {
+      borderBottom: '10px solid #40789C',
+      overflow: 'visible !important',
+    },
+    indicator: {
+      display: 'none',
+    },
+  },
+  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',
+      },
+    },
+  },
+  tabsLabel: {
+    fontFamily: 'Lato',
+    textTransform: 'capitalize',
+    fontSize: '21px',
+  },
+  tabsPanel: {},
+};
+
+export default tabsStyle;

package/src/utils/generateStyle.js

@@ -0,0 +1,29 @@
+import tabsStyle from '../tabsStyle';
+
+const generateStyle = (customStyle = {}) => {
+  const style = { ...tabsStyle };
+
+  if (customStyle.tabsContainer) {
+    style.tabsContainer = { ...style.tabsContainer, ...customStyle.tabsContainer };
+  }
+
+  if (customStyle.tabsLabel) {
+    style.tabsLabel = { ...style.tabsLabel, ...customStyle.tabsLabel };
+  }
+
+  if (customStyle.tabsPanel) {
+    style.tabsPanel = { ...style.tabsPanel, ...customStyle.tabsPanel };
+  }
+
+  if (customStyle.muiTabs) {
+    style.muiTabs = { ...style.muiTabs, ...customStyle.muiTabs };
+  }
+
+  if (customStyle.muiTab) {
+    style.muiTab = { ...style.muiTab, ...customStyle.muiTab };
+  }
+
+  return style;
+};
+
+export default generateStyle;