complete item editing

This commit is contained in:
muerwre 2019-03-07 11:49:40 +07:00
parent 7513f79b93
commit 0cbbc0ce8a
12 changed files with 94 additions and 34 deletions

View file

@ -64,6 +64,10 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
menu_target,
});
hideMenu = (): void => this.setState({
menu_target: null,
});
showDropCard = (editor_target: IRouteListItem['_id']): void => this.setState({
editor_target,
menu_target: null,
@ -211,6 +215,7 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
startEditing={this.startEditing}
stopEditing={this.stopEditing}
showMenu={this.showMenu}
hideMenu={this.hideMenu}
showDropCard={this.showDropCard}
dropRoute={this.dropRoute}
modifyRoute={this.modifyRoute}

View file

@ -4,6 +4,7 @@ import { Icon } from '$components/panels/Icon';
import { MapListDialog } from "$components/dialogs/MapListDialog";
import { Tooltip } from "$components/panels/Tooltip";
import { ReactElement } from "react";
import classnames from 'classnames';
interface Props {
_id: string,
@ -16,14 +17,15 @@ interface Props {
startEditing: typeof MapListDialog.startEditing,
stopEditing: typeof MapListDialog.stopEditing,
showMenu: typeof MapListDialog.showMenu,
hideMenu: typeof MapListDialog.hideMenu,
showDropCard: typeof MapListDialog.showDropCard,
}
export const RouteRowView = ({
title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard
title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard, hideMenu,
}: Props): ReactElement<Props, null> => (
<div
className="route-row-view"
className={classnames('route-row-view', { has_menu: (tab === 'mine') })}
>
<div
className="route-row"
@ -44,18 +46,27 @@ export const RouteRowView = ({
</span>
</div>
</div>
<div className="route-row-edit-button pointer" onClick={() => showMenu(_id)}>
<Icon icon="icon-more-vert" />
</div>
<div className="route-row-edit-menu pointer">
<div onMouseDown={() => showDropCard(_id)}>
<Tooltip>Удалить</Tooltip>
<Icon icon="icon-trash-3" size={32} />
</div>
<div onMouseDown={() => startEditing(_id)}>
<Tooltip>Редактировать</Tooltip>
<Icon icon="icon-edit-1" size={32} />
</div>
</div>
{
tab === 'mine' &&
<React.Fragment>
<div
className="route-row-edit-button pointer"
onMouseOver={showMenu.bind(null, _id)}
onMouseOut={hideMenu}
>
<Icon icon="icon-more-vert" />
<div className="route-row-edit-menu pointer">
<div onMouseDown={showDropCard.bind(null, _id)}>
<Tooltip>Удалить</Tooltip>
<Icon icon="icon-trash-3" size={32} />
</div>
<div onMouseDown={startEditing.bind(null, _id)} className="modify-button">
<Tooltip>Редактировать</Tooltip>
<Icon icon="icon-edit-1" size={32} />
</div>
</div>
</div>
</React.Fragment>
}
</div>
);

View file

@ -20,6 +20,7 @@ interface Props {
startEditing: typeof MapListDialog.startEditing,
stopEditing: typeof MapListDialog.stopEditing,
showMenu: typeof MapListDialog.showMenu,
hideMenu: typeof MapListDialog.hideMenu,
showDropCard: typeof MapListDialog.showDropCard,
dropRoute: typeof MapListDialog.dropRoute,
modifyRoute: typeof MapListDialog.modifyRoute,
@ -30,7 +31,7 @@ interface Props {
export const RouteRowWrapper = ({
title, distance, _id, openRoute, tab, startEditing, showMenu,
showDropCard, is_public, is_editing_target, is_menu_target, is_editing_mode,
dropRoute, stopEditing, modifyRoute,
dropRoute, stopEditing, modifyRoute, hideMenu,
}: Props): ReactElement<Props, null> => (
<div
className={classnames('route-row-wrapper', {
@ -67,6 +68,7 @@ export const RouteRowWrapper = ({
startEditing={startEditing}
stopEditing={stopEditing}
showMenu={showMenu}
hideMenu={hideMenu}
showDropCard={showDropCard}
/>
}