Skip to content

Commit

Permalink
added overflow menu in uiKit [temp]
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spiral-Memory
Spiral-Memory committed Feb 26, 2024
1 parent 7caed56 commit 4de2565
Show file tree
Hide file tree
Showing 7 changed files with 246 additions and 191 deletions.
27 changes: 15 additions & 12 deletions packages/react/src/components/ChatBody/ChatBody.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,18 +136,21 @@ const ChatBody = ({
setViewData(null);
};

const onModalSubmit = useCallback(async (data, value) => {
console.log(data);
// const { actionId, value, blockId, appId, viewId } = data;
// await RCInstance?.triggerBlockAction({
// rid: RCInstance.rid,
// actionId,
// value,
// blockId,
// appId,
// viewId,
// });
});
const onModalSubmit = useCallback(
async (data) => {
console.log(data);
const { actionId, value, blockId, appId, viewId } = data;
await RCInstance?.triggerBlockAction({
rid: RCInstance.rid,
actionId,
value,
blockId,
appId,
viewId,
});
},
[RCInstance]
);

useEffect(() => {
RCInstance.auth.onAuthChange((user) => {
Expand Down
11 changes: 8 additions & 3 deletions packages/react/src/components/Menu/Menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const Menu = ({
className = '',
style = {},
anchor = 'right bottom',
isToolTip = true,
}) => {
const theme = useTheme();
const shadowCss = css`
Expand Down Expand Up @@ -84,10 +85,14 @@ const Menu = ({
className={appendClassNames('ec-menu-wrapper', wrapperClasses)}
style={wrapperStyles}
>
<Tooltip text="Options" position="bottom">
{' '}
{isToolTip ? (
<Tooltip text="Options" position="bottom">
{' '}
<ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
</Tooltip>
) : (
<ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
</Tooltip>
)}
{isOpen ? (
<Box
css={[MenuCss, shadowCss]}
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/uiKit/blocks/ModalBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const focusableElementsStringInvalid = `
function ModalBlock({ view, errors, onSubmit, onClose, onCancel }) {
const id = `modal_id_${useUniqueId()}`;
const ref = useRef();
console.log(view);

// Auto focus
useEffect(() => {
Expand Down
330 changes: 166 additions & 164 deletions packages/react/src/components/uiKit/blocks/UiKitModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1,166 @@
/* eslint-disable react/jsx-no-undef */
/* eslint-disable import/extensions */
/* eslint-disable import/no-unresolved */
/* eslint-disable no-shadow */
/* eslint-disable react/jsx-no-constructed-context-values */
import React from 'react';
import {
useDebouncedCallback,
useMutableCallback,
} from '@rocket.chat/fuselage-hooks';
import { kitContext } from '../contexts/kitContext';

import * as ActionManager from '../../../../app/ui-message/client/ActionManager';
import { detectEmoji } from '../../../lib/utils/detectEmoji';
import ModalBlock from './ModalBlock';
import { useActionManagerState } from './hooks/useActionManagerState';
import { useValues } from './hooks/useValues';

const UiKitModal = (props) => {
const state = useActionManagerState(props);

const { appId, viewId, mid: _mid, errors, view } = state;

const [values, updateValues] = useValues(view.blocks);

const groupStateByBlockId = (values) =>
Object.entries(values).reduce((obj, [key, { blockId, value }]) => {
obj[blockId] = obj[blockId] || {};
obj[blockId][key] = value;

return obj;
}, {});

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

const debouncedBlockAction = useDebouncedCallback(
(actionId, appId, value, blockId, mid) => {
ActionManager.triggerBlockAction({
container: {
type: 'view',
id: viewId,
},
actionId,
appId,
value,
blockId,
mid,
});
},
700
);

// TODO: this structure is atrociously wrong; we should revisit this
const context = {
// @ts-expect-error Property 'mid' does not exist on type 'ActionParams'.
action: ({
actionId,
appId,
value,
blockId,
mid = _mid,
dispatchActionConfig,
}) => {
if (
Array.isArray(dispatchActionConfig) &&
dispatchActionConfig.includes('on_character_entered')
) {
debouncedBlockAction(actionId, appId, value, blockId, mid);
} else {
ActionManager.triggerBlockAction({
container: {
type: 'view',
id: viewId,
},
actionId,
appId,
value,
blockId,
mid,
});
}
},

state: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
updateValues({
actionId,
payload: {
blockId,
value,
},
});
},
...state,
values,
};

const handleSubmit = useMutableCallback((e) => {
prevent(e);
ActionManager.triggerSubmitView({
viewId,
appId,
payload: {
view: {
...view,
id: viewId,
state: groupStateByBlockId(values),
},
},
});
});

const handleCancel = useMutableCallback((e) => {
prevent(e);
ActionManager.triggerCancel({
viewId,
appId,
view: {
...view,
id: viewId,
state: groupStateByBlockId(values),
},
});
});

const handleClose = useMutableCallback(() => {
ActionManager.triggerCancel({
viewId,
appId,
view: {
...view,
id: viewId,
state: groupStateByBlockId(values),
},
isCleared: true,
});
});

return (
<kitContext.Provider value={context}>
<MarkupInteractionContext.Provider
value={{
detectEmoji,
}}
>
<ModalBlock
view={view}
errors={errors}
appId={appId}
onSubmit={handleSubmit}
onCancel={handleCancel}
onClose={handleClose}
/>
</MarkupInteractionContext.Provider>
</kitContext.Provider>
);
};

export default UiKitModal;
// File is never used, already implemented a fuselage surface renderer in which everything is defined

// /* eslint-disable react/jsx-no-undef */
// /* eslint-disable import/extensions */
// /* eslint-disable import/no-unresolved */
// /* eslint-disable no-shadow */
// /* eslint-disable react/jsx-no-constructed-context-values */
// import React from 'react';
// import {
// useDebouncedCallback,
// useMutableCallback,
// } from '@rocket.chat/fuselage-hooks';
// import { kitContext } from '../contexts/kitContext';

// import * as ActionManager from '../../../../app/ui-message/client/ActionManager';
// import { detectEmoji } from '../../../lib/utils/detectEmoji';
// import ModalBlock from './ModalBlock';
// import { useActionManagerState } from './hooks/useActionManagerState';
// import { useValues } from './hooks/useValues';

// const UiKitModal = (props) => {
// const state = useActionManagerState(props);

// const { appId, viewId, mid: _mid, errors, view } = state;

// const [values, updateValues] = useValues(view.blocks);

// const groupStateByBlockId = (values) =>
// Object.entries(values).reduce((obj, [key, { blockId, value }]) => {
// obj[blockId] = obj[blockId] || {};
// obj[blockId][key] = value;

// return obj;
// }, {});

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

// const debouncedBlockAction = useDebouncedCallback(
// (actionId, appId, value, blockId, mid) => {
// ActionManager.triggerBlockAction({
// container: {
// type: 'view',
// id: viewId,
// },
// actionId,
// appId,
// value,
// blockId,
// mid,
// });
// },
// 700
// );

// // TODO: this structure is atrociously wrong; we should revisit this
// const context = {
// // @ts-expect-error Property 'mid' does not exist on type 'ActionParams'.
// action: ({
// actionId,
// appId,
// value,
// blockId,
// mid = _mid,
// dispatchActionConfig,
// }) => {
// if (
// Array.isArray(dispatchActionConfig) &&
// dispatchActionConfig.includes('on_character_entered')
// ) {
// debouncedBlockAction(actionId, appId, value, blockId, mid);
// } else {
// ActionManager.triggerBlockAction({
// container: {
// type: 'view',
// id: viewId,
// },
// actionId,
// appId,
// value,
// blockId,
// mid,
// });
// }
// },

// state: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
// updateValues({
// actionId,
// payload: {
// blockId,
// value,
// },
// });
// },
// ...state,
// values,
// };

// const handleSubmit = useMutableCallback((e) => {
// prevent(e);
// ActionManager.triggerSubmitView({
// viewId,
// appId,
// payload: {
// view: {
// ...view,
// id: viewId,
// state: groupStateByBlockId(values),
// },
// },
// });
// });

// const handleCancel = useMutableCallback((e) => {
// prevent(e);
// ActionManager.triggerCancel({
// viewId,
// appId,
// view: {
// ...view,
// id: viewId,
// state: groupStateByBlockId(values),
// },
// });
// });

// const handleClose = useMutableCallback(() => {
// ActionManager.triggerCancel({
// viewId,
// appId,
// view: {
// ...view,
// id: viewId,
// state: groupStateByBlockId(values),
// },
// isCleared: true,
// });
// });

// return (
// <kitContext.Provider value={context}>
// <MarkupInteractionContext.Provider
// value={{
// detectEmoji,
// }}
// >
// <ModalBlock
// view={view}
// errors={errors}
// appId={appId}
// onSubmit={handleSubmit}
// onCancel={handleCancel}
// onClose={handleClose}
// />
// </MarkupInteractionContext.Provider>
// </kitContext.Provider>
// );
// };

// export default UiKitModal;
Loading

0 comments on commit 4de2565

Please sign in to comment.