115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import remcalc from 'remcalc';
|
|
|
|
import Rotate from './rotate';
|
|
|
|
export const Tick = props => (
|
|
<svg
|
|
width="9"
|
|
height="9"
|
|
viewBox="0 0 9 9"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export const Completed = ({ colors = {}, ...props }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={colors.greenDark}
|
|
fill-rule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
fill={colors.white}
|
|
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export const PartCompleted = ({ colors = {}, ...props }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
style={{ padding: '1px' }}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={colors.white}
|
|
fillRule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill={colors.greenDark}
|
|
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
|
/>
|
|
<path
|
|
fill={colors.text}
|
|
fillRule="evenodd"
|
|
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export const Incomplete = ({ colors = {}, ...props }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{ padding: remcalc(1) }}
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={colors.white}
|
|
fillRule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill={colors.text}
|
|
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export default ({
|
|
fill,
|
|
checked,
|
|
border,
|
|
direction = 'down',
|
|
style = {},
|
|
...rest
|
|
}) => (
|
|
<Rotate direction={direction}>
|
|
{({ style: rotateStyle }) => {
|
|
if (fill && checked) {
|
|
return <Completed style={{ ...style, ...rotateStyle }} {...rest} />;
|
|
}
|
|
|
|
if (checked && border) {
|
|
return <PartCompleted style={{ ...style, ...rotateStyle }} {...rest} />;
|
|
}
|
|
|
|
if (checked) {
|
|
return <Tick style={{ ...style, ...rotateStyle }} {...rest} />;
|
|
}
|
|
|
|
return <Incomplete style={{ ...style, ...rotateStyle }} {...rest} />;
|
|
}}
|
|
</Rotate>
|
|
);
|