\n \n */\nclass AlertDialog extends BaseDialog {\n _getDomNodeName() {\n return 'ons-alert-dialog';\n }\n}\n\nAlertDialog.propTypes = {\n /**\n * @name onCancel\n * @type function\n * @required false\n * @description\n * [en]\n * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onCancel: React.PropTypes.func,\n\n /**\n * @name isOpen\n * @type bool\n * @required true\n * @description\n * [en]\n * Indicates whether the dialog is open and shown.\n * [/en]\n * [jp] [/jp]\n */\n isOpen: React.PropTypes.bool.isRequired,\n\n /**\n * @name isCancelable\n * @type bool\n * @required false\n * @description\n * [en]\n * Specifies whether the dialog is cancelable or not.\n * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices\n * [/en]\n * [jp] [/jp]\n */\n isCancelable: React.PropTypes.bool,\n\n /**\n * @name isDisabled\n * @type bool\n * @required false\n * @description\n * [en]\n * Specifies whether the dialog is disabled.\n * [/en]\n * [jp] [/jp]\n */\n isDisabled: React.PropTypes.bool,\n\n /**\n * @name animation\n * @type string\n * @required false\n * @description\n * [en]\n * The animation used when showing and hiding the dialog. Can be either `\"none\"` or `\"default\"`.\n * [/en]\n * [jp] [/jp]\n */\n animation: React.PropTypes.string,\n\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the dialog.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name maskColor\n * @type string\n * @required false\n * @description\n * [en]Color of the background mask. Default is \"rgba(0, 0, 0, 0.2)\"[/en]\n * [jp] [/jp]\n */\n maskColor: React.PropTypes.string,\n\n /**\n * @name animationOptions\n * @type object\n * @required false\n * @description\n * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]\n * [jp] [/jp]\n */\n animationOptions: React.PropTypes.object,\n\n /**\n * @name onPreShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called just before the alert dialog is displayed.\n * [/en]\n * [jp][/jp]\n */\n onPreShow: React.PropTypes.func,\n\n /**\n * @name onPostShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called just after the alert dialog is displayed.\n * [/en]\n * [jp][/jp]\n */\n onPostShow: React.PropTypes.func,\n\n /**\n * @name onPreHide\n * @type function\n * @required false\n * @description\n * [en]Called just before the alert dialog is hidden.[/en]\n * [jp][/jp]\n */\n onPreHide: React.PropTypes.func,\n\n /**\n * @name onPostHide\n * @type function\n * @required false\n * @description\n * [en]Called just after the alert dialog is hidden.[/en]\n * [jp][/jp]\n */\n onPostHide: React.PropTypes.func\n};\n\nexport default AlertDialog;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nclass BasicComponent extends React.Component {\n constructor(props) {\n super(props);\n this.updateClasses = this.updateClasses.bind(this);\n }\n\n updateClasses() {\n var node = ReactDOM.findDOMNode(this);\n\n if (typeof this.props.className !== 'undefined') {\n if (this.lastClass) {\n node.className = node.className.replace(this.lastClass, ' ');\n }\n\n this.lastClass = ' ' + this.props.className.trim();\n\n node.className = node.className.trim() + this.lastClass;\n }\n\n if (!window._superSecretOns) {\n throw new Error(\"react-onsenui requires `onsenui`, make sure you are loading it with `import onsenui` or `require('onsenui')` before using the components\");\n }\n\n window._superSecretOns._autoStyle.prepare(node);\n }\n\n componentDidMount() {\n this.updateClasses();\n }\n\n componentDidUpdate() {\n this.updateClasses();\n }\n}\n\nexport default BasicComponent;\n","import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\nclass SimpleWrapper extends BasicComponent {\n render() {\n var {...others} = this.props;\n\n Util.convert(others, 'disabled');\n Util.convert(others, 'ripple');\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n};\n\nexport default SimpleWrapper;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n/**\n * @original ons-back-button\n * @category toolbar\n * @tutorial react/Reference/navigator\n * @description\n * [en]\n * Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically.\n *\n * The default behavior can be overridden using the `onClick` prop.\n * [/en]\n * [jp][/jp]\n * @example\n * \n
Back
\n
{this.props.title}
\n \n */\nclass BackButton extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-back-button';\n }\n\n _updateOnClick(props) {\n const node = ReactDOM.findDOMNode(this);\n\n if (props.onClick) {\n node.onClick = () => null;\n } else {\n delete node.onClick;\n }\n }\n\n componentDidMount() {\n this._updateOnClick(this.props);\n }\n\n componentWillReceiveProps(props) {\n this._updateOnClick(props);\n }\n};\n\nBackButton.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the back button.[/en]\n * [jp][/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name onClick\n * @type function\n * @description\n * [en]This function will be called ones the button is clicked. It overrides the default behavior of the back button.[/en]\n * [jp][/jp]\n */\n onClick: React.PropTypes.func\n};\n\nexport default BackButton;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-bottom-toolbar\n * @category toolbar\n * @description\n * [en] Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically. [/en]\n * [jp][/jp]\n * @example\n * Content \n */\nclass BottomToolbar extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-bottom-toolbar';\n }\n};\n\nBottomToolbar.propTypes = {\n /**\n * @name modifier\n * @type string\n * @description\n * [en]\n * Specify modifier name to specify custom styles. Optional.\n * [/en]\n * [jp][/jp]\n */\n modifier: React.PropTypes.string\n};\n\nexport default BottomToolbar;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-button\n * @category button\n * @tutorial react/Reference/button\n * @description\n * [en] Button component. If you want to place a button in a toolbar, use `ToolbarButton` or `BackButton` instead. Will automatically display as a Material Design button with a ripple effect on Android.\n [/en]\n * [jp][/jp]\n * @example\n * \n */\nclass Button extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-button';\n }\n};\n\nButton.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the button.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en]\n * Specifies whether the button is disabled.\n * [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool,\n\n /**\n * @name ripple\n * @type bool\n * @description\n * [en]\n * Specifies whether the button has a ripple effect.\n * [/en]\n * [jp] [/jp]\n */\n ripple: React.PropTypes.bool,\n\n /**\n * @name onClick\n * @type function\n * @description\n * [en] This function will be called ones the button is clicked. [/en]\n * [jp] [/jp]\n */\n onClick: React.PropTypes.func\n};\n\nexport default Button;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Util from './Util.js';\n\n/**\n * @original ons-carousel\n * @category carousel\n * @tutorial react/Reference/carousel\n * @description\n * [en] Carousel component. A carousel can be used to display several items in the same space.\n * The component supports displaying content both horizontally and vertically. The user can scroll through the items by dragging and it can also be controller programmatically.\n [/en]\n * [jp][/jp]\n * @example\n * console.log('onPostChange')}\n onOverscroll={() => console.log('onOverscroll')}\n onRefresh={() => console.log('onRefresh')}\n ref='carousel' swipeable overscrollable autoScroll fullscreen autoScrollRatio={0.2}>\n \n
GRAY
\n \n \n
BLUE
\n \n \n\n */\nclass Carousel extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-carousel';\n }\n\n componentDidMount() {\n super.componentDidMount();\n var node = ReactDOM.findDOMNode(this);\n CustomElements.upgrade(node);\n node.addEventListener('postchange', this.props.onPostChange);\n node.addEventListener('refresh', this.props.onRefresh);\n node.addEventListener('overscroll', this.props.onOverscroll);\n }\n\n componentWillReceiveProps(props) {\n var node = ReactDOM.findDOMNode(this);\n if (this.props.index !== props.index) {\n node.setActiveIndex(props.index, props.animationOptions);\n }\n }\n\n componentWillUnmount() {\n var node = ReactDOM.findDOMNode(this);\n node.removeEventListener('postchange', this.props.onPostChange);\n node.removeEventListener('refresh', this.props.onRefresh);\n node.removeEventListener('overscroll', this.props.onOverscroll);\n }\n\n render() {\n var {...others} = this.props;\n\n ['fullscreen', 'swipeable', 'disabled', 'centered', 'overscrollable', 'centered'].forEach((el) => {\n Util.convert(others, el);\n });\n\n Util.convert(others, 'itemWidth', {fun: Util.sizeConverter, newName: 'item-width'});\n Util.convert(others, 'itemHeight', {fun: Util.sizeConverter, newName: 'item-height'});\n Util.convert(others, 'autoScroll', {newName: 'auto-scroll'});\n Util.convert(others, 'autoRefresh', {newName: 'auto-refresh'});\n Util.convert(others, 'autoScrollRatio', {newName: 'auto-scroll-ratio'});\n Util.convert(others, 'index', {newName: 'initial-index'});\n Util.convert(others, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n};\n\nCarousel.propTypes = {\n\n /**\n * @name direction\n * @type string\n * @required false\n * @description\n * [en]The direction of the carousel. Can be either \"horizontal\" or \"vertical\". Default is \"horizontal\".[/en]\n * [jp] [/jp]\n */\n direction: React.PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * @name fullscreen\n * @type bool\n * @description\n * [en]If true, the carousel will cover the whole screen.[/en]\n * [jp] [/jp]\n */\n fullscreen: React.PropTypes.bool,\n\n /**\n * @name overscrollable\n * @type bool\n * @description\n * [en]If true, the carousel will be scrollable over the edge. It will bounce back when released.[/en]\n * [jp] [/jp]\n */\n overscrollable: React.PropTypes.bool,\n\n /**\n * @name centered\n * @type bool\n * @description\n * [en]If true, the carousel then the selected item will be in the center of the carousel instead of the beginning. Useful only when the items are smaller than the carousel.[/en]\n * [jp] [/jp]\n */\n centered: React.PropTypes.bool,\n\n /**\n * @name itemWidth\n * @type number\n * @description\n * [en]ons-carousel-item's width. Only works when the direction is set to \"horizontal\".[/en]\n * [jp] [/jp]\n */\n itemWidth: React.PropTypes.oneOf(React.PropTypes.string, React.PropTypes.string),\n\n /**\n * @name itemHeight\n * @type number\n * @description\n * [en]ons-carousel-item's height. Only works when the direction is set to \"vertical\".[/en]\n * [jp] [/jp]\n */\n itemHeight: React.PropTypes.oneOf(React.PropTypes.string, React.PropTypes.string),\n\n /**\n * @name autoScroll\n * @type bool\n * @description\n * [en]If true, the carousel will be automatically scrolled to the closest item border when released.[/en]\n * [jp] [/jp]\n */\n autoScroll: React.PropTypes.bool,\n\n /**\n * @name autoScrollRatio\n * @type number\n * @description\n * [en]A number between 0.0 and 1.0 that specifies how much the user must drag the carousel in order for it to auto scroll to the next item.[/en]\n * [jp] [/jp]\n */\n autoScrollRatio: React.PropTypes.number,\n\n /**\n * @name swipeable\n * @type bool\n * @description\n * [en]If true, the carousel can be scrolled by drag or swipe.[/en]\n * [jp] [/jp]\n */\n swipeable: React.PropTypes.bool,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en]If true, the carousel will be disabled.[/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool,\n\n /**\n * @name index\n * @type number\n * @description\n * [en]Specify the index of the ons-carousel-item to show. Default is 0.[/en]\n * [jp] [/jp]\n */\n index: React.PropTypes.number,\n\n /**\n * @name autoRefresh\n * @type bool\n * @description\n * [en]When this attribute is set the carousel will automatically refresh when the number of child nodes change.[/en]\n * [jp] [/jp]\n */\n autoRefresh: React.PropTypes.bool,\n\n /**\n * @name onPostChange\n * @type function\n * @description\n * [en]Called just after the current carousel item has changed. [/en]\n * [jp] [/jp]\n */\n onPostChange: React.PropTypes.func,\n\n /**\n * @name onRefresh\n * @type function\n * @description\n * [en]Called when the carousel has been refreshed. [/en]\n * [jp] [/jp]\n */\n onRefresh: React.PropTypes.func,\n\n /**\n * @name onOverscroll\n * @type function\n * @description\n * [en]Called when the carousel has been overscrolled. [/en]\n * [jp] [/jp]\n */\n onOverscroll: React.PropTypes.func,\n\n /**\n * @name animationOptions\n * @type object\n * @required false\n * @description\n * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]\n * [jp] [/jp]\n */\n animationOptions: React.PropTypes.object\n};\n\nexport default Carousel;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-carousel-item\n * @category carousel\n * @tutorial react/Reference/carousel\n * @description\n * [en] Carousel item component. Used as a child of the `` element.\n [/en]\n * [jp][/jp]\n * @example\n* \n \n
GRAY
\n \n \n
BLUE
\n \n \n */\nclass CarouselItem extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-carousel-item';\n }\n};\n\nCarouselItem.propTypes = {\n /**\n * @name modifier\n * @type string\n * @description\n * [en]\n * Specify modifier name to specify custom styles. Optional.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n modifier: React.PropTypes.string\n};\n\nexport default CarouselItem;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @original ons-col\n * @category grid\n * @description\n * [en]\n * Represents a column in the grid system. Use with `` to layout components.\n * [/en]\n * [jp][/jp]\n * \n *
\n * \n * \n *
Text\n * \n */\nclass Col extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-col';\n }\n\n render() {\n var {...others} = this.props;\n\n Util.convert(others, 'verticalAlign', {newName: 'vertical-align'});\n Util.convert(others, 'width', {fun: Util.sizeConverter});\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n\n};\n\nCol.propTypes = {\n\n /**\n * @name verticalAlign\n * @type {String}\n * @description\n * [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en]\n * [ja][/ja]\n */\n verticalAlign: React.PropTypes.oneOf(['top', 'bottom', 'center']),\n\n /**\n * @name width\n * @type {String}\n * @description\n * [en]The width of the column. Valid values are css width values (\"10%\", 50).[/en]\n * [ja][/ja]\n */\n width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])\n};\n\nexport default Col;\n","import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\n\n/**\n * @original ons-dialog\n * @category dialog\n * @tutorial react/Reference/dialog\n * @description\n * [en] Dialog that is displayed on top of current screen. As opposed to the AlertDialog element, this component can contain any kind of content. The dialog is useful for displaying menus, additional information or to ask the user to make a decision. It will automatically be displayed as Material Design when running on an Android device.\n [/en]\n * [jp][/jp]\n * @example\n \n\n */\nclass Dialog extends BaseDialog {\n _getDomNodeName() {\n return 'ons-dialog';\n }\n}\n\nDialog.propTypes = {\n /**\n * @name onCancel\n * @type function\n * @required false\n * @description\n * [en]\n * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onCancel: React.PropTypes.func,\n\n /**\n * @name isOpen\n * @type bool\n * @required true\n * @description\n * [en]\n * Indicates whether the dialog is open and shown.\n * [/en]\n * [jp] [/jp]\n */\n isOpen: React.PropTypes.bool.isRequired,\n\n /**\n * @name isCancelable\n * @type bool\n * @required false\n * @description\n * [en]\n * Specifies whether the dialog is cancelable or not.\n * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices\n * [/en]\n * [jp] [/jp]\n */\n isCancelable: React.PropTypes.bool,\n\n /**\n * @name isDisabled\n * @type bool\n * @required false\n * @description\n * [en]\n * Specifies whether the dialog is disabled.\n * [/en]\n * [jp] [/jp]\n */\n isDisabled: React.PropTypes.bool,\n\n /**\n * @name animation\n * @type string\n * @required false\n * @description\n * [en]\n * The animation used when showing and hiding the dialog. Can be either `\"none\"` or `\"default\"`.\n * [/en]\n * [jp] [/jp]\n */\n animation: React.PropTypes.string,\n\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the dialog.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name maskColor\n * @type string\n * @required false\n * @description\n * [en]Color of the background mask. Default is \"rgba(0, 0, 0, 0.2)\"[/en]\n * [jp] [/jp]\n */\n maskColor: React.PropTypes.string,\n\n /**\n * @name animationOptions\n * @type object\n * @required false\n * @description\n * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]\n * [jp] [/jp]\n */\n animationOptions: React.PropTypes.object,\n\n /**\n * @name onPreShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called just before the alert dialog is displayed.\n * [/en]\n * [jp][/jp]\n */\n onPreShow: React.PropTypes.func,\n\n /**\n * @name onPostShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called just after the alert dialog is displayed.\n * [/en]\n * [jp][/jp]\n */\n onPostShow: React.PropTypes.func,\n\n /**\n * @name onPreHide\n * @type function\n * @required false\n * @description\n * [en]Called just before the alert dialog is hidden.[/en]\n * [jp][/jp]\n */\n onPreHide: React.PropTypes.func,\n\n /**\n * @name onPostHide\n * @type function\n * @required false\n * @description\n * [en]Called just after the alert dialog is hidden.[/en]\n * [jp][/jp]\n */\n onPostHide: React.PropTypes.func\n};\n\nexport default Dialog;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-fab\n * @category fab\n * @tutorial react/Reference/fab\n * @description\n * [en] The Floating action button is a circular button defined in the [Material Design specification](https://www.google.com/design/spec/components/buttons-floating-action-button.html). They are often used to promote the primary action of the app.\n * It can be displayed either as an inline element or in one of the corners. Normally it will be positioned in the lower right corner of the screen.\n [/en]\n * [jp][/jp]\n * @example\n * console.log('test1')} position='left bottom'>\n \n \n \n console.log('speed A')}> A \n console.log('speed B')}> B \n console.log('speed C')}> C \n console.log('speed D')}> D \n \n */\nclass Fab extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-fab';\n }\n};\n\nFab.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the button.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name ripple\n * @type bool\n * @description\n * [en]If true, the button will have a ripple effect when tapped.[/en]\n * [jp] [/jp]\n */\n ripple: React.PropTypes.bool,\n\n /**\n * @namep position\n * @type string\n * @required false\n * @description\n * [en]The position of the button. Should be a string like `\"bottom right\"` or `\"top left\"`. If this attribute is not defined it will be displayed as an inline element.[/en]\n * [jp] [/jp]\n */\n position: React.PropTypes.string,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en] If true, the button will be disabled. [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.string,\n\n /**\n * @name onClick\n * @type function\n * @description\n * [en] This function will be called ones the button is clicked. [/en]\n * [jp] [/jp]\n */\n onClick: React.PropTypes.func\n};\n\nexport default Fab;\n","import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @original ons-icon\n * @category icon\n * @tutorial react/Reference/icon\n * @description\n * [en]\n * Displays an icon. The following icon suites are available:\n * * [Font Awesome](https://fortawesome.github.io/Font-Awesome/)\n * * [Ionicons](http://ionicons.com/)\n * * [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/)\n * [/en]\n * [jp][/jp]\n * @example\n \n/> */\nclass Icon extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-icon';\n }\n\n render() {\n var {icon, size, ...others} = this.props;\n\n Util.convert(others, 'fixedWidth', {newName: 'fixed-width'});\n Util.convert(others, 'spin');\n\n if (icon) {\n if ((typeof icon) === 'string') {\n others.icon = icon;\n } else {\n let keys = Object.keys(icon).filter((a) => a !== 'default');\n let innerString = keys.map((key) => key + ':' + icon[key] + '');\n others.icon = icon.default + ', ' + innerString.join(',');\n }\n }\n\n if (size) {\n if ((typeof size) === 'number') {\n others.size = `${size}px`;\n } else {\n let keys = Object.keys(size).filter((a) => a !== 'default');\n let innerString = keys.map((key) => key + ':' + size[key] + 'px');\n others.size = size.default + 'px, ' + innerString.join(',');\n }\n }\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n\n};\n\nIcon.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the icon.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name icon\n * @type 'object or string'\n * @description\n * [en] can be either a string or an object. If it is an string, it is set to an specific icon like 'ions-navicon'. If it is an object, it represents a dictionary of the icons depending on the modifier e.g. `{{default: 'ion-navicon', material: 'md-menu'}}` [/en]\n * [jp] [/jp]\n */\n icon: React.PropTypes.oneOfType([\n React.PropTypes.string,\n React.PropTypes.objectOf(React.PropTypes.string)\n ]),\n\n /**\n * @name size\n * @type 'object or number'\n * @description\n * [en] can be either a number or an object. If it is an number, it specifies the icon size with a number in pixels. If it is an object, it represents a dictionary of the icon sizes depending on the modifier e.g. `{{default: 20, material: 18}}` [/en]\n * [jp] [/jp]\n */\n size: React.PropTypes.oneOfType([\n React.PropTypes.number,\n React.PropTypes.objectOf(React.PropTypes.number)\n ]),\n\n /**\n * @name rotate\n * @type number\n * @description\n * [en] Number of degrees to rotate the icon. Valid values are 90, 180 and 270. [/en]\n * [jp] [/jp]\n */\n rotate: React.PropTypes.oneOf([0, 90, 180, 270]),\n\n /**\n * @name fixedWidth\n * @type bool\n * @description\n * [en] When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. [/en]\n * [jp] [/jp]\n */\n fixedWidth: React.PropTypes.bool,\n\n /**\n * @name spin\n * @type bool\n * @description\n * [en] Specify whether the icon should be spinning. [/en]\n * [jp] [/jp]\n */\n spin: React.PropTypes.bool\n\n};\n\nexport default Icon;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\nconst EVENT_TYPES = ['change', 'input'];\n\n/**\n * @original ons-input\n * @category input\n * @tutorial react/Reference/input\n * @description\n * [en]\n * An input element. The `type` attribute can be used to change the input type. All text input types as well as `checkbox` and `radio` are supported. The component will automatically render as a Material Design input on Android devices. Most attributes that can be used for a normal `` element can also be used on the `` element..\n [/en]\n * [jp][/jp]\n * @example\n * { this.setState({text: event.target.value})} }\n * modifier='material'\n * placeholder='Username' />\n */\nclass Input extends BasicComponent {\n componentDidMount() {\n super.componentDidMount();\n var node = ReactDOM.findDOMNode(this);\n\n EVENT_TYPES.forEach((eventType) => {\n node.addEventListener(eventType, this.props.onChange);\n });\n }\n\n componentWillUnmount() {\n var node = ReactDOM.findDOMNode(this);\n\n EVENT_TYPES.forEach((eventType) => {\n node.removeEventListener(eventType, this.props.onChange);\n });\n }\n\n componentWillReceiveProps(props) {\n var node = ReactDOM.findDOMNode(this);\n\n if (typeof props.value !== 'undefined') {\n node.value = props.value;\n }\n\n if (typeof props.checked !== 'undefined') {\n node.checked = props.checked;\n }\n }\n\n render() {\n var {checked, ...other} = this.props;\n other['input-id'] = this.props.inputId;\n\n Util.convert(other, 'disabled');\n\n return (\n \n );\n }\n}\n\nInput.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the input.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en]\n * Specifies whether the input is disabled.\n * [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool,\n\n /**\n * @name onChange\n * @type function\n * @description\n * [en] Called when the text of the input changes.[/en]\n * [jp][/jp]\n */\n onChange: React.PropTypes.func,\n\n /**\n * @name value\n * @type string\n * @description\n * [en] Content of the input.[/en]\n * [jp][/jp]\n */\n value: React.PropTypes.string,\n\n /**\n * @name placehoder\n * @type string\n * @description\n * [en] Placeholder text. In Material Design this placeholder will be a floating label. [/en]\n * [jp][/jp]\n */\n placeholder: React.PropTypes.string,\n\n /**\n * @name type\n * @type string\n * @description\n * [en] Specify the input type. This is the same as the \"type\" attribute for normal inputs.\n * Please take a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type) for an exhaustive list of possible values. Depending on the platform and browser version some of these might not work.\n [/en]\n * [jp][/jp]\n */\n type: React.PropTypes.string,\n\n /**\n * @name inputId\n * @type string\n * @description\n * [en] Specify the \"id\" attribute of the inner element. This is useful when using