@vonage/vivid-react/VwcRadio/index.js

Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings

/*
* DO NOT EDIT THIS FILE. IT IS GENERATED
*/
/*
Code in this file were generated using following JSON:
{
 "name": "vwc-radio",
 "path": "./../node_modules/@vonage/vwc-radio/src/vwc-radio.ts",
 "description": "This component is an extension of [<mwc-radio>](https://github.com/material-components/material-components-web-components/tree/master/packages/radio)",
 "properties": [
  {
   "name": "styles",
   "type": "CSSResult[]"
  },
  {
   "name": "global",
   "type": "boolean",
   "bindable": false
  },
  {
   "name": "checked",
   "description": "We define our own getter/setter for `checked` because we need to track\nchanges to it synchronously.\n\nThe order in which the `checked` property is set across radio buttons\nwithin the same group is very important. However, we can't rely on\nUpdatingElement's `updated` callback to observe these changes (which is\nalso what the `@observer` decorator uses), because it batches changes to\nall properties.\n\nConsider:\n\n  radio1.disabled = true;\n  radio2.checked = true;\n  radio1.checked = true;\n\nIn this case we'd first see all changes for radio1, and then for radio2,\nand we couldn't tell that radio1 was the most recently checked.",
   "type": "boolean",
   "bindable": false
  },
  {
   "name": "disabled",
   "type": "boolean",
   "bindable": false
  },
  {
   "name": "value",
   "type": "string",
   "bindable": false
  },
  {
   "name": "name",
   "type": "string",
   "bindable": false
  },
  {
   "name": "reducedTouchTarget",
   "description": "Touch target extends beyond visual boundary of a component by default.\nSet to `true` to remove touch target added to the component.",
   "type": "boolean",
   "bindable": false
  },
  {
   "name": "formElementTabIndex",
   "description": "input's tabindex is updated based on checked status.\nTab navigation will be removed from unchecked radios.",
   "type": "number",
   "bindable": false
  },
  {
   "name": "ariaLabel",
   "type": "string | undefined",
   "bindable": false
  },
  {
   "name": "ariaLabelledBy",
   "type": "string | undefined",
   "bindable": false
  },
  {
   "name": "isRippleActive"
  },
  {
   "name": "shadowRootOptions",
   "type": "ShadowRootInit",
   "bindable": false
  },
  {
   "name": "ripple",
   "description": "Implement ripple getter for Ripple integration with mwc-formfield",
   "type": "Promise<Ripple | null>"
  }
 ],
 "events": [
  {
   "name": "checked"
  },
  "change"
 ]
}
*/
import PropTypes from 'prop-types'
import wrapper from '@vonage/vivid-react-wrapper'
import '@vonage/vwc-radio'


/** This component is an extension of [<mwc-radio>](https://github.com/material-components/material-components-web-components/tree/master/packages/radio) 
* @param {boolean} global  
* @param {boolean} checked - We define our own getter/setter for `checked` because we need to track
changes to it synchronously.

The order in which the `checked` property is set across radio buttons
within the same group is very important. However, we can't rely on
UpdatingElement's `updated` callback to observe these changes (which is
also what the `@observer` decorator uses), because it batches changes to
all properties.

Consider:

  radio1.disabled = true;
  radio2.checked = true;
  radio1.checked = true;

In this case we'd first see all changes for radio1, and then for radio2,
and we couldn't tell that radio1 was the most recently checked. 
* @param {boolean} disabled  
* @param {string} value  
* @param {string} name  
* @param {boolean} reducedTouchTarget - Touch target extends beyond visual boundary of a component by default.
Set to `true` to remove touch target added to the component. 
* @param {number} formElementTabIndex - input's tabindex is updated based on checked status.
Tab navigation will be removed from unchecked radios. 
* @param {string | undefined} ariaLabel  
* @param {string | undefined} ariaLabelledBy  
* @param {ShadowRootInit} shadowRootOptions  
*/
const VwcRadio = wrapper('vwc-radio',  {
    events: [{"name":"change","propName":"onChange"},{"name":"checked"}],
    attributes: [],
    properties: []
});

VwcRadio.propTypes = {
  onChecked: PropTypes.func,
  onChange: PropTypes.func,
  global: PropTypes.bool,
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  value: PropTypes.string,
  name: PropTypes.string,
  reducedTouchTarget: PropTypes.bool,
  formElementTabIndex: PropTypes.number,
  ariaLabel: PropTypes.string,
  ariaLabelledBy: PropTypes.string,
  shadowRootOptions: PropTypes.any /* ShadowRootInit */
}

VwcRadio.defaultProps = {

}

VwcRadio.displayName = 'VwcRadio'



export default VwcRadio