Refactor character counter to match upstream

This commit is contained in:
Thibaut Girka 2019-08-19 20:53:28 +02:00
parent ab019800f8
commit 066034c62e
5 changed files with 35 additions and 7 deletions

View file

@ -0,0 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import { length } from 'stringz';
export default class CharacterCounter extends React.PureComponent {
static propTypes = {
text: PropTypes.string.isRequired,
max: PropTypes.number.isRequired,
};
checkRemainingText (diff) {
if (diff < 0) {
return <span className='character-counter character-counter--over'>{diff}</span>;
}
return <span className='character-counter'>{diff}</span>;
}
render () {
const diff = this.props.max - length(this.props.text);
return this.checkRemainingText(diff);
}
}

View file

@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
// Components.
import Button from 'flavours/glitch/components/button';
import Icon from 'flavours/glitch/components/icon';
import CharacterCounter from './character_counter';
// Utils.
import { maxChars } from 'flavours/glitch/util/initial_state';
@ -49,7 +50,7 @@ class Publisher extends ImmutablePureComponent {
return (
<div className={computedClass}>
<span className='count'>{diff}</span>
<CharacterCounter text={countText} max={maxChars} />
{sideArm && sideArm !== 'none' ? (
<Button
className='side_arm'

View file

@ -4,6 +4,7 @@ import UploadProgressContainer from '../containers/upload_progress_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import UploadContainer from '../containers/upload_container';
import SensitiveButtonContainer from '../containers/sensitive_button_container';
import { FormattedMessage } from 'react-intl';
export default class UploadForm extends ImmutablePureComponent {
static propTypes = {
@ -15,7 +16,7 @@ export default class UploadForm extends ImmutablePureComponent {
return (
<div className='composer--upload_form'>
<UploadProgressContainer />
<UploadProgressContainer icon='upload' message={<FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />} />
{mediaIds.size > 0 && (
<div className='content'>

View file

@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import Motion from 'flavours/glitch/util/optional_motion';
import spring from 'react-motion/lib/spring';
import { FormattedMessage } from 'react-intl';
import Icon from 'flavours/glitch/components/icon';
export default class UploadProgress extends React.PureComponent {
@ -10,10 +9,12 @@ export default class UploadProgress extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
progress: PropTypes.number,
icon: PropTypes.string.isRequired,
message: PropTypes.node.isRequired,
};
render () {
const { active, progress } = this.props;
const { active, progress, icon, message } = this.props;
if (!active) {
return null;
@ -21,10 +22,10 @@ export default class UploadProgress extends React.PureComponent {
return (
<div className='composer--upload_form--progress'>
<Icon icon='upload' />
<Icon icon={icon} />
<div className='message'>
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
{message}
<div className='backdrop'>
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>

View file

@ -589,7 +589,7 @@
justify-content: flex-end;
flex: 0 0 auto;
& > .count {
& > .character-counter {
display: inline-block;
margin: 0 16px 0 8px;
font-size: 16px;