Repository: OnsenUI/react-onsenui
Branch: master
Commit: 565c36af0d8e
Files: 159
Total size: 384.1 KB
Directory structure:
gitextract_n2ari9l7/
├── .eslintrc.json
├── .gitignore
├── .gitmodules
├── .npmignore
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── circle.yml
├── demo/
│ ├── examples/
│ │ ├── AlertDialog.js
│ │ ├── BackButton.js
│ │ ├── BottomToolbar.js
│ │ ├── Carousel.js
│ │ ├── Dialog.js
│ │ ├── Icon.js
│ │ ├── Input.js
│ │ ├── LazyList.js
│ │ ├── List.js
│ │ ├── Modal.js
│ │ ├── MyToolbar.js
│ │ ├── Page.js
│ │ ├── Popover.js
│ │ ├── ProgressBar.js
│ │ ├── PullHook.js
│ │ ├── Range.js
│ │ ├── Ripple.js
│ │ ├── RowColumn.js
│ │ ├── SpeedDial.js
│ │ ├── Splitter.js
│ │ ├── Switch.js
│ │ └── Tabbar.js
│ ├── index.html
│ └── index.js
├── dist/
│ └── react-onsenui.js
├── docgen.js
├── docs/
│ ├── AlertDialog.json
│ ├── BackButton.json
│ ├── BasicComponent.json
│ ├── BottomToolbar.json
│ ├── Button.json
│ ├── Carousel.json
│ ├── CarouselItem.json
│ ├── Col.json
│ ├── Dialog.json
│ ├── Fab.json
│ ├── Icon.json
│ ├── Input.json
│ ├── LazyList.json
│ ├── List.json
│ ├── ListHeader.json
│ ├── ListItem.json
│ ├── Modal.json
│ ├── Navigator.json
│ ├── Page.json
│ ├── Popover.json
│ ├── ProgressBar.json
│ ├── ProgressCircular.json
│ ├── PullHook.json
│ ├── Range.json
│ ├── Ripple.json
│ ├── Row.json
│ ├── SimpleWrapper.json
│ ├── SpeedDial.json
│ ├── SpeedDialItem.json
│ ├── Splitter.json
│ ├── SplitterContent.json
│ ├── SplitterSide.json
│ ├── Switch.json
│ ├── Tab.json
│ ├── TabActive.json
│ ├── TabInactive.json
│ ├── Tabbar.json
│ ├── Toolbar.json
│ └── ToolbarButton.json
├── githubRelease.js
├── index.html
├── karma.conf.js
├── package.json
├── rollup.config.js
├── scripts/
│ └── react-docgen.js
├── src/
│ ├── components/
│ │ ├── AlertDialog.jsx
│ │ ├── BackButton.jsx
│ │ ├── BaseDialog.jsx
│ │ ├── BasicComponent.jsx
│ │ ├── BottomToolbar.jsx
│ │ ├── Button.jsx
│ │ ├── Carousel.jsx
│ │ ├── CarouselItem.jsx
│ │ ├── Col.jsx
│ │ ├── Dialog.jsx
│ │ ├── Fab.jsx
│ │ ├── Icon.jsx
│ │ ├── Input.jsx
│ │ ├── LazyList.jsx
│ │ ├── List.jsx
│ │ ├── ListHeader.jsx
│ │ ├── ListItem.jsx
│ │ ├── Modal.jsx
│ │ ├── Navigator.jsx
│ │ ├── Page.jsx
│ │ ├── Popover.jsx
│ │ ├── ProgressBar.jsx
│ │ ├── ProgressCircular.jsx
│ │ ├── PullHook.jsx
│ │ ├── Range.jsx
│ │ ├── Ripple.jsx
│ │ ├── Row.jsx
│ │ ├── SimpleWrapper.jsx
│ │ ├── SpeedDial.jsx
│ │ ├── SpeedDialItem.jsx
│ │ ├── Splitter.jsx
│ │ ├── SplitterContent.jsx
│ │ ├── SplitterSide.jsx
│ │ ├── Switch.jsx
│ │ ├── Tab.jsx
│ │ ├── TabActive.jsx
│ │ ├── TabInactive.jsx
│ │ ├── Tabbar.jsx
│ │ ├── Toolbar.jsx
│ │ ├── ToolbarButton.jsx
│ │ └── Util.js
│ └── index.js
├── test/
│ ├── backButton-test.js
│ ├── bottomToolbar-test.js
│ ├── button-test.js
│ ├── carousel-test.js
│ ├── carouselItem-test.js
│ ├── col-test.js
│ ├── fab-test.js
│ ├── icon-test.js
│ ├── input.js
│ ├── lazyList-test.js
│ ├── list-test.js
│ ├── listHeader-test.js
│ ├── listItem-test.js
│ ├── modal-test.js
│ ├── page-test.js
│ ├── progressBar-test.js
│ ├── progressBarCircular-test.js
│ ├── pullHook-test.js
│ ├── range-test.js
│ ├── ripple-test.js
│ ├── row-test.js
│ ├── speedDial-test.js
│ ├── speedDialItem-test.js
│ ├── splitter-test.js
│ ├── splitterContent-test.js
│ ├── splitterSide-test.js
│ ├── switch-test.js
│ ├── tab-test.js
│ ├── tabActive-test.js
│ ├── tabInactive-test.js
│ ├── tabbar-test.js
│ ├── testUtil.js
│ ├── todo
│ ├── toolbar-test.js
│ └── toolbarButton-test.js
├── tests.webpack.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"env": {
"es6": true,
"browser": true
},
"plugins": [
"standard",
"promise",
"react"
],
"globals": {
"document": false,
"navigator": false,
"window": false
},
"rules": {
"accessor-pairs": 2,
"arrow-spacing": [2, { "before": true, "after": true }],
"block-spacing": [2, "always"],
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"comma-dangle": [2, "never"],
"comma-spacing": [2, { "before": false, "after": true }],
"comma-style": [2, "last"],
"constructor-super": 2,
"curly": [2, "multi-line"],
"dot-location": [2, "property"],
"eol-last": 2,
"eqeqeq": [2, "allow-null"],
"generator-star-spacing": [2, { "before": true, "after": true }],
"handle-callback-err": [2, "^(err|error)$" ],
"indent": [2, 2, { "SwitchCase": 1 }],
"jsx-quotes": [2, "prefer-single"],
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
"keyword-spacing": [2, { "before": true, "after": true }],
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
"new-parens": 2,
"no-array-constructor": 2,
"no-caller": 2,
"no-class-assign": 2,
"no-cond-assign": 2,
"no-const-assign": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty-pattern": 2,
"no-eval": 2,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": [2, "functions"],
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
"no-lone-blocks": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-multiple-empty-lines": [2, { "max": 1 }],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-new": 2,
"no-new-func": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": [2, "except-parens"],
"no-self-assign": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-trailing-spaces": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-unexpected-multiline": 2,
"no-unneeded-ternary": [2, { "defaultAssignment": false }],
"no-unreachable": 2,
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
"no-useless-call": 2,
"no-useless-constructor": 2,
"no-with": 2,
"one-var": [2, { "initialized": "never" }],
"operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
"padded-blocks": [2, "never"],
"quotes": [2, "single", "avoid-escape"],
"semi": [2, "always"],
"semi-spacing": [2, { "before": false, "after": true }],
"space-before-blocks": [2, "always"],
"space-before-function-paren": [2, "never"],
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"space-unary-ops": [2, { "words": true, "nonwords": false }],
"spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
"template-curly-spacing": [2, "never"],
"use-isnan": 2,
"valid-typeof": 2,
"wrap-iife": [2, "any"],
"yield-star-spacing": [2, "both"],
"yoda": [2, "never"],
"standard/object-curly-even-spacing": [2, "either"],
"standard/array-bracket-even-spacing": [2, "either"],
"standard/computed-property-even-spacing": [2, "even"],
"promise/param-names": 2,
// react rules
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,
"react/jsx-no-undef" : 2
},
"globals": {
"CustomElements": false
}
}
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
node_modules
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Demo bundle
demo/bundle.js
================================================
FILE: .gitmodules
================================================
[submodule "OnsenUI"]
path = OnsenUI
url = https://github.com/OnsenUI/OnsenUI.git
================================================
FILE: .npmignore
================================================
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
node_modules
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Demos
demo
# Submodule
OnsenUI
================================================
FILE: CHANGELOG.md
================================================
CHANGELOG
====
v1.0.1
----
* list: Support static lists.
* navigator: Properly render pages.
v1.0.0
----
v0.7.4
----
* modal: Fix hide and show logic.
* carousel: Refresh carousel when number of children changes.
v0.7.2
----
* tabbar: Fix regression.
v0.7.1
----
* navigator: add routes to events
v0.7.0
----
* tabbar: New interface with index.
* page: Fixed bug with modifier not being applied to pages. Add contentStyle property.
* page: Add `renderFixed` prop to render fixed position conent.
* range: Fix `value` prop.
================================================
FILE: ISSUE_TEMPLATE.md
================================================
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "{}"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright {yyyy} {name of copyright owner}
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
**This package has been moved to the [main Onsen UI repository](https://github.com/OnsenUI/OnsenUI/tree/master/bindings/react).**
[](https://badge.fury.io/js/react-onsenui)
# Onsen UI - React Components for Cordova/PhoneGap hybrid apps
**Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.**
[Onsen UI](https://onsen.io/2/) is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.
It can be used to build hybrid apps with [Cordova](https://cordova.apache.org/) and [PhoneGap](http://phonegap.com/) but can also run in the browser.
We have build a [Tutorial Website](http://tutorial.onsen.io/?framework=react&category=Getting%20started&module=Using%20the%20components) where you can see live examples of OnsenUI without installing it. If you find any issues, feel free to report at [our OpenSource Repository](https://github.com/OnsenUI/tutorial). Also pull requests are welcome.
To learn how to use these components, please refer to [the documentation](https://onsen.io/v2/docs/guide/react/index.html). You can also check out our [kitchensink example](https://github.com/OnsenUI/react-onsenui-kitchensink) to learn how to use this or you can [click here](http://onsenui.github.io/react-onsenui-kitchensink/demo.html) for a quick demo.
We also have a highly engaged [community](https://community.onsen.io/) that will be available to answer your questions.
The main [Onsen UI repo](https://github.com/OnsenUI/OnsenUI) contains the CSS and core JS library for these components. Please star it if you like it!
## Using Onsen UI with npm
The easiest way to use these components is by installing them through npm and using a CommonJS module system such as browserify and webpack (the kitchensink example above is using browserify).
You need to install `react`, `react-dom`, `onsenui` and `react-onsenui`. You probably also need to add [Babel](https://babeljs.io/) with the `react` preset.
Now you can import the necessary libraries in your code:
```jsx
var React = require('react');
var ReactDOM = require('react-dom');
require('onsenui'); // This needs to be imported to bootstrap the components.
var Ons = require('react-onsenui');
var MyPage = React.createClass({
renderToolbar: function() {
return (
Onsen UI
);
}
render: function() {
return (
This is Onsen UI!
);
}
});
ReactDOM.render(, document.getElementById('app'));
```
Take a look at the kitchensink example for more complex code.
**Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.**
[Onsen UI](https://onsen.io/2/) is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.
It can be used to build hybrid apps with [Cordova](https://cordova.apache.org/) and [PhoneGap](http://phonegap.com/) but can also run in the browser.
To learn how to use these components, please refer to [the documentation](https://onsen.io/v2/docs/guide/react/index.html). You can also check out our [kitchensink example](https://github.com/OnsenUI/react-onsenui-kitchensink) to learn how to use this or you can [click here](http://onsenui.github.io/react-onsenui-kitchensink/demo.html) for a quick demo.
The main [Onsen UI repo](https://github.com/OnsenUI/OnsenUI) contains the CSS and core JS library for these components. Please star it if you like it!
# Contribution
We always welcome contributions by either opening an issue or doing a pull request.
To test this repo in the current state of master, one needs to first clone this repo recursivly (it binds onsenui in a specific version) and run `npm install` in both the main folder and OnsenUI folder and finally build OnsenUI.
```bash
$ git clone --recursive git@github.com:OnsenUI/react-onsenui.git
$ npm install
$ cd OnsenUI; npm install
$ npm install -g gulp # install gulp if not already installed
$ gulp build
```
After these changes one can run our demo examples with `npm run dev` and open a brower at port 9000.
================================================
FILE: circle.yml
================================================
machine:
node:
version: 6.2.0
================================================
FILE: demo/examples/AlertDialog.js
================================================
import React from 'react';
import {Page, Toolbar, Button, BackButton, AlertDialog} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
}
handleClick() {
this.setState({
isOpen: true
});
}
handleCancel() {
this.setState({
isOpen: false
});
}
render() {
return (
Back
Alert dialog
}
>
Warning!
An error has occurred!
);
}
}
================================================
FILE: demo/examples/BackButton.js
================================================
import React from 'react';
import ons from '../../OnsenUI/build/js/onsenui.js'
import {
Page,
Toolbar,
BackButton,
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
ons.notification.confirm('Do you really want to go back?')
.then(
(response) => {
if (response === 1) {
this.props.navigator.popPage();
}
}
);
}
renderToolbar() {
return (
}
>
HEADER
}
renderRow={(example) => (
{example.title}
)}
/>
);
}
}
class App extends React.Component {
renderPage(route, navigator) {
const props = route.props || {};
props.navigator = navigator;
return React.createElement(route.component, route.props);
}
render() {
return (
console.log('prepush', e)}
onPostPush={e => console.log('postpush', e)}
onPrePop={e => console.log('prepop', e)}
onPostPop={e => console.log('postpop', e)}
initialRoute={{
component: Examples,
props: {
key: 'examples'
}
}}
/>
);
}
}
ReactDOM.render(, document.getElementById('app'));
================================================
FILE: dist/react-onsenui.js
================================================
/*! react-onsenui v1.0.3 - Wed Oct 26 2016 16:40:29 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';
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) {
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 val = dict[name];
if (val) {
if (newName !== name) {
delete dict[name];
}
dict[newName] = fun(val);
} else {
dict[newName] = null;
}
return dict;
}
};
var asyncGenerator = function () {
function AwaitValue(value) {
this.value = value;
}
function AsyncGenerator(gen) {
var front, back;
function send(key, arg) {
return new Promise(function (resolve, reject) {
var request = {
key: key,
arg: arg,
resolve: resolve,
reject: reject,
next: null
};
if (back) {
back = back.next = request;
} else {
front = back = request;
resume(key, arg);
}
});
}
function resume(key, arg) {
try {
var result = gen[key](arg);
var value = result.value;
if (value instanceof AwaitValue) {
Promise.resolve(value.value).then(function (arg) {
resume("next", arg);
}, function (arg) {
resume("throw", arg);
});
} else {
settle(result.done ? "return" : "normal", result.value);
}
} catch (err) {
settle("throw", err);
}
}
function settle(type, value) {
switch (type) {
case "return":
front.resolve({
value: value,
done: true
});
break;
case "throw":
front.reject(value);
break;
default:
front.resolve({
value: value,
done: false
});
break;
}
front = front.next;
if (front) {
resume(front.key, front.arg);
} else {
back = null;
}
}
this._invoke = send;
if (typeof gen.return !== "function") {
this.return = undefined;
}
}
if (typeof Symbol === "function" && Symbol.asyncIterator) {
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
return this;
};
}
AsyncGenerator.prototype.next = function (arg) {
return this._invoke("next", arg);
};
AsyncGenerator.prototype.throw = function (arg) {
return this._invoke("throw", arg);
};
AsyncGenerator.prototype.return = function (arg) {
return this._invoke("return", arg);
};
return {
wrap: function (fn) {
return function () {
return new AsyncGenerator(fn.apply(this, arguments));
};
},
await: function (value) {
return new AwaitValue(value);
}
};
}();
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);
}
}
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;
if (getter === undefined) {
return undefined;
}
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);
}
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 objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var set = function set(object, property, value, receiver) {
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent !== null) {
set(parent, property, value, receiver);
}
} else if ("value" in desc && desc.writable) {
desc.value = value;
} else {
var setter = desc.set;
if (setter !== undefined) {
setter.call(receiver, value);
}
}
return value;
};
var BaseDialog = function (_React$Component) {
inherits(BaseDialog, _React$Component);
function BaseDialog() {
classCallCheck(this, BaseDialog);
return possibleConstructorReturn(this, (BaseDialog.__proto__ || Object.getPrototypeOf(BaseDialog)).apply(this, arguments));
}
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, (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,
/**
* @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,
/**
* @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() {
var _ref;
classCallCheck(this, BasicComponent);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _this = possibleConstructorReturn(this, (_ref = BasicComponent.__proto__ || Object.getPrototypeOf(BasicComponent)).call.apply(_ref, [this].concat(args)));
_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;
}
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");
}
ons._autoStyle.prepare(node);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.updateClasses();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.updateClasses();
}
}]);
return BasicComponent;
}(React.Component);
var SimpleWrapper = function (_BasicComponent) {
inherits(SimpleWrapper, _BasicComponent);
function SimpleWrapper() {
classCallCheck(this, SimpleWrapper);
return possibleConstructorReturn(this, (SimpleWrapper.__proto__ || Object.getPrototypeOf(SimpleWrapper)).apply(this, arguments));
}
createClass(SimpleWrapper, [{
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'disabled');
Util.convert(others, 'ripple');
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(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;
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this._updateOnClick(this.props);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
this._updateOnClick(props);
}
}]);
return BackButton;
}(SimpleWrapper);
BackButton.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the back button.[/en]
* [jp][/jp]
*/
modifier: React.PropTypes.string,
/**
* @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]Toolbar component that is positioned at the bottom of the page.[/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));
}
createClass(BottomToolbar, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-bottom-toolbar';
}
}]);
return BottomToolbar;
}(SimpleWrapper);
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));
}
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,
/**
* @name disabled
* @type bool
* @description
* [en]
* Specifies whether the button is disabled.
* [/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool,
/**
* @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
};
/**
* @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: 'componentDidUpdate',
value: function componentDidUpdate(props) {
var node = ReactDOM.findDOMNode(this);
if (this.props.children.length !== props.children.length) {
node.refresh();
}
}
}, {
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);
});
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);
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']),
/**
* @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.oneOfType([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.oneOfType([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 disabled
* @type bool
* @description
* [en]If true, the carousel will be disabled.[/en]
* [jp] [/jp]
*/
disabled: 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 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,
/**
* @name onRefresh
* @type function
* @description
* [en]Called when the carousel has been refreshed. [/en]
* [jp] [/jp]
*/
onRefresh: React.PropTypes.func,
/**
* @name onOverscroll
* @type function
* @description
* [en]Called when the carousel has been overscrolled. [/en]
* [jp] [/jp]
*/
onOverscroll: React.PropTypes.func,
/**
* @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));
}
createClass(CarouselItem, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-carousel-item';
}
}]);
return CarouselItem;
}(SimpleWrapper);
CarouselItem.propTypes = {
/**
* @name modifier
* @type string
* @description
* [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));
}
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])
};
/**
* @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
*/
var Dialog = function (_BaseDialog) {
inherits(Dialog, _BaseDialog);
function Dialog() {
classCallCheck(this, Dialog);
return possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).apply(this, arguments));
}
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,
/**
* @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 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
*/
var Fab = function (_SimpleWrapper) {
inherits(Fab, _SimpleWrapper);
function Fab() {
classCallCheck(this, Fab);
return possibleConstructorReturn(this, (Fab.__proto__ || Object.getPrototypeOf(Fab)).apply(this, arguments));
}
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,
/**
* @name 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
};
/**
* @original ons-icon
* @category visual
* @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
*/
var Icon = function (_SimpleWrapper) {
inherits(Icon, _SimpleWrapper);
function Icon() {
classCallCheck(this, Icon);
return possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).apply(this, arguments));
}
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'];
/**
* @original ons-input
* @category form
* @tutorial react/Reference/input
* @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' />
*/
var Input = function (_BasicComponent) {
inherits(Input, _BasicComponent);
function Input() {
classCallCheck(this, Input);
return possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
}
createClass(Input, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
get(Input.prototype.__proto__ || 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);
if (typeof props.value !== 'undefined' && node.value !== props.value) {
node.value = props.value;
}
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']);
other['input-id'] = this.props.inputId;
Util.convert(other, 'disabled');
return React.createElement('ons-input', _extends({ checked: checked ? '' : null }, other));
}
}]);
return Input;
}(BasicComponent);
Input.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the input.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name disabled
* @type bool
* @description
* [en]
* Specifies whether the input is disabled.
* [/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool,
/**
* @name onChange
* @type function
* @description
* [en] Called when the text of the input changes.[/en]
* [jp][/jp]
*/
onChange: React.PropTypes.func,
/**
* @name value
* @type string
* @description
* [en] Content of the input.[/en]
* [jp][/jp]
*/
value: React.PropTypes.string,
/**
* @name checked
* @type boolean
* @description
* [en]Set to to true if the input is checked. Only used for radio buttons and checkboxes.[/en]
* [ja][/ja]
*/
checked: React.PropTypes.bool,
/**
* @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 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,
/**
* @name inputId
* @type string
* @description
* [en] Specify the "id" attribute of the inner `` element. This is useful when using