Refactor character counter to match upstream
This commit is contained in:
parent
ab019800f8
commit
066034c62e
|
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
// Components.
|
// Components.
|
||||||
import Button from 'flavours/glitch/components/button';
|
import Button from 'flavours/glitch/components/button';
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
import CharacterCounter from './character_counter';
|
||||||
|
|
||||||
// Utils.
|
// Utils.
|
||||||
import { maxChars } from 'flavours/glitch/util/initial_state';
|
import { maxChars } from 'flavours/glitch/util/initial_state';
|
||||||
|
@ -49,7 +50,7 @@ class Publisher extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={computedClass}>
|
<div className={computedClass}>
|
||||||
<span className='count'>{diff}</span>
|
<CharacterCounter text={countText} max={maxChars} />
|
||||||
{sideArm && sideArm !== 'none' ? (
|
{sideArm && sideArm !== 'none' ? (
|
||||||
<Button
|
<Button
|
||||||
className='side_arm'
|
className='side_arm'
|
||||||
|
|
|
@ -4,6 +4,7 @@ import UploadProgressContainer from '../containers/upload_progress_container';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import UploadContainer from '../containers/upload_container';
|
import UploadContainer from '../containers/upload_container';
|
||||||
import SensitiveButtonContainer from '../containers/sensitive_button_container';
|
import SensitiveButtonContainer from '../containers/sensitive_button_container';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
export default class UploadForm extends ImmutablePureComponent {
|
export default class UploadForm extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -15,7 +16,7 @@ export default class UploadForm extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='composer--upload_form'>
|
<div className='composer--upload_form'>
|
||||||
<UploadProgressContainer />
|
<UploadProgressContainer icon='upload' message={<FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />} />
|
||||||
|
|
||||||
{mediaIds.size > 0 && (
|
{mediaIds.size > 0 && (
|
||||||
<div className='content'>
|
<div className='content'>
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Motion from 'flavours/glitch/util/optional_motion';
|
import Motion from 'flavours/glitch/util/optional_motion';
|
||||||
import spring from 'react-motion/lib/spring';
|
import spring from 'react-motion/lib/spring';
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
|
||||||
export default class UploadProgress extends React.PureComponent {
|
export default class UploadProgress extends React.PureComponent {
|
||||||
|
@ -10,10 +9,12 @@ export default class UploadProgress extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
progress: PropTypes.number,
|
progress: PropTypes.number,
|
||||||
|
icon: PropTypes.string.isRequired,
|
||||||
|
message: PropTypes.node.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { active, progress } = this.props;
|
const { active, progress, icon, message } = this.props;
|
||||||
|
|
||||||
if (!active) {
|
if (!active) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -21,10 +22,10 @@ export default class UploadProgress extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='composer--upload_form--progress'>
|
<div className='composer--upload_form--progress'>
|
||||||
<Icon icon='upload' />
|
<Icon icon={icon} />
|
||||||
|
|
||||||
<div className='message'>
|
<div className='message'>
|
||||||
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
|
{message}
|
||||||
|
|
||||||
<div className='backdrop'>
|
<div className='backdrop'>
|
||||||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
|
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
|
||||||
|
|
|
@ -589,7 +589,7 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|
||||||
& > .count {
|
& > .character-counter {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 16px 0 8px;
|
margin: 0 16px 0 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
Loading…
Reference in New Issue