mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Close icon dialog on icon selected.
This commit is contained in:
parent
e0ce593102
commit
9b6dcdb923
@ -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>
|
||||||
))}
|
))}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user