Sha256: dfa90a801713425eda371aa2857b1db76e253f7bd8a685dc3589b38beb31cff9
Contents?: true
Size: 1.76 KB
Versions: 1605
Compression:
Stored size: 1.76 KB
Contents
import React, { useState } from 'react'
import Image from '../_image'
import Select from '../../pb_select/_select'
import FlexItem from '../../pb_flex/_flex_item'
import Flex from '../../pb_flex/_flex'
import Button from '../../pb_button/_button'
const TransitionImage = (props) => {
const [transition, setTransition] = useState('')
const [apply, setApply] = useState({
url: '',
transition: '',
})
const loadImage = () => {
document.querySelector('.image').classList.remove(transition, 'lazyloaded')
setApply({
url: 'https://unsplash.it/500/400/?image=634',
transition: transition,
},
document.querySelector('.image').classList.add(transition, 'lazyload')
)
}
const handleTransition = ({ target }) => {
setTransition(target.value)
}
const options = [
{
value: 'fade',
},
{
value: 'blur',
},
{
value: 'scale',
},
]
return (
<>
<Flex>
<FlexItem fixedSize="250px">
<Select
blankSelection="Select a Transition..."
label=""
onChange={handleTransition}
options={options}
{...props}
/>
</FlexItem>
<FlexItem>
<Button
disabled={transition === '' ? true : false}
marginLeft="sm"
onClick={loadImage}
text="Load Image"
{...props}
/>
</FlexItem>
</Flex>
<div style={{ display: apply.url === '' ? 'none' : 'block' }}>
<Image
alt="picture of a misty forest"
className="image"
transition={apply.transition}
url={apply.url}
{...props}
/>
</div>
</>
)
}
export default TransitionImage
Version data entries
1,605 entries across 1,605 versions & 2 rubygems