Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 0e238b7

Browse files
RafaelGBRafaelGB
committed
onclick away
1 parent 51f386a commit 0e238b7

File tree

1 file changed

+124
-121
lines changed

1 file changed

+124
-121
lines changed

‎src/components/HeaderMenu.tsx‎

Lines changed: 124 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TableColumn } from "cdm/FolderModel";
1111
import { HeaderActionResponse } from "cdm/HeaderActionModel";
1212
import { HeaderMenuProps } from "cdm/HeaderModel";
1313
import Box from "@mui/material/Box";
14+
import ClickAwayListener from "@mui/material/ClickAwayListener";
1415

1516
const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
1617
const { table, column } = headerMenuProps.headerProps;
@@ -105,140 +106,142 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
105106

106107
return (
107108
<Popper id={idMenu} open={openMenu} anchorEl={menuEl} key={idMenu}>
108-
<Box>
109-
<div className={`menu ${c("popper")}`}>
110-
{/** Edit header label section */}
111-
{!isMetadata && (
112-
<>
113-
<div
114-
style={{
115-
paddingTop: "0.75rem",
116-
paddingLeft: "0.75rem",
117-
paddingRight: "0.75rem",
118-
}}
119-
>
120-
<div className="is-fullwidth" style={{ marginBottom: 12 }}>
121-
<input
122-
className={
123-
labelStateInvalid
124-
? `${c("invalid-form")}`
125-
: `${c("form-input")}`
126-
}
127-
ref={setInputRef}
128-
type="text"
129-
value={labelState}
130-
style={{ width: "100%" }}
131-
onChange={handleChange}
132-
onBlur={handleBlur}
133-
onMouseLeave={handleOnMouseLeaveLabel}
134-
onKeyDown={handleKeyDown}
135-
/>
136-
</div>
137-
138-
<span
139-
className="font-weight-600 font-size-75"
140-
style={{
141-
textTransform: "uppercase",
142-
color: StyleVariables.TEXT_FAINT,
143-
}}
144-
>
145-
Property Type
146-
</span>
147-
</div>
148-
{/** Type of column section */}
149-
<div style={{ padding: "4px 0px" }}>
109+
<ClickAwayListener onClickAway={() => setMenuEl(null)}>
110+
<Box>
111+
<div className={`menu ${c("popper")}`}>
112+
{/** Edit header label section */}
113+
{!isMetadata && (
114+
<>
150115
<div
151-
className="menu-item sort-button"
152-
onMouseOver={async (event) => {
153-
setTypesEl(event.currentTarget);
154-
}}
155-
onMouseLeave={() => {
156-
const timeoutId = setTimeout(() => {
157-
setTypesEl(null);
158-
setTypesTimeout(null);
159-
// timeout until event is triggered after user has stopped typing
160-
}, 250);
161-
setTypesTimeout(timeoutId);
116+
style={{
117+
paddingTop: "0.75rem",
118+
paddingLeft: "0.75rem",
119+
paddingRight: "0.75rem",
162120
}}
163121
>
164-
<span className="svg-icon svg-text icon-margin">
165-
{propertyIcon}
166-
</span>
167-
<span style={{ textTransform: "capitalize" }}>
168-
{getLabelHeader(input)}
122+
<div className="is-fullwidth" style={{ marginBottom: 12 }}>
123+
<input
124+
className={
125+
labelStateInvalid
126+
? `${c("invalid-form")}`
127+
: `${c("form-input")}`
128+
}
129+
ref={setInputRef}
130+
type="text"
131+
value={labelState}
132+
style={{ width: "100%" }}
133+
onChange={handleChange}
134+
onBlur={handleBlur}
135+
onMouseLeave={handleOnMouseLeaveLabel}
136+
onKeyDown={handleKeyDown}
137+
/>
138+
</div>
139+
140+
<span
141+
className="font-weight-600 font-size-75"
142+
style={{
143+
textTransform: "uppercase",
144+
color: StyleVariables.TEXT_FAINT,
145+
}}
146+
>
147+
Property Type
169148
</span>
170149
</div>
171-
<Popper
172-
id={idTypes}
173-
open={isTypesShown}
174-
anchorEl={typesEl}
175-
placement="right"
176-
disablePortal={false}
177-
key={idTypes}
178-
modifiers={PopperTypesStyleModifiers()}
179-
onMouseOver={() => {
180-
if (typesTimeout) {
181-
clearTimeout(typesTimeout);
182-
setTypesTimeout(null);
183-
}
184-
}}
185-
onMouseLeave={async () => {
186-
setTypesEl(null);
187-
}}
188-
>
189-
<Box className={`menu ${c("popper")}`}>
190-
{/** Childs of typesButtons */}
191-
{typesButtons}
192-
</Box>
193-
</Popper>
194-
</div>
195-
</>
196-
)}
197-
{/** Action buttons section */}
198-
<div
199-
style={{
200-
borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
201-
padding: "4px 0px",
202-
}}
203-
>
204-
{headerButtons}
205-
</div>
206-
{(!isMetadata || input === InputType.TASK) && (
150+
{/** Type of column section */}
151+
<div style={{ padding: "4px 0px" }}>
152+
<div
153+
className="menu-item sort-button"
154+
onMouseOver={async (event) => {
155+
setTypesEl(event.currentTarget);
156+
}}
157+
onMouseLeave={() => {
158+
const timeoutId = setTimeout(() => {
159+
setTypesEl(null);
160+
setTypesTimeout(null);
161+
// timeout until event is triggered after user has stopped typing
162+
}, 250);
163+
setTypesTimeout(timeoutId);
164+
}}
165+
>
166+
<span className="svg-icon svg-text icon-margin">
167+
{propertyIcon}
168+
</span>
169+
<span style={{ textTransform: "capitalize" }}>
170+
{getLabelHeader(input)}
171+
</span>
172+
</div>
173+
<Popper
174+
id={idTypes}
175+
open={isTypesShown}
176+
anchorEl={typesEl}
177+
placement="right"
178+
disablePortal={false}
179+
key={idTypes}
180+
modifiers={PopperTypesStyleModifiers()}
181+
onMouseOver={() => {
182+
if (typesTimeout) {
183+
clearTimeout(typesTimeout);
184+
setTypesTimeout(null);
185+
}
186+
}}
187+
onMouseLeave={async () => {
188+
setTypesEl(null);
189+
}}
190+
>
191+
<Box className={`menu ${c("popper")}`}>
192+
{/** Childs of typesButtons */}
193+
{typesButtons}
194+
</Box>
195+
</Popper>
196+
</div>
197+
</>
198+
)}
199+
{/** Action buttons section */}
207200
<div
208201
style={{
209202
borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
210203
padding: "4px 0px",
211204
}}
212205
>
213-
{/** Column settings section */}
214-
215-
<div style={{ padding: "4px 0px" }}>
216-
<div
217-
className="menu-item sort-button"
218-
onClick={() => {
219-
new ColumnSettingsModal({
220-
dataState: { actions: dataActions },
221-
columnState: {
222-
info: columnsInfo,
223-
actions: columnActions,
224-
},
225-
configState: { info: configInfo },
226-
view: table.options.meta.view,
227-
headerMenuProps: headerMenuProps,
228-
}).open();
229-
setMenuEl(null);
230-
}}
231-
>
232-
<span className="svg-icon svg-text icon-margin">
233-
<AdjustmentsIcon />
234-
</span>
235-
<span>Settings</span>
206+
{headerButtons}
207+
</div>
208+
{(!isMetadata || input === InputType.TASK) && (
209+
<div
210+
style={{
211+
borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
212+
padding: "4px 0px",
213+
}}
214+
>
215+
{/** Column settings section */}
216+
217+
<div style={{ padding: "4px 0px" }}>
218+
<div
219+
className="menu-item sort-button"
220+
onClick={() => {
221+
new ColumnSettingsModal({
222+
dataState: { actions: dataActions },
223+
columnState: {
224+
info: columnsInfo,
225+
actions: columnActions,
226+
},
227+
configState: { info: configInfo },
228+
view: table.options.meta.view,
229+
headerMenuProps: headerMenuProps,
230+
}).open();
231+
setMenuEl(null);
232+
}}
233+
>
234+
<span className="svg-icon svg-text icon-margin">
235+
<AdjustmentsIcon />
236+
</span>
237+
<span>Settings</span>
238+
</div>
236239
</div>
237240
</div>
238-
</div>
239-
)}
240-
</div>
241-
</Box>
241+
)}
242+
</div>
243+
</Box>
244+
</ClickAwayListener>
242245
</Popper>
243246
);
244247
};

0 commit comments

Comments
 (0)