mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-05-12 19:36:41 +07:00
cleaned out user reducer
This commit is contained in:
Fedor Katurov
parent
103097edbd
commit
af8d270460
13 changed files with 462 additions and 282 deletions
|
|
@ -7,32 +7,32 @@ import { Icon } from '$components/panels/Icon';
|
|||
import { Switch } from '$components/Switch';
|
||||
|
||||
import classnames from 'classnames';
|
||||
import { sendSaveRequest, setMode } from "$redux/user/actions";
|
||||
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';
|
||||
|
||||
interface Props {
|
||||
address: string,
|
||||
title: string,
|
||||
is_public: boolean,
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
width: number,
|
||||
setMode: typeof setMode,
|
||||
sendSaveRequest: typeof sendSaveRequest,
|
||||
save_error: string,
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
sendSaveRequest: USER_ACTIONS.sendSaveRequest,
|
||||
};
|
||||
|
||||
save_loading: boolean,
|
||||
save_finished: boolean,
|
||||
save_overwriting: boolean,
|
||||
}
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & { width: number };
|
||||
|
||||
interface State {
|
||||
address: string,
|
||||
title: string,
|
||||
is_public: boolean,
|
||||
description: string,
|
||||
address: string;
|
||||
title: string;
|
||||
is_public: boolean;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export class SaveDialog extends React.Component<Props, State> {
|
||||
class SaveDialogUnconnected extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -48,21 +48,30 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
const { path } = getUrlData();
|
||||
const { title, address } = this.state;
|
||||
|
||||
return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()).substr(0, 32) || toTranslit(path.trim()).substr(0, 32);
|
||||
return (
|
||||
toTranslit(address.trim()) ||
|
||||
toTranslit(title.trim().toLowerCase()).substr(0, 32) ||
|
||||
toTranslit(path.trim()).substr(0, 32)
|
||||
);
|
||||
};
|
||||
|
||||
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) || '') });
|
||||
|
||||
|
||||
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) => {
|
||||
const { title, is_public, description } = this.state;
|
||||
const address = this.getAddress();
|
||||
|
||||
this.props.sendSaveRequest({
|
||||
title, address, force, is_public, description,
|
||||
title,
|
||||
address,
|
||||
force,
|
||||
is_public,
|
||||
description,
|
||||
});
|
||||
};
|
||||
forceSaveRequest = e => this.sendSaveRequest(e, true);
|
||||
|
|
@ -81,7 +90,10 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
const { title, is_public, description } = this.state;
|
||||
const { save_error, save_finished, save_overwriting, width, save_loading } = this.props;
|
||||
const {
|
||||
user: { save_error, save_finished, save_overwriting, save_loading },
|
||||
width,
|
||||
} = this.props;
|
||||
const { host, protocol } = getUrlData();
|
||||
|
||||
return (
|
||||
|
|
@ -92,13 +104,21 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
<div className="save-title">
|
||||
<div className="save-title-input">
|
||||
<div className="save-title-label">Название</div>
|
||||
<input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={this.setTitle}
|
||||
autoFocus
|
||||
readOnly={save_finished}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="save-description">
|
||||
<div className="save-address-input">
|
||||
<label className="save-address-label">{protocol}//{host}/</label>
|
||||
<label className="save-address-label">
|
||||
{protocol}//{host}/
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={this.getAddress()}
|
||||
|
|
@ -120,37 +140,42 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
onChange={this.setDescription}
|
||||
/>
|
||||
</div>
|
||||
<div className="save-text">
|
||||
{ save_error || TIPS.SAVE_INFO }
|
||||
</div>
|
||||
<div className="save-text">{save_error || TIPS.SAVE_INFO}</div>
|
||||
|
||||
<div className="save-buttons">
|
||||
<div className={classnames('save-buttons-text pointer', { gray: !is_public })} onClick={this.togglePublic}>
|
||||
<div
|
||||
className={classnames('save-buttons-text pointer', { gray: !is_public })}
|
||||
onClick={this.togglePublic}
|
||||
>
|
||||
<Switch active={is_public} />
|
||||
{
|
||||
is_public
|
||||
? ' В каталоге карт'
|
||||
: ' Только по ссылке'
|
||||
}
|
||||
{is_public ? ' В каталоге карт' : ' Только по ссылке'}
|
||||
</div>
|
||||
<div>
|
||||
{ !save_finished &&
|
||||
<div className="button" onClick={this.cancelSaving}>Отмена</div>
|
||||
}
|
||||
{
|
||||
!save_finished && !save_overwriting &&
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
|
||||
}
|
||||
{
|
||||
save_overwriting &&
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button" onClick={this.onCopy}>Скопировать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button success" onClick={this.cancelSaving}>Отлично!</div>
|
||||
}
|
||||
{!save_finished && (
|
||||
<div className="button" onClick={this.cancelSaving}>
|
||||
Отмена
|
||||
</div>
|
||||
)}
|
||||
{!save_finished && !save_overwriting && (
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>
|
||||
Сохранить
|
||||
</div>
|
||||
)}
|
||||
{save_overwriting && (
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>
|
||||
Перезаписать
|
||||
</div>
|
||||
)}
|
||||
{save_finished && (
|
||||
<div className="button" onClick={this.onCopy}>
|
||||
Скопировать
|
||||
</div>
|
||||
)}
|
||||
{save_finished && (
|
||||
<div className="button success" onClick={this.cancelSaving}>
|
||||
Отлично!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -159,3 +184,7 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SaveDialog = connect(mapStateToProps, mapDispatchToProps)(SaveDialogUnconnected);
|
||||
|
||||
export { SaveDialog };
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue