muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-28 12:36:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleaned out user reducer

Browse source
This commit is contained in:
Fedor Katurov 2020-01-08 14:25:46 +07:00
parent 103097edbd
commit af8d270460
13 changed files with 462 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/dialogs/TitleDialog.tsx
View file

@ -1,28 +1,30 @@
import React from 'react';
import { bindActionCreators } from "redux";
import { connect } from 'react-redux';
import classnames from 'classnames';
import { getStyle } from "$utils/dom";
import { nearestInt } from "$utils/geom";
import { IRootState } from "$redux/user";
import { parseDesc } from "$utils/format";
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';
interface ITitleDialogProps {
editing: IRootState['editing'],
title?: IRootState['title'],
description?: IRootState['description'],
minLines?: number,
maxLines?: number,
}
const mapStateToProps = state => ({
user: selectUser(state),
map: selectMap(state),
});
interface ITitleDialogState {
type Props = ReturnType<typeof mapStateToProps> & {
minLines?: number;
maxLines?: number;
};
interface State {
raised: boolean;
height: number;
height_raised: number;
}
export class Component extends React.PureComponent<ITitleDialogProps, ITitleDialogState> {
export class TitleDialogUnconnected extends React.PureComponent<Props, State> {
state = {
raised: false,
height: 0,
@ -53,8 +55,9 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
}
const title_margin = parseInt(getStyle(this.ref_title, 'margin-bottom'), 10) || 0;
const text_margins = (parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;;
const text_margins =
(parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;
const text_line = parseInt(getStyle(this.ref_text, 'line-height'), 10) || 0;
const container_height = sizer_height - title_height - title_margin - text_margins;
@ -62,22 +65,34 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
const min_height = (this.props.minLines || 5) * text_line;
const max_height = (this.props.maxLines || 20) * text_line;
const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
const height_raised = nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) + text_margins;
const height =
nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) +
text_margins;
const height_raised =
nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) +
text_margins;
this.setState({
height: ((height_raised - height) < 2 * text_line ? height_raised : height),
height_raised
height: height_raised - height < 2 * text_line ? height_raised : height,
height_raised,
});
};
render() {
const { editing, title, description } = this.props;
const {
user: { editing },
map: { title, description },
} = this.props;
const { raised, height, height_raised } = this.state;
return (
<div className="title-dialog-wrapper">
<div className="title-dialog-sizer" ref={el => { this.ref_sizer = el; }}>
<div
className="title-dialog-sizer"
ref={el => {
this.ref_sizer = el;
}}
>
<div
className={classnames('title-dialog', { active: title && !editing })}
onMouseOver={this.onHover}
@ -85,31 +100,37 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
>
<div
className="title-dialog-pane title-dialog-name"
ref={el => { this.ref_title = el; }}
ref={el => {
this.ref_title = el;
}}
>
<h2>{title}</h2>
</div>
<div
className={classnames("title-dialog-pane title-dialog-text", { has_shade: height_raised > height })}
className={classnames('title-dialog-pane title-dialog-text', {
has_shade: height_raised > height,
})}
style={{
height: (raised ? height_raised : height),
height: raised ? height_raised : height,
marginBottom: height === 0 ? 0 : 15,
}}
ref={el => { this.ref_overflow = el; }}
ref={el => {
this.ref_overflow = el;
}}
>
<div
ref={el => { this.ref_text = el; }}
ref={el => {
this.ref_text = el;
}}
>
{
parseDesc(description)
}
{parseDesc(description)}
</div>
</div>
</div>
</div>
</div>
)
);
}
ref_sizer;
@ -118,7 +139,6 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
ref_overflow;
}
const mapStateToProps = ({ user: { editing, title, description } }) => ({ editing, title, description });
const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
const TitleDialog = connect(mapStateToProps)(TitleDialogUnconnected);
export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component);
export { TitleDialog };