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