import React from 'react'; import PropTypes from 'prop-types'; import Viewer from 'react-viewer'; import styled from 'styled-components'; import MediaZoomInIcon from '../../../../../public/images/media.zoomin.react.svg'; import MediaZoomOutIcon from '../../../../../public/images/media.zoomout.react.svg'; import MediaRotateLeftIcon from '../../../../../public/images/media.rotateleft.react.svg'; import MediaRotateRightIcon from '../../../../../public/images/media.rotateright.react.svg'; import MediaResetIcon from '../../../../../public/images/media.reset.react.svg'; import MediaDeleteIcon from '../../../../../public/images/media.delete.react.svg'; import MediaDownloadIcon from '../../../../../public/images/media.download.react.svg'; import commonIconsStyles from '@appserver/components/utils/common-icons-style'; import MediaScrollButton from './scroll-button'; import ControlBtn from './control-btn'; import equal from 'fast-deep-equal/react'; import { Base } from '@appserver/components/themes'; const StyledMediaZoomInIcon = styled(MediaZoomInIcon)` ${commonIconsStyles} `; const StyledMediaZoomOutIcon = styled(MediaZoomOutIcon)` ${commonIconsStyles} `; const StyledMediaRotateLeftIcon = styled(MediaRotateLeftIcon)` ${commonIconsStyles} `; const StyledMediaRotateRightIcon = styled(MediaRotateRightIcon)` ${commonIconsStyles} `; const StyledMediaResetIcon = styled(MediaResetIcon)` ${commonIconsStyles} `; const StyledMediaDeleteIcon = styled(MediaDeleteIcon)` ${commonIconsStyles} `; const StyledMediaDownloadIcon = styled(MediaDownloadIcon)` ${commonIconsStyles} `; const StyledViewer = styled(Viewer)` .react-viewer-footer { bottom: 5px !important; z-index: 301 !important; overflow: visible; } .react-viewer-canvas { z-index: 300 !important; margin-top: 50px; } .react-viewer-navbar, .react-viewer-mask, .react-viewer-attribute, .react-viewer-close { display: none; } .react-viewer-toolbar { position: relative; overflow: visible; bottom: 4px; } .react-viewer-toolbar li { width: 40px; height: 30px; margin-top: 4px; border-radius: 2px; cursor: pointer; line-height: 24px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .react-viewer-btn { background-color: transparent; &:hover { background-color: ${(props) => props.theme.mediaViewer.imageViewer.backgroundColor}; } } li[data-key='prev'] { left: 20px; } li[data-key='next'] { right: 20px; } li[data-key='prev'], li[data-key='next'] { position: fixed; top: calc(50% - 20px); height: auto; background: none; &:hover { background: none; } } li[data-key='delete'], li[data-key='customDownload'] { position: fixed; @media (max-width: 600px) { position: initial; } bottom: 9px; .controlBtn { margin: 0; } } li[data-key='delete'] { right: 62px; } li[data-key='customDownload'] { right: 12px; } .iconContainer { width: 16px; height: 16px; line-height: 20px; margin: 3px auto; &.reset { width: 18px; } path, rect { fill: ${(props) => props.theme.mediaViewer.imageViewer.fill}; } } .btnContainer { display: block; width: 16px; height: 16px; margin: 4px 12px; line-height: 19px; path, rect { fill: ${(props) => props.theme.mediaViewer.imageViewer.fill}; } } .scrollBtn { cursor: ${(props) => (props.inactive ? 'default' : 'pointer')}; opacity: ${(props) => (props.inactive ? '0.2' : '1')}; &:hover { background-color: ${(props) => !props.inactive ? props.theme.mediaViewer.imageViewer.backgroundColor : props.theme.mediaViewer.imageViewer.inactiveBackgroundColor}; } } `; StyledViewer.defaultProps = { theme: Base }; var customToolbar = [ { key: 'zoomIn', actionType: 1, render: (