glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
107 lines (106 loc) • 7.55 kB
JavaScript
"use strict";
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tab = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
/**
* tab component
* @param {*} indicatorStyle The style of the tab indicator.
* @param {*} activeIndex The index of the active tab. It represents the initially selected tab when the component is rendered.
* @param {*} children The content of the Tab component, which should be one or more TabItem components.
* @param {*} onTabChange A function to be called when the active tab is changed. It is typically used to handle tab change events and update the activeIndex accordingly.
* @param {*} iconPosition The position of the tab icon relative to the tab label. It can be set to "start" (before the label) or "end" (after the label).
* @param {*} disabled A boolean flag to disable all the tabs if set to true. When disabled,
* @param {string} className - custom class for styles
*/
const Tab = _ref => {
let {
indicatorStyle = "simple",
activeIndex = 0,
children,
onTabChange,
iconPosition = "start",
disabled = false,
className,
style,
containerClass,
showIndicator = true
} = _ref;
const [header, setHeader] = (0, _react.useState)([]);
const [currentIndex, setCurrentIndex] = (0, _react.useState)(activeIndex ? activeIndex : 0);
(0, _react.useEffect)(() => {
//changing whether there is array of children or single children and convert to array
const tabsItems = children instanceof Array ? children : [children];
//for displaying the tab icon,labelor diabled we are mapping the tabItems
const tabs = tabsItems.map(el => {
var _el$props, _el$props2, _el$props3;
return {
label: el === null || el === void 0 || (_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.label,
icon: el === null || el === void 0 || (_el$props2 = el.props) === null || _el$props2 === void 0 ? void 0 : _el$props2.icon,
disabled: el === null || el === void 0 || (_el$props3 = el.props) === null || _el$props3 === void 0 ? void 0 : _el$props3.disabled
};
});
if (activeIndex > tabs.length - 1 || activeIndex < 0) throw new Error("Invalid range for value ".concat(activeIndex));
setHeader(tabs);
}, [children]);
const TabHandler = i => {
setCurrentIndex(i);
if (onTabChange) onTabChange(i);
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "tabContainer ".concat(containerClass ? containerClass : ""),
style: {
border: indicatorStyle === "simple" ? "1px solid #d7d7d7" : "none"
}
}, header === null || header === void 0 ? void 0 : header.map((el, i) => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
borderRight: i !== header.length - 1 && indicatorStyle === "simple" ? "1px solid #d7d7d7" : "none"
}
}, /*#__PURE__*/_react.default.createElement("button", {
id: "tab-".concat(i),
"data-testid": "tab-".concat(i),
key: i,
className: i === currentIndex && indicatorStyle === "simple" ? "TabButton tabActiveEffects ".concat(className ? className : "") : "TabButton tabEffects ".concat(className ? className : ""),
style: _objectSpread({
color: i === currentIndex && indicatorStyle === "simple" ? "white" : indicatorStyle === "bottomLine" ? "#1b3764" : "black",
borderTopLeftRadius: i === 0 ? "5px" : "0px",
borderTopRightRadius: i === header.length - 1 ? "5px" : "0px",
cursor: disabled ? "not-allowed" : "pointer",
opacity: disabled ? "0.2" : "1"
}, style),
onClick: () => {
if (!disabled) TabHandler(i);
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "tabItem",
style: {
flexDirection: iconPosition === "end" ? "row-reverse" : ""
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "tabIcon"
}, el === null || el === void 0 ? void 0 : el.icon), /*#__PURE__*/_react.default.createElement("div", null, el === null || el === void 0 ? void 0 : el.label))), i === currentIndex && indicatorStyle === "bottomLine" && showIndicator && /*#__PURE__*/_react.default.createElement("div", {
className: "tabIndicator"
}));
}));
};
exports.Tab = Tab;
Tab.propTypes = {
indicatorStyle: _propTypes.default.string,
onTabChange: _propTypes.default.func,
iconPosition: _propTypes.default.string,
disabled: _propTypes.default.bool
};