hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make export component use hooks

Browse Source
main
Mike Fix 6 years ago
parent 3d4459efd1
commit cac72d79ff
1 changed files with 155 additions and 151 deletions
Show Stats Download Patch File Download Diff File

306
components/ExportMenu.js
Unescape Escape View File

@ -44,173 +44,177 @@ const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) =>
const popoutStyle = { width: '280px', right: 0 } const popoutStyle = { width: '280px', right: 0 }
class ExportMenu extends React.PureComponent { function useSafari() {
input = React.createRef() const [isSafari, setSafari] = React.useState(false)
React.useEffect(() => {
setSafari(
window.navigator &&
window.navigator.userAgent.indexOf('Safari') !== -1 &&
window.navigator.userAgent.indexOf('Chrome') === -1
)
}, [])
return isSafari
}
function ExportMenu({
backgroundImage,
onChange,
exportSize,
isVisible,
toggleVisibility,
export: exportImage
}) {
const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
const online = useOnline()
const isSafari = useSafari()
const disablePNG = isSafari && (tooLarge || !online)
handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value) const input = React.useRef()
handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize) const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)
handleExport = format => () => const handleExport = format => () =>
this.props.export(format, { exportImage(format, {
filename: this.input.current.value filename: input.current.value
}) })
render() { return (
const { exportSize, isVisible, toggleVisibility, disablePNG } = this.props <div className="export-menu-container" id="export-menu">
<div className="flex">
return ( <Button
<div className="export-menu-container" id="export-menu"> border
<div className="flex"> large
<Button center
border color={COLORS.PURPLE}
large padding="0 16px"
center selected={isVisible}
color={COLORS.PURPLE} onClick={toggleVisibility}
padding="0 16px" data-cy="export-button"
selected={isVisible}
onClick={toggleVisibility}
data-cy="export-button"
>
Export
</Button>
</div>
<Popout
hidden={!isVisible}
borderColor={COLORS.PURPLE}
pointerRight="28px"
style={popoutStyle}
> >
<div className="export-row"> Export
<span className="filename">File name</span> </Button>
<Input ref={this.input} title="filename" placeholder="carbon" color={COLORS.PURPLE} /> </div>
<Popout
hidden={!isVisible}
borderColor={COLORS.PURPLE}
pointerRight="28px"
style={popoutStyle}
>
<div className="export-row">
<span className="filename">File name</span>
<Input ref={input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
</div>
<div className="export-row">
<span>Size</span>
<div className="flex">
{EXPORT_SIZES.map(({ name }, i) => (
<Button
center
key={name}
hoverColor={COLORS.PURPLE}
margin={i === EXPORT_SIZES.length - 1 ? 0 : '0 10px 0 0'}
color={exportSize === name ? COLORS.PURPLE : COLORS.DARK_PURPLE}
onClick={handleExportSizeChange(name)}
>
{name}
</Button>
))}
</div> </div>
<div className="export-row"> </div>
<span>Size</span> <div className="export-row">
<div className="flex"> <Button center color={COLORS.PURPLE} onClick={handleExport('open')}>
{EXPORT_SIZES.map(({ name }, i) => ( Open
<Button </Button>
center <div className="save-container">
key={name} <span>Copy embed</span>
hoverColor={COLORS.PURPLE} <div>
margin={i === EXPORT_SIZES.length - 1 ? 0 : '0 10px 0 0'} <CopyEmbed title="URL" mapper={toURL} margin="0 4px 0 0" />
color={exportSize === name ? COLORS.PURPLE : COLORS.DARK_PURPLE} <CopyEmbed title="IFrame" mapper={toIFrame} margin="0 0 0 4px" />
onClick={this.handleExportSizeChange(name)}
>
{name}
</Button>
))}
</div> </div>
</div> </div>
<div className="export-row"> <div className="save-container">
<Button center color={COLORS.PURPLE} onClick={this.handleExport('open')}> <span>Save as</span>
Open <div>
</Button> {!disablePNG && (
<div className="save-container">
<span>Copy embed</span>
<div>
<CopyEmbed title="URL" mapper={toURL} margin="0 4px 0 0" />
<CopyEmbed title="IFrame" mapper={toIFrame} margin="0 0 0 4px" />
</div>
</div>
<div className="save-container">
<span>Save as</span>
<div>
{!disablePNG && (
<Button
center
margin="0 8px 0 0"
hoverColor={COLORS.PURPLE}
color={COLORS.DARK_PURPLE}
onClick={this.handleExport('png')}
id="export-png"
>
PNG
</Button>
)}
<Button <Button
center center
margin="0 8px 0 0"
hoverColor={COLORS.PURPLE} hoverColor={COLORS.PURPLE}
color={COLORS.DARK_PURPLE} color={COLORS.DARK_PURPLE}
onClick={this.handleExport('svg')} onClick={handleExport('png')}
id="export-svg" id="export-png"
> >
SVG PNG
</Button> </Button>
</div> )}
<Button
center
hoverColor={COLORS.PURPLE}
color={COLORS.DARK_PURPLE}
onClick={handleExport('svg')}
id="export-svg"
>
SVG
</Button>
</div> </div>
</div> </div>
</Popout> </div>
<style jsx> </Popout>
{` <style jsx>
.export-menu-container { {`
position: relative; .export-menu-container {
color: ${COLORS.PURPLE}; position: relative;
} color: ${COLORS.PURPLE};
}
.flex {
display: flex; .flex {
height: 100%; display: flex;
} height: 100%;
}
.export-row {
display: flex; .export-row {
align-items: center; display: flex;
justify-content: space-between; align-items: center;
padding: 8px 16px; justify-content: space-between;
border-bottom: 1px solid ${COLORS.PURPLE}; padding: 8px 16px;
} border-bottom: 1px solid ${COLORS.PURPLE};
.export-row > :global(button) { }
border-right: 1px solid ${COLORS.PURPLE}; .export-row > :global(button) {
} border-right: 1px solid ${COLORS.PURPLE};
.export-row:last-child { }
border-bottom: none; .export-row:last-child {
padding: 0; border-bottom: none;
} padding: 0;
}
.filename {
flex-basis: 72px; .filename {
} flex-basis: 72px;
}
.save-container {
display: flex; .save-container {
flex: 1; display: flex;
flex-direction: column; flex: 1;
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
padding: 12px 16px; align-items: center;
} padding: 12px 16px;
.save-container > div { }
margin-top: 6px; .save-container > div {
display: flex; margin-top: 6px;
flex: 1; display: flex;
} flex: 1;
}
.save-container:first-of-type {
padding: 12px 12px; .save-container:first-of-type {
border-right: 1px solid ${COLORS.PURPLE}; padding: 12px 12px;
} border-right: 1px solid ${COLORS.PURPLE};
`} }
</style> `}
</div> </style>
) </div>
} )
} }
export default managePopout(function({ backgroundImage, ...props }) { export default managePopout(React.memo(ExportMenu))
const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
const online = useOnline()
const [isSafari, setSafari] = React.useState(false)
React.useEffect(() => {
setSafari(
window.navigator &&
window.navigator.userAgent.indexOf('Safari') !== -1 &&
window.navigator.userAgent.indexOf('Chrome') === -1
)
}, [])
const disablePNG = isSafari && (tooLarge || !online)
return <ExportMenu {...props} disablePNG={disablePNG} />
})

Write Preview
Loading…
Cancel
Save