wix-style-react/src/FormField/FormField.driver.js

wix-style-react

import infoIconDriverFactory from '../InfoIcon/InfoIcon.driver';
import { dataHooks } from './constants';
import textDriverFactory from '../Text/Text.driver';

const formFieldDriver = ({ element }) => {
  const byHook = hook => element.querySelector(`[data-hook*="${hook}"]`);
  const charactersCounter = () => byHook(dataHooks.counter);

  const labelElement = () => byHook(dataHooks.label);
  const labelTextDriver = () => textDriverFactory({ element: labelElement() });

  return {
    exists: () => !!element,
    element: () => element,
    /** get children */
    getChildren: () => byHook(dataHooks.children),
    /** get label */
    getLabel: () => labelElement(),
    /** returns label size */
    getLabelSize: () => labelTextDriver().getSize(),
    /** returns true whether form field is required */
    isRequired: () => !!byHook(dataHooks.asterisk),
    /** returns the length left */
    getLengthLeft: () => {
      const counter = charactersCounter();
      return counter ? parseInt(counter.innerHTML, 10) : null;
    },
    /** returns whether the form field length is exceeded */
    isLengthExceeded: () => {
      const counter = charactersCounter();
      if (counter) {
        const length = parseInt(counter.innerHTML, 10);
        return length < 0;
      }
      return false;
    },
    /** returns true whether form field has tooltip */
    hasTooltip: () =>
      !!element.querySelector(`[data-hook="${dataHooks.infoIcon}"]`),

    /** returns tooltip text of the info content */
    getInfoContent: () =>
      infoIconDriverFactory({
        element: element.querySelector(`[data-hook="${dataHooks.infoIcon}"]`),
      }).getContent(),

    /** get form field suffix */
    getSuffix: () => byHook(dataHooks.suffix),
  };
};

export default formFieldDriver;