Bottom-aligned Grid Cells \n \n \n This cell should be bottom-aligned.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.\n
\n \n \n This cell should be bottom-aligned.\n
\n \n
\n\n\n Vertically Centered Grid Cells \n \n \n This cell should be verticaly-centered with the cell to its right.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.\n
\n \n
\n\n Equally spaced \n \n
\n
\n \n
\n
\n \n
\n\n Full height \n \n \n This column's height will grow to the same height as the tallest column.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.\n
\n \n
\n\n Individual Sizing \n \n
\n
\n \n Col
\n \n Col width='33%'
\n \n
\n
\n \n Col width='25%'
\n \n Col
\n \n Col width='33%'
\n \n
\n
\n \n Col width='100px'
\n \n Col
\n \n Col width='50px'
\n \n
\n\n Top-aligned Grid Cells \n \n \n This cell should be top-aligned.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.\n
\n \n \n This cell should be top-aligned.\n
\n \n
\n\n Mixed Vertical Alignment \n \n \n This cell should be top aligned.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.\n
\n \n \n This cell should be center-aligned.\n
\n \n \n This cell should be bottom-aligned.\n
\n \n
\n \n );\n }\n}\n"
},
{
"path": "demo/examples/SpeedDial.js",
"content": "import React from 'react';\n\nimport {\n Page,\n Icon,\n Fab,\n SpeedDial,\n SpeedDialItem,\n Toolbar,\n BackButton\n} from '../../src/index.js';\n\nexport default class extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n modifier: 'material',\n };\n }\n\n renderToolbar() {\n return (\n \n \n Back \n
\n \n Speed Dial\n
\n \n );\n }\n\n renderFixed() {\n return (\n console.log('test1')} position='bottom right'>\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 );\n }\n\n render() {\n return (\n \n \n );\n }\n}\n"
},
{
"path": "demo/examples/Splitter.js",
"content": "import React from 'react';\n\nimport {\n Splitter,\n SplitterSide,\n SplitterContent,\n Page,\n Toolbar,\n Button\n} from '../../src/index.js';\n\nimport MyToolbar from './MyToolbar';\n\nexport default class extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showLeft: false,\n showRight: false,\n openLeft: false,\n openRight: false,\n isSwipeable: true\n };\n }\n\n handleLeftClose() {\n this.setState({\n openLeft: false\n });\n }\n\n handleLeftOpen() {\n this.setState({\n openLeft: true\n });\n }\n\n handleRightClose() {\n this.setState({\n openRight: false\n });\n }\n\n handleRightOpen() {\n this.setState({\n openRight: true,\n });\n }\n\n render() {\n return (\n \n \n \n \n content
\n \n \n \n\n \n \n this.setState({isSwipeable: !this.state.isSwipeable})}\n >\n {this.state.isSwipeable ? 'Disable Swipe' : 'Enable Swipeable'}\n \n
\n \n this.setState({showLeft: !this.state.showLeft})}\n >toggle left menu 2\n
\n \n this.setState({showRight: !this.state.showRight })} > toggle right menu
\n\n \n this.setState({openLeft: true})}>\n Open left menu\n \n
\n\n \n this.setState({openRight: true})}>\n Open right menu\n \n
\n \n \n\n \n \n \n ons-splitter-side
\n \n \n \n \n \n );\n }\n}\n"
},
{
"path": "demo/examples/Switch.js",
"content": "import React from 'react';\n\nimport {\n Page,\n Toolbar,\n ToolbarButton,\n BackButton,\n Input,\n Switch\n} from '../../src/index.js';\n\nimport MyToolbar from './MyToolbar';\n\nexport default class extends React.Component {\n constructor(props) {\n super(props);\n this.state = {checked: true};\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(event) {\n this.setState({checked: event.target.checked});\n }\n\n render() {\n return (\n \n
Page Content \n
\n
\n
\n
\n
The switch is {this.state.checked ? 'on' : 'off'}
\n
\n );\n }\n};\n"
},
{
"path": "demo/examples/Tabbar.js",
"content": "import React from 'react';\n\nimport {Tabbar, Tab, Page, Button} from '../../src/index.js';\nimport MyToolbar from './MyToolbar';\n\nclass TabPage extends React.Component {\n render() {\n return (\n This is the {this.props.title} page.
\n : null}\n Go to the other tab \n \n );\n }\n}\n\nexport default class extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n index: 0\n };\n this.renderTabs = this.renderTabs.bind(this);\n }\n\n renderTabs(activeIndex, tabbar) {\n console.log('index : ' , activeIndex);\n return [\n {\n content: { this.setState({index: 1}); }}\n title='Home' active={activeIndex == 0} tabbar={tabbar} />,\n tab: console.log('click home')}\n label='Home'\n icon='md-home' />\n },\n {\n content: { this.setState({index: 0}); }}\n\n title='Settings' active={activeIndex == 1} tabbar={tabbar} />,\n tab: console.log('click setting')} label='Settings' icon='md-settings' />\n }\n ];\n }\n\n render() {\n return (\n \n \n {\n this.setState({index: event.index});\n console.log('preChange', event.index);\n }\n }\n onPostChange={() => console.log('postChange')}\n onReactive={() => console.log('postChange')}\n position='bottom'\n renderTabs={this.renderTabs}\n />\n \n );\n }\n}\n"
},
{
"path": "demo/index.html",
"content": "\n\n\n Onsen UI React Demo \n\n \n\n\n\n\n \n
\n \n\n\n"
},
{
"path": "demo/index.js",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport '../OnsenUI/build/js/onsenui.js';\n\nimport '../OnsenUI/build/css/onsenui.css';\nimport '../OnsenUI/build/css/onsen-css-components.css';\n\nimport {\n Page,\n Navigator,\n Toolbar,\n List,\n ListItem\n} from '../src/index.js';\n\nimport PageExample from './examples/Page';\nimport ListExample from './examples/List';\nimport LazyListExample from './examples/LazyList';\nimport TabbarExample from './examples/Tabbar';\nimport AlertDialogExample from './examples/AlertDialog';\nimport SplitterExample from './examples/Splitter';\nimport InputExample from './examples/Input';\nimport IconExample from './examples/Icon';\nimport RippleExample from './examples/Ripple';\nimport SpeedDialExample from './examples/SpeedDial';\nimport PullHookExample from './examples/PullHook';\nimport CarouselExample from './examples/Carousel';\nimport PopoverExample from './examples/Popover';\nimport DialogExample from './examples/Dialog';\nimport ModalExample from './examples/Modal';\nimport SwitchExample from './examples/Switch';\nimport ProgressBarExample from './examples/ProgressBar';\nimport RangeExample from './examples/Range';\nimport RowColumnExample from './examples/RowColumn';\nimport BackButtonExample from './examples/BackButton';\nimport BottomToolbarExample from './examples/BottomToolbar';\n\nclass Examples extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {class: 'test'};\n this.getExamples = this.getExamples.bind(this);\n }\n\n getExamples() {\n return [\n {\n title: 'Bottom Toolbar',\n component: BottomToolbarExample,\n },\n {\n title: 'Page',\n component: PageExample\n },\n {\n title: 'Back button',\n component: BackButtonExample\n },\n {\n title: 'Row & Column',\n component: RowColumnExample\n },\n {\n title: 'Carousel',\n component: CarouselExample\n },\n {\n title: 'Switch',\n component: SwitchExample\n },\n {\n title: 'RangeExample',\n component: RangeExample\n },\n {\n title: 'ProgressBar',\n component: ProgressBarExample\n },\n\n {\n title: 'Dialog',\n component: DialogExample\n },\n {\n title: 'Modal',\n component: ModalExample\n },\n\n {\n title: 'Popover',\n component: PopoverExample\n },\n {\n title: 'Tabbar',\n component: TabbarExample\n },\n {\n title: 'Splitter',\n component: SplitterExample\n },\n {\n title: 'SpeedDial',\n component: SpeedDialExample\n },\n {\n title: 'PullHook',\n component: PullHookExample\n },\n {\n title: 'Ripple',\n component: RippleExample\n },\n\n {\n title: 'Icon',\n component: IconExample\n },\n {\n title: 'List',\n component: ListExample\n },\n {\n title: 'Lazy List',\n component: LazyListExample\n },\n {\n title: 'Alert dialog',\n component: AlertDialogExample\n },\n {\n title: 'Input',\n component: InputExample\n }\n ];\n }\n\n goto(example) {\n this.props.navigator.pushPage({\n component: example.component,\n props: {\n key: example.title\n }\n });\n }\n\n render() {\n return (\n Up Toolbar
}\n >\n \n HEADER \n }\n renderRow={(example) => (\n {example.title} \n )}\n />\n
\n );\n }\n}\n\nclass App extends React.Component {\n renderPage(route, navigator) {\n const props = route.props || {};\n props.navigator = navigator;\n\n return React.createElement(route.component, route.props);\n }\n\n render() {\n return (\n console.log('prepush', e)}\n onPostPush={e => console.log('postpush', e)}\n onPrePop={e => console.log('prepop', e)}\n onPostPop={e => console.log('postpop', e)}\n initialRoute={{\n component: Examples,\n props: {\n key: 'examples'\n }\n }}\n />\n );\n }\n}\n\nReactDOM.render(\n Warning!
\n \n An error has occurred!\n
\n \n \n Cancel\n \n \n Ok\n \n
\n \n */\n\nvar AlertDialog = function (_BaseDialog) {\n inherits(AlertDialog, _BaseDialog);\n\n function AlertDialog() {\n classCallCheck(this, AlertDialog);\n return possibleConstructorReturn(this, (AlertDialog.__proto__ || Object.getPrototypeOf(AlertDialog)).apply(this, arguments));\n }\n\n createClass(AlertDialog, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-alert-dialog';\n }\n }]);\n return AlertDialog;\n}(BaseDialog);\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\nvar BasicComponent = function (_React$Component) {\n inherits(BasicComponent, _React$Component);\n\n function BasicComponent() {\n var _ref;\n\n classCallCheck(this, BasicComponent);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var _this = possibleConstructorReturn(this, (_ref = BasicComponent.__proto__ || Object.getPrototypeOf(BasicComponent)).call.apply(_ref, [this].concat(args)));\n\n _this.updateClasses = _this.updateClasses.bind(_this);\n return _this;\n }\n\n createClass(BasicComponent, [{\n key: 'updateClasses',\n value: function updateClasses() {\n var node = ReactDOM__default.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 (!ons) {\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 ons._autoStyle.prepare(node);\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n this.updateClasses();\n }\n }, {\n key: 'componentDidUpdate',\n value: function componentDidUpdate() {\n this.updateClasses();\n }\n }]);\n return BasicComponent;\n}(React.Component);\n\nvar SimpleWrapper = function (_BasicComponent) {\n inherits(SimpleWrapper, _BasicComponent);\n\n function SimpleWrapper() {\n classCallCheck(this, SimpleWrapper);\n return possibleConstructorReturn(this, (SimpleWrapper.__proto__ || Object.getPrototypeOf(SimpleWrapper)).apply(this, arguments));\n }\n\n createClass(SimpleWrapper, [{\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(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 return SimpleWrapper;\n}(BasicComponent);\n\n/**\n * @original ons-back-button\n * @category navigation\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 */\n\nvar BackButton = function (_SimpleWrapper) {\n inherits(BackButton, _SimpleWrapper);\n\n function BackButton() {\n classCallCheck(this, BackButton);\n return possibleConstructorReturn(this, (BackButton.__proto__ || Object.getPrototypeOf(BackButton)).apply(this, arguments));\n }\n\n createClass(BackButton, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-back-button';\n }\n }, {\n key: '_updateOnClick',\n value: function _updateOnClick(props) {\n var node = ReactDOM__default.findDOMNode(this);\n\n if (props.onClick) {\n node.onClick = function () {\n return null;\n };\n } else {\n delete node.onClick;\n }\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n this._updateOnClick(this.props);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n this._updateOnClick(props);\n }\n }]);\n return BackButton;\n}(SimpleWrapper);\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\n/**\n * @original ons-bottom-toolbar\n * @category page\n * @description\n * [en]Toolbar component that is positioned at the bottom of the page.[/en]\n * [jp][/jp]\n * @example\n * Content \n */\n\nvar BottomToolbar = function (_SimpleWrapper) {\n inherits(BottomToolbar, _SimpleWrapper);\n\n function BottomToolbar() {\n classCallCheck(this, BottomToolbar);\n return possibleConstructorReturn(this, (BottomToolbar.__proto__ || Object.getPrototypeOf(BottomToolbar)).apply(this, arguments));\n }\n\n createClass(BottomToolbar, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-bottom-toolbar';\n }\n }]);\n return BottomToolbar;\n}(SimpleWrapper);\n\n\n\nBottomToolbar.propTypes = {\n /**\n * @name modifier\n * @type string\n * @description\n * [en]Specify modifier name to specify custom styles. Optional.[/en]\n * [jp][/jp]\n */\n modifier: React.PropTypes.string\n};\n\n/**\n * @original ons-button\n * @category form\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 * Tap Me\n * \n */\n\nvar Button = function (_SimpleWrapper) {\n inherits(Button, _SimpleWrapper);\n\n function Button() {\n classCallCheck(this, Button);\n return possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));\n }\n\n createClass(Button, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-button';\n }\n }]);\n return Button;\n}(SimpleWrapper);\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\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 */\n\nvar Carousel = function (_SimpleWrapper) {\n inherits(Carousel, _SimpleWrapper);\n\n function Carousel() {\n classCallCheck(this, Carousel);\n return possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).apply(this, arguments));\n }\n\n createClass(Carousel, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-carousel';\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(Carousel.prototype.__proto__ || Object.getPrototypeOf(Carousel.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM.findDOMNode(this);\n node.addEventListener('postchange', this.props.onPostChange);\n node.addEventListener('refresh', this.props.onRefresh);\n node.addEventListener('overscroll', this.props.onOverscroll);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n var node = ReactDOM.findDOMNode(this);\n\n if (this.props.index !== props.index) {\n node.setActiveIndex(props.index, props.animationOptions);\n }\n }\n }, {\n key: 'componentDidUpdate',\n value: function componentDidUpdate(props) {\n var node = ReactDOM.findDOMNode(this);\n\n if (this.props.children.length !== props.children.length) {\n node.refresh();\n }\n }\n }, {\n key: 'componentWillUnmount',\n value: function 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 key: 'render',\n value: function render() {\n var others = objectWithoutProperties(this.props, []);\n\n ['fullscreen', 'swipeable', 'disabled', 'centered', 'overscrollable', 'centered'].forEach(function (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 return Carousel;\n}(SimpleWrapper);\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.oneOfType([React.PropTypes.string, React.PropTypes.number]),\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.oneOfType([React.PropTypes.string, React.PropTypes.number]),\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\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 */\n\nvar CarouselItem = function (_SimpleWrapper) {\n inherits(CarouselItem, _SimpleWrapper);\n\n function CarouselItem() {\n classCallCheck(this, CarouselItem);\n return possibleConstructorReturn(this, (CarouselItem.__proto__ || Object.getPrototypeOf(CarouselItem)).apply(this, arguments));\n }\n\n createClass(CarouselItem, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-carousel-item';\n }\n }]);\n return CarouselItem;\n}(SimpleWrapper);\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\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\nvar Col = function (_SimpleWrapper) {\n inherits(Col, _SimpleWrapper);\n\n function Col() {\n classCallCheck(this, Col);\n return possibleConstructorReturn(this, (Col.__proto__ || Object.getPrototypeOf(Col)).apply(this, arguments));\n }\n\n createClass(Col, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-col';\n }\n }, {\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(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 return Col;\n}(SimpleWrapper);\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\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 Page Content\n \n \n\n */\n\nvar Dialog = function (_BaseDialog) {\n inherits(Dialog, _BaseDialog);\n\n function Dialog() {\n classCallCheck(this, Dialog);\n return possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).apply(this, arguments));\n }\n\n createClass(Dialog, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-dialog';\n }\n }]);\n return Dialog;\n}(BaseDialog);\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\n/**\n * @original ons-fab\n * @category form\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 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 */\n\nvar Fab = function (_SimpleWrapper) {\n inherits(Fab, _SimpleWrapper);\n\n function Fab() {\n classCallCheck(this, Fab);\n return possibleConstructorReturn(this, (Fab.__proto__ || Object.getPrototypeOf(Fab)).apply(this, arguments));\n }\n\n createClass(Fab, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-fab';\n }\n }]);\n return Fab;\n}(SimpleWrapper);\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 * @name 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.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\n/**\n * @original ons-icon\n * @category visual\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 ` element..\n [/en]\n * [jp][/jp]\n * @example\n * { this.setState({text: event.target.value})} }\n * modifier='material'\n * placeholder='Username' />\n */\n\nvar Input = function (_BasicComponent) {\n inherits(Input, _BasicComponent);\n\n function Input() {\n classCallCheck(this, Input);\n return possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));\n }\n\n createClass(Input, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n get(Input.prototype.__proto__ || Object.getPrototypeOf(Input.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM__default.findDOMNode(this);\n\n EVENT_TYPES.forEach(function (eventType) {\n node.addEventListener(eventType, _this2.props.onChange);\n });\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var _this3 = this;\n\n var node = ReactDOM__default.findDOMNode(this);\n\n EVENT_TYPES.forEach(function (eventType) {\n node.removeEventListener(eventType, _this3.props.onChange);\n });\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n var node = ReactDOM__default.findDOMNode(this);\n\n if (typeof props.value !== 'undefined' && node.value !== props.value) {\n node.value = props.value;\n }\n\n if (typeof props.checked !== 'undefined') {\n node.checked = props.checked;\n }\n }\n }, {\n key: 'render',\n value: function render() {\n var _props = this.props;\n var checked = _props.checked;\n var other = objectWithoutProperties(_props, ['checked']);\n\n other['input-id'] = this.props.inputId;\n\n Util.convert(other, 'disabled');\n\n return React.createElement('ons-input', _extends({ checked: checked ? '' : null }, other));\n }\n }]);\n return Input;\n}(BasicComponent);\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 checked\n * @type boolean\n * @description\n * [en]Set to to true if the input is checked. Only used for radio buttons and checkboxes.[/en]\n * [ja][/ja]\n */\n checked: React.PropTypes.bool,\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 ` elements [/en]\n * [jp][/jp]\n */\n inputId: React.PropTypes.string,\n\n /**\n * @name float\n * @type bool\n * @description\n * [en] If this attribute is present, the placeholder will be animated in Material Design. [/en]\n * [jp][/jp]\n */\n float: React.PropTypes.bool\n};\n\n/**\n * @original ons-lazy-repeat\n * @category list\n * @tutorial react/Reference/lazy-list\n * @description\n * [en] Using this component a list with millions of items can be rendered without a drop in performance.\n * It does that by \"lazily\" loading elements into the DOM when they come into view and\n * removing items from the DOM when they are not visible.\n [/en]\n * [jp][/jp]\n * @example\n *\n renderRow(index) {\n return (\n \n {'Item ' + (index + 1)}\n \n );\n }\n\n render() {\n return (\n \n \n \n {'Item ' + (index + 1)}\n \n }\n calculateItemHeight={() => 44}\n />\n
\n \n );\n }\n}\n */\n\nvar LazyList = function (_BasicComponent) {\n inherits(LazyList, _BasicComponent);\n\n function LazyList() {\n var _ref;\n\n classCallCheck(this, LazyList);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var _this = possibleConstructorReturn(this, (_ref = LazyList.__proto__ || Object.getPrototypeOf(LazyList)).call.apply(_ref, [this].concat(args)));\n\n _this.state = { children: [] };\n _this.update = _this.update.bind(_this);\n return _this;\n }\n\n createClass(LazyList, [{\n key: 'update',\n value: function update(props) {\n var self = this;\n\n this.refs.lazyRepeat.delegate = {\n calculateItemHeight: function calculateItemHeight(index) {\n return props.calculateItemHeight(index);\n },\n _render: function (items, newHeight) {\n var _this2 = this;\n\n var createElement = function createElement(_ref2) {\n var index = _ref2.index;\n var top = _ref2.top;\n\n return props.renderRow(index);\n };\n\n var el = items.map(createElement);\n self.setState({ children: el, height: newHeight }, function () {\n var list = _this2.refs.list;\n // ignore i=0 (\n \n {row}\n Remove \n \n )}\n renderFooter={this.renderFooter}\n />\n */\n\nvar List = function (_BasicComponent) {\n inherits(List, _BasicComponent);\n\n function List() {\n classCallCheck(this, List);\n return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));\n }\n\n createClass(List, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var pages = this.props.dataSource.map(function (data, idx) {\n return _this2.props.renderRow(data, idx);\n });\n\n return React.createElement('ons-list', _extends({}, this.props, { ref: 'list' }), this.props.renderHeader(), pages, this.props.children, this.props.renderFooter());\n }\n }]);\n return List;\n}(BasicComponent);\n\nList.propTypes = {\n /**\n * @name modifier\n * @type string\n * @description\n * [en]\n * Specify modifier name to specify custom styles.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name dataSource\n * @type string\n * @description\n * [en]\n * Source of the list data. Should be an array.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n dataSource: React.PropTypes.array,\n\n /**\n * @name renderRow\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for every element in\n * in the dataSource.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderRow: React.PropTypes.func,\n\n /**\n * @name renderHeader\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for the header\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderHeader: React.PropTypes.func,\n\n /**\n * @name renderFooter\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for the footer\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderFooter: React.PropTypes.func\n};\n\nList.defaultProps = {\n dataSource: [],\n renderRow: function renderRow() {\n return null;\n },\n renderHeader: function renderHeader() {\n return null;\n },\n renderFooter: function renderFooter() {\n return null;\n }\n};\n\n/**\n * @original ons-list-header\n * @category list\n * @tutorial react/Reference/list\n * @description\n * [en] Header element for list items. Must be put inside ons-list component.\n [/en]\n * [jp][/jp]\n * @example\n \n Header Text }\n renderRow={(row, idx) => (\n {row} \n )}\n />\n */\n\nvar ListHeader = function (_SimpleWrapper) {\n inherits(ListHeader, _SimpleWrapper);\n\n function ListHeader() {\n classCallCheck(this, ListHeader);\n return possibleConstructorReturn(this, (ListHeader.__proto__ || Object.getPrototypeOf(ListHeader)).apply(this, arguments));\n }\n\n createClass(ListHeader, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-list-header';\n }\n }]);\n return ListHeader;\n}(SimpleWrapper);\n\n\n\nListHeader.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\n/**\n * @original ons-list-item\n * @category list\n * @tutorial react/Reference/list\n * @description\n * [en]\n * Component that represents each item in the list. Must be put inside the `List` component. The list item is composed of three parts that are represented with the `left`, `center` and `right` classes. These classes can be used to ensure that the content of the list items is properly aligned.\n * [/en]\n * [jp][/jp]\n * @example\n \n * Left
\n * Center
\n * Right
\n * \n */\n\nvar ListItem = function (_SimpleWrapper) {\n inherits(ListItem, _SimpleWrapper);\n\n function ListItem() {\n classCallCheck(this, ListItem);\n return possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).apply(this, arguments));\n }\n\n createClass(ListItem, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-list-item';\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(ListItem.prototype.__proto__ || Object.getPrototypeOf(ListItem.prototype), 'componentDidMount', this).call(this);\n this.node = ReactDOM__default.findDOMNode(this);\n }\n }, {\n key: 'componentDidUpdate',\n value: function componentDidUpdate() {\n get(ListItem.prototype.__proto__ || Object.getPrototypeOf(ListItem.prototype), 'componentDidUpdate', this).call(this);\n this.node._compile();\n }\n }, {\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(this.props, []);\n\n Util.convert(others, 'tappable');\n Util.convert(others, 'tapBackgroundColor', { newName: 'tap-background-color' });\n Util.convert(others, 'lockOnDrag', { newName: 'lock-on-drag' });\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n }]);\n return ListItem;\n}(SimpleWrapper);\n\n\n\nListItem.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en] The appearance of the list item.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name tappable\n * @type bool\n * @description\n * [en]\n * Specifies whether the list item is tappable.\n * [/en]\n * [jp] [/jp]\n */\n tappable: React.PropTypes.bool,\n\n /**\n * @name tapBackgroundColor\n * @type string\n * @description\n * [en]\n * Changes the background color when tapped. For this to work, the attribute \"tappable\" needs to be set. The default color is \"#d9d9d9\". It will display as a ripple effect on Android.\n * [/en]\n * [jp] [/jp]\n */\n tapBackgroundColor: React.PropTypes.string,\n\n /**\n * @name lockOnDrag\n * @type bool\n * @description\n * [en] Prevent vertical scrolling when the user drags horizontally. [/en]\n * [jp] [/jp]\n */\n lockOnDrag: React.PropTypes.bool\n};\n\n/**\n * @original ons-navigator\n * @category navigation\n * @tutorial react/Reference/navigator\n * @description\n * [en] This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the `renderPage` method, that takes an route and a navigator and converts it to an page. [/en]\n * [jp] どうしよう[/jp]\n * @example\n \n navigator.popPage()}\n />\n }\n initialRoute={{\n title: 'First Page'\n }} />\n }\n }\n */\n\nvar Navigator = function (_BasicComponent) {\n inherits(Navigator, _BasicComponent);\n\n function Navigator() {\n var _ref;\n\n classCallCheck(this, Navigator);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var _this = possibleConstructorReturn(this, (_ref = Navigator.__proto__ || Object.getPrototypeOf(Navigator)).call.apply(_ref, [this].concat(args)));\n\n _this.pages = [];\n _this.state = {};\n _this._prePush = _this._prePush.bind(_this);\n _this._postPush = _this._postPush.bind(_this);\n _this._prePop = _this._prePop.bind(_this);\n _this._postPop = _this._postPop.bind(_this);\n return _this;\n }\n\n createClass(Navigator, [{\n key: 'update',\n value: function update(pages, obj) {\n var _this2 = this;\n\n this.pages = pages || [];\n return new Promise(function (resolve) {\n _this2.forceUpdate(resolve);\n });\n }\n\n /**\n * @method resetPage\n * @signature resetPage(route, options = {})\n * @param {Object} route\n * [en] The route that the page should be reset to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the revealed page.[/en]\n * [ja]明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en]Resets the current page[/en]\n * [ja]どうしよう[/ja]\n */\n\n }, {\n key: 'resetPage',\n value: function resetPage(route) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n return this.resetPageStack([route], options);\n }\n\n /**\n * @method resetPageStack\n * @signature resetPageStack(route, options = {})\n * @param {Array} routes\n * [en] The routes that the navigator should be reset to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the revealed page.[/en]\n * [ja]明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Resets the navigator to the current page stack[/en]\n * [ja] どうしよう[/ja]\n */\n\n }, {\n key: 'resetPageStack',\n value: function resetPageStack(routes) {\n var _this3 = this;\n\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n return new Promise(function (resolve) {\n var lastRoute = routes[routes.length - 1];\n var newPage = _this3.props.renderPage(lastRoute, _this3);\n _this3.routes.push(lastRoute);\n\n var update = function update() {\n _this3.pages.push(newPage);\n return new Promise(function (resolve) {\n return _this3.forceUpdate(resolve);\n });\n };\n\n _this3.refs.navi._pushPage(options, update).then(function () {\n _this3.routes = routes;\n\n var renderPage = function renderPage(route) {\n return _this3.props.renderPage(route, _this3);\n };\n\n _this3.pages = routes.map(renderPage);\n _this3.update(_this3.pages).then(resolve);\n });\n });\n }\n\n /**\n * @method pushPage\n * @signature pushPage(route, options = {})\n * @param {Object} route\n * [en] The route that the navigator should push to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en] Promise which resolves to the revealed page.[/en]\n * [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Pushes a page to the page stack[/en]\n * [ja] どうしよう[/ja]\n */\n\n }, {\n key: 'pushPage',\n value: function pushPage(route) {\n var _this4 = this;\n\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n return new Promise(function (resolve) {\n var update = function update() {\n return new Promise(function (resolve) {\n _this4.pages.push(_this4.props.renderPage(route, _this4));\n _this4.forceUpdate(resolve);\n });\n };\n\n _this4.routes.push(route);\n _this4.refs.navi._pushPage(options, update).then(resolve).catch(function (error) {\n _this4.routes.pop();\n _this4.pages.pop();\n throw error;\n });\n });\n }\n }, {\n key: 'isRunning',\n value: function isRunning() {\n return this.refs.navi._isRunning;\n }\n\n /*\n * @method replacePage\n * @signature replacePage(route, [options])\n * @param {Object} route\n * [en] The route that the navigator should replace the top page with.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the new page.[/en]\n * [ja]新しいページを解決するPromiseを返します。[/ja]\n * @description\n * [en]Replaces the current top page with the specified one. Extends `pushPage()` parameters.[/en]\n * [ja]現在表示中のページをを指定したページに置き換えます。[/ja]\n */\n\n }, {\n key: 'replacePage',\n value: function replacePage(route) {\n var _this5 = this;\n\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n this.pushPage(route, options).then(function () {\n var pos = _this5.pages.length - 2;\n _this5.pages.splice(pos, 1);\n _this5.routes.splice(pos, 1);\n _this5.refs.navi.topPage.updateBackButton(_this5.pages.length > 1);\n _this5.forceUpdate();\n });\n }\n\n /**\n * @method popPage\n * @signature popPage(options = {})\n * @return {Promise}\n * [en] Promise which resolves to the revealed page.[/en]\n * [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Pops a page out of the page stack[/en]\n * [ja] どうしよう[/ja]\n */\n\n }, {\n key: 'popPage',\n value: function popPage() {\n var _this6 = this;\n\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n this.routesBeforePop = this.routes.slice();\n\n var update = function update() {\n return new Promise(function (resolve) {\n _this6.pages.pop();\n _this6.routes.pop();\n\n _this6.forceUpdate(resolve);\n });\n };\n\n return this.refs.navi._popPage(options, update);\n }\n }, {\n key: '_prePop',\n value: function _prePop(event) {\n event.routes = {\n poppingRoute: this.routesBeforePop[this.routesBeforePop.length - 1],\n routes: this.routesBeforePop\n };\n\n this.props.onPrePop(event);\n }\n }, {\n key: '_postPop',\n value: function _postPop(event) {\n event.routes = {\n poppedRoute: this.routesBeforePop[this.routesBeforePop.length - 1],\n routes: this.routesBeforePop.slice(0, this.routesBeforePop.length - 1)\n };\n\n this.props.onPostPop(event);\n }\n }, {\n key: '_prePush',\n value: function _prePush(event) {\n event.routes = {\n pushingRoute: this.routes[this.routes.length - 1],\n routes: this.routes.slice(0, this.routes.length - 1)\n };\n\n this.props.onPrePush(event);\n }\n }, {\n key: '_postPush',\n value: function _postPush(event) {\n event.routes = {\n pushedRoute: this.routes[this.routes.length - 1],\n routes: this.routes\n };\n\n this.props.onPostPush(event);\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this7 = this;\n\n var node = this.refs.navi;\n node.popPage = this.popPage.bind(this);\n\n node.addEventListener('prepush', this._prePush);\n node.addEventListener('postpush', this._postPush);\n node.addEventListener('prepop', this._prePop);\n node.addEventListener('postpop', this._postPop);\n\n if (this.props.initialRoute && this.props.initialRouteStack) {\n throw new Error('In Navigator either initalRoute or initalRoutes can be set');\n }\n\n if (this.props.initialRoute) {\n this.routes = [this.props.initialRoute];\n } else if (this.props.initialRouteStack) {\n this.routes = this.props.initialRouteStack;\n } else {\n this.routes = [];\n }\n\n this.pages = this.routes.map(function (route) {\n return _this7.props.renderPage(route, _this7);\n });\n this.forceUpdate();\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var node = this.refs.navi;\n node.removeEventListener('prepush', this.props.onPrePush);\n node.removeEventListener('postpush', this.props.onPostPush);\n node.removeEventListener('prepop', this.props.onPrePop);\n node.removeEventListener('postpop', this.props.onPostPop);\n }\n }, {\n key: 'render',\n value: function render() {\n var _this8 = this;\n\n var others = objectWithoutProperties(this.props, []);\n\n Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });\n var pages = this.routes ? this.routes.map(function (route) {\n return _this8.props.renderPage(route, _this8);\n }) : null;\n\n return React.createElement('ons-navigator', _extends({}, others, { ref: 'navi' }), pages);\n }\n }]);\n return Navigator;\n}(BasicComponent);\n\nNavigator.propTypes = {\n /**\n * @name renderPage\n * @type function\n * @required true\n * @defaultValue null\n * @description\n * [en] This function takes the current route object as a parameter and creates returns a react componen.[/en]\n * [jp] どうしよう[/jp]\n */\n renderPage: React.PropTypes.func.isRequired,\n /**\n * @name initialRouteStack\n * @type array\n * @required false\n * @defaultValue null\n * @description\n * [en] This array contains the initial routes from the navigator,\n * which will be used to render the initial pages in the renderPage method.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n initialRouteStack: React.PropTypes.array,\n\n /**\n * @name initialRoute\n * @type object\n * @required false\n * @defaultValue null\n * @description\n * [en] This array contains the initial route of the navigator,\n * which will be used to render the initial pages in the\n * renderPage method.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n initialRoute: React.PropTypes.object,\n\n /**\n * @name onPrePush\n * @type function\n * @required false\n * @description\n * [en]Called just before a page is pushed.[/en]\n */\n onPrePush: React.PropTypes.func,\n\n /**\n * @name onPostPush\n * @type function\n * @required false\n * @description\n * [en]Called just after a page is pushed.[/en]\n */\n onPostPush: React.PropTypes.func,\n\n /**\n * @name onPrePop\n * @type function\n * @required false\n * @description\n * [en]Called just before a page is popped.[/en]\n */\n onPrePop: React.PropTypes.func,\n\n /**\n * @name onPostPop\n * @type function\n * @required false\n * @description\n * [en]Called just after a page is popped.[/en]\n */\n onPostPop: React.PropTypes.func,\n\n /**\n * @property animation\n * @type {String}\n * @description\n * [en]\n * Animation name. Available animations are `\"slide\"`, `\"lift\"`, `\"fade\"` and `\"none\"`.\n * These are platform based animations. For fixed animations, add `\"-ios\"` or `\"-md\"` suffix to the animation name. E.g. `\"lift-ios\"`, `\"lift-md\"`. Defaults values are `\"slide-ios\"` and `\"fade-md\"`.\n * [/en]\n */\n animation: React.PropTypes.string,\n\n /**\n * @name animationOptions\n * @type object\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\nvar NOOP = function NOOP() {\n return null;\n};\n\nNavigator.defaultProps = {\n onPostPush: NOOP,\n onPrePush: NOOP,\n onPrePop: NOOP,\n onPostPop: NOOP\n};\n\n/**\n * @original ons-modal\n * @category dialog\n * @tutorial react/Reference/modal\n * @description\n * [en]\n * A modal component covers the entire screen. Underlying components are not\n * subject to any events while the modal component is shown.\n *\n * This component can be used to block user input while some operation is\n * running or to show some information to the user.\n * [/en]\n * [jp]\n * 画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、\n * モーダルが表示されている間はイベント通知が行われません\n * [/jp]\n * @example\n (\n \n Loading ...\n \n )}>\n Page content
\n \n */\n\nvar Modal = function (_BasicComponent) {\n inherits(Modal, _BasicComponent);\n\n function Modal() {\n var _ref;\n\n classCallCheck(this, Modal);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var _this = possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args)));\n\n _this.node = null;\n return _this;\n }\n\n createClass(Modal, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(Modal.prototype.__proto__ || Object.getPrototypeOf(Modal.prototype), 'componentDidMount', this).call(this);\n this.node = ReactDOM__default.findDOMNode(this);\n\n this._update(this.props, false);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(nextProps) {\n this._update(nextProps, this.props.isOpen);\n }\n }, {\n key: '_update',\n value: function _update(props, isOpen) {\n var animationOptions = {\n animation: props.animation,\n animationOptions: props.animationOptions\n };\n\n if (props.isOpen && !isOpen) {\n this.node.show(animationOptions).then(function () {\n return props.onShow && props.onShow();\n });\n } else if (!props.isOpen && isOpen) {\n this.node.hide(animationOptions).then(function () {\n return props.onHide && props.onHide();\n });\n }\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n this.node = null;\n }\n }, {\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(this.props, []);\n\n return React.createElement('ons-modal', others, this.props.children);\n }\n }]);\n return Modal;\n}(BasicComponent);\n\n\n\nModal.propTypes = {\n /**\n * @property animation\n * @type {String}\n * @description\n * [en]\n * Animation name. Available animations are `\"slide\"`, `\"lift\"`, `\"fade\"` and `\"none\"`.\n * These are platform based animations. For fixed animations, add `\"-ios\"` or `\"-md\"` suffix to the animation name. E.g. `\"lift-ios\"`, `\"lift-md\"`. Defaults values are `\"slide-ios\"` and `\"fade-md\"`.\n * [/en]\n */\n animation: React.PropTypes.oneOf(['none', 'fade']),\n\n /**\n * @name animationOptions\n * @type object\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 */\n animationOptions: React.PropTypes.object,\n\n /**\n * @name onShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called Fired right after the modal is shown.\n * [/en]\n */\n onShow: React.PropTypes.func,\n\n /**\n * @name onHide\n * @type function\n * @required false\n * @description\n * [en]\n * Called after the modal is hidden.\n * [/en]\n */\n onHide: React.PropTypes.func,\n\n /**\n * @name isOpen\n * @type boolean\n * @description\n * [en]When `true` the modal will show itself.[/en]\n */\n isOpen: React.PropTypes.bool\n};\n\nModal.defaultProps = {\n isOpen: false,\n animation: 'none'\n};\n\n/**\n * @original ons-page\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]\n * This component is handling the entire page. The content can be scrolled.\n *\n * To add fixed content that doesn't scroll with the page the `renderFixed` prop is used.\n *\n * A page toolbar can be added with the `renderToolbar` prop.\n * [/en]\n * [jp] どうしよう[/jp]\n * @example\n ... }\n contentStyle={{padding: 40}}>\n Page content
\n \n */\n\nvar Page = function (_BasicComponent) {\n inherits(Page, _BasicComponent);\n\n function Page() {\n classCallCheck(this, Page);\n return possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).apply(this, arguments));\n }\n\n createClass(Page, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(Page.prototype.__proto__ || Object.getPrototypeOf(Page.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM__default.findDOMNode(this);\n node.addEventListener('init', this.props.onInit);\n node.addEventListener('show', this.props.onShow);\n node.addEventListener('hide', this.props.onHide);\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var node = ReactDOM__default.findDOMNode(this);\n node.removeEventListener('init', this.props.onInit);\n node.removeEventListener('show', this.props.onShow);\n node.removeEventListener('hide', this.props.onHide);\n }\n }, {\n key: 'render',\n value: function render() {\n var toolbar = this.props.renderToolbar(this);\n var bottomToolbar = this.props.renderBottomToolbar(this);\n var modal = this.props.renderModal(this);\n var fixed = this.props.renderFixed(this);\n\n var _props = this.props;\n var contentStyle = _props.contentStyle;\n var props = objectWithoutProperties(_props, ['contentStyle']);\n\n return React.createElement('ons-page', props, toolbar, React.createElement('div', { className: 'page__background' }, ' '), React.createElement('div', { className: 'page__content', style: contentStyle }, this.props.children), React.createElement('div', { className: 'page__extra', style: { zIndex: 10001 } }, modal), fixed, bottomToolbar);\n }\n }]);\n return Page;\n}(BasicComponent);\n\n\n\nPage.propTypes = {\n\n /**\n * @name contentStyle\n * @type Object\n * @description\n * [en]\n * Specify the style of the page content. Optional.\n * [/en]\n */\n contentStyle: React.PropTypes.object,\n\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 /**\n * @name renderModal\n * @type function\n * @required false\n * @defaultValue null\n * @description\n * [en] This function renders a modal that masks current screen.[/en]\n */\n renderModal: React.PropTypes.func,\n\n /**\n * @name renderToolbar\n * @type function\n * @required false\n * @defaultValue null\n * @description\n * [en] This function renders the toolbar of the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderToolbar: React.PropTypes.func,\n\n /**\n * @name renderBottomToolbar\n * @type function\n * @defaultValue null\n * @description\n * [en] This function renders the bottom toolbar of the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderBottomToolbar: React.PropTypes.func,\n\n /**\n * @name renderFixed\n * @type function\n * @defaultValue null\n * @description\n * [en] This function renders fixed content of the page. Can be used to render `Fab` or `SpeedDial` components as well as other components that don't scroll with the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderFixed: React.PropTypes.func,\n\n /**\n * @name onInit\n * @type function\n * @required false\n * @description\n * [en]\n * \tFired right after the page is attached.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onInit: React.PropTypes.func,\n\n /**\n * @name onShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called Fired right after the page is shown.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onShow: React.PropTypes.func,\n\n /**\n * @name onHide\n * @type function\n * @required false\n * @description\n * [en]\n * Called after the page is hidden.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onHide: React.PropTypes.func\n};\n\nvar NOOP$1 = function NOOP$1() {\n return null;\n};\n\nPage.defaultProps = {\n renderToolbar: NOOP$1,\n renderBottomToolbar: NOOP$1,\n renderModal: NOOP$1,\n renderFixed: NOOP$1\n};\n\n/**\n * @original ons-popover\n * @category dialog\n * @tutorial react/Reference/popover\n * @description\n * [en]\n * A component that displays a popover next to an element. The popover can be used to display extra information about a component or a tooltip.\n * Another common way to use the popover is to display a menu when a button on the screen is tapped.\n * [/en]\n * [jp][/jp]\n * @example\n * \n * this.setState({target: this.refs.btn, isOpen: true})}/>\n this.setState({isOpen: false})}\n getTarget={() => this.state.target} >\n \n
This is a popover!
\n
Click the background to remove the popover.
\n
\n */\n\nvar Popover = function (_BaseDialog) {\n inherits(Popover, _BaseDialog);\n\n function Popover() {\n classCallCheck(this, Popover);\n return possibleConstructorReturn(this, (Popover.__proto__ || Object.getPrototypeOf(Popover)).apply(this, arguments));\n }\n\n createClass(Popover, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-popover';\n }\n }, {\n key: 'show',\n value: function show() {\n var target = this.props.getTarget();\n target = ReactDOM__default.findDOMNode(target);\n return this.node.firstChild.show(target);\n }\n }]);\n return Popover;\n}(BaseDialog);\n\nPopover.propTypes = {\n /**\n * @name getTarget\n * @type function\n * @required true\n * @description\n * [en]\n * This function should return react component or a domnode that the popover is showing on.\n * [/en]\n * [jp][/jp]\n */\n getTarget: React.PropTypes.func.isRequired,\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\n/**\n * @original ons-progress-bar\n * @category visual\n * @tutorial react/Reference/progress\n * @description\n * [en] The component is used to display a linear progress bar. It can either display a progress bar that shows the user how much of a task has been completed. In the case where the percentage is not known it can be used to display an animated progress bar so the user can see that an operation is in progress. [/en]\n * [jp][/jp]\n * @example\n *` element.\n * It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.\n [/en]\n * [jp] どうしよう[/jp]\n * @example\n\n return (\n \n {\n (this.state.pullHookState === 'initial') ?\n \n :\n (this.state.pullHookState === 'preaction') ?\n \n \n :\n \n );\n */\n\nvar PullHook = function (_BasicComponent) {\n inherits(PullHook, _BasicComponent);\n\n function PullHook() {\n classCallCheck(this, PullHook);\n return possibleConstructorReturn(this, (PullHook.__proto__ || Object.getPrototypeOf(PullHook)).apply(this, arguments));\n }\n\n createClass(PullHook, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(PullHook.prototype.__proto__ || Object.getPrototypeOf(PullHook.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM__default.findDOMNode(this);\n node.addEventListener('changestate', this.props.onChange);\n this.refs.pullHook.onAction = this.props.onLoad;\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var node = ReactDOM__default.findDOMNode(this);\n node.removeEventListener('changestate', this.props.onChange);\n }\n }, {\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(this.props, []);\n\n ['disabled'].forEach(function (el) {\n Util.convert(others, el);\n });\n\n Util.convert(others, 'height', { fun: Util.sizeConverter });\n Util.convert(others, 'thresholdHeight', { fun: Util.sizeConverter, newName: 'threshold-height' });\n Util.convert(others, 'fixedContent', { newName: 'fixed-content' });\n\n return React.createElement('ons-pull-hook', _extends({ ref: 'pullHook' }, others));\n }\n }]);\n return PullHook;\n}(BasicComponent);\n\nPullHook.propTypes = {\n /**\n * @name onChange\n * @type function\n * @required false\n * @description\n * [en]Called when the pull hook inner state is changed. The state can be either \"initial\", \"preaction\" or \"action\"[/en]\n * [jp] [/jp]\n */\n onChange: React.PropTypes.func,\n\n /**\n * @name onLoad\n * @type function\n * @required false\n * @description\n * [en]Called when the pull hook is in the `action` state[/en]\n * [jp] [/jp]\n */\n onLoad: React.PropTypes.func,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en] When set to true, the pull hook will be disabled.[/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool,\n\n /**\n * @name height\n * @type number\n * @description\n * [en] The height of the pull hook in pixels. The default value is 64.[/en]\n * [jp] [/jp]\n */\n height: React.PropTypes.number,\n\n /**\n * @name thresholdHeight\n * @type number\n * @description\n * [en] The threshold height of the pull hook in pixels. The default value is 96.[/en]\n * [jp] [/jp]\n */\n thresholdHeight: React.PropTypes.number,\n\n /**\n * @name fixedContent\n * @type number\n * @description\n * [en] If set to true, the content of the page will not move when pulling.[/en]\n * [jp] [/jp]\n */\n fixedContent: React.PropTypes.bool\n};\n\nvar EVENT_TYPES$1 = ['change', 'input'];\n\n/**\n * @original ons-range\n * @category form\n * @tutorial react/Reference/range\n * @description\n * [en]\n * Range input component.\n * [/en]\n * [jp][/jp]\n * @example\n * this.setState({value: parseInt(event.target.value)})}\n * />\n */\n\nvar Range = function (_SimpleWrapper) {\n inherits(Range, _SimpleWrapper);\n\n function Range() {\n classCallCheck(this, Range);\n return possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).apply(this, arguments));\n }\n\n createClass(Range, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n get(Range.prototype.__proto__ || Object.getPrototypeOf(Range.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM__default.findDOMNode(this);\n\n EVENT_TYPES$1.forEach(function (eventType) {\n node.addEventListener(eventType, _this2.props.onChange);\n });\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var _this3 = this;\n\n var node = ReactDOM__default.findDOMNode(this);\n\n EVENT_TYPES$1.forEach(function (eventType) {\n node.removeEventListener(eventType, _this3.props.onChange);\n });\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n var node = ReactDOM__default.findDOMNode(this);\n node.value = props.value;\n }\n }, {\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-range';\n }\n }]);\n return Range;\n}(SimpleWrapper);\n\n\n\nRange.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the progress indicator.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name onChange\n * @type function\n * @description\n * [en] Called when the value of the input changes.[/en]\n * [jp][/jp]\n */\n onChange: React.PropTypes.func,\n\n /**\n * @name value\n * @type number\n * @description\n * [en]\n * Current value of the element.\n * [/en]\n * [jp] [/jp]\n */\n value: React.PropTypes.number,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en] If true, the element is disabled. [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\n/**\n * @original ons-ripple\n * @category visual\n * @tutorial react/Reference/ripple\n * @description\n * [en]\n * Adds a Material Design \"ripple\" effect to an element.\n * [/en]\n * [jp][/jp]\n * @example\n \n
\n */\n\nvar Ripple = function (_SimpleWrapper) {\n inherits(Ripple, _SimpleWrapper);\n\n function Ripple() {\n classCallCheck(this, Ripple);\n return possibleConstructorReturn(this, (Ripple.__proto__ || Object.getPrototypeOf(Ripple)).apply(this, arguments));\n }\n\n createClass(Ripple, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-ripple';\n }\n }]);\n return Ripple;\n}(SimpleWrapper);\n\n\n\nRipple.propTypes = {\n /**\n * @name color\n * @type string\n * @required false\n * @description\n * [en]Color of the ripple effect.[/en]\n * [jp] [/jp]\n */\n color: React.PropTypes.string,\n\n /**\n * @name background\n * @type string\n * @required false\n * @description\n * [en]Color of the background.[/en]\n * [jp] [/jp]\n */\n background: 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/**\n * @original ons-row\n * @category grid\n * @description\n * [en]\n * Represents a row in the grid system. Use with `Col` to layout components.\n * [/en]\n * [jp][/jp]\n * \n *
\n */\n\nvar Row = function (_SimpleWrapper) {\n inherits(Row, _SimpleWrapper);\n\n function Row() {\n classCallCheck(this, Row);\n return possibleConstructorReturn(this, (Row.__proto__ || Object.getPrototypeOf(Row)).apply(this, arguments));\n }\n\n createClass(Row, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-row';\n }\n }, {\n key: 'render',\n value: function render() {\n var others = objectWithoutProperties(this.props, []);\n\n Util.convert(others, 'verticalAlign', { newName: 'vertical-align' });\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n }]);\n return Row;\n}(SimpleWrapper);\n\n\n\nRow.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\n/**\n * @original ons-speed-dial\n * @category control\n * @tutorial react/Reference/speed-dial\n * @description\n * [en] Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page.\n * The Speed dial looks like a `Fab` element but will expand a menu when tapped.\n [/en]\n * [jp][/jp]\n * @example\n * console.log('test1')} position='left bottom'>\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 */\n\nvar SpeedDial = function (_SimpleWrapper) {\n inherits(SpeedDial, _SimpleWrapper);\n\n function SpeedDial() {\n classCallCheck(this, SpeedDial);\n return possibleConstructorReturn(this, (SpeedDial.__proto__ || Object.getPrototypeOf(SpeedDial)).apply(this, arguments));\n }\n\n createClass(SpeedDial, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-speed-dial';\n }\n }]);\n return SpeedDial;\n}(SimpleWrapper);\n\n\n\nSpeedDial.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the speed dial.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name position\n * @type string\n * @description\n * [en]Specify the vertical and horizontal position of the component.\n * I.e. to display it in the top right corner specify \"right top\".\n * Choose from \"right\", \"left\", \"top\" and \"bottom\".\n [/en]\n * [jp] [/jp]\n */\n position: React.PropTypes.string,\n\n /**\n * @name direction\n * @type string\n * @description\n * [en]Specify the direction the items are displayed. Possible values are \"up\", \"down\", \"left\" and \"right\".[/en]\n * [jp] [/jp]\n */\n direction: React.PropTypes.oneOf(['up', 'down', 'left', 'right']),\n\n /**\n * @name disabled\n * @type string\n * @description\n * [en]Specify if button should be disabled.[/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\n/**\n * @original ons-speed-dial-item\n * @category control\n * @tutorial react/Reference/speed-dial\n * @description\n * [en] This component displays the child elements of the Material Design Speed dial component. [/en]\n * [jp][/jp]\n * @example\n * console.log('test1')} position='left bottom'>\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 */\n\nvar SpeedDialItem = function (_SimpleWrapper) {\n inherits(SpeedDialItem, _SimpleWrapper);\n\n function SpeedDialItem() {\n classCallCheck(this, SpeedDialItem);\n return possibleConstructorReturn(this, (SpeedDialItem.__proto__ || Object.getPrototypeOf(SpeedDialItem)).apply(this, arguments));\n }\n\n createClass(SpeedDialItem, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-speed-dial-item';\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(SpeedDialItem.prototype.__proto__ || Object.getPrototypeOf(SpeedDialItem.prototype), 'componentDidMount', this).call(this);\n var node = ReactDOM__default.findDOMNode(this);\n node.addEventListener('click', this.props.onClick);\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var node = ReactDOM__default.findDOMNode(this);\n node.removeEventListener('click', this.props.onClick);\n }\n }]);\n return SpeedDialItem;\n}(SimpleWrapper);\n\n\n\nSpeedDialItem.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 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\n/**\n * @original ons-splitter\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout.\n *\n * It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.\n [/en]\n * [jp] どうしよう[/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\n\nvar Splitter = function (_SimpleWrapper) {\n inherits(Splitter, _SimpleWrapper);\n\n function Splitter() {\n classCallCheck(this, Splitter);\n return possibleConstructorReturn(this, (Splitter.__proto__ || Object.getPrototypeOf(Splitter)).apply(this, arguments));\n }\n\n createClass(Splitter, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-splitter';\n }\n }]);\n return Splitter;\n}(SimpleWrapper);\n\n/**\n * @original ons-splitter-content\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] The SplitterContent element is used as a child element of Splitter.\n * It contains the main content of the page while SplitterSide contains the list.\n [/en]\n * [jp][/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\n\nvar SplitterContent = function (_SimpleWrapper) {\n inherits(SplitterContent, _SimpleWrapper);\n\n function SplitterContent() {\n classCallCheck(this, SplitterContent);\n return possibleConstructorReturn(this, (SplitterContent.__proto__ || Object.getPrototypeOf(SplitterContent)).apply(this, arguments));\n }\n\n createClass(SplitterContent, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-splitter-content';\n }\n }]);\n return SplitterContent;\n}(SimpleWrapper);\n\n/**\n * @original ons-splitter-side\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] The SplitterContent element is used as a child element of Splitter.\n * It contains the main content of the page while SplitterSide contains the list.\n [/en]\n * [jp][/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\n\nvar SplitterSide = function (_BasicComponent) {\n inherits(SplitterSide, _BasicComponent);\n\n function SplitterSide() {\n classCallCheck(this, SplitterSide);\n return possibleConstructorReturn(this, (SplitterSide.__proto__ || Object.getPrototypeOf(SplitterSide)).apply(this, arguments));\n }\n\n createClass(SplitterSide, [{\n key: 'render',\n value: function render() {\n var props = objectWithoutProperties(this.props, []);\n\n props.swipeable = this.props.isSwipeable ? 'swipeable' : null;\n\n if (this.props.isCollapsed) {\n console.error('The property `isCollapsed` is deprecated, please use `collapse`, see https://onsen.io/v2/docs/react/SplitterSide.html.');\n delete props['isCollapsed'];\n }\n\n if (!props.collapse) props.collapse = null;\n\n if (typeof props.collapse === 'boolean') {\n if (props.collapse) {\n props.collapse = 'collapse';\n } else {\n props.collapse = 'false';\n }\n }\n\n Util.convert(props, 'width', { fun: Util.sizeConverter });\n Util.convert(props, 'animation');\n Util.convert(props, 'side');\n Util.convert(props, 'mode');\n Util.convert(props, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });\n Util.convert(props, 'openThreshold', { newName: 'open-threshold' });\n Util.convert(props, 'swipeTargetWidth', { fun: Util.sizeConverter, newName: 'swipe-target-width' });\n\n return React.createElement('ons-splitter-side', props, this.props.children);\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n get(SplitterSide.prototype.__proto__ || Object.getPrototypeOf(SplitterSide.prototype), 'componentDidMount', this).call(this);\n this.node = ReactDOM__default.findDOMNode(this);\n this.componentWillReceiveProps(this.props);\n\n this.node.addEventListener('postopen', this.props.onOpen);\n this.node.addEventListener('postclose', this.props.onClose);\n this.node.addEventListener('preopen', this.props.onPreOpen);\n this.node.addEventListener('preclose', this.props.onPreClose);\n this.node.addEventListener('modechange', this.props.onModeChange);\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n this.node.removeEventListener('postopen', this.props.onOpen);\n this.node.removeEventListener('postclose', this.props.onClose);\n this.node.removeEventListener('preopen', this.props.onPreOpen);\n this.node.removeEventListener('preclose', this.props.onPreClose);\n this.node.removeEventListener('modechange', this.props.onModeChange);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(newProps) {\n if (newProps.isOpen) {\n this.node.open();\n } else {\n this.node.close();\n }\n }\n }]);\n return SplitterSide;\n}(BasicComponent);\n\nSplitterSide.propTypes = {\n /**\n * @name collapse\n * @type bool\n * @description\n * [en] Specify the collapse behavior. Valid values are `\"portrait\"`, `\"landscape\"` or a media query.\n * The strings `\"portrait\"` and `\"landscape\"` means the view will collapse when device is in landscape or portrait orientation.\n * If the value is not defined, the view always be in `\"collapse\"` mode.\n [/en]\n * [jp] [/jp]\n */\n collapse: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.string]),\n\n /**\n * @name isSwipeable\n * @type bool\n * @description\n * [en]Ennable swipe interaction on collapse mode.[/en]\n * [jp] [/jp]\n */\n isSwipeable: React.PropTypes.bool,\n\n /**\n * @name isOpen\n * @type bool\n * @description\n * [en]Specifies whether the menu is open.[/en]\n * [jp] [/jp]\n */\n isOpen: React.PropTypes.bool,\n\n /**\n * @name onOpen\n * @type function\n * @description\n * [en]Called after the menu is opened.[/en]\n * [jp] [/jp]\n */\n onOpen: React.PropTypes.func,\n\n /**\n * @name onClose\n * @type function\n * @description\n * [en]Called after the menu is closed.[/en]\n * [jp] [/jp]\n */\n onClose: React.PropTypes.func,\n\n /**\n * @name side\n * @type string\n * @description\n * [en]Specify which side of the screen the SplitterSide element is located. Possible values are `\"left\"` and `\"right\"`.[/en]\n * [jp] [/jp]\n */\n side: React.PropTypes.oneOf(['left', 'right']),\n\n /**\n * @name swipeTargetWidth\n * @type number\n * @description\n * [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \"20%\" for percentage).[/en]\n * [jp] [/jp]\n */\n swipeTargetWidth: React.PropTypes.number,\n\n /**\n * @name width\n * @type number\n * @description\n * [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \"20%\" for percentage).[/en]\n * [jp] [/jp]\n */\n width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),\n\n /**\n * @name animation\n * @type string\n * @required false\n * @description\n * [en]Specify the animation. Use one of `\"overlay\"`, and `\"default\"`.[/en]\n * [jp] [/jp]\n */\n animation: 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 openThreshold\n * @type object\n * @required false\n * @description\n * [en] Specify how much the menu needs to be swiped before opening. A value between `0` and `1`. [/en]\n * [jp] [/jp]\n */\n openThreshold: React.PropTypes.number,\n\n /**\n * @name mode\n * @type string\n * @required false\n * @description\n * [en] Current mode. Possible values are `\"collapse\"` or `\"split\"`. This attribute is read only. [/en]\n * [jp] [/jp]\n */\n mode: React.PropTypes.oneOf(['collapse', 'split']),\n\n /**\n * @name onPreOpen\n * @type string\n * @description\n * [en] Called before the menu opens. [/en]\n * [jp] [/jp]\n */\n onPreOpen: React.PropTypes.func,\n\n /**\n * @name onPreClose\n * @type string\n * @description\n * [en] Called before the menu closes. [/en]\n * [jp] [/jp]\n */\n onPreClose: React.PropTypes.func,\n\n /**\n * @name onModeChange\n * @type string\n * @description\n * [en] Called after the component's mode changes. [/en]\n * [jp] [/jp]\n */\n onModeChange: React.PropTypes.func\n};\n\n/**\n * @original ons-switch\n * @category form\n * @tutorial react/Reference/switch\n * @description\n * [en] Switch component. The switch can be toggled both by dragging and tapping.\n * Will automatically displays a Material Design switch on Android devices.\n [/en]\n * [jp][/jp]\n * @example\n * ` elements.[/en]\n * [jp] [/jp]\n */\n inputId: React.PropTypes.string\n};\n\n/**\n * @original ons-tab\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Represents a tab inside tab bar.\n [/en]\n * [jp][/jp]\n * @example\n * \n * Home\n * \n */\n\nvar Tab = function (_SimpleWrapper) {\n inherits(Tab, _SimpleWrapper);\n\n function Tab() {\n classCallCheck(this, Tab);\n return possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));\n }\n\n createClass(Tab, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-tab';\n }\n }]);\n return Tab;\n}(SimpleWrapper);\n\n/**\n * @original ons-tab-active\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Tab element for showing shown when the tab is active [/en]\n * [jp][/jp]\n * @example\n * \n * \n HOME\n \n \n home\n \n \n */\n\nvar TabActive = function (_SimpleWrapper) {\n inherits(TabActive, _SimpleWrapper);\n\n function TabActive() {\n classCallCheck(this, TabActive);\n return possibleConstructorReturn(this, (TabActive.__proto__ || Object.getPrototypeOf(TabActive)).apply(this, arguments));\n }\n\n createClass(TabActive, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-tab-active';\n }\n }]);\n return TabActive;\n}(SimpleWrapper);\n\n/**\n * @original ons-tab-inactive\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Tab element for showing shown when the tab is inactive [/en]\n * [jp][/jp]\n * @example\n * \n * \n HOME\n \n \n home\n \n \n */\n\nvar TabInactive = function (_SimpleWrapper) {\n inherits(TabInactive, _SimpleWrapper);\n\n function TabInactive() {\n classCallCheck(this, TabInactive);\n return possibleConstructorReturn(this, (TabInactive.__proto__ || Object.getPrototypeOf(TabInactive)).apply(this, arguments));\n }\n\n createClass(TabInactive, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-tab-inactive';\n }\n }]);\n return TabInactive;\n}(SimpleWrapper);\n\n/**\n * @original ons-tabbar\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Component to display a tabbar on either the top or the bottom of a page.\n * To define the tabs and the content the property renderTabs need to be implemented, that returns an array of tabs and their content. See the example for specifics. [/en]* [jp][/jp]\n * @example\n\n \n this.setState(index)}\n onPostChange={() => console.log('postChange')}\n onReactive={() => console.log('postChange')}\n position='bottom'\n index={this.state.index}\n renderTabs={(activeIndex, tabbar) => [\n {\n content: \n */\n\nvar Tabbar = function (_BasicComponent) {\n inherits(Tabbar, _BasicComponent);\n\n function Tabbar() {\n classCallCheck(this, Tabbar);\n return possibleConstructorReturn(this, (Tabbar.__proto__ || Object.getPrototypeOf(Tabbar)).apply(this, arguments));\n }\n\n createClass(Tabbar, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n get(Tabbar.prototype.__proto__ || Object.getPrototypeOf(Tabbar.prototype), 'componentDidMount', this).call(this);\n var node = this.refs.tabbar;\n node.addEventListener('prechange', this.props.onPreChange);\n node.addEventListener('postchange', this.props.onPostChange);\n node.addEventListener('reactive', this.props.onReactive);\n\n setTimeout(function () {\n node.setActiveTab(_this2.props.index);\n }, 0);\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n var node = this.refs.tabbar;\n node.removeEventListener('prechange', this.props.onPreChange);\n node.removeEventListener('postchange', this.props.onPostChange);\n node.removeEventListener('reactive', this.props.onReactive);\n }\n }, {\n key: 'componentDidUpdate',\n value: function componentDidUpdate(prevProps) {\n get(Tabbar.prototype.__proto__ || Object.getPrototypeOf(Tabbar.prototype), 'componentDidUpdate', this).call(this, prevProps);\n if (prevProps.index !== this.props.index) {\n this.refs.tabbar.setActiveTab(this.props.index);\n }\n }\n }, {\n key: 'render',\n value: function render() {\n var tabs = this.props.renderTabs(this.props.index, this);\n\n if (!this.tabPages) {\n this.tabPages = tabs.map(function (tab) {\n return tab.content;\n });\n } else {\n this.tabPages[this.props.index] = tabs[this.props.index].content;\n }\n\n var others = objectWithoutProperties(this.props, []);\n\n ['animation'].forEach(function (el) {\n Util.convert(others, el);\n });\n\n Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });\n\n return React.createElement('ons-tabbar', _extends({}, this.props, { ref: 'tabbar' }), React.createElement('div', { className: 'ons-tab-bar__content tab-bar__content' + (this.props.position === 'top' ? ' tab-bar--top__content' : '') }, this.tabPages), React.createElement('div', { className: 'tab-bar ons-tab-bar__footer ons-tabbar-inner' + (this.props.position === 'top' ? ' tab-bar--top' : '') }, tabs.map(function (tab) {\n return tab.tab;\n })));\n }\n }]);\n return Tabbar;\n}(BasicComponent);\n\nTabbar.propTypes = {\n /**\n * @name index\n * @type number\n * @required\n * @description\n * [en] The index of the tab to highlight.[/en]\n * [jp] [/jp]\n */\n index: React.PropTypes.number.isRequired,\n\n /**\n * @name renderTabs\n * @type function\n * @description\n * [en] The index of the first tab to show.[/en]\n * [jp] [/jp]\n */\n renderTabs: React.PropTypes.func.isRequired,\n\n /**\n * @name position\n * @type string\n * @description\n * [en] Tabbar's position. Available values are `\"bottom\"` and `\"top\"`. Use `\"auto\"` to choose position depending on platform (iOS bottom, Android top). [/en]\n * [jp] [/jp]\n */\n position: React.PropTypes.string,\n\n /**\n * @name animation\n * @type string\n * @description\n * [en] Animation name. Available values are `\"none\"`, `\"slide\"` and `\"fade\"`. Default is `\"none\"`. [/en]\n * [jp] [/jp]\n */\n animation: React.PropTypes.oneOf(['none', 'slide', 'fade']),\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 onPreChange\n * @type function\n * @description\n * [en]Called just before the tab is changed.[/en]\n * [jp] [/jp]\n */\n onPreChange: React.PropTypes.func,\n\n /**\n * @name onPostChange\n * @type function\n * @description\n * [en]Called just after the tab is changed.[/en]\n * [jp] [/jp]\n */\n onPostChange: React.PropTypes.func,\n\n /**\n * @name onReactive\n * @type function\n * @description\n * [en]Called if the already open tab is tapped again.[/en]\n * [jp] [/jp]\n */\n onReactive: React.PropTypes.func\n};\n\nTabbar.defaultProps = {\n index: 0\n};\n\n/**\n * @original ons-toolbar\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]Toolbar component that can be used with navigation. Left, center and right container can be specified by class names. This component will automatically displays as a Material Design toolbar when running on Android devices.[/en]\n * [jp] どうしよう[/jp]\n * @example\n *\n\n \n \n \n Back\n \n
\n \n Title\n
\n \n \n \n
\n }\n/>\n */\n\nvar Toolbar = function (_SimpleWrapper) {\n inherits(Toolbar, _SimpleWrapper);\n\n function Toolbar() {\n classCallCheck(this, Toolbar);\n return possibleConstructorReturn(this, (Toolbar.__proto__ || Object.getPrototypeOf(Toolbar)).apply(this, arguments));\n }\n\n createClass(Toolbar, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-toolbar';\n }\n }]);\n return Toolbar;\n}(SimpleWrapper);\n\n\n\nToolbar.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\n/**\n * @original ons-toolbar-button\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]\n * Button component for the Toolbar. Using this component gives a nice default style.\n *\n *\n * [/en]\n * [jp][/jp]\n * @example\n * \n \n Back
\n Input
\n \n Add \n
\n \n }>\n Page Content\n \n */\n\nvar ToolbarButton = function (_SimpleWrapper) {\n inherits(ToolbarButton, _SimpleWrapper);\n\n function ToolbarButton() {\n classCallCheck(this, ToolbarButton);\n return possibleConstructorReturn(this, (ToolbarButton.__proto__ || Object.getPrototypeOf(ToolbarButton)).apply(this, arguments));\n }\n\n createClass(ToolbarButton, [{\n key: '_getDomNodeName',\n value: function _getDomNodeName() {\n return 'ons-toolbar-button';\n }\n }]);\n return ToolbarButton;\n}(SimpleWrapper);\n\n\n\nToolbarButton.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 * Indicates whether the button is disabled.\n * [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\nexports.AlertDialog = AlertDialog;\nexports.BackButton = BackButton;\nexports.BottomToolbar = BottomToolbar;\nexports.Button = Button;\nexports.Carousel = Carousel;\nexports.CarouselItem = CarouselItem;\nexports.Col = Col;\nexports.Dialog = Dialog;\nexports.Fab = Fab;\nexports.Icon = Icon;\nexports.Input = Input;\nexports.LazyList = LazyList;\nexports.List = List;\nexports.ListHeader = ListHeader;\nexports.ListItem = ListItem;\nexports.Navigator = Navigator;\nexports.Modal = Modal;\nexports.Page = Page;\nexports.Popover = Popover;\nexports.ProgressBar = ProgressBar;\nexports.ProgressCircular = ProgressCircular;\nexports.PullHook = PullHook;\nexports.Range = Range;\nexports.Ripple = Ripple;\nexports.Row = Row;\nexports.SpeedDial = SpeedDial;\nexports.SpeedDialItem = SpeedDialItem;\nexports.Splitter = Splitter;\nexports.SplitterContent = SplitterContent;\nexports.SplitterSide = SplitterSide;\nexports.Switch = Switch;\nexports.Tab = Tab;\nexports.TabActive = TabActive;\nexports.TabInactive = TabInactive;\nexports.Tabbar = Tabbar;\nexports.Toolbar = Toolbar;\nexports.ToolbarButton = ToolbarButton;\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n})));\n//# sourceMappingURL=react-onsenui.js.map\n"
},
{
"path": "docgen.js",
"content": "var filter = require('filter-files');\nvar exec = require('child_process').exec;\n\nvar files = filter.sync('./src/components/', (fp) => {\n // console.log(fp);\n return fp.indexOf('Util') === -1 &&\n fp.indexOf('BaseDialog') === -1 &&\n fp.indexOf('todo') === -1;\n});\n\nconsole.log('Generating docs, this may take a while: ..');\nfor (var i = 0; i < files.length; i++) {\n var fileName = files[i].replace(/^.*[\\\\\\/]/, '').slice(0, -4);\n var cmd = 'node ./scripts/react-docgen.js ' + files[i] + ' > ' + './docs/' + fileName + '.json';\n exec(cmd, function callback(error, stdout, stderr) {\n if (error) {\n throw new Error('error generating docs');\n }\n });\n}\n"
},
{
"path": "docs/AlertDialog.json",
"content": "{\"description\":\"@original ons-alert-dialog\\n@category dialog\\n@tutorial react/Reference/dialog\\n@description\\n[en]\\n Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform.\\n[/en]\\n[jp][/jp]\\n@example\\n \\n Warning!
\\n \\n An error has occurred!\\n
\\n \\n \\n Cancel\\n \\n \\n Ok\\n \\n
\\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"onCancel\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"isOpen\":{\"type\":{\"name\":\"bool\"},\"required\":true,\"description\":\"@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]\"},\"isCancelable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"isDisabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isDisabled\\n@type bool\\n@required false\\n@description\\n [en]\\n Specifies whether the dialog is disabled.\\n [/en]\\n [jp] [/jp]\"},\"animation\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the dialog.[/en]\\n [jp] [/jp]\"},\"maskColor\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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]\"},\"onPreShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPostShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPreHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreHide\\n@type function\\n@required false\\n@description\\n [en]Called just before the alert dialog is hidden.[/en]\\n [jp][/jp]\"},\"onPostHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/BackButton.json",
"content": "{\"description\":\"@original ons-back-button\\n@category navigation\\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 \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null},{\"name\":\"_updateOnClick\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"props\",\"type\":null}],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the back button.[/en]\\n [jp][/jp]\"},\"onClick\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/BasicComponent.json",
"content": "{\"description\":\"\",\"methods\":[{\"name\":\"updateClasses\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/BottomToolbar.json",
"content": "{\"description\":\"@original ons-bottom-toolbar\\n@category page\\n@description\\n[en]Toolbar component that is positioned at the bottom of the page.[/en]\\n[jp][/jp]\\n@example\\n Content \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]Specify modifier name to specify custom styles. Optional.[/en]\\n [jp][/jp]\"}}}\n"
},
{
"path": "docs/Button.json",
"content": "{\"description\":\"@original ons-button\\n@category form\\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 Tap Me\\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the button.[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en]\\n Specifies whether the button is disabled.\\n [/en]\\n [jp] [/jp]\"},\"ripple\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name ripple\\n@type bool\\n@description\\n [en]\\n Specifies whether the button has a ripple effect.\\n [/en]\\n [jp] [/jp]\"},\"onClick\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onClick\\n@type function\\n@description\\n [en] This function will be called ones the button is clicked. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Carousel.json",
"content": "{\"description\":\"@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 \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"direction\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'horizontal'\",\"computed\":false},{\"value\":\"'vertical'\",\"computed\":false}]},\"required\":false,\"description\":\"@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]\"},\"fullscreen\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name fullscreen\\n@type bool\\n@description\\n [en]If true, the carousel will cover the whole screen.[/en]\\n [jp] [/jp]\"},\"overscrollable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"centered\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"itemWidth\":{\"type\":{\"name\":\"union\",\"value\":[{\"name\":\"string\"},{\"name\":\"number\"}]},\"required\":false,\"description\":\"@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]\"},\"itemHeight\":{\"type\":{\"name\":\"union\",\"value\":[{\"name\":\"string\"},{\"name\":\"number\"}]},\"required\":false,\"description\":\"@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]\"},\"autoScroll\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"autoScrollRatio\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@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]\"},\"swipeable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name swipeable\\n@type bool\\n@description\\n [en]If true, the carousel can be scrolled by drag or swipe.[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en]If true, the carousel will be disabled.[/en]\\n [jp] [/jp]\"},\"index\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@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]\"},\"autoRefresh\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"onPostChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPostChange\\n@type function\\n@description\\n [en]Called just after the current carousel item has changed. [/en]\\n [jp] [/jp]\"},\"onRefresh\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onRefresh\\n@type function\\n@description\\n [en]Called when the carousel has been refreshed. [/en]\\n [jp] [/jp]\"},\"onOverscroll\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onOverscroll\\n@type function\\n@description\\n [en]Called when the carousel has been overscrolled. [/en]\\n [jp] [/jp]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/CarouselItem.json",
"content": "{\"description\":\"@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 \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]\\n Specify modifier name to specify custom styles. Optional.\\n [/en]\\n [jp] どうしよう[/jp]\"}}}\n"
},
{
"path": "docs/Col.json",
"content": "{\"description\":\"@original ons-col\\n@category grid\\n@description\\n[en]\\nRepresents a column in the grid system. Use with `` to layout components.\\n[/en]\\n[jp][/jp]\\n\\n
\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"verticalAlign\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'top'\",\"computed\":false},{\"value\":\"'bottom'\",\"computed\":false},{\"value\":\"'center'\",\"computed\":false}]},\"required\":false,\"description\":\"@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]\"},\"width\":{\"type\":{\"name\":\"union\",\"value\":[{\"name\":\"number\"},{\"name\":\"string\"}]},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/Dialog.json",
"content": "{\"description\":\"@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 Page Content\\n \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"onCancel\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"isOpen\":{\"type\":{\"name\":\"bool\"},\"required\":true,\"description\":\"@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]\"},\"isCancelable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"isDisabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isDisabled\\n@type bool\\n@required false\\n@description\\n [en]\\n Specifies whether the dialog is disabled.\\n [/en]\\n [jp] [/jp]\"},\"animation\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the dialog.[/en]\\n [jp] [/jp]\"},\"maskColor\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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]\"},\"onPreShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPostShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPreHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreHide\\n@type function\\n@required false\\n@description\\n [en]Called just before the alert dialog is hidden.[/en]\\n [jp][/jp]\"},\"onPostHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/Fab.json",
"content": "{\"description\":\"@original ons-fab\\n@category form\\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 console.log('speed A')}> A \\n console.log('speed B')}> B \\n console.log('speed C')}> C \\n console.log('speed D')}> D \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the button.[/en]\\n [jp] [/jp]\"},\"ripple\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name ripple\\n@type bool\\n@description\\n [en]If true, the button will have a ripple effect when tapped.[/en]\\n [jp] [/jp]\"},\"position\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name 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]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en] If true, the button will be disabled. [/en]\\n [jp] [/jp]\"},\"onClick\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onClick\\n@type function\\n@description\\n [en] This function will be called ones the button is clicked. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Icon.json",
"content": "{\"description\":\"@original ons-icon\\n@category visual\\n@tutorial react/Reference/icon\\n@description\\n[en]\\nDisplays 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 ` element..\\n [/en]\\n[jp][/jp]\\n@example\\n { this.setState({text: event.target.value})} }\\n modifier='material'\\n placeholder='Username' />\",\"methods\":[],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the input.[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en]\\n Specifies whether the input is disabled.\\n [/en]\\n [jp] [/jp]\"},\"onChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onChange\\n@type function\\n@description\\n [en] Called when the text of the input changes.[/en]\\n [jp][/jp]\"},\"value\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name value\\n@type string\\n@description\\n [en] Content of the input.[/en]\\n [jp][/jp]\"},\"checked\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name checked\\n@type boolean\\n@description\\n [en]Set to to true if the input is checked. Only used for radio buttons and checkboxes.[/en]\\n [ja][/ja]\"},\"placeholder\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"type\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"inputId\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name inputId\\n@type string\\n@description\\n [en] Specify the \\\"id\\\" attribute of the inner ` elements [/en]\\n [jp][/jp]\"},\"float\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name float\\n@type bool\\n@description\\n [en] If this attribute is present, the placeholder will be animated in Material Design. [/en]\\n [jp][/jp]\"}}}\n"
},
{
"path": "docs/LazyList.json",
"content": "{\"description\":\"@original ons-lazy-repeat\\n@category list\\n@tutorial react/Reference/lazy-list\\n@description\\n[en] Using this component a list with millions of items can be rendered without a drop in performance.\\n It does that by \\\"lazily\\\" loading elements into the DOM when they come into view and\\n removing items from the DOM when they are not visible.\\n [/en]\\n[jp][/jp]\\n@example\\n\\n renderRow(index) {\\n return (\\n \\n {'Item ' + (index + 1)}\\n \\n );\\n }\\n\\n render() {\\n return (\\n \\n \\n \\n {'Item ' + (index + 1)}\\n \\n }\\n calculateItemHeight={() => 44}\\n />\\n
\\n \\n );\\n }\\n}\",\"methods\":[{\"name\":\"update\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"props\",\"type\":null}],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the lazy list.[/en]\\n [jp] [/jp]\"},\"length\":{\"type\":{\"name\":\"number\"},\"required\":true,\"description\":\"@name length\\n@type number\\n@description\\n [en]The length of the list.[/en]\\n [jp] [/jp]\"},\"renderRow\":{\"type\":{\"name\":\"func\"},\"required\":true,\"description\":\"@name renderRow\\n@type function\\n@description\\n [en] A function given the index of the to display row, renders it.[/en]\\n [jp] [/jp]\"},\"calculateItemHeight\":{\"type\":{\"name\":\"func\"},\"required\":true,\"description\":\"@name calculateItemHeight\\n@type function\\n@description\\n [en] A function given the index of the to row, returns the height of it.[/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/List.json",
"content": "{\"description\":\"@original ons-list\\n@category list\\n@tutorial react/Reference/list\\n@description\\n [en]\\n Component for representing a list. It takes an array called datasource and calls renderRow(row, index) for every row. Furthermore, the header and the footer can be specified with `renderRow` and `renderHeader` respectivly. [/en]\\n[jp][/jp]\\n@example\\n (\\n \\n {row}\\n Remove \\n \\n )}\\n renderFooter={this.renderFooter}\\n />\",\"methods\":[],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]\\n Specify modifier name to specify custom styles.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"dataSource\":{\"type\":{\"name\":\"array\"},\"required\":false,\"description\":\"@name dataSource\\n@type string\\n@description\\n [en]\\n Source of the list data. Should be an array.\\n [/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"[]\",\"computed\":false}},\"renderRow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderRow\\n@type function\\n@description\\n [en]\\n Function to specify the rendering function for every element in\\n in the dataSource.\\n [/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"renderHeader\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderHeader\\n@type function\\n@description\\n [en]\\n Function to specify the rendering function for the header\\n [/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"renderFooter\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderFooter\\n@type function\\n@description\\n [en]\\n Function to specify the rendering function for the footer\\n [/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}}}}\n"
},
{
"path": "docs/ListHeader.json",
"content": "{\"description\":\"@original ons-list-header\\n@category list\\n@tutorial react/Reference/list\\n@description\\n[en] Header element for list items. Must be put inside ons-list component.\\n [/en]\\n[jp][/jp]\\n@example\\n \\n Header Text }\\n renderRow={(row, idx) => (\\n {row} \\n )}\\n />\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]\\n Specify modifier name to specify custom styles. Optional.\\n [/en]\\n [jp][/jp]\"}}}\n"
},
{
"path": "docs/ListItem.json",
"content": "{\"description\":\"@original ons-list-item\\n@category list\\n@tutorial react/Reference/list\\n@description\\n [en]\\n Component that represents each item in the list. Must be put inside the `List` component. The list item is composed of three parts that are represented with the `left`, `center` and `right` classes. These classes can be used to ensure that the content of the list items is properly aligned.\\n [/en]\\n[jp][/jp]\\n@example\\n \\n Left
\\n Center
\\n Right
\\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en] The appearance of the list item.[/en]\\n [jp] [/jp]\"},\"tappable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name tappable\\n@type bool\\n@description\\n [en]\\n Specifies whether the list item is tappable.\\n [/en]\\n [jp] [/jp]\"},\"tapBackgroundColor\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name tapBackgroundColor\\n@type string\\n@description\\n [en]\\n Changes the background color when tapped. For this to work, the attribute \\\"tappable\\\" needs to be set. The default color is \\\"#d9d9d9\\\". It will display as a ripple effect on Android.\\n [/en]\\n [jp] [/jp]\"},\"lockOnDrag\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name lockOnDrag\\n@type bool\\n@description\\n [en] Prevent vertical scrolling when the user drags horizontally. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Modal.json",
"content": "{\"description\":\"@original ons-modal\\n@category dialog\\n@tutorial react/Reference/modal\\n@description\\n[en]\\n A modal component covers the entire screen. Underlying components are not\\n subject to any events while the modal component is shown.\\n\\n This component can be used to block user input while some operation is\\n running or to show some information to the user.\\n[/en]\\n[jp]\\n 画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、\\n モーダルが表示されている間はイベント通知が行われません\\n[/jp]\\n@example\\n (\\n \\n Loading ...\\n \\n )}>\\n Page content
\\n \",\"methods\":[{\"name\":\"_update\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"props\",\"type\":null},{\"name\":\"isOpen\",\"type\":null}],\"returns\":null}],\"props\":{\"animation\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'none'\",\"computed\":false},{\"value\":\"'fade'\",\"computed\":false}]},\"required\":false,\"description\":\"@property animation\\n@type {String}\\n@description\\n [en]\\n Animation name. Available animations are `\\\"slide\\\"`, `\\\"lift\\\"`, `\\\"fade\\\"` and `\\\"none\\\"`.\\n These are platform based animations. For fixed animations, add `\\\"-ios\\\"` or `\\\"-md\\\"` suffix to the animation name. E.g. `\\\"lift-ios\\\"`, `\\\"lift-md\\\"`. Defaults values are `\\\"slide-ios\\\"` and `\\\"fade-md\\\"`.\\n [/en]\",\"defaultValue\":{\"value\":\"'none'\",\"computed\":false}},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@name animationOptions\\n@type object\\n@description\\n [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]\"},\"onShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onShow\\n@type function\\n@required false\\n@description\\n [en]\\n Called Fired right after the modal is shown.\\n [/en]\"},\"onHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onHide\\n@type function\\n@required false\\n@description\\n [en]\\n Called after the modal is hidden.\\n [/en]\"},\"isOpen\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isOpen\\n@type boolean\\n@description\\n [en]When `true` the modal will show itself.[/en]\",\"defaultValue\":{\"value\":\"false\",\"computed\":false}}}}\n"
},
{
"path": "docs/Navigator.json",
"content": "{\"description\":\"@original ons-navigator\\n@category navigation\\n@tutorial react/Reference/navigator\\n@description\\n[en] This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the `renderPage` method, that takes an route and a navigator and converts it to an page. [/en]\\n[jp] どうしよう[/jp]\\n@example\\n \\n navigator.popPage()}\\n />\\n }\\n initialRoute={{\\n title: 'First Page'\\n }} />\\n }\\n }\",\"methods\":[{\"name\":\"update\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"pages\",\"type\":null},{\"name\":\"obj\",\"type\":null}],\"returns\":null},{\"name\":\"resetPage\",\"docblock\":\"@method resetPage\\n@signature resetPage(route, options = {})\\n@param {Object} route\\n [en] The route that the page should be reset to.[/en]\\n [ja] どうしよう [/ja]\\n@return {Promise}\\n [en]Promise which resolves to the revealed page.[/en]\\n [ja]明らかにしたページを解決するPromiseを返します。[/ja]\\n@description\\n [en]Resets the current page[/en]\\n [ja]どうしよう[/ja]\",\"modifiers\":[],\"params\":[{\"name\":\"route\",\"description\":\"[en] The route that the page should be reset to.[/en]\\n [ja] どうしよう [/ja]\",\"type\":{\"name\":\"Object\"}},{\"name\":\"options\"}],\"returns\":{\"description\":\"[en]Promise which resolves to the revealed page.[/en]\\n [ja]明らかにしたページを解決するPromiseを返します。[/ja]\",\"type\":{\"name\":\"Promise\"}},\"description\":null},{\"name\":\"resetPageStack\",\"docblock\":\"@method resetPageStack\\n@signature resetPageStack(route, options = {})\\n@param {Array} routes\\n [en] The routes that the navigator should be reset to.[/en]\\n [ja] どうしよう [/ja]\\n@return {Promise}\\n [en]Promise which resolves to the revealed page.[/en]\\n [ja]明らかにしたページを解決するPromiseを返します。[/ja]\\n@description\\n [en] Resets the navigator to the current page stack[/en]\\n [ja] どうしよう[/ja]\",\"modifiers\":[],\"params\":[{\"name\":\"routes\",\"description\":\"[en] The routes that the navigator should be reset to.[/en]\\n [ja] どうしよう [/ja]\",\"type\":{\"name\":\"Array\"}},{\"name\":\"options\"}],\"returns\":{\"description\":\"[en]Promise which resolves to the revealed page.[/en]\\n [ja]明らかにしたページを解決するPromiseを返します。[/ja]\",\"type\":{\"name\":\"Promise\"}},\"description\":null},{\"name\":\"pushPage\",\"docblock\":\"@method pushPage\\n@signature pushPage(route, options = {})\\n@param {Object} route\\n [en] The route that the navigator should push to.[/en]\\n [ja] どうしよう [/ja]\\n@return {Promise}\\n [en] Promise which resolves to the revealed page.[/en]\\n [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\\n@description\\n [en] Pushes a page to the page stack[/en]\\n [ja] どうしよう[/ja]\",\"modifiers\":[],\"params\":[{\"name\":\"route\",\"description\":\"[en] The route that the navigator should push to.[/en]\\n [ja] どうしよう [/ja]\",\"type\":{\"name\":\"Object\"}},{\"name\":\"options\"}],\"returns\":{\"description\":\"[en] Promise which resolves to the revealed page.[/en]\\n [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\",\"type\":{\"name\":\"Promise\"}},\"description\":null},{\"name\":\"isRunning\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null},{\"name\":\"replacePage\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"route\",\"type\":null},{\"name\":\"options\",\"type\":null}],\"returns\":null},{\"name\":\"popPage\",\"docblock\":\"@method popPage\\n@signature popPage(options = {})\\n@return {Promise}\\n [en] Promise which resolves to the revealed page.[/en]\\n [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\\n@description\\n [en] Pops a page out of the page stack[/en]\\n [ja] どうしよう[/ja]\",\"modifiers\":[],\"params\":[{\"name\":\"options\"}],\"returns\":{\"description\":\"[en] Promise which resolves to the revealed page.[/en]\\n [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\",\"type\":{\"name\":\"Promise\"}},\"description\":null},{\"name\":\"_prePop\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"event\",\"type\":null}],\"returns\":null},{\"name\":\"_postPop\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"event\",\"type\":null}],\"returns\":null},{\"name\":\"_prePush\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"event\",\"type\":null}],\"returns\":null},{\"name\":\"_postPush\",\"docblock\":null,\"modifiers\":[],\"params\":[{\"name\":\"event\",\"type\":null}],\"returns\":null}],\"props\":{\"renderPage\":{\"type\":{\"name\":\"func\"},\"required\":true,\"description\":\"@name renderPage\\n@type function\\n@required true\\n@defaultValue null\\n@description\\n [en] This function takes the current route object as a parameter and creates returns a react componen.[/en]\\n [jp] どうしよう[/jp]\"},\"initialRouteStack\":{\"type\":{\"name\":\"array\"},\"required\":false,\"description\":\"@name initialRouteStack\\n@type array\\n@required false\\n@defaultValue null\\n@description\\n [en] This array contains the initial routes from the navigator,\\n which will be used to render the initial pages in the renderPage method.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"initialRoute\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@name initialRoute\\n@type object\\n@required false\\n@defaultValue null\\n@description\\n [en] This array contains the initial route of the navigator,\\n which will be used to render the initial pages in the\\n renderPage method.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"onPrePush\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPrePush\\n@type function\\n@required false\\n@description\\n [en]Called just before a page is pushed.[/en]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"onPostPush\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPostPush\\n@type function\\n@required false\\n@description\\n [en]Called just after a page is pushed.[/en]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"onPrePop\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPrePop\\n@type function\\n@required false\\n@description\\n [en]Called just before a page is popped.[/en]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"onPostPop\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPostPop\\n@type function\\n@required false\\n@description\\n [en]Called just after a page is popped.[/en]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"animation\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@property animation\\n@type {String}\\n@description\\n [en]\\n Animation name. Available animations are `\\\"slide\\\"`, `\\\"lift\\\"`, `\\\"fade\\\"` and `\\\"none\\\"`.\\n These are platform based animations. For fixed animations, add `\\\"-ios\\\"` or `\\\"-md\\\"` suffix to the animation name. E.g. `\\\"lift-ios\\\"`, `\\\"lift-md\\\"`. Defaults values are `\\\"slide-ios\\\"` and `\\\"fade-md\\\"`.\\n [/en]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@name animationOptions\\n@type object\\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"
},
{
"path": "docs/Page.json",
"content": "{\"description\":\"@original ons-page\\n@category page\\n@tutorial react/Reference/page\\n@description\\n[en]\\n This component is handling the entire page. The content can be scrolled.\\n\\n To add fixed content that doesn't scroll with the page the `renderFixed` prop is used.\\n\\n A page toolbar can be added with the `renderToolbar` prop.\\n[/en]\\n[jp] どうしよう[/jp]\\n@example\\n ... }\\n contentStyle={{padding: 40}}>\\n Page content
\\n \",\"methods\":[],\"props\":{\"contentStyle\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@name contentStyle\\n@type Object\\n@description\\n [en]\\n Specify the style of the page content. Optional.\\n [/en]\"},\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]\\n Specify modifier name to specify custom styles. Optional.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"renderModal\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderModal\\n@type function\\n@required false\\n@defaultValue null\\n@description\\n [en] This function renders a modal that masks current screen.[/en]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"renderToolbar\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderToolbar\\n@type function\\n@required false\\n@defaultValue null\\n@description\\n [en] This function renders the toolbar of the page.[/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"renderBottomToolbar\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderBottomToolbar\\n@type function\\n@defaultValue null\\n@description\\n [en] This function renders the bottom toolbar of the page.[/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"renderFixed\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name renderFixed\\n@type function\\n@defaultValue null\\n@description\\n [en] This function renders fixed content of the page. Can be used to render `Fab` or `SpeedDial` components as well as other components that don't scroll with the page.[/en]\\n [jp] どうしよう[/jp]\",\"defaultValue\":{\"value\":\"() => null\",\"computed\":false}},\"onInit\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onInit\\n@type function\\n@required false\\n@description\\n [en]\\n \\tFired right after the page is attached.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"onShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onShow\\n@type function\\n@required false\\n@description\\n [en]\\n Called Fired right after the page is shown.\\n [/en]\\n [jp] どうしよう[/jp]\"},\"onHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onHide\\n@type function\\n@required false\\n@description\\n [en]\\n Called after the page is hidden.\\n [/en]\\n [jp] どうしよう[/jp]\"}}}\n"
},
{
"path": "docs/Popover.json",
"content": "{\"description\":\"@original ons-popover\\n@category dialog\\n@tutorial react/Reference/popover\\n@description\\n [en]\\n A component that displays a popover next to an element. The popover can be used to display extra information about a component or a tooltip.\\n Another common way to use the popover is to display a menu when a button on the screen is tapped.\\n [/en]\\n[jp][/jp]\\n@example\\n\\n this.setState({target: this.refs.btn, isOpen: true})}/>\\n this.setState({isOpen: false})}\\n getTarget={() => this.state.target} >\\n \\n
This is a popover!
\\n
Click the background to remove the popover.
\\n
\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null},{\"name\":\"show\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"getTarget\":{\"type\":{\"name\":\"func\"},\"required\":true,\"description\":\"@name getTarget\\n@type function\\n@required true\\n@description\\n [en]\\n This function should return react component or a domnode that the popover is showing on.\\n [/en]\\n [jp][/jp]\"},\"onCancel\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"isOpen\":{\"type\":{\"name\":\"bool\"},\"required\":true,\"description\":\"@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]\"},\"isCancelable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@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]\"},\"isDisabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isDisabled\\n@type bool\\n@required false\\n@description\\n [en]\\n Specifies whether the dialog is disabled.\\n [/en]\\n [jp] [/jp]\"},\"animation\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the dialog.[/en]\\n [jp] [/jp]\"},\"maskColor\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@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]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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]\"},\"onPreShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPostShow\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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]\"},\"onPreHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreHide\\n@type function\\n@required false\\n@description\\n [en]Called just before the alert dialog is hidden.[/en]\\n [jp][/jp]\"},\"onPostHide\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/ProgressBar.json",
"content": "{\"description\":\"@original ons-progress-bar\\n@category visual\\n@tutorial react/Reference/progress\\n@description\\n[en] The component is used to display a linear progress bar. It can either display a progress bar that shows the user how much of a task has been completed. In the case where the percentage is not known it can be used to display an animated progress bar so the user can see that an operation is in progress. [/en]\\n[jp][/jp]\\n@example\\n` element.\\n It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.\\n [/en]\\n[jp] どうしよう[/jp]\\n@example\\n\\n return (\\n \\n {\\n (this.state.pullHookState === 'initial') ?\\n \\n :\\n (this.state.pullHookState === 'preaction') ?\\n \\n \\n :\\n \\n );\",\"methods\":[],\"props\":{\"onChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onChange\\n@type function\\n@required false\\n@description\\n [en]Called when the pull hook inner state is changed. The state can be either \\\"initial\\\", \\\"preaction\\\" or \\\"action\\\"[/en]\\n [jp] [/jp]\"},\"onLoad\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onLoad\\n@type function\\n@required false\\n@description\\n [en]Called when the pull hook is in the `action` state[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en] When set to true, the pull hook will be disabled.[/en]\\n [jp] [/jp]\"},\"height\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@name height\\n@type number\\n@description\\n [en] The height of the pull hook in pixels. The default value is 64.[/en]\\n [jp] [/jp]\"},\"thresholdHeight\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@name thresholdHeight\\n@type number\\n@description\\n [en] The threshold height of the pull hook in pixels. The default value is 96.[/en]\\n [jp] [/jp]\"},\"fixedContent\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name fixedContent\\n@type number\\n@description\\n [en] If set to true, the content of the page will not move when pulling.[/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Range.json",
"content": "{\"description\":\"@original ons-range\\n@category form\\n@tutorial react/Reference/range\\n@description\\n[en]\\n Range input component.\\n[/en]\\n[jp][/jp]\\n@example\\n this.setState({value: parseInt(event.target.value)})}\\n />\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the progress indicator.[/en]\\n [jp] [/jp]\"},\"onChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onChange\\n@type function\\n@description\\n [en] Called when the value of the input changes.[/en]\\n [jp][/jp]\"},\"value\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@name value\\n@type number\\n@description\\n [en]\\n Current value of the element.\\n [/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en] If true, the element is disabled. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Ripple.json",
"content": "{\"description\":\"@original ons-ripple\\n@category visual\\n@tutorial react/Reference/ripple\\n@description\\n[en]\\n Adds a Material Design \\\"ripple\\\" effect to an element.\\n[/en]\\n[jp][/jp]\\n@example\\n \\n
\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"color\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name color\\n@type string\\n@required false\\n@description\\n [en]Color of the ripple effect.[/en]\\n [jp] [/jp]\"},\"background\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name background\\n@type string\\n@required false\\n@description\\n [en]Color of the background.[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en]\\n Specifies whether the button is disabled.\\n [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Row.json",
"content": "{\"description\":\"@original ons-row\\n@category grid\\n@description\\n[en]\\nRepresents a row in the grid system. Use with `Col` to layout components.\\n[/en]\\n[jp][/jp]\\n\\n
\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"verticalAlign\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'top'\",\"computed\":false},{\"value\":\"'bottom'\",\"computed\":false},{\"value\":\"'center'\",\"computed\":false}]},\"required\":false,\"description\":\"@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"
},
{
"path": "docs/SimpleWrapper.json",
"content": "{\"description\":\"\",\"methods\":[]}\n"
},
{
"path": "docs/SpeedDial.json",
"content": "{\"description\":\"@original ons-speed-dial\\n@category control\\n@tutorial react/Reference/speed-dial\\n@description\\n[en] Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page.\\n The Speed dial looks like a `Fab` element but will expand a menu when tapped.\\n [/en]\\n[jp][/jp]\\n@example\\n console.log('test1')} position='left bottom'>\\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 \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the speed dial.[/en]\\n [jp] [/jp]\"},\"position\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name position\\n@type string\\n@description\\n [en]Specify the vertical and horizontal position of the component.\\n I.e. to display it in the top right corner specify \\\"right top\\\".\\n Choose from \\\"right\\\", \\\"left\\\", \\\"top\\\" and \\\"bottom\\\".\\n[/en]\\n [jp] [/jp]\"},\"direction\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'up'\",\"computed\":false},{\"value\":\"'down'\",\"computed\":false},{\"value\":\"'left'\",\"computed\":false},{\"value\":\"'right'\",\"computed\":false}]},\"required\":false,\"description\":\"@name direction\\n@type string\\n@description\\n [en]Specify the direction the items are displayed. Possible values are \\\"up\\\", \\\"down\\\", \\\"left\\\" and \\\"right\\\".[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type string\\n@description\\n [en]Specify if button should be disabled.[/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/SpeedDialItem.json",
"content": "{\"description\":\"@original ons-speed-dial-item\\n@category control\\n@tutorial react/Reference/speed-dial\\n@description\\n[en] This component displays the child elements of the Material Design Speed dial component. [/en]\\n[jp][/jp]\\n@example\\n console.log('test1')} position='left bottom'>\\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 \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the button.[/en]\\n [jp] [/jp]\"},\"onClick\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onClick\\n@type function\\n@description\\n [en] This function will be called ones the button is clicked. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Splitter.json",
"content": "{\"description\":\"@original ons-splitter\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout.\\n\\n It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.\\n [/en]\\n[jp] どうしよう[/jp]\\n@example\\n \\n \\n Page Left \\n \\n \\n Page Content \\n \\n \\n Page Right \\n \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/SplitterContent.json",
"content": "{\"description\":\"@original ons-splitter-content\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] The SplitterContent element is used as a child element of Splitter.\\n It contains the main content of the page while SplitterSide contains the list.\\n [/en]\\n[jp][/jp]\\n@example\\n \\n \\n Page Left \\n \\n \\n Page Content \\n \\n \\n Page Right \\n \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/SplitterSide.json",
"content": "{\"description\":\"@original ons-splitter-side\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] The SplitterContent element is used as a child element of Splitter.\\n It contains the main content of the page while SplitterSide contains the list.\\n [/en]\\n[jp][/jp]\\n@example\\n \\n \\n Page Left \\n \\n \\n Page Content \\n \\n \\n Page Right \\n \\n \",\"methods\":[],\"props\":{\"collapse\":{\"type\":{\"name\":\"union\",\"value\":[{\"name\":\"bool\"},{\"name\":\"string\"}]},\"required\":false,\"description\":\"@name collapse\\n@type bool\\n@description\\n [en] Specify the collapse behavior. Valid values are `\\\"portrait\\\"`, `\\\"landscape\\\"` or a media query.\\n The strings `\\\"portrait\\\"` and `\\\"landscape\\\"` means the view will collapse when device is in landscape or portrait orientation.\\n If the value is not defined, the view always be in `\\\"collapse\\\"` mode.\\n[/en]\\n [jp] [/jp]\"},\"isSwipeable\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isSwipeable\\n@type bool\\n@description\\n [en]Ennable swipe interaction on collapse mode.[/en]\\n [jp] [/jp]\"},\"isOpen\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name isOpen\\n@type bool\\n@description\\n [en]Specifies whether the menu is open.[/en]\\n [jp] [/jp]\"},\"onOpen\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onOpen\\n@type function\\n@description\\n [en]Called after the menu is opened.[/en]\\n [jp] [/jp]\"},\"onClose\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onClose\\n@type function\\n@description\\n [en]Called after the menu is closed.[/en]\\n [jp] [/jp]\"},\"side\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'left'\",\"computed\":false},{\"value\":\"'right'\",\"computed\":false}]},\"required\":false,\"description\":\"@name side\\n@type string\\n@description\\n [en]Specify which side of the screen the SplitterSide element is located. Possible values are `\\\"left\\\"` and `\\\"right\\\"`.[/en]\\n [jp] [/jp]\"},\"swipeTargetWidth\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@name swipeTargetWidth\\n@type number\\n@description\\n [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \\\"20%\\\" for percentage).[/en]\\n [jp] [/jp]\"},\"width\":{\"type\":{\"name\":\"union\",\"value\":[{\"name\":\"number\"},{\"name\":\"string\"}]},\"required\":false,\"description\":\"@name width\\n@type number\\n@description\\n [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \\\"20%\\\" for percentage).[/en]\\n [jp] [/jp]\"},\"animation\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name animation\\n@type string\\n@required false\\n@description\\n [en]Specify the animation. Use one of `\\\"overlay\\\"`, and `\\\"default\\\"`.[/en]\\n [jp] [/jp]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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]\"},\"openThreshold\":{\"type\":{\"name\":\"number\"},\"required\":false,\"description\":\"@name openThreshold\\n@type object\\n@required false\\n@description\\n [en] Specify how much the menu needs to be swiped before opening. A value between `0` and `1`. [/en]\\n [jp] [/jp]\"},\"mode\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'collapse'\",\"computed\":false},{\"value\":\"'split'\",\"computed\":false}]},\"required\":false,\"description\":\"@name mode\\n@type string\\n@required false\\n@description\\n [en] Current mode. Possible values are `\\\"collapse\\\"` or `\\\"split\\\"`. This attribute is read only. [/en]\\n [jp] [/jp]\"},\"onPreOpen\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreOpen\\n@type string\\n@description\\n [en] Called before the menu opens. [/en]\\n [jp] [/jp]\"},\"onPreClose\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreClose\\n@type string\\n@description\\n [en] Called before the menu closes. [/en]\\n [jp] [/jp]\"},\"onModeChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onModeChange\\n@type string\\n@description\\n [en] Called after the component's mode changes. [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Switch.json",
"content": "{\"description\":\"@original ons-switch\\n@category form\\n@tutorial react/Reference/switch\\n@description\\n[en] Switch component. The switch can be toggled both by dragging and tapping.\\n Will automatically displays a Material Design switch on Android devices.\\n [/en]\\n[jp][/jp]\\n@example\\n` elements.[/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Tab.json",
"content": "{\"description\":\"@original ons-tab\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Represents a tab inside tab bar.\\n [/en]\\n[jp][/jp]\\n@example\\n\\n Home\\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/TabActive.json",
"content": "{\"description\":\"@original ons-tab-active\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Tab element for showing shown when the tab is active [/en]\\n[jp][/jp]\\n@example\\n\\n \\n HOME\\n \\n \\n home\\n \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/TabInactive.json",
"content": "{\"description\":\"@original ons-tab-inactive\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Tab element for showing shown when the tab is inactive [/en]\\n[jp][/jp]\\n@example\\n\\n \\n HOME\\n \\n \\n home\\n \\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/Tabbar.json",
"content": "{\"description\":\"@original ons-tabbar\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Component to display a tabbar on either the top or the bottom of a page.\\nTo define the tabs and the content the property renderTabs need to be implemented, that returns an array of tabs and their content. See the example for specifics. [/en]* [jp][/jp]\\n@example\\n\\n \\n this.setState(index)}\\n onPostChange={() => console.log('postChange')}\\n onReactive={() => console.log('postChange')}\\n position='bottom'\\n index={this.state.index}\\n renderTabs={(activeIndex, tabbar) => [\\n {\\n content: \",\"methods\":[],\"props\":{\"index\":{\"type\":{\"name\":\"number\"},\"required\":true,\"description\":\"@name index\\n@type number\\n@required\\n@description\\n [en] The index of the tab to highlight.[/en]\\n [jp] [/jp]\",\"defaultValue\":{\"value\":\"0\",\"computed\":false}},\"renderTabs\":{\"type\":{\"name\":\"func\"},\"required\":true,\"description\":\"@name renderTabs\\n@type function\\n@description\\n [en] The index of the first tab to show.[/en]\\n [jp] [/jp]\"},\"position\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name position\\n@type string\\n@description\\n [en] Tabbar's position. Available values are `\\\"bottom\\\"` and `\\\"top\\\"`. Use `\\\"auto\\\"` to choose position depending on platform (iOS bottom, Android top). [/en]\\n [jp] [/jp]\"},\"animation\":{\"type\":{\"name\":\"enum\",\"value\":[{\"value\":\"'none'\",\"computed\":false},{\"value\":\"'slide'\",\"computed\":false},{\"value\":\"'fade'\",\"computed\":false}]},\"required\":false,\"description\":\"@name animation\\n@type string\\n@description\\n [en] Animation name. Available values are `\\\"none\\\"`, `\\\"slide\\\"` and `\\\"fade\\\"`. Default is `\\\"none\\\"`. [/en]\\n [jp] [/jp]\"},\"animationOptions\":{\"type\":{\"name\":\"object\"},\"required\":false,\"description\":\"@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]\"},\"onPreChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPreChange\\n@type function\\n@description\\n [en]Called just before the tab is changed.[/en]\\n [jp] [/jp]\"},\"onPostChange\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onPostChange\\n@type function\\n@description\\n [en]Called just after the tab is changed.[/en]\\n [jp] [/jp]\"},\"onReactive\":{\"type\":{\"name\":\"func\"},\"required\":false,\"description\":\"@name onReactive\\n@type function\\n@description\\n [en]Called if the already open tab is tapped again.[/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "docs/Toolbar.json",
"content": "{\"description\":\"@original ons-toolbar\\n@category page\\n@tutorial react/Reference/page\\n@description\\n[en]Toolbar component that can be used with navigation. Left, center and right container can be specified by class names. This component will automatically displays as a Material Design toolbar when running on Android devices.[/en]\\n[jp] どうしよう[/jp]\\n@example\\n\\n\\n \\n \\n \\n Back\\n \\n
\\n \\n Title\\n
\\n \\n \\n \\n
\\n }\\n/>\",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@description\\n [en]\\n Specify modifier name to specify custom styles. Optional.\\n [/en]\\n [jp] どうしよう[/jp]\"}}}\n"
},
{
"path": "docs/ToolbarButton.json",
"content": "{\"description\":\"@original ons-toolbar-button\\n@category page\\n@tutorial react/Reference/page\\n@description\\n [en]\\n Button component for the Toolbar. Using this component gives a nice default style.\\n\\n\\n [/en]\\n[jp][/jp]\\n@example\\n\\n \\n Back
\\n Input
\\n \\n Add \\n
\\n \\n }>\\n Page Content\\n \",\"methods\":[{\"name\":\"_getDomNodeName\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}],\"props\":{\"modifier\":{\"type\":{\"name\":\"string\"},\"required\":false,\"description\":\"@name modifier\\n@type string\\n@required false\\n@description\\n [en]The appearance of the button.[/en]\\n [jp] [/jp]\"},\"disabled\":{\"type\":{\"name\":\"bool\"},\"required\":false,\"description\":\"@name disabled\\n@type bool\\n@description\\n [en]\\n Indicates whether the button is disabled.\\n [/en]\\n [jp] [/jp]\"}}}\n"
},
{
"path": "githubRelease.js",
"content": "var prompt = require('prompt');\nvar GitHubApi = require('github');\nvar colors = require('colors');\n\ncolors.setTheme({ warn: 'yellow', error: 'red', success: 'green' });\n\nprompt.start();\n\nvar github = new GitHubApi({version: '3.0.0'});\n\nvar properties = [\n {\n description: 'GitHub username',\n name: 'username'\n },\n {\n description: 'GitHub password',\n name: 'password',\n hidden: true\n }\n];\n\nvar login = (callback) => {\n prompt.get(properties, (err, result) => {\n github.authenticate({\n type: 'basic',\n username: result.username,\n password: result.password\n });\n\n github.repos.getLatestRelease({\n user: 'OnsenUI',\n repo: 'react-onsenui'\n }, (err, res) => {\n if (err != null) {\n console.log('Wrong Username/Password'.warn);\n return login(callback);\n } else {\n callback(res);\n }\n });\n });\n};\n\nvar data = login((res) => {\n var tagname = res.tag_name;\n var nodeJSON = require('./package.json');\n var version = nodeJSON.version;\n\n if (tagname == version) {\n console.log('Error: Version has already been released, update package.json first'.error);\n } else {\n github.repos.createRelease( {\n user: 'OnsenUI',\n repo: 'react-onsenui',\n tag_name: version\n }, function(err, war) {\n if (err) {\n console.log('An error occurred'.error);\n } else {\n console.log(('New version ' + version + ' released').success);\n }\n });\n }\n});\n"
},
{
"path": "index.html",
"content": "\n\n\n Onsen UI React Demo \n\n \n\n\n\n \n
\n \n\n\n"
},
{
"path": "karma.conf.js",
"content": "var webpack = require('webpack');\n\nmodule.exports = function(config) {\n config.set({\n browsers: [ 'Chrome' ], // run in Chrome\n singleRun: true, // just run once by default\n frameworks: [ 'mocha', 'chai' ], // use the mocha test framework\n files: [\n 'node_modules/onsenui/css/onsenui.css',\n 'node_modules/onsenui/css/onsen-css-components.css',\n 'tests.webpack.js' // just load this file\n ],\n preprocessors: {\n 'tests.webpack.js': [ 'webpack', 'sourcemap' ] // preprocess with webpack and our sourcemap loader\n },\n reporters: [ 'dots' ], // report results in this format\n webpack: { // kind of a copy of your webpack config\n devtool: 'inline-source-map', // just do inline source maps instead of the default\n\n module: {\n loaders: [\n { test: /\\.js$/, loader: 'babel-loader',\n exclude: [/node_modules/, /onsenui\\.js/],\n query: { presets: ['es2015', 'react'] }\n }\n ]\n }\n },\n webpackServer: {\n noInfo: true // please don't spam the console when running in karma!\n }\n });\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-onsenui\",\n \"version\": \"1.0.3\",\n \"description\": \"Onsen UI - React Components for Hybrid Cordova/PhoneGap Apps with Material Design and iOS UI components\",\n \"main\": \"dist/react-onsenui.js\",\n \"scripts\": {\n \"build\": \"npm run lint && rollup -c\",\n \"prepublish\": \"npm run build\",\n \"commit-dist\": \"git commit -m 'Update generated files.' dist docs && git push origin master\",\n \"postpublish\": \"npm run gen-docs && npm run commit-dist && npm run release-github\",\n \"release-github\": \"node githubRelease.js\",\n \"lint\": \"eslint --ext .js,.jsx src\",\n \"lint-fix\": \"eslint --ext .js,.jsx src --fix\",\n \"dev\": \"webpack-dev-server --progress --host 0.0.0.0\",\n \"test\": \"karma start\",\n \"gen-docs\": \"node ./docgen.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/OnsenUI/react-onsenui.git\"\n },\n \"keywords\": [\n \"react\",\n \"react-component\",\n \"phonegap\",\n \"cordova\",\n \"hybrid\",\n \"app\",\n \"mobile\",\n \"ui\",\n \"onsen\",\n \"onsenui\"\n ],\n \"author\": \"Onsen UI Team \",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/OnsenUI/react-onsenui/issues\"\n },\n \"homepage\": \"https://onsen.io/v2/\",\n \"devDependencies\": {\n \"babel-core\": \"^6.17.0\",\n \"babel-loader\": \"^6.2.5\",\n \"babel-preset-es2015\": \"^6.16.0\",\n \"babel-preset-es2015-rollup\": \"^1.2.0\",\n \"babel-preset-react\": \"^6.16.0\",\n \"babel-preset-stage-2\": \"^6.17.0\",\n \"chai\": \"^3.5.0\",\n \"colors\": \"^1.1.2\",\n \"css-loader\": \"^0.25.0\",\n \"eslint\": \"^3.7.1\",\n \"eslint-plugin-promise\": \"^3.0.0\",\n \"eslint-plugin-react\": \"^6.4.1\",\n \"eslint-plugin-standard\": \"^2.0.1\",\n \"file-loader\": \"^0.9.0\",\n \"filter-files\": \"^0.4.0\",\n \"github\": \"^3.1.1\",\n \"karma\": \"^1.3.0\",\n \"karma-chai\": \"^0.1.0\",\n \"karma-chrome-launcher\": \"^2.0.0\",\n \"karma-mocha\": \"^1.2.0\",\n \"karma-sourcemap-loader\": \"^0.3.7\",\n \"karma-webpack\": \"^1.8.0\",\n \"mocha\": \"^3.1.2\",\n \"onsenui\": \"^2.0.3\",\n \"prompt\": \"^1.0.0\",\n \"react\": \"^15.3.2\",\n \"react-docgen\": \"^2.11.0\",\n \"react-dom\": \"^15.3.2\",\n \"react-hot-loader\": \"^1.3.0\",\n \"rollup\": \"^0.36.3\",\n \"rollup-plugin-babel\": \"^2.6.1\",\n \"rollup-plugin-commonjs\": \"^5.0.4\",\n \"rollup-plugin-node-resolve\": \"^2.0.0\",\n \"rollup-plugin-replace\": \"^1.1.1\",\n \"style-loader\": \"^0.13.1\",\n \"url-loader\": \"^0.5.7\",\n \"webpack\": \"^1.13.2\",\n \"webpack-dev-server\": \"^1.16.2\"\n },\n \"peerDependencies\": {\n \"react\": \"^15.3.2\",\n \"react-dom\": \"^15.3.2\",\n \"onsenui\": \"^2.0.3\"\n }\n}\n"
},
{
"path": "rollup.config.js",
"content": "import {readFileSync} from 'fs';\nimport babel from 'rollup-plugin-babel';\nimport nodeResolve from 'rollup-plugin-node-resolve';\nimport replace from 'rollup-plugin-replace';\nimport commonjs from 'rollup-plugin-commonjs';\n\nconst pkg = JSON.parse(readFileSync('package.json', 'utf-8' ));\n\nexport default {\n entry: 'src/index.js',\n dest: 'dist/react-onsenui.js',\n plugins: [\n babel({presets: ['es2015-rollup', 'react', 'stage-2']}),\n nodeResolve(),\n commonjs({\n 'node_modules/react-dom/server.js': ['ReactDOMServer']\n }),\n replace({\n 'process.env.NODE_ENV': JSON.stringify('production')\n }),\n babel({\n externalHelpers: true, presets: ['es2015-rollup'], plugins: ['transform-react-jsx', 'transform-object-rest-spread']\n })\n ],\n external: [\n 'react',\n 'react-dom/server',\n 'react-dom',\n 'onsenui'\n ],\n globals: {\n 'react': 'React',\n 'react-dom': 'ReactDOM',\n 'react-dom/server': 'ReactDOMServer',\n 'onsenui': 'ons'\n },\n format: 'umd',\n moduleName: 'Ons',\n banner: `/*! ${pkg.name} v${pkg.version} - ${new Date()} */`,\n sourceMap: true\n};\n"
},
{
"path": "scripts/react-docgen.js",
"content": "var Module = require('module');\nvar originalRequire = Module.prototype.require;\n\nModule.prototype.require = function(){\n if (arguments[0].indexOf('isReactComponentClass') > -1) {\n return function() {\n return true;\n }\n }\n\n return originalRequire.apply(this, arguments);\n};\n\nrequire('../node_modules/.bin/react-docgen');\n"
},
{
"path": "src/components/AlertDialog.jsx",
"content": "import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\n\n/**\n * @original ons-alert-dialog\n * @category dialog\n * @tutorial react/Reference/dialog\n * @description\n * [en]\n * Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform.\n * [/en]\n * [jp][/jp]\n * @example\n \n Warning!
\n \n An error has occurred!\n
\n \n \n Cancel\n \n \n Ok\n \n
\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"
},
{
"path": "src/components/BackButton.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n/**\n * @original ons-back-button\n * @category navigation\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"
},
{
"path": "src/components/BaseDialog.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Util from './Util.js';\n\nclass BaseDialog extends React.Component {\n show() {\n this.node.firstChild.show();\n }\n\n updateClasses() {\n var node = this.node.firstChild;\n\n if (this.props.className) {\n if (this.lastClass) {\n node.className = node.className.replace(this.lastClass, '');\n }\n\n this.lastClass = ' ' + this.props.className;\n node.className += this.lastClass;\n }\n }\n\n hide() {\n this.node.firstChild.hide();\n }\n\n componentDidMount() {\n this.node = document.createElement('div');\n document.body.appendChild(this.node);\n\n this.node.addEventListener('dialog-cancel', this.props.onCancel);\n this.node.addEventListener('preshow', this.props.onPreShow);\n this.node.addEventListener('postshow', this.props.onPostShow);\n this.node.addEventListener('prehide', this.props.onPreHide);\n this.node.addEventListener('posthide', this.props.onPostHide);\n\n this.renderPortal(this.props, false);\n }\n\n componentWillReceiveProps(newProps) {\n this.renderPortal(newProps, this.props.isOpen);\n }\n\n componentWillUnmount() {\n this.node.removeEventListener('cancel', this.props.onCancel);\n this.node.removeEventListener('preshow', this.props.onPreShow);\n this.node.removeEventListener('postshow', this.props.onPostShow);\n this.node.removeEventListener('prehide', this.props.onPreHide);\n this.node.removeEventListener('posthide', this.props.onPostHide);\n\n ReactDOM.unmountComponentAtNode(this.node);\n document.body.removeChild(this.node);\n }\n\n _update(isShown) {\n if (this.props.isOpen) {\n if (!isShown) {\n this.show();\n }\n } else {\n this.hide();\n }\n this.updateClasses();\n }\n\n _getDomNodeName() {\n throw new Error('_getDomNodeName is not implemented');\n }\n\n renderPortal(props, isShown) {\n var {...newProps} = props;\n\n Util.convert(newProps, 'isCancelable', {newName: 'cancelable'});\n Util.convert(newProps, 'isDisabled', {newName: 'disabled'});\n Util.convert(newProps, 'maskColor', {newName: 'mask-color'});\n Util.convert(newProps, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});\n\n var element = React.createElement(this._getDomNodeName(), newProps);\n ReactDOM.render(element, this.node, this._update.bind(this, isShown));\n }\n\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return React.DOM.noscript();\n }\n}\n\nBaseDialog.propTypes = {\n onCancel: React.PropTypes.func,\n isOpen: React.PropTypes.bool.isRequired,\n isCancelable: React.PropTypes.bool,\n isDisabled: React.PropTypes.bool,\n animation: React.PropTypes.string,\n maskColor: React.PropTypes.string,\n animationOptions: React.PropTypes.object,\n onPreShow: React.PropTypes.func,\n onPostShow: React.PropTypes.func,\n onPreHide: React.PropTypes.func,\n onPostHide: React.PropTypes.func\n};\n\nBaseDialog.defaultProps = {\n isCancelable: true,\n isDisabled: false\n};\n\nexport default BaseDialog;\n"
},
{
"path": "src/components/BasicComponent.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport ons from 'onsenui';\n\nclass BasicComponent extends React.Component {\n constructor(...args) {\n super(...args);\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 (!ons) {\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 ons._autoStyle.prepare(node);\n }\n\n componentDidMount() {\n this.updateClasses();\n }\n\n componentDidUpdate() {\n this.updateClasses();\n }\n}\n\nexport default BasicComponent;\n"
},
{
"path": "src/components/BottomToolbar.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-bottom-toolbar\n * @category page\n * @description\n * [en]Toolbar component that is positioned at the bottom of the page.[/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]Specify modifier name to specify custom styles. Optional.[/en]\n * [jp][/jp]\n */\n modifier: React.PropTypes.string\n};\n\nexport default BottomToolbar;\n"
},
{
"path": "src/components/Button.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-button\n * @category form\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 * Tap Me\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"
},
{
"path": "src/components/Carousel.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport {findDOMNode} 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 const node = findDOMNode(this);\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 const node = findDOMNode(this);\n\n if (this.props.index !== props.index) {\n node.setActiveIndex(props.index, props.animationOptions);\n }\n }\n\n componentDidUpdate(props) {\n const node = findDOMNode(this);\n\n if (this.props.children.length !== props.children.length) {\n node.refresh();\n }\n }\n\n componentWillUnmount() {\n const node = 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 const {...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.oneOfType([React.PropTypes.string, React.PropTypes.number]),\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.oneOfType([React.PropTypes.string, React.PropTypes.number]),\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"
},
{
"path": "src/components/CarouselItem.jsx",
"content": "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"
},
{
"path": "src/components/Col.jsx",
"content": "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 */\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"
},
{
"path": "src/components/Dialog.jsx",
"content": "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 Page Content\n \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"
},
{
"path": "src/components/Fab.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-fab\n * @category form\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 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 * @name 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.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 Fab;\n"
},
{
"path": "src/components/Icon.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @original ons-icon\n * @category visual\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 ` 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' && node.value !== props.value) {\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 elements [/en]\n * [jp][/jp]\n */\n inputId: React.PropTypes.string,\n\n /**\n * @name float\n * @type bool\n * @description\n * [en] If this attribute is present, the placeholder will be animated in Material Design. [/en]\n * [jp][/jp]\n */\n float: React.PropTypes.bool\n};\n\nexport default Input;\n"
},
{
"path": "src/components/LazyList.jsx",
"content": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\n\n/**\n * @original ons-lazy-repeat\n * @category list\n * @tutorial react/Reference/lazy-list\n * @description\n * [en] Using this component a list with millions of items can be rendered without a drop in performance.\n * It does that by \"lazily\" loading elements into the DOM when they come into view and\n * removing items from the DOM when they are not visible.\n [/en]\n * [jp][/jp]\n * @example\n *\n renderRow(index) {\n return (\n \n {'Item ' + (index + 1)}\n \n );\n }\n\n render() {\n return (\n \n \n \n {'Item ' + (index + 1)}\n \n }\n calculateItemHeight={() => 44}\n />\n
\n \n );\n }\n}\n */\nclass LazyList extends BasicComponent {\n constructor(...args) {\n super(...args);\n this.state = {children: []};\n this.update = this.update.bind(this);\n }\n\n update(props) {\n var self = this;\n\n this.refs.lazyRepeat.delegate = {\n calculateItemHeight: function(index) {\n return props.calculateItemHeight(index);\n },\n _render: function(items, newHeight) {\n var createElement = function({index: index, top: top}) {\n return props.renderRow(index);\n };\n\n var el = items.map(createElement);\n self.setState({children: el, height: newHeight},\n () => {\n var list = this.refs.list;\n // ignore i=0 \n (\n \n {row}\n Remove \n \n )}\n renderFooter={this.renderFooter}\n />\n */\nclass List extends BasicComponent {\n render() {\n var pages = this.props.dataSource.map((data, idx) => this.props.renderRow(data, idx));\n\n return (\n \n {this.props.renderHeader()}\n {pages}\n {this.props.children}\n {this.props.renderFooter()}\n \n );\n }\n}\n\nList.propTypes = {\n /**\n * @name modifier\n * @type string\n * @description\n * [en]\n * Specify modifier name to specify custom styles.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name dataSource\n * @type string\n * @description\n * [en]\n * Source of the list data. Should be an array.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n dataSource: React.PropTypes.array,\n\n /**\n * @name renderRow\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for every element in\n * in the dataSource.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderRow: React.PropTypes.func,\n\n /**\n * @name renderHeader\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for the header\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderHeader: React.PropTypes.func,\n\n /**\n * @name renderFooter\n * @type function\n * @description\n * [en]\n * Function to specify the rendering function for the footer\n * [/en]\n * [jp] どうしよう[/jp]\n */\n renderFooter: React.PropTypes.func\n};\n\nList.defaultProps = {\n dataSource: [],\n renderRow: () => null,\n renderHeader: () => null,\n renderFooter: () => null\n};\n\nexport default List;\n"
},
{
"path": "src/components/ListHeader.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-list-header\n * @category list\n * @tutorial react/Reference/list\n * @description\n * [en] Header element for list items. Must be put inside ons-list component.\n [/en]\n * [jp][/jp]\n * @example\n \n Header Text }\n renderRow={(row, idx) => (\n {row} \n )}\n />\n */\nclass ListHeader extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-list-header';\n }\n};\n\nListHeader.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 ListHeader;\n"
},
{
"path": "src/components/ListItem.jsx",
"content": "import ReactDOM from 'react-dom';\nimport React from 'react';\nimport SimpleWrapper from './SimpleWrapper.jsx';\nimport Util from './Util.js';\n\n/**\n * @original ons-list-item\n * @category list\n * @tutorial react/Reference/list\n * @description\n * [en]\n * Component that represents each item in the list. Must be put inside the `List` component. The list item is composed of three parts that are represented with the `left`, `center` and `right` classes. These classes can be used to ensure that the content of the list items is properly aligned.\n * [/en]\n * [jp][/jp]\n * @example\n \n * Left
\n * Center
\n * Right
\n * \n */\nclass ListItem extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-list-item';\n }\n\n componentDidMount() {\n super.componentDidMount();\n this.node = ReactDOM.findDOMNode(this);\n }\n\n componentDidUpdate() {\n super.componentDidUpdate();\n this.node._compile();\n }\n\n render() {\n var {...others} = this.props;\n\n Util.convert(others, 'tappable');\n Util.convert(others, 'tapBackgroundColor', {newName: 'tap-background-color'});\n Util.convert(others, 'lockOnDrag', {newName: 'lock-on-drag'});\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n};\n\nListItem.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en] The appearance of the list item.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name tappable\n * @type bool\n * @description\n * [en]\n * Specifies whether the list item is tappable.\n * [/en]\n * [jp] [/jp]\n */\n tappable: React.PropTypes.bool,\n\n /**\n * @name tapBackgroundColor\n * @type string\n * @description\n * [en]\n * Changes the background color when tapped. For this to work, the attribute \"tappable\" needs to be set. The default color is \"#d9d9d9\". It will display as a ripple effect on Android.\n * [/en]\n * [jp] [/jp]\n */\n tapBackgroundColor: React.PropTypes.string,\n\n /**\n * @name lockOnDrag\n * @type bool\n * @description\n * [en] Prevent vertical scrolling when the user drags horizontally. [/en]\n * [jp] [/jp]\n */\n lockOnDrag: React.PropTypes.bool\n};\n\nexport default ListItem;\n"
},
{
"path": "src/components/Modal.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\n\n/**\n * @original ons-modal\n * @category dialog\n * @tutorial react/Reference/modal\n * @description\n * [en]\n * A modal component covers the entire screen. Underlying components are not\n * subject to any events while the modal component is shown.\n *\n * This component can be used to block user input while some operation is\n * running or to show some information to the user.\n * [/en]\n * [jp]\n * 画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、\n * モーダルが表示されている間はイベント通知が行われません\n * [/jp]\n * @example\n (\n \n Loading ...\n \n )}>\n Page content
\n \n */\nclass Modal extends BasicComponent {\n constructor(...args) {\n super(...args);\n this.node = null;\n }\n\n componentDidMount() {\n super.componentDidMount();\n this.node = ReactDOM.findDOMNode(this);\n\n this._update(this.props, false);\n }\n\n componentWillReceiveProps(nextProps) {\n this._update(nextProps, this.props.isOpen);\n }\n\n _update(props, isOpen) {\n const animationOptions = {\n animation: props.animation,\n animationOptions: props.animationOptions\n };\n\n if (props.isOpen && !isOpen) {\n this.node.show(animationOptions).then(() => props.onShow && props.onShow());\n } else if (!props.isOpen && isOpen) {\n this.node.hide(animationOptions).then(() => props.onHide && props.onHide());\n }\n }\n\n componentWillUnmount() {\n this.node = null;\n }\n\n render() {\n const {...others} = this.props;\n return (\n \n {this.props.children}\n \n );\n }\n};\n\nModal.propTypes = {\n /**\n * @name animation\n * @type {String}\n * @description\n * [en]\n * Animation name. Available animations are `\"fade\"` and `\"none\"`.\n * [/en]\n */\n animation: React.PropTypes.oneOf(['none', 'fade']),\n\n /**\n * @name animationOptions\n * @type object\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 */\n animationOptions: React.PropTypes.object,\n\n /**\n * @name onShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called Fired right after the modal is shown.\n * [/en]\n */\n onShow: React.PropTypes.func,\n\n /**\n * @name onHide\n * @type function\n * @required false\n * @description\n * [en]\n * Called after the modal is hidden.\n * [/en]\n */\n onHide: React.PropTypes.func,\n\n /**\n * @name isOpen\n * @type boolean\n * @description\n * [en]When `true` the modal will show itself.[/en]\n */\n isOpen: React.PropTypes.bool\n};\n\nModal.defaultProps = {\n isOpen: false,\n animation: 'none'\n};\n\nexport default Modal;\n"
},
{
"path": "src/components/Navigator.jsx",
"content": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @original ons-navigator\n * @category navigation\n * @tutorial react/Reference/navigator\n * @description\n * [en] This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the `renderPage` method, that takes an route and a navigator and converts it to an page. [/en]\n * [jp] どうしよう[/jp]\n * @example\n \n navigator.popPage()}\n />\n }\n initialRoute={{\n title: 'First Page'\n }} />\n }\n }\n */\nclass Navigator extends BasicComponent {\n constructor(...args) {\n super(...args);\n this.pages = [];\n this.state = { };\n this._prePush = this._prePush.bind(this);\n this._postPush = this._postPush.bind(this);\n this._prePop = this._prePop.bind(this);\n this._postPop = this._postPop.bind(this);\n }\n\n update(pages, obj) {\n this.pages = pages || [];\n return new Promise((resolve) => {\n this.forceUpdate(resolve);\n });\n }\n\n /**\n * @method resetPage\n * @signature resetPage(route, options = {})\n * @param {Object} route\n * [en] The route that the page should be reset to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the revealed page.[/en]\n * [ja]明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en]Resets the current page[/en]\n * [ja]どうしよう[/ja]\n */\n resetPage(route, options = {}) {\n return this.resetPageStack([route], options);\n }\n\n /**\n * @method resetPageStack\n * @signature resetPageStack(route, options = {})\n * @param {Array} routes\n * [en] The routes that the navigator should be reset to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the revealed page.[/en]\n * [ja]明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Resets the navigator to the current page stack[/en]\n * [ja] どうしよう[/ja]\n */\n resetPageStack(routes, options = {}) {\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n return new Promise((resolve) => {\n var lastRoute = routes[routes.length - 1];\n var newPage = this.props.renderPage(lastRoute, this);\n this.routes.push(lastRoute);\n\n const update = () => {\n this.pages.push(newPage);\n return new Promise((resolve) => this.forceUpdate(resolve));\n };\n\n this.refs.navi._pushPage(options, update).then(() => {\n this.routes = routes;\n\n var renderPage = (route) => {\n return this.props.renderPage(route, this);\n };\n\n this.pages = routes.map(renderPage);\n this.update(this.pages).then(resolve);\n });\n });\n }\n\n /**\n * @method pushPage\n * @signature pushPage(route, options = {})\n * @param {Object} route\n * [en] The route that the navigator should push to.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en] Promise which resolves to the revealed page.[/en]\n * [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Pushes a page to the page stack[/en]\n * [ja] どうしよう[/ja]\n */\n pushPage(route, options = {}) {\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n return new Promise((resolve) => {\n const update = () => {\n return new Promise((resolve) => {\n this.pages.push(this.props.renderPage(route, this));\n this.forceUpdate(resolve);\n });\n };\n\n this.routes.push(route);\n this.refs.navi\n ._pushPage(\n options,\n update\n )\n .then(resolve)\n .catch((error) => {\n this.routes.pop();\n this.pages.pop();\n throw error;\n });\n });\n }\n\n isRunning() {\n return this.refs.navi._isRunning;\n }\n\n /*\n * @method replacePage\n * @signature replacePage(route, [options])\n * @param {Object} route\n * [en] The route that the navigator should replace the top page with.[/en]\n * [ja] どうしよう [/ja]\n * @return {Promise}\n * [en]Promise which resolves to the new page.[/en]\n * [ja]新しいページを解決するPromiseを返します。[/ja]\n * @description\n * [en]Replaces the current top page with the specified one. Extends `pushPage()` parameters.[/en]\n * [ja]現在表示中のページをを指定したページに置き換えます。[/ja]\n */\n replacePage(route, options = {}) {\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n this.pushPage(route, options).then(() => {\n const pos = this.pages.length - 2;\n this.pages.splice(pos, 1);\n this.routes.splice(pos, 1);\n this.refs.navi.topPage.updateBackButton(this.pages.length > 1);\n this.forceUpdate();\n });\n }\n\n /**\n * @method popPage\n * @signature popPage(options = {})\n * @return {Promise}\n * [en] Promise which resolves to the revealed page.[/en]\n * [ja] 明らかにしたページを解決するPromiseを返します。[/ja]\n * @description\n * [en] Pops a page out of the page stack[/en]\n * [ja] どうしよう[/ja]\n */\n popPage(options = {}) {\n if (this.isRunning()) {\n return Promise.reject('Navigator is already running animation.');\n }\n\n this.routesBeforePop = this.routes.slice();\n\n const update = () => {\n return new Promise((resolve) => {\n this.pages.pop();\n this.routes.pop();\n\n this.forceUpdate(resolve);\n });\n };\n\n return this.refs.navi._popPage(options, update);\n }\n\n _prePop(event) {\n event.routes = {\n poppingRoute: this.routesBeforePop[this.routesBeforePop.length - 1],\n routes: this.routesBeforePop\n };\n\n this.props.onPrePop(event);\n }\n\n _postPop(event) {\n event.routes = {\n poppedRoute: this.routesBeforePop[this.routesBeforePop.length - 1],\n routes: this.routesBeforePop.slice(0, this.routesBeforePop.length - 1)\n };\n\n this.props.onPostPop(event);\n }\n\n _prePush(event) {\n event.routes = {\n pushingRoute: this.routes[this.routes.length - 1],\n routes: this.routes.slice(0, this.routes.length - 1)\n };\n\n this.props.onPrePush(event);\n }\n\n _postPush(event) {\n event.routes = {\n pushedRoute: this.routes[this.routes.length - 1],\n routes: this.routes\n };\n\n this.props.onPostPush(event);\n }\n\n componentDidMount() {\n const node = this.refs.navi;\n node.popPage = this.popPage.bind(this);\n\n node.addEventListener('prepush', this._prePush);\n node.addEventListener('postpush', this._postPush);\n node.addEventListener('prepop', this._prePop);\n node.addEventListener('postpop', this._postPop);\n\n if (this.props.initialRoute && this.props.initialRouteStack) {\n throw new Error('In Navigator either initalRoute or initalRoutes can be set');\n }\n\n if (this.props.initialRoute) {\n this.routes = [this.props.initialRoute];\n } else if (this.props.initialRouteStack) {\n this.routes = this.props.initialRouteStack;\n } else {\n this.routes = [];\n }\n\n this.pages = this.routes.map(\n (route) => this.props.renderPage(route, this)\n );\n this.forceUpdate();\n }\n\n componentWillUnmount() {\n const node = this.refs.navi;\n node.removeEventListener('prepush', this.props.onPrePush);\n node.removeEventListener('postpush', this.props.onPostPush);\n node.removeEventListener('prepop', this.props.onPrePop);\n node.removeEventListener('postpop', this.props.onPostPop);\n }\n\n render() {\n const {...others} = this.props;\n Util.convert(others, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});\n const pages = this.routes ? this.routes.map((route) => this.props.renderPage(route, this)) : null;\n\n return (\n \n {pages}\n \n );\n }\n}\n\nNavigator.propTypes = {\n /**\n * @name renderPage\n * @type function\n * @required true\n * @defaultValue null\n * @description\n * [en] This function takes the current route object as a parameter and creates returns a React component.[/en]\n * [jp] どうしよう[/jp]\n */\n renderPage: React.PropTypes.func.isRequired,\n /**\n * @name initialRouteStack\n * @type array\n * @required false\n * @defaultValue null\n * @description\n * [en] This array contains the initial routes from the Navigator,\n * which will be used to render the initial pages in the `renderPage` method.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n initialRouteStack: React.PropTypes.array,\n\n /**\n * @name initialRoute\n * @type object\n * @required false\n * @defaultValue null\n * @description\n * [en] This array contains the initial route of the navigator,\n * which will be used to render the initial pages in the\n * renderPage method.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n initialRoute: React.PropTypes.object,\n\n /**\n * @name onPrePush\n * @type function\n * @required false\n * @description\n * [en]Called just before a page is pushed.[/en]\n */\n onPrePush: React.PropTypes.func,\n\n /**\n * @name onPostPush\n * @type function\n * @required false\n * @description\n * [en]Called just after a page is pushed.[/en]\n */\n onPostPush: React.PropTypes.func,\n\n /**\n * @name onPrePop\n * @type function\n * @required false\n * @description\n * [en]Called just before a page is popped.[/en]\n */\n onPrePop: React.PropTypes.func,\n\n /**\n * @name onPostPop\n * @type function\n * @required false\n * @description\n * [en]Called just after a page is popped.[/en]\n */\n onPostPop: React.PropTypes.func,\n\n /**\n * @name animation\n * @type {String}\n * @description\n * [en]\n * Animation name. Available animations are `\"slide\"`, `\"lift\"`, `\"fade\"` and `\"none\"`.\n * These are platform based animations. For fixed animations, add `\"-ios\"` or `\"-md\"` suffix to the animation name. E.g. `\"lift-ios\"`, `\"lift-md\"`. Defaults values are `\"slide-ios\"` and `\"fade-md\"`.\n * [/en]\n */\n animation: React.PropTypes.string,\n\n /**\n * @name animationOptions\n * @type object\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\nconst NOOP = () => null;\n\nNavigator.defaultProps = {\n onPostPush: NOOP,\n onPrePush: NOOP,\n onPrePop: NOOP,\n onPostPop: NOOP\n};\n\nexport default Navigator;\n"
},
{
"path": "src/components/Page.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\n/**\n * @original ons-page\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]\n * This component is handling the entire page. The content can be scrolled.\n *\n * To add fixed content that doesn't scroll with the page the `renderFixed` prop is used.\n *\n * A page toolbar can be added with the `renderToolbar` prop.\n * [/en]\n * [jp] どうしよう[/jp]\n * @example\n ... }\n contentStyle={{padding: 40}}>\n Page content
\n \n */\nclass Page extends BasicComponent {\n\n componentDidMount() {\n super.componentDidMount();\n var node = ReactDOM.findDOMNode(this);\n node.addEventListener('init', this.props.onInit);\n node.addEventListener('show', this.props.onShow);\n node.addEventListener('hide', this.props.onHide);\n }\n\n componentWillUnmount() {\n var node = ReactDOM.findDOMNode(this);\n node.removeEventListener('init', this.props.onInit);\n node.removeEventListener('show', this.props.onShow);\n node.removeEventListener('hide', this.props.onHide);\n }\n\n render() {\n const toolbar = this.props.renderToolbar(this);\n const bottomToolbar = this.props.renderBottomToolbar(this);\n const modal = this.props.renderModal(this);\n const fixed = this.props.renderFixed(this);\n\n const {contentStyle, ...props} = this.props;\n\n return \n {toolbar}\n
\n \n {this.props.children}\n
\n \n {modal}\n
\n {fixed}\n {bottomToolbar}\n ;\n }\n};\n\nPage.propTypes = {\n\n /**\n * @name contentStyle\n * @type Object\n * @description\n * [en]\n * Specify the style of the page content. Optional.\n * [/en]\n */\n contentStyle: React.PropTypes.object,\n\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 /**\n * @name renderModal\n * @type function\n * @required false\n * @defaultValue null\n * @description\n * [en] This function renders a modal that masks current screen.[/en]\n */\n renderModal: React.PropTypes.func,\n\n /**\n * @name renderToolbar\n * @type function\n * @required false\n * @defaultValue null\n * @description\n * [en] This function renders the toolbar of the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderToolbar: React.PropTypes.func,\n\n /**\n * @name renderBottomToolbar\n * @type function\n * @defaultValue null\n * @description\n * [en] This function renders the bottom toolbar of the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderBottomToolbar: React.PropTypes.func,\n\n /**\n * @name renderFixed\n * @type function\n * @defaultValue null\n * @description\n * [en] This function renders fixed content of the page. Can be used to render `Fab` or `SpeedDial` components as well as other components that don't scroll with the page.[/en]\n * [jp] どうしよう[/jp]\n */\n renderFixed: React.PropTypes.func,\n\n /**\n * @name onInit\n * @type function\n * @required false\n * @description\n * [en]\n * \tFired right after the page is attached.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onInit: React.PropTypes.func,\n\n /**\n * @name onShow\n * @type function\n * @required false\n * @description\n * [en]\n * Called Fired right after the page is shown.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onShow: React.PropTypes.func,\n\n /**\n * @name onHide\n * @type function\n * @required false\n * @description\n * [en]\n * Called after the page is hidden.\n * [/en]\n * [jp] どうしよう[/jp]\n */\n onHide: React.PropTypes.func\n};\n\nconst NOOP = () => null;\n\nPage.defaultProps = {\n renderToolbar: NOOP,\n renderBottomToolbar: NOOP,\n renderModal: NOOP,\n renderFixed: NOOP\n};\n\nexport default Page;\n"
},
{
"path": "src/components/Popover.jsx",
"content": "import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n/**\n * @original ons-popover\n * @category dialog\n * @tutorial react/Reference/popover\n * @description\n * [en]\n * A component that displays a popover next to an element. The popover can be used to display extra information about a component or a tooltip.\n * Another common way to use the popover is to display a menu when a button on the screen is tapped.\n * [/en]\n * [jp][/jp]\n * @example\n * \n * this.setState({target: this.refs.btn, isOpen: true})}/>\n this.setState({isOpen: false})}\n getTarget={() => this.state.target} >\n \n
This is a popover!
\n
Click the background to remove the popover.
\n
\n */\nclass Popover extends BaseDialog {\n _getDomNodeName() {\n return 'ons-popover';\n }\n\n show() {\n var target = this.props.getTarget();\n target = ReactDOM.findDOMNode(target);\n return this.node.firstChild.show(target);\n }\n}\n\nPopover.propTypes = {\n /**\n * @name getTarget\n * @type function\n * @required true\n * @description\n * [en]\n * This function should return react component or a domnode that the popover is showing on.\n * [/en]\n * [jp][/jp]\n */\n getTarget: React.PropTypes.func.isRequired,\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 Popover;\n"
},
{
"path": "src/components/ProgressBar.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @original ons-progress-bar\n * @category visual\n * @tutorial react/Reference/progress\n * @description\n * [en] The component is used to display a linear progress bar. It can either display a progress bar that shows the user how much of a task has been completed. In the case where the percentage is not known it can be used to display an animated progress bar so the user can see that an operation is in progress. [/en]\n * [jp][/jp]\n * @example\n *` element.\n * It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.\n [/en]\n * [jp] どうしよう[/jp]\n * @example\n\n return (\n \n {\n (this.state.pullHookState === 'initial') ?\n \n :\n (this.state.pullHookState === 'preaction') ?\n \n \n :\n \n );\n */\nclass PullHook extends BasicComponent {\n componentDidMount() {\n super.componentDidMount();\n var node = ReactDOM.findDOMNode(this);\n node.addEventListener('changestate', this.props.onChange);\n this.refs.pullHook.onAction = this.props.onLoad;\n }\n\n componentWillUnmount() {\n var node = ReactDOM.findDOMNode(this);\n node.removeEventListener('changestate', this.props.onChange);\n }\n\n render() {\n var {...others} = this.props;\n\n ['disabled'].forEach((el) => {\n Util.convert(others, el);\n });\n\n Util.convert(others, 'height', {fun: Util.sizeConverter});\n Util.convert(others, 'thresholdHeight', {fun: Util.sizeConverter, newName: 'threshold-height'});\n Util.convert(others, 'fixedContent', {newName: 'fixed-content'});\n\n return this.setState({value: parseInt(event.target.value)})}\n * />\n */\nclass Range extends SimpleWrapper {\n\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 const node = ReactDOM.findDOMNode(this);\n node.value = props.value;\n }\n\n _getDomNodeName() {\n return 'ons-range';\n }\n};\n\nRange.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the progress indicator.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name onChange\n * @type function\n * @description\n * [en] Called when the value of the input changes.[/en]\n * [jp][/jp]\n */\n onChange: React.PropTypes.func,\n\n /**\n * @name value\n * @type number\n * @description\n * [en]\n * Current value of the element.\n * [/en]\n * [jp] [/jp]\n */\n value: React.PropTypes.number,\n\n /**\n * @name disabled\n * @type bool\n * @description\n * [en] If true, the element is disabled. [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\nexport default Range;\n"
},
{
"path": "src/components/Ripple.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-ripple\n * @category visual\n * @tutorial react/Reference/ripple\n * @description\n * [en]\n * Adds a Material Design \"ripple\" effect to an element.\n * [/en]\n * [jp][/jp]\n * @example\n \n
\n */\nclass Ripple extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-ripple';\n }\n};\n\nRipple.propTypes = {\n /**\n * @name color\n * @type string\n * @required false\n * @description\n * [en]Color of the ripple effect.[/en]\n * [jp] [/jp]\n */\n color: React.PropTypes.string,\n\n /**\n * @name background\n * @type string\n * @required false\n * @description\n * [en]Color of the background.[/en]\n * [jp] [/jp]\n */\n background: 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\nexport default Ripple;\n"
},
{
"path": "src/components/Row.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @original ons-row\n * @category grid\n * @description\n * [en]\n * Represents a row in the grid system. Use with `Col` to layout components.\n * [/en]\n * [jp][/jp]\n * \n *
\n */\nclass Row extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-row';\n }\n\n render() {\n var {...others} = this.props;\n\n Util.convert(others, 'verticalAlign', {newName: 'vertical-align'});\n\n return React.createElement(this._getDomNodeName(), others, this.props.children);\n }\n\n};\n\nRow.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\nexport default Row;\n"
},
{
"path": "src/components/SimpleWrapper.jsx",
"content": "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"
},
{
"path": "src/components/SpeedDial.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-speed-dial\n * @category control\n * @tutorial react/Reference/speed-dial\n * @description\n * [en] Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page.\n * The Speed dial looks like a `Fab` element but will expand a menu when tapped.\n [/en]\n * [jp][/jp]\n * @example\n * console.log('test1')} position='left bottom'>\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 SpeedDial extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-speed-dial';\n }\n};\n\nSpeedDial.propTypes = {\n /**\n * @name modifier\n * @type string\n * @required false\n * @description\n * [en]The appearance of the speed dial.[/en]\n * [jp] [/jp]\n */\n modifier: React.PropTypes.string,\n\n /**\n * @name position\n * @type string\n * @description\n * [en]Specify the vertical and horizontal position of the component.\n * I.e. to display it in the top right corner specify \"right top\".\n * Choose from \"right\", \"left\", \"top\" and \"bottom\".\n[/en]\n * [jp] [/jp]\n */\n position: React.PropTypes.string,\n\n /**\n * @name direction\n * @type string\n * @description\n * [en]Specify the direction the items are displayed. Possible values are \"up\", \"down\", \"left\" and \"right\".[/en]\n * [jp] [/jp]\n */\n direction: React.PropTypes.oneOf(['up', 'down', 'left', 'right']),\n\n /**\n * @name disabled\n * @type string\n * @description\n * [en]Specify if button should be disabled.[/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\nexport default SpeedDial;\n"
},
{
"path": "src/components/SpeedDialItem.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport ReactDOM from 'react-dom';\nimport React from 'react';\n\n/**\n * @original ons-speed-dial-item\n * @category control\n * @tutorial react/Reference/speed-dial\n * @description\n * [en] This component displays the child elements of the Material Design Speed dial component. [/en]\n * [jp][/jp]\n * @example\n * console.log('test1')} position='left bottom'>\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 SpeedDialItem extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-speed-dial-item';\n }\n\n componentDidMount() {\n super.componentDidMount();\n var node = ReactDOM.findDOMNode(this);\n node.addEventListener('click', this.props.onClick);\n }\n\n componentWillUnmount() {\n var node = ReactDOM.findDOMNode(this);\n node.removeEventListener('click', this.props.onClick);\n }\n};\n\nSpeedDialItem.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 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 SpeedDialItem;\n"
},
{
"path": "src/components/Splitter.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-splitter\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout.\n *\n * It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.\n [/en]\n * [jp] どうしよう[/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\n\nclass Splitter extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-splitter';\n }\n};\n\nexport default Splitter;\n"
},
{
"path": "src/components/SplitterContent.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\n/**\n * @original ons-splitter-content\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] The SplitterContent element is used as a child element of Splitter.\n * It contains the main content of the page while SplitterSide contains the list.\n [/en]\n * [jp][/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\nclass SplitterContent extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-splitter-content';\n }\n};\n\nexport default SplitterContent;\n"
},
{
"path": "src/components/SplitterSide.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @original ons-splitter-side\n * @category menu\n * @tutorial react/Reference/splitter\n * @description\n * [en] The SplitterContent element is used as a child element of Splitter.\n * It contains the main content of the page while SplitterSide contains the list.\n [/en]\n * [jp][/jp]\n * @example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n \n */\n\nclass SplitterSide extends BasicComponent {\n render() {\n var {...props} = this.props;\n\n props.swipeable = this.props.isSwipeable ? 'swipeable' : null;\n\n if (this.props.isCollapsed) {\n console.error('The property `isCollapsed` is deprecated, please use `collapse`, see https://onsen.io/v2/docs/react/SplitterSide.html.');\n delete props['isCollapsed'];\n }\n\n if (!props.collapse) props.collapse = null;\n\n if (typeof props.collapse === 'boolean') {\n if (props.collapse) {\n props.collapse = 'collapse';\n } else {\n props.collapse = 'false';\n }\n }\n\n Util.convert(props, 'width', {fun: Util.sizeConverter});\n Util.convert(props, 'animation');\n Util.convert(props, 'side');\n Util.convert(props, 'mode');\n Util.convert(props, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});\n Util.convert(props, 'openThreshold', {newName: 'open-threshold'});\n Util.convert(props, 'swipeTargetWidth', {fun: Util.sizeConverter, newName: 'swipe-target-width'});\n\n return (\n \n {this.props.children}\n \n );\n }\n\n componentDidMount() {\n super.componentDidMount();\n this.node = ReactDOM.findDOMNode(this);\n this.componentWillReceiveProps(this.props);\n\n this.node.addEventListener('postopen', this.props.onOpen);\n this.node.addEventListener('postclose', this.props.onClose);\n this.node.addEventListener('preopen', this.props.onPreOpen);\n this.node.addEventListener('preclose', this.props.onPreClose);\n this.node.addEventListener('modechange', this.props.onModeChange);\n }\n\n componentWillUnmount() {\n this.node.removeEventListener('postopen', this.props.onOpen);\n this.node.removeEventListener('postclose', this.props.onClose);\n this.node.removeEventListener('preopen', this.props.onPreOpen);\n this.node.removeEventListener('preclose', this.props.onPreClose);\n this.node.removeEventListener('modechange', this.props.onModeChange);\n }\n\n componentWillReceiveProps(newProps) {\n if (newProps.isOpen) {\n this.node.open();\n } else {\n this.node.close();\n }\n }\n}\n\nSplitterSide.propTypes = {\n /**\n * @name collapse\n * @type bool\n * @description\n * [en] Specify the collapse behavior. Valid values are `\"portrait\"`, `\"landscape\"` or a media query.\n * The strings `\"portrait\"` and `\"landscape\"` means the view will collapse when device is in landscape or portrait orientation.\n * If the value is not defined, the view always be in `\"collapse\"` mode.\n[/en]\n * [jp] [/jp]\n */\n collapse: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.string]),\n\n /**\n * @name isSwipeable\n * @type bool\n * @description\n * [en]Ennable swipe interaction on collapse mode.[/en]\n * [jp] [/jp]\n */\n isSwipeable: React.PropTypes.bool,\n\n /**\n * @name isOpen\n * @type bool\n * @description\n * [en]Specifies whether the menu is open.[/en]\n * [jp] [/jp]\n */\n isOpen: React.PropTypes.bool,\n\n /**\n * @name onOpen\n * @type function\n * @description\n * [en]Called after the menu is opened.[/en]\n * [jp] [/jp]\n */\n onOpen: React.PropTypes.func,\n\n /**\n * @name onClose\n * @type function\n * @description\n * [en]Called after the menu is closed.[/en]\n * [jp] [/jp]\n */\n onClose: React.PropTypes.func,\n\n /**\n * @name side\n * @type string\n * @description\n * [en]Specify which side of the screen the SplitterSide element is located. Possible values are `\"left\"` and `\"right\"`.[/en]\n * [jp] [/jp]\n */\n side: React.PropTypes.oneOf(['left', 'right']),\n\n /**\n * @name swipeTargetWidth\n * @type number\n * @description\n * [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \"20%\" for percentage).[/en]\n * [jp] [/jp]\n */\n swipeTargetWidth: React.PropTypes.number,\n\n /**\n * @name width\n * @type number\n * @description\n * [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. \"20%\" for percentage).[/en]\n * [jp] [/jp]\n */\n width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),\n\n /**\n * @name animation\n * @type string\n * @required false\n * @description\n * [en]Specify the animation. Use one of `\"overlay\"`, and `\"default\"`.[/en]\n * [jp] [/jp]\n */\n animation: 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 openThreshold\n * @type object\n * @required false\n * @description\n * [en] Specify how much the menu needs to be swiped before opening. A value between `0` and `1`. [/en]\n * [jp] [/jp]\n */\n openThreshold: React.PropTypes.number,\n\n /**\n * @name mode\n * @type string\n * @required false\n * @description\n * [en] Current mode. Possible values are `\"collapse\"` or `\"split\"`. This attribute is read only. [/en]\n * [jp] [/jp]\n */\n mode: React.PropTypes.oneOf(['collapse', 'split']),\n\n /**\n * @name onPreOpen\n * @type string\n * @description\n * [en] Called before the menu opens. [/en]\n * [jp] [/jp]\n */\n onPreOpen: React.PropTypes.func,\n\n /**\n * @name onPreClose\n * @type string\n * @description\n * [en] Called before the menu closes. [/en]\n * [jp] [/jp]\n */\n onPreClose: React.PropTypes.func,\n\n /**\n * @name onModeChange\n * @type string\n * @description\n * [en] Called after the component's mode changes. [/en]\n * [jp] [/jp]\n */\n onModeChange: React.PropTypes.func\n};\n\nexport default SplitterSide;\n"
},
{
"path": "src/components/Switch.jsx",
"content": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @original ons-switch\n * @category form\n * @tutorial react/Reference/switch\n * @description\n * [en] Switch component. The switch can be toggled both by dragging and tapping.\n * Will automatically displays a Material Design switch on Android devices.\n [/en]\n * [jp][/jp]\n * @example\n * ` elements.[/en]\n * [jp] [/jp]\n */\n inputId: React.PropTypes.string\n};\n\nexport default Switch;\n"
},
{
"path": "src/components/Tab.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Represents a tab inside tab bar.\n [/en]\n * [jp][/jp]\n * @example\n * \n * Home\n * \n */\nclass Tab extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-tab';\n }\n};\n\nexport default Tab;\n"
},
{
"path": "src/components/TabActive.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab-active\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Tab element for showing shown when the tab is active [/en]\n * [jp][/jp]\n * @example\n * \n * \n HOME\n \n \n home\n \n \n */\nclass TabActive extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-tab-active';\n }\n};\n\nexport default TabActive;\n"
},
{
"path": "src/components/TabInactive.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab-inactive\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Tab element for showing shown when the tab is inactive [/en]\n * [jp][/jp]\n * @example\n * \n * \n HOME\n \n \n home\n \n \n */\nclass TabInactive extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-tab-inactive';\n }\n};\n\nexport default TabInactive;\n"
},
{
"path": "src/components/Tabbar.jsx",
"content": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @original ons-tabbar\n * @category tabbar\n * @tutorial react/Reference/tabbar\n * @description\n * [en] Component to display a tabbar on either the top or the bottom of a page.\n * To define the tabs and the content the property renderTabs need to be implemented, that returns an array of tabs and their content. See the example for specifics. [/en]* [jp][/jp]\n * @example\n\n \n this.setState(index)}\n onPostChange={() => console.log('postChange')}\n onReactive={() => console.log('postChange')}\n position='bottom'\n index={this.state.index}\n renderTabs={(activeIndex, tabbar) => [\n {\n content: \n */\n\nclass Tabbar extends BasicComponent {\n\n componentDidMount() {\n super.componentDidMount();\n const node = this.refs.tabbar;\n node.addEventListener('prechange', this.props.onPreChange);\n node.addEventListener('postchange', this.props.onPostChange);\n node.addEventListener('reactive', this.props.onReactive);\n\n setTimeout(() => {\n node.setActiveTab(this.props.index);\n }, 0);\n }\n\n componentWillUnmount() {\n const node = this.refs.tabbar;\n node.removeEventListener('prechange', this.props.onPreChange);\n node.removeEventListener('postchange', this.props.onPostChange);\n node.removeEventListener('reactive', this.props.onReactive);\n }\n\n componentDidUpdate(prevProps) {\n super.componentDidUpdate(prevProps);\n if (prevProps.index !== this.props.index) {\n this.refs.tabbar.setActiveTab(this.props.index);\n }\n }\n\n render() {\n const tabs = this.props.renderTabs(this.props.index, this);\n\n if (!this.tabPages) {\n this.tabPages = tabs.map((tab) => tab.content);\n } else {\n this.tabPages[this.props.index] = tabs[this.props.index].content;\n }\n\n var {...others} = this.props;\n\n ['animation'].forEach((el) => {\n Util.convert(others, el);\n });\n\n Util.convert(others, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});\n\n return (\n \n \n {this.tabPages}\n
\n \n {tabs.map((tab) => tab.tab)}\n
\n \n );\n }\n}\n\nTabbar.propTypes = {\n /**\n * @name index\n * @type number\n * @required\n * @description\n * [en] The index of the tab to highlight.[/en]\n * [jp] [/jp]\n */\n index: React.PropTypes.number.isRequired,\n\n /**\n * @name renderTabs\n * @type function\n * @description\n * [en] The index of the first tab to show.[/en]\n * [jp] [/jp]\n */\n renderTabs: React.PropTypes.func.isRequired,\n\n /**\n * @name position\n * @type string\n * @description\n * [en] Tabbar's position. Available values are `\"bottom\"` and `\"top\"`. Use `\"auto\"` to choose position depending on platform (iOS bottom, Android top). [/en]\n * [jp] [/jp]\n */\n position: React.PropTypes.string,\n\n /**\n * @name animation\n * @type string\n * @description\n * [en] Animation name. Available values are `\"none\"`, `\"slide\"` and `\"fade\"`. Default is `\"none\"`. [/en]\n * [jp] [/jp]\n */\n animation: React.PropTypes.oneOf(['none', 'slide', 'fade']),\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 onPreChange\n * @type function\n * @description\n * [en]Called just before the tab is changed.[/en]\n * [jp] [/jp]\n */\n onPreChange: React.PropTypes.func,\n\n /**\n * @name onPostChange\n * @type function\n * @description\n * [en]Called just after the tab is changed.[/en]\n * [jp] [/jp]\n */\n onPostChange: React.PropTypes.func,\n\n /**\n * @name onReactive\n * @type function\n * @description\n * [en]Called if the already open tab is tapped again.[/en]\n * [jp] [/jp]\n */\n onReactive: React.PropTypes.func\n};\n\nTabbar.defaultProps = {\n index: 0\n};\n\nexport default Tabbar;\n"
},
{
"path": "src/components/Toolbar.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-toolbar\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]Toolbar component that can be used with navigation. Left, center and right container can be specified by class names. This component will automatically displays as a Material Design toolbar when running on Android devices.[/en]\n * [jp] どうしよう[/jp]\n * @example\n *\n\n \n \n \n Back\n \n
\n \n Title\n
\n \n \n \n
\n }\n/>\n */\nclass Toolbar extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-toolbar';\n }\n};\n\nToolbar.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 Toolbar;\n"
},
{
"path": "src/components/ToolbarButton.jsx",
"content": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-toolbar-button\n * @category page\n * @tutorial react/Reference/page\n * @description\n * [en]\n * Button component for the Toolbar. Using this component gives a nice default style.\n *\n *\n * [/en]\n * [jp][/jp]\n * @example\n * \n \n Back
\n Input
\n \n Add \n
\n \n }>\n Page Content\n \n */\nclass ToolbarButton extends SimpleWrapper {\n _getDomNodeName() {\n return 'ons-toolbar-button';\n }\n};\n\nToolbarButton.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 * Indicates whether the button is disabled.\n * [/en]\n * [jp] [/jp]\n */\n disabled: React.PropTypes.bool\n};\n\nexport default ToolbarButton;\n"
},
{
"path": "src/components/Util.js",
"content": "export default {\n sizeConverter(item) {\n if (typeof (item) === 'number') {\n return `${item}px`;\n } else {\n return item;\n }\n },\n\n numberConverter(item) {\n return `${item}px`;\n },\n\n animationOptionsConverter(options) {\n var keys = Object.keys(options);\n var innerString = keys.map((key) => key + ': \"' + options[key] + '\"');\n return '{' + innerString.join(',') + '}';\n },\n\n convert(dict, name, additionalDict = {}) {\n const fun = additionalDict.fun ? additionalDict.fun : (x) => x;\n const newName = additionalDict.newName ? additionalDict.newName : name;\n\n var val = dict[name];\n if (val) {\n if (newName !== name) {\n delete dict[name];\n }\n dict[newName] = fun(val);\n } else {\n dict[newName] = null;\n }\n return dict;\n }\n};\n"
},
{
"path": "src/index.js",
"content": "import AlertDialog from './components/AlertDialog.jsx';\nimport BackButton from './components/BackButton.jsx';\nimport BottomToolbar from './components/BottomToolbar.jsx';\nimport Button from './components/Button.jsx';\nimport Carousel from './components/Carousel.jsx';\nimport CarouselItem from './components/CarouselItem.jsx';\nimport Col from './components/Col.jsx';\nimport Dialog from './components/Dialog.jsx';\nimport Fab from './components/Fab.jsx';\nimport Icon from './components/Icon.jsx';\nimport Input from './components/Input.jsx';\nimport LazyList from './components/LazyList.jsx';\nimport List from './components/List.jsx';\nimport ListHeader from './components/ListHeader.jsx';\nimport ListItem from './components/ListItem.jsx';\nimport Navigator from './components/Navigator.jsx';\nimport Modal from './components/Modal.jsx';\nimport Page from './components/Page.jsx';\nimport Popover from './components/Popover.jsx';\nimport ProgressBar from './components/ProgressBar.jsx';\nimport ProgressCircular from './components/ProgressCircular.jsx';\nimport PullHook from './components/PullHook.jsx';\nimport Range from './components/Range.jsx';\nimport Ripple from './components/Ripple.jsx';\nimport Row from './components/Row.jsx';\nimport SpeedDial from './components/SpeedDial.jsx';\nimport SpeedDialItem from './components/SpeedDialItem.jsx';\nimport Splitter from './components/Splitter.jsx';\nimport SplitterContent from './components/SplitterContent.jsx';\nimport SplitterSide from './components/SplitterSide.jsx';\nimport Switch from './components/Switch.jsx';\nimport Tab from './components/Tab.jsx';\nimport TabActive from './components/TabActive.jsx';\nimport TabInactive from './components/TabInactive.jsx';\nimport Tabbar from './components/Tabbar.jsx';\nimport Toolbar from './components/Toolbar.jsx';\nimport ToolbarButton from './components/ToolbarButton.jsx';\n\nexport {\n AlertDialog,\n BackButton,\n BottomToolbar,\n Button,\n Carousel,\n CarouselItem,\n Col,\n Dialog,\n Fab,\n Icon,\n Input,\n LazyList,\n List,\n ListHeader,\n ListItem,\n Navigator,\n Modal,\n Page,\n Popover,\n ProgressBar,\n ProgressCircular,\n PullHook,\n Range,\n Ripple,\n Row,\n SpeedDial,\n SpeedDialItem,\n Splitter,\n SplitterContent,\n SplitterSide,\n Switch,\n Tab,\n TabActive,\n TabInactive,\n Tabbar,\n Toolbar,\n ToolbarButton\n};\n"
},
{
"path": "test/backButton-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BackButton} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('BackButon', function() {\n rendersToComponent(\n \n
}\n calculateItemHeight={() => 45}\n />\n \n\n );\n var node = ReactDOM.findDOMNode(root);\n assert.isNotNull(node);\n assert.equal(node.nodeName, 'ONS-PAGE');\n assert.equal(node.children[1].firstChild.nodeName, 'ONS-LIST');\n });\n});\n"
},
{
"path": "test/list-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {List} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\nimport rendersToComponent from './testUtil.js';\n\ndescribe('List', function() {\n rendersToComponent(\n
} />,\n 'ons-list'\n );\n});\n\ndescribe('List without dataSource attributes', function() {\n rendersToComponent(\n
,\n 'ons-list'\n );\n});\n"
},
{
"path": "test/listHeader-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ListHeader} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\nimport rendersToComponent from './testUtil.js';\n\ndescribe('ListHeader', function() {\n rendersToComponent(\n
} />,\n 'ons-list-item'\n );\n});\n"
},
{
"path": "test/modal-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Modal} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('Modal', function() {\n rendersToComponent(\n Hello ,\n 'ons-modal'\n );\n});\n"
},
{
"path": "test/page-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Page} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('Page', function() {\n rendersToComponent(\n Hello ,\n 'ons-page'\n );\n});\n"
},
{
"path": "test/progressBar-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ProgressBar} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('ProgressBar', function() {\n rendersToComponent(\n |
,\n 'ons-row'\n );\n});\n"
},
{
"path": "test/speedDial-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SpeedDial} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('SpeedDial', function() {\n rendersToComponent(\n [] }\n />,\n 'ons-tabbar'\n );\n});\n"
},
{
"path": "test/testUtil.js",
"content": "/* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nexport default (component, name) => {\n it(`renders to <${name}>`, () => {\n var root = TestUtils.renderIntoDocument(component);\n var node = ReactDOM.findDOMNode(root);\n assert.isNotNull(node);\n assert.equal(node.nodeName, name.toUpperCase());\n });\n};\n\n"
},
{
"path": "test/todo",
"content": "../src/components/SimpleWrapper.jsx\n../src/components/Popover.jsx\n../src/components/Navigator.jsx\n../src/components/AlertDialog.jsx\n../src/components/BaseDialog.jsx\n../src/components/Dialog.jsx\n../src/components/BasicComponent.jsx\n"
},
{
"path": "test/toolbar-test.js",
"content": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Toolbar} from '../dist/react-onsenui.js';\nimport TestUtils from 'react/lib/ReactTestUtils';\n\nimport rendersToComponent from './testUtil.js';\n\ndescribe('Toolbar', function() {\n rendersToComponent(\n