mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
moved editor to separate reducer
This commit is contained in:
Fedor Katurov
parent
e950d98b73
commit
87670770b0
38 changed files with 1425 additions and 1069 deletions
|
|
@ -1,17 +1,18 @@
|
|||
import React from 'react';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import { MODES } from '~/constants/modes';
|
||||
import { IStickerPack, STICKERS } from '~/constants/stickers';
|
||||
import { STICKERS } from '~/constants/stickers';
|
||||
import { StickerIcon } from '~/components/StickerIcon';
|
||||
import { IRootReducer } from '~/redux/user';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectEditor } from '~/redux/editor/selectors'
|
||||
|
||||
interface Props {
|
||||
mode: IRootReducer['mode'],
|
||||
sticker: string,
|
||||
set: keyof IStickerPack,
|
||||
}
|
||||
const mapStateToProps = state => ({
|
||||
editor: selectEditor
|
||||
});
|
||||
|
||||
export class Cursor extends React.PureComponent<Props, {}> {
|
||||
const mapDispatchToProps = {};
|
||||
|
||||
class CursorUnconnected extends React.PureComponent<Props, {}> {
|
||||
componentDidMount() {
|
||||
window.addEventListener('mousemove', this.moveCursor);
|
||||
}
|
||||
|
|
@ -27,15 +28,27 @@ export class Cursor extends React.PureComponent<Props, {}> {
|
|||
cursor: HTMLElement = null;
|
||||
|
||||
render() {
|
||||
const { mode, set, sticker } = this.props;
|
||||
const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]);
|
||||
const {
|
||||
editor: { mode, set, sticker },
|
||||
} = this.props;
|
||||
|
||||
const activeSticker = sticker && set && STICKERS[set] && STICKERS[set].layers[sticker];
|
||||
|
||||
return (
|
||||
<div className="cursor-tooltip desktop-only" ref={el => { this.cursor = el; }}>
|
||||
{ mode === MODES.ROUTER && <Icon icon="icon-router" />}
|
||||
{ mode === MODES.POLY && <Icon icon="icon-poly" />}
|
||||
{ mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} /> }
|
||||
<div
|
||||
className="cursor-tooltip desktop-only"
|
||||
ref={el => {
|
||||
this.cursor = el;
|
||||
}}
|
||||
>
|
||||
{mode === MODES.ROUTER && <Icon icon="icon-router" />}
|
||||
{mode === MODES.POLY && <Icon icon="icon-poly" />}
|
||||
{mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const Cursor = connect()(CursorUnconnected);
|
||||
|
||||
export { Cursor }
|
||||
|
|
@ -2,21 +2,23 @@ import React from 'react';
|
|||
|
||||
import { MODES } from '~/constants/modes';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import { setMode, stopEditing } from "~/redux/user/actions";
|
||||
import { editorSetMode, editorStopEditing } from '~/redux/editor/actions';
|
||||
|
||||
type Props = {
|
||||
stopEditing: typeof stopEditing,
|
||||
setMode: typeof setMode,
|
||||
width: number,
|
||||
const mapStateToProps = () => ({});
|
||||
const mapDispatchToProps = {
|
||||
editorSetMode,
|
||||
editorStopEditing,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & { width?: number };
|
||||
|
||||
export class CancelDialog extends React.Component<Props, void> {
|
||||
cancel = () => {
|
||||
this.props.stopEditing();
|
||||
this.props.editorStopEditing();
|
||||
};
|
||||
|
||||
proceed = () => {
|
||||
this.props.setMode(MODES.NONE);
|
||||
this.props.editorSetMode(MODES.NONE);
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@ import {
|
|||
searchSetDistance,
|
||||
searchSetTitle,
|
||||
searchSetTab,
|
||||
setDialogActive,
|
||||
mapsLoadMore,
|
||||
dropRoute,
|
||||
modifyRoute,
|
||||
toggleRouteStarred,
|
||||
} from '~/redux/user/actions';
|
||||
|
||||
import { editorSetDialogActive } from '~/redux/editor/actions';
|
||||
|
||||
import { isMobile } from '~/utils/window';
|
||||
import classnames from 'classnames';
|
||||
|
||||
|
|
@ -19,28 +21,60 @@ import Range from 'rc-slider/lib/Range';
|
|||
import { TABS, TABS_TITLES } from '~/constants/dialogs';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import { pushPath } from '~/utils/history';
|
||||
import { IRootState, IRouteListItem } from '~/redux/user';
|
||||
import { IRouteListItem } from '~/redux/user';
|
||||
import { ROLES } from '~/constants/auth';
|
||||
import { IState } from '~/redux/store';
|
||||
|
||||
export interface IMapListDialogProps extends IRootState {
|
||||
marks: { [x: number]: string };
|
||||
routes_sorted: Array<IRouteListItem>;
|
||||
routes: IRootState['routes'];
|
||||
ready: IRootState['ready'];
|
||||
role: IRootState['user']['role'];
|
||||
|
||||
mapsLoadMore: typeof mapsLoadMore;
|
||||
searchSetDistance: typeof searchSetDistance;
|
||||
searchSetTitle: typeof searchSetTitle;
|
||||
searchSetTab: typeof searchSetTab;
|
||||
setDialogActive: typeof setDialogActive;
|
||||
dropRoute: typeof dropRoute;
|
||||
modifyRoute: typeof modifyRoute;
|
||||
toggleRouteStarred: typeof toggleRouteStarred;
|
||||
}
|
||||
const mapStateToProps = ({
|
||||
editor: { editing },
|
||||
user: {
|
||||
routes,
|
||||
user: { role },
|
||||
},
|
||||
}: IState) => {
|
||||
if (routes.filter.max >= 9999) {
|
||||
return {
|
||||
routes,
|
||||
editing,
|
||||
marks: {},
|
||||
ready: false,
|
||||
role,
|
||||
};
|
||||
}
|
||||
|
||||
export interface IMapListDialogState {
|
||||
return {
|
||||
role,
|
||||
routes,
|
||||
editing,
|
||||
ready: true,
|
||||
marks: [...new Array(Math.floor((routes.filter.max - routes.filter.min) / 25) + 1)].reduce(
|
||||
(obj, el, i) => ({
|
||||
...obj,
|
||||
[routes.filter.min + i * 25]: ` ${routes.filter.min + i * 25}${
|
||||
routes.filter.min + i * 25 >= 200 ? '+' : ''
|
||||
}
|
||||
`,
|
||||
}),
|
||||
{}
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = {
|
||||
searchSetDistance,
|
||||
searchSetTitle,
|
||||
searchSetTab,
|
||||
editorSetDialogActive,
|
||||
mapsLoadMore,
|
||||
dropRoute,
|
||||
modifyRoute,
|
||||
toggleRouteStarred,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
|
||||
|
||||
export interface State {
|
||||
menu_target: IRouteListItem['address'];
|
||||
editor_target: IRouteListItem['address'];
|
||||
|
||||
|
|
@ -48,7 +82,7 @@ export interface IMapListDialogState {
|
|||
is_dropping: boolean;
|
||||
}
|
||||
|
||||
class MapListDialogUnconnected extends React.Component<IMapListDialogProps, IMapListDialogState> {
|
||||
class MapListDialogUnconnected extends React.Component<Props, State> {
|
||||
state = {
|
||||
menu_target: null,
|
||||
editor_target: null,
|
||||
|
|
@ -92,14 +126,11 @@ class MapListDialogUnconnected extends React.Component<IMapListDialogProps, IMap
|
|||
};
|
||||
|
||||
openRoute = (_id: string): void => {
|
||||
if (isMobile()) this.props.setDialogActive(false);
|
||||
if (isMobile()) this.props.editorSetDialogActive(false);
|
||||
|
||||
// pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
|
||||
this.stopEditing();
|
||||
|
||||
pushPath(`/${_id}`);
|
||||
|
||||
// pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
|
||||
};
|
||||
|
||||
onScroll = (e: {
|
||||
|
|
@ -148,7 +179,7 @@ class MapListDialogUnconnected extends React.Component<IMapListDialogProps, IMap
|
|||
filter: { min, max, title, distance, tab },
|
||||
},
|
||||
marks,
|
||||
}: IMapListDialogProps = this.props;
|
||||
}: Props = this.props;
|
||||
|
||||
const { editor_target, menu_target, is_editing, is_dropping } = this.state;
|
||||
|
||||
|
|
@ -245,51 +276,6 @@ class MapListDialogUnconnected extends React.Component<IMapListDialogProps, IMap
|
|||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = ({
|
||||
user: {
|
||||
editing,
|
||||
routes,
|
||||
user: { role },
|
||||
},
|
||||
}: IState) => {
|
||||
if (routes.filter.max >= 9999) {
|
||||
return {
|
||||
routes,
|
||||
editing,
|
||||
marks: {},
|
||||
ready: false,
|
||||
role,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
role,
|
||||
routes,
|
||||
editing,
|
||||
ready: true,
|
||||
marks: [...new Array(Math.floor((routes.filter.max - routes.filter.min) / 25) + 1)].reduce(
|
||||
(obj, el, i) => ({
|
||||
...obj,
|
||||
[routes.filter.min + i * 25]: ` ${routes.filter.min + i * 25}${
|
||||
routes.filter.min + i * 25 >= 200 ? '+' : ''
|
||||
}
|
||||
`,
|
||||
}),
|
||||
{}
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = {
|
||||
searchSetDistance,
|
||||
searchSetTitle,
|
||||
searchSetTab,
|
||||
setDialogActive,
|
||||
mapsLoadMore,
|
||||
dropRoute,
|
||||
modifyRoute,
|
||||
toggleRouteStarred,
|
||||
};
|
||||
|
||||
const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(MapListDialogUnconnected);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import React from 'react';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import {
|
||||
routerCancel as routerCancelAction,
|
||||
routerSubmit as routerSubmitAction,
|
||||
} from "~/redux/user/actions";
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Props = {
|
||||
|
|
@ -11,11 +8,11 @@ type Props = {
|
|||
width: number,
|
||||
is_routing: boolean,
|
||||
|
||||
routerCancel: typeof routerCancelAction,
|
||||
routerSubmit: typeof routerSubmitAction,
|
||||
editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel,
|
||||
editorRouterSubmit: typeof EDITOR_ACTIONS.editorRouterSubmit,
|
||||
}
|
||||
|
||||
const noPoints = ({ routerCancel }: { routerCancel: typeof routerCancelAction }) => (
|
||||
const noPoints = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel }) => (
|
||||
<React.Fragment>
|
||||
<div className="helper router-helper">
|
||||
<div className="helper__text">
|
||||
|
|
@ -28,7 +25,7 @@ const noPoints = ({ routerCancel }: { routerCancel: typeof routerCancelAction })
|
|||
<div className="helper router-helper">
|
||||
<div className="helper__buttons flex_1">
|
||||
<div className="flex_1" />
|
||||
<div className="button router-helper__button" onClick={routerCancel}>
|
||||
<div className="button router-helper__button" onClick={editorRouterCancel}>
|
||||
Отмена
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,7 +33,7 @@ const noPoints = ({ routerCancel }: { routerCancel: typeof routerCancelAction })
|
|||
</React.Fragment>
|
||||
);
|
||||
|
||||
const firstPoint = ({ routerCancel }: { routerCancel: typeof routerCancelAction }) => (
|
||||
const firstPoint = ({ editorRouterCancel }: { editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel }) => (
|
||||
<React.Fragment>
|
||||
<div className="helper router-helper">
|
||||
<div className="helper__text">
|
||||
|
|
@ -47,7 +44,7 @@ const firstPoint = ({ routerCancel }: { routerCancel: typeof routerCancelAction
|
|||
<div className="helper router-helper">
|
||||
<div className="helper__buttons flex_1">
|
||||
<div className="flex_1" />
|
||||
<div className="button router-helper__button" onClick={routerCancel}>
|
||||
<div className="button router-helper__button" onClick={editorRouterCancel}>
|
||||
Отмена
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,10 +53,10 @@ const firstPoint = ({ routerCancel }: { routerCancel: typeof routerCancelAction
|
|||
);
|
||||
|
||||
const draggablePoints = ({
|
||||
routerCancel, routerSubmit
|
||||
editorRouterCancel, editorRouterSubmit
|
||||
}: {
|
||||
routerCancel: typeof routerCancelAction,
|
||||
routerSubmit: typeof routerSubmitAction,
|
||||
editorRouterCancel: typeof EDITOR_ACTIONS.editorRouterCancel,
|
||||
editorRouterSubmit: typeof EDITOR_ACTIONS.editorRouterSubmit,
|
||||
}) => (
|
||||
<React.Fragment>
|
||||
<div className="helper">
|
||||
|
|
@ -71,10 +68,10 @@ const draggablePoints = ({
|
|||
<div className="helper router-helper">
|
||||
<div className="helper__buttons button-group flex_1">
|
||||
<div className="flex_1" />
|
||||
<div className="button button_red router-helper__button" onClick={routerCancel}>
|
||||
<div className="button button_red router-helper__button" onClick={editorRouterCancel}>
|
||||
Отмена
|
||||
</div>
|
||||
<div className="button primary router-helper__button" onClick={routerSubmit}>
|
||||
<div className="button primary router-helper__button" onClick={editorRouterSubmit}>
|
||||
Применить
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,13 +80,13 @@ const draggablePoints = ({
|
|||
);
|
||||
|
||||
export const RouterDialog = ({
|
||||
routerPoints, routerCancel, routerSubmit, width, is_routing,
|
||||
routerPoints, editorRouterCancel, editorRouterSubmit, width, is_routing,
|
||||
}: Props) => (
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
<div className={classnames('save-loader', { active: is_routing })} />
|
||||
|
||||
{!routerPoints && noPoints({ routerCancel })}
|
||||
{routerPoints === 1 && firstPoint({ routerCancel })}
|
||||
{routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
|
||||
{!routerPoints && noPoints({ editorRouterCancel })}
|
||||
{routerPoints === 1 && firstPoint({ editorRouterCancel })}
|
||||
{routerPoints >= 2 && draggablePoints({ editorRouterCancel, editorRouterSubmit })}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ import classnames from 'classnames';
|
|||
import ExpandableTextarea from 'react-expandable-textarea';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import { selectUser } from '~/redux/user/selectors';
|
||||
import * as USER_ACTIONS from '~/redux/user/actions';
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
editor: selectEditor(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
sendSaveRequest: USER_ACTIONS.sendSaveRequest,
|
||||
editorSetMode: EDITOR_ACTIONS.editorSetMode,
|
||||
editorSendSaveRequest: EDITOR_ACTIONS.editorSendSaveRequest,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & { width: number };
|
||||
|
|
@ -33,14 +33,14 @@ interface State {
|
|||
}
|
||||
|
||||
class SaveDialogUnconnected extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
address: props.address || '',
|
||||
title: props.title || '',
|
||||
is_public: props.is_public || false,
|
||||
description: props.description || '',
|
||||
address: props.map.address || '',
|
||||
title: props.map.title || '',
|
||||
is_public: props.map.is_public || false,
|
||||
description: props.map.description || '',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -57,16 +57,18 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
|
|||
|
||||
setTitle = ({ target: { value } }) =>
|
||||
this.setState({ title: (value && value.substr(0, 64)) || '' });
|
||||
|
||||
setAddress = ({ target: { value } }) =>
|
||||
this.setState({ address: (value && value.substr(0, 32)) || '' });
|
||||
|
||||
setDescription = ({ target: { value } }) =>
|
||||
this.setState({ description: (value && value.substr(0, 256)) || '' });
|
||||
|
||||
sendSaveRequest = (e, force = false) => {
|
||||
editorSendSaveRequest = (e, force = false) => {
|
||||
const { title, is_public, description } = this.state;
|
||||
const address = this.getAddress();
|
||||
|
||||
this.props.sendSaveRequest({
|
||||
this.props.editorSendSaveRequest({
|
||||
title,
|
||||
address,
|
||||
force,
|
||||
|
|
@ -74,9 +76,10 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
|
|||
description,
|
||||
});
|
||||
};
|
||||
forceSaveRequest = e => this.sendSaveRequest(e, true);
|
||||
|
||||
cancelSaving = () => this.props.setMode(MODES.NONE);
|
||||
forceSaveRequest = e => this.editorSendSaveRequest(e, true);
|
||||
|
||||
cancelSaving = () => this.props.editorSetMode(MODES.NONE);
|
||||
|
||||
onCopy = e => {
|
||||
e.preventDefault();
|
||||
|
|
@ -91,7 +94,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
|
|||
render() {
|
||||
const { title, is_public, description } = this.state;
|
||||
const {
|
||||
user: { save_error, save_finished, save_overwriting, save_loading },
|
||||
editor: { save_error, save_finished, save_overwriting, save_loading },
|
||||
width,
|
||||
} = this.props;
|
||||
const { host, protocol } = getUrlData();
|
||||
|
|
@ -157,7 +160,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
|
|||
</div>
|
||||
)}
|
||||
{!save_finished && !save_overwriting && (
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>
|
||||
<div className="button primary" onClick={this.editorSendSaveRequest}>
|
||||
Сохранить
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectUserRenderer } from '~/redux/user/selectors';
|
||||
import { selectEditorRenderer } from '~/redux/editor/selectors';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
renderer: selectUserRenderer(state),
|
||||
renderer: selectEditorRenderer(state),
|
||||
});
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & {};
|
||||
|
|
|
|||
|
|
@ -1,39 +1,44 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
import { STICKERS } from '~/constants/stickers';
|
||||
import { setActiveSticker as setActiveStickerAction } from "~/redux/user/actions";
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
interface Props {
|
||||
setActiveSticker: typeof setActiveStickerAction,
|
||||
width: number,
|
||||
}
|
||||
const mapStateToProps = () => ({});
|
||||
const mapDispatchToProps = {
|
||||
editorSetActiveSticker: EDITOR_ACTIONS.editorSetActiveSticker,
|
||||
};
|
||||
|
||||
export const StickersDialog = ({ setActiveSticker, width }: Props) => (
|
||||
type Props = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {
|
||||
width: number;
|
||||
};
|
||||
|
||||
const StickersDialogUnconnected = ({ editorSetActiveSticker, width }: Props) => (
|
||||
<div className="control-dialog control-dialog-big" style={{ width }}>
|
||||
<div className="helper stickers-helper">
|
||||
{
|
||||
Object.keys(STICKERS).map(set => (
|
||||
<div key={set}>
|
||||
<div className="stickers-set-title">{STICKERS[set].title || null}</div>
|
||||
<div className="stickers-grid">
|
||||
{
|
||||
Object.keys(STICKERS[set].layers).map(sticker => (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url})`,
|
||||
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
|
||||
}}
|
||||
className="sticker-preview"
|
||||
key={`${set}-${sticker}`}
|
||||
onClick={() => setActiveSticker({ set, sticker })}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{Object.keys(STICKERS).map(set => (
|
||||
<div key={set}>
|
||||
<div className="stickers-set-title">{STICKERS[set].title || null}</div>
|
||||
<div className="stickers-grid">
|
||||
{Object.keys(STICKERS[set].layers).map(sticker => (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url})`,
|
||||
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
|
||||
}}
|
||||
className="sticker-preview"
|
||||
key={`${set}-${sticker}`}
|
||||
onClick={() => editorSetActiveSticker({ set, sticker })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const StickersDialog = connect(mapStateToProps, mapDispatchToProps)(StickersDialogUnconnected);
|
||||
|
||||
export { StickersDialog };
|
||||
|
|
@ -5,11 +5,11 @@ import classnames from 'classnames';
|
|||
import { getStyle } from '~/utils/dom';
|
||||
import { nearestInt } from '~/utils/geom';
|
||||
import { parseDesc } from '~/utils/format';
|
||||
import { selectUser } from '~/redux/user/selectors';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: selectUser(state),
|
||||
editor: selectEditor(state),
|
||||
map: selectMap(state),
|
||||
});
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ export class TitleDialogUnconnected extends React.PureComponent<Props, State> {
|
|||
|
||||
render() {
|
||||
const {
|
||||
user: { editing },
|
||||
editor: { editing },
|
||||
map: { title, description },
|
||||
} = this.props;
|
||||
const { raised, height, height_raised } = this.state;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,25 @@
|
|||
// flow
|
||||
import React from 'react';
|
||||
import { toHours } from '~/utils/format';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import { connect } from 'react-redux';
|
||||
// import Slider from 'rc-slider';
|
||||
import Slider from 'rc-slider/lib/Slider';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { setSpeed } from '~/redux/user/actions';
|
||||
import { IRootState } from "~/redux/user";
|
||||
import { editorSetSpeed } from '~/redux/editor/actions';
|
||||
import { Tooltip } from "~/components/panels/Tooltip";
|
||||
import { isMobile } from "~/utils/window";
|
||||
import { IState } from '~/redux/store';
|
||||
|
||||
interface Props extends IRootState {
|
||||
setSpeed: typeof setSpeed,
|
||||
function mapStateToProps(state) {
|
||||
const {
|
||||
editor: { distance, estimated, speed },
|
||||
}: IState = state;
|
||||
|
||||
return { distance, estimated, speed };
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { editorSetSpeed };
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
interface State {
|
||||
dialogOpened: boolean,
|
||||
}
|
||||
|
|
@ -68,7 +73,7 @@ class Component extends React.PureComponent<Props, State> {
|
|||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
onChange={this.props.setSpeed}
|
||||
onChange={this.props.editorSetSpeed}
|
||||
defaultValue={15}
|
||||
value={speed}
|
||||
marks={marks}
|
||||
|
|
@ -81,18 +86,6 @@ class Component extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const {
|
||||
user: { distance, estimated, speed },
|
||||
} = state;
|
||||
|
||||
return { distance, estimated, speed };
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
setSpeed,
|
||||
}, dispatch);
|
||||
|
||||
export const DistanceBar = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
|
|
|
|||
|
|
@ -12,29 +12,13 @@ import { connect } from 'react-redux';
|
|||
|
||||
import { ProviderDialog } from '~/components/dialogs/ProviderDialog';
|
||||
import { ShotPrefetchDialog } from '~/components/dialogs/ShotPrefetchDialog';
|
||||
import { selectUserMode } from '~/redux/user/selectors';
|
||||
import { selectEditorMode } from '~/redux/editor/selectors';
|
||||
|
||||
const mapStateToProps = state => ({ mode: selectUserMode(state) });
|
||||
|
||||
// const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
// routerCancel: USER_ACTIONS.routerCancel,
|
||||
// routerSubmit: USER_ACTIONS.routerSubmit,
|
||||
// setActiveSticker: USER_ACTIONS.setActiveSticker,
|
||||
// clearStickers: USER_ACTIONS.clearStickers,
|
||||
// clearPoly: USER_ACTIONS.clearPoly,
|
||||
// clearAll: USER_ACTIONS.clearAll,
|
||||
// clearCancel: USER_ACTIONS.clearCancel,
|
||||
// stopEditing: USER_ACTIONS.stopEditing,
|
||||
// setEditing: USER_ACTIONS.setEditing,
|
||||
// setMode: USER_ACTIONS.setMode,
|
||||
// sendSaveRequest: USER_ACTIONS.sendSaveRequest,
|
||||
// changeProvider: USER_ACTIONS.changeProvider,
|
||||
// mapSetLogo: MAP_ACTIONS.mapSetLogo,
|
||||
// }, dispatch);
|
||||
const mapStateToProps = state => ({ mode: selectEditorMode(state) });
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & {
|
||||
width: number;
|
||||
};
|
||||
width: number;
|
||||
};
|
||||
|
||||
const DIALOG_CONTENTS: { [x: string]: any } = {
|
||||
[MODES.ROUTER]: RouterDialog,
|
||||
|
|
@ -47,12 +31,9 @@ const DIALOG_CONTENTS: { [x: string]: any } = {
|
|||
[MODES.SHOT_PREFETCH]: ShotPrefetchDialog,
|
||||
};
|
||||
|
||||
export const Component = (props: Props) =>
|
||||
props.mode && DIALOG_CONTENTS[props.mode]
|
||||
? createElement(DIALOG_CONTENTS[props.mode])
|
||||
: null;
|
||||
const EditorDialogUnconnected = (props: Props) =>
|
||||
props.mode && DIALOG_CONTENTS[props.mode] ? createElement(DIALOG_CONTENTS[props.mode]) : null;
|
||||
|
||||
export const EditorDialog = connect(
|
||||
mapStateToProps
|
||||
// mapDispatchToProps
|
||||
)(Component);
|
||||
const EditorDialog = connect(mapStateToProps)(EditorDialogUnconnected);
|
||||
|
||||
export { EditorDialog };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { MODES } from '~/constants/modes';
|
||||
import classnames from 'classnames';
|
||||
|
||||
|
|
@ -6,21 +6,34 @@ import { Icon } from '~/components/panels/Icon';
|
|||
import { EditorDialog } from '~/components/panels/EditorDialog';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { setMode, startEditing, stopEditing, takeAShot, keyPressed } from '~/redux/user/actions';
|
||||
import { IRootState } from "~/redux/user";
|
||||
import { Tooltip } from "~/components/panels/Tooltip";
|
||||
import {
|
||||
editorSetMode,
|
||||
editorStartEditing,
|
||||
editorStopEditing,
|
||||
editorTakeAShot,
|
||||
editorKeyPressed,
|
||||
} from '~/redux/editor/actions';
|
||||
import { Tooltip } from '~/components/panels/Tooltip';
|
||||
import { IState } from '~/redux/store';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
|
||||
interface Props extends IRootState {
|
||||
routing: IRootState['features']['routing'],
|
||||
setMode: typeof setMode,
|
||||
startEditing: typeof startEditing,
|
||||
stopEditing: typeof stopEditing,
|
||||
keyPressed: EventListenerOrEventListenerObject,
|
||||
}
|
||||
const mapStateToProps = (state: IState) => ({
|
||||
editor: selectEditor(state),
|
||||
});
|
||||
|
||||
class Component extends React.PureComponent<Props, void> {
|
||||
const mapDispatchToProps = {
|
||||
editorSetMode,
|
||||
editorStartEditing,
|
||||
editorStopEditing,
|
||||
editorTakeAShot,
|
||||
editorKeyPressed,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
class EditorPanelUnconnected extends PureComponent<Props, void> {
|
||||
componentDidMount() {
|
||||
window.addEventListener('keydown', this.props.keyPressed);
|
||||
window.addEventListener('keydown', this.props.editorKeyPressed as any);
|
||||
|
||||
const obj = document.getElementById('control-dialog');
|
||||
const { width } = this.panel.getBoundingClientRect();
|
||||
|
|
@ -33,29 +46,38 @@ class Component extends React.PureComponent<Props, void> {
|
|||
panel: HTMLElement = null;
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('keydown', this.props.keyPressed);
|
||||
window.removeEventListener('keydown', this.props.editorKeyPressed as any);
|
||||
}
|
||||
|
||||
startPolyMode = () => this.props.setMode(MODES.POLY);
|
||||
startStickerMode = () => this.props.setMode(MODES.STICKERS_SELECT);
|
||||
startRouterMode = () => this.props.setMode(MODES.ROUTER);
|
||||
startTrashMode = () => this.props.setMode(MODES.TRASH);
|
||||
startPolyMode = () => this.props.editorSetMode(MODES.POLY);
|
||||
startStickerMode = () => this.props.editorSetMode(MODES.STICKERS_SELECT);
|
||||
startRouterMode = () => this.props.editorSetMode(MODES.ROUTER);
|
||||
startTrashMode = () => this.props.editorSetMode(MODES.TRASH);
|
||||
startSaveMode = () => {
|
||||
// if (!this.props.changed) return;
|
||||
this.props.setMode(MODES.SAVE);
|
||||
this.props.editorSetMode(MODES.SAVE);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
mode, changed, editing, routing,
|
||||
editor: {
|
||||
mode,
|
||||
changed,
|
||||
editing,
|
||||
features: { routing },
|
||||
},
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
|
||||
<div
|
||||
className={classnames('panel right', { active: editing })}
|
||||
ref={el => {
|
||||
this.panel = el;
|
||||
}}
|
||||
>
|
||||
<div className="control-bar control-bar-padded">
|
||||
{
|
||||
routing &&
|
||||
{routing && (
|
||||
<button
|
||||
className={classnames({ active: mode === MODES.ROUTER })}
|
||||
onClick={this.startRouterMode}
|
||||
|
|
@ -63,8 +85,7 @@ class Component extends React.PureComponent<Props, void> {
|
|||
<Tooltip>Автоматический маршрут</Tooltip>
|
||||
<Icon icon="icon-route-2" />
|
||||
</button>
|
||||
}
|
||||
|
||||
)}
|
||||
|
||||
<button
|
||||
className={classnames({ active: mode === MODES.POLY })}
|
||||
|
|
@ -75,13 +96,14 @@ class Component extends React.PureComponent<Props, void> {
|
|||
</button>
|
||||
|
||||
<button
|
||||
className={classnames({ active: (mode === MODES.STICKERS || mode === MODES.STICKERS_SELECT) })}
|
||||
className={classnames({
|
||||
active: mode === MODES.STICKERS || mode === MODES.STICKERS_SELECT,
|
||||
})}
|
||||
onClick={this.startStickerMode}
|
||||
>
|
||||
<Tooltip>Точки маршрута</Tooltip>
|
||||
<Icon icon="icon-sticker-3" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="control-sep" />
|
||||
|
|
@ -99,10 +121,7 @@ class Component extends React.PureComponent<Props, void> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className="highlighted cancel"
|
||||
onClick={this.props.stopEditing}
|
||||
>
|
||||
<button className="highlighted cancel" onClick={this.props.editorStopEditing}>
|
||||
<Icon icon="icon-cancel-1" />
|
||||
</button>
|
||||
|
||||
|
|
@ -114,59 +133,21 @@ class Component extends React.PureComponent<Props, void> {
|
|||
<Icon icon="icon-check-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={classnames('panel right', { active: !editing })}>
|
||||
<div className="control-bar">
|
||||
<button className="primary single" onClick={this.props.startEditing}>
|
||||
<button className="primary single" onClick={this.props.editorStartEditing}>
|
||||
<Icon icon="icon-route-2" />
|
||||
<span>
|
||||
РЕДАКТИРОВАТЬ
|
||||
</span>
|
||||
<span>РЕДАКТИРОВАТЬ</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EditorDialog
|
||||
width={((this.panel && this.panel.getBoundingClientRect().width) || 0)}
|
||||
/>
|
||||
|
||||
<EditorDialog width={(this.panel && this.panel.getBoundingClientRect().width) || 0} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const {
|
||||
user: {
|
||||
editing,
|
||||
mode,
|
||||
changed,
|
||||
features: {
|
||||
routing,
|
||||
}
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
editing,
|
||||
mode,
|
||||
changed,
|
||||
routing,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
setMode,
|
||||
// setLogo,
|
||||
startEditing,
|
||||
stopEditing,
|
||||
takeAShot,
|
||||
keyPressed,
|
||||
}, dispatch);
|
||||
|
||||
export const EditorPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
export const EditorPanel = connect(mapStateToProps, mapDispatchToProps)(EditorPanelUnconnected);
|
||||
|
|
|
|||
|
|
@ -1,36 +1,34 @@
|
|||
// flow
|
||||
import React, { useCallback } from 'react';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
import { PROVIDERS } from '~/constants/providers';
|
||||
import { LOGOS } from '~/constants/logos';
|
||||
import * as USER_ACTIONS from '~/redux/user/actions';
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { MODES } from '~/constants/modes';
|
||||
import { IRootState } from '~/redux/user';
|
||||
|
||||
import { Tooltip } from '~/components/panels/Tooltip';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import { selectUser } from '~/redux/user/selectors';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
editor: selectEditor(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
editorSetMode: EDITOR_ACTIONS.editorSetMode,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const TopRightPanelUnconnected = ({
|
||||
map: { provider, logo },
|
||||
user: { markers_shown, editing },
|
||||
setMode,
|
||||
editor: { markers_shown, editing },
|
||||
editorSetMode,
|
||||
}: Props) => {
|
||||
const startProviderMode = useCallback(() => setMode(MODES.PROVIDER), [setMode]);
|
||||
const startLogoMode = useCallback(() => setMode(MODES.LOGO), [setMode]);
|
||||
const clearMode = useCallback(() => setMode(MODES.NONE), [setMode]);
|
||||
const startProviderMode = useCallback(() => editorSetMode(MODES.PROVIDER), [editorSetMode]);
|
||||
const startLogoMode = useCallback(() => editorSetMode(MODES.LOGO), [editorSetMode]);
|
||||
const clearMode = useCallback(() => editorSetMode(MODES.NONE), [editorSetMode]);
|
||||
|
||||
return (
|
||||
<div className="status-panel top right">
|
||||
|
|
|
|||
|
|
@ -4,35 +4,41 @@ import { GuestButton } from '~/components/user/GuestButton';
|
|||
import { DEFAULT_USER, ROLES } from '~/constants/auth';
|
||||
import { UserButton } from '~/components/user/UserButton';
|
||||
import { UserMenu } from '~/components/user/UserMenu';
|
||||
import { setUser, userLogout, gotVkUser, openMapDialog } from '~/redux/user/actions';
|
||||
import {
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack,
|
||||
} from '~/redux/user/actions';
|
||||
editorTakeAShot,
|
||||
editorSetDialog,
|
||||
editorSetDialogActive,
|
||||
editorGetGPXTrack,
|
||||
} from '~/redux/editor/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { Icon } from '~/components/panels/Icon';
|
||||
|
||||
import classnames from 'classnames';
|
||||
import { CLIENT } from '~/config/frontend';
|
||||
import { DIALOGS, TABS } from '~/constants/dialogs';
|
||||
import { IRootState } from '~/redux/user';
|
||||
import { Tooltip } from '~/components/panels/Tooltip';
|
||||
import { TitleDialog } from '~/components/dialogs/TitleDialog';
|
||||
|
||||
interface Props extends IRootState {
|
||||
userLogout: typeof userLogout;
|
||||
setDialog: typeof setDialog;
|
||||
setDialogActive: typeof setDialogActive;
|
||||
gotVkUser: typeof gotVkUser;
|
||||
takeAShot: typeof takeAShot;
|
||||
openMapDialog: typeof openMapDialog;
|
||||
getGPXTrack: typeof getGPXTrack;
|
||||
}
|
||||
const mapStateToProps = ({ user: { user }, editor: { dialog, dialog_active, is_empty } }) => ({
|
||||
dialog,
|
||||
dialog_active,
|
||||
user,
|
||||
is_empty,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setUser,
|
||||
userLogout,
|
||||
editorTakeAShot,
|
||||
editorSetDialog,
|
||||
gotVkUser,
|
||||
editorSetDialogActive,
|
||||
openMapDialog,
|
||||
editorGetGPXTrack,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
interface State {
|
||||
menuOpened: boolean;
|
||||
|
|
@ -84,8 +90,8 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
|
|||
|
||||
openAppInfoDialog = () => {
|
||||
this.setMenuOpened();
|
||||
this.props.setDialog(DIALOGS.APP_INFO);
|
||||
this.props.setDialogActive(this.props.dialog !== DIALOGS.APP_INFO);
|
||||
this.props.editorSetDialog(DIALOGS.APP_INFO);
|
||||
this.props.editorSetDialogActive(this.props.dialog !== DIALOGS.APP_INFO);
|
||||
};
|
||||
|
||||
openOauthFrame = () => {
|
||||
|
|
@ -143,7 +149,7 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button className={classnames({ active: false })} onClick={this.props.takeAShot}>
|
||||
<button className={classnames({ active: false })} onClick={this.props.editorTakeAShot}>
|
||||
<Tooltip>Снимок карты</Tooltip>
|
||||
<Icon icon="icon-shot-4" />
|
||||
</button>
|
||||
|
|
@ -153,7 +159,10 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button className={classnames({ active: false })} onClick={this.props.getGPXTrack}>
|
||||
<button
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.editorGetGPXTrack}
|
||||
>
|
||||
<Tooltip>Экспорт GPX</Tooltip>
|
||||
<Icon icon="icon-gpx-1" />
|
||||
</button>
|
||||
|
|
@ -166,24 +175,6 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = ({ user: { dialog, dialog_active, user, is_empty } }) => ({
|
||||
dialog,
|
||||
dialog_active,
|
||||
user,
|
||||
is_empty,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack,
|
||||
};
|
||||
|
||||
const UserPanel = connect(mapStateToProps, mapDispatchToProps)(UserPanelUnconnected);
|
||||
|
||||
export { UserPanel };
|
||||
|
|
|
|||
|
|
@ -1,22 +1,26 @@
|
|||
import React from 'react';
|
||||
|
||||
import { hideRenderer, cropAShot } from '~/redux/user/actions';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import Croppr from 'croppr';
|
||||
import 'croppr/dist/croppr.css';
|
||||
import { LOGOS } from '~/constants/logos';
|
||||
import { RendererPanel } from '~/components/panels/RendererPanel';
|
||||
import { IRootState } from "~/redux/user";
|
||||
import { IRoute } from '~/redux/map/types';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
|
||||
type Props = {
|
||||
data: IRootState['renderer']['data'],
|
||||
logo: IRoute['logo'],
|
||||
hideRenderer: typeof hideRenderer,
|
||||
cropAShot: typeof cropAShot,
|
||||
const mapStateToProps = state => ({
|
||||
editor: selectEditor(state),
|
||||
map: selectMap(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
editorHideRenderer: EDITOR_ACTIONS.editorHideRenderer,
|
||||
editorCropAShot: EDITOR_ACTIONS.editorCropAShot,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
type State = {
|
||||
opacity: number,
|
||||
};
|
||||
|
|
@ -47,7 +51,7 @@ class Component extends React.Component<Props, State> {
|
|||
this.logo.style.transform = `scale(${scale})`;
|
||||
|
||||
this.logoImg = document.createElement('img');
|
||||
if (this.props.logo && LOGOS[this.props.logo][1]) this.logoImg.src = LOGOS[this.props.logo][1];
|
||||
if (this.props.map.logo && LOGOS[this.props.map.logo][1]) this.logoImg.src = LOGOS[this.props.map.logo][1];
|
||||
|
||||
this.logo.append(this.logoImg);
|
||||
regionEl.append(this.logo);
|
||||
|
|
@ -58,10 +62,10 @@ class Component extends React.Component<Props, State> {
|
|||
image: HTMLImageElement;
|
||||
logoImg: HTMLImageElement;
|
||||
|
||||
getImage = () => this.props.cropAShot(this.croppr.getValue());
|
||||
getImage = () => this.props.editorCropAShot(this.croppr.getValue());
|
||||
|
||||
render() {
|
||||
const { data } = this.props;
|
||||
const { data } = this.props.editor.renderer;
|
||||
const { opacity } = this.state;
|
||||
const { innerWidth, innerHeight } = window;
|
||||
const padding = 30;
|
||||
|
|
@ -95,7 +99,7 @@ class Component extends React.Component<Props, State> {
|
|||
</div>
|
||||
|
||||
<RendererPanel
|
||||
onCancel={this.props.hideRenderer}
|
||||
onCancel={this.props.editorHideRenderer}
|
||||
onSubmit={this.getImage}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -103,12 +107,4 @@ class Component extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
const mapStateToProps = state => ({ ...state.user.renderer, logo: state.user.logo });
|
||||
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
hideRenderer,
|
||||
cropAShot,
|
||||
}, dispatch);
|
||||
|
||||
export const Renderer = connect(mapStateToProps, mapDispatchToProps)(Component);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue