@activecollab/components
Version:
ActiveCollab Components
155 lines (152 loc) • 6.21 kB
JavaScript
import React, { useCallback, useState } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { GRID_LEVELS, gridLevel } from "./elements";
import { CompleteCheckbox } from "../../components/CompleteCheckbox";
import { IconButton } from "../../components/IconButton";
import { ArrowLeftIcon, CaretRightIcon, CheckIcon, SettingsIcon } from "../../components/Icons";
import { List, ListItem } from "../../components/List";
import { Menu, MenuHeader } from "../../components/Menu";
import { ResizeTransition, SlideLeftRightTransition } from "../../components/Transitions";
import { Caption1 } from "../../components/Typography";
/* ------------------------------------------------------------------ */
/* Board Settings menu — Grid granularity + Snap to Grid */
/* ------------------------------------------------------------------ */
export const BOARD_MENU_WIDTH = 264;
/* The menu drills in place (index → Grid), so the paper clips the sliding
panels and gives them a positioning context (mirrors the project "..." menu). */
export const BoardMenuSliderStyle = createGlobalStyle([".c-simple-menu__paper.board-settings-menu{overflow:hidden;position:relative;}"]);
export const StyledBoardSettingsMenu = styled.div.withConfig({
displayName: "settingsMenu__StyledBoardSettingsMenu",
componentId: "sc-8wy9x6-0"
})([".toggle-item{justify-content:space-between;}.toggle-item .opt-left{display:flex;align-items:center;min-width:0;}.toggle-item .grid-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}.toggle-item .grid-caret{flex-shrink:0;fill:var(--color-theme-600);}.toggle-item .c-complete-checkbox{width:16px;height:16px;border-radius:3px;align-self:center;flex-shrink:0;}.snap-off{opacity:0.5;}.option-item{justify-content:space-between;}.option-item .grid-check{flex-shrink:0;fill:var(--color-primary);}"]);
export const BoardSettingsMenu = _ref => {
let gridSize = _ref.gridSize,
snapToGrid = _ref.snapToGrid,
onGridSizeChange = _ref.onGridSizeChange,
onSnapToGridChange = _ref.onSnapToGridChange;
const _useState = useState(false),
open = _useState[0],
setOpen = _useState[1];
const _useState2 = useState("index"),
view = _useState2[0],
setView = _useState2[1];
const _useState3 = useState(true),
isLeft = _useState3[0],
setIsLeft = _useState3[1];
const _useState4 = useState(0),
height = _useState4[0],
setHeight = _useState4[1];
const measure = useCallback(node => {
if (node) {
setHeight(node.offsetHeight);
}
}, []);
const goToGrid = () => {
setView("grid");
setIsLeft(true);
};
const backToIndex = () => {
setView("index");
setIsLeft(false);
};
const handleClose = () => {
setOpen(false);
setView("index");
setIsLeft(true);
};
const snapDisabled = gridSize === "off";
const indexView = /*#__PURE__*/React.createElement(StyledBoardSettingsMenu, null, /*#__PURE__*/React.createElement(List, {
style: {
padding: "8px 0"
},
tabIndex: -1
}, /*#__PURE__*/React.createElement(ListItem, {
className: "toggle-item",
onClick: goToGrid
}, /*#__PURE__*/React.createElement("span", {
className: "opt-left"
}, "Grid"), /*#__PURE__*/React.createElement("span", {
className: "grid-right"
}, /*#__PURE__*/React.createElement(Caption1, {
color: "secondary"
}, gridLevel(gridSize).label), /*#__PURE__*/React.createElement(CaretRightIcon, {
className: "grid-caret",
width: 16,
height: 16
}))), /*#__PURE__*/React.createElement(ListItem, {
className: snapDisabled ? "toggle-item snap-off" : "toggle-item",
onClick: snapDisabled ? undefined : () => onSnapToGridChange(!snapToGrid)
}, /*#__PURE__*/React.createElement("span", {
className: "opt-left"
}, "Snap to Grid"), /*#__PURE__*/React.createElement(CompleteCheckbox, {
primary: true,
completed: snapToGrid,
disabled: snapDisabled
}))));
const gridView = /*#__PURE__*/React.createElement(StyledBoardSettingsMenu, null, /*#__PURE__*/React.createElement(MenuHeader, {
title: "Grid",
leftElement: /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray",
size: "small",
onClick: backToIndex,
"aria-label": "Back"
}, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))
}), /*#__PURE__*/React.createElement(List, {
style: {
padding: "8px 0"
},
tabIndex: -1
}, GRID_LEVELS.map(level => /*#__PURE__*/React.createElement(ListItem, {
key: level.value,
className: "option-item",
onClick: () => {
onGridSizeChange(level.value);
backToIndex();
}
}, /*#__PURE__*/React.createElement("span", null, level.label), level.value === gridSize ? /*#__PURE__*/React.createElement(CheckIcon, {
className: "grid-check",
width: 16,
height: 16
}) : null))));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BoardMenuSliderStyle, null), /*#__PURE__*/React.createElement(Menu, {
open: open,
onOpen: () => setOpen(true),
onClose: handleClose,
position: "bottom-end",
menuClassName: "board-settings-menu",
target: /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray",
active: open
}, /*#__PURE__*/React.createElement(SettingsIcon, null))
}, /*#__PURE__*/React.createElement(ResizeTransition, {
in: true,
style: {
height,
width: BOARD_MENU_WIDTH
}
}, /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
overflow: "hidden"
}
}, /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
in: view === "index",
direction: isLeft ? "left" : "right"
}, /*#__PURE__*/React.createElement("div", {
ref: measure,
style: {
width: BOARD_MENU_WIDTH
}
}, indexView)), /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
in: view === "grid",
direction: isLeft ? "left" : "right"
}, /*#__PURE__*/React.createElement("div", {
ref: measure,
style: {
width: BOARD_MENU_WIDTH
}
}, gridView))))));
};
//# sourceMappingURL=settingsMenu.js.map