HoldToRevealButton component (#13785)
* Created 'HoldToRevealButton' component * Added new line within the .svg files * Lint fix * CSS fix according to BEM * Modified unit testfeature/default_network_editable
filipsekulic
3 years ago
committed by
GitHub
parent
40095cce67
commit
52b043c4f2
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 616 B |
@ -0,0 +1,192 @@ |
|||||||
|
import React, { useCallback, useContext, useRef, useState } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import Button from '../../ui/button'; |
||||||
|
import { I18nContext } from '../../../contexts/i18n'; |
||||||
|
import Box from '../../ui/box/box'; |
||||||
|
import { |
||||||
|
ALIGN_ITEMS, |
||||||
|
DISPLAY, |
||||||
|
JUSTIFY_CONTENT, |
||||||
|
} from '../../../helpers/constants/design-system'; |
||||||
|
|
||||||
|
const radius = 14; |
||||||
|
const strokeWidth = 2; |
||||||
|
const radiusWithStroke = radius - strokeWidth / 2; |
||||||
|
|
||||||
|
export default function HoldToRevealButton({ buttonText, onLongPressed }) { |
||||||
|
const t = useContext(I18nContext); |
||||||
|
const isLongPressing = useRef(false); |
||||||
|
const [isUnlocking, setIsUnlocking] = useState(false); |
||||||
|
const [hasTriggeredUnlock, setHasTriggeredUnlock] = useState(false); |
||||||
|
|
||||||
|
/** |
||||||
|
* Prevent animation events from propogating up |
||||||
|
* |
||||||
|
* @param e - Native animation event - React.AnimationEvent<HTMLDivElement> |
||||||
|
*/ |
||||||
|
const preventPropogation = (e) => { |
||||||
|
e.stopPropagation(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Event for mouse click down |
||||||
|
*/ |
||||||
|
const onMouseDown = () => { |
||||||
|
isLongPressing.current = true; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Event for mouse click up |
||||||
|
*/ |
||||||
|
const onMouseUp = () => { |
||||||
|
isLongPressing.current = false; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Progress cirle completed. Begin next animation phase (Shrink halo and show unlocked padlock) |
||||||
|
*/ |
||||||
|
const onProgressComplete = () => { |
||||||
|
isLongPressing.current && setIsUnlocking(true); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 2. Trigger onLongPressed callback. Begin next animation phase (Shrink unlocked padlock and fade in original content) |
||||||
|
* |
||||||
|
* @param e - Native animation event - React.AnimationEvent<HTMLDivElement> |
||||||
|
*/ |
||||||
|
const triggerOnLongPressed = (e) => { |
||||||
|
onLongPressed(); |
||||||
|
setHasTriggeredUnlock(true); |
||||||
|
preventPropogation(e); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 3. Reset animation states |
||||||
|
*/ |
||||||
|
const resetAnimationStates = () => { |
||||||
|
setIsUnlocking(false); |
||||||
|
setHasTriggeredUnlock(false); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderPreCompleteContent = useCallback(() => { |
||||||
|
return ( |
||||||
|
<Box |
||||||
|
className={`hold-to-reveal-button__absolute-fill ${ |
||||||
|
isUnlocking ? 'hold-to-reveal-button__invisible' : null |
||||||
|
} ${ |
||||||
|
hasTriggeredUnlock ? 'hold-to-reveal-button__main-icon-show' : null |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<Box className="hold-to-reveal-button__absolute-fill"> |
||||||
|
<svg className="hold-to-reveal-button__circle-svg"> |
||||||
|
<circle |
||||||
|
className="hold-to-reveal-button__circle-background" |
||||||
|
cx={radius} |
||||||
|
cy={radius} |
||||||
|
r={radiusWithStroke} |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</Box> |
||||||
|
<Box className="hold-to-reveal-button__absolute-fill"> |
||||||
|
<svg className="hold-to-reveal-button__circle-svg"> |
||||||
|
<circle |
||||||
|
onTransitionEnd={onProgressComplete} |
||||||
|
className="hold-to-reveal-button__circle-foreground" |
||||||
|
cx={radius} |
||||||
|
cy={radius} |
||||||
|
r={radiusWithStroke} |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</Box> |
||||||
|
<Box |
||||||
|
display={DISPLAY.FLEX} |
||||||
|
alignItems={ALIGN_ITEMS.CENTER} |
||||||
|
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||||
|
className="hold-to-reveal-button__lock-icon-container" |
||||||
|
> |
||||||
|
<img |
||||||
|
src="images/lock-icon.svg" |
||||||
|
alt={t('padlock')} |
||||||
|
className="hold-to-reveal-button__lock-icon" |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}, [isUnlocking, hasTriggeredUnlock, t]); |
||||||
|
|
||||||
|
const renderPostCompleteContent = useCallback(() => { |
||||||
|
return isUnlocking ? ( |
||||||
|
<div |
||||||
|
className={`hold-to-reveal-button__absolute-fill ${ |
||||||
|
hasTriggeredUnlock ? 'hold-to-reveal-button__unlock-icon-hide' : null |
||||||
|
}`}
|
||||||
|
onAnimationEnd={resetAnimationStates} |
||||||
|
> |
||||||
|
<div |
||||||
|
onAnimationEnd={preventPropogation} |
||||||
|
className="hold-to-reveal-button__absolute-fill hold-to-reveal-button__circle-static-outer-container" |
||||||
|
> |
||||||
|
<svg className="hold-to-reveal-button__circle-svg"> |
||||||
|
<circle |
||||||
|
className="hold-to-reveal-button__circle-static-outer" |
||||||
|
cx={14} |
||||||
|
cy={14} |
||||||
|
r={14} |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
onAnimationEnd={preventPropogation} |
||||||
|
className="hold-to-reveal-button__absolute-fill hold-to-reveal-button__circle-static-inner-container" |
||||||
|
> |
||||||
|
<svg className="hold-to-reveal-button__circle-svg"> |
||||||
|
<circle |
||||||
|
className="hold-to-reveal-button__circle-static-inner" |
||||||
|
cx={14} |
||||||
|
cy={14} |
||||||
|
r={12} |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className="hold-to-reveal-button__unlock-icon-container" |
||||||
|
onAnimationEnd={triggerOnLongPressed} |
||||||
|
> |
||||||
|
<img |
||||||
|
src="images/unlock-icon.svg" |
||||||
|
alt={t('padlock')} |
||||||
|
className="hold-to-reveal-button__unlock-icon" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null; |
||||||
|
}, [isUnlocking, hasTriggeredUnlock, t]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Button |
||||||
|
onMouseDown={onMouseDown} |
||||||
|
onMouseUp={onMouseUp} |
||||||
|
type="primary" |
||||||
|
icon={ |
||||||
|
<Box marginRight={2} className="hold-to-reveal-button__icon-container"> |
||||||
|
{renderPreCompleteContent()} |
||||||
|
{renderPostCompleteContent()} |
||||||
|
</Box> |
||||||
|
} |
||||||
|
className="hold-to-reveal-button__button-hold" |
||||||
|
> |
||||||
|
{buttonText} |
||||||
|
</Button> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
HoldToRevealButton.propTypes = { |
||||||
|
/** |
||||||
|
* Text to be displayed on the button |
||||||
|
*/ |
||||||
|
buttonText: PropTypes.string.isRequired, |
||||||
|
/** |
||||||
|
* Function to be called after the animation is finished |
||||||
|
*/ |
||||||
|
onLongPressed: PropTypes.func.isRequired, |
||||||
|
}; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import HoldToRevealButton from './hold-to-reveal-button'; |
||||||
|
|
||||||
|
export default { |
||||||
|
title: 'Components/App/HoldToRevealButton', |
||||||
|
id: __filename, |
||||||
|
argTypes: { |
||||||
|
buttonText: { control: 'text' }, |
||||||
|
onLongPressed: { action: 'Revealing the SRP' }, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export const DefaultStory = (args) => { |
||||||
|
return <HoldToRevealButton {...args} />; |
||||||
|
}; |
||||||
|
|
||||||
|
DefaultStory.storyName = 'Default'; |
||||||
|
|
||||||
|
DefaultStory.args = { |
||||||
|
buttonText: 'Hold to reveal SRP', |
||||||
|
onLongPressed: () => console.log('Revealed'), |
||||||
|
}; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { render, fireEvent, waitFor } from '@testing-library/react'; |
||||||
|
import HoldToRevealButton from './hold-to-reveal-button'; |
||||||
|
|
||||||
|
describe('HoldToRevealButton', () => { |
||||||
|
let props = {}; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
const mockOnLongPressed = jest.fn(); |
||||||
|
|
||||||
|
props = { |
||||||
|
onLongPressed: mockOnLongPressed, |
||||||
|
buttonText: 'Hold to reveal SRP', |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render a button with label', () => { |
||||||
|
const { getByText } = render(<HoldToRevealButton {...props} />); |
||||||
|
|
||||||
|
expect(getByText('Hold to reveal SRP')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render a button when mouse is down and up', () => { |
||||||
|
const { getByText } = render(<HoldToRevealButton {...props} />); |
||||||
|
|
||||||
|
const button = getByText('Hold to reveal SRP'); |
||||||
|
|
||||||
|
fireEvent.mouseDown(button); |
||||||
|
|
||||||
|
expect(button).toBeDefined(); |
||||||
|
|
||||||
|
fireEvent.mouseUp(button); |
||||||
|
|
||||||
|
expect(button).toBeDefined(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not show the locked padlock when a button is long pressed and then should show it after it was lifted off before the animation concludes', () => { |
||||||
|
const { getByText } = render(<HoldToRevealButton {...props} />); |
||||||
|
|
||||||
|
const button = getByText('Hold to reveal SRP'); |
||||||
|
|
||||||
|
fireEvent.mouseDown(button); |
||||||
|
|
||||||
|
waitFor(() => { |
||||||
|
expect(button.firstChild).toHaveClass( |
||||||
|
'hold-to-reveal-button__lock-icon-container', |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
fireEvent.mouseUp(button); |
||||||
|
|
||||||
|
waitFor(() => { |
||||||
|
expect(button.firstChild).not.toHaveClass( |
||||||
|
'hold-to-reveal-button__lock-icon-container', |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show the unlocked padlock when a button is long pressed for the duration of the animation', () => { |
||||||
|
const { getByText } = render(<HoldToRevealButton {...props} />); |
||||||
|
|
||||||
|
const button = getByText('Hold to reveal SRP'); |
||||||
|
|
||||||
|
fireEvent.mouseDown(button); |
||||||
|
|
||||||
|
waitFor(() => { |
||||||
|
expect(button.firstChild).toHaveClass( |
||||||
|
'hold-to-reveal-button__unlock-icon-container', |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './hold-to-reveal-button'; |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
// Variables |
||||||
|
$circle-radius: 14px; |
||||||
|
$circle-diameter: $circle-radius * 2; |
||||||
|
// Circumference ~ (2*PI*R). We reduced the number a little to create a snappier interaction |
||||||
|
$circle-circumference: 82; |
||||||
|
$circle-stroke-width: 2px; |
||||||
|
|
||||||
|
// Keyframes |
||||||
|
@keyframes collapse { |
||||||
|
from { |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes expand { |
||||||
|
from { |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeIn { |
||||||
|
from { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hold-to-reveal-button { |
||||||
|
// Shared styles |
||||||
|
&__absolute-fill { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__icon { |
||||||
|
height: $circle-diameter; |
||||||
|
width: $circle-diameter; |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-shared { |
||||||
|
fill: transparent; |
||||||
|
stroke-width: $circle-stroke-width; |
||||||
|
} |
||||||
|
|
||||||
|
// Class styles |
||||||
|
&__button-hold { |
||||||
|
padding: 6px 13px 6px 9px !important; |
||||||
|
transform: scale(1) !important; |
||||||
|
transition: 0.5s transform !important; |
||||||
|
|
||||||
|
&:active { |
||||||
|
background-color: var(--primary-1) !important; |
||||||
|
transform: scale(1.05) !important; |
||||||
|
|
||||||
|
.hold-to-reveal-button__circle-foreground { |
||||||
|
stroke-dashoffset: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.hold-to-reveal-button__lock-icon-container { |
||||||
|
opacity: 0 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__absolute-fill { |
||||||
|
@extend .hold-to-reveal-button__absolute-fill; |
||||||
|
} |
||||||
|
|
||||||
|
&__icon-container { |
||||||
|
@extend .hold-to-reveal-button__icon; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
&__main-icon-show { |
||||||
|
animation: 0.4s fadeIn 1.2s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
&__invisible { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-svg { |
||||||
|
@extend .hold-to-reveal-button__icon; |
||||||
|
|
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-background { |
||||||
|
@extend .hold-to-reveal-button__circle-shared; |
||||||
|
|
||||||
|
stroke: var(--primary-3); |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-foreground { |
||||||
|
@extend .hold-to-reveal-button__circle-shared; |
||||||
|
|
||||||
|
stroke: var(--ui-white); |
||||||
|
stroke-dasharray: $circle-circumference; |
||||||
|
stroke-dashoffset: $circle-circumference; |
||||||
|
transition: 1s stroke-dashoffset; |
||||||
|
} |
||||||
|
|
||||||
|
&__lock-icon-container { |
||||||
|
@extend .hold-to-reveal-button__absolute-fill; |
||||||
|
|
||||||
|
transition: 0.3s opacity; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
&__lock-icon { |
||||||
|
width: 7.88px; |
||||||
|
height: 9px; |
||||||
|
} |
||||||
|
|
||||||
|
&__unlock-icon-hide { |
||||||
|
animation: 0.3s collapse 1s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-static-outer-container { |
||||||
|
animation: 0.25s collapse forwards; |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-static-outer { |
||||||
|
fill: var(--ui-white); |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-static-inner-container { |
||||||
|
animation: 0.125s collapse forwards; |
||||||
|
} |
||||||
|
|
||||||
|
&__circle-static-inner { |
||||||
|
fill: var(--primary-1); |
||||||
|
} |
||||||
|
|
||||||
|
&__unlock-icon-container { |
||||||
|
@extend .hold-to-reveal-button__absolute-fill; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transform: scale(0); |
||||||
|
animation: 0.175s expand 0.2s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
&__unlock-icon { |
||||||
|
width: 14px; |
||||||
|
height: 11px; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue