checkmark.jsx

import React from 'react'
import PropTypes from 'prop-types'
import Radium from 'radium'
import styles from './styles'

const Checkmark = () =>
  <div style={{ width: '100%', height: 'auto', }}>
    <svg viewBox="0 0 64 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <title>Path 2</title>
      <desc>Created with Sketch.</desc>
      <style
        type="text/css"
        /* this is necessary to make the animation self-contained */
        // eslint-disable-next-line
        dangerouslySetInnerHTML={{__html: `
          <![CDATA[
          .cardash-checkbox-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 3s linear forwards;
          }

          @keyframes dash {
            to {
              stroke-dashoffset: 0;
            }
          }
        ]]>
      `, }} />
      <defs />
      <g
        id="Page-1"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd">
        <path
          className="cardash-checkbox-path"
          id="Path-2"
          stroke="#00CA4C"
          strokeWidth="10"
          d="M3.60451411 24.258491 21.078158 42.3198116 59.8447768 3.55319279" />
      </g>
    </svg>
  </div>

/**
 * A reusable checkbox component. Is either checked or unchecked.
 *
 * @param {boolean} checked
 * @param {Function} onClick
 * @param {Object} style - style overrides
 */
export const Checkbox = props =>
  <button
    onClick={() => props.onClick()}
    style={{ ...styles.checkboxOuter, ...props.style, }}>
    <div style={styles.checkboxInner}>
      {props.checked && <Checkmark />}
    </div>
  </button>

Checkbox.propTypes = {
  checked: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  style: PropTypes.shape({}),
}

Checkbox.defaultProps = {
  style: {},
}

export default Radium(Checkbox)