@coko/client
Version:
Client side common code for coko apps
65 lines (56 loc) • 3.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _antd = require("antd");
var _toolkit = require("../../toolkit");
var _templateObject;
/* stylelint-disable string-quotes */
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// const TabsWrapper = styled.div`
// height: 100%;
// `
var TabsStyled = (0, _styledComponents["default"])(_antd.Tabs)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-tabs-nav {\n background-color: ", ";\n margin: 0;\n padding: 0 ", ";\n }\n\n .ant-tabs-nav-list {\n .ant-tabs-tab {\n background: ", ";\n font-weight: 700;\n margin: 0;\n padding: ", ";\n text-transform: uppercase;\n\n &:hover {\n color: inherit;\n }\n\n &.ant-tabs-tab-active {\n background-color: ", ";\n }\n\n [role='tab'] {\n color: inherit;\n padding: ", " ", ";\n transition: none;\n\n &:focus {\n color: ", ";\n outline: 2px solid ", ";\n }\n }\n }\n\n .ant-tabs-ink-bar {\n display: none;\n }\n }\n"])), (0, _toolkit.th)('colorBackgroundHue'), (0, _toolkit.grid)(3), (0, _toolkit.th)('colorBackgroundHue'), (0, _toolkit.grid)(0.5), (0, _toolkit.th)('colorBackground'), (0, _toolkit.grid)(3), (0, _toolkit.grid)(4), (0, _toolkit.th)('colorPrimary'), (0, _toolkit.th)('colorPrimary'));
var Tabs = function Tabs(props) {
// const { className, ...rest } = props
// const ref = useRef()
// const handleKeyDown = (e, index) => {
// const { key } = e
// const isArrowLeft = key === 'ArrowLeft'
// const isArrowRight = key === 'ArrowRight'
// const isArrowKey = isArrowLeft || isArrowRight
// if (isArrowKey) {
// e.preventDefault()
// }
// if (isArrowKey) {
// const listItems = ref.current.querySelectorAll('[role="tab"]')
// const newIndex = isArrowRight
// ? (index + 1) % listItems.length
// : (index + listItems.length - 1) % listItems.length
// listItems[newIndex].focus()
// }
// }
// useEffect(() => {
// // remove role="tablist" from outer wrapper and apply it to inner wrapper
// // purpose: to not have illegal elements (role != tab) inside tablist
// ref.current.querySelector('[role="tablist"')?.removeAttribute('role')
// ref.current
// .querySelector('.ant-tabs-nav-list')
// ?.setAttribute('role', 'tablist')
// // https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction
// // implement proper keyboard interaction
// ref.current
// .querySelectorAll('[role=tab][aria-selected=false]')
// ?.forEach(innactiveTab => innactiveTab.setAttribute('tabIndex', '-1'))
// ref.current.querySelectorAll('[role=tab]')?.forEach((tab, index) => {
// tab.addEventListener('keydown', e => handleKeyDown(e, index))
// })
// }, [])
return /*#__PURE__*/_react["default"].createElement(TabsStyled, props);
};
var _default = Tabs;
exports["default"] = _default;