muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

added flow menus

Browse source
This commit is contained in:
Fedor Katurov 2021-10-12 18:04:35 +07:00
parent 65d13afab9
commit c8204a41a2
13 changed files with 358 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/components/flow/FlowCell/index.tsx
View file

@ -3,47 +3,84 @@ import styles from './styles.module.scss';
import { NavLink } from 'react-router-dom';
import { CellShade } from '~/components/flow/CellShade';
import { FlowCellImage } from '~/components/flow/FlowCellImage';
import { FlowDisplayVariant } from '~/redux/types';
import { FlowDisplay, FlowDisplayVariant, INode } from '~/redux/types';
import { FlowCellText } from '~/components/flow/FlowCellText';
import classNames from 'classnames';
import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
import { useFlowCellControls } from '~/utils/hooks/flow/useFlowCellControls';
interface Props {
id: INode['id'];
to: string;
title: string;
image?: string;
color?: string;
text?: string;
display?: FlowDisplayVariant;
flow: FlowDisplay;
canEdit?: boolean;
onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
}
const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title }) => {
const withText = ((!!display && display !== 'single') || !image) && !!text;
const FlowCell: FC<Props> = ({
id,
color,
to,
image,
flow,
text,
title,
canEdit,
onChangeCellView,
}) => {
const withText = ((!!flow.display && flow.display !== 'single') || !image) && !!text;
const {
hasDescription,
setViewHorizontal,
setViewVertical,
setViewQuadro,
setViewSingle,
toggleViewDescription,
} = useFlowCellControls(id, text, flow, onChangeCellView);
return (
<NavLink className={classNames(styles.cell, styles[display || 'single'])} to={to}>
{withText && (
<FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
{text!}
</FlowCellText>
)}
{image && (
<FlowCellImage
src={image}
height={400}
className={styles.thumb}
style={{ backgroundColor: color }}
/>
)}
<CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
{!withText && (
<div className={styles.title_wrapper}>
<h4 className={styles.title}>{title}</h4>
<div className={classNames(styles.cell, styles[flow.display || 'single'])}>
{canEdit && (
<div className={styles.menu}>
<FlowCellMenu
hasDescription={hasDescription}
setViewHorizontal={setViewHorizontal}
setViewQuadro={setViewQuadro}
setViewSingle={setViewSingle}
setViewVertical={setViewVertical}
toggleViewDescription={toggleViewDescription}
/>
</div>
)}
</NavLink>
<NavLink className={styles.link} to={to}>
{withText && (
<FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
{text!}
</FlowCellText>
)}
{image && (
<FlowCellImage
src={image}
height={400}
className={styles.thumb}
style={{ backgroundColor: color }}
/>
)}
<CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
{!withText && (
<div className={styles.title_wrapper}>
<h4 className={styles.title}>{title}</h4>
</div>
)}
</NavLink>
</div>
);
};