jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
329 lines (274 loc) • 12 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../../prop-types/index.js');
var warning = require('../../../warning/warning.js');
var index$2 = require('../../utils/es/index.js');
var index$4 = require('../../auto-id/es/index.js');
function _extends() { _extends = Object.assign || 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 _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; }
// Tabs
var Tabs = React.forwardRef(function Tabs(_ref, ref) {
var children = _ref.children,
_ref$as = _ref.as,
Comp = _ref$as === void 0 ? "div" : _ref$as,
onChange = _ref.onChange,
_ref$index = _ref.index,
controlledIndex = _ref$index === void 0 ? undefined : _ref$index,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
defaultIndex = _ref.defaultIndex,
props = _objectWithoutPropertiesLoose(_ref, ["children", "as", "onChange", "index", "readOnly", "defaultIndex"]);
// useRef because you shouldn't switch between controlled/uncontrolled
var _useRef = React.useRef(controlledIndex != null),
isControlled = _useRef.current;
process.env.NODE_ENV !== "production" ? warning.default(!(isControlled && controlledIndex == null), "Tabs is changing from controlled to uncontrolled. Tabs should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Tabs for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
process.env.NODE_ENV !== "production" ? warning.default(!(!isControlled && controlledIndex != null), "Tabs is changing from uncontrolled to controlled. Tabs should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Tabs for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
var id = index$4.useId(props.id); // we only manage focus if the user caused the update vs.
// a new controlled index coming in
var _userInteractedRef = React.useRef(false);
var _selectedPanelRef = React.useRef(null);
var _useState = React.useState(defaultIndex || 0),
selectedIndex = _useState[0],
setSelectedIndex = _useState[1];
var clones = React__default.Children.map(children, function (child) {
if (elementIsNullOrString(child)) return child;
return React.cloneElement(child, {
selectedIndex: isControlled ? controlledIndex : selectedIndex,
_id: id,
_userInteractedRef: _userInteractedRef,
_selectedPanelRef: _selectedPanelRef,
_onFocusPanel: function _onFocusPanel() {
return _selectedPanelRef.current && _selectedPanelRef.current.focus();
},
_onSelectTab: readOnly ? function () {} : function (index) {
_userInteractedRef.current = true;
onChange && onChange(index);
if (!isControlled) {
setSelectedIndex(index);
}
}
});
});
React.useEffect(function () {
return index$2.checkStyles("tabs");
}, []);
return React__default.createElement(Comp, _extends({
"data-reach-tabs": "",
ref: ref
}, props, {
children: clones
}));
});
Tabs.displayName = "Tabs";
if (process.env.NODE_ENV !== "production") {
Tabs.propTypes = {
children: index.default.node.isRequired,
onChange: index.default.func,
index: function index$1(props, name, compName) {
if (props.index > -1 && props.onChange == null && props.readOnly !== true) {
return new Error("You provided a `value` prop to `Tabs` without an `onChange` handler. This will render a read-only tabs element. If the tabs should be mutable use `defaultIndex`. Otherwise, set `onChange`.");
} else {
for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
rest[_key - 3] = arguments[_key];
}
return index.default.number.apply(index.default, [name, props, compName].concat(rest));
}
},
defaultIndex: index.default.number
};
} ////////////////////////////////////////////////////////////////////////////////
// TabList
var TabList = React.forwardRef(function TabList(_ref2, ref) {
var children = _ref2.children,
_ref2$as = _ref2.as,
Comp = _ref2$as === void 0 ? "div" : _ref2$as,
onKeyDown = _ref2.onKeyDown,
clonedProps = _objectWithoutPropertiesLoose(_ref2, ["children", "as", "onKeyDown"]);
var selectedIndex = clonedProps.selectedIndex,
_onSelectTab = clonedProps._onSelectTab,
_userInteractedRef = clonedProps._userInteractedRef,
_onFocusPanel = clonedProps._onFocusPanel,
_selectedPanelRef = clonedProps._selectedPanelRef,
_id = clonedProps._id,
htmlProps = _objectWithoutPropertiesLoose(clonedProps, ["selectedIndex", "_onSelectTab", "_userInteractedRef", "_onFocusPanel", "_selectedPanelRef", "_id"]);
var clones = React__default.Children.map(children, function (child, index) {
if (elementIsNullOrString(child)) return child;
return React.cloneElement(child, {
isSelected: index === selectedIndex,
_id: index$2.makeId(_id, index),
_userInteractedRef: _userInteractedRef,
_onSelect: function _onSelect() {
return _onSelectTab(index);
}
});
});
var handleKeyDown = index$2.wrapEvent(onKeyDown, function (event) {
var enabledIndexes = React__default.Children.map(children, function (child, index) {
return child.props.disabled === true ? null : index;
}).filter(function (index) {
return index != null;
}); // looks something like: [0, 2, 3, 5]
var enabledSelectedIndex = enabledIndexes.indexOf(selectedIndex);
switch (event.key) {
case "ArrowRight":
{
var nextEnabledIndex = (enabledSelectedIndex + 1) % enabledIndexes.length;
var nextIndex = enabledIndexes[nextEnabledIndex];
_onSelectTab(nextIndex);
break;
}
case "ArrowLeft":
{
var count = enabledIndexes.length;
var _nextEnabledIndex = (enabledSelectedIndex - 1 + count) % count;
var _nextIndex = enabledIndexes[_nextEnabledIndex];
_onSelectTab(_nextIndex);
break;
}
case "ArrowDown":
{
// don't scroll down
event.preventDefault();
_onFocusPanel();
break;
}
case "Home":
{
_onSelectTab(0);
break;
}
case "End":
{
_onSelectTab(React__default.Children.count(children) - 1);
break;
}
}
});
return React__default.createElement(Comp, _extends({
"data-reach-tab-list": "",
ref: ref,
role: "tablist",
onKeyDown: handleKeyDown,
children: clones
}, htmlProps));
});
TabList.displayName = "TabList";
if (process.env.NODE_ENV !== "production") {
TabList.propTypes = {
children: index.default.node
};
} ////////////////////////////////////////////////////////////////////////////////
// Tab
var Tab = React.forwardRef(function Tab(_ref3, forwardedRef) {
var children = _ref3.children,
_ref3$as = _ref3.as,
Comp = _ref3$as === void 0 ? "button" : _ref3$as,
rest = _objectWithoutPropertiesLoose(_ref3, ["children", "as"]);
var isSelected = rest.isSelected,
_userInteractedRef = rest._userInteractedRef,
_onSelect = rest._onSelect,
_id = rest._id,
htmlProps = _objectWithoutPropertiesLoose(rest, ["isSelected", "_userInteractedRef", "_onSelect", "_id"]);
var htmlType = Comp === "button" && htmlProps.type == null ? "button" : undefined;
var ownRef = React.useRef(null);
var ref = index$2.useForkedRef(forwardedRef, ownRef);
index$2.useUpdateEffect(function () {
if (isSelected && ownRef.current && _userInteractedRef.current) {
_userInteractedRef.current = false;
ownRef.current.focus();
}
}, [isSelected]);
return React__default.createElement(Comp, _extends({
"data-reach-tab": "",
ref: ref,
role: "tab",
id: index$2.makeId("tab", _id),
tabIndex: isSelected ? 0 : -1,
"aria-selected": isSelected,
"aria-controls": index$2.makeId("panel", _id),
"data-selected": isSelected ? "" : undefined,
onClick: _onSelect,
children: children,
type: htmlType
}, htmlProps));
});
Tab.displayName = "Tab";
if (process.env.NODE_ENV !== "production") {
Tab.propTypes = {
children: index.default.node
};
} ////////////////////////////////////////////////////////////////////////////////
// TabPanels
var TabPanels = React.forwardRef(function TabPanels(_ref4, forwardedRef) {
var children = _ref4.children,
_ref4$as = _ref4.as,
Comp = _ref4$as === void 0 ? "div" : _ref4$as,
rest = _objectWithoutPropertiesLoose(_ref4, ["children", "as"]);
var selectedIndex = rest.selectedIndex,
_selectedPanelRef = rest._selectedPanelRef,
_userInteractedRef = rest._userInteractedRef,
_onFocusPanel = rest._onFocusPanel,
_onSelectTab = rest._onSelectTab,
_id = rest._id,
htmlAttrs = _objectWithoutPropertiesLoose(rest, ["selectedIndex", "_selectedPanelRef", "_userInteractedRef", "_onFocusPanel", "_onSelectTab", "_id"]);
var clones = React__default.Children.map(children, function (child, index) {
if (elementIsNullOrString(child)) return child;
return React.cloneElement(child, {
isSelected: index === selectedIndex,
_selectedPanelRef: _selectedPanelRef,
_id: index$2.makeId(_id, index)
});
});
return React__default.createElement(Comp, _extends({
"data-reach-tab-panels": "",
ref: forwardedRef
}, htmlAttrs, {
children: clones
}));
});
TabPanels.displayName = "TabPanels";
if (process.env.NODE_ENV !== "production") {
TabPanels.propTypes = {
children: index.default.node
};
} ////////////////////////////////////////////////////////////////////////////////
// TabPanel
var TabPanel = React.forwardRef(function TabPanel(_ref5, forwardedRef) {
var children = _ref5.children,
_ref5$as = _ref5.as,
Comp = _ref5$as === void 0 ? "div" : _ref5$as,
rest = _objectWithoutPropertiesLoose(_ref5, ["children", "as"]);
var isSelected = rest.isSelected,
_selectedPanelRef = rest._selectedPanelRef,
_id = rest._id,
htmlProps = _objectWithoutPropertiesLoose(rest, ["isSelected", "_selectedPanelRef", "_id"]);
var ref = index$2.useForkedRef(forwardedRef, isSelected ? _selectedPanelRef : null);
return React__default.createElement(Comp, _extends({
"data-reach-tab-panel": "",
ref: ref,
role: "tabpanel",
tabIndex: -1,
"aria-labelledby": index$2.makeId("tab", _id),
hidden: !isSelected,
id: index$2.makeId("panel", _id),
children: children
}, htmlProps));
});
TabPanel.displayName = "TabPanel";
if (process.env.NODE_ENV !== "production") {
TabPanel.propTypes = {
children: index.default.node
};
} ////////////////////////////////////////////////////////////////////////////////
// Check children before cloning to ignore strings or null values
function elementIsNullOrString(child) {
return !child || typeof child.type === "string";
}
exports.Tab = Tab;
exports.TabList = TabList;
exports.TabPanel = TabPanel;
exports.TabPanels = TabPanels;
exports.Tabs = Tabs;