Merge pull request #28556 from mgruel/feat/missing-props

[@types/react-onsenui] Added several props to various form components

types/react-onsenui/index.d.ts

@@ -1,6 +1,8 @@
-// Type definitions for React Onsen UI (react-onsenui) 2.9
+// Type definitions for React Onsen UI (react-onsenui) 2.9.4
 // Project: https://onsen.io/v2/docs/guide/react/
-// Definitions by: Ozytis <https://ozytis.fr>, Salim <https://github.com/salim7>, Jemmyw <https://github.com/jemmyw>
+// Definitions by: Ozytis <https://ozytis.fr>,
+//                 Salim <https://github.com/salim7>,
+//                 Jemmyw <https://github.com/jemmyw>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -291,12 +293,15 @@ export class Fab extends Component<{
     position?: string,
     disabled?: boolean,
     onClick?(e?: React.MouseEvent<HTMLElement>): void,
+    name?: string,
+    className?: string
 }, any> {}
 
 export class Button extends Component<{
     modifier?: string,
     disabled?: boolean,
     ripple?: boolean,
+    name?: string,
     className?: string,
     onClick?(e?: React.MouseEvent<HTMLElement>): void
 }, any> {}
@@ -304,8 +309,10 @@ export class Button extends Component<{
 export class Input extends Component<{
     modifier?: string,
     disabled?: boolean,
+    readOnly?: boolean,
     onChange?: (e: React.ChangeEvent<any>) => void,
     value?: string,
+    defaultValue?: string,
     checked?: boolean,
     placeholder?: string,
     type?: string,
@@ -321,7 +328,10 @@ export class Radio extends Component<{
     onChange?(e: Event): void,
     value?: string,
     checked?: boolean,
-    inputId?: string
+    defaultChecked?: boolean,
+    inputId?: string,
+    name?: string,
+    className?: string
 }, any> {}
 
 export class Checkbox extends Component<{
@@ -330,7 +340,9 @@ export class Checkbox extends Component<{
     onChange?(e: Event): void,
     value?: string,
     checked?: boolean,
-    inputId?: string
+    inputId?: string,
+    name?: string,
+    className?: string
 }, any> {}
 
 export class Range extends Component<{
@@ -349,14 +361,18 @@ export class Select extends Component<{
     autofocus?: boolean,
     required?: boolean,
     form?: string,
-    size?: string
+    size?: string,
+    name?: string,
+    className?: string
 }, any> {}
 
 export class Switch extends Component<{
+    modifier?: string,
     onChange?(e: SwitchChangeEvent): void,
     checked?: boolean,
     disabled?: boolean,
     inputId?: string,
+    name?: string,
     className?: string
 }, any> {}
 

types/react-onsenui/react-onsenui-tests.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
     SplitterSide, Splitter, SplitterContent,
-    Page, Input, Button,
+    Page, Input, Button, Radio, Checkbox, Select, Switch,
 } from "react-onsenui";
 
 class AppState {
@@ -20,6 +20,9 @@ export class App extends React.Component<AppProps, AppState> {
 
     onChange(event: React.ChangeEvent<HTMLInputElement>) {}
     onClick(event: React.MouseEvent<HTMLButtonElement>) {}
+    onRadioChange(event: Event) {}
+    onCheckboxChange(event: Event) {}
+    onSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {}
 
     render() {
         return (
@@ -38,8 +41,16 @@ export class App extends React.Component<AppProps, AppState> {
                 <SplitterContent>
                     <Page>
                         Test page
-                        <Input name='test' type='text' value='test' onChange={this.onChange} />
-                        <Button onClick={this.onClick} />
+                        <Input name='test' type='text' value='test' readOnly={true} onChange={this.onChange} />
+                        <Radio name='radioTest' defaultChecked={true} className='left' checked={true} disabled={true} inputId='radioId' onChange={this.onRadioChange} />
+                        <Checkbox name='checkboxTest' checked={true} disabled={true} inputId='checkboxId' className='left' modifier='material' onChange={this.onCheckboxChange} />
+                        <Select modifier='material' name='selectTest' className='left' onChange={this.onSelectChange}>
+                            <option value="1">Option #1</option>
+                            <option value="2">Option #2</option>
+                            <option value="3">Option #3</option>
+                        </Select>
+                        <Switch className='left' modifier='material' checked={true} inputId='switchId' name='switchTest' />
+                        <Button name='someButton' onClick={this.onClick} />
 					</Page>
                 </SplitterContent>
             </Splitter>