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

set flow cell view actions

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 14:38:55 +07:00
parent a6385cf4cf
commit 744f79053b
7 changed files with 160 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/flow/Cell/index.tsx
View file

@ -5,14 +5,24 @@ import classNames from 'classnames';
import * as styles from './styles.scss';
import path from 'ramda/es/path';
import { Icon } from '~/components/input/Icon';
import { flowSetCellView } from '~/redux/flow/actions';
interface IProps {
node: INode;
onSelect: (id: INode['id'], type: INode['type']) => void;
is_text?: boolean;
can_edit?: boolean;
onSelect: (id: INode['id'], type: INode['type']) => void;
onChangeCellView: typeof flowSetCellView;
}
const Cell: FC<IProps> = ({ node: { id, title, thumbnail, type, blocks }, onSelect }) => {
const Cell: FC<IProps> = ({
node: { id, title, thumbnail, type, blocks, flow },
can_edit,
onSelect,
onChangeCellView,
}) => {
const [is_loaded, setIsLoaded] = useState(false);
const onImageLoad = useCallback(() => {
@ -23,14 +33,50 @@ const Cell: FC<IProps> = ({ node: { id, title, thumbnail, type, blocks }, onSele
const text = path([0, 'text'], blocks);
const toggleViewDescription = useCallback(() => {
const show_description = flow && !flow.show_description;
const display = (flow && flow.display) || 'single';
onChangeCellView(id, { show_description, display });
}, [id, flow, onChangeCellView]);
const setViewSingle = useCallback(() => {
const show_description = flow && !!flow.show_description;
onChangeCellView(id, { show_description, display: 'single' });
}, [id, flow, onChangeCellView]);
const setViewHorizontal = useCallback(() => {
const show_description = flow && !!flow.show_description;
onChangeCellView(id, { show_description, display: 'horizontal' });
}, [id, flow, onChangeCellView]);
const setViewVertical = useCallback(() => {
const show_description = flow && !!flow.show_description;
onChangeCellView(id, { show_description, display: 'vertical' });
}, [id, flow, onChangeCellView]);
const setViewQuadro = useCallback(() => {
const show_description = flow && !!flow.show_description;
onChangeCellView(id, { show_description, display: 'quadro' });
}, [id, flow, onChangeCellView]);
return (
<div
className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}
onClick={onClick}
className={classNames(styles.cell, (flow && flow.display) || 'single', { is_text: false })}
>
<div className={styles.menu}>MENU</div>
{can_edit && (
<div className={styles.menu}>
<div className={styles.menu_content}>
<Icon icon="cell-single" onClick={toggleViewDescription} />
<div className={styles.menu_sep} />
<Icon icon="cell-single" onClick={setViewSingle} />
<Icon icon="cell-double-h" onClick={setViewHorizontal} />
<Icon icon="cell-double-v" onClick={setViewVertical} />
<Icon icon="cell-quadro" onClick={setViewQuadro} />
</div>
</div>
)}
<div className={styles.face}>
<div className={styles.face} onClick={onClick}>
{title && <div className={styles.title}>{title}</div>}
{text && <div className={styles.text}>{text}</div>}
</div>