wix-style-react/dist/src/RadioGroup/RadioGroup.driver.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _toArray = _interopRequireDefault(require("lodash/toArray"));

var _Radio = _interopRequireDefault(require("../Radio/Radio.driver"));

var _constants = require("./constants");

var _constants2 = require("../Radio/constants");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var radioGroupDriverFactory = function radioGroupDriverFactory(_ref) {
  var element = _ref.element,
      eventTrigger = _ref.eventTrigger;

  var getOptionContainer = function getOptionContainer() {
    return element.querySelector("[data-hook=\"".concat(_constants.dataHooks.RadioOptionContainer, "\"]"));
  };

  var getRadios = function getRadios() {
    return (0, _toArray["default"])(element.querySelectorAll("[data-hook^=\"".concat(_constants.dataHooks.RadioContainer, "-\"] > :first-child"))).map(function (radio) {
      return radioButtonDriverFactory({
        element: radio,
        eventTrigger: eventTrigger,
        container: getOptionContainer
      });
    });
  };

  var getRadioByIndex = function getRadioByIndex(index) {
    return getRadios()[index];
  };

  var getRadioByValue = function getRadioByValue(value) {
    return radioButtonDriverFactory({
      element: element.querySelector("[data-hook=\"".concat(_constants.dataHooks.RadioContainer, "-").concat(value, "\"] > :first-child")),
      eventTrigger: eventTrigger,
      container: getOptionContainer
    });
  };

  var getRadioContainerAt = function getRadioContainerAt(index) {
    return element.querySelectorAll("[data-hook=\"".concat(_constants.dataHooks.RadioOptionContainer, "\"]"))[index];
  };

  var getLabelElements = function getLabelElements() {
    return getRadios().map(function (radio) {
      return radio.getLabelElement();
    });
  };

  var getSelectedRadio = function getSelectedRadio() {
    return getRadios().find(function (radio) {
      return radio.isChecked();
    });
  };

  return {
    /** Checks that the element exists */
    exists: function exists() {
      return !!element;
    },

    /** Selects the radio that matches the provided value */
    selectByValue: function selectByValue(value) {
      return getRadioByValue(value).click();
    },

    /** Selects the radio at the provided index */
    selectByIndex: function selectByIndex(index) {
      return getRadioByIndex(index).click();
    },

    /** Get the radio value at the provided index */
    getRadioValueAt: function getRadioValueAt(index) {
      return getRadioByIndex(index).getValue();
    },

    /** Get the radio element in the provided index */
    getRadioAtIndex: function getRadioAtIndex(index) {
      return getRadios()[index];
    },

    /** Get the value of the selected radio */
    getSelectedValue: function getSelectedValue() {
      var selected = getSelectedRadio();
      return selected ? selected.getValue() : null;
    },

    /** Checks if the radio in the provided index is disabled */
    isRadioDisabled: function isRadioDisabled(index) {
      return getRadios()[index].isDisabled();
    },
    // TODO: We should deprecate getClassOfLabelAt(). Css tests should be in e2e tests.

    /** Get the class of the label element at the provided index */
    getClassOfLabelAt: function getClassOfLabelAt(index) {
      return getLabelElements()[index].className;
    },

    /** Checks if the display is set to vertical */
    isVerticalDisplay: function isVerticalDisplay() {
      return element.getAttribute(_constants.dataAttr.DISPLAY) === 'vertical';
    },

    /** Checks if the display is set to horizontal */
    isHorizontalDisplay: function isHorizontalDisplay() {
      return element.getAttribute(_constants.dataAttr.DISPLAY) === 'horizontal';
    },

    /** Get the value of applied spacing between radios */
    spacing: function spacing() {
      return getRadioContainerAt(1).style._values['margin-top'];
    },

    /** Get the value of applied line-height on the radio's labels */
    lineHeight: function lineHeight() {
      return element.getAttribute(_constants.dataAttr.LINEHEIGHT);
    },

    /** Get the number of rendered radios */
    getNumberOfRadios: function getNumberOfRadios() {
      return getRadios().length;
    },

    /** Get the value of radio button id at the provided index */
    getRadioIdAt: function getRadioIdAt(index) {
      return getRadioByIndex(index).getId();
    },

    /** Get the value of radio button name at the provided index */
    getRadioName: function getRadioName() {
      return getRadioByIndex(0).getName();
    },

    /** Checks if the radio with the provided index is checked */
    isRadioChecked: function isRadioChecked(index) {
      return getRadioByIndex(index).isChecked();
    }
  };
};

var radioButtonDriverFactory = function radioButtonDriverFactory(_ref2) {
  var element = _ref2.element,
      eventTrigger = _ref2.eventTrigger,
      container = _ref2.container;

  var getByDataHook = function getByDataHook(dataHook) {
    return element.querySelector("[data-hook=\"".concat(dataHook, "\"]"));
  };

  var label = function label() {
    return getByDataHook(_constants2.dataHooks.label);
  };

  return _objectSpread(_objectSpread({}, (0, _Radio["default"])({
    element: element,
    eventTrigger: eventTrigger
  })), {}, {
    /** Simulating a check action by clicking the input element */
    check: function check() {
      return element.click();
    },

    /** Getting the component's label text value */
    getLabel: function getLabel() {
      return label().textContent;
    },

    /** Getting the component's label element */
    getLabelElement: function getLabelElement() {
      return label();
    },

    /** Getting the component's tab-index value */
    // This method is deprecated and this solution is in order not to break users
    getTabIndex: function getTabIndex() {
      return '1';
    },

    /** Getting the component's content element */
    getContent: function getContent() {
      return container().querySelector("[data-hook=\"".concat(_constants.dataHooks.RadioContent, "\"]"));
    }
  });
};

var _default = radioGroupDriverFactory;
exports["default"] = _default;