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

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.3 (Yet To Publish)
+
+- **RadioField**
+  - `getRef`, `isBoxStyle` props supported
+  - Fixed the Radio box hover style applying when disabled
+
 # 1.7.2
 
 - **Lookup - Search** - renderChildren, isActive, hasSeparator & customStyle props supported & Some customization also opened for this compoenent.

package/es/form/fields/Fields.module.css

@@ -74,7 +74,7 @@
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px
 }
-.radioBox:hover, .radioBoxActive {
+.hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
 }
 .radioBoxActive {

package/es/form/fields/RadioField/RadioField.js

@@ -14,7 +14,40 @@ import style from "../Fields.module.css";
 export default class RadioField extends PureComponent {
   constructor(props) {
     super(props);
+    this.data = {
+      radios: {},
+      focus: this.handleFocus
+    };
     this.handleChange = this.handleChange.bind(this);
+    this.updateData = this.updateData.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(this.data, id);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      getRef,
+      id
+    } = this.props;
+
+    if (getRef !== prevProps.getRef) {
+      getRef && getRef(this.data, id);
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(null, id);
   }
 
   handleChange(value) {
@@ -25,6 +58,24 @@ export default class RadioField extends PureComponent {
     onChange && onChange(id, value);
   }
 
+  updateData(ele, val) {
+    this.data.radios[val] = ele;
+  }
+
+  handleFocus() {
+    const {
+      selectedValue,
+      options
+    } = this.props;
+    const firstRadioValue = options[0].value;
+
+    if (selectedValue) {
+      this.data.radios[selectedValue].focus();
+    } else {
+      this.data.radios[firstRadioValue].focus();
+    }
+  }
+
   render() {
     let {
       labelName,
@@ -46,6 +97,7 @@ export default class RadioField extends PureComponent {
       validationRuleMessage,
       validationRulePalette,
       isReadOnly,
+      isBoxStyle,
       variant,
       customProps
     } = this.props;
@@ -69,7 +121,7 @@ export default class RadioField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
     }, options.map((option, index) => {
       let {
         text,
@@ -78,9 +130,11 @@ export default class RadioField extends PureComponent {
         tooltip,
         infoTooltip
       } = option;
+      let isDisabledState = disabled || isDisabled;
+      let isChecked = selectedValue == value;
       return /*#__PURE__*/React.createElement("span", {
         key: index,
-        className: `${style.radio}`
+        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
       }, /*#__PURE__*/React.createElement(Radio, {
         id: index,
         value: value,
@@ -88,17 +142,26 @@ export default class RadioField extends PureComponent {
         text: text,
         labelPalette: labelPalette,
         labelSize: labelSize,
-        active: isActive,
-        disabled: disabled || isDisabled,
+        active: isActive || isBoxStyle && isChecked,
+        disabled: isDisabledState,
         disabledTitle: tooltip,
         title: tooltip,
         onChange: this.handleChange,
+        getRef: this.updateData,
         size: size,
-        checked: selectedValue == value,
+        checked: isChecked,
         dataId: dataId,
         isReadOnly: isReadOnly,
         variant: variant,
-        ...RadioProps
+        ...RadioProps,
+        a11y: {
+          tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
+          ...RadioProps.a11y
+        },
+        customClass: {
+          customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
+          ...RadioProps.customClass
+        }
       }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
         name: "ZD-GN-info",
         size: "16",

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

@@ -1,6 +1,22 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import RadioField from "../RadioField";
+const 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', () => {
   test('rendering the defult props', () => {
     const {
@@ -10,4 +26,21 @@ describe('RadioField', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering options with isBoxStyle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: options,
+      isBoxStyle: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });