react-device-detect#isIPad13 JavaScript Examples
The following examples show how to use
react-device-detect#isIPad13.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AddToHomeScreenModal.js From pwa with MIT License | 5 votes |
|
export default function AddToHomeScreenModal() {
const intl = useIntl();
const [modalShow, setModalShow] = useState(true);
const handleOnCloseButtonClick = () => {
setModalShow(false);
};
const renderInThisDevice =
(process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_ANDROID === 'true' &&
isAndroid) ||
(process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_IOS === 'true' &&
(isMobile || isIPad13));
const shouldRender = renderInThisDevice && modalShow && !isInStandaloneMode();
//TODO Add time for modal show again
return (
<div>
{shouldRender && (
<Dialog fullScreen open={modalShow} className="add-to-home-screen">
<div className="logo">
<img src={logo} alt="logo" />
</div>
<h3 className="flex-column perfect-center">
{isAndroid && intl.formatMessage('add-to-home.android.title')}
{(isIOS || isIPad13) && intl.formatMessage('add-to-home.ios.title')}
</h3>
<Paper className="steps flex-column perfect-center">
<span>
{(isIOS || isIPad13) &&
intl.formatMessage('add-to-home.ios.step1.first')}
{(isIOS || isIPad13) && (
<img className="share-icon" src={ShareIcon} alt="Share" />
)}
{isAndroid &&
intl.formatMessage('add-to-home.android.step1.first')}
{isAndroid && (
<img
className="chrome-menu"
src={AndroidChromeMenu}
alt="Menu"
/>
)}
{intl.formatMessage('add-to-home.ios.step1.end')}
</span>
<span>
{intl.formatMessage('add-to-home.step2.first')}
{(isIOS || isIPad13) && (
<img
className="add-to-home-screen-icon"
src={AddToHomeScreenIcon}
alt="Add To Home Screen"
/>
)}
{isAndroid && (
<span className="add-to-home-screen-icon">
{intl.formatMessage(
'add-to-home.android.step2.add-to-home-screen'
)}
</span>
)}
{intl.formatMessage('add-to-home.step2.end')}
</span>
<span>{intl.formatMessage('add-to-home.step3.first')}</span>
</Paper>
<Button
variant="contained"
color="primary"
onClick={handleOnCloseButtonClick}
>
{intl.formatMessage('add-to-home.add-later')}
</Button>
</Dialog>
)}
</div>
);
}
Example #2
| Source File: BumpPlot.js From covid19 with MIT License | 5 votes |
|
render() {
const { currentRegion, plotParameters, plotDataAll, plotTheme } = this.props
if (plotParameters.type !== 'bump') return <div />
return (
<ResponsiveBump
data={plotDataAll.plotData}
theme={plotTheme}
margin={{ top: 10, right: 100, bottom: 20, left: 50 }}
colors={(d) => d.color}
lineWidth={2}
activeLineWidth={4}
inactiveLineWidth={2}
inactiveOpacity={0.15}
pointSize={0}
activePointSize={0}
inactivePointSize={0}
pointBorderWidth={3}
activePointBorderWidth={3}
enableGridX={false}
enableGridY={false}
axisRight={null}
axisTop={null}
axisBottom={null}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0
}}
onClick={(serie) => {
if (isMobile || isIPad13) return
this.props.regionToggle(
currentRegion.length === 1 && currentRegion[0] === str.GLOBAL_ZH
? [ serie.name ]
: [ ...currentRegion, serie.name ]
)
}}
tooltip={plotParameters.tooltip}
/>
)
}
Example #3
| Source File: Footer.js From covid19 with MIT License | 5 votes |
|
render() {
const { lang, fullMap, fullPlot, fullTree } = this.props
if (fullMap || fullPlot || fullTree) return <div />
return (
<Fragment>
<div className="footer">
<span>
<a href="https://yliu.io">Steven Liu</a> 2020
</span>
<FaInfoCircle
data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
size={18}
onClick={() => this.setState({ modal: true })}
/>
<FaGithub
data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
size={18}
onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
/>
</div>
<Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
<ModalBody className="footer-about">
<div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
<a
className="bmc-button"
target="_blank"
href="https://www.buymeacoffee.com/stevenliuyi"
rel="noopener noreferrer"
>
<img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
</a>
</ModalBody>
</Modal>
</Fragment>
)
}
Example #4
| Source File: NavBar.js From covid19 with MIT License | 5 votes |
|
render() {
const { scale, lang, darkMode, languageToggle } = this.props
return (
<div className="nav-bar">
<UncontrolledDropdown>
<DropdownToggle
tag="div"
className="nav-bar-icon"
data-toggle="dropdown"
data-tip={i18n.LANGUAGE_HELP_TEXT[lang]}
>
{i18n.LANGUAGE[lang]}
</DropdownToggle>
<DropdownMenu>
{Object.keys(i18n.LANGUAGE).map((x) => (
<DropdownItem
key={x}
className={x === lang ? 'current' : ''}
onClick={() => languageToggle(x)}
>
{i18n.LANGUAGE[x]}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.props.darkModeToggle}>
{darkMode ? i18n.DARK[lang] : i18n.LIGHT[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={darkMode ? i18n.LIGHT_MODE_HELP_TEXT[lang] : i18n.DARK_MODE_HELP_TEXT[lang]}
onClick={this.props.darkModeToggle}
onMouseEnter={() =>
this.setState({
darkModeText: darkMode ? i18n.LIGHT[lang] : i18n.DARK[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.darkModeText}
</div>
)}
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.onScaleChange}>
{scale === 'linear' ? i18n.LINEAR_SCALE[lang] : i18n.LOG_SCALE[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={
scale === 'linear' ? i18n.LOG_SCALE_HELP_TEXT[lang] : i18n.LINEAR_SCALE_HELP_TEXT[lang]
}
onClick={this.onScaleChange}
onMouseEnter={() =>
this.setState({
scaleText: scale === 'linear' ? i18n.LOG_SCALE[lang] : i18n.LINEAR_SCALE[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.scaleText}
</div>
)}
<div className="nav-bar-icon" data-tip={i18n.RESET_HELP_TEXT[lang]} onClick={this.props.reset}>
{i18n.RESET[lang]}
</div>
</div>
)
}
Example #5
| Source File: Plot.js From covid19 with MIT License | 5 votes |
|
render() {
const { plotType, data, lang, darkMode, fullPlot, fullTree, fullPlotToggle, fullDimensions } = this.props
if (data == null || fullTree) return <div />
const plotParameters = plotSpecificTypes[this.state.plotSpecificType]
const plotDataAll = generatePlotData({
...this.props,
plotSpecificType: this.state.plotSpecificType,
plotDetails: this.state.plotDetails
})
const plotData = plotDataAll.plotData
const isDataEmpty = ![ 'plot_subregion_active_stream', 'plot_subregion_stream' ].includes(plotType)
? plotData.map((d) => d.data.length).reduce((s, x) => s + x, 0) === 0
: plotData.map((d) => Object.keys(d).length).reduce((s, x) => s + x, 0) === 0
const tickValues = isDataEmpty ? 0 : plotDataAll.tickValues != null ? plotDataAll.tickValues : 5
const FullScreenIcon = fullPlot ? AiOutlineFullscreenExit : AiOutlineFullscreen
const plotProps = {
...this.props,
plotParameters,
plotDataAll,
tickValues,
plotTheme: plotTheme(darkMode, fullPlot)
}
return (
<div
className="plot-wrap"
style={{
height: !fullPlot ? 'auto' : fullDimensions.height - 100,
width: !fullPlot ? '100%' : fullDimensions.width + 100
}}
>
<PlotSelector
{...this.props}
{...this.state}
currentPlotType={plotType}
onPlotTypeChange={(plotType) => {
this.setSpecificPlotType(plotType, this.state.plotDetails)
this.props.handlePlotTypeChange(plotType)
}}
/>
<div className="plot-with-nav-bar">
<PlotNavBar {...this.props} {...this.state} onSelect={this.onSelect} />
<div
style={{
height: !fullPlot ? this.state.height : fullDimensions.height - 125,
width: !fullPlot ? '100%' : fullDimensions.width - 70
}}
>
{isDataEmpty ? (
<div className="plot-no-data">
<span>{i18n.NO_DATA[lang]}</span>
</div>
) : (
<div />
)}
{!isDataEmpty && <LinePlot {...plotProps} />}
{!isDataEmpty && <BumpPlot {...plotProps} />}
{!isDataEmpty && <StreamPlot offsetType={this.state.plotDetails.stream} {...plotProps} />}
<div
className="plot-full-button"
data-tip={!fullPlot && !isMobile && !isIPad13 ? i18n.PLOT_SETTINGS[lang] : ''}
>
<FullScreenIcon size={fullPlot ? 30 : 20} onClick={fullPlotToggle} />
</div>
</div>
</div>
</div>
)
}
Example #6
| Source File: LinePlot.js From covid19 with MIT License | 4 votes |
|
render() {
const {
currentRegion,
fullPlot,
darkMode,
scale,
lang,
playing,
tempDate,
startDate,
endDate,
plotParameters,
plotDataAll,
tickValues,
plotTheme,
currentMap
} = this.props
if (plotParameters.type !== 'line') return <div />
return (
<ResponsiveLine
margin={{
top: 20,
right: 20,
bottom: !fullPlot ? 60 : 80,
left: 50,
...plotParameters.margin
}}
theme={plotTheme}
animate={
fullPlot ||
currentMap !== str.US_MAP2 ||
(currentMap === str.US_MAP2 && currentRegion.length >= 2 && currentRegion[1] in us_map)
}
data={plotDataAll.plotData}
colors={(d) => d.color}
xFormat={plotParameters.xFormat != null ? plotParameters.xFormat : 'time:%Y-%m-%d'}
yFormat={plotParameters.yFormat}
xScale={
plotParameters.xScale != null ? (
plotParameters.xScale
) : !plotParameters.xLog ? (
{
type: 'time',
format: '%Y-%m-%d',
precision: 'day',
useUTC: false
}
) : (
{
type: 'log',
min: plotDataAll.logTickMin,
max: plotDataAll.logTickMax
}
)
}
yScale={
plotParameters.yScale != null ? (
plotParameters.yScale
) : scale === 'linear' || !plotParameters.log ? (
{
type: 'linear',
max: 'auto',
min: 'auto'
}
) : (
{
type: 'log',
min: plotDataAll.logTickMin,
max: plotDataAll.logTickMax
}
)
}
axisLeft={{
orient: 'left',
// do not show ticks with non-integer values
format: plotParameters.yAxisFormat,
tickSize: 0,
tickValues: plotParameters.yTickValues != null ? plotParameters.yTickValues : tickValues,
legend: plotParameters.yLegend != null ? plotParameters.yLegend[lang] : '',
legendOffset: plotParameters.yLegendOffset != null ? plotParameters.yLegendOffset : -40,
legendPosition: 'middle'
}}
axisBottom={{
orient: 'bottom',
format:
Object(plotParameters.xAxisFormat) !== plotParameters.xAxisFormat
? plotParameters.xAxisFormat
: plotParameters.xAxisFormat[lang],
tickValues: plotParameters.xTickValues != null ? plotParameters.xTickValues : !fullPlot ? 5 : 10,
tickRotation:
plotParameters.xTickRotation != null ? plotParameters.xTickRotation : !fullPlot ? 0 : -30,
legend: plotParameters.xLegend != null ? plotParameters.xLegend[lang] : '',
legendOffset: 40,
legendPosition: 'middle'
}}
enableGridX={false}
gridYValues={plotParameters.yTickValues != null ? plotParameters.yTickValues : tickValues}
pointSize={plotParameters.pointSize != null ? plotParameters.pointSize : 6}
pointBorderWidth={plotParameters.pointBorderWidth}
pointBorderColor={darkMode ? 'var(--primary-color-4)' : 'var(--primary-color-5)'}
useMesh={true}
enableArea={false}
enablePointLabel={plotParameters.enablePointLabel}
pointLabel={plotParameters.pointLabel}
pointLabelYOffset={plotParameters.pointLabelYOffset ? plotParameters.pointLabelYOffset : -6}
enableSlices={plotParameters.enableSlices != null ? plotParameters.enableSlices : 'x'}
curve={'monotoneX'}
tooltip={plotParameters.tooltip}
markers={
plotParameters.hideMarkers ? (
[]
) : !playing && tempDate !== startDate && tempDate !== endDate ? (
[
{
axis: 'x',
value: parseDate(tempDate),
lineStyle: {
stroke: darkMode ? 'var(--primary-color-4)' : 'var(--primary-color-5)',
strokeWidth: 1,
strokeDasharray: '6 6'
}
}
]
) : (
[]
)
}
legends={
plotParameters.legends != null ? (
plotParameters.legends
) : (
[
{
anchor: 'bottom',
direction: 'row',
justify: false,
translateX: 0,
translateY: !fullPlot ? 50 : 70,
itemsSpacing: 10,
itemDirection: 'left-to-right',
itemWidth: plotParameters.legendItemWidth,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: []
}
]
)
}
onClick={({ serieId, data }) => {
if (isMobile || isIPad13) return
if (!plotParameters.subregions || serieId == null || data.noClick) return
this.props.regionToggle(
currentRegion.length === 1 && currentRegion[0] === str.GLOBAL_ZH
? [ serieId ]
: [ ...currentRegion, serieId ]
)
}}
/>
)
}
Example #7
| Source File: Map.js From covid19 with MIT License | 4 votes |
|
render() {
if (this.props.currentMap === str.TRANSMISSION) return <div />
const currentMap = maps[this.props.currentMap]
const { data, metric, date, lang, currentRegion, mapZoom, darkMode } = this.props
const lang_map = lang !== 'zh'? 'en' : 'zh'
const isUsState =
this.props.currentMap === str.US_MAP2 && this.state.usState != null && this.state.usState in us_map
const center = isUsState
? us_map[this.state.usState].center.split(',').map((d) => parseFloat(d))
: currentMap.center.split(',').map((d) => parseFloat(d))
const scale = isUsState ? us_map[this.state.usState].scale : currentMap.scale
const projection = isUsState ? 'geoMercator' : currentMap.projection
const { colorScale } = this.getColorScale(isUsState)
const cruiseData = getDataFromRegion(data, [ str.INTL_CONVEYANCE_ZH, str.DIAMOND_PRINCESS_ZH ])
const cruiseCounts = cruiseData[metric][date] ? cruiseData[metric][date] : 0
const cruiseStrokeColor = this.getStrokeColor(cruiseCounts, isUsState)
const greyStrokeColor = darkMode ? 'var(--primary-color-10)' : 'var(--grey)'
return (
<Fragment>
{this.props.currentMap === str.WORLD_MAP && (
<div className="map-transmission-toggle-wrap">
<Toggle
className="map-transmission-toggle"
defaultChecked={this.state.showTransmissions}
onChange={() => this.setState({ showTransmissions: !this.state.showTransmissions })}
icons={false}
/>
<span>{i18n.TRANSMISSIONS[this.props.lang]}</span>
</div>
)}
<ComposableMap
projection={projection}
projectionConfig={{
scale: scale,
rotate: currentMap.rotate
? currentMap.rotate.split(',').map((x) => parseInt(x, 10))
: [ 0, 0, 0 ],
parallels: currentMap.parallels
? currentMap.parallels.split(',').map((x) => parseInt(x, 10))
: [ 0, 0 ]
}}
>
<PatternLines
id="lines"
height={6}
width={6}
stroke={greyStrokeColor}
strokeWidth={1}
background={darkMode ? 'var(--darker-grey)' : '#fff'}
orientation={[ 'diagonal' ]}
/>
<PatternLines
id="background-lines"
height={6}
width={6}
stroke={darkMode ? '#333' : '#ddd'}
strokeWidth={1}
background={darkMode ? 'var(--darker-grey)' : '#fff'}
orientation={[ 'diagonal' ]}
/>
<ZoomableGroup
zoom={mapZoom}
onZoomEnd={this.onZoomEnd}
onMoveStart={(e, m) => this.setState({ cursor: [ m.x, m.y ], clicked: false })}
onMoveEnd={(e, m) => {
// click on desktop
if (Math.abs(m.x - this.state.cursor[0]) < 1 && Math.abs(m.y - this.state.cursor[1]) < 1)
this.setState({ clicked: true })
}}
onTouchStart={
// click on touch screens
isMobile || isIPad13 ? () => this.setState({ clicked: true }) : null
}
center={center}
minZoom={0.2}
maxZoom={5}
disableZooming={isMobile || isIPad13}
disablePanning={isMobile || isIPad13}
>
{![ str.WORLD_MAP, str.US_MAP ].includes(this.props.currentMap) && (
<Geographies
geography={`maps/${this.props.currentMap === str.US_MAP2
? 'USA'
: this.props.currentMap === str.HONGKONG_MAP ? 'CHN_1' : 'WORLD'}.json`}
onMouseEnter={() => {
if (!this.state.loaded) {
this.setState({ loaded: true })
this.props.tooltipRebuild()
}
}}
>
{({ geographies }) =>
geographies.map((geo) => {
let counts = 0
if (geo.properties.REGION != null) {
const region = getDataFromRegion(data, geo.properties.REGION.split('.'))
if (region && region[metric] && region[metric][date])
counts = region[metric][date]
}
const backgroundMap =
this.props.currentMap === str.US_MAP2
? str.US_MAP
: this.props.currentMap === str.HONGKONG_MAP
? str.CHINA_MAP1
: str.WORLD_MAP
const name = geo.properties[maps[backgroundMap].name_key[lang_map]]
const isCurrentCountryOrState =
backgroundMap === str.WORLD_MAP
? geo.properties.CHINESE_NAME === currentRegion[0]
: geo.properties.CHINESE_NAME === currentRegion[1]
if (isCurrentCountryOrState) return <div />
if (backgroundMap === str.US_MAP && currentRegion.length === 1) return <div />
return (
<Geography
className="map-geography"
key={geo.rsmKey}
geography={geo}
data-tip={`${name} <span class="plot-tooltip-bold">${counts}</span>`}
style={{
default: {
fill: darkMode ? 'var(--darker-grey)' : '#fff',
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2
},
hover: {
fill: `url("#background-lines") ${darkMode ? '#333' : '#ddd'}`,
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2,
cursor: counts > 0 ? 'pointer' : 'default'
},
pressed: {
fill: `url("#background-lines") ${darkMode ? '#333' : '#ddd'}`,
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2,
cursor: counts > 0 ? 'pointer' : 'default'
}
}}
onClick={this.handleGeographyClick(geo.properties.REGION)}
/>
)
})}
</Geographies>
)}
<Geographies
geography={`maps/${currentMap.filename}`}
onMouseEnter={() => {
if (!this.state.loaded) {
this.setState({ loaded: true })
this.props.tooltipRebuild()
}
}}
>
{({ geographies }) =>
geographies.map((geo, i) => {
let counts = 0
if (geo.properties.REGION != null) {
const region = getDataFromRegion(data, geo.properties.REGION.split('.'))
if (region && region[metric] && region[metric][date])
counts = region[metric][date]
}
const name = geo.properties[currentMap.name_key[lang_map]]
let isCurrentRegion =
geo.properties[currentMap.name_key.zh] ===
currentRegion[currentRegion.length - 1]
if (currentMap.parent_key)
isCurrentRegion =
isCurrentRegion &&
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 2]
// highlight all cities in the province
let isParentRegion = false
if (currentMap.parent_key) {
isParentRegion =
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 1]
if (currentRegion.length >= 3)
isParentRegion =
isParentRegion ||
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 2]
if (
currentRegion.length === 1 ||
currentRegion[currentRegion.length - 1] === str.MAINLAND_CHINA_ZH
)
isParentRegion = true
isParentRegion = isParentRegion || isCurrentRegion
} else {
isParentRegion = true
}
const strokeColor =
counts === 0 ? greyStrokeColor : this.getStrokeColor(counts, isUsState)
// US map
if (this.props.currentMap === str.US_MAP2 && !isParentRegion) return <div />
return (
<Fragment key={`fragment-${geo.rsmKey}`}>
<Geography
key={geo.rsmKey}
className="map-geography"
geography={geo}
data-tip={`${name} <span class="plot-tooltip-bold">${counts}</span>`}
style={{
default: {
fill: isCurrentRegion
? `url("#highlightLines-${i}") ${greyStrokeColor}`
: counts > 0 ? colorScale(counts) : 'url("#lines")',
stroke: strokeColor,
strokeWidth: isCurrentRegion ? 1 : 0,
opacity: isParentRegion ? 1 : 0.2
},
hover: {
fill: `url("#highlightLines-${i}") ${greyStrokeColor}`,
strokeWidth: 1,
stroke: strokeColor,
cursor: counts > 0 ? 'pointer' : 'default'
},
pressed: {
fill: `url("#highlightLines-${i}") ${greyStrokeColor}`,
strokeWidth: 1,
stroke: strokeColor,
cursor: counts > 0 ? 'pointer' : 'default'
}
}}
onClick={this.handleGeographyClick(geo.properties.REGION)}
/>
<PatternLines
id={`highlightLines-${i}`}
height={6}
width={6}
stroke={strokeColor}
strokeWidth={1}
background={
counts !== 0 ? (
colorScale(counts)
) : darkMode ? (
'var(--darker-grey)'
) : (
'#fff'
)
}
orientation={[ 'diagonal' ]}
/>
</Fragment>
)
})}
</Geographies>
{this.props.currentMap === str.WORLD_MAP &&
this.state.showTransmissions &&
transmissions
.filter((trans) => parseDate(trans.date) <= parseDate(date))
.map((trans, i) => {
return (
<Line
keys={`transmission-${i}`}
from={coord[trans.from].split(',').map((c) => parseFloat(c))}
to={coord[trans.to].split(',').map((c) => parseFloat(c))}
stroke={darkMode ? 'rgba(222,73,104,0.9)' : 'rgba(222, 73, 104, 0.5)'}
strokeWidth={1}
strokeLinecap="round"
style={{
pointerEvents: 'none'
}}
/>
)
})}
{[ str.WORLD_MAP, str.CHINA_MAP1, str.CHINA_MAP2 ].includes(this.props.currentMap) && (
<Marker key={'wuhan'} coordinates={[ 114.2, 30.3 ]}>
<g
fill="none"
stroke="var(--primary-color-4)"
strokeWidth="2"
pointerEvents="none"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="3" />
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
</g>
</Marker>
)}
{(this.props.currentMap === str.WORLD_MAP || this.props.currentMap === str.JAPAN_MAP) && (
<Marker key={'diamond-princess'} coordinates={[ 139.6, 35.4 ]}>
<FaShip
size={this.props.currentMap === str.WORLD_MAP ? 18 : 36}
color={colorScale(cruiseCounts)}
className="map-ship"
data-tip={`${lang === 'zh'
? str.DIAMOND_PRINCESS_ZH
: cruiseData.ENGLISH} <span class="plot-tooltip-bold">${cruiseCounts}</span>`}
style={{
stroke: cruiseStrokeColor,
visibility: cruiseCounts > 0 ? 'visible' : 'hidden',
strokeWidth:
currentRegion[currentRegion.length - 1] === str.DIAMOND_PRINCESS_ZH ? 30 : 0
}}
onClick={() =>
this.props.regionToggle([ str.INTL_CONVEYANCE_ZH, str.DIAMOND_PRINCESS_ZH ])}
/>
</Marker>
)}
</ZoomableGroup>
</ComposableMap>
</Fragment>
)
}
