gab-social/app/javascript/gabsocial/components/character_counter.js

59 lines
1.4 KiB
JavaScript
Raw Normal View History

2020-02-14 00:40:04 +00:00
import { length } from 'stringz'
2020-04-23 07:13:29 +01:00
/**
* Renders a character counter
* @param {string} props.text - text to use to measure
* @param {number} props.max - max text allowed
*/
export default class CharacterCounter extends PureComponent {
2019-07-02 08:10:25 +01:00
static propTypes = {
text: PropTypes.string.isRequired,
max: PropTypes.number.isRequired,
2020-02-14 00:40:04 +00:00
}
2019-07-02 08:10:25 +01:00
2020-04-24 04:17:27 +01:00
render() {
2020-04-16 07:00:43 +01:00
const { text, max } = this.props
2020-04-23 07:13:29 +01:00
2020-04-24 04:17:27 +01:00
const actualRadius = 16
2020-04-16 07:00:43 +01:00
const radius = 12
2020-02-14 00:40:04 +00:00
const circumference = 2 * Math.PI * radius
2020-04-16 07:00:43 +01:00
const diff = Math.min(length(text), max) / max
2020-02-14 00:40:04 +00:00
const dashoffset = circumference * (1 - diff)
2020-01-27 19:46:42 +00:00
return (
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
2020-04-24 04:17:27 +01:00
<svg
width={actualRadius * 2}
height={actualRadius * 2}
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
>
<circle
fill='none'
cx={actualRadius}
cy={actualRadius}
r={radius}
fill='none'
stroke='#e6e6e6'
strokeWidth='2'
/>
<circle
style={{
2020-02-14 00:40:04 +00:00
strokeDashoffset: dashoffset,
strokeDasharray: circumference,
}}
fill='none'
2020-02-28 15:20:47 +00:00
cx={actualRadius}
cy={actualRadius}
r={radius}
2020-04-24 04:17:27 +01:00
strokeWidth='2'
2020-02-14 00:40:04 +00:00
strokeLinecap='round'
stroke='#21cf7a'
/>
</svg>
2020-01-27 19:46:42 +00:00
</div>
)
2019-07-02 08:10:25 +01:00
}
}