vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 06:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Close icon dialog on icon selected.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-10-31 20:10:10 -07:00
parent e0ce593102
commit 9b6dcdb923
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx
View File

@ -6,8 +6,9 @@ import NodeProperty from '../../../../../classes/model/node-property';
type IconImageTab = { type IconImageTab = {
iconModel: NodeProperty; iconModel: NodeProperty;
triggerClose: () => void;
}; };
const IconImageTab = ({ iconModel }: IconImageTab) => { const IconImageTab = ({ iconModel, triggerClose }: IconImageTab) => {
return ( return (
<Box sx={{ width: '350px' }}> <Box sx={{ width: '350px' }}>
{iconGroups.map((family, i) => ( {iconGroups.map((family, i) => (
@ -19,6 +20,7 @@ const IconImageTab = ({ iconModel }: IconImageTab) => {
src={SvgImageIcon.getImageUrl(icon)} src={SvgImageIcon.getImageUrl(icon)}
onClick={() => { onClick={() => {
iconModel.setValue(`image:${icon}`); iconModel.setValue(`image:${icon}`);
triggerClose();
}} }}
></img> ></img>
))} ))}

13
packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
View File

@ -25,11 +25,11 @@ import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
type IconPickerProp = { type IconPickerProp = {
closeModal: () => void; triggerClose: () => void;
iconModel: NodeProperty; iconModel: NodeProperty;
}; };
const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => { const IconPicker = ({ triggerClose, iconModel }: IconPickerProp) => {
const [checked, setChecked] = React.useState(true); const [checked, setChecked] = React.useState(true);
const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => { const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -39,14 +39,15 @@ const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => {
// Review ... // Review ...
useEffect(() => { useEffect(() => {
DesignerKeyboard.pause(); DesignerKeyboard.pause();
return () => { DesignerKeyboard.resume(); } return () => {
DesignerKeyboard.resume();
};
}, []); }, []);
const handleEmojiSelect = (emoji: EmojiClickData) => { const handleEmojiSelect = (emoji: EmojiClickData) => {
const emojiChar = emoji.emoji; const emojiChar = emoji.emoji;
iconModel.setValue(`emoji:${emojiChar}`); iconModel.setValue(`emoji:${emojiChar}`);
closeModal(); triggerClose();
}; };
return ( return (
@ -64,7 +65,7 @@ const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => {
/> />
)} )}
{!checked && <IconImageTab iconModel={iconModel} />} {!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
</div> </div>
); );
}; };