flex-wrap-layout
Version:
Experiments with flexbox layout
36 lines (35 loc) • 2.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useDetectWrappedElements } from './useDetectWrappedElements';
const panel = {
display: 'inline-block',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: '2px',
padding: '0 5px'
};
export function useDevTools({ showBordersInit, detectWrappedElementsInit, flexFillInit }) {
const [showBorders, setShowBorders] = useState(showBordersInit);
const [detectWrappedElements, setDetectWrappedElements] = useState(detectWrappedElementsInit);
const [flexFill, setFlexFill] = useState(flexFillInit);
const showBordersClassName = showBorders ? 'show-borders' : '';
const flexFillClassName = flexFill ? 'flex-fill' : '';
return {
showBordersClassName,
showBorders,
setShowBorders,
detectWrappedElements,
setDetectWrappedElements,
flexFillClassName,
flexFill,
setFlexFill
};
}
function DetectWrappedElements({ detectWrappedElementsRef }) {
useDetectWrappedElements(detectWrappedElementsRef);
return null;
}
export function DevTools(props) {
const { detectWrappedElementsRef, context, ...otherProps } = props;
const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
return (_jsxs("div", { style: { ...panel }, ...otherProps, children: [detectWrappedElements && (_jsx(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })), _jsxs("label", { title: "Dotted line: growing block, solid line: fixed block", children: [_jsx("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }), ' ', "Borders"] }), ' ', _jsxs("label", { title: "Make previous and next blocks grow", children: [_jsx("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }), ' ', "detectWrappedElements()"] }), ' ', _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }), ' ', ".flex-fill"] })] }));
}