@devseed-ui/form/src/helper/index.js

devseed UI Kit Form

import React from 'react';
import styled, { css } from 'styled-components';
import T from 'prop-types';

import { themeVal, glsp } from '@devseed-ui/theme-provider';

export const FormHelper = styled.div`
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  line-height: 1.25rem;
  color: ${themeVal('color.base-400')};
`;

export const FormHelperMessage = styled.p`
  font-size: 0.875rem;
  ${({ invalid }) =>
    invalid
      ? css`
          color: ${themeVal('color.danger')};
        `
      : ''}
`;

const renderFormHelperCounterColor = ({ currentVal, maxVal, warnAt }) => {
  if (!currentVal || !maxVal) return;

  const warnLimit = warnAt || Math.floor(maxVal * 0.9);

  if (currentVal > maxVal) {
    return css`
      color: ${themeVal('color.danger')};
    `;
  } else if (currentVal >= warnLimit) {
    return css`
      color: ${themeVal('color.warning')};
    `;
  }
};

const FormHelperCounterSelf = styled.p`
  font-size: 0.75rem;
  padding-left: ${glsp()};
  margin-left: auto;

  ${renderFormHelperCounterColor}
`;

export const FormHelperCounter = (props) => {
  const { value, max, children, ...rest } = props;

  return (
    <FormHelperCounterSelf currentVal={value} maxVal={max} {...rest}>
      {children || `${value} / ${max}`}
    </FormHelperCounterSelf>
  );
};

FormHelperCounter.propTypes = {
  value: T.number,
  warnAt: T.number,
  max: T.number,
  children: T.node
};