@redocly/theme
Version:
Shared UI components lib
72 lines (71 loc) • 3.33 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Segmented = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const typedMemo_1 = require("../../core/hoc/typedMemo");
function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
}
exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
const SegmentedGroup = styled_components_1.default.div `
display: flex;
background: var(--segmented-buttons-bg-color-main);
padding: calc(var(--spacing-xxs) / 2);
gap: calc(var(--spacing-xxs) / 2);
border-radius: var(--border-radius-md);
max-width: 100%;
width: fit-content;
`;
const SegmentedItem = styled_components_1.default.button `
${({ $size }) => $size === 'small' &&
(0, styled_components_1.css) `
--segmented-font-size: var(--font-size-sm);
--segmented-font-size-active: var(--font-size-sm);
--segmented-line-height: var(--line-height-sm);
`}
${({ $isActive }) => $isActive
? (0, styled_components_1.css) `
font-size: var(--segmented-font-size-active);
font-weight: var(--segmented-font-weight-active);
background: var(--segmented-buttons-bg-color-inner);
color: var(--segmented-text-color-active);
cursor: default;
`
: (0, styled_components_1.css) `
font-size: var(--segmented-font-size);
font-weight: var(--segmented-font-weight);
color: var(--segmented-text-color);
cursor: pointer;
`}
line-height: var(--segmented-line-height);
border-radius: var(--border-radius);
padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
`;
//# sourceMappingURL=Segmented.js.map