@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
62 lines • 2.95 kB
JavaScript
import React, { useRef, useState, useEffect } from "react";
export const SegmentControl = (props) => {
const index = props.segments.findIndex((seg) => seg.id === props.value);
// Initialize approximate segment width
const [segmentWidth, setSegmentWidth] = useState(480 / props.segments.length);
const containerRef = useRef(null);
if (index === -1) {
throw new Error(`Unknown SegmentControl id ${props.value} for segments ${JSON.stringify(props.segments)}`);
}
// Update segment width when container is fully rendered
useEffect(() => {
if (containerRef.current?.clientWidth)
setSegmentWidth(containerRef.current.clientWidth / props.segments.length);
}, [containerRef.current]);
return (React.createElement("div", { style: {
fontFamily: "sans-serif",
background: "rgba(229, 231, 235, 1)",
display: "flex",
flexBasis: "content",
borderRadius: "0.375rem",
position: "relative",
border: "2px solid black",
borderColor: "rgba(229, 231, 235, 1)",
}, ref: containerRef },
React.createElement("span", { style: {
transitionProperty: "all",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
transitionDuration: "75ms",
insetInlineStart: `${segmentWidth * index}px`,
width: `${segmentWidth - 4}px`,
fontSize: "0.875rem",
lineHeight: "1.25rem",
borderRadius: "0.25rem",
padding: "0.125rem",
backgroundColor: "white",
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
position: "absolute",
}, "aria-hidden": "true" }, "\u00A0"),
props.segments.map((segment) => (React.createElement("button", { onClick: () => {
if (props.onClick) {
props.onClick(segment.id);
}
}, key: segment.id, style: {
color: "rgba(31, 41, 55, 1)",
userSelect: "none",
fontSize: "0.875rem",
lineHeight: "1.25rem",
flex: "1 1 auto",
textAlign: "center",
width: `${segmentWidth}px`,
cursor: "pointer",
borderRadius: "0.375rem",
padding: "0.125rem",
background: "transparent",
border: "none",
zIndex: 10,
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
}, className: "text-gray-800 select-none text-sm flex-1 text-center cursor-pointer rounded-md p-0.5 z-10", "aria-pressed": props.value === segment.id, "aria-label": `Open ${segment.label} Tab` }, segment.label)))));
};
//# sourceMappingURL=SegmentControl.js.map