Skip to content

Commit

Permalink
feat(ModalZoom): Added hideButton and opened props
Browse files Browse the repository at this point in the history
  • Loading branch information
@johan-fx
johan-fx committed Jan 20, 2024
1 parent 28fff8b commit 148878e
Show file tree
Hide file tree
Showing 12 changed files with 100 additions and 21 deletions.
40 changes: 26 additions & 14 deletions packages/components/src/overlay/ModalZoom/ModalZoom.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,50 @@
import React, { useState, useRef } from 'react';
import { Portal } from '@mantine/core';
import { noop } from 'lodash';
import { RemoveIcon, ZoomInIcon, ZoomOutIcon } from '@bubbles-ui/icons/outline';
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
import { Box } from '../../layout/Box';
import { ModalZoomStyles } from './ModalZoom.styles';
import { MODAL_ZOOM_DEFAULT_PROPS, MODAL_ZOOM_PROP_TYPES } from './ModalZoom.constants';

const ModalZoom = ({ children, canPlay, style }) => {
const [open, setOpen] = useState(false);
const ModalZoom = ({ children, canPlay, opened, hideButton, onClose = noop, style }) => {
const [open, setOpen] = useState(opened);
const center = useRef(null);

const { classes } = ModalZoomStyles({}, { name: 'ModalZoom' });

React.useEffect(() => {
if(opened !== open) {
setOpen(opened);
center.current?.call();
}
}, [opened])

return (
<>
<Box
style={{ cursor: canPlay && 'pointer', ...style }}
onClick={() => {
if (!canPlay) return;
if (center.current) {
center.current.call();
}
setOpen(true);
}}
>
{children}
</Box>
{!hideButton && (
<Box
style={{ cursor: canPlay && 'pointer', ...style }}
onClick={() => {
if (!canPlay) return;
if (center.current) {
center.current.call();
}
setOpen(true);
}}
>
{children}
</Box>
)}

{open && (
<Portal zIndex={99999}>
<Box className={classes.modalWrapper}>
<Box
className={classes.close}
onClick={() => {
setOpen(false);
onClose();
}}
>
<RemoveIcon />
Expand Down
41 changes: 34 additions & 7 deletions packages/components/src/tokens.compiled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1153,7 +1153,7 @@ export default {
"y": 0,
"blur": 4,
"spread": 0,
"color": "#ffffff26",
"color": "#ffffff",
"type": "dropShadow"
},
"type": "boxShadow"
Expand Down Expand Up @@ -1234,8 +1234,17 @@ export default {
"type": "color"
},
"hover--reverse-transparent": {
"value": "#ffffff26",
"type": "color"
"value": "#ffffff",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.15",
"space": "lch"
}
}
}
},
"down": {
"value": "#F1FFBD",
Expand Down Expand Up @@ -4930,12 +4939,30 @@ export default {
"color": {
"primary": {
"default": {
"value": "#4d535866",
"type": "color"
"value": "#4D5358",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.4",
"space": "lch"
}
}
}
},
"hover": {
"value": "#4d5358b3",
"type": "color"
"value": "#4D5358",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.7",
"space": "lch"
}
}
}
},
"down": {
"value": "#4D5358",
Expand Down
5 changes: 5 additions & 0 deletions packages/icons/solid/esm/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export { default as ControlsPreviousIcon } from './ControlsPreviousIcon'
export { default as ControlsRecordIcon } from './ControlsRecordIcon'
export { default as ControlsRewindIcon } from './ControlsRewindIcon'
export { default as ControlsStopIcon } from './ControlsStopIcon'
export { default as CursorPlayerIcon } from './CursorPlayerIcon'
export { default as CursorIcon } from './CursorIcon'
export { default as CutStarIcon } from './CutStarIcon'
export { default as DeleteAlternateIcon } from './DeleteAlternateIcon'
Expand All @@ -48,6 +49,7 @@ export { default as DeleteIcon } from './DeleteIcon'
export { default as DesignShapeMonitorIcon } from './DesignShapeMonitorIcon'
export { default as DislikeIcon } from './DislikeIcon'
export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon'
export { default as DownloadIcon } from './DownloadIcon'
export { default as EditWriteIcon } from './EditWriteIcon'
export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon'
export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon'
Expand Down Expand Up @@ -99,13 +101,15 @@ export { default as LinkedinIcon } from './LinkedinIcon'
export { default as LockIcon } from './LockIcon'
export { default as MapFlagIcon } from './MapFlagIcon'
export { default as MeetingCameraIcon } from './MeetingCameraIcon'
export { default as MessageChatIcon } from './MessageChatIcon'
export { default as MicrophoneOffIcon } from './MicrophoneOffIcon'
export { default as MicrophoneIcon } from './MicrophoneIcon'
export { default as MoveToTopIcon } from './MoveToTopIcon'
export { default as MusicNoteIcon } from './MusicNoteIcon'
export { default as NavigationMenuIcon } from './NavigationMenuIcon'
export { default as NoPauseIcon } from './NoPauseIcon'
export { default as NonEvaluableIcon } from './NonEvaluableIcon'
export { default as OpenIcon } from './OpenIcon'
export { default as ParagraphSpacingIcon } from './ParagraphSpacingIcon'
export { default as PassportIcon } from './PassportIcon'
export { default as PerformanceMoneyIncreaseIcon } from './PerformanceMoneyIncreaseIcon'
Expand Down Expand Up @@ -147,6 +151,7 @@ export { default as PunctuableIcon } from './PunctuableIcon'
export { default as RatingStarIcon } from './RatingStarIcon'
export { default as RemoveBoldIcon } from './RemoveBoldIcon'
export { default as ReorderDownIcon } from './ReorderDownIcon'
export { default as SearchPlusIcon } from './SearchPlusIcon'
export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIcon'
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon'
export { default as SettingsIcon } from './SettingsIcon'
Expand Down
5 changes: 5 additions & 0 deletions packages/icons/solid/esm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export { default as ControlsPreviousIcon } from './ControlsPreviousIcon.js'
export { default as ControlsRecordIcon } from './ControlsRecordIcon.js'
export { default as ControlsRewindIcon } from './ControlsRewindIcon.js'
export { default as ControlsStopIcon } from './ControlsStopIcon.js'
export { default as CursorPlayerIcon } from './CursorPlayerIcon.js'
export { default as CursorIcon } from './CursorIcon.js'
export { default as CutStarIcon } from './CutStarIcon.js'
export { default as DeleteAlternateIcon } from './DeleteAlternateIcon.js'
Expand All @@ -48,6 +49,7 @@ export { default as DeleteIcon } from './DeleteIcon.js'
export { default as DesignShapeMonitorIcon } from './DesignShapeMonitorIcon.js'
export { default as DislikeIcon } from './DislikeIcon.js'
export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon.js'
export { default as DownloadIcon } from './DownloadIcon.js'
export { default as EditWriteIcon } from './EditWriteIcon.js'
export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon.js'
export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon.js'
Expand Down Expand Up @@ -99,13 +101,15 @@ export { default as LinkedinIcon } from './LinkedinIcon.js'
export { default as LockIcon } from './LockIcon.js'
export { default as MapFlagIcon } from './MapFlagIcon.js'
export { default as MeetingCameraIcon } from './MeetingCameraIcon.js'
export { default as MessageChatIcon } from './MessageChatIcon.js'
export { default as MicrophoneOffIcon } from './MicrophoneOffIcon.js'
export { default as MicrophoneIcon } from './MicrophoneIcon.js'
export { default as MoveToTopIcon } from './MoveToTopIcon.js'
export { default as MusicNoteIcon } from './MusicNoteIcon.js'
export { default as NavigationMenuIcon } from './NavigationMenuIcon.js'
export { default as NoPauseIcon } from './NoPauseIcon.js'
export { default as NonEvaluableIcon } from './NonEvaluableIcon.js'
export { default as OpenIcon } from './OpenIcon.js'
export { default as ParagraphSpacingIcon } from './ParagraphSpacingIcon.js'
export { default as PassportIcon } from './PassportIcon.js'
export { default as PerformanceMoneyIncreaseIcon } from './PerformanceMoneyIncreaseIcon.js'
Expand Down Expand Up @@ -147,6 +151,7 @@ export { default as PunctuableIcon } from './PunctuableIcon.js'
export { default as RatingStarIcon } from './RatingStarIcon.js'
export { default as RemoveBoldIcon } from './RemoveBoldIcon.js'
export { default as ReorderDownIcon } from './ReorderDownIcon.js'
export { default as SearchPlusIcon } from './SearchPlusIcon.js'
export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIcon.js'
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon.js'
export { default as SettingsIcon } from './SettingsIcon.js'
Expand Down
5 changes: 5 additions & 0 deletions packages/icons/solid/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export { default as ControlsPreviousIcon } from './ControlsPreviousIcon'
export { default as ControlsRecordIcon } from './ControlsRecordIcon'
export { default as ControlsRewindIcon } from './ControlsRewindIcon'
export { default as ControlsStopIcon } from './ControlsStopIcon'
export { default as CursorPlayerIcon } from './CursorPlayerIcon'
export { default as CursorIcon } from './CursorIcon'
export { default as CutStarIcon } from './CutStarIcon'
export { default as DeleteAlternateIcon } from './DeleteAlternateIcon'
Expand All @@ -48,6 +49,7 @@ export { default as DeleteIcon } from './DeleteIcon'
export { default as DesignShapeMonitorIcon } from './DesignShapeMonitorIcon'
export { default as DislikeIcon } from './DislikeIcon'
export { default as DoneSquareAlternateIcon } from './DoneSquareAlternateIcon'
export { default as DownloadIcon } from './DownloadIcon'
export { default as EditWriteIcon } from './EditWriteIcon'
export { default as EditorCenterAlignIcon } from './EditorCenterAlignIcon'
export { default as EditorHyperlinkIcon } from './EditorHyperlinkIcon'
Expand Down Expand Up @@ -99,13 +101,15 @@ export { default as LinkedinIcon } from './LinkedinIcon'
export { default as LockIcon } from './LockIcon'
export { default as MapFlagIcon } from './MapFlagIcon'
export { default as MeetingCameraIcon } from './MeetingCameraIcon'
export { default as MessageChatIcon } from './MessageChatIcon'
export { default as MicrophoneOffIcon } from './MicrophoneOffIcon'
export { default as MicrophoneIcon } from './MicrophoneIcon'
export { default as MoveToTopIcon } from './MoveToTopIcon'
export { default as MusicNoteIcon } from './MusicNoteIcon'
export { default as NavigationMenuIcon } from './NavigationMenuIcon'
export { default as NoPauseIcon } from './NoPauseIcon'
export { default as NonEvaluableIcon } from './NonEvaluableIcon'
export { default as OpenIcon } from './OpenIcon'
export { default as ParagraphSpacingIcon } from './ParagraphSpacingIcon'
export { default as PassportIcon } from './PassportIcon'
export { default as PerformanceMoneyIncreaseIcon } from './PerformanceMoneyIncreaseIcon'
Expand Down Expand Up @@ -147,6 +151,7 @@ export { default as PunctuableIcon } from './PunctuableIcon'
export { default as RatingStarIcon } from './RatingStarIcon'
export { default as RemoveBoldIcon } from './RemoveBoldIcon'
export { default as ReorderDownIcon } from './ReorderDownIcon'
export { default as SearchPlusIcon } from './SearchPlusIcon'
export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIcon'
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon'
export { default as SettingsIcon } from './SettingsIcon'
Expand Down
5 changes: 5 additions & 0 deletions packages/icons/solid/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ module.exports.ControlsPreviousIcon = require("./ControlsPreviousIcon.js")
module.exports.ControlsRecordIcon = require("./ControlsRecordIcon.js")
module.exports.ControlsRewindIcon = require("./ControlsRewindIcon.js")
module.exports.ControlsStopIcon = require("./ControlsStopIcon.js")
module.exports.CursorPlayerIcon = require("./CursorPlayerIcon.js")
module.exports.CursorIcon = require("./CursorIcon.js")
module.exports.CutStarIcon = require("./CutStarIcon.js")
module.exports.DeleteAlternateIcon = require("./DeleteAlternateIcon.js")
Expand All @@ -48,6 +49,7 @@ module.exports.DeleteIcon = require("./DeleteIcon.js")
module.exports.DesignShapeMonitorIcon = require("./DesignShapeMonitorIcon.js")
module.exports.DislikeIcon = require("./DislikeIcon.js")
module.exports.DoneSquareAlternateIcon = require("./DoneSquareAlternateIcon.js")
module.exports.DownloadIcon = require("./DownloadIcon.js")
module.exports.EditWriteIcon = require("./EditWriteIcon.js")
module.exports.EditorCenterAlignIcon = require("./EditorCenterAlignIcon.js")
module.exports.EditorHyperlinkIcon = require("./EditorHyperlinkIcon.js")
Expand Down Expand Up @@ -99,13 +101,15 @@ module.exports.LinkedinIcon = require("./LinkedinIcon.js")
module.exports.LockIcon = require("./LockIcon.js")
module.exports.MapFlagIcon = require("./MapFlagIcon.js")
module.exports.MeetingCameraIcon = require("./MeetingCameraIcon.js")
module.exports.MessageChatIcon = require("./MessageChatIcon.js")
module.exports.MicrophoneOffIcon = require("./MicrophoneOffIcon.js")
module.exports.MicrophoneIcon = require("./MicrophoneIcon.js")
module.exports.MoveToTopIcon = require("./MoveToTopIcon.js")
module.exports.MusicNoteIcon = require("./MusicNoteIcon.js")
module.exports.NavigationMenuIcon = require("./NavigationMenuIcon.js")
module.exports.NoPauseIcon = require("./NoPauseIcon.js")
module.exports.NonEvaluableIcon = require("./NonEvaluableIcon.js")
module.exports.OpenIcon = require("./OpenIcon.js")
module.exports.ParagraphSpacingIcon = require("./ParagraphSpacingIcon.js")
module.exports.PassportIcon = require("./PassportIcon.js")
module.exports.PerformanceMoneyIncreaseIcon = require("./PerformanceMoneyIncreaseIcon.js")
Expand Down Expand Up @@ -147,6 +151,7 @@ module.exports.PunctuableIcon = require("./PunctuableIcon.js")
module.exports.RatingStarIcon = require("./RatingStarIcon.js")
module.exports.RemoveBoldIcon = require("./RemoveBoldIcon.js")
module.exports.ReorderDownIcon = require("./ReorderDownIcon.js")
module.exports.SearchPlusIcon = require("./SearchPlusIcon.js")
module.exports.SettingMenuHorizontalIcon = require("./SettingMenuHorizontalIcon.js")
module.exports.SettingMenuVerticalIcon = require("./SettingMenuVerticalIcon.js")
module.exports.SettingsIcon = require("./SettingsIcon.js")
Expand Down
3 changes: 3 additions & 0 deletions packages/icons/src/solid/cursor-player.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/icons/src/solid/download.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 148878e

Please sign in to comment.