muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-26 03:26:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

dialog-editor: menu for items

Browse source
This commit is contained in:
muerwre 2019-02-27 15:08:53 +07:00
parent b8f4bace71
commit a2607b257d
4 changed files with 189 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/components/maps/RouteRow.tsx
View file

@ -2,60 +2,68 @@
import * as React from 'react';
import { Icon } from '$components/panels/Icon';
import classnames from 'classnames';
import { IMapListDialogState, MapListDialog } from "$components/dialogs/MapListDialog";
import { Tooltip } from "$components/panels/Tooltip";
interface Props {
_id: string,
tab: string,
is_editing: boolean,
selected: boolean,
title: string,
distance: number,
is_public: boolean,
mode: IMapListDialogState['selected_item_mode'],
openRoute: (_id: string) => void,
startEditing: (_id: string) => void,
stopEditing: () => void,
openRoute: typeof MapListDialog.openRoute,
startEditing: typeof MapListDialog.startEditing,
stopEditing: typeof MapListDialog.stopEditing,
showMenu: typeof MapListDialog.showMenu,
showDropCard: typeof MapListDialog.showDropCard,
key: string,
}
export const RouteRow = ({
title, distance, _id, openRoute, tab, is_editing, startEditing
title, distance, _id, openRoute, tab, selected, startEditing, showMenu, showDropCard, mode
}: Props) => (
<div className={classnames('route-row-wrapper', { is_editing })}>
{
tab === 'mine' &&
<div className="route-row-edit" onClick={() => startEditing(_id)}>
<Icon icon="icon-edit-1" />
</div>
}
<div
className="route-row"
>
<div onClick={() => openRoute(_id)}>
<div className="route-title">
<span>{(title || _id)}</span>
</div>
<div className="route-description">
<span>
<Icon icon="icon-link-1" />
{_id}
</span>
<span>
<Icon icon="icon-cycle-1" />
{(distance && `${distance} km`) || '0 km'}
</span>
</div>
<div
className={classnames('route-row-wrapper', {
selected,
has_menu: selected && mode === 'menu',
has_drop: selected && mode === 'drop',
has_edit: selected && mode === 'edit',
})}
>
<div
className="route-row"
>
<div onClick={() => openRoute(_id)}>
<div className="route-title">
<span>{(title || _id)}</span>
</div>
<div className="route-row-panel">
<div className="">
<Icon icon="icon-trash-4" size={24} />
Удалить
</div>
<div className="flex_1 justify-end" onClick={() => startEditing(_id)}>
<Icon icon="icon-edit-1" size={24} />
Правка
</div>
<div className="route-description">
<span>
<Icon icon="icon-link-1" />
{_id}
</span>
<span>
<Icon icon="icon-cycle-1" />
{(distance && `${distance} km`) || '0 km'}
</span>
</div>
</div>
</div>
<div className="route-row-edit-button pointer" onClick={() => showMenu(_id)}>
<Icon icon="icon-more-vert" />
<div className="route-row-edit-menu">
<div onClick={() => showDropCard(_id)}>
<Tooltip>Удалить</Tooltip>
<Icon icon="icon-trash-3" size={32} />
</div>
<div onClick={() => startEditing(_id)}>
<Tooltip>Редактировать</Tooltip>
<Icon icon="icon-edit-1" size={32} />
</div>
</div>
</div>
</div>
);