mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 19:16:41 +07:00
complete item editing
This commit is contained in:
parent
7513f79b93
commit
0cbbc0ce8a
12 changed files with 94 additions and 34 deletions
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue