search

Autodesk / orion-ui

UI Components that work seamlessly in multiple UI frameworks
https://goo.gl/shxHPB
Other
22 stars 6 forks source link

Add RadioButton #283

Closed nfiniteset closed 7 years ago

nfiniteset commented 7 years ago 
As a developer
I want to add checkboxes to my application
So that my users are able to interact with the application

Typical usage

<RadioButton
  disabled={false}
  onChange={this.handleRadioButtonChange}
  name="myRadioGroup"
/>

Complete props

RadioButton.propTypes = {
  name: PropTypes.string,
  value: PropTypes.bool,
  label: PropTypes.string,
  checked: PropTypes.bool,
  required: PropTypes.string
  disabled: PropTypes.bool,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
}

TODO

shannonwells commented 7 years ago

Canary build: - react-playground: 1.0.3 => 1.0.3-alpha.c35929b8 (private)

Merge: https://circleci.com/gh/Autodesk/orion-ui/1418

camwest commented 7 years ago

Getting the following error: TypeError: Cannot read property '_interface' of undefined

×
TypeError: Cannot read property '_interface' of undefined
RadioButtonAdapter.HIGElement
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:6986
  6983 | this.initialProps = initialProps;
  6984 | this.props = initialProps;
  6985 | 
> 6986 | var _partitionProps = partitionProps(initialProps, HIGConstructor._interface),
  6987 |     defaults$$1 = _partitionProps.defaults,
  6988 |     events = _partitionProps.events,
  6989 |     possibleEvents = _partitionProps.possibleEvents;
View compiled
new RadioButtonAdapter
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:11154
  11151 | 
  11152 | function RadioButtonAdapter(initialProps) {
  11153 |   classCallCheck(this, RadioButtonAdapter);
> 11154 |   return possibleConstructorReturn(this, (RadioButtonAdapter.__proto__ || Object.getPrototypeOf(RadioButtonAdapter)).call(this, undefined, initialProps));
  11155 | }
  11156 | 
  11157 | createClass(RadioButtonAdapter, [{
View compiled
new Adapter
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:7255
  7252 |   if (context.parent) {
  7253 |     _this.instance = context.parent.createElement(ElementConstructor, props);
  7254 |   } else {
> 7255 |     _this.instance = new ElementConstructor(props);
  7256 |   }
  7257 |   return _this;
  7258 | }
View compiled
(anonymous function)
node_modules/react-dom/lib/ReactCompositeComponent.js:294
  291 | if (doConstruct) {
  292 |   if (process.env.NODE_ENV !== 'production') {
  293 |     return measureLifeCyclePerf(function () {
> 294 |       return new Component(publicProps, publicContext, updateQueue);
  295 |     }, this._debugID, 'ctor');
  296 |   } else {
  297 |     return new Component(publicProps, publicContext, updateQueue);
View compiled
measureLifeCyclePerf
node_modules/react-dom/lib/ReactCompositeComponent.js:75
  72 | 
  73 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
  74 | try {
> 75 |   return fn();
  76 | } finally {
  77 |   ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
  78 | }
View compiled
ReactCompositeComponentWrapper._constructComponentWithoutOwner
node_modules/react-dom/lib/ReactCompositeComponent.js:293
  290 | 
  291 | if (doConstruct) {
  292 |   if (process.env.NODE_ENV !== 'production') {
> 293 |     return measureLifeCyclePerf(function () {
  294 |       return new Component(publicProps, publicContext, updateQueue);
  295 |     }, this._debugID, 'ctor');
  296 |   } else {
View compiled
ReactCompositeComponentWrapper._constructComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:279
  276 | if (process.env.NODE_ENV !== 'production') {
  277 |   ReactCurrentOwner.current = this;
  278 |   try {
> 279 |     return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
  280 |   } finally {
  281 |     ReactCurrentOwner.current = null;
  282 |   }
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:187
  184 | 
  185 | // Initialize the public class
  186 | var doConstruct = shouldConstruct(Component);
> 187 | var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
  188 | var renderedElement;
  189 | 
  190 | // Support functional components
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactDOMComponent.mountChildren
node_modules/react-dom/lib/ReactMultiChild.js:236
  233 |   if (process.env.NODE_ENV !== 'production') {
  234 |     selfDebugID = getDebugID(this);
  235 |   }
> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
  237 |   child._mountIndex = index++;
  238 |   mountImages.push(mountImage);
  239 | }
View compiled
ReactDOMComponent._createInitialChildren
node_modules/react-dom/lib/ReactDOMComponent.js:703
  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
  701 |   }
  702 | } else if (childrenToUse != null) {
> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
  704 |   for (var i = 0; i < mountImages.length; i++) {
  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
  706 |   }
View compiled
ReactDOMComponent.mountComponent
node_modules/react-dom/lib/ReactDOMComponent.js:522
  519 |   }
  520 |   this._updateDOMProperties(null, props, transaction);
  521 |   var lazyTree = DOMLazyTree(el);
> 522 |   this._createInitialChildren(transaction, props, context, lazyTree);
  523 |   mountImage = lazyTree;
  524 | } else {
  525 |   var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactDOMComponent.mountChildren
node_modules/react-dom/lib/ReactMultiChild.js:236
  233 |   if (process.env.NODE_ENV !== 'production') {
  234 |     selfDebugID = getDebugID(this);
  235 |   }
> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
  237 |   child._mountIndex = index++;
  238 |   mountImages.push(mountImage);
  239 | }
View compiled
ReactDOMComponent._createInitialChildren
node_modules/react-dom/lib/ReactDOMComponent.js:703
  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
  701 |   }
  702 | } else if (childrenToUse != null) {
> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
  704 |   for (var i = 0; i < mountImages.length; i++) {
  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
  706 |   }
View compiled
ReactDOMComponent.mountComponent
node_modules/react-dom/lib/ReactDOMComponent.js:522
  519 |   }
  520 |   this._updateDOMProperties(null, props, transaction);
  521 |   var lazyTree = DOMLazyTree(el);
> 522 |   this._createInitialChildren(transaction, props, context, lazyTree);
  523 |   mountImage = lazyTree;
  524 | } else {
  525 |   var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:370
  367 | );
  368 | this._renderedComponent = child;
  369 | 
> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
  371 | 
  372 | if (process.env.NODE_ENV !== 'production') {
  373 |   if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:257
  254 | if (inst.unstable_handleError) {
  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
  256 | } else {
> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
  258 | }
  259 | 
  260 | if (inst.componentDidMount) {
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:370
  367 | );
  368 | this._renderedComponent = child;
  369 | 
> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
  371 | 
  372 | if (process.env.NODE_ENV !== 'production') {
  373 |   if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:257
  254 | if (inst.unstable_handleError) {
  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
  256 | } else {
> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
  258 | }
  259 | 
  260 | if (inst.componentDidMount) {
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
mountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:104
  101 |   console.time(markerName);
  102 | }
  103 | 
> 104 | var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID */
  105 | );
  106 | 
  107 | if (markerName) {
View compiled
ReactReconcileTransaction.perform
node_modules/react-dom/lib/Transaction.js:143
  140 |   // one of these calls threw.
  141 |   errorThrown = true;
  142 |   this.initializeAll(0);
> 143 |   ret = method.call(scope, a, b, c, d, e, f);
  144 |   errorThrown = false;
  145 | } finally {
  146 |   try {
View compiled
batchedMountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:126
  123 |   var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
  124 |   /* useCreateElement */
  125 |   !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
> 126 |   transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
  127 |   ReactUpdates.ReactReconcileTransaction.release(transaction);
  128 | }
  129 | 
View compiled
ReactDefaultBatchingStrategyTransaction.perform
node_modules/react-dom/lib/Transaction.js:143
  140 |   // one of these calls threw.
  141 |   errorThrown = true;
  142 |   this.initializeAll(0);
> 143 |   ret = method.call(scope, a, b, c, d, e, f);
  144 |   errorThrown = false;
  145 | } finally {
  146 |   try {
View compiled
Object.batchedUpdates
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62
  59 |     if (alreadyBatchingUpdates) {
  60 |       return callback(a, b, c, d, e);
  61 |     } else {
> 62 |       return transaction.perform(callback, null, a, b, c, d, e);
  63 |     }
  64 |   }
  65 | };
View compiled
Object.batchedUpdates
node_modules/react-dom/lib/ReactUpdates.js:97
   94 | 
   95 | function batchedUpdates(callback, a, b, c, d, e) {
   96 |   ensureInjected();
>  97 |   return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
   98 | }
   99 | 
  100 | /**
View compiled
Object._renderNewRootComponent
node_modules/react-dom/lib/ReactMount.js:319
  316 | // rendering, in componentWillMount or componentDidMount, will be batched
  317 | // according to the current batching strategy.
  318 | 
> 319 | ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
  320 | 
  321 | var wrapperID = componentInstance._instance.rootID;
  322 | instancesByReactRootID[wrapperID] = componentInstance;
View compiled
Object._renderSubtreeIntoContainer
node_modules/react-dom/lib/ReactMount.js:401
  398 | }
  399 | 
  400 | var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
> 401 | var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
  402 | if (callback) {
  403 |   callback.call(component);
  404 | }
View compiled
Object.render
node_modules/react-dom/lib/ReactMount.js:422
  419 |  * @return {ReactComponent} Component instance rendered in `container`.
  420 |  */
  421 | render: function (nextElement, container, callback) {
> 422 |   return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
  423 | },
  424 | 
  425 | /**
View compiled
Object../src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.