Skip to content

Regression: UIKit update modal actions #16570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sampaiodiego merged 13 commits into from
Feb 13, 2020
Merged

Regression: UIKit update modal actions #16570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
320f163
update modal actions on modal.update
ggazzo Feb 11, 2020
568e704
update app-engine version
ggazzo Feb 12, 2020
d737705
fix stopImmediatePropagation
ggazzo Feb 12, 2020
d22e160
focus on the first error
ggazzo Feb 12, 2020
dac7613
test
ggazzo Feb 12, 2020
5bb477e
asdkasdkaso
ggazzo Feb 12, 2020
1a8a90d
BEGA
ggazzo Feb 12, 2020
df7b981
fix lgtm
ggazzo Feb 12, 2020
58043b6
test
ggazzo Feb 12, 2020
7a8e2a0
Rename function
sampaiodiego Feb 12, 2020
03d8584
Fix package-lock
sampaiodiego Feb 12, 2020
5ce81ad
Merge branch 'develop' into regression/update-modal
sampaiodiego Feb 12, 2020
61b91f2
fulelage 0.2.0
ggazzo Feb 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 31 additions & 12 deletions app/ui-message/client/blocks/MessageBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { useReactiveValue } from '../../../../client/hooks/useReactiveValue';

const focusableElementsString = 'a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable]';

const focusableElementsStringInvalid = 'a[href]:not([tabindex="-1"]):invalid, area[href]:not([tabindex="-1"]):invalid, input:not([disabled]):not([tabindex="-1"]):invalid, select:not([disabled]):not([tabindex="-1"]):invalid, textarea:not([disabled]):not([tabindex="-1"]):invalid, button:not([disabled]):not([tabindex="-1"]):invalid, iframe:invalid, object:invalid, embed:invalid, [tabindex]:not([tabindex="-1"]):invalid, [contenteditable]:invalid';

messageParser.text = ({ text, type } = {}) => {
if (type !== 'mrkdwn') {
return text;
Expand Down Expand Up @@ -48,11 +50,6 @@ const textParser = uiKitText(new class {
// https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

export const modalBlockWithContext = ({
view: {
title,
close,
submit,
},
onSubmit,
onClose,
onCancel,
Expand All @@ -65,8 +62,20 @@ export const modalBlockWithContext = ({
const ref = useRef();

// Auto focus
useEffect(() => ref.current && ref.current.querySelector(focusableElementsString).focus(), [ref.current]);
// save fovus to restore after close
useEffect(() => {
if (!ref.current) {
return;
}

if (data.errors && Object.keys(data.errors).length) {
const element = ref.current.querySelector(focusableElementsStringInvalid);
element && element.focus();
} else {
const element = ref.current.querySelector(focusableElementsString);
element && element.focus();
}
}, [ref.current, data.errors]);
// save focus to restore after close
const previousFocus = useMemo(() => document.activeElement, []);
// restore the focus after the component unmount
useEffect(() => () => previousFocus && previousFocus.focus(), []);
Expand Down Expand Up @@ -111,6 +120,7 @@ export const modalBlockWithContext = ({
// Clean the events
useEffect(() => {
const element = document.querySelector('.rc-modal-wrapper');
const container = element.querySelector('.rcx-modal__content');
const close = (e) => {
if (e.target !== element) {
return;
Expand All @@ -120,20 +130,29 @@ export const modalBlockWithContext = ({
onClose();
return false;
};
document.addEventListener('keydown', handleKeyDown);

const ignoreIfnotContains = (e) => {
if (!container.contains(e.target)) {
return;
}
return handleKeyDown(e);
};

document.addEventListener('keydown', ignoreIfnotContains);
element.addEventListener('click', close);
return () => {
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keydown', ignoreIfnotContains);
element.removeEventListener('click', close);
};
}, handleKeyDown);

return (
<kitContext.Provider value={{ ...context, ...data, values }}>
<AnimatedVisibility visibility={AnimatedVisibility.UNHIDING}>
<Modal open id={id} ref={ref}>
<Modal.Header>
<Modal.Thumb url={getURL(`/api/apps/${ data.appId }/icon`)} />
<Modal.Title>{textParser([title])}</Modal.Title>
<Modal.Title>{textParser([view.title])}</Modal.Title>
<Modal.Close tabIndex={-1} onClick={onClose} />
</Modal.Header>
<Modal.Content>
Expand All @@ -148,8 +167,8 @@ export const modalBlockWithContext = ({
</Modal.Content>
<Modal.Footer>
<ButtonGroup align='end'>
<Button onClick={onCancel}>{textParser([close.text])}</Button>
<Button primary onClick={onSubmit}>{textParser([submit.text])}</Button>
{ view.close && <Button onClick={onCancel}>{textParser([view.close.text])}</Button>}
{ view.submit && <Button primary onClick={onSubmit}>{textParser([view.submit.text])}</Button>}
</ButtonGroup>
</Modal.Footer>
</Modal>
Expand Down
84 changes: 46 additions & 38 deletions app/ui-message/client/blocks/ModalBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ import { modalBlockWithContext } from './MessageBlock';
import './ModalBlock.html';


const prevent = (e) => {
if (e) {
(e.nativeEvent || e).stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
};

Template.ModalBlock.onRendered(async function() {
const React = await import('react');
const ReactDOM = await import('react-dom');
Expand Down Expand Up @@ -65,32 +73,34 @@ Template.ModalBlock.onRendered(async function() {
ReactDOM.render(
React.createElement(
modalBlockWithContext({
onCancel: () => ActionManager.triggerCancel({
appId,
viewId,
view: {
...this.data.view,
id: viewId,
state: groupStateByBlockId(this.state.all()),
},
}),
onClose: () => ActionManager.triggerCancel({
appId,
viewId,
view: {
...this.data.view,
id: viewId,
state: groupStateByBlockId(this.state.all()),
},
isCleared: true,
}),
onCancel: (e) => {
prevent(e);
return ActionManager.triggerCancel({
appId,
viewId,
view: {
...this.data.view,
id: viewId,
state: groupStateByBlockId(this.state.all()),
},
});
},
onClose: (e) => {
prevent(e);
return ActionManager.triggerCancel({
appId,
viewId,
view: {
...this.data.view,
id: viewId,
state: groupStateByBlockId(this.state.all()),
},
isCleared: true,
});
},
onSubmit: (e) => {
if (e) {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
return ActionManager.triggerSubmitView({
prevent(e);
ActionManager.triggerSubmitView({
viewId,
appId,
payload: {
Expand All @@ -102,19 +112,17 @@ Template.ModalBlock.onRendered(async function() {
},
});
},
action: ({ actionId, appId, value, blockId, mid = this.data.mid }) => {
ActionManager.triggerBlockAction({
container: {
type: UIKitIncomingInteractionContainerType.VIEW,
id: viewId,
},
actionId,
appId,
value,
blockId,
mid,
});
},
action: ({ actionId, appId, value, blockId, mid = this.data.mid }) => ActionManager.triggerBlockAction({
container: {
type: UIKitIncomingInteractionContainerType.VIEW,
id: viewId,
},
actionId,
appId,
value,
blockId,
mid,
}),
state: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
this.state.set(actionId, {
blockId,
Expand Down
Loading