saagie-ui/src/react/formsy/fieldSlider/FieldSlider.js

Saagie UI from Saagie Design System

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { withFormsy, propTypes as formsyPropTypes } from 'formsy-react';
import InputRange from 'react-input-range';
import { modifierCSS } from '../../helpers';
import { FormGroup } from '../../core/molecules/formGroup/FormGroup';

const propTypes = {
  /**
   * Formsy PropTypes
   */
  ...formsyPropTypes,

  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * Define the color of the Slider
   */
  color: PropTypes.oneOf([
    '', 'danger', 'primary', 'success', 'warning',
  ]),

  /**
   * Add more FormGroup props.
   */
  groupProps: PropTypes.object,

  /**
   * The message to better describe the Slider purpose.
   * Will be given to the FormGroup component.
   */
  helper: PropTypes.node,

  /**
   * Disable the Slider.
   */
  isDisabled: PropTypes.bool,

  /**
   * The label of the Slider.
   * Will be given to the FormGroup component.
   */
  label: PropTypes.node,

  /**
   * Event handler trigerred on Slider change.
   */
  onChange: PropTypes.func,

  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  className: '',
  color: '',
  groupProps: {},
  helper: '',
  isDisabled: false,
  label: '',
  onChange: () => {},
  tag: InputRange,
};

export const FieldSliderUI = forwardRef(({
  // Formsy Props
  getErrorMessage,
  getValue,
  isFormSubmitted,
  isPristine,
  isRequired,
  isValid,
  setValue,
  value,

  // Component Props
  className,
  color,
  groupProps,
  helper,
  isDisabled,
  label,
  onChange,
  tag: Tag,
  ...props
}, ref) => {
  const isFeedbackVisible = !isPristine() || isFormSubmitted();
  const isError = !isValid() && isFeedbackVisible;

  const handleChange = (newValue) => {
    setValue(newValue);
    onChange(newValue);
  };

  const classes = classnames(
    'sui-a-form-range',
    className,
    modifierCSS(color),
    isError && modifierCSS('danger'),
  );

  return (
    <FormGroup
      isOptional={!isRequired()}
      feedbackMessage={isFeedbackVisible && getErrorMessage()}
      validationState={isError ? 'danger' : null}
      {...groupProps}
      helper={helper}
      label={label}
    >
      <div className={classes}>
        <Tag
          disabled={isDisabled}
          onChange={handleChange}
          ref={ref}
          value={getValue()}
          {...props}
        />
      </div>
    </FormGroup>

  );
});

FieldSliderUI.propTypes = propTypes;
FieldSliderUI.defaultProps = defaultProps;

export const FieldSlider = withFormsy(FieldSliderUI);