Sha256: e57ab7ce6b0d49d098ab080a9ccafd7402c1b67d4289270765ed08c7a27d8af6
Contents?: true
Size: 1.29 KB
Versions: 38
Compression:
Stored size: 1.29 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { spacing } from '../utilities/spacing.js'
type ProgressSimpleProps = {
align?: "left" | "center" | "right",
className?: String | Array<String>,
dark?: Boolean,
data?: String,
id?: String,
max?: String,
muted: Boolean,
percent: String,
value: Number,
width: String,
}
const ProgressSimple = (props: ProgressSimpleProps) => {
const {
align,
className,
dark = false,
max,
muted = false,
percent = '',
value,
width = '100%',
} = props
const styles = {
width: width,
}
const valueStyles = {
width: percent ? `${percent}%` : `${(value * 100) / max}%`,
}
const wrapperClass = classnames(
className,
buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
spacing(props)
)
const kitClass = classnames(
className,
buildCss('pb_progress_simple_kit', align, { muted: muted })
)
return (
<div className={wrapperClass}>
<div
className={kitClass}
data-value={value}
style={styles}
>
<div
className="progress_simple_value"
style={valueStyles}
/>
</div>
</div>
)
}
export default ProgressSimple
Version data entries
38 entries across 38 versions & 1 rubygems