axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved Responsiveness controllers - "remember" latest state of selected breakpoint.

Browse Source
This commit is contained in:
Roman Axelrod
2022-08-28 11:06:24 +03:00
parent 7b7a8c101f
commit ae68a88fd1
3 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scripts/dist/index.min.js
Vendored
+10 -17
View File
@@ -11180,16 +11180,12 @@ function ResponsiveButton({
active,
onSelect
}) {
// active = true;
const [state, setState] = react.exports.useState({
open: true,
breakpoint: defaultResponsiveOptions[mode]
activeBreakpoint: defaultResponsiveOptions[mode]
});
const updateState = update => {
// update.open = true;
setState(Object.assign({}, state, update));
};
const updateState = update => setState(Object.assign({}, state, update));
react.exports.useEffect(() => {
const closeDropdown = e => isEscHit(e) ? updateState({
@@ -11206,11 +11202,10 @@ function ResponsiveButton({
};
}); // Blur event / Outside click
const outsideClickAction = async e => (await isClickOutside(e)) ? updateState({
const handleBlur = async e => (await isClickOutside(e)) ? updateState({
open: false
}) : null;
const handleBlur = react.exports.useCallback(outsideClickAction, []);
return /*#__PURE__*/React.createElement(ResponsiveButtonStyle, {
tabIndex: "0",
onBlur: handleBlur
@@ -11220,27 +11215,27 @@ function ResponsiveButton({
onClick: () => select()
}, mode), active && state.open && responsiveOptions[mode] && /*#__PURE__*/React.createElement(ResponsiveOptionsDropdown, null, responsiveOptions[mode].map(breakpoint => {
return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
className: state.breakpoint === breakpoint ? 'active' : '',
className: state.activeBreakpoint === breakpoint ? 'active' : '',
onClick: () => select(breakpoint)
}, breakpoint));
}))); //
// Actions
//
function select(breakpoint = null) {
function select(activeBreakpoint = null) {
// Click on option in Dropdown.
if (breakpoint) {
if (activeBreakpoint) {
updateState({
open: false,
breakpoint
activeBreakpoint
});
onSelect(breakpoint);
onSelect(activeBreakpoint);
return;
} // Click on device button.
if (!active) {
onSelect(state.breakpoint);
onSelect(state.activeBreakpoint);
updateState({
open: false
});
@@ -11254,9 +11249,7 @@ function ResponsiveButton({
async function isClickOutside(e) {
const currentTarget = e.currentTarget;
return new Promise(resolve => {
setTimeout(() => {
resolve(!currentTarget.contains(document.activeElement));
}, 100);
setTimeout(() => resolve(!currentTarget.contains(document.activeElement)));
});
}
function isEscHit(event) {
layouts/scripts/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/toolbar/responsive-button/ResponsiveButton.jsx
+11 -18
View File
@@ -1,4 +1,4 @@
import React, {useCallback, useEffect, useState} from "react";
import React, {useEffect, useState} from "react";
import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from "./responsive-button.style.js";
const responsiveOptions = {
@@ -15,12 +15,8 @@ const defaultResponsiveOptions = {
}
export function ResponsiveButton({mode, active, onSelect}) {
// active = true;
const [state, setState] = useState({open: true, breakpoint: defaultResponsiveOptions[mode]});
const updateState = (update) => {
// update.open = true;
setState(Object.assign({}, state, update));
}
const [state, setState] = useState({open: true, activeBreakpoint: defaultResponsiveOptions[mode]});
const updateState = (update) => setState(Object.assign({}, state, update));
useEffect(() => {
const closeDropdown = (e) => isEscHit(e) ? updateState({open: false}) : null;
@@ -36,8 +32,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
});
// Blur event / Outside click
const outsideClickAction = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
const handleBlur = useCallback(outsideClickAction, []);
const handleBlur = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
return <ResponsiveButtonStyle tabIndex='0' onBlur={handleBlur}>
<ButtonStyling data-mode={mode} data-active={active} onClick={() => select()}>{mode}</ButtonStyling>
@@ -45,7 +40,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
<ResponsiveOptionsDropdown>
{responsiveOptions[mode].map((breakpoint) => {
return <li>
<a className={state.breakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
<a className={state.activeBreakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
</li>;
})}
</ResponsiveOptionsDropdown>
@@ -56,17 +51,17 @@ export function ResponsiveButton({mode, active, onSelect}) {
// Actions
//
function select(breakpoint = null) {
function select(activeBreakpoint = null) {
// Click on option in Dropdown.
if (breakpoint) {
updateState({open: false, breakpoint});
onSelect(breakpoint);
if (activeBreakpoint) {
updateState({open: false, activeBreakpoint});
onSelect(activeBreakpoint);
return;
}
// Click on device button.
if (!active) {
onSelect(state.breakpoint)
onSelect(state.activeBreakpoint)
updateState({open: false});
} else {
updateState({open: true});
@@ -82,9 +77,7 @@ export async function isClickOutside(e) {
const currentTarget = e.currentTarget;
return new Promise(resolve => {
setTimeout(() => {
resolve(!currentTarget.contains(document.activeElement));
}, 100);
setTimeout(() => resolve(!currentTarget.contains(document.activeElement)));
})
}