Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Hover state for form placement component

Browse Source 
[MAILPOET-2738]
This commit is contained in:
Pavel Dohnal
2020-03-16 13:02:12 +01:00
committed by Veljko V
parent c9a2a44970
commit 15df4ec37c
2 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import React, { useState } from 'react';
import classnames from 'classnames';
import SettingsIcon from './settings_icon';
@@ -7,24 +8,44 @@ type Props = {
icon: JSX.Element,
}
const FormPlacementOption = ({ label, icon }: Props) => (
<div className="form-placement-option">
<div>
<div className="form-placement-option-settings">
<div className="form-placement-settings-icon">
{SettingsIcon}
const FormPlacementOption = ({ label, icon }: Props) => {
const [hover, setHover] = useState(false);
return (
<div
className="form-placement-option"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<div>
<div className="form-placement-option-settings">
<div
className={
classnames(
'form-placement-settings-icon',
{ 'form-placement-settings-icon-hover': hover }
)
}
>
{SettingsIcon}
</div>
{
hover
&& <div className="form-placement-settings-oval" />
}
</div>
<div className="form-placement-option-icon">
{icon}
</div>
{/* todo next line only show on hover */}
<div className="form-placement-settings-oval" />
</div>
<div className="form-placement-option-icon">
{icon}
<div className="form-placement-option-label">
<p>{label}</p>
</div>
{
hover
&& <div className="form-placement-settings-overlay" />
}
</div>
<div className="form-placement-option-label">
<p>{label}</p>
</div>
</div>
);
);
};
export default FormPlacementOption;