fixed logo components

This commit is contained in:
Fedor Katurov 2020-01-08 12:15:00 +07:00
parent 0f31144567
commit 23c9e42bd5
4 changed files with 29 additions and 19 deletions

View file

@ -3,14 +3,20 @@ import { LOGOS } from '$constants/logos';
import { Icon } from '$components/panels/Icon';
import classnames from 'classnames';
import * as MAP_ACTIONS from "$redux/map/actions"
import { IMapReducer } from '$redux/map';
import { selectMapLogo } from '$redux/map/selectors';
import { connect } from 'react-redux';
interface Props {
logo: IMapReducer['logo'],
mapSetLogo: typeof MAP_ACTIONS.mapSetLogo,
}
const mapStateToProps = state => ({
logo: selectMapLogo(state),
});
export const LogoDialog = ({ logo, mapSetLogo }: Props) => (
const mapDispatchToProps = {
mapSetLogo: MAP_ACTIONS.mapSetLogo,
};
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const LogoDialogUnconnected = ({ logo, mapSetLogo }: Props) => (
<div className="control-dialog top">
<div className="helper logo-helper">
<div className="helper-back">
@ -30,3 +36,7 @@ export const LogoDialog = ({ logo, mapSetLogo }: Props) => (
</div>
</div>
);
const LogoDialog = connect(mapStateToProps, mapDispatchToProps)(LogoDialogUnconnected);
export { LogoDialog };

View file

@ -3,7 +3,6 @@ import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
import { Icon } from '$components/panels/Icon';
import classnames from 'classnames';
import * as MAP_ACTIONS from "$redux/map/actions";
import { IRootState } from "$redux/user";
import { selectMapProvider } from '$redux/map/selectors';
import { connect } from 'react-redux';

View file

@ -1,21 +1,21 @@
import * as React from "react";
import { LOGOS } from "$constants/logos";
import { connect } from "react-redux";
import { IRootState } from "$redux/user";
import * as React from 'react';
import { LOGOS } from '$constants/logos';
import { connect } from 'react-redux';
import { IRootState } from '$redux/user';
import { selectMapLogo } from '$redux/map/selectors';
interface Props extends IRootState {}
const mapStateToProps = state => ({ logo: selectMapLogo(state) });
type Props = ReturnType<typeof mapStateToProps>;
const Component = ({ logo }: Props) => (
const LogoPreviewUnconnected = React.memo(({ logo }: Props) => (
<div
className="logo-preview"
style={{
backgroundImage: logo
? `url(${LOGOS && LOGOS[logo] && LOGOS[logo][1]})`
: "none"
backgroundImage: logo ? `url(${LOGOS && LOGOS[logo] && LOGOS[logo][1]})` : 'none',
}}
/>
);
));
const mapStateToProps = ({ user: { logo } }) => ({ logo });
const LogoPreview = connect(mapStateToProps)(LogoPreviewUnconnected);
export const LogoPreview = connect(mapStateToProps)(Component);
export { LogoPreview };

View file

@ -2,5 +2,6 @@ import { IState } from "$redux/store";
export const selectMap = (state: IState) => state.map;
export const selectMapProvider = (state: IState) => state.map.provider;
export const selectMapLogo = (state: IState) => state.map.logo;
export const selectMapRoute= (state: IState) => state.map.route;
export const selectMapStickers = (state: IState) => state.map.stickers;