@zohodesk/dot 1.0.0-temp-187.4 → 1.0.0-temp-187.5

package/lib/form/fields/RadioField/RadioField.js

@@ -29,6 +29,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,45 +68,98 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, RadioField);
 
     _this = _super.call(this, props);
+    _this.data = {
+      radios: {},
+      focus: _this.handleFocus
+    };
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.updateData = _this.updateData.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(RadioField, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+          getRef = _this$props.getRef,
+          id = _this$props.id;
+      getRef && getRef(this.data, id);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          id = _this$props2.id;
+
+      if (getRef !== prevProps.getRef) {
+        getRef && getRef(this.data, id);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props3 = this.props,
+          getRef = _this$props3.getRef,
+          id = _this$props3.id;
+      getRef && getRef(null, id);
+    }
+  }, {
     key: "handleChange",
     value: function handleChange(value) {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onChange = _this$props.onChange;
+      var _this$props4 = this.props,
+          id = _this$props4.id,
+          onChange = _this$props4.onChange;
       onChange && onChange(id, value);
     }
+  }, {
+    key: "updateData",
+    value: function updateData(ele, val) {
+      this.data.radios[val] = ele;
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus() {
+      var _this$props5 = this.props,
+          selectedValue = _this$props5.selectedValue,
+          options = _this$props5.options;
+      var firstRadioValue = options[0].value;
+
+      if (selectedValue) {
+        this.data.radios[selectedValue].focus();
+      } else {
+        this.data.radios[firstRadioValue].focus();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          labelName = _this$props2.labelName,
-          id = _this$props2.id,
-          isMandatory = _this$props2.isMandatory,
-          options = _this$props2.options,
-          validationMessage = _this$props2.validationMessage,
-          validationPalette = _this$props2.validationPalette,
-          errorType = _this$props2.errorType,
-          isDisabled = _this$props2.isDisabled,
-          title = _this$props2.title,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          size = _this$props2.size,
-          selectedValue = _this$props2.selectedValue,
-          isActive = _this$props2.isActive,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          validationRuleMessage = _this$props2.validationRuleMessage,
-          validationRulePalette = _this$props2.validationRulePalette,
-          isReadOnly = _this$props2.isReadOnly,
-          variant = _this$props2.variant,
-          customProps = _this$props2.customProps;
+      var _this$props6 = this.props,
+          labelName = _this$props6.labelName,
+          id = _this$props6.id,
+          isMandatory = _this$props6.isMandatory,
+          options = _this$props6.options,
+          validationMessage = _this$props6.validationMessage,
+          validationPalette = _this$props6.validationPalette,
+          errorType = _this$props6.errorType,
+          isDisabled = _this$props6.isDisabled,
+          title = _this$props6.title,
+          labelPalette = _this$props6.labelPalette,
+          labelSize = _this$props6.labelSize,
+          size = _this$props6.size,
+          selectedValue = _this$props6.selectedValue,
+          isActive = _this$props6.isActive,
+          dataId = _this$props6.dataId,
+          dataSelectorId = _this$props6.dataSelectorId,
+          validationRuleMessage = _this$props6.validationRuleMessage,
+          validationRulePalette = _this$props6.validationRulePalette,
+          isReadOnly = _this$props6.isReadOnly,
+          isBoxStyle = _this$props6.isBoxStyle,
+          variant = _this$props6.variant,
+          customProps = _this$props6.customProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$RadioPro = customProps.RadioProps,
@@ -123,7 +182,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
         var text = option.text,
             value = option.value,
@@ -131,9 +190,11 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
             infoTooltip = option.infoTooltip;
+        var isDisabledState = disabled || isDisabled;
+        var isChecked = selectedValue == value;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
-          className: "".concat(_FieldsModule["default"].radio)
+          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
         }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
           id: index,
           value: value,
@@ -141,17 +202,25 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           text: text,
           labelPalette: labelPalette,
           labelSize: labelSize,
-          active: isActive,
-          disabled: disabled || isDisabled,
+          active: isActive || isBoxStyle && isChecked,
+          disabled: isDisabledState,
           disabledTitle: tooltip,
           title: tooltip,
           onChange: _this2.handleChange,
+          getRef: _this2.updateData,
           size: size,
-          checked: selectedValue == value,
+          checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
           variant: variant
-        }, RadioProps), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+        }, RadioProps, {
+          a11y: _objectSpread({
+            tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
+          }, RadioProps.a11y),
+          customClass: _objectSpread({
+            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
+          }, RadioProps.customClass)
+        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
           name: "ZD-GN-info",
           size: "16",
           title: infoTooltip,

package/lib/form/fields/RadioField/__tests__/RadioField.spec.js

@@ -8,6 +8,22 @@ var _RadioField = _interopRequireDefault(require("../RadioField"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var options = [{
+  text: 'Chennai',
+  value: '1'
+}, {
+  text: 'Mumbai',
+  value: '2',
+  tooltip: 'Disabled Option',
+  disabled: true
+}, {
+  text: 'Delhi',
+  value: '3',
+  infoTooltip: 'Capital of India'
+}, {
+  text: 'Kolkata',
+  value: '4'
+}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -17,4 +33,21 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with options', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: options
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering options with isBoxStyle', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
+      options: options,
+      isBoxStyle: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });