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

moved editor to separate reducer

Browse source
This commit is contained in:
Fedor Katurov 2020-01-09 10:59:26 +07:00
parent e950d98b73
commit 87670770b0
38 changed files with 1425 additions and 1069 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/dialogs/StickersDialog.tsx
View file

@ -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 };