From 1fc52449f1b75b66525cfd8ce843796b7ea11063 Mon Sep 17 00:00:00 2001 From: Andreas Argelius Date: Thu, 15 Sep 2016 01:47:00 +0900 Subject: [PATCH] Update generated files. --- dist/react-onsenui.js | 8171 ++++++++++++++++++------------------ dist/react-onsenui.js.map | 2 +- docs/BackButton.json | 2 +- docs/BottomToolbar.json | 2 +- docs/Button.json | 2 +- docs/Fab.json | 2 +- docs/Icon.json | 2 +- docs/Input.json | 2 +- docs/LazyList.json | 2 +- docs/Navigator.json | 2 +- docs/Popover.json | 2 +- docs/ProgressBar.json | 2 +- docs/ProgressCircular.json | 2 +- docs/PullHook.json | 2 +- docs/Range.json | 2 +- docs/Ripple.json | 2 +- docs/SpeedDial.json | 2 +- docs/SpeedDialItem.json | 2 +- docs/Splitter.json | 2 +- docs/SplitterContent.json | 2 +- docs/SplitterSide.json | 2 +- docs/Switch.json | 2 +- docs/Toolbar.json | 2 +- docs/ToolbarButton.json | 2 +- 24 files changed, 4116 insertions(+), 4101 deletions(-) diff --git a/dist/react-onsenui.js b/dist/react-onsenui.js index bc611ad..a07e28f 100644 --- a/dist/react-onsenui.js +++ b/dist/react-onsenui.js @@ -1,4611 +1,4626 @@ -/*! react-onsenui v0.7.7 - Wed Sep 07 2016 15:22:33 GMT+0900 (JST) */ +/*! react-onsenui v0.7.8 - Thu Sep 15 2016 01:46:46 GMT+0900 (JST) */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('onsenui')) : typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'onsenui'], factory) : (factory((global.Ons = global.Ons || {}),global.React,global.ReactDOM,global.ons)); -}(this, function (exports,React,ReactDOM,ons) { 'use strict'; +}(this, (function (exports,React,ReactDOM,ons) { 'use strict'; - React = 'default' in React ? React['default'] : React; - var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM; - ons = 'default' in ons ? ons['default'] : ons; +React = 'default' in React ? React['default'] : React; +var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM; +ons = 'default' in ons ? ons['default'] : ons; - var Util = { - sizeConverter: function sizeConverter(item) { - if (typeof item === 'number') { - return item + 'px'; - } else { - return item; - } - }, - numberConverter: function numberConverter(item) { +var Util = { + sizeConverter: function sizeConverter(item) { + if (typeof item === 'number') { return item + 'px'; - }, - animationOptionsConverter: function animationOptionsConverter(options) { - var keys = Object.keys(options); - var innerString = keys.map(function (key) { - return key + ': "' + options[key] + '"'; - }); - return '{' + innerString.join(',') + '}'; - }, - convert: function convert(dict, name) { - var additionalDict = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2]; + } else { + return item; + } + }, + numberConverter: function numberConverter(item) { + return item + 'px'; + }, + animationOptionsConverter: function animationOptionsConverter(options) { + var keys = Object.keys(options); + var innerString = keys.map(function (key) { + return key + ': "' + options[key] + '"'; + }); + return '{' + innerString.join(',') + '}'; + }, + convert: function convert(dict, name) { + var additionalDict = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2]; - var fun = additionalDict.fun ? additionalDict.fun : function (x) { - return x; - }; - var newName = additionalDict.newName ? additionalDict.newName : name; + var fun = additionalDict.fun ? additionalDict.fun : function (x) { + return x; + }; + var newName = additionalDict.newName ? additionalDict.newName : name; - var val = dict[name]; - if (val) { - if (newName !== name) { - delete dict[name]; - } - dict[newName] = fun(val); - } else { - dict[newName] = null; + var val = dict[name]; + if (val) { + if (newName !== name) { + delete dict[name]; } - return dict; + dict[newName] = fun(val); + } else { + dict[newName] = null; } - }; + return dict; + } +}; - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } - }; + } - var createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - return target; - }; - var get = function get(object, property, receiver) { - if (object === null) object = Function.prototype; - var desc = Object.getOwnPropertyDescriptor(object, property); - if (desc === undefined) { - var parent = Object.getPrototypeOf(object); - if (parent === null) { - return undefined; - } else { - return get(parent, property, receiver); - } - } else if ("value" in desc) { - return desc.value; - } else { - var getter = desc.get; +var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - if (getter === undefined) { - return undefined; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; } - - return getter.call(receiver); } - }; + } - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } + return target; +}; - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; +var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); - var objectWithoutProperties = function (obj, keys) { - var target = {}; + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; - return target; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + if (getter === undefined) { + return undefined; } - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; + return getter.call(receiver); + } +}; - var BaseDialog = function (_React$Component) { - inherits(BaseDialog, _React$Component); +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } - function BaseDialog() { - classCallCheck(this, BaseDialog); - return possibleConstructorReturn(this, Object.getPrototypeOf(BaseDialog).apply(this, arguments)); + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; - createClass(BaseDialog, [{ - key: 'show', - value: function show() { - this.node.firstChild.show(); - } - }, { - key: 'updateClasses', - value: function updateClasses() { - var node = this.node.firstChild; - - if (this.props.className) { - if (this.lastClass) { - node.className = node.className.replace(this.lastClass, ''); - } - - this.lastClass = ' ' + this.props.className; - node.className += this.lastClass; - } - } - }, { - key: 'hide', - value: function hide() { - this.node.firstChild.hide(); - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this.node = document.createElement('div'); - document.body.appendChild(this.node); - - this.node.addEventListener('dialog-cancel', this.props.onCancel); - this.node.addEventListener('preshow', this.props.onPreShow); - this.node.addEventListener('postshow', this.props.onPostShow); - this.node.addEventListener('prehide', this.props.onPreHide); - this.node.addEventListener('posthide', this.props.onPostHide); - - this.renderPortal(this.props, false); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(newProps) { - this.renderPortal(newProps, this.props.isOpen); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - this.node.removeEventListener('cancel', this.props.onCancel); - this.node.removeEventListener('preshow', this.props.onPreShow); - this.node.removeEventListener('postshow', this.props.onPostShow); - this.node.removeEventListener('prehide', this.props.onPreHide); - this.node.removeEventListener('posthide', this.props.onPostHide); - - ReactDOM__default.unmountComponentAtNode(this.node); - document.body.removeChild(this.node); - } - }, { - key: '_update', - value: function _update(isShown) { - if (this.props.isOpen) { - if (!isShown) { - this.show(); - } - } else { - this.hide(); - } - this.updateClasses(); - } - }, { - key: '_getDomNodeName', - value: function _getDomNodeName() { - throw new Error('_getDomNodeName is not implemented'); - } - }, { - key: 'renderPortal', - value: function renderPortal(props, isShown) { - var newProps = objectWithoutProperties(props, []); - - Util.convert(newProps, 'isCancelable', { newName: 'cancelable' }); - Util.convert(newProps, 'isDisabled', { newName: 'disabled' }); - Util.convert(newProps, 'maskColor', { newName: 'mask-color' }); - Util.convert(newProps, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' }); - - var element = React.createElement(this._getDomNodeName(), newProps); - ReactDOM__default.render(element, this.node, this._update.bind(this, isShown)); - } - }, { - key: 'shouldComponentUpdate', - value: function shouldComponentUpdate() { - return false; - } - }, { - key: 'render', - value: function render() { - return React.DOM.noscript(); - } - }]); - return BaseDialog; - }(React.Component); - - BaseDialog.propTypes = { - onCancel: React.PropTypes.func, - isOpen: React.PropTypes.bool.isRequired, - isCancelable: React.PropTypes.bool, - isDisabled: React.PropTypes.bool, - animation: React.PropTypes.string, - maskColor: React.PropTypes.string, - animationOptions: React.PropTypes.object, - onPreShow: React.PropTypes.func, - onPostShow: React.PropTypes.func, - onPreHide: React.PropTypes.func, - onPostHide: React.PropTypes.func - }; - - BaseDialog.defaultProps = { - isCancelable: true, - isDisabled: false - }; - - /** - * @original ons-alert-dialog - * @category dialog - * @tutorial react/Reference/dialog - * @description - * [en] - * 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. - * [/en] - * [jp][/jp] - * @example - -
Warning!
-
- An error has occurred! -
-
- - -
- - */ - - var AlertDialog = function (_BaseDialog) { - inherits(AlertDialog, _BaseDialog); - - function AlertDialog() { - classCallCheck(this, AlertDialog); - return possibleConstructorReturn(this, Object.getPrototypeOf(AlertDialog).apply(this, arguments)); - } - createClass(AlertDialog, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-alert-dialog'; - } - }]); - return AlertDialog; - }(BaseDialog); - AlertDialog.propTypes = { - /** - * @name onCancel - * @type function - * @required false - * @description - * [en] - * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. - * [/en] - * [jp] どうしよう[/jp] - */ - onCancel: React.PropTypes.func, - /** - * @name isOpen - * @type bool - * @required true - * @description - * [en] - * Indicates whether the dialog is open and shown. - * [/en] - * [jp] [/jp] - */ - isOpen: React.PropTypes.bool.isRequired, - /** - * @name isCancelable - * @type bool - * @required false - * @description - * [en] - * Specifies whether the dialog is cancelable or not. - * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices - * [/en] - * [jp] [/jp] - */ - isCancelable: React.PropTypes.bool, - /** - * @name isDisabled - * @type bool - * @required false - * @description - * [en] - * Specifies whether the dialog is disabled. - * [/en] - * [jp] [/jp] - */ - isDisabled: React.PropTypes.bool, - /** - * @name animation - * @type string - * @required false - * @description - * [en] - * The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`. - * [/en] - * [jp] [/jp] - */ - animation: React.PropTypes.string, - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the dialog.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, - /** - * @name maskColor - * @type string - * @required false - * @description - * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en] - * [jp] [/jp] - */ - maskColor: React.PropTypes.string, +var objectWithoutProperties = function (obj, keys) { + var target = {}; - /** - * @name animationOptions - * @type object - * @required false - * @description - * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] - * [jp] [/jp] - */ - animationOptions: React.PropTypes.object, + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } - /** - * @name onPreShow - * @type function - * @required false - * @description - * [en] - * Called just before the alert dialog is displayed. - * [/en] - * [jp][/jp] - */ - onPreShow: React.PropTypes.func, + return target; +}; - /** - * @name onPostShow - * @type function - * @required false - * @description - * [en] - * Called just after the alert dialog is displayed. - * [/en] - * [jp][/jp] - */ - onPostShow: React.PropTypes.func, +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } - /** - * @name onPreHide - * @type function - * @required false - * @description - * [en]Called just before the alert dialog is hidden.[/en] - * [jp][/jp] - */ - onPreHide: React.PropTypes.func, + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; - /** - * @name onPostHide - * @type function - * @required false - * @description - * [en]Called just after the alert dialog is hidden.[/en] - * [jp][/jp] - */ - onPostHide: React.PropTypes.func - }; - var BasicComponent = function (_React$Component) { - inherits(BasicComponent, _React$Component); - function BasicComponent(props) { - classCallCheck(this, BasicComponent); +var set = function set(object, property, value, receiver) { + var desc = Object.getOwnPropertyDescriptor(object, property); - var _this = possibleConstructorReturn(this, Object.getPrototypeOf(BasicComponent).call(this, props)); + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); - _this.updateClasses = _this.updateClasses.bind(_this); - return _this; + if (parent !== null) { + set(parent, property, value, receiver); } + } else if ("value" in desc && desc.writable) { + desc.value = value; + } else { + var setter = desc.set; - createClass(BasicComponent, [{ - key: 'updateClasses', - value: function updateClasses() { - var node = ReactDOM__default.findDOMNode(this); + if (setter !== undefined) { + setter.call(receiver, value); + } + } - if (typeof this.props.className !== 'undefined') { - if (this.lastClass) { - node.className = node.className.replace(this.lastClass, ' '); - } + return value; +}; - this.lastClass = ' ' + this.props.className.trim(); +var BaseDialog = function (_React$Component) { + inherits(BaseDialog, _React$Component); - node.className = node.className.trim() + this.lastClass; - } + function BaseDialog() { + classCallCheck(this, BaseDialog); + return possibleConstructorReturn(this, (BaseDialog.__proto__ || Object.getPrototypeOf(BaseDialog)).apply(this, arguments)); + } - if (!ons) { - throw new Error("react-onsenui requires `onsenui`, make sure you are loading it with `import onsenui` or `require('onsenui')` before using the components"); + createClass(BaseDialog, [{ + key: 'show', + value: function show() { + this.node.firstChild.show(); + } + }, { + key: 'updateClasses', + value: function updateClasses() { + var node = this.node.firstChild; + + if (this.props.className) { + if (this.lastClass) { + node.className = node.className.replace(this.lastClass, ''); } - ons._autoStyle.prepare(node); - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this.updateClasses(); + this.lastClass = ' ' + this.props.className; + node.className += this.lastClass; } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate() { - this.updateClasses(); + } + }, { + key: 'hide', + value: function hide() { + this.node.firstChild.hide(); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.node = document.createElement('div'); + document.body.appendChild(this.node); + + this.node.addEventListener('dialog-cancel', this.props.onCancel); + this.node.addEventListener('preshow', this.props.onPreShow); + this.node.addEventListener('postshow', this.props.onPostShow); + this.node.addEventListener('prehide', this.props.onPreHide); + this.node.addEventListener('posthide', this.props.onPostHide); + + this.renderPortal(this.props, false); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(newProps) { + this.renderPortal(newProps, this.props.isOpen); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.node.removeEventListener('cancel', this.props.onCancel); + this.node.removeEventListener('preshow', this.props.onPreShow); + this.node.removeEventListener('postshow', this.props.onPostShow); + this.node.removeEventListener('prehide', this.props.onPreHide); + this.node.removeEventListener('posthide', this.props.onPostHide); + + ReactDOM__default.unmountComponentAtNode(this.node); + document.body.removeChild(this.node); + } + }, { + key: '_update', + value: function _update(isShown) { + if (this.props.isOpen) { + if (!isShown) { + this.show(); + } + } else { + this.hide(); } - }]); - return BasicComponent; - }(React.Component); + this.updateClasses(); + } + }, { + key: '_getDomNodeName', + value: function _getDomNodeName() { + throw new Error('_getDomNodeName is not implemented'); + } + }, { + key: 'renderPortal', + value: function renderPortal(props, isShown) { + var newProps = objectWithoutProperties(props, []); + + Util.convert(newProps, 'isCancelable', { newName: 'cancelable' }); + Util.convert(newProps, 'isDisabled', { newName: 'disabled' }); + Util.convert(newProps, 'maskColor', { newName: 'mask-color' }); + Util.convert(newProps, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' }); + + var element = React.createElement(this._getDomNodeName(), newProps); + ReactDOM__default.render(element, this.node, this._update.bind(this, isShown)); + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate() { + return false; + } + }, { + key: 'render', + value: function render() { + return React.DOM.noscript(); + } + }]); + return BaseDialog; +}(React.Component); + +BaseDialog.propTypes = { + onCancel: React.PropTypes.func, + isOpen: React.PropTypes.bool.isRequired, + isCancelable: React.PropTypes.bool, + isDisabled: React.PropTypes.bool, + animation: React.PropTypes.string, + maskColor: React.PropTypes.string, + animationOptions: React.PropTypes.object, + onPreShow: React.PropTypes.func, + onPostShow: React.PropTypes.func, + onPreHide: React.PropTypes.func, + onPostHide: React.PropTypes.func +}; + +BaseDialog.defaultProps = { + isCancelable: true, + isDisabled: false +}; + +/** + * @original ons-alert-dialog + * @category dialog + * @tutorial react/Reference/dialog + * @description + * [en] + * 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. + * [/en] + * [jp][/jp] + * @example + +
Warning!
+
+ An error has occurred! +
+
+ + +
+ + */ - var SimpleWrapper = function (_BasicComponent) { - inherits(SimpleWrapper, _BasicComponent); +var AlertDialog = function (_BaseDialog) { + inherits(AlertDialog, _BaseDialog); - function SimpleWrapper() { - classCallCheck(this, SimpleWrapper); - return possibleConstructorReturn(this, Object.getPrototypeOf(SimpleWrapper).apply(this, arguments)); + function AlertDialog() { + classCallCheck(this, AlertDialog); + return possibleConstructorReturn(this, (AlertDialog.__proto__ || Object.getPrototypeOf(AlertDialog)).apply(this, arguments)); + } + + createClass(AlertDialog, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-alert-dialog'; } + }]); + return AlertDialog; +}(BaseDialog); + +AlertDialog.propTypes = { + /** + * @name onCancel + * @type function + * @required false + * @description + * [en] + * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. + * [/en] + * [jp] どうしよう[/jp] + */ + onCancel: React.PropTypes.func, + + /** + * @name isOpen + * @type bool + * @required true + * @description + * [en] + * Indicates whether the dialog is open and shown. + * [/en] + * [jp] [/jp] + */ + isOpen: React.PropTypes.bool.isRequired, + + /** + * @name isCancelable + * @type bool + * @required false + * @description + * [en] + * Specifies whether the dialog is cancelable or not. + * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices + * [/en] + * [jp] [/jp] + */ + isCancelable: React.PropTypes.bool, - createClass(SimpleWrapper, [{ - key: 'render', - value: function render() { - var others = objectWithoutProperties(this.props, []); + /** + * @name isDisabled + * @type bool + * @required false + * @description + * [en] + * Specifies whether the dialog is disabled. + * [/en] + * [jp] [/jp] + */ + isDisabled: React.PropTypes.bool, - Util.convert(others, 'disabled'); - Util.convert(others, 'ripple'); + /** + * @name animation + * @type string + * @required false + * @description + * [en] + * The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`. + * [/en] + * [jp] [/jp] + */ + animation: React.PropTypes.string, - return React.createElement(this._getDomNodeName(), others, this.props.children); - } - }]); - return SimpleWrapper; - }(BasicComponent); + /** + * @name modifier + * @type string + * @required false + * @description + * [en]The appearance of the dialog.[/en] + * [jp] [/jp] + */ + modifier: React.PropTypes.string, - ; + /** + * @name maskColor + * @type string + * @required false + * @description + * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en] + * [jp] [/jp] + */ + maskColor: React.PropTypes.string, /** - * @original ons-back-button - * @category toolbar - * @tutorial react/Reference/navigator + * @name animationOptions + * @type object + * @required false * @description - * [en] - * Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically. - * - * The default behavior can be overridden using the `onClick` prop. - * [/en] - * [jp][/jp] - * @example - * -
Back
-
{this.props.title}
- + * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] + * [jp] [/jp] */ + animationOptions: React.PropTypes.object, - var BackButton = function (_SimpleWrapper) { - inherits(BackButton, _SimpleWrapper); + /** + * @name onPreShow + * @type function + * @required false + * @description + * [en] + * Called just before the alert dialog is displayed. + * [/en] + * [jp][/jp] + */ + onPreShow: React.PropTypes.func, - function BackButton() { - classCallCheck(this, BackButton); - return possibleConstructorReturn(this, Object.getPrototypeOf(BackButton).apply(this, arguments)); - } + /** + * @name onPostShow + * @type function + * @required false + * @description + * [en] + * Called just after the alert dialog is displayed. + * [/en] + * [jp][/jp] + */ + onPostShow: React.PropTypes.func, - createClass(BackButton, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-back-button'; - } - }, { - key: '_updateOnClick', - value: function _updateOnClick(props) { - var node = ReactDOM__default.findDOMNode(this); - - if (props.onClick) { - node.onClick = function () { - return null; - }; - } else { - delete node.onClick; + /** + * @name onPreHide + * @type function + * @required false + * @description + * [en]Called just before the alert dialog is hidden.[/en] + * [jp][/jp] + */ + onPreHide: React.PropTypes.func, + + /** + * @name onPostHide + * @type function + * @required false + * @description + * [en]Called just after the alert dialog is hidden.[/en] + * [jp][/jp] + */ + onPostHide: React.PropTypes.func +}; + +var BasicComponent = function (_React$Component) { + inherits(BasicComponent, _React$Component); + + function BasicComponent(props) { + classCallCheck(this, BasicComponent); + + var _this = possibleConstructorReturn(this, (BasicComponent.__proto__ || Object.getPrototypeOf(BasicComponent)).call(this, props)); + + _this.updateClasses = _this.updateClasses.bind(_this); + return _this; + } + + createClass(BasicComponent, [{ + key: 'updateClasses', + value: function updateClasses() { + var node = ReactDOM__default.findDOMNode(this); + + if (typeof this.props.className !== 'undefined') { + if (this.lastClass) { + node.className = node.className.replace(this.lastClass, ' '); } + + this.lastClass = ' ' + this.props.className.trim(); + + node.className = node.className.trim() + this.lastClass; } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this._updateOnClick(this.props); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(props) { - this._updateOnClick(props); + + if (!ons) { + throw new Error("react-onsenui requires `onsenui`, make sure you are loading it with `import onsenui` or `require('onsenui')` before using the components"); } - }]); - return BackButton; - }(SimpleWrapper); - ; + ons._autoStyle.prepare(node); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.updateClasses(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.updateClasses(); + } + }]); + return BasicComponent; +}(React.Component); - BackButton.propTypes = { - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the back button.[/en] - * [jp][/jp] - */ - modifier: React.PropTypes.string, +var SimpleWrapper = function (_BasicComponent) { + inherits(SimpleWrapper, _BasicComponent); - /** - * @name onClick - * @type function - * @description - * [en]This function will be called ones the button is clicked. It overrides the default behavior of the back button.[/en] - * [jp][/jp] - */ - onClick: React.PropTypes.func - }; + function SimpleWrapper() { + classCallCheck(this, SimpleWrapper); + return possibleConstructorReturn(this, (SimpleWrapper.__proto__ || Object.getPrototypeOf(SimpleWrapper)).apply(this, arguments)); + } - /** - * @original ons-bottom-toolbar - * @category toolbar - * @description - * [en] Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically. [/en] - * [jp][/jp] - * @example - * Content - */ + createClass(SimpleWrapper, [{ + key: 'render', + value: function render() { + var others = objectWithoutProperties(this.props, []); - var BottomToolbar = function (_SimpleWrapper) { - inherits(BottomToolbar, _SimpleWrapper); + Util.convert(others, 'disabled'); + Util.convert(others, 'ripple'); - function BottomToolbar() { - classCallCheck(this, BottomToolbar); - return possibleConstructorReturn(this, Object.getPrototypeOf(BottomToolbar).apply(this, arguments)); + return React.createElement(this._getDomNodeName(), others, this.props.children); } + }]); + return SimpleWrapper; +}(BasicComponent); + +/** + * @original ons-back-button + * @category navigation + * @tutorial react/Reference/navigator + * @description + * [en] + * Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically. + * + * The default behavior can be overridden using the `onClick` prop. + * [/en] + * [jp][/jp] + * @example + * +
Back
+
{this.props.title}
+ + */ + +var BackButton = function (_SimpleWrapper) { + inherits(BackButton, _SimpleWrapper); + + function BackButton() { + classCallCheck(this, BackButton); + return possibleConstructorReturn(this, (BackButton.__proto__ || Object.getPrototypeOf(BackButton)).apply(this, arguments)); + } - createClass(BottomToolbar, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-bottom-toolbar'; + createClass(BackButton, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-back-button'; + } + }, { + key: '_updateOnClick', + value: function _updateOnClick(props) { + var node = ReactDOM__default.findDOMNode(this); + + if (props.onClick) { + node.onClick = function () { + return null; + }; + } else { + delete node.onClick; } - }]); - return BottomToolbar; - }(SimpleWrapper); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this._updateOnClick(this.props); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(props) { + this._updateOnClick(props); + } + }]); + return BackButton; +}(SimpleWrapper); - ; - BottomToolbar.propTypes = { - /** - * @name modifier - * @type string - * @description - * [en] - * Specify modifier name to specify custom styles. Optional. - * [/en] - * [jp][/jp] - */ - modifier: React.PropTypes.string - }; +BackButton.propTypes = { /** - * @original ons-button - * @category button - * @tutorial react/Reference/button + * @name modifier + * @type string + * @required false * @description - * [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. - [/en] - * [jp][/jp] - * @example - * + * [en]The appearance of the back button.[/en] + * [jp][/jp] */ + modifier: React.PropTypes.string, - var Button = function (_SimpleWrapper) { - inherits(Button, _SimpleWrapper); + /** + * @name onClick + * @type function + * @description + * [en]This function will be called ones the button is clicked. It overrides the default behavior of the back button.[/en] + * [jp][/jp] + */ + onClick: React.PropTypes.func +}; + +/** + * @original ons-bottom-toolbar + * @category page + * @description + * [en] Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically. [/en] + * [jp][/jp] + * @example + * Content + */ + +var BottomToolbar = function (_SimpleWrapper) { + inherits(BottomToolbar, _SimpleWrapper); + + function BottomToolbar() { + classCallCheck(this, BottomToolbar); + return possibleConstructorReturn(this, (BottomToolbar.__proto__ || Object.getPrototypeOf(BottomToolbar)).apply(this, arguments)); + } - function Button() { - classCallCheck(this, Button); - return possibleConstructorReturn(this, Object.getPrototypeOf(Button).apply(this, arguments)); + createClass(BottomToolbar, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-bottom-toolbar'; } + }]); + return BottomToolbar; +}(SimpleWrapper); - createClass(Button, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-button'; - } - }]); - return Button; - }(SimpleWrapper); - ; - Button.propTypes = { - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the button.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, +BottomToolbar.propTypes = { + /** + * @name modifier + * @type string + * @description + * [en] + * Specify modifier name to specify custom styles. Optional. + * [/en] + * [jp][/jp] + */ + modifier: React.PropTypes.string +}; + +/** + * @original ons-button + * @category form + * @tutorial react/Reference/button + * @description + * [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. + [/en] + * [jp][/jp] + * @example + * + */ + +var Button = function (_SimpleWrapper) { + inherits(Button, _SimpleWrapper); + + function Button() { + classCallCheck(this, Button); + return possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments)); + } - /** - * @name disabled - * @type bool - * @description - * [en] - * Specifies whether the button is disabled. - * [/en] - * [jp] [/jp] - */ - disabled: React.PropTypes.bool, + createClass(Button, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-button'; + } + }]); + return Button; +}(SimpleWrapper); - /** - * @name ripple - * @type bool - * @description - * [en] - * Specifies whether the button has a ripple effect. - * [/en] - * [jp] [/jp] - */ - ripple: React.PropTypes.bool, - /** - * @name onClick - * @type function - * @description - * [en] This function will be called ones the button is clicked. [/en] - * [jp] [/jp] - */ - onClick: React.PropTypes.func - }; +Button.propTypes = { /** - * @original ons-carousel - * @category carousel - * @tutorial react/Reference/carousel - * @description - * [en] Carousel component. A carousel can be used to display several items in the same space. - * 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. - [/en] - * [jp][/jp] - * @example - * console.log('onPostChange')} - onOverscroll={() => console.log('onOverscroll')} - onRefresh={() => console.log('onRefresh')} - ref='carousel' swipeable overscrollable autoScroll fullscreen autoScrollRatio={0.2}> - -
GRAY
- - -
BLUE
- - - - */ - - var Carousel = function (_SimpleWrapper) { - inherits(Carousel, _SimpleWrapper); - - function Carousel() { - classCallCheck(this, Carousel); - return possibleConstructorReturn(this, Object.getPrototypeOf(Carousel).apply(this, arguments)); - } + * @name modifier + * @type string + * @required false + * @description + * [en]The appearance of the button.[/en] + * [jp] [/jp] + */ + modifier: React.PropTypes.string, - createClass(Carousel, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-carousel'; - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - get(Object.getPrototypeOf(Carousel.prototype), 'componentDidMount', this).call(this); - var node = ReactDOM.findDOMNode(this); - node.addEventListener('postchange', this.props.onPostChange); - node.addEventListener('refresh', this.props.onRefresh); - node.addEventListener('overscroll', this.props.onOverscroll); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(props) { - var node = ReactDOM.findDOMNode(this); + /** + * @name disabled + * @type bool + * @description + * [en] + * Specifies whether the button is disabled. + * [/en] + * [jp] [/jp] + */ + disabled: React.PropTypes.bool, - if (this.props.index !== props.index) { - node.setActiveIndex(props.index, props.animationOptions); - } - } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate(props) { - var node = ReactDOM.findDOMNode(this); + /** + * @name ripple + * @type bool + * @description + * [en] + * Specifies whether the button has a ripple effect. + * [/en] + * [jp] [/jp] + */ + ripple: React.PropTypes.bool, - if (this.props.children.length !== props.children.length) { - node.refresh(); - } + /** + * @name onClick + * @type function + * @description + * [en] This function will be called ones the button is clicked. [/en] + * [jp] [/jp] + */ + onClick: React.PropTypes.func +}; + +/** + * @original ons-carousel + * @category carousel + * @tutorial react/Reference/carousel + * @description + * [en] Carousel component. A carousel can be used to display several items in the same space. + * 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. + [/en] + * [jp][/jp] + * @example + * console.log('onPostChange')} + onOverscroll={() => console.log('onOverscroll')} + onRefresh={() => console.log('onRefresh')} + ref='carousel' swipeable overscrollable autoScroll fullscreen autoScrollRatio={0.2}> + +
GRAY
+ + +
BLUE
+ + + + */ + +var Carousel = function (_SimpleWrapper) { + inherits(Carousel, _SimpleWrapper); + + function Carousel() { + classCallCheck(this, Carousel); + return possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).apply(this, arguments)); + } + + createClass(Carousel, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-carousel'; + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + get(Carousel.prototype.__proto__ || Object.getPrototypeOf(Carousel.prototype), 'componentDidMount', this).call(this); + var node = ReactDOM.findDOMNode(this); + node.addEventListener('postchange', this.props.onPostChange); + node.addEventListener('refresh', this.props.onRefresh); + node.addEventListener('overscroll', this.props.onOverscroll); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(props) { + var node = ReactDOM.findDOMNode(this); + + if (this.props.index !== props.index) { + node.setActiveIndex(props.index, props.animationOptions); } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - var node = ReactDOM.findDOMNode(this); - node.removeEventListener('postchange', this.props.onPostChange); - node.removeEventListener('refresh', this.props.onRefresh); - node.removeEventListener('overscroll', this.props.onOverscroll); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(props) { + var node = ReactDOM.findDOMNode(this); + + if (this.props.children.length !== props.children.length) { + node.refresh(); } - }, { - key: 'render', - value: function render() { - var others = objectWithoutProperties(this.props, []); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + var node = ReactDOM.findDOMNode(this); + node.removeEventListener('postchange', this.props.onPostChange); + node.removeEventListener('refresh', this.props.onRefresh); + node.removeEventListener('overscroll', this.props.onOverscroll); + } + }, { + key: 'render', + value: function render() { + var others = objectWithoutProperties(this.props, []); - ['fullscreen', 'swipeable', 'disabled', 'centered', 'overscrollable', 'centered'].forEach(function (el) { - Util.convert(others, el); - }); + ['fullscreen', 'swipeable', 'disabled', 'centered', 'overscrollable', 'centered'].forEach(function (el) { + Util.convert(others, el); + }); - Util.convert(others, 'itemWidth', { fun: Util.sizeConverter, newName: 'item-width' }); - Util.convert(others, 'itemHeight', { fun: Util.sizeConverter, newName: 'item-height' }); - Util.convert(others, 'autoScroll', { newName: 'auto-scroll' }); - Util.convert(others, 'autoRefresh', { newName: 'auto-refresh' }); - Util.convert(others, 'autoScrollRatio', { newName: 'auto-scroll-ratio' }); - Util.convert(others, 'index', { newName: 'initial-index' }); - Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' }); + Util.convert(others, 'itemWidth', { fun: Util.sizeConverter, newName: 'item-width' }); + Util.convert(others, 'itemHeight', { fun: Util.sizeConverter, newName: 'item-height' }); + Util.convert(others, 'autoScroll', { newName: 'auto-scroll' }); + Util.convert(others, 'autoRefresh', { newName: 'auto-refresh' }); + Util.convert(others, 'autoScrollRatio', { newName: 'auto-scroll-ratio' }); + Util.convert(others, 'index', { newName: 'initial-index' }); + Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' }); - return React.createElement(this._getDomNodeName(), others, this.props.children); - } - }]); - return Carousel; - }(SimpleWrapper); + return React.createElement(this._getDomNodeName(), others, this.props.children); + } + }]); + return Carousel; +}(SimpleWrapper); - ; - Carousel.propTypes = { - /** - * @name direction - * @type string - * @required false - * @description - * [en]The direction of the carousel. Can be either "horizontal" or "vertical". Default is "horizontal".[/en] - * [jp] [/jp] - */ - direction: React.PropTypes.oneOf(['horizontal', 'vertical']), +Carousel.propTypes = { - /** - * @name fullscreen - * @type bool - * @description - * [en]If true, the carousel will cover the whole screen.[/en] - * [jp] [/jp] - */ - fullscreen: React.PropTypes.bool, - - /** - * @name overscrollable - * @type bool - * @description - * [en]If true, the carousel will be scrollable over the edge. It will bounce back when released.[/en] - * [jp] [/jp] - */ - overscrollable: React.PropTypes.bool, - - /** - * @name centered - * @type bool - * @description - * [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] - * [jp] [/jp] - */ - centered: React.PropTypes.bool, - - /** - * @name itemWidth - * @type number - * @description - * [en]ons-carousel-item's width. Only works when the direction is set to "horizontal".[/en] - * [jp] [/jp] - */ - itemWidth: React.PropTypes.oneOf([React.PropTypes.string, React.PropTypes.number]), - - /** - * @name itemHeight - * @type number - * @description - * [en]ons-carousel-item's height. Only works when the direction is set to "vertical".[/en] - * [jp] [/jp] - */ - itemHeight: React.PropTypes.oneOf([React.PropTypes.string, React.PropTypes.number]), - - /** - * @name autoScroll - * @type bool - * @description - * [en]If true, the carousel will be automatically scrolled to the closest item border when released.[/en] - * [jp] [/jp] - */ - autoScroll: React.PropTypes.bool, - - /** - * @name autoScrollRatio - * @type number - * @description - * [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] - * [jp] [/jp] - */ - autoScrollRatio: React.PropTypes.number, - - /** - * @name swipeable - * @type bool - * @description - * [en]If true, the carousel can be scrolled by drag or swipe.[/en] - * [jp] [/jp] - */ - swipeable: React.PropTypes.bool, + /** + * @name direction + * @type string + * @required false + * @description + * [en]The direction of the carousel. Can be either "horizontal" or "vertical". Default is "horizontal".[/en] + * [jp] [/jp] + */ + direction: React.PropTypes.oneOf(['horizontal', 'vertical']), - /** - * @name disabled - * @type bool - * @description - * [en]If true, the carousel will be disabled.[/en] - * [jp] [/jp] - */ - disabled: React.PropTypes.bool, + /** + * @name fullscreen + * @type bool + * @description + * [en]If true, the carousel will cover the whole screen.[/en] + * [jp] [/jp] + */ + fullscreen: React.PropTypes.bool, - /** - * @name index - * @type number - * @description - * [en]Specify the index of the ons-carousel-item to show. Default is 0.[/en] - * [jp] [/jp] - */ - index: React.PropTypes.number, + /** + * @name overscrollable + * @type bool + * @description + * [en]If true, the carousel will be scrollable over the edge. It will bounce back when released.[/en] + * [jp] [/jp] + */ + overscrollable: React.PropTypes.bool, - /** - * @name autoRefresh - * @type bool - * @description - * [en]When this attribute is set the carousel will automatically refresh when the number of child nodes change.[/en] - * [jp] [/jp] - */ - autoRefresh: React.PropTypes.bool, + /** + * @name centered + * @type bool + * @description + * [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] + * [jp] [/jp] + */ + centered: React.PropTypes.bool, - /** - * @name onPostChange - * @type function - * @description - * [en]Called just after the current carousel item has changed. [/en] - * [jp] [/jp] - */ - onPostChange: React.PropTypes.func, + /** + * @name itemWidth + * @type number + * @description + * [en]ons-carousel-item's width. Only works when the direction is set to "horizontal".[/en] + * [jp] [/jp] + */ + itemWidth: React.PropTypes.oneOf([React.PropTypes.string, React.PropTypes.number]), - /** - * @name onRefresh - * @type function - * @description - * [en]Called when the carousel has been refreshed. [/en] - * [jp] [/jp] - */ - onRefresh: React.PropTypes.func, + /** + * @name itemHeight + * @type number + * @description + * [en]ons-carousel-item's height. Only works when the direction is set to "vertical".[/en] + * [jp] [/jp] + */ + itemHeight: React.PropTypes.oneOf([React.PropTypes.string, React.PropTypes.number]), - /** - * @name onOverscroll - * @type function - * @description - * [en]Called when the carousel has been overscrolled. [/en] - * [jp] [/jp] - */ - onOverscroll: React.PropTypes.func, + /** + * @name autoScroll + * @type bool + * @description + * [en]If true, the carousel will be automatically scrolled to the closest item border when released.[/en] + * [jp] [/jp] + */ + autoScroll: React.PropTypes.bool, - /** - * @name animationOptions - * @type object - * @required false - * @description - * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] - * [jp] [/jp] - */ - animationOptions: React.PropTypes.object - }; + /** + * @name autoScrollRatio + * @type number + * @description + * [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] + * [jp] [/jp] + */ + autoScrollRatio: React.PropTypes.number, /** - * @original ons-carousel-item - * @category carousel - * @tutorial react/Reference/carousel + * @name swipeable + * @type bool * @description - * [en] Carousel item component. Used as a child of the `` element. - [/en] - * [jp][/jp] - * @example - * - -
GRAY
- - -
BLUE
- - + * [en]If true, the carousel can be scrolled by drag or swipe.[/en] + * [jp] [/jp] */ + swipeable: React.PropTypes.bool, - var CarouselItem = function (_SimpleWrapper) { - inherits(CarouselItem, _SimpleWrapper); + /** + * @name disabled + * @type bool + * @description + * [en]If true, the carousel will be disabled.[/en] + * [jp] [/jp] + */ + disabled: React.PropTypes.bool, - function CarouselItem() { - classCallCheck(this, CarouselItem); - return possibleConstructorReturn(this, Object.getPrototypeOf(CarouselItem).apply(this, arguments)); - } + /** + * @name index + * @type number + * @description + * [en]Specify the index of the ons-carousel-item to show. Default is 0.[/en] + * [jp] [/jp] + */ + index: React.PropTypes.number, - createClass(CarouselItem, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-carousel-item'; - } - }]); - return CarouselItem; - }(SimpleWrapper); + /** + * @name autoRefresh + * @type bool + * @description + * [en]When this attribute is set the carousel will automatically refresh when the number of child nodes change.[/en] + * [jp] [/jp] + */ + autoRefresh: React.PropTypes.bool, - ; + /** + * @name onPostChange + * @type function + * @description + * [en]Called just after the current carousel item has changed. [/en] + * [jp] [/jp] + */ + onPostChange: React.PropTypes.func, - CarouselItem.propTypes = { - /** - * @name modifier - * @type string - * @description - * [en] - * Specify modifier name to specify custom styles. Optional. - * [/en] - * [jp] どうしよう[/jp] - */ - modifier: React.PropTypes.string - }; + /** + * @name onRefresh + * @type function + * @description + * [en]Called when the carousel has been refreshed. [/en] + * [jp] [/jp] + */ + onRefresh: React.PropTypes.func, /** - * @original ons-col - * @category grid + * @name onOverscroll + * @type function * @description - * [en] - * Represents a column in the grid system. Use with `` to layout components. - * [/en] - * [jp][/jp] - * - * - * - * - * Text - * + * [en]Called when the carousel has been overscrolled. [/en] + * [jp] [/jp] */ + onOverscroll: React.PropTypes.func, - var Col = function (_SimpleWrapper) { - inherits(Col, _SimpleWrapper); + /** + * @name animationOptions + * @type object + * @required false + * @description + * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] + * [jp] [/jp] + */ + animationOptions: React.PropTypes.object +}; + +/** + * @original ons-carousel-item + * @category carousel + * @tutorial react/Reference/carousel + * @description + * [en] Carousel item component. Used as a child of the `` element. + [/en] + * [jp][/jp] + * @example +* + +
GRAY
+ + +
BLUE
+ + + */ + +var CarouselItem = function (_SimpleWrapper) { + inherits(CarouselItem, _SimpleWrapper); + + function CarouselItem() { + classCallCheck(this, CarouselItem); + return possibleConstructorReturn(this, (CarouselItem.__proto__ || Object.getPrototypeOf(CarouselItem)).apply(this, arguments)); + } - function Col() { - classCallCheck(this, Col); - return possibleConstructorReturn(this, Object.getPrototypeOf(Col).apply(this, arguments)); + createClass(CarouselItem, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-carousel-item'; } + }]); + return CarouselItem; +}(SimpleWrapper); - createClass(Col, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-col'; - } - }, { - key: 'render', - value: function render() { - var others = objectWithoutProperties(this.props, []); - - Util.convert(others, 'verticalAlign', { newName: 'vertical-align' }); - Util.convert(others, 'width', { fun: Util.sizeConverter }); - - return React.createElement(this._getDomNodeName(), others, this.props.children); - } - }]); - return Col; - }(SimpleWrapper); - - ; - - Col.propTypes = { - /** - * @name verticalAlign - * @type {String} - * @description - * [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en] - * [ja][/ja] - */ - verticalAlign: React.PropTypes.oneOf(['top', 'bottom', 'center']), - - /** - * @name width - * @type {String} - * @description - * [en]The width of the column. Valid values are css width values ("10%", 50).[/en] - * [ja][/ja] - */ - width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]) - }; +CarouselItem.propTypes = { /** - * @original ons-dialog - * @category dialog - * @tutorial react/Reference/dialog + * @name modifier + * @type string * @description - * [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. - [/en] - * [jp][/jp] - * @example - - - Page Content - - - + * [en] + * Specify modifier name to specify custom styles. Optional. + * [/en] + * [jp] どうしよう[/jp] */ + modifier: React.PropTypes.string +}; + +/** + * @original ons-col + * @category grid + * @description + * [en] + * Represents a column in the grid system. Use with `` to layout components. + * [/en] + * [jp][/jp] + * + * + * + * + * Text + * + */ + +var Col = function (_SimpleWrapper) { + inherits(Col, _SimpleWrapper); + + function Col() { + classCallCheck(this, Col); + return possibleConstructorReturn(this, (Col.__proto__ || Object.getPrototypeOf(Col)).apply(this, arguments)); + } - var Dialog = function (_BaseDialog) { - inherits(Dialog, _BaseDialog); - - function Dialog() { - classCallCheck(this, Dialog); - return possibleConstructorReturn(this, Object.getPrototypeOf(Dialog).apply(this, arguments)); + createClass(Col, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-col'; } + }, { + key: 'render', + value: function render() { + var others = objectWithoutProperties(this.props, []); - createClass(Dialog, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-dialog'; - } - }]); - return Dialog; - }(BaseDialog); - - Dialog.propTypes = { - /** - * @name onCancel - * @type function - * @required false - * @description - * [en] - * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. - * [/en] - * [jp] どうしよう[/jp] - */ - onCancel: React.PropTypes.func, - - /** - * @name isOpen - * @type bool - * @required true - * @description - * [en] - * Indicates whether the dialog is open and shown. - * [/en] - * [jp] [/jp] - */ - isOpen: React.PropTypes.bool.isRequired, - - /** - * @name isCancelable - * @type bool - * @required false - * @description - * [en] - * Specifies whether the dialog is cancelable or not. - * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices - * [/en] - * [jp] [/jp] - */ - isCancelable: React.PropTypes.bool, - - /** - * @name isDisabled - * @type bool - * @required false - * @description - * [en] - * Specifies whether the dialog is disabled. - * [/en] - * [jp] [/jp] - */ - isDisabled: React.PropTypes.bool, - - /** - * @name animation - * @type string - * @required false - * @description - * [en] - * The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`. - * [/en] - * [jp] [/jp] - */ - animation: React.PropTypes.string, - - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the dialog.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, - - /** - * @name maskColor - * @type string - * @required false - * @description - * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en] - * [jp] [/jp] - */ - maskColor: React.PropTypes.string, - - /** - * @name animationOptions - * @type object - * @required false - * @description - * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] - * [jp] [/jp] - */ - animationOptions: React.PropTypes.object, - - /** - * @name onPreShow - * @type function - * @required false - * @description - * [en] - * Called just before the alert dialog is displayed. - * [/en] - * [jp][/jp] - */ - onPreShow: React.PropTypes.func, - - /** - * @name onPostShow - * @type function - * @required false - * @description - * [en] - * Called just after the alert dialog is displayed. - * [/en] - * [jp][/jp] - */ - onPostShow: React.PropTypes.func, + Util.convert(others, 'verticalAlign', { newName: 'vertical-align' }); + Util.convert(others, 'width', { fun: Util.sizeConverter }); - /** - * @name onPreHide - * @type function - * @required false - * @description - * [en]Called just before the alert dialog is hidden.[/en] - * [jp][/jp] - */ - onPreHide: React.PropTypes.func, - - /** - * @name onPostHide - * @type function - * @required false - * @description - * [en]Called just after the alert dialog is hidden.[/en] - * [jp][/jp] - */ - onPostHide: React.PropTypes.func - }; - - /** - * @original ons-fab - * @category fab - * @tutorial react/Reference/fab - * @description - * [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. - * 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. - [/en] - * [jp][/jp] - * @example - * console.log('test1')} position='left bottom'> - - - - console.log('speed A')}> A - console.log('speed B')}> B - console.log('speed C')}> C - console.log('speed D')}> D - - */ - - var Fab = function (_SimpleWrapper) { - inherits(Fab, _SimpleWrapper); - - function Fab() { - classCallCheck(this, Fab); - return possibleConstructorReturn(this, Object.getPrototypeOf(Fab).apply(this, arguments)); + return React.createElement(this._getDomNodeName(), others, this.props.children); } + }]); + return Col; +}(SimpleWrapper); - createClass(Fab, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-fab'; - } - }]); - return Fab; - }(SimpleWrapper); - - ; - Fab.propTypes = { - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the button.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, - - /** - * @name ripple - * @type bool - * @description - * [en]If true, the button will have a ripple effect when tapped.[/en] - * [jp] [/jp] - */ - ripple: React.PropTypes.bool, - /** - * @namep position - * @type string - * @required false - * @description - * [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] - * [jp] [/jp] - */ - position: React.PropTypes.string, - - /** - * @name disabled - * @type bool - * @description - * [en] If true, the button will be disabled. [/en] - * [jp] [/jp] - */ - disabled: React.PropTypes.bool, - - /** - * @name onClick - * @type function - * @description - * [en] This function will be called ones the button is clicked. [/en] - * [jp] [/jp] - */ - onClick: React.PropTypes.func - }; +Col.propTypes = { /** - * @original ons-icon - * @category icon - * @tutorial react/Reference/icon - * @description - * [en] - * Displays an icon. The following icon suites are available: - * * [Font Awesome](https://fortawesome.github.io/Font-Awesome/) - * * [Ionicons](http://ionicons.com/) - * * [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/) - * [/en] - * [jp][/jp] - * @example - + * @name verticalAlign + * @type {String} + * @description + * [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en] + * [ja][/ja] */ + verticalAlign: React.PropTypes.oneOf(['top', 'bottom', 'center']), - var Icon = function (_SimpleWrapper) { - inherits(Icon, _SimpleWrapper); + /** + * @name width + * @type {String} + * @description + * [en]The width of the column. Valid values are css width values ("10%", 50).[/en] + * [ja][/ja] + */ + width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]) +}; + +/** + * @original ons-dialog + * @category dialog + * @tutorial react/Reference/dialog + * @description + * [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. + [/en] + * [jp][/jp] + * @example + + + Page Content + + + + */ + +var Dialog = function (_BaseDialog) { + inherits(Dialog, _BaseDialog); + + function Dialog() { + classCallCheck(this, Dialog); + return possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).apply(this, arguments)); + } - function Icon() { - classCallCheck(this, Icon); - return possibleConstructorReturn(this, Object.getPrototypeOf(Icon).apply(this, arguments)); + createClass(Dialog, [{ + key: '_getDomNodeName', + value: function _getDomNodeName() { + return 'ons-dialog'; } + }]); + return Dialog; +}(BaseDialog); - createClass(Icon, [{ - key: '_getDomNodeName', - value: function _getDomNodeName() { - return 'ons-icon'; - } - }, { - key: 'render', - value: function render() { - var _props = this.props; - var icon = _props.icon; - var size = _props.size; - var others = objectWithoutProperties(_props, ['icon', 'size']); - - Util.convert(others, 'fixedWidth', { newName: 'fixed-width' }); - Util.convert(others, 'spin'); - - if (icon) { - if (typeof icon === 'string') { - others.icon = icon; - } else { - var keys = Object.keys(icon).filter(function (a) { - return a !== 'default'; - }); - var innerString = keys.map(function (key) { - return key + ':' + icon[key] + ''; - }); - others.icon = icon.default + ', ' + innerString.join(','); - } - } - - if (size) { - if (typeof size === 'number') { - others.size = size + 'px'; - } else { - var _keys = Object.keys(size).filter(function (a) { - return a !== 'default'; - }); - var _innerString = _keys.map(function (key) { - return key + ':' + size[key] + 'px'; - }); - others.size = size.default + 'px, ' + _innerString.join(','); - } - } - - return React.createElement(this._getDomNodeName(), others, this.props.children); - } - }]); - return Icon; - }(SimpleWrapper); - - ; - - Icon.propTypes = { - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the icon.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, - - /** - * @name icon - * @type 'object or string' - * @description - * [en] can be either a string or an object. If it is an string, it is set to an specific icon like 'ions-navicon'. If it is an object, it represents a dictionary of the icons depending on the modifier e.g. `{{default: 'ion-navicon', material: 'md-menu'}}` [/en] - * [jp] [/jp] - */ - icon: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.objectOf(React.PropTypes.string)]), - - /** - * @name size - * @type 'object or number' - * @description - * [en] can be either a number or an object. If it is an number, it specifies the icon size with a number in pixels. If it is an object, it represents a dictionary of the icon sizes depending on the modifier e.g. `{{default: 20, material: 18}}` [/en] - * [jp] [/jp] - */ - size: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.objectOf(React.PropTypes.number)]), - - /** - * @name rotate - * @type number - * @description - * [en] Number of degrees to rotate the icon. Valid values are 90, 180 and 270. [/en] - * [jp] [/jp] - */ - rotate: React.PropTypes.oneOf([0, 90, 180, 270]), - - /** - * @name fixedWidth - * @type bool - * @description - * [en] When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. [/en] - * [jp] [/jp] - */ - fixedWidth: React.PropTypes.bool, - - /** - * @name spin - * @type bool - * @description - * [en] Specify whether the icon should be spinning. [/en] - * [jp] [/jp] - */ - spin: React.PropTypes.bool - - }; - - var EVENT_TYPES = ['change', 'input']; - +Dialog.propTypes = { /** - * @original ons-input - * @category input - * @tutorial react/Reference/input + * @name onCancel + * @type function + * @required false * @description - * [en] - * An input element. The `type` attribute can be used to change the input type. All text input types as well as `checkbox` and `radio` are supported. The component will automatically render as a Material Design input on Android devices. Most attributes that can be used for a normal `` element can also be used on the `` element.. - [/en] - * [jp][/jp] - * @example - * { this.setState({text: event.target.value})} } - * modifier='material' - * placeholder='Username' /> + * [en] + * Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. + * [/en] + * [jp] どうしよう[/jp] */ + onCancel: React.PropTypes.func, - var Input = function (_BasicComponent) { - inherits(Input, _BasicComponent); - - function Input() { - classCallCheck(this, Input); - return possibleConstructorReturn(this, Object.getPrototypeOf(Input).apply(this, arguments)); - } - - createClass(Input, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var _this2 = this; - - get(Object.getPrototypeOf(Input.prototype), 'componentDidMount', this).call(this); - var node = ReactDOM__default.findDOMNode(this); - - EVENT_TYPES.forEach(function (eventType) { - node.addEventListener(eventType, _this2.props.onChange); - }); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - var _this3 = this; - - var node = ReactDOM__default.findDOMNode(this); - - EVENT_TYPES.forEach(function (eventType) { - node.removeEventListener(eventType, _this3.props.onChange); - }); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(props) { - var node = ReactDOM__default.findDOMNode(this); + /** + * @name isOpen + * @type bool + * @required true + * @description + * [en] + * Indicates whether the dialog is open and shown. + * [/en] + * [jp] [/jp] + */ + isOpen: React.PropTypes.bool.isRequired, - if (typeof props.value !== 'undefined' && node.value !== props.value) { - node.value = props.value; - } + /** + * @name isCancelable + * @type bool + * @required false + * @description + * [en] + * Specifies whether the dialog is cancelable or not. + * A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices + * [/en] + * [jp] [/jp] + */ + isCancelable: React.PropTypes.bool, - if (typeof props.checked !== 'undefined') { - node.checked = props.checked; - } - } - }, { - key: 'render', - value: function render() { - var _props = this.props; - var checked = _props.checked; - var other = objectWithoutProperties(_props, ['checked']); + /** + * @name isDisabled + * @type bool + * @required false + * @description + * [en] + * Specifies whether the dialog is disabled. + * [/en] + * [jp] [/jp] + */ + isDisabled: React.PropTypes.bool, - other['input-id'] = this.props.inputId; + /** + * @name animation + * @type string + * @required false + * @description + * [en] + * The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`. + * [/en] + * [jp] [/jp] + */ + animation: React.PropTypes.string, - Util.convert(other, 'disabled'); + /** + * @name modifier + * @type string + * @required false + * @description + * [en]The appearance of the dialog.[/en] + * [jp] [/jp] + */ + modifier: React.PropTypes.string, - return React.createElement('ons-input', _extends({ checked: checked ? '' : null }, other)); - } - }]); - return Input; - }(BasicComponent); + /** + * @name maskColor + * @type string + * @required false + * @description + * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en] + * [jp] [/jp] + */ + maskColor: React.PropTypes.string, - Input.propTypes = { - /** - * @name modifier - * @type string - * @required false - * @description - * [en]The appearance of the input.[/en] - * [jp] [/jp] - */ - modifier: React.PropTypes.string, + /** + * @name animationOptions + * @type object + * @required false + * @description + * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en] + * [jp] [/jp] + */ + animationOptions: React.PropTypes.object, - /** - * @name disabled - * @type bool - * @description - * [en] - * Specifies whether the input is disabled. - * [/en] - * [jp] [/jp] - */ - disabled: React.PropTypes.bool, + /** + * @name onPreShow + * @type function + * @required false + * @description + * [en] + * Called just before the alert dialog is displayed. + * [/en] + * [jp][/jp] + */ + onPreShow: React.PropTypes.func, - /** - * @name onChange - * @type function - * @description - * [en] Called when the text of the input changes.[/en] - * [jp][/jp] - */ - onChange: React.PropTypes.func, + /** + * @name onPostShow + * @type function + * @required false + * @description + * [en] + * Called just after the alert dialog is displayed. + * [/en] + * [jp][/jp] + */ + onPostShow: React.PropTypes.func, - /** - * @name value - * @type string - * @description - * [en] Content of the input.[/en] - * [jp][/jp] - */ - value: React.PropTypes.string, + /** + * @name onPreHide + * @type function + * @required false + * @description + * [en]Called just before the alert dialog is hidden.[/en] + * [jp][/jp] + */ + onPreHide: React.PropTypes.func, - /** - * @name placehoder - * @type string - * @description - * [en] Placeholder text. In Material Design this placeholder will be a floating label. [/en] - * [jp][/jp] - */ - placeholder: React.PropTypes.string, + /** + * @name onPostHide + * @type function + * @required false + * @description + * [en]Called just after the alert dialog is hidden.[/en] + * [jp][/jp] + */ + onPostHide: React.PropTypes.func +}; + +/** + * @original ons-fab + * @category form + * @tutorial react/Reference/fab + * @description + * [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. + * 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. + [/en] + * [jp][/jp] + * @example + * console.log('test1')} position='left bottom'> + + + + console.log('speed A')}> A + console.log('speed B')}> B + console.log('speed C')}> C + console.log('speed D')}> D + + */ - /** - * @name type - * @type string - * @description - * [en] Specify the input type. This is the same as the "type" attribute for normal inputs. - * 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. - [/en] - * [jp][/jp] - */ - type: React.PropTypes.string, +var Fab = function (_SimpleWrapper) { + inherits(Fab, _SimpleWrapper); - /** - * @name inputId - * @type string - * @description - * [en] Specify the "id" attribute of the inner element. This is useful when using