TypeScript, FC
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
parent
0658c51058
commit
0e3d0e25b5
|
|
@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
import Icon from './icon';
|
import Icon from './icon';
|
||||||
|
|
||||||
|
|
||||||
const List = ({ children }) => (
|
const List = ({ children }) => (
|
||||||
<div className='space-y-0.5'>{children}</div>
|
<div className='space-y-0.5'>{children}</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
|
|
||||||
import { Button } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
export default class LoadMore extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
disabled: PropTypes.bool,
|
|
||||||
visible: PropTypes.bool,
|
|
||||||
}
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
visible: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { disabled, visible } = this.props;
|
|
||||||
|
|
||||||
if (!visible) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button theme='secondary' block disabled={disabled || !visible} onClick={this.props.onClick}>
|
|
||||||
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
import { Button } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
interface ILoadMore {
|
||||||
|
onClick: () => void,
|
||||||
|
disabled?: boolean,
|
||||||
|
visible?: Boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {
|
||||||
|
if (!visible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button theme='secondary' block disabled={disabled || !visible} onClick={onClick}>
|
||||||
|
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadMore;
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { getFeatures } from 'soapbox/utils/features';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
following: {
|
|
||||||
id: 'morefollows.following_label',
|
|
||||||
defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
|
|
||||||
},
|
|
||||||
followers: {
|
|
||||||
id: 'morefollows.followers_label',
|
|
||||||
defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
const instance = state.get('instance');
|
|
||||||
|
|
||||||
return {
|
|
||||||
features: getFeatures(instance),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
|
||||||
@injectIntl
|
|
||||||
class MoreFollows extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
visible: PropTypes.bool,
|
|
||||||
count: PropTypes.number,
|
|
||||||
type: PropTypes.string,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
features: PropTypes.object.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
visible: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
getMessage = () => {
|
|
||||||
const { type, count, intl } = this.props;
|
|
||||||
return intl.formatMessage(messages[type], { count });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { features } = this.props;
|
|
||||||
|
|
||||||
// If the instance isn't federating, there are no remote followers
|
|
||||||
if (!features.federating) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='morefollows-indicator'>
|
|
||||||
<div>
|
|
||||||
<div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
|
|
||||||
{this.getMessage()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
|
import { getFeatures } from 'soapbox/utils/features';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
following: {
|
||||||
|
id: 'morefollows.following_label',
|
||||||
|
defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
|
||||||
|
},
|
||||||
|
followers: {
|
||||||
|
id: 'morefollows.followers_label',
|
||||||
|
defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IMoreFollows {
|
||||||
|
visible?: Boolean,
|
||||||
|
count?: number,
|
||||||
|
type: 'following' | 'followers',
|
||||||
|
}
|
||||||
|
|
||||||
|
const MoreFollows: React.FC<IMoreFollows> = ({ visible = true, count, type }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const features = useAppSelector((state) => getFeatures(state.instance));
|
||||||
|
|
||||||
|
const getMessage = () => {
|
||||||
|
return intl.formatMessage(messages[type], { count });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// If the instance isn't federating, there are no remote followers
|
||||||
|
if (!features.federating) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='morefollows-indicator'>
|
||||||
|
<div>
|
||||||
|
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
|
||||||
|
{getMessage()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MoreFollows;
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
|
|
||||||
|
|
||||||
export default class ProgressBar extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { progress } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='progress-bar'>
|
|
||||||
<div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface IProgressBar {
|
||||||
|
progress: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
|
||||||
|
<div className='progress-bar'>
|
||||||
|
<div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default ProgressBar;
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
export default class ProgressCircle extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
progress: PropTypes.number.isRequired,
|
|
||||||
radius: PropTypes.number,
|
|
||||||
stroke: PropTypes.number,
|
|
||||||
title: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
radius: 12,
|
|
||||||
stroke: 4,
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { progress, radius, stroke, title } = this.props;
|
|
||||||
|
|
||||||
const progressStroke = stroke + 0.5;
|
|
||||||
const actualRadius = radius + progressStroke;
|
|
||||||
const circumference = 2 * Math.PI * radius;
|
|
||||||
const dashoffset = circumference * (1 - Math.min(progress, 1));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div title={title}>
|
|
||||||
<svg
|
|
||||||
width={actualRadius * 2}
|
|
||||||
height={actualRadius * 2}
|
|
||||||
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
className='stroke-gray-400'
|
|
||||||
cx={actualRadius}
|
|
||||||
cy={actualRadius}
|
|
||||||
r={radius}
|
|
||||||
fill='none'
|
|
||||||
strokeWidth={stroke}
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
className={classNames('stroke-primary-800', {
|
|
||||||
'stroke-danger-600': progress > 1,
|
|
||||||
})}
|
|
||||||
style={{
|
|
||||||
strokeDashoffset: dashoffset,
|
|
||||||
strokeDasharray: circumference,
|
|
||||||
}}
|
|
||||||
cx={actualRadius}
|
|
||||||
cy={actualRadius}
|
|
||||||
r={radius}
|
|
||||||
fill='none'
|
|
||||||
strokeWidth={progressStroke}
|
|
||||||
strokeLinecap='round'
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface IProgressCircle {
|
||||||
|
progress: number,
|
||||||
|
radius?: number,
|
||||||
|
stroke?: number,
|
||||||
|
title?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
|
||||||
|
const progressStroke = stroke + 0.5;
|
||||||
|
const actualRadius = radius + progressStroke;
|
||||||
|
const circumference = 2 * Math.PI * radius;
|
||||||
|
const dashoffset = circumference * (1 - Math.min(progress, 1));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div title={title}>
|
||||||
|
<svg
|
||||||
|
width={actualRadius * 2}
|
||||||
|
height={actualRadius * 2}
|
||||||
|
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className='stroke-gray-400'
|
||||||
|
cx={actualRadius}
|
||||||
|
cy={actualRadius}
|
||||||
|
r={radius}
|
||||||
|
fill='none'
|
||||||
|
strokeWidth={stroke}
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
className={classNames('stroke-primary-800', {
|
||||||
|
'stroke-danger-600': progress > 1,
|
||||||
|
})}
|
||||||
|
style={{
|
||||||
|
strokeDashoffset: dashoffset,
|
||||||
|
strokeDasharray: circumference,
|
||||||
|
}}
|
||||||
|
cx={actualRadius}
|
||||||
|
cy={actualRadius}
|
||||||
|
r={radius}
|
||||||
|
fill='none'
|
||||||
|
strokeWidth={progressStroke}
|
||||||
|
strokeLinecap='round'
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProgressCircle;
|
||||||
Loading…
Reference in New Issue