Showing preview only (421K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<!--
This repository has been merged into OnsenUI/OnsenUI repo and will soon be closed.
For react-onsenui issues, please use the following link:
https://github.com/OnsenUI/OnsenUI/issues/new
-->
================================================
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 (
<Ons.Toolbar>
<div className='center'>Onsen UI</div>
</Ons.Toolbar>
);
}
render: function() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<p>This is Onsen UI!</p>
</Ons.Page>
);
}
});
ReactDOM.render(<MyPage />, 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 (
<Page
renderToolbar={
() => <Toolbar>
<div className="left">
<BackButton>Back</BackButton>
</div>
<div className="center">
Alert dialog
</div>
</Toolbar>
}
>
<p style={{textAlign: 'center', paddingTop: '10px'}}>
<Button onClick={this.handleClick.bind(this)}>Show dialog</Button>
</p>
<AlertDialog maskColor='blue' isOpen={this.state.isOpen} animation='default'
animationOptions={{
duration: 1.0,
delay: 0.3,
timing: 'ease-in'
}}
onCancel={this.handleCancel.bind(this)} isCancelable={false} >
<div className="alert-dialog-title">Warning!</div>
<div className="alert-dialog-content">
An error has occurred!
</div>
<div className="alert-dialog-footer">
<button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
Cancel
</button>
<button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
Ok
</button>
</div>
</AlertDialog>
</Page>
);
}
}
================================================
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 (
<Toolbar>
<div className='left'>
<BackButton onClick={this.handleClick.bind(this)}>
Back
</BackButton>
</div>
<div className='center'>Back button</div>
</Toolbar>
);
}
render() {
return (
<Page
renderToolbar={this.renderToolbar.bind(this)}
>
</Page>
);
}
}
================================================
FILE: demo/examples/BottomToolbar.js
================================================
import React from 'react';
import {Page, Button, BottomToolbar} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material'
};
}
toggleModifier() {
this.setState({
modifier: this.state.modifier === 'material' ? '' : 'material'
});
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='Page' />}
renderBottomToolbar={() => <BottomToolbar> <div> Bottom Toolbar content</div></BottomToolbar>}
modifier={this.state.modifier} >
<p>
This is a page!
</p>
<p>
<Button modifier={this.state.modifier} onClick={this.toggleModifier.bind(this)}>Switch modifier</Button>
<br />
<br />
1 <br />
1 <br />
1 <br />
</p>
</Page>
);
}
}
================================================
FILE: demo/examples/Carousel.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import MyToolbar from './MyToolbar';
import {
Page,
Button,
Navigator,
Toolbar,
List,
ListItem,
Ripple,
Carousel,
CarouselItem,
BottomToolbar,
ToolbarButton
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
index: 1,
items: [
'gray',
'red',
'orange',
'blue'
]
};
this.goTo = this.goTo.bind(this);
}
goTo(number) {
console.log('number', number);
this.setState({index: number});
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='Fullscreen' />}>
<Carousel
animationOptions={{
duration: 1.0,
delay: 0.3,
timing: 'ease-in'
}}
index={this.state.index}
onPostChange={(event) => this.setState({index: event.activeIndex})}
onOverscroll={() => console.log('onOverscroll')}
onRefresh={() => console.log('onRefresh')}
ref='carousel' swipeable overscrollable autoScroll fullscreen autoScrollRatio={0.2}>
{this.state.items.map((item) =>
<CarouselItem style={{backgroundColor: item}}>
<div className='item-label'>{item}</div>
{this.state.items.map((item, index) =>
<Button onClick={() => this.goTo(index)}> Go to page {index + 1}</Button>
)}
<Button onClick={() => this.setState({items: this.state.items.slice(0, this.state.items.length - 1)})}>Remove</Button>
<Button onClick={() => this.setState({items: [...this.state.items, 'yellow']})}>Add</Button>
</CarouselItem>
)}
</Carousel>
<BottomToolbar>
<ToolbarButton style={{float: 'right'}} onClick={this.moveRight}>Next</ToolbarButton>
<ToolbarButton style={{float: 'left'}} onClick={this.moveLeft}>Prev</ToolbarButton>
</BottomToolbar>
</Page>
);
}
};
================================================
FILE: demo/examples/Dialog.js
================================================
import React from 'react';
import {
Page,
Button,
Toolbar,
Dialog,
Navigator,
Input
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
import ons from '../../OnsenUI/build/js/onsenui.js';
class MyPage2 extends React.Component {
render() {
return (
<Page>
<Toolbar inline>
<div className='center'>Description</div>
</Toolbar>
<br />
<div style={{textAlign: 'center'}}>
<Input value={this.props.description} onChange={this.props.onChange} />
<p>
<Button modifier='light' onClick={this.props.popPage}>Previous</Button>
</p>
</div>
</Page>
);
}
};
class FirstPage extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (<Page>
<Toolbar>
<div className='center'>Name</div>
</Toolbar>
<br />
<div style={{textAlign: 'center'}}>
<Input value={this.props.name} onChange={this.props.onNameChanged} />
<p>
<Button modifier='light' onClick={this.props.pushPage}>Next</Button>
</p>
</div>
</Page>);
}
};
class MyDialog extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.popPage = this.popPage.bind(this);
this.pushPage = this.pushPage.bind(this);
this.onNameChanged = this.onNameChanged.bind(this);
this.onDescriptionChanged = this.onDescriptionChanged.bind(this);
this.renderPage = this.renderPage.bind(this);
}
popPage() {
this.refs.navi.popPage();
}
pushPage() {
this.refs.navi.pushPage(
{comp: MyPage2, props: {onChange: this.onDescriptionChanged, popPage: this.popPage}});
// <MyPage2 description={this.props.description} onChange={this.onDescriptionChanged} popPage={this.popPage} />);
}
onNameChanged(event) {
this.props.onNameChanged(event.target.value);
}
onDescriptionChanged(event) {
console.log('description changed');
this.props.onDescriptionChanged(event.target.value);
}
renderPage(route, navigator) {
var comp = route.comp;
var props = route.props;
props.description = this.props.description;
props.name = this.props.name;
return React.createElement(comp, props);
}
render() {
return (
<Dialog
onCancel={this.props.onCancel} isOpen={this.props.isOpen} animation='default' cancelable>
<Navigator animation='slide' ref='navi'
initialRoute={{comp: FirstPage, props: {
pushPage: this.pushPage, onNameChanged: this.onNameChanged }}}
renderPage={this.renderPage}>
</Navigator>
</Dialog>
);
}
};
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogOpen: false,
name: '',
description: ''
};
this.hide = this.hide.bind(this);
this.onNameChanged = this.onNameChanged.bind(this);
this.onDescriptionChanged = this.onDescriptionChanged.bind(this);
this.showAlert = this.showAlert.bind(this);
this.showAlert2 = this.showAlert2.bind(this);
}
hide() {
console.log('call hide');
this.setState({dialogOpen: false});
}
onNameChanged(value) {
this.setState({name: value});
}
onDescriptionChanged(value) {
this.setState({description: value});
}
showAlert() {
this.setState({dialogOpen: true});
}
showAlert2() {
ons.notification.alert({
message: 'You pressed "ok"'
});
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='Dialog' />}>
<div style={{textAlign: 'center'}}>
<h1>Page Content</h1>
<Button onClick={this.showAlert2}> Hello </Button>
<Button onClick={this.showAlert}> Show Alert </Button>
<div> Name : {this.state.name} </div>
<div> Description : {this.state.description} </div>
</div>
<MyDialog onCancel={this.hide} name={this.state.name} description={this.state.description}
onNameChanged={this.onNameChanged}
onDescriptionChanged={this.onDescriptionChanged}
isOpen={this.state.dialogOpen} />
</Page>
);
}
};
================================================
FILE: demo/examples/Icon.js
================================================
import React from 'react';
import {Button, Page, Icon} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.changeModifier = this.changeModifier.bind(this);
this.state = {
showMaterial: false,
btnText: 'Switch to material design',
modifier: 'defaullt',
};
}
changeModifier() {
if (this.state.showMaterial) {
this.setState({
showMaterial: false,
btnText: 'Switch to material design',
modifier: 'defaullt',
});
} else {
this.setState({
showMaterial: true,
btnText: 'Switch to default design',
modifier: 'material'
});
}
}
render() {
return (
<Page modifier={this.state.modifier} renderToolbar={() => <MyToolbar modifier={this.state.modifier} title='Icon' />} >
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<p> </p>
<Button modifier={this.state.modifier} onClick={this.changeModifier} > {this.state.btnText} </Button>
<p> modifier: {this.state.modifier} </p>
<p> Button standard </p>
<ons-icon
modifier={this.state.modifier}
fixed-width='false'
icon='ion-edit, material:md-edit' size='20px, material:20px' />
<p> Button standard2</p>
{[0, 90, 180, 270].map((val) =>
<Icon
modifier={this.state.modifier}
fixedWidth={true}
rotate={val}
size={{
default: 20,
material: 18
}}
icon={{
default: 'shield',
material: 'md-edit'
}}/>
)}
</div>
</Page>
);
}
}
================================================
FILE: demo/examples/Input.js
================================================
import React from 'react';
import {
Page,
Toolbar,
ToolbarButton,
BackButton,
Input
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
text: 'text',
selected: [1],
selected2: 1
};
}
handleCheckbox(idx, event) {
const selected = this.state.selected;
if (event.target.checked && selected.indexOf(idx) < 0) {
selected.push(idx);
}
else if(!event.target.checked) {
selected.splice(selected.indexOf(idx), 1);
}
this.setState({selected: selected});
}
handleRadio(idx, event) {
if (event.target.checked) {
this.setState({selected2: idx});
}
}
render() {
return (
<Page
renderToolbar = { () => <Toolbar>
<div className='left'><BackButton>Back</BackButton></div>
<div className='center'>Input</div>
</Toolbar>
}
>
<p>
Please enter a text
</p>
<Input disabled={false} value={this.state.text} float onChange={(event) => {
this.setState({text: event.target.value})} } modifier='material' placeholder='Username'></Input>
<input value={this.state.text} onChange={(event) => {
this.setState({text: event.target.value});
}} />
<div> Text : {this.state.text} </div>
<h2>Checkboxes</h2>
{
[0, 1, 2].map((idx) => (
<div>
<input
type='checkbox'
onChange={this.handleCheckbox.bind(this, idx)}
checked={this.state.selected.indexOf(idx) >= 0}
/>
<Input
type='checkbox'
onChange={this.handleCheckbox.bind(this, idx)}
checked={this.state.selected.indexOf(idx) >= 0}
/>
</div>
))
}
<p>Selected: [{this.state.selected.join(', ')}]</p>
<h2>Radio buttons</h2>
{
[0, 1, 2].map((idx) => (
<div>
<input
type='radio'
onChange={this.handleRadio.bind(this, idx)}
checked={idx === this.state.selected2}
/>
<Input
type='radio'
onChange={this.handleRadio.bind(this, idx)}
checked={idx === this.state.selected2}
/>
</div>
))
}
<p>Selected: {this.state.selected2}</p>
</Page>
);
}
}
================================================
FILE: demo/examples/LazyList.js
================================================
import React from 'react';
import MyToolbar from './MyToolbar';
import ons from '../../OnsenUI/build/js/onsenui.js';
import {
Page,
BackButton,
Button,
ListItem,
LazyList,
Toolbar
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
length: 0
};
}
renderRow(index) {
return (
<ListItem key={index}>
{'Item ' + (index + 1)}
</ListItem>
);
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='LazyList' />} >
<div style={{height: 100}}>
<Button id='btn1' onClick={() => this.setState({length: 10})} > Change Length 10 </Button>
<Button id='btn2' onClick={() => this.setState({length: 100})} > Change Length 100 </Button>
<LazyList
length={this.state.length}
renderRow={this.renderRow}
calculateItemHeight={() => ons.platform.isAndroid() ? 76 : 45}
/>
</div>
</Page>
);
}
}
================================================
FILE: demo/examples/List.js
================================================
import React from 'react';
import MyToolbar from './MyToolbar';
import {
Page,
List,
ListItem,
ListHeader,
Toolbar,
ToolbarButton,
BackButton,
Button
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [1, 2, 3, 4, 5, 6]
};
}
reverseData() {
this.setState({
data: this.state.data.reverse()
});
}
remove(idx) {
const data = this.state.data;
data.splice(idx, 1);
this.setState({
data: data
});
}
add() {
const data = this.state.data;
data.push(data.length);
this.setState({
data: data
});
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='List' />} >
<List
dataSource={this.state.data}
renderHeader={() => <ListHeader style={{fontSize: 15}} className="testClass"> Header Text </ListHeader> }
renderRow={(row, idx) => (
<ListItem modifier={idx === this.state.data.length - 1 ? 'longdivider' : null}>
{row}
<Button modifier="quiet" onClick={this.remove.bind(this, idx)}>Remove</Button>
</ListItem>
)}
renderFooter={() => (
<ListItem><Button modifier="quiet" onClick={this.add.bind(this)}>Add more</Button></ListItem>
)}
/>
</Page>
);
}
}
================================================
FILE: demo/examples/Modal.js
================================================
import React from 'react';
import {
Page,
Modal,
Button,
BackButton,
Toolbar,
ToolbarButton,
Icon
} from '../../src/index.js';
const MyToolbar = ({ title = '', leftButton }) => (
<Toolbar>
{leftButton &&
<div className='left'>
{leftButton}
</div>
}
<div className='center'>
{title}
</div>
</Toolbar>
);
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
}
renderModalToolbar() {
return (
<MyToolbar
title='This is a modal page.'
leftButton={(
<ToolbarButton onClick={() => this.setState({ showModal: false })}>
<Icon
size={{default: 24, material: 40}}
icon={{default: 'ion-close', material: 'md-close'}}
/>
</ToolbarButton>
)}
/>
);
}
renderModal() {
return (
<Modal
isOpen={this.state.showModal}
animation='fade'
animationOptions={{duration: 2, delay: 0.2, timing: 'ease-in'}}
onShow={() => console.log('modal shown')}
onHide={() => console.log('modal hidden')}
>
<Page renderToolbar={this.renderModalToolbar.bind(this)} style={{backgroundColor: 'blue'}}>
<p>
I'm a modal page.
</p>
</Page>
</Modal>
);
}
render() {
return (
<Page
renderModal={this.renderModal.bind(this)}
renderToolbar={() => (
<MyToolbar
title='Page'
leftButton={<BackButton modifier={this.props.modifier}>Back</BackButton>}
/>
)}
>
<section style={{ padding: 15 }}>
<Button onClick={() => this.setState({ showModal: true })}>
Open Modal
</Button>
</section>
</Page>
);
}
}
================================================
FILE: demo/examples/MyToolbar.js
================================================
import React from 'react';
import {Toolbar, BackButton} from '../../src/index.js';
export default class extends React.Component {
render() {
return(
<Toolbar modifier={this.props.modifier} >
<div className="left"><BackButton modifier={this.props.modifier}>Back</BackButton></div>
<div className="center">{this.props.title}</div>
</Toolbar>
)
}
}
================================================
FILE: demo/examples/Page.js
================================================
import React from 'react';
import {Page, Button} from '../../src/index.js';
import MyToolbar from './MyToolbar';
class Page2 extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log('props');
console.log(this.props);
return (
<Page>
lala
<Button onClick={() => this.props.navigator.popPage()}> Pop </Button>
</Page>
);
}
};
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material'
};
}
toggleModifier() {
this.setState({
modifier: this.state.modifier === 'material' ? '' : 'material'
});
}
render() {
return (
<Page
contentStyle={{padding: 40}}
renderToolbar={() => <MyToolbar title='Page' />}
modifier={this.state.modifier} >
<p>
This is a page!
</p>
<p>
<Button modifier={this.state.modifier} onClick={this.toggleModifier.bind(this)}>Switch modifier</Button>
<br />
<br />
<Button modifier={this.state.modifier} onClick={
() =>
this.props.navigator.replacePage({
title: 'Input',
component: Page2,
props: {
navigator: this.props.navigator
}
})
}> Replace Page </Button>
</p>
</Page>
);
}
}
================================================
FILE: demo/examples/Popover.js
================================================
import React from 'react';
import MyToolbar from './MyToolbar';
import {
Page,
Button,
Popover
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {isOpen: false};
this.showClick = this.showClick.bind(this);
this.getTarget = this.getTarget.bind(this);
this.cancel = this.cancel.bind(this);
}
showClick(target) {
console.log('target: ' + target);
this.setState({isOpen: true, target: target});
}
getTarget() {
return this.state.target;
}
cancel() {
console.log('cancel');
this.setState({isOpen: false});
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='Popover' />}
>
<div className='navigation-bar'>
<div className='navigation-bar__left'>
<span ref='navigation' onClick={() => this.showClick(this.refs.navigation)} className='toolbar-button--outline navigation-bar__line-height'>
<i className='ion-navicon' style={{fontSize: 32, verticalAlign: -6}}></i>
</span>
</div>
<div className='navigation-bar__center'>
Popover demo!
</div>
<div className='navigation-bar__right'>
<span ref='topRight' onClick={() => this.showClick(this.refs.topRight)} className='toolbar-button--outline navigation-bar__line-height'>Button</span>
</div>
</div>
<div style={{textAlign: 'center'}}>
<br />
<br />
<Button ref='button' onClick={() => this.showClick(this.refs.button)}>Click me!</Button>
</div>
<div className='tab-bar'>
<label onClick={() => this.showClick(this.refs.stop)} className='tab-bar__item'>
<input type='radio' name='tab-bar-b' defaultChecked='checked' />
<button ref='stop' className='tab-bar__button'>
<i className='tab-bar__icon ion-stop'></i>
</button>
</label>
<label onClick={() => this.showClick(this.refs.record)} className='tab-bar__item'>
<input type='radio' name='tab-bar-b' />
<button ref='record' className='tab-bar__button'>
<i className='tab-bar__icon ion-record'></i>
</button>
</label>
<label onClick={() => this.showClick(this.refs.star)} className='tab-bar__item'>
<input type='radio' name='tab-bar-b' />
<button ref='star' className='tab-bar__button'>
<i className='tab-bar__icon ion-star'></i>
</button>
</label>
<label onClick={() => this.showClick(this.refs.cloud)} className='tab-bar__item'>
<input type='radio' name='tab-bar-b' />
<button ref='cloud' className='tab-bar__button'>
<i className='tab-bar__icon ion-ios-cloud-outline'></i>
</button>
</label>
<label onClick={() => this.showClick(this.refs.pie)} className='tab-bar__item'>
<input type='radio' name='tab-bar-b' />
<button ref='pie' className='tab-bar__button'>
<i className='tab-bar__icon ion-ios-pie'></i>
</button>
</label>
</div>
<Popover isOpen={this.state.isOpen} onCancel={this.cancel} getTarget={this.getTarget} direction='up down' cancelable>
<div style={{textAlign: 'center', opacity: 0.5}}>
<p>This is a popover!</p>
<p><small>Click the background to remove the popover.</small></p>
</div>
</Popover>
</Page>
);
}
};
================================================
FILE: demo/examples/ProgressBar.js
================================================
import React from 'react';
import {
Page,
ProgressBar,
ProgressCircular
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material',
value: 0,
secondValue: 100
};
this.increaseTime = this.increaseTime.bind(this);
this.increaseTime();
}
increaseTime() {
this.timeout = setTimeout(() => {
let val = this.state.value + 5;
if (val > 100) val -= 100;
this.setState({value: val}, this.increaseTime);
}, 500);
}
componentWillUnmount() {
clearTimeout(this.timeout);
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='ProgresBar' />}
modifier={this.state.modifier} >
<br />
<p>
Progress Bar:
</p>
<ProgressBar value={this.state.value} />
<ProgressBar value={55} secondaryValue={87} />
<ProgressBar indeterminate />
<br />
<p>
Circular Progress Bar:
</p>
<ProgressCircular value={this.state.value} />
<ProgressCircular value={55} secondaryValue={87} />
<ProgressCircular indeterminate />
</Page>
);
}
}
================================================
FILE: demo/examples/PullHook.js
================================================
import React from 'react';
import {
Page,
PullHook,
Fab,
Icon,
Toolbar,
List,
ListItem
} from '../../src/index.js';
import MyToolbar from './MyToolbar.js';
class MyPullHook extends React.Component {
constructor(props) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onChange = this.onChange.bind(this);
this.state = {pullHookState: 'initial'};
}
onLoad(done) {
setTimeout(done, 1000);
}
onChange(event) {
console.log('state : ' + event.state);
this.setState({pullHookState: event.state});
}
render() {
var child;
if (this.state.pullHookState === 'initial') {
child = <span >
<Icon
size={35}
spin={false}
icon='ion-arrow-down-a' />
Pull down to refresh
</span>;
} else if (this.state.pullHookState === 'preaction') {
child = <span><Icon size={35} spin={false} icon='ion-arrow-up-a'></Icon> Release to refresh</span>;
} else {
child = <span><Icon size={35} spin={true} icon='ion-load-d'></Icon> Loading data...</span>;
}
return (
<PullHook onChange={this.onChange} onLoad={this.onLoad}>
{child}
</PullHook>
);
}
};
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material'
};
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='Dialog' />}
renderFixed={() => <Fab position='bottom right'><Icon icon='md-plus' /></Fab>}>
<MyPullHook />
<List
dataSource={[1, 2, 3, 4]}
renderRow={(data) => <ListItem>{data}</ListItem>} />
</Page>
);
}
}
================================================
FILE: demo/examples/Range.js
================================================
import React from 'react';
import {
Page,
Range
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.changeFirstRange = this.changeFirstRange.bind(this);
this.changeSecondRange = this.changeSecondRange.bind(this);
this.state = {value: 20, value2: 50};
}
changeFirstRange(event) {
console.log(event.target.value);
this.setState({
value: parseInt(event.target.value)
});
}
changeSecondRange(event) {
this.setState({
value2: parseInt(event.target.value)
});
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='Range' />} >
<div style={{margin: 50}}>
<Range value={this.state.value} onChange={this.changeFirstRange} />
<span> {this.state.value} </span>
<br />
<Range modifier='material' onChange={this.changeSecondRange} value={this.state.value2} />
<span> {this.state.value2} </span>
<br />
</div>
</Page>
);
}
}
================================================
FILE: demo/examples/Ripple.js
================================================
import React from 'react';
import {Button, Page, Ripple, Icon} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title="Page" />}
>
<div style={
{width: 100,
height: 100,
margin: 10,
background: 'lightgrey'}}>
<Ripple color='red' background='blue' disabled={false} />
</div>
</Page>
);
}
}
================================================
FILE: demo/examples/RowColumn.js
================================================
import React from 'react';
import {
Page,
Row,
Col
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material'
};
}
toggleModifier() {
this.setState({
modifier: this.state.modifier === 'material' ? '' : 'material'
});
}
render() {
return (
<Page
renderToolbar={() => <MyToolbar title='Grid' />}
>
<h3>Bottom-aligned Grid Cells</h3>
<Row >
<Col>
<div className='Demo'>
This cell should be bottom-aligned.
</div>
</Col>
<Col>
<div className='Demo'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.
</div>
</Col>
<Col>
<div className='Demo'>
This cell should be bottom-aligned.
</div>
</Col>
</Row>
<h3>Vertically Centered Grid Cells</h3>
<Row >
<Col>
<div className='Demo'>
This cell should be verticaly-centered with the cell to its right.
</div>
</Col>
<Col>
<div className='Demo'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.
</div>
</Col>
</Row>
<h3>Equally spaced</h3>
<Row>
<Col>Col</Col>
<Col>Col</Col>
</Row>
<p></p>
<Row>
<Col>Col</Col>
<Col>Col</Col>
<Col>Col</Col>
</Row>
<p></p>
<Row>
<Col>Col</Col>
<Col>Col</Col>
<Col>Col</Col>
<Col>Col</Col>
</Row>
<h3>Full height</h3>
<Row>
<Col>
<div className='Demo'>
This column's height will grow to the same height as the tallest column.
</div>
</Col>
<Col>
<div className='Demo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.
</div>
</Col>
</Row>
<h3>Individual Sizing</h3>
<Row>
<Col width='160px'>Col width='160px'</Col>
<Col>Col</Col>
<Col>Col</Col>
</Row>
<p></p>
<Row>
<Col>
<div className='Demo'>Col</div>
</Col>
<Col width='33%'>
<div className='Demo'>Col width='33%'</div>
</Col>
</Row>
<p></p>
<Row>
<Col width='25%'>
<div className='Demo'>Col width='25%'</div>
</Col>
<Col>
<div className='Demo'>Col</div>
</Col>
<Col width='33%'>
<div className='Demo'>Col width='33%'</div>
</Col>
</Row>
<p></p>
<Row>
<Col width={100}>
<div className='Demo'>Col width='100px'</div>
</Col>
<Col>
<div className='Demo'>Col</div>
</Col>
<Col width={50}>
<div className='Demo'>Col width='50px'</div>
</Col>
</Row>
<h3>Top-aligned Grid Cells</h3>
<Row >
<Col>
<div className='Demo'>
This cell should be top-aligned.
</div>
</Col>
<Col>
<div className='Demo'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.
</div>
</Col>
<Col>
<div className='Demo'>
This cell should be top-aligned.
</div>
</Col>
</Row>
<h3>Mixed Vertical Alignment</h3>
<Row>
<Col >
<div className='Demo'>
This cell should be top aligned.
</div>
</Col>
<Col>
<div className='Demo'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.
</div>
</Col>
<Col >
<div className='Demo'>
This cell should be center-aligned.
</div>
</Col>
<Col >
<div className='Demo'>
This cell should be bottom-aligned.
</div>
</Col>
</Row>
</Page>
);
}
}
================================================
FILE: demo/examples/SpeedDial.js
================================================
import React from 'react';
import {
Page,
Icon,
Fab,
SpeedDial,
SpeedDialItem,
Toolbar,
BackButton
} from '../../src/index.js';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
modifier: 'material',
};
}
renderToolbar() {
return (
<Toolbar>
<div className='left'>
<BackButton>Back</BackButton>
</div>
<div className='center'>
Speed Dial
</div>
</Toolbar>
);
}
renderFixed() {
return (
<SpeedDial disabled={false} direction='up' onClick={() => console.log('test1')} position='bottom right'>
<Fab>
<Icon
icon='fa-twitter'
size={26}
fixedWidth={false}
style={{verticalAlign: 'middle'}} />
</Fab>
<SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
</SpeedDial>
);
}
render() {
return (
<Page renderFixed={this.renderFixed} renderToolbar={this.renderToolbar}>
</Page>
);
}
}
================================================
FILE: demo/examples/Splitter.js
================================================
import React from 'react';
import {
Splitter,
SplitterSide,
SplitterContent,
Page,
Toolbar,
Button
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
showLeft: false,
showRight: false,
openLeft: false,
openRight: false,
isSwipeable: true
};
}
handleLeftClose() {
this.setState({
openLeft: false
});
}
handleLeftOpen() {
this.setState({
openLeft: true
});
}
handleRightClose() {
this.setState({
openRight: false
});
}
handleRightOpen() {
this.setState({
openRight: true,
});
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title="Splitter" />} >
<Splitter>
<SplitterSide
side="left"
width={200}
collapse={!this.state.showLeft}
isOpen={this.state.openLeft}
onClose={this.handleLeftClose.bind(this)}
onOpen={this.handleLeftOpen.bind(this)}
isSwipeable={this.state.isSwipeable}>
<Page>
<Toolbar>
<div className="center">content</div>
</Toolbar>
</Page>
</SplitterSide>
<SplitterContent>
<Page renderToolbar={() => <MyToolbar title="ons-splitter-content" />}>
<p>
<Button
onClick={() => this.setState({isSwipeable: !this.state.isSwipeable})}
>
{this.state.isSwipeable ? 'Disable Swipe' : 'Enable Swipeable'}
</Button>
</p>
<p>
<Button
onClick={() => this.setState({showLeft: !this.state.showLeft})}
>toggle left menu 2</Button>
</p>
<p>
<Button
onClick={() => this.setState({showRight: !this.state.showRight })} > toggle right menu</Button> </p>
<p>
<Button
onClick={() => this.setState({openLeft: true})}>
Open left menu
</Button>
</p>
<p>
<Button
onClick={() => this.setState({openRight: true})}>
Open right menu
</Button>
</p>
</Page>
</SplitterContent>
<SplitterSide
side="right"
width={300}
collapse={!this.state.showRight}
isOpen={this.state.openRight}
onClose={this.handleRightClose.bind(this)}
onOpen={this.handleRightOpen.bind(this)}
isSwipeable={this.state.isSwipeable}>
<Page>
<Toolbar>
<div className="center">ons-splitter-side</div>
</Toolbar>
</Page>
</SplitterSide>
</Splitter>
</Page>
);
}
}
================================================
FILE: demo/examples/Switch.js
================================================
import React from 'react';
import {
Page,
Toolbar,
ToolbarButton,
BackButton,
Input,
Switch
} from '../../src/index.js';
import MyToolbar from './MyToolbar';
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {checked: true};
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.setState({checked: event.target.checked});
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='Switch' />} >
<div style={{textAlign: 'center'}}>
<h1>Page Content</h1>
<Input type='checkbox' checked={this.state.checked} onChange={this.onChange} />
<br />
<Switch disabled={false} checked={this.state.checked} onChange={this.onChange} />
<p />
<div style={{marginTop: 10}}> The switch is {this.state.checked ? 'on' : 'off'} </div>
</div>
</Page>
);
}
};
================================================
FILE: demo/examples/Tabbar.js
================================================
import React from 'react';
import {Tabbar, Tab, Page, Button} from '../../src/index.js';
import MyToolbar from './MyToolbar';
class TabPage extends React.Component {
render() {
return (
<Page renderToolbar={() => <MyToolbar title={this.props.title} />} >
{this.props.active
? <p>This is the <strong>{this.props.title}</strong> page.</p>
: null}
<Button onClick={this.props.switchTab}>Go to the other tab</Button>
</Page>
);
}
}
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
index: 0
};
this.renderTabs = this.renderTabs.bind(this);
}
renderTabs(activeIndex, tabbar) {
console.log('index : ' , activeIndex);
return [
{
content: <TabPage switchTab={() => { this.setState({index: 1}); }}
title='Home' active={activeIndex == 0} tabbar={tabbar} />,
tab: <Tab
onClick={() => console.log('click home')}
label='Home'
icon='md-home' />
},
{
content: <TabPage
switchTab={() => { this.setState({index: 0}); }}
title='Settings' active={activeIndex == 1} tabbar={tabbar} />,
tab: <Tab onClick={() => console.log('click setting')} label='Settings' icon='md-settings' />
}
];
}
render() {
return (
<Page>
<Tabbar
index={this.state.index}
onPreChange={(event) =>
{
this.setState({index: event.index});
console.log('preChange', event.index);
}
}
onPostChange={() => console.log('postChange')}
onReactive={() => console.log('postChange')}
position='bottom'
renderTabs={this.renderTabs}
/>
</Page>
);
}
}
================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../OnsenUI/build/css/onsenui.css">
<link rel="stylesheet" href="../OnsenUI/build/css/onsen-css-components.css">
<title>Onsen UI React Demo</title>
<style>
ons-col {
border: 1px solid #ccc;
background: #fff;
overflow: hidden;
padding: 4px;
color: #999;
}
.page__content {
background-color: #f6f6f6;
}
h3 {
color: #666;
font-size: 17px;
}
.dialog-container {
background: green;
}
</style>
</head>
<body>
<div id="app" >
</div>
<script src="../bundle.js"></script>
</body>
</html>
================================================
FILE: demo/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import '../OnsenUI/build/js/onsenui.js';
import '../OnsenUI/build/css/onsenui.css';
import '../OnsenUI/build/css/onsen-css-components.css';
import {
Page,
Navigator,
Toolbar,
List,
ListItem
} from '../src/index.js';
import PageExample from './examples/Page';
import ListExample from './examples/List';
import LazyListExample from './examples/LazyList';
import TabbarExample from './examples/Tabbar';
import AlertDialogExample from './examples/AlertDialog';
import SplitterExample from './examples/Splitter';
import InputExample from './examples/Input';
import IconExample from './examples/Icon';
import RippleExample from './examples/Ripple';
import SpeedDialExample from './examples/SpeedDial';
import PullHookExample from './examples/PullHook';
import CarouselExample from './examples/Carousel';
import PopoverExample from './examples/Popover';
import DialogExample from './examples/Dialog';
import ModalExample from './examples/Modal';
import SwitchExample from './examples/Switch';
import ProgressBarExample from './examples/ProgressBar';
import RangeExample from './examples/Range';
import RowColumnExample from './examples/RowColumn';
import BackButtonExample from './examples/BackButton';
import BottomToolbarExample from './examples/BottomToolbar';
class Examples extends React.Component {
constructor(props) {
super(props);
this.state = {class: 'test'};
this.getExamples = this.getExamples.bind(this);
}
getExamples() {
return [
{
title: 'Bottom Toolbar',
component: BottomToolbarExample,
},
{
title: 'Page',
component: PageExample
},
{
title: 'Back button',
component: BackButtonExample
},
{
title: 'Row & Column',
component: RowColumnExample
},
{
title: 'Carousel',
component: CarouselExample
},
{
title: 'Switch',
component: SwitchExample
},
{
title: 'RangeExample',
component: RangeExample
},
{
title: 'ProgressBar',
component: ProgressBarExample
},
{
title: 'Dialog',
component: DialogExample
},
{
title: 'Modal',
component: ModalExample
},
{
title: 'Popover',
component: PopoverExample
},
{
title: 'Tabbar',
component: TabbarExample
},
{
title: 'Splitter',
component: SplitterExample
},
{
title: 'SpeedDial',
component: SpeedDialExample
},
{
title: 'PullHook',
component: PullHookExample
},
{
title: 'Ripple',
component: RippleExample
},
{
title: 'Icon',
component: IconExample
},
{
title: 'List',
component: ListExample
},
{
title: 'Lazy List',
component: LazyListExample
},
{
title: 'Alert dialog',
component: AlertDialogExample
},
{
title: 'Input',
component: InputExample
}
];
}
goto(example) {
this.props.navigator.pushPage({
component: example.component,
props: {
key: example.title
}
});
}
render() {
return (
<Page style={{background: 'green'}}
renderToolbar={() => <Toolbar> <div className='center'> Up Toolbar </div> </Toolbar>}
>
<List modifier='inset'
dataSource={this.getExamples()}
renderHeader={() =>
<ListItem lockOnDrag style={{background: 'green'}} tappable tap-background-color='red'> HEADER </ListItem>
}
renderRow={(example) => (
<ListItem key={example.title} onClick={this.goto.bind(this, example)}>{example.title}</ListItem>
)}
/>
</Page>
);
}
}
class App extends React.Component {
renderPage(route, navigator) {
const props = route.props || {};
props.navigator = navigator;
return React.createElement(route.component, route.props);
}
render() {
return (
<Navigator
renderPage={this.renderPage}
onPrePush={e => 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(<App />, 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
<AlertDialog isOpen={this.state.isOpen} onCancel={this.handleCancel.bind(this)} cancelable>
<div className="alert-dialog-title">Warning!</div>
<div className="alert-dialog-content">
An error has occurred!
</div>
<div className="alert-dialog-footer">
<Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
Cancel
</Button>
<Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
Ok
</Button>
</div>
</AlertDialog>
*/
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
* <Toolbar modifier={this.props.modifier} >
<div className="left"><BackButton modifier={this.props.modifier}>Back</BackButton></div>
<div className="center">{this.props.title}</div>
</Toolbar>
*/
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
* <BottomToolbar modifier="material"> Content </BottomToolbar>
*/
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
* <Button modifier="large--cta">
* Tap Me
* </Button>
*/
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
* <Carousel
onPostChange={() => console.log('onPostChange')}
onOverscroll={() => console.log('onOverscroll')}
onRefresh={() => console.log('onRefresh')}
ref='carousel' swipeable overscrollable autoScroll fullscreen autoScrollRatio={0.2}>
<CarouselItem style={{backgroundColor: 'gray'}}>
<div className='item-label'>GRAY</div>
</CarouselItem>
<CarouselItem style={{backgroundColor: '#085078'}}>
<div className='item-label'>BLUE</div>
</CarouselItem>
</Carousel>
*/
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 `<ons-carousel>` element.
[/en]
* [jp][/jp]
* @example
* <Carousel swipeable overscrollable autoScroll fullscreen >
<CarouselItem style={{backgroundColor: 'gray'}}>
<div className='item-label'>GRAY</div>
</CarouselItem>
<CarouselItem style={{backgroundColor: '#085078'}}>
<div className='item-label'>BLUE</div>
</CarouselItem>
</Carousel>
*/
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 `<ons-row>` to layout components.
* [/en]
* [jp][/jp]
* <Row>
* <Col width={50}>
* <ons-icon icon="fa-twitter"></ons-icon>
* </Col>
* <Col>Text</Col>
* </Row>
*/
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
<Dialog onCancel={this.onCancel}
isOpen={this.props.isOpen}
style={{height: 250}} cancelable>
<Page>
Page Content
</Page>
</Dialog>
*/
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
* <SpeedDial disabled={false} direction='right' onClick={() => console.log('test1')} position='left bottom'>
<Fab>
<Icon icon='fa-twitter' size={26} fixedWidth={false} style={{verticalAlign: 'middle'}} />
</Fab>
<SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
</SpeedDial>
*/
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
<Icon
size={{default: 32, material: 40}}
icon={{default: 'ion-navicon', material: 'md-menu'}}
/>
*/
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 `<input>` element can also be used on the `<ons-input>` element..
[/en]
* [jp][/jp]
* @example
* <Input
* value={this.state.text} float
* onChange={(event) => { 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 `<input>` element. This is useful when using <label for="..."> elements [/en]
* [jp][/jp]
*/
inputId: React.PropTypes.string,
/**
* @name float
* @type bool
* @description
* [en] If this attribute is present, the placeholder will be animated in Material Design. [/en]
* [jp][/jp]
*/
float: React.PropTypes.bool
};
/**
* @original ons-lazy-repeat
* @category list
* @tutorial react/Reference/lazy-list
* @description
* [en] Using this component a list with millions of items can be rendered without a drop in performance.
* It does that by "lazily" loading elements into the DOM when they come into view and
* removing items from the DOM when they are not visible.
[/en]
* [jp][/jp]
* @example
*
renderRow(index) {
return (
<ListItem key={index}>
{'Item ' + (index + 1)}
</ListItem>
);
}
render() {
return (
<Page renderToolbar={() => <MyToolbar title='LazyList' />} >
<div style={{height: 100}}>
<LazyList
length={1000}
renderRow={() =>
<ListItem key={index}>
{'Item ' + (index + 1)}
</ListItem>
}
calculateItemHeight={() => 44}
/>
</div>
</Page>
);
}
}
*/
var LazyList = function (_BasicComponent) {
inherits(LazyList, _BasicComponent);
function LazyList() {
var _ref;
classCallCheck(this, LazyList);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _this = possibleConstructorReturn(this, (_ref = LazyList.__proto__ || Object.getPrototypeOf(LazyList)).call.apply(_ref, [this].concat(args)));
_this.state = { children: [] };
_this.update = _this.update.bind(_this);
return _this;
}
createClass(LazyList, [{
key: 'update',
value: function update(props) {
var self = this;
this.refs.lazyRepeat.delegate = {
calculateItemHeight: function calculateItemHeight(index) {
return props.calculateItemHeight(index);
},
_render: function (items, newHeight) {
var _this2 = this;
var createElement = function createElement(_ref2) {
var index = _ref2.index;
var top = _ref2.top;
return props.renderRow(index);
};
var el = items.map(createElement);
self.setState({ children: el, height: newHeight }, function () {
var list = _this2.refs.list;
// ignore i=0 <lazy repat
for (var i = 1; i < list.children.length; i++) {
list.children[i].style.position = 'absolute';
list.children[i].style.top = items[i - 1].top + 'px';
list.children[i].style.left = '0px';
list.children[i].style.right = '0px';
}
});
}.bind(this),
countItems: function countItems() {
return props.length;
}
};
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
var helpProps = _extends({}, this.props, newProps);
this.update(helpProps);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
get(LazyList.prototype.__proto__ || Object.getPrototypeOf(LazyList.prototype), 'componentDidMount', this).call(this);
this.update(this.props);
}
}, {
key: 'render',
value: function render() {
return React.createElement('ons-list', _extends({}, this.props, { ref: 'list',
'class': 'list', style: { position: 'relative', height: this.state.height }
}), React.createElement('ons-lazy-repeat', { ref: 'lazyRepeat' }), this.state.children);
}
}]);
return LazyList;
}(BasicComponent);
LazyList.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the lazy list.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name length
* @type number
* @description
* [en]The length of the list.[/en]
* [jp] [/jp]
*/
length: React.PropTypes.number.isRequired,
/**
* @name renderRow
* @type function
* @description
* [en] A function given the index of the to display row, renders it.[/en]
* [jp] [/jp]
*/
renderRow: React.PropTypes.func.isRequired,
/**
* @name calculateItemHeight
* @type function
* @description
* [en] A function given the index of the to row, returns the height of it.[/en]
* [jp] [/jp]
*/
calculateItemHeight: React.PropTypes.func.isRequired
};
/**
* @original ons-list
* @category list
* @tutorial react/Reference/list
* @description
* [en]
* Component for representing a list. It takes an array called datasource and calls renderRow(row, index) for every row. Furthermore, the header and the footer can be specified with `renderRow` and `renderHeader` respectivly. [/en]
* [jp][/jp]
* @example
<List
dataSource={['Row 1', 'Row 2']}
renderHeader={this.renderHeader}
renderRow={(row, idx) => (
<ListItem modifier={idx === this.state.data.length - 1 ? 'longdivider' : null}>
{row}
<Button modifier="quiet" onClick={this.remove.bind(this, idx)}>Remove</Button>
</ListItem>
)}
renderFooter={this.renderFooter}
/>
*/
var List = function (_BasicComponent) {
inherits(List, _BasicComponent);
function List() {
classCallCheck(this, List);
return possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
}
createClass(List, [{
key: 'render',
value: function render() {
var _this2 = this;
var pages = this.props.dataSource.map(function (data, idx) {
return _this2.props.renderRow(data, idx);
});
return React.createElement('ons-list', _extends({}, this.props, { ref: 'list' }), this.props.renderHeader(), pages, this.props.children, this.props.renderFooter());
}
}]);
return List;
}(BasicComponent);
List.propTypes = {
/**
* @name modifier
* @type string
* @description
* [en]
* Specify modifier name to specify custom styles.
* [/en]
* [jp] どうしよう[/jp]
*/
modifier: React.PropTypes.string,
/**
* @name dataSource
* @type string
* @description
* [en]
* Source of the list data. Should be an array.
* [/en]
* [jp] どうしよう[/jp]
*/
dataSource: React.PropTypes.array,
/**
* @name renderRow
* @type function
* @description
* [en]
* Function to specify the rendering function for every element in
* in the dataSource.
* [/en]
* [jp] どうしよう[/jp]
*/
renderRow: React.PropTypes.func,
/**
* @name renderHeader
* @type function
* @description
* [en]
* Function to specify the rendering function for the header
* [/en]
* [jp] どうしよう[/jp]
*/
renderHeader: React.PropTypes.func,
/**
* @name renderFooter
* @type function
* @description
* [en]
* Function to specify the rendering function for the footer
* [/en]
* [jp] どうしよう[/jp]
*/
renderFooter: React.PropTypes.func
};
List.defaultProps = {
dataSource: [],
renderRow: function renderRow() {
return null;
},
renderHeader: function renderHeader() {
return null;
},
renderFooter: function renderFooter() {
return null;
}
};
/**
* @original ons-list-header
* @category list
* @tutorial react/Reference/list
* @description
* [en] Header element for list items. Must be put inside ons-list component.
[/en]
* [jp][/jp]
* @example
<List
dataSource={this.state.data}
renderHeader={() =>
<ListHeader style={{fontSize: 15}} className="testClass"> Header Text </ListHeader> }
renderRow={(row, idx) => (
<ListItem > {row} </ListItem>
)}
/>
*/
var ListHeader = function (_SimpleWrapper) {
inherits(ListHeader, _SimpleWrapper);
function ListHeader() {
classCallCheck(this, ListHeader);
return possibleConstructorReturn(this, (ListHeader.__proto__ || Object.getPrototypeOf(ListHeader)).apply(this, arguments));
}
createClass(ListHeader, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-list-header';
}
}]);
return ListHeader;
}(SimpleWrapper);
ListHeader.propTypes = {
/**
* @name modifier
* @type string
* @description
* [en]
* Specify modifier name to specify custom styles. Optional.
* [/en]
* [jp][/jp]
*/
modifier: React.PropTypes.string
};
/**
* @original ons-list-item
* @category list
* @tutorial react/Reference/list
* @description
* [en]
* Component that represents each item in the list. Must be put inside the `List` component. The list item is composed of three parts that are represented with the `left`, `center` and `right` classes. These classes can be used to ensure that the content of the list items is properly aligned.
* [/en]
* [jp][/jp]
* @example
<ListItem>
* <div className="left">Left</div>
* <div className="center">Center</div>
* <div className="right">Right</div>
* </ListItem>
*/
var ListItem = function (_SimpleWrapper) {
inherits(ListItem, _SimpleWrapper);
function ListItem() {
classCallCheck(this, ListItem);
return possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).apply(this, arguments));
}
createClass(ListItem, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-list-item';
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
get(ListItem.prototype.__proto__ || Object.getPrototypeOf(ListItem.prototype), 'componentDidMount', this).call(this);
this.node = ReactDOM__default.findDOMNode(this);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
get(ListItem.prototype.__proto__ || Object.getPrototypeOf(ListItem.prototype), 'componentDidUpdate', this).call(this);
this.node._compile();
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'tappable');
Util.convert(others, 'tapBackgroundColor', { newName: 'tap-background-color' });
Util.convert(others, 'lockOnDrag', { newName: 'lock-on-drag' });
return React.createElement(this._getDomNodeName(), others, this.props.children);
}
}]);
return ListItem;
}(SimpleWrapper);
ListItem.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en] The appearance of the list item.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name tappable
* @type bool
* @description
* [en]
* Specifies whether the list item is tappable.
* [/en]
* [jp] [/jp]
*/
tappable: React.PropTypes.bool,
/**
* @name tapBackgroundColor
* @type string
* @description
* [en]
* Changes the background color when tapped. For this to work, the attribute "tappable" needs to be set. The default color is "#d9d9d9". It will display as a ripple effect on Android.
* [/en]
* [jp] [/jp]
*/
tapBackgroundColor: React.PropTypes.string,
/**
* @name lockOnDrag
* @type bool
* @description
* [en] Prevent vertical scrolling when the user drags horizontally. [/en]
* [jp] [/jp]
*/
lockOnDrag: React.PropTypes.bool
};
/**
* @original ons-navigator
* @category navigation
* @tutorial react/Reference/navigator
* @description
* [en] This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the `renderPage` method, that takes an route and a navigator and converts it to an page. [/en]
* [jp] どうしよう[/jp]
* @example
<Navigator
renderPage={(route, navigator) =>
<MyPage
title={route.title}
onPop={() => navigator.popPage()}
/>
}
initialRoute={{
title: 'First Page'
}} />
}
}
*/
var Navigator = function (_BasicComponent) {
inherits(Navigator, _BasicComponent);
function Navigator() {
var _ref;
classCallCheck(this, Navigator);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _this = possibleConstructorReturn(this, (_ref = Navigator.__proto__ || Object.getPrototypeOf(Navigator)).call.apply(_ref, [this].concat(args)));
_this.pages = [];
_this.state = {};
_this._prePush = _this._prePush.bind(_this);
_this._postPush = _this._postPush.bind(_this);
_this._prePop = _this._prePop.bind(_this);
_this._postPop = _this._postPop.bind(_this);
return _this;
}
createClass(Navigator, [{
key: 'update',
value: function update(pages, obj) {
var _this2 = this;
this.pages = pages || [];
return new Promise(function (resolve) {
_this2.forceUpdate(resolve);
});
}
/**
* @method resetPage
* @signature resetPage(route, options = {})
* @param {Object} route
* [en] The route that the page should be reset to.[/en]
* [ja] どうしよう [/ja]
* @return {Promise}
* [en]Promise which resolves to the revealed page.[/en]
* [ja]明らかにしたページを解決するPromiseを返します。[/ja]
* @description
* [en]Resets the current page[/en]
* [ja]どうしよう[/ja]
*/
}, {
key: 'resetPage',
value: function resetPage(route) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return this.resetPageStack([route], options);
}
/**
* @method resetPageStack
* @signature resetPageStack(route, options = {})
* @param {Array} routes
* [en] The routes that the navigator should be reset to.[/en]
* [ja] どうしよう [/ja]
* @return {Promise}
* [en]Promise which resolves to the revealed page.[/en]
* [ja]明らかにしたページを解決するPromiseを返します。[/ja]
* @description
* [en] Resets the navigator to the current page stack[/en]
* [ja] どうしよう[/ja]
*/
}, {
key: 'resetPageStack',
value: function resetPageStack(routes) {
var _this3 = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.isRunning()) {
return Promise.reject('Navigator is already running animation.');
}
return new Promise(function (resolve) {
var lastRoute = routes[routes.length - 1];
var newPage = _this3.props.renderPage(lastRoute, _this3);
_this3.routes.push(lastRoute);
var update = function update() {
_this3.pages.push(newPage);
return new Promise(function (resolve) {
return _this3.forceUpdate(resolve);
});
};
_this3.refs.navi._pushPage(options, update).then(function () {
_this3.routes = routes;
var renderPage = function renderPage(route) {
return _this3.props.renderPage(route, _this3);
};
_this3.pages = routes.map(renderPage);
_this3.update(_this3.pages).then(resolve);
});
});
}
/**
* @method pushPage
* @signature pushPage(route, options = {})
* @param {Object} route
* [en] The route that the navigator should push to.[/en]
* [ja] どうしよう [/ja]
* @return {Promise}
* [en] Promise which resolves to the revealed page.[/en]
* [ja] 明らかにしたページを解決するPromiseを返します。[/ja]
* @description
* [en] Pushes a page to the page stack[/en]
* [ja] どうしよう[/ja]
*/
}, {
key: 'pushPage',
value: function pushPage(route) {
var _this4 = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.isRunning()) {
return Promise.reject('Navigator is already running animation.');
}
return new Promise(function (resolve) {
var update = function update() {
return new Promise(function (resolve) {
_this4.pages.push(_this4.props.renderPage(route, _this4));
_this4.forceUpdate(resolve);
});
};
_this4.routes.push(route);
_this4.refs.navi._pushPage(options, update).then(resolve).catch(function (error) {
_this4.routes.pop();
_this4.pages.pop();
throw error;
});
});
}
}, {
key: 'isRunning',
value: function isRunning() {
return this.refs.navi._isRunning;
}
/*
* @method replacePage
* @signature replacePage(route, [options])
* @param {Object} route
* [en] The route that the navigator should replace the top page with.[/en]
* [ja] どうしよう [/ja]
* @return {Promise}
* [en]Promise which resolves to the new page.[/en]
* [ja]新しいページを解決するPromiseを返します。[/ja]
* @description
* [en]Replaces the current top page with the specified one. Extends `pushPage()` parameters.[/en]
* [ja]現在表示中のページをを指定したページに置き換えます。[/ja]
*/
}, {
key: 'replacePage',
value: function replacePage(route) {
var _this5 = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.isRunning()) {
return Promise.reject('Navigator is already running animation.');
}
this.pushPage(route, options).then(function () {
var pos = _this5.pages.length - 2;
_this5.pages.splice(pos, 1);
_this5.routes.splice(pos, 1);
_this5.refs.navi.topPage.updateBackButton(_this5.pages.length > 1);
_this5.forceUpdate();
});
}
/**
* @method popPage
* @signature popPage(options = {})
* @return {Promise}
* [en] Promise which resolves to the revealed page.[/en]
* [ja] 明らかにしたページを解決するPromiseを返します。[/ja]
* @description
* [en] Pops a page out of the page stack[/en]
* [ja] どうしよう[/ja]
*/
}, {
key: 'popPage',
value: function popPage() {
var _this6 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (this.isRunning()) {
return Promise.reject('Navigator is already running animation.');
}
this.routesBeforePop = this.routes.slice();
var update = function update() {
return new Promise(function (resolve) {
_this6.pages.pop();
_this6.routes.pop();
_this6.forceUpdate(resolve);
});
};
return this.refs.navi._popPage(options, update);
}
}, {
key: '_prePop',
value: function _prePop(event) {
event.routes = {
poppingRoute: this.routesBeforePop[this.routesBeforePop.length - 1],
routes: this.routesBeforePop
};
this.props.onPrePop(event);
}
}, {
key: '_postPop',
value: function _postPop(event) {
event.routes = {
poppedRoute: this.routesBeforePop[this.routesBeforePop.length - 1],
routes: this.routesBeforePop.slice(0, this.routesBeforePop.length - 1)
};
this.props.onPostPop(event);
}
}, {
key: '_prePush',
value: function _prePush(event) {
event.routes = {
pushingRoute: this.routes[this.routes.length - 1],
routes: this.routes.slice(0, this.routes.length - 1)
};
this.props.onPrePush(event);
}
}, {
key: '_postPush',
value: function _postPush(event) {
event.routes = {
pushedRoute: this.routes[this.routes.length - 1],
routes: this.routes
};
this.props.onPostPush(event);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this7 = this;
var node = this.refs.navi;
node.popPage = this.popPage.bind(this);
node.addEventListener('prepush', this._prePush);
node.addEventListener('postpush', this._postPush);
node.addEventListener('prepop', this._prePop);
node.addEventListener('postpop', this._postPop);
if (this.props.initialRoute && this.props.initialRouteStack) {
throw new Error('In Navigator either initalRoute or initalRoutes can be set');
}
if (this.props.initialRoute) {
this.routes = [this.props.initialRoute];
} else if (this.props.initialRouteStack) {
this.routes = this.props.initialRouteStack;
} else {
this.routes = [];
}
this.pages = this.routes.map(function (route) {
return _this7.props.renderPage(route, _this7);
});
this.forceUpdate();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var node = this.refs.navi;
node.removeEventListener('prepush', this.props.onPrePush);
node.removeEventListener('postpush', this.props.onPostPush);
node.removeEventListener('prepop', this.props.onPrePop);
node.removeEventListener('postpop', this.props.onPostPop);
}
}, {
key: 'render',
value: function render() {
var _this8 = this;
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });
var pages = this.routes ? this.routes.map(function (route) {
return _this8.props.renderPage(route, _this8);
}) : null;
return React.createElement('ons-navigator', _extends({}, others, { ref: 'navi' }), pages);
}
}]);
return Navigator;
}(BasicComponent);
Navigator.propTypes = {
/**
* @name renderPage
* @type function
* @required true
* @defaultValue null
* @description
* [en] This function takes the current route object as a parameter and creates returns a react componen.[/en]
* [jp] どうしよう[/jp]
*/
renderPage: React.PropTypes.func.isRequired,
/**
* @name initialRouteStack
* @type array
* @required false
* @defaultValue null
* @description
* [en] This array contains the initial routes from the navigator,
* which will be used to render the initial pages in the renderPage method.
* [/en]
* [jp] どうしよう[/jp]
*/
initialRouteStack: React.PropTypes.array,
/**
* @name initialRoute
* @type object
* @required false
* @defaultValue null
* @description
* [en] This array contains the initial route of the navigator,
* which will be used to render the initial pages in the
* renderPage method.
* [/en]
* [jp] どうしよう[/jp]
*/
initialRoute: React.PropTypes.object,
/**
* @name onPrePush
* @type function
* @required false
* @description
* [en]Called just before a page is pushed.[/en]
*/
onPrePush: React.PropTypes.func,
/**
* @name onPostPush
* @type function
* @required false
* @description
* [en]Called just after a page is pushed.[/en]
*/
onPostPush: React.PropTypes.func,
/**
* @name onPrePop
* @type function
* @required false
* @description
* [en]Called just before a page is popped.[/en]
*/
onPrePop: React.PropTypes.func,
/**
* @name onPostPop
* @type function
* @required false
* @description
* [en]Called just after a page is popped.[/en]
*/
onPostPop: React.PropTypes.func,
/**
* @property animation
* @type {String}
* @description
* [en]
* Animation name. Available animations are `"slide"`, `"lift"`, `"fade"` and `"none"`.
* These are platform based animations. For fixed animations, add `"-ios"` or `"-md"` suffix to the animation name. E.g. `"lift-ios"`, `"lift-md"`. Defaults values are `"slide-ios"` and `"fade-md"`.
* [/en]
*/
animation: React.PropTypes.string,
/**
* @name animationOptions
* @type object
* @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
};
var NOOP = function NOOP() {
return null;
};
Navigator.defaultProps = {
onPostPush: NOOP,
onPrePush: NOOP,
onPrePop: NOOP,
onPostPop: NOOP
};
/**
* @original ons-modal
* @category dialog
* @tutorial react/Reference/modal
* @description
* [en]
* A modal component covers the entire screen. Underlying components are not
* subject to any events while the modal component is shown.
*
* This component can be used to block user input while some operation is
* running or to show some information to the user.
* [/en]
* [jp]
* 画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、
* モーダルが表示されている間はイベント通知が行われません
* [/jp]
* @example
<Page
renderModal={() => (
<Modal isOpen={this.state.isLoading}>
Loading ...
</Modal>
)}>
<div> Page content </div>
</Page>
*/
var Modal = function (_BasicComponent) {
inherits(Modal, _BasicComponent);
function Modal() {
var _ref;
classCallCheck(this, Modal);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var _this = possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args)));
_this.node = null;
return _this;
}
createClass(Modal, [{
key: 'componentDidMount',
value: function componentDidMount() {
get(Modal.prototype.__proto__ || Object.getPrototypeOf(Modal.prototype), 'componentDidMount', this).call(this);
this.node = ReactDOM__default.findDOMNode(this);
this._update(this.props, false);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this._update(nextProps, this.props.isOpen);
}
}, {
key: '_update',
value: function _update(props, isOpen) {
var animationOptions = {
animation: props.animation,
animationOptions: props.animationOptions
};
if (props.isOpen && !isOpen) {
this.node.show(animationOptions).then(function () {
return props.onShow && props.onShow();
});
} else if (!props.isOpen && isOpen) {
this.node.hide(animationOptions).then(function () {
return props.onHide && props.onHide();
});
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.node = null;
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
return React.createElement('ons-modal', others, this.props.children);
}
}]);
return Modal;
}(BasicComponent);
Modal.propTypes = {
/**
* @property animation
* @type {String}
* @description
* [en]
* Animation name. Available animations are `"slide"`, `"lift"`, `"fade"` and `"none"`.
* These are platform based animations. For fixed animations, add `"-ios"` or `"-md"` suffix to the animation name. E.g. `"lift-ios"`, `"lift-md"`. Defaults values are `"slide-ios"` and `"fade-md"`.
* [/en]
*/
animation: React.PropTypes.oneOf(['none', 'fade']),
/**
* @name animationOptions
* @type object
* @description
* [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
*/
animationOptions: React.PropTypes.object,
/**
* @name onShow
* @type function
* @required false
* @description
* [en]
* Called Fired right after the modal is shown.
* [/en]
*/
onShow: React.PropTypes.func,
/**
* @name onHide
* @type function
* @required false
* @description
* [en]
* Called after the modal is hidden.
* [/en]
*/
onHide: React.PropTypes.func,
/**
* @name isOpen
* @type boolean
* @description
* [en]When `true` the modal will show itself.[/en]
*/
isOpen: React.PropTypes.bool
};
Modal.defaultProps = {
isOpen: false,
animation: 'none'
};
/**
* @original ons-page
* @category page
* @tutorial react/Reference/page
* @description
* [en]
* This component is handling the entire page. The content can be scrolled.
*
* To add fixed content that doesn't scroll with the page the `renderFixed` prop is used.
*
* A page toolbar can be added with the `renderToolbar` prop.
* [/en]
* [jp] どうしよう[/jp]
* @example
<Page
renderFixed={() => <Fab></Fab>}
renderToolbar={() => <Toolbar>...</Toolbar>}
contentStyle={{padding: 40}}>
<div> Page content </div>
</Page>
*/
var Page = function (_BasicComponent) {
inherits(Page, _BasicComponent);
function Page() {
classCallCheck(this, Page);
return possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).apply(this, arguments));
}
createClass(Page, [{
key: 'componentDidMount',
value: function componentDidMount() {
get(Page.prototype.__proto__ || Object.getPrototypeOf(Page.prototype), 'componentDidMount', this).call(this);
var node = ReactDOM__default.findDOMNode(this);
node.addEventListener('init', this.props.onInit);
node.addEventListener('show', this.props.onShow);
node.addEventListener('hide', this.props.onHide);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var node = ReactDOM__default.findDOMNode(this);
node.removeEventListener('init', this.props.onInit);
node.removeEventListener('show', this.props.onShow);
node.removeEventListener('hide', this.props.onHide);
}
}, {
key: 'render',
value: function render() {
var toolbar = this.props.renderToolbar(this);
var bottomToolbar = this.props.renderBottomToolbar(this);
var modal = this.props.renderModal(this);
var fixed = this.props.renderFixed(this);
var _props = this.props;
var contentStyle = _props.contentStyle;
var props = objectWithoutProperties(_props, ['contentStyle']);
return React.createElement('ons-page', props, toolbar, React.createElement('div', { className: 'page__background' }, ' '), React.createElement('div', { className: 'page__content', style: contentStyle }, this.props.children), React.createElement('div', { className: 'page__extra', style: { zIndex: 10001 } }, modal), fixed, bottomToolbar);
}
}]);
return Page;
}(BasicComponent);
Page.propTypes = {
/**
* @name contentStyle
* @type Object
* @description
* [en]
* Specify the style of the page content. Optional.
* [/en]
*/
contentStyle: React.PropTypes.object,
/**
* @name modifier
* @type string
* @description
* [en]
* Specify modifier name to specify custom styles. Optional.
* [/en]
* [jp] どうしよう[/jp]
*/
modifier: React.PropTypes.string,
/**
* @name renderModal
* @type function
* @required false
* @defaultValue null
* @description
* [en] This function renders a modal that masks current screen.[/en]
*/
renderModal: React.PropTypes.func,
/**
* @name renderToolbar
* @type function
* @required false
* @defaultValue null
* @description
* [en] This function renders the toolbar of the page.[/en]
* [jp] どうしよう[/jp]
*/
renderToolbar: React.PropTypes.func,
/**
* @name renderBottomToolbar
* @type function
* @defaultValue null
* @description
* [en] This function renders the bottom toolbar of the page.[/en]
* [jp] どうしよう[/jp]
*/
renderBottomToolbar: React.PropTypes.func,
/**
* @name renderFixed
* @type function
* @defaultValue null
* @description
* [en] This function renders fixed content of the page. Can be used to render `Fab` or `SpeedDial` components as well as other components that don't scroll with the page.[/en]
* [jp] どうしよう[/jp]
*/
renderFixed: React.PropTypes.func,
/**
* @name onInit
* @type function
* @required false
* @description
* [en]
* Fired right after the page is attached.
* [/en]
* [jp] どうしよう[/jp]
*/
onInit: React.PropTypes.func,
/**
* @name onShow
* @type function
* @required false
* @description
* [en]
* Called Fired right after the page is shown.
* [/en]
* [jp] どうしよう[/jp]
*/
onShow: React.PropTypes.func,
/**
* @name onHide
* @type function
* @required false
* @description
* [en]
* Called after the page is hidden.
* [/en]
* [jp] どうしよう[/jp]
*/
onHide: React.PropTypes.func
};
var NOOP$1 = function NOOP$1() {
return null;
};
Page.defaultProps = {
renderToolbar: NOOP$1,
renderBottomToolbar: NOOP$1,
renderModal: NOOP$1,
renderFixed: NOOP$1
};
/**
* @original ons-popover
* @category dialog
* @tutorial react/Reference/popover
* @description
* [en]
* A component that displays a popover next to an element. The popover can be used to display extra information about a component or a tooltip.
* Another common way to use the popover is to display a menu when a button on the screen is tapped.
* [/en]
* [jp][/jp]
* @example
* <Page>
* <Button ref='btn'
* onClick={() => this.setState({target: this.refs.btn, isOpen: true})}/>
<Popover
isOpen={this.state.isOpen}
onCancel={() => this.setState({isOpen: false})}
getTarget={() => this.state.target} >
<div style={{textAlign: 'center', opacity: 0.5}}>
<p>This is a popover!</p>
<p><small>Click the background to remove the popover.</small></p>
</div>
</Popover>
* </Page>
*/
var Popover = function (_BaseDialog) {
inherits(Popover, _BaseDialog);
function Popover() {
classCallCheck(this, Popover);
return possibleConstructorReturn(this, (Popover.__proto__ || Object.getPrototypeOf(Popover)).apply(this, arguments));
}
createClass(Popover, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-popover';
}
}, {
key: 'show',
value: function show() {
var target = this.props.getTarget();
target = ReactDOM__default.findDOMNode(target);
return this.node.firstChild.show(target);
}
}]);
return Popover;
}(BaseDialog);
Popover.propTypes = {
/**
* @name getTarget
* @type function
* @required true
* @description
* [en]
* This function should return react component or a domnode that the popover is showing on.
* [/en]
* [jp][/jp]
*/
getTarget: React.PropTypes.func.isRequired,
/**
* @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-progress-bar
* @category visual
* @tutorial react/Reference/progress
* @description
* [en] The component is used to display a linear progress bar. It can either display a progress bar that shows the user how much of a task has been completed. In the case where the percentage is not known it can be used to display an animated progress bar so the user can see that an operation is in progress. [/en]
* [jp][/jp]
* @example
*<ProgressBar value={55} secondaryValue={87} />
*<ProgressBar indeterminate />
*/
var ProgressBar = function (_SimpleWrapper) {
inherits(ProgressBar, _SimpleWrapper);
function ProgressBar() {
classCallCheck(this, ProgressBar);
return possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
}
createClass(ProgressBar, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-progress-bar';
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'indeterminate');
Util.convert(others, 'secondaryValue', { newName: 'secondary-value' });
return React.createElement(this._getDomNodeName(), others, this.props.children);
}
}]);
return ProgressBar;
}(SimpleWrapper);
ProgressBar.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the progress indicator.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name value
* @type number
* @description
* [en]
* Current progress. Should be a value between 0 and 100.
* [/en]
* [jp] [/jp]
*/
value: React.PropTypes.number,
/**
* @name secondaryValue
* @type bool
* @description
* [en]
* Current secondary progress. Should be a value between 0 and 100.
* [/en]
* [jp] [/jp]
*/
secondaryValue: React.PropTypes.number,
/**
* @name intermediate
* @type bool
* @description
* [en] If this property is set, an infinite looping animation will be shown. [/en]
* [jp] [/jp]
*/
indeterminate: React.PropTypes.bool
};
/**
* @original ons-progress-circular
* @category visual
* @tutorial react/Reference/progress
* @description
* [en] This component displays a circular progress indicator. It can either be used to show how much of a task has been completed or to show a looping animation to indicate that an operation is currently running.
* [/en]
* [jp][/jp]
* @example
*<ProgressCircular value={55} secondaryValue={87} />
*<ProgressCircular indeterminate />
*/
var ProgressCircular = function (_SimpleWrapper) {
inherits(ProgressCircular, _SimpleWrapper);
function ProgressCircular() {
classCallCheck(this, ProgressCircular);
return possibleConstructorReturn(this, (ProgressCircular.__proto__ || Object.getPrototypeOf(ProgressCircular)).apply(this, arguments));
}
createClass(ProgressCircular, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-progress-circular';
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'indeterminate');
Util.convert(others, 'secondaryValue', { newName: 'secondary-value' });
return React.createElement(this._getDomNodeName(), others, this.props.children);
}
}]);
return ProgressCircular;
}(SimpleWrapper);
ProgressCircular.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the progress indicator.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name value
* @type number
* @description
* [en]
* Current progress. Should be a value between 0 and 100.
* [/en]
* [jp] [/jp]
*/
value: React.PropTypes.number,
/**
* @name secondaryValue
* @type bool
* @description
* [en]
* Current secondary progress. Should be a value between 0 and 100.
* [/en]
* [jp] [/jp]
*/
secondaryValue: React.PropTypes.number,
/**
* @name intermediate
* @type bool
* @description
* [en] If this property is set, an infinite looping animation will be shown. [/en]
* [jp] [/jp]
*/
indeterminate: React.PropTypes.bool
};
/**
* @original ons-pull-hook
* @category control
* @tutorial react/Reference/pull-hook
* @description
* [en] Component that adds **Pull to refresh** functionality to an `<ons-page>` element.
* It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.
[/en]
* [jp] どうしよう[/jp]
* @example
return (
<PullHook onChange={this.onChange} onLoad={this.onLoad}>
{
(this.state.pullHookState === 'initial') ?
<span >
<Icon size={35} spin={false} icon='ion-arrow-down-a' />
Pull down to refresh
</span> :
(this.state.pullHookState === 'preaction') ?
<span>
<Icon size={35} spin={false} icon='ion-arrow-up-a' />
Release to refresh
</span>
:
<span><Icon size={35} spin={true} icon='ion-load-d'></Icon> Loading data...</span>
}
</PullHook>
);
*/
var PullHook = function (_BasicComponent) {
inherits(PullHook, _BasicComponent);
function PullHook() {
classCallCheck(this, PullHook);
return possibleConstructorReturn(this, (PullHook.__proto__ || Object.getPrototypeOf(PullHook)).apply(this, arguments));
}
createClass(PullHook, [{
key: 'componentDidMount',
value: function componentDidMount() {
get(PullHook.prototype.__proto__ || Object.getPrototypeOf(PullHook.prototype), 'componentDidMount', this).call(this);
var node = ReactDOM__default.findDOMNode(this);
node.addEventListener('changestate', this.props.onChange);
this.refs.pullHook.onAction = this.props.onLoad;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var node = ReactDOM__default.findDOMNode(this);
node.removeEventListener('changestate', this.props.onChange);
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
['disabled'].forEach(function (el) {
Util.convert(others, el);
});
Util.convert(others, 'height', { fun: Util.sizeConverter });
Util.convert(others, 'thresholdHeight', { fun: Util.sizeConverter, newName: 'threshold-height' });
Util.convert(others, 'fixedContent', { newName: 'fixed-content' });
return React.createElement('ons-pull-hook', _extends({ ref: 'pullHook' }, others));
}
}]);
return PullHook;
}(BasicComponent);
PullHook.propTypes = {
/**
* @name onChange
* @type function
* @required false
* @description
* [en]Called when the pull hook inner state is changed. The state can be either "initial", "preaction" or "action"[/en]
* [jp] [/jp]
*/
onChange: React.PropTypes.func,
/**
* @name onLoad
* @type function
* @required false
* @description
* [en]Called when the pull hook is in the `action` state[/en]
* [jp] [/jp]
*/
onLoad: React.PropTypes.func,
/**
* @name disabled
* @type bool
* @description
* [en] When set to true, the pull hook will be disabled.[/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool,
/**
* @name height
* @type number
* @description
* [en] The height of the pull hook in pixels. The default value is 64.[/en]
* [jp] [/jp]
*/
height: React.PropTypes.number,
/**
* @name thresholdHeight
* @type number
* @description
* [en] The threshold height of the pull hook in pixels. The default value is 96.[/en]
* [jp] [/jp]
*/
thresholdHeight: React.PropTypes.number,
/**
* @name fixedContent
* @type number
* @description
* [en] If set to true, the content of the page will not move when pulling.[/en]
* [jp] [/jp]
*/
fixedContent: React.PropTypes.bool
};
var EVENT_TYPES$1 = ['change', 'input'];
/**
* @original ons-range
* @category form
* @tutorial react/Reference/range
* @description
* [en]
* Range input component.
* [/en]
* [jp][/jp]
* @example
* <Range modifier="material"
* value={this.state.value}
* onChange={(event) => this.setState({value: parseInt(event.target.value)})}
* />
*/
var Range = function (_SimpleWrapper) {
inherits(Range, _SimpleWrapper);
function Range() {
classCallCheck(this, Range);
return possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).apply(this, arguments));
}
createClass(Range, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
get(Range.prototype.__proto__ || Object.getPrototypeOf(Range.prototype), 'componentDidMount', this).call(this);
var node = ReactDOM__default.findDOMNode(this);
EVENT_TYPES$1.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$1.forEach(function (eventType) {
node.removeEventListener(eventType, _this3.props.onChange);
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
var node = ReactDOM__default.findDOMNode(this);
node.value = props.value;
}
}, {
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-range';
}
}]);
return Range;
}(SimpleWrapper);
Range.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the progress indicator.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name onChange
* @type function
* @description
* [en] Called when the value of the input changes.[/en]
* [jp][/jp]
*/
onChange: React.PropTypes.func,
/**
* @name value
* @type number
* @description
* [en]
* Current value of the element.
* [/en]
* [jp] [/jp]
*/
value: React.PropTypes.number,
/**
* @name disabled
* @type bool
* @description
* [en] If true, the element is disabled. [/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool
};
/**
* @original ons-ripple
* @category visual
* @tutorial react/Reference/ripple
* @description
* [en]
* Adds a Material Design "ripple" effect to an element.
* [/en]
* [jp][/jp]
* @example
<div className='myList'>
<Ripple color='red' />
</div>
*/
var Ripple = function (_SimpleWrapper) {
inherits(Ripple, _SimpleWrapper);
function Ripple() {
classCallCheck(this, Ripple);
return possibleConstructorReturn(this, (Ripple.__proto__ || Object.getPrototypeOf(Ripple)).apply(this, arguments));
}
createClass(Ripple, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-ripple';
}
}]);
return Ripple;
}(SimpleWrapper);
Ripple.propTypes = {
/**
* @name color
* @type string
* @required false
* @description
* [en]Color of the ripple effect.[/en]
* [jp] [/jp]
*/
color: React.PropTypes.string,
/**
* @name background
* @type string
* @required false
* @description
* [en]Color of the background.[/en]
* [jp] [/jp]
*/
background: React.PropTypes.string,
/**
* @name disabled
* @type bool
* @description
* [en]
* Specifies whether the button is disabled.
* [/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool
};
/**
* @original ons-row
* @category grid
* @description
* [en]
* Represents a row in the grid system. Use with `Col` to layout components.
* [/en]
* [jp][/jp]
* <Row>
* <Col width={50}>
* <ons-icon icon="fa-twitter"></ons-icon>
* </Col>
* <Col>Text</Col>
* </Row>
*/
var Row = function (_SimpleWrapper) {
inherits(Row, _SimpleWrapper);
function Row() {
classCallCheck(this, Row);
return possibleConstructorReturn(this, (Row.__proto__ || Object.getPrototypeOf(Row)).apply(this, arguments));
}
createClass(Row, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-row';
}
}, {
key: 'render',
value: function render() {
var others = objectWithoutProperties(this.props, []);
Util.convert(others, 'verticalAlign', { newName: 'vertical-align' });
return React.createElement(this._getDomNodeName(), others, this.props.children);
}
}]);
return Row;
}(SimpleWrapper);
Row.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'])
};
/**
* @original ons-speed-dial
* @category control
* @tutorial react/Reference/speed-dial
* @description
* [en] Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page.
* The Speed dial looks like a `Fab` element but will expand a menu when tapped.
[/en]
* [jp][/jp]
* @example
* <SpeedDial disabled={false} direction='right' onClick={() => console.log('test1')} position='left bottom'>
<Fab>
<Icon icon='fa-twitter' size={26} fixedWidth={false} style={{verticalAlign: 'middle'}} />
</Fab>
<SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
</SpeedDial>
*/
var SpeedDial = function (_SimpleWrapper) {
inherits(SpeedDial, _SimpleWrapper);
function SpeedDial() {
classCallCheck(this, SpeedDial);
return possibleConstructorReturn(this, (SpeedDial.__proto__ || Object.getPrototypeOf(SpeedDial)).apply(this, arguments));
}
createClass(SpeedDial, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-speed-dial';
}
}]);
return SpeedDial;
}(SimpleWrapper);
SpeedDial.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the speed dial.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @name position
* @type string
* @description
* [en]Specify the vertical and horizontal position of the component.
* I.e. to display it in the top right corner specify "right top".
* Choose from "right", "left", "top" and "bottom".
[/en]
* [jp] [/jp]
*/
position: React.PropTypes.string,
/**
* @name direction
* @type string
* @description
* [en]Specify the direction the items are displayed. Possible values are "up", "down", "left" and "right".[/en]
* [jp] [/jp]
*/
direction: React.PropTypes.oneOf(['up', 'down', 'left', 'right']),
/**
* @name disabled
* @type string
* @description
* [en]Specify if button should be disabled.[/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool
};
/**
* @original ons-speed-dial-item
* @category control
* @tutorial react/Reference/speed-dial
* @description
* [en] This component displays the child elements of the Material Design Speed dial component. [/en]
* [jp][/jp]
* @example
* <SpeedDial disabled={false} direction='right' onClick={() => console.log('test1')} position='left bottom'>
<Fab>
<Icon icon='fa-twitter' size={26} fixedWidth={false} style={{verticalAlign: 'middle'}} />
</Fab>
<SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
<SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
</SpeedDial>
*/
var SpeedDialItem = function (_SimpleWrapper) {
inherits(SpeedDialItem, _SimpleWrapper);
function SpeedDialItem() {
classCallCheck(this, SpeedDialItem);
return possibleConstructorReturn(this, (SpeedDialItem.__proto__ || Object.getPrototypeOf(SpeedDialItem)).apply(this, arguments));
}
createClass(SpeedDialItem, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-speed-dial-item';
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
get(SpeedDialItem.prototype.__proto__ || Object.getPrototypeOf(SpeedDialItem.prototype), 'componentDidMount', this).call(this);
var node = ReactDOM__default.findDOMNode(this);
node.addEventListener('click', this.props.onClick);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var node = ReactDOM__default.findDOMNode(this);
node.removeEventListener('click', this.props.onClick);
}
}]);
return SpeedDialItem;
}(SimpleWrapper);
SpeedDialItem.propTypes = {
/**
* @name modifier
* @type string
* @required false
* @description
* [en]The appearance of the button.[/en]
* [jp] [/jp]
*/
modifier: React.PropTypes.string,
/**
* @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-splitter
* @category menu
* @tutorial react/Reference/splitter
* @description
* [en] A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout.
*
* It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.
[/en]
* [jp] どうしよう[/jp]
* @example
<Splitter>
<SplitterSide
side="left"
width={200}
isSwipeable={true}>
<Page> Page Left </Page>
</SplitterSide>
<SplitterContent>
<Page> Page Content </Page>
</SplitterContent>
<SplitterSide
side="right"
width={300}
collapse={!this.state.showRight}
isOpen={this.state.openRight}
onClose={this.handleRightClose.bind(this)}
onOpen={this.handleRightOpen.bind(this)}
isSwipeable={true}>
<Page> Page Right </Page>
</SplitterSide>
</Splitter>
*/
var Splitter = function (_SimpleWrapper) {
inherits(Splitter, _SimpleWrapper);
function Splitter() {
classCallCheck(this, Splitter);
return possibleConstructorReturn(this, (Splitter.__proto__ || Object.getPrototypeOf(Splitter)).apply(this, arguments));
}
createClass(Splitter, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-splitter';
}
}]);
return Splitter;
}(SimpleWrapper);
/**
* @original ons-splitter-content
* @category menu
* @tutorial react/Reference/splitter
* @description
* [en] The SplitterContent element is used as a child element of Splitter.
* It contains the main content of the page while SplitterSide contains the list.
[/en]
* [jp][/jp]
* @example
<Splitter>
<SplitterSide
side="left"
width={200}
isSwipeable={true}>
<Page> Page Left </Page>
</SplitterSide>
<SplitterContent>
<Page> Page Content </Page>
</SplitterContent>
<SplitterSide
side="right"
width={300}
collapse={!this.state.showRight}
isOpen={this.state.openRight}
onClose={this.handleRightClose.bind(this)}
onOpen={this.handleRightOpen.bind(this)}
isSwipeable={true}>
<Page> Page Right </Page>
</SplitterSide>
</Splitter>
*/
var SplitterContent = function (_SimpleWrapper) {
inherits(SplitterContent, _SimpleWrapper);
function SplitterContent() {
classCallCheck(this, SplitterContent);
return possibleConstructorReturn(this, (SplitterContent.__proto__ || Object.getPrototypeOf(SplitterContent)).apply(this, arguments));
}
createClass(SplitterContent, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-splitter-content';
}
}]);
return SplitterContent;
}(SimpleWrapper);
/**
* @original ons-splitter-side
* @category menu
* @tutorial react/Reference/splitter
* @description
* [en] The SplitterContent element is used as a child element of Splitter.
* It contains the main content of the page while SplitterSide contains the list.
[/en]
* [jp][/jp]
* @example
<Splitter>
<SplitterSide
side="left"
width={200}
isSwipeable={true}>
<Page> Page Left </Page>
</SplitterSide>
<SplitterContent>
<Page> Page Content </Page>
</SplitterContent>
<SplitterSide
side="right"
width={300}
collapse={!this.state.showRight}
isOpen={this.state.openRight}
onClose={this.handleRightClose.bind(this)}
onOpen={this.handleRightOpen.bind(this)}
isSwipeable={true}>
<Page> Page Right </Page>
</SplitterSide>
</Splitter>
*/
var SplitterSide = function (_BasicComponent) {
inherits(SplitterSide, _BasicComponent);
function SplitterSide() {
classCallCheck(this, SplitterSide);
return possibleConstructorReturn(this, (SplitterSide.__proto__ || Object.getPrototypeOf(SplitterSide)).apply(this, arguments));
}
createClass(SplitterSide, [{
key: 'render',
value: function render() {
var props = objectWithoutProperties(this.props, []);
props.swipeable = this.props.isSwipeable ? 'swipeable' : null;
if (this.props.isCollapsed) {
console.error('The property `isCollapsed` is deprecated, please use `collapse`, see https://onsen.io/v2/docs/react/SplitterSide.html.');
delete props['isCollapsed'];
}
if (!props.collapse) props.collapse = null;
if (typeof props.collapse === 'boolean') {
if (props.collapse) {
props.collapse = 'collapse';
} else {
props.collapse = 'false';
}
}
Util.convert(props, 'width', { fun: Util.sizeConverter });
Util.convert(props, 'animation');
Util.convert(props, 'side');
Util.convert(props, 'mode');
Util.convert(props, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });
Util.convert(props, 'openThreshold', { newName: 'open-threshold' });
Util.convert(props, 'swipeTargetWidth', { fun: Util.sizeConverter, newName: 'swipe-target-width' });
return React.createElement('ons-splitter-side', props, this.props.children);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
get(SplitterSide.prototype.__proto__ || Object.getPrototypeOf(SplitterSide.prototype), 'componentDidMount', this).call(this);
this.node = ReactDOM__default.findDOMNode(this);
this.componentWillReceiveProps(this.props);
this.node.addEventListener('postopen', this.props.onOpen);
this.node.addEventListener('postclose', this.props.onClose);
this.node.addEventListener('preopen', this.props.onPreOpen);
this.node.addEventListener('preclose', this.props.onPreClose);
this.node.addEventListener('modechange', this.props.onModeChange);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.node.removeEventListener('postopen', this.props.onOpen);
this.node.removeEventListener('postclose', this.props.onClose);
this.node.removeEventListener('preopen', this.props.onPreOpen);
this.node.removeEventListener('preclose', this.props.onPreClose);
this.node.removeEventListener('modechange', this.props.onModeChange);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
if (newProps.isOpen) {
this.node.open();
} else {
this.node.close();
}
}
}]);
return SplitterSide;
}(BasicComponent);
SplitterSide.propTypes = {
/**
* @name collapse
* @type bool
* @description
* [en] Specify the collapse behavior. Valid values are `"portrait"`, `"landscape"` or a media query.
* The strings `"portrait"` and `"landscape"` means the view will collapse when device is in landscape or portrait orientation.
* If the value is not defined, the view always be in `"collapse"` mode.
[/en]
* [jp] [/jp]
*/
collapse: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.string]),
/**
* @name isSwipeable
* @type bool
* @description
* [en]Ennable swipe interaction on collapse mode.[/en]
* [jp] [/jp]
*/
isSwipeable: React.PropTypes.bool,
/**
* @name isOpen
* @type bool
* @description
* [en]Specifies whether the menu is open.[/en]
* [jp] [/jp]
*/
isOpen: React.PropTypes.bool,
/**
* @name onOpen
* @type function
* @description
* [en]Called after the menu is opened.[/en]
* [jp] [/jp]
*/
onOpen: React.PropTypes.func,
/**
* @name onClose
* @type function
* @description
* [en]Called after the menu is closed.[/en]
* [jp] [/jp]
*/
onClose: React.PropTypes.func,
/**
* @name side
* @type string
* @description
* [en]Specify which side of the screen the SplitterSide element is located. Possible values are `"left"` and `"right"`.[/en]
* [jp] [/jp]
*/
side: React.PropTypes.oneOf(['left', 'right']),
/**
* @name swipeTargetWidth
* @type number
* @description
* [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. "20%" for percentage).[/en]
* [jp] [/jp]
*/
swipeTargetWidth: React.PropTypes.number,
/**
* @name width
* @type number
* @description
* [en]Specifies the width of the menu with a number (for pixels) or a string (e.g. "20%" for percentage).[/en]
* [jp] [/jp]
*/
width: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
/**
* @name animation
* @type string
* @required false
* @description
* [en]Specify the animation. Use one of `"overlay"`, and `"default"`.[/en]
* [jp] [/jp]
*/
animation: 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 openThreshold
* @type object
* @required false
* @description
* [en] Specify how much the menu needs to be swiped before opening. A value between `0` and `1`. [/en]
* [jp] [/jp]
*/
openThreshold: React.PropTypes.number,
/**
* @name mode
* @type string
* @required false
* @description
* [en] Current mode. Possible values are `"collapse"` or `"split"`. This attribute is read only. [/en]
* [jp] [/jp]
*/
mode: React.PropTypes.oneOf(['collapse', 'split']),
/**
* @name onPreOpen
* @type string
* @description
* [en] Called before the menu opens. [/en]
* [jp] [/jp]
*/
onPreOpen: React.PropTypes.func,
/**
* @name onPreClose
* @type string
* @description
* [en] Called before the menu closes. [/en]
* [jp] [/jp]
*/
onPreClose: React.PropTypes.func,
/**
* @name onModeChange
* @type string
* @description
* [en] Called after the component's mode changes. [/en]
* [jp] [/jp]
*/
onModeChange: React.PropTypes.func
};
/**
* @original ons-switch
* @category form
* @tutorial react/Reference/switch
* @description
* [en] Switch component. The switch can be toggled both by dragging and tapping.
* Will automatically displays a Material Design switch on Android devices.
[/en]
* [jp][/jp]
* @example
* <Switch checked={this.state.checked} onChange={this.onChange} />
*/
var Switch = function (_BasicComponent) {
inherits(Switch, _BasicComponent);
function Switch() {
classCallCheck(this, Switch);
return possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).apply(this, arguments));
}
createClass(Switch, [{
key: 'componentDidMount',
value: function componentDidMount() {
get(Switch.prototype.__proto__ || Object.getPrototypeOf(Switch.prototype), 'componentDidMount', this).call(this);
this.refs.switch.addEventListener('change', this.props.onChange);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.refs.switch.removeEventListener('change', this.props.onChange);
}
}, {
key: 'render',
value: function render() {
var _props = this.props;
var checked = _props.checked;
var inputId = _props.inputId;
var other = objectWithoutProperties(_props, ['checked', 'inputId']);
Util.convert(other, 'disabled');
if (inputId) {
other['input-id'] = inputId;
}
return React.createElement('ons-switch', _extends({ ref: 'switch', checked: checked ? '' : null }, other));
}
}]);
return Switch;
}(BasicComponent);
Switch.propTypes = {
/**
* @name onChange
* @type function
* @description
* [en] Called when the value of the switch changes (checked/unchecked) [/en]
* [jp] [/jp]
*/
onChange: React.PropTypes.func,
/**
* @name checked
* @type bool
* @description
* [en] Whether the switch is checked.[/en]
* [jp] [/jp]
*/
checked: React.PropTypes.bool,
/**
* @name disabled
* @type bool
* @description
* [en] If set, the switch is disabled.[/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool,
/**
* @name inputId
* @type bool
* @description
* [en] Specify the `id` attribute of the inner `<input>` element. This is useful when using `<label for="...">` elements.[/en]
* [jp] [/jp]
*/
inputId: React.PropTypes.string
};
/**
* @original ons-tab
* @category tabbar
* @tutorial react/Reference/tabbar
* @description
* [en] Represents a tab inside tab bar.
[/en]
* [jp][/jp]
* @example
* <Tap>
* Home
* </Tap>
*/
var Tab = function (_SimpleWrapper) {
inherits(Tab, _SimpleWrapper);
function Tab() {
classCallCheck(this, Tab);
return possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
}
createClass(Tab, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-tab';
}
}]);
return Tab;
}(SimpleWrapper);
/**
* @original ons-tab-active
* @category tabbar
* @tutorial react/Reference/tabbar
* @description
* [en] Tab element for showing shown when the tab is active [/en]
* [jp][/jp]
* @example
* <Tab>
* <TabActive>
HOME
</TabInActive>
<TabInActive>
home
</TabInActive>
</Tab>
*/
var TabActive = function (_SimpleWrapper) {
inherits(TabActive, _SimpleWrapper);
function TabActive() {
classCallCheck(this, TabActive);
return possibleConstructorReturn(this, (TabActive.__proto__ || Object.getPrototypeOf(TabActive)).apply(this, arguments));
}
createClass(TabActive, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-tab-active';
}
}]);
return TabActive;
}(SimpleWrapper);
/**
* @original ons-tab-inactive
* @category tabbar
* @tutorial react/Reference/tabbar
* @description
* [en] Tab element for showing shown when the tab is inactive [/en]
* [jp][/jp]
* @example
* <Tab>
* <TabActive>
HOME
</TabInactive>
<TabInactive>
home
</TabInactive>
</Tab>
*/
var TabInactive = function (_SimpleWrapper) {
inherits(TabInactive, _SimpleWrapper);
function TabInactive() {
classCallCheck(this, TabInactive);
return possibleConstructorReturn(this, (TabInactive.__proto__ || Object.getPrototypeOf(TabInactive)).apply(this, arguments));
}
createClass(TabInactive, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-tab-inactive';
}
}]);
return TabInactive;
}(SimpleWrapper);
/**
* @original ons-tabbar
* @category tabbar
* @tutorial react/Reference/tabbar
* @description
* [en] Component to display a tabbar on either the top or the bottom of a page.
* To define the tabs and the content the property renderTabs need to be implemented, that returns an array of tabs and their content. See the example for specifics. [/en]* [jp][/jp]
* @example
<Page>
<Tabbar
onPreChange={({index}) => this.setState(index)}
onPostChange={() => console.log('postChange')}
onReactive={() => console.log('postChange')}
position='bottom'
index={this.state.index}
renderTabs={(activeIndex, tabbar) => [
{
content: <TabPage title="Home" active={activeIndex === 0} tabbar={tabbar} />,
tab: <Tab label="Home" icon="md-home" />
},
{
content: <TabPage title="Settings" active={activeIndex === 1} tabbar={tabbar} />,
tab: <Tab label="Settings" icon="md-settings" />
}]
}
/>
</Page>
*/
var Tabbar = function (_BasicComponent) {
inherits(Tabbar, _BasicComponent);
function Tabbar() {
classCallCheck(this, Tabbar);
return possibleConstructorReturn(this, (Tabbar.__proto__ || Object.getPrototypeOf(Tabbar)).apply(this, arguments));
}
createClass(Tabbar, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
get(Tabbar.prototype.__proto__ || Object.getPrototypeOf(Tabbar.prototype), 'componentDidMount', this).call(this);
var node = this.refs.tabbar;
node.addEventListener('prechange', this.props.onPreChange);
node.addEventListener('postchange', this.props.onPostChange);
node.addEventListener('reactive', this.props.onReactive);
setTimeout(function () {
node.setActiveTab(_this2.props.index);
}, 0);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var node = this.refs.tabbar;
node.removeEventListener('prechange', this.props.onPreChange);
node.removeEventListener('postchange', this.props.onPostChange);
node.removeEventListener('reactive', this.props.onReactive);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
get(Tabbar.prototype.__proto__ || Object.getPrototypeOf(Tabbar.prototype), 'componentDidUpdate', this).call(this, prevProps);
if (prevProps.index !== this.props.index) {
this.refs.tabbar.setActiveTab(this.props.index);
}
}
}, {
key: 'render',
value: function render() {
var tabs = this.props.renderTabs(this.props.index, this);
if (!this.tabPages) {
this.tabPages = tabs.map(function (tab) {
return tab.content;
});
} else {
this.tabPages[this.props.index] = tabs[this.props.index].content;
}
var others = objectWithoutProperties(this.props, []);
['animation'].forEach(function (el) {
Util.convert(others, el);
});
Util.convert(others, 'animationOptions', { fun: Util.animationOptionsConverter, newName: 'animation-options' });
return React.createElement('ons-tabbar', _extends({}, this.props, { ref: 'tabbar' }), React.createElement('div', { className: 'ons-tab-bar__content tab-bar__content' + (this.props.position === 'top' ? ' tab-bar--top__content' : '') }, this.tabPages), React.createElement('div', { className: 'tab-bar ons-tab-bar__footer ons-tabbar-inner' + (this.props.position === 'top' ? ' tab-bar--top' : '') }, tabs.map(function (tab) {
return tab.tab;
})));
}
}]);
return Tabbar;
}(BasicComponent);
Tabbar.propTypes = {
/**
* @name index
* @type number
* @required
* @description
* [en] The index of the tab to highlight.[/en]
* [jp] [/jp]
*/
index: React.PropTypes.number.isRequired,
/**
* @name renderTabs
* @type function
* @description
* [en] The index of the first tab to show.[/en]
* [jp] [/jp]
*/
renderTabs: React.PropTypes.func.isRequired,
/**
* @name position
* @type string
* @description
* [en] Tabbar's position. Available values are `"bottom"` and `"top"`. Use `"auto"` to choose position depending on platform (iOS bottom, Android top). [/en]
* [jp] [/jp]
*/
position: React.PropTypes.string,
/**
* @name animation
* @type string
* @description
* [en] Animation name. Available values are `"none"`, `"slide"` and `"fade"`. Default is `"none"`. [/en]
* [jp] [/jp]
*/
animation: React.PropTypes.oneOf(['none', 'slide', 'fade']),
/**
* @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 onPreChange
* @type function
* @description
* [en]Called just before the tab is changed.[/en]
* [jp] [/jp]
*/
onPreChange: React.PropTypes.func,
/**
* @name onPostChange
* @type function
* @description
* [en]Called just after the tab is changed.[/en]
* [jp] [/jp]
*/
onPostChange: React.PropTypes.func,
/**
* @name onReactive
* @type function
* @description
* [en]Called if the already open tab is tapped again.[/en]
* [jp] [/jp]
*/
onReactive: React.PropTypes.func
};
Tabbar.defaultProps = {
index: 0
};
/**
* @original ons-toolbar
* @category page
* @tutorial react/Reference/page
* @description
* [en]Toolbar component that can be used with navigation. Left, center and right container can be specified by class names. This component will automatically displays as a Material Design toolbar when running on Android devices.[/en]
* [jp] どうしよう[/jp]
* @example
*
<Page renderToolbar={() =>
<Toolbar>
<div className="left">
<BackButton>
Back
</BackButton>
</div>
<div className="center">
Title
</div>
<div className="right">
<ToolbarButton>
<Icon icon="md-menu" />
</ToolbarButton>
</div>
</Toolbar> }
/>
*/
var Toolbar = function (_SimpleWrapper) {
inherits(Toolbar, _SimpleWrapper);
function Toolbar() {
classCallCheck(this, Toolbar);
return possibleConstructorReturn(this, (Toolbar.__proto__ || Object.getPrototypeOf(Toolbar)).apply(this, arguments));
}
createClass(Toolbar, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-toolbar';
}
}]);
return Toolbar;
}(SimpleWrapper);
Toolbar.propTypes = {
/**
* @name modifier
* @type string
* @description
* [en]
* Specify modifier name to specify custom styles. Optional.
* [/en]
* [jp] どうしよう[/jp]
*/
modifier: React.PropTypes.string
};
/**
* @original ons-toolbar-button
* @category page
* @tutorial react/Reference/page
* @description
* [en]
* Button component for the Toolbar. Using this component gives a nice default style.
*
*
* [/en]
* [jp][/jp]
* @example
* <Page
renderToolbar = { () =>
<Toolbar>
<div className='left'><BackButton>Back</BackButton></div>
<div className='center'>Input</div>
<div className='right'>
<ToolbarButton onClick={this.add} >Add</ToolbarButton>
</div>
</Toolbar>
}>
Page Content
</Page>
*/
var ToolbarButton = function (_SimpleWrapper) {
inherits(ToolbarButton, _SimpleWrapper);
function ToolbarButton() {
classCallCheck(this, ToolbarButton);
return possibleConstructorReturn(this, (ToolbarButton.__proto__ || Object.getPrototypeOf(ToolbarButton)).apply(this, arguments));
}
createClass(ToolbarButton, [{
key: '_getDomNodeName',
value: function _getDomNodeName() {
return 'ons-toolbar-button';
}
}]);
return ToolbarButton;
}(SimpleWrapper);
ToolbarButton.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]
* Indicates whether the button is disabled.
* [/en]
* [jp] [/jp]
*/
disabled: React.PropTypes.bool
};
exports.AlertDialog = AlertDialog;
exports.BackButton = BackButton;
exports.BottomToolbar = BottomToolbar;
exports.Button = Button;
exports.Carousel = Carousel;
exports.CarouselItem = CarouselItem;
exports.Col = Col;
exports.Dialog = Dialog;
exports.Fab = Fab;
exports.Icon = Icon;
exports.Input = Input;
exports.LazyList = LazyList;
exports.List = List;
exports.ListHeader = ListHeader;
exports.ListItem = ListItem;
exports.Navigator = Navigator;
exports.Modal = Modal;
exports.Page = Page;
exports.Popover = Popover;
exports.ProgressBar = ProgressBar;
exports.ProgressCircular = ProgressCircular;
exports.PullHook = PullHook;
exports.Range = Range;
exports.Ripple = Ripple;
exports.Row = Row;
exports.SpeedDial = SpeedDial;
exports.SpeedDialItem = SpeedDialItem;
exports.Splitter = Splitter;
exports.SplitterContent = SplitterContent;
exports.SplitterSide = SplitterSide;
exports.Switch = Switch;
exports.Tab = Tab;
exports.TabActive = TabActive;
exports.TabInactive = TabInactive;
exports.Tabbar = Tabbar;
exports.Toolbar = Toolbar;
exports.ToolbarButton = ToolbarButton;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=react-onsenui.js.map
================================================
FILE: docgen.js
================================================
var filter = require('filter-files');
var exec = require('child_process').exec;
var files = filter.sync('./src/components/', (fp) => {
// console.log(fp);
return fp.indexOf('Util') === -1 &&
fp.indexOf('BaseDialo
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
SYMBOL INDEX (313 symbols across 65 files)
FILE: demo/examples/AlertDialog.js
method constructor (line 6) | constructor(props) {
method handleClick (line 14) | handleClick() {
method handleCancel (line 20) | handleCancel() {
method render (line 26) | render() {
FILE: demo/examples/BackButton.js
method constructor (line 12) | constructor(props) {
method handleClick (line 16) | handleClick() {
method renderToolbar (line 27) | renderToolbar() {
method render (line 40) | render() {
FILE: demo/examples/BottomToolbar.js
method constructor (line 8) | constructor(props) {
method toggleModifier (line 16) | toggleModifier() {
method render (line 22) | render() {
FILE: demo/examples/Carousel.js
method constructor (line 20) | constructor(props) {
method goTo (line 34) | goTo(number) {
method render (line 39) | render() {
FILE: demo/examples/Dialog.js
class MyPage2 (line 16) | class MyPage2 extends React.Component {
method render (line 17) | render() {
class FirstPage (line 35) | class FirstPage extends React.Component {
method constructor (line 36) | constructor(props) {
method render (line 40) | render() {
class MyDialog (line 56) | class MyDialog extends React.Component {
method constructor (line 57) | constructor(props) {
method popPage (line 67) | popPage() {
method pushPage (line 71) | pushPage() {
method onNameChanged (line 77) | onNameChanged(event) {
method onDescriptionChanged (line 81) | onDescriptionChanged(event) {
method renderPage (line 86) | renderPage(route, navigator) {
method render (line 95) | render() {
method constructor (line 110) | constructor(props) {
method hide (line 125) | hide() {
method onNameChanged (line 130) | onNameChanged(value) {
method onDescriptionChanged (line 134) | onDescriptionChanged(value) {
method showAlert (line 138) | showAlert() {
method showAlert2 (line 142) | showAlert2() {
method render (line 148) | render() {
FILE: demo/examples/Icon.js
method constructor (line 9) | constructor(props) {
method changeModifier (line 20) | changeModifier() {
method render (line 36) | render() {
FILE: demo/examples/Input.js
method constructor (line 14) | constructor(props) {
method handleCheckbox (line 24) | handleCheckbox(idx, event) {
method handleRadio (line 37) | handleRadio(idx, event) {
method render (line 43) | render() {
FILE: demo/examples/LazyList.js
method constructor (line 17) | constructor(props) {
method renderRow (line 24) | renderRow(index) {
method render (line 32) | render() {
FILE: demo/examples/List.js
method constructor (line 16) | constructor(props) {
method reverseData (line 24) | reverseData() {
method remove (line 30) | remove(idx) {
method add (line 39) | add() {
method render (line 48) | render() {
FILE: demo/examples/Modal.js
method constructor (line 26) | constructor(props) {
method renderModalToolbar (line 34) | renderModalToolbar() {
method renderModal (line 50) | renderModal() {
method render (line 68) | render() {
FILE: demo/examples/MyToolbar.js
method render (line 6) | render() {
FILE: demo/examples/Page.js
class Page2 (line 7) | class Page2 extends React.Component {
method constructor (line 8) | constructor(props) {
method render (line 12) | render() {
method constructor (line 25) | constructor(props) {
method toggleModifier (line 33) | toggleModifier() {
method render (line 39) | render() {
FILE: demo/examples/Popover.js
method constructor (line 12) | constructor(props) {
method showClick (line 20) | showClick(target) {
method getTarget (line 25) | getTarget() {
method cancel (line 29) | cancel() {
method render (line 34) | render() {
FILE: demo/examples/ProgressBar.js
method constructor (line 12) | constructor(props) {
method increaseTime (line 25) | increaseTime() {
method componentWillUnmount (line 33) | componentWillUnmount() {
method render (line 37) | render() {
FILE: demo/examples/PullHook.js
class MyPullHook (line 15) | class MyPullHook extends React.Component {
method constructor (line 16) | constructor(props) {
method onLoad (line 23) | onLoad(done) {
method onChange (line 27) | onChange(event) {
method render (line 32) | render() {
method constructor (line 58) | constructor(props) {
method render (line 66) | render() {
FILE: demo/examples/Range.js
method constructor (line 11) | constructor(props) {
method changeFirstRange (line 18) | changeFirstRange(event) {
method changeSecondRange (line 25) | changeSecondRange(event) {
method render (line 31) | render() {
FILE: demo/examples/Ripple.js
method constructor (line 8) | constructor(props) {
method render (line 12) | render() {
FILE: demo/examples/RowColumn.js
method constructor (line 12) | constructor(props) {
method toggleModifier (line 20) | toggleModifier() {
method render (line 26) | render() {
FILE: demo/examples/SpeedDial.js
method constructor (line 14) | constructor(props) {
method renderToolbar (line 22) | renderToolbar() {
method renderFixed (line 35) | renderFixed() {
method render (line 53) | render() {
FILE: demo/examples/Splitter.js
method constructor (line 15) | constructor(props) {
method handleLeftClose (line 26) | handleLeftClose() {
method handleLeftOpen (line 32) | handleLeftOpen() {
method handleRightClose (line 38) | handleRightClose() {
method handleRightOpen (line 44) | handleRightOpen() {
method render (line 50) | render() {
FILE: demo/examples/Switch.js
method constructor (line 15) | constructor(props) {
method onChange (line 21) | onChange(event) {
method render (line 25) | render() {
FILE: demo/examples/Tabbar.js
class TabPage (line 6) | class TabPage extends React.Component {
method render (line 7) | render() {
method constructor (line 21) | constructor(props) {
method renderTabs (line 29) | renderTabs(activeIndex, tabbar) {
method render (line 50) | render() {
FILE: demo/index.js
class Examples (line 39) | class Examples extends React.Component {
method constructor (line 40) | constructor(props) {
method getExamples (line 47) | getExamples() {
method goto (line 139) | goto(example) {
method render (line 148) | render() {
class App (line 167) | class App extends React.Component {
method renderPage (line 168) | renderPage(route, navigator) {
method render (line 175) | render() {
FILE: dist/react-onsenui.js
function AwaitValue (line 52) | function AwaitValue(value) {
function AsyncGenerator (line 56) | function AsyncGenerator(gen) {
function defineProperties (line 175) | function defineProperties(target, props) {
function BaseDialog (line 308) | function BaseDialog() {
function AlertDialog (line 460) | function AlertDialog() {
function BasicComponent (line 614) | function BasicComponent() {
function SimpleWrapper (line 667) | function SimpleWrapper() {
function BackButton (line 707) | function BackButton() {
function BottomToolbar (line 780) | function BottomToolbar() {
function Button (line 824) | function Button() {
function Carousel (line 911) | function Carousel() {
function CarouselItem (line 1152) | function CarouselItem() {
function Col (line 1200) | function Col() {
function Dialog (line 1269) | function Dialog() {
function Fab (line 1444) | function Fab() {
function Icon (line 1531) | function Icon() {
function Input (line 1668) | function Input() {
function LazyList (line 1857) | function LazyList() {
function List (line 1996) | function List() {
function ListHeader (line 2109) | function ListHeader() {
function ListItem (line 2158) | function ListItem() {
function Navigator (line 2265) | function Navigator() {
function Modal (line 2717) | function Modal() {
function Page (line 2862) | function Page() {
function Popover (line 3045) | function Popover() {
function ProgressBar (line 3229) | function ProgressBar() {
function ProgressCircular (line 3314) | function ProgressCircular() {
function PullHook (line 3417) | function PullHook() {
function Range (line 3534) | function Range() {
function Ripple (line 3638) | function Ripple() {
function Row (line 3706) | function Row() {
function SpeedDial (line 3768) | function SpeedDial() {
function SpeedDialItem (line 3848) | function SpeedDialItem() {
function Splitter (line 3935) | function Splitter() {
function SplitterContent (line 3985) | function SplitterContent() {
function SplitterSide (line 4035) | function SplitterSide() {
function Switch (line 4267) | function Switch() {
function Tab (line 4359) | function Tab() {
function TabActive (line 4394) | function TabActive() {
function TabInactive (line 4429) | function TabInactive() {
function Tabbar (line 4476) | function Tabbar() {
function Toolbar (line 4652) | function Toolbar() {
function ToolbarButton (line 4710) | function ToolbarButton() {
FILE: src/components/AlertDialog.jsx
class AlertDialog (line 29) | class AlertDialog extends BaseDialog {
method _getDomNodeName (line 30) | _getDomNodeName() {
FILE: src/components/BackButton.jsx
class BackButton (line 22) | class BackButton extends SimpleWrapper {
method _getDomNodeName (line 23) | _getDomNodeName() {
method _updateOnClick (line 27) | _updateOnClick(props) {
method componentDidMount (line 37) | componentDidMount() {
method componentWillReceiveProps (line 41) | componentWillReceiveProps(props) {
FILE: src/components/BaseDialog.jsx
class BaseDialog (line 5) | class BaseDialog extends React.Component {
method show (line 6) | show() {
method updateClasses (line 10) | updateClasses() {
method hide (line 23) | hide() {
method componentDidMount (line 27) | componentDidMount() {
method componentWillReceiveProps (line 40) | componentWillReceiveProps(newProps) {
method componentWillUnmount (line 44) | componentWillUnmount() {
method _update (line 55) | _update(isShown) {
method _getDomNodeName (line 66) | _getDomNodeName() {
method renderPortal (line 70) | renderPortal(props, isShown) {
method shouldComponentUpdate (line 82) | shouldComponentUpdate() {
method render (line 86) | render() {
FILE: src/components/BasicComponent.jsx
class BasicComponent (line 6) | class BasicComponent extends React.Component {
method constructor (line 7) | constructor(...args) {
method updateClasses (line 12) | updateClasses() {
method componentDidMount (line 32) | componentDidMount() {
method componentDidUpdate (line 36) | componentDidUpdate() {
FILE: src/components/BottomToolbar.jsx
class BottomToolbar (line 13) | class BottomToolbar extends SimpleWrapper {
method _getDomNodeName (line 14) | _getDomNodeName() {
FILE: src/components/Button.jsx
class Button (line 17) | class Button extends SimpleWrapper {
method _getDomNodeName (line 18) | _getDomNodeName() {
FILE: src/components/Carousel.jsx
class Carousel (line 30) | class Carousel extends SimpleWrapper {
method _getDomNodeName (line 31) | _getDomNodeName() {
method componentDidMount (line 35) | componentDidMount() {
method componentWillReceiveProps (line 43) | componentWillReceiveProps(props) {
method componentDidUpdate (line 51) | componentDidUpdate(props) {
method componentWillUnmount (line 59) | componentWillUnmount() {
method render (line 66) | render() {
FILE: src/components/CarouselItem.jsx
class CarouselItem (line 22) | class CarouselItem extends SimpleWrapper {
method _getDomNodeName (line 23) | _getDomNodeName() {
FILE: src/components/Col.jsx
class Col (line 20) | class Col extends SimpleWrapper {
method _getDomNodeName (line 21) | _getDomNodeName() {
method render (line 25) | render() {
FILE: src/components/Dialog.jsx
class Dialog (line 22) | class Dialog extends BaseDialog {
method _getDomNodeName (line 23) | _getDomNodeName() {
FILE: src/components/Fab.jsx
class Fab (line 24) | class Fab extends SimpleWrapper {
method _getDomNodeName (line 25) | _getDomNodeName() {
FILE: src/components/Icon.jsx
class Icon (line 23) | class Icon extends SimpleWrapper {
method _getDomNodeName (line 24) | _getDomNodeName() {
method render (line 28) | render() {
FILE: src/components/Input.jsx
constant EVENT_TYPES (line 6) | const EVENT_TYPES = ['change', 'input'];
class Input (line 24) | class Input extends BasicComponent {
method componentDidMount (line 25) | componentDidMount() {
method componentWillUnmount (line 34) | componentWillUnmount() {
method componentWillReceiveProps (line 42) | componentWillReceiveProps(props) {
method render (line 54) | render() {
FILE: src/components/LazyList.jsx
class LazyList (line 43) | class LazyList extends BasicComponent {
method constructor (line 44) | constructor(...args) {
method update (line 50) | update(props) {
method componentWillReceiveProps (line 81) | componentWillReceiveProps(newProps) {
method componentDidMount (line 89) | componentDidMount() {
method render (line 94) | render() {
FILE: src/components/List.jsx
class List (line 25) | class List extends BasicComponent {
method render (line 26) | render() {
FILE: src/components/ListHeader.jsx
class ListHeader (line 22) | class ListHeader extends SimpleWrapper {
method _getDomNodeName (line 23) | _getDomNodeName() {
FILE: src/components/ListItem.jsx
class ListItem (line 22) | class ListItem extends SimpleWrapper {
method _getDomNodeName (line 23) | _getDomNodeName() {
method componentDidMount (line 27) | componentDidMount() {
method componentDidUpdate (line 32) | componentDidUpdate() {
method render (line 37) | render() {
FILE: src/components/Modal.jsx
class Modal (line 31) | class Modal extends BasicComponent {
method constructor (line 32) | constructor(...args) {
method componentDidMount (line 37) | componentDidMount() {
method componentWillReceiveProps (line 44) | componentWillReceiveProps(nextProps) {
method _update (line 48) | _update(props, isOpen) {
method componentWillUnmount (line 61) | componentWillUnmount() {
method render (line 65) | render() {
FILE: src/components/Navigator.jsx
class Navigator (line 26) | class Navigator extends BasicComponent {
method constructor (line 27) | constructor(...args) {
method update (line 37) | update(pages, obj) {
method resetPage (line 57) | resetPage(route, options = {}) {
method resetPageStack (line 74) | resetPageStack(routes, options = {}) {
method pushPage (line 115) | pushPage(route, options = {}) {
method isRunning (line 143) | isRunning() {
method replacePage (line 160) | replacePage(route, options = {}) {
method popPage (line 184) | popPage(options = {}) {
method _prePop (line 203) | _prePop(event) {
method _postPop (line 212) | _postPop(event) {
method _prePush (line 221) | _prePush(event) {
method _postPush (line 230) | _postPush(event) {
method componentDidMount (line 239) | componentDidMount() {
method componentWillUnmount (line 266) | componentWillUnmount() {
method render (line 274) | render() {
FILE: src/components/Page.jsx
class Page (line 25) | class Page extends BasicComponent {
method componentDidMount (line 27) | componentDidMount() {
method componentWillUnmount (line 35) | componentWillUnmount() {
method render (line 42) | render() {
FILE: src/components/Popover.jsx
class Popover (line 30) | class Popover extends BaseDialog {
method _getDomNodeName (line 31) | _getDomNodeName() {
method show (line 35) | show() {
FILE: src/components/ProgressBar.jsx
class ProgressBar (line 16) | class ProgressBar extends SimpleWrapper {
method _getDomNodeName (line 17) | _getDomNodeName() {
method render (line 21) | render() {
FILE: src/components/ProgressCircular.jsx
class ProgressCircular (line 17) | class ProgressCircular extends SimpleWrapper {
method _getDomNodeName (line 18) | _getDomNodeName() {
method render (line 22) | render() {
FILE: src/components/PullHook.jsx
class PullHook (line 36) | class PullHook extends BasicComponent {
method componentDidMount (line 37) | componentDidMount() {
method componentWillUnmount (line 44) | componentWillUnmount() {
method render (line 49) | render() {
FILE: src/components/Range.jsx
constant EVENT_TYPES (line 5) | const EVENT_TYPES = ['change', 'input'];
class Range (line 22) | class Range extends SimpleWrapper {
method componentDidMount (line 24) | componentDidMount() {
method componentWillUnmount (line 33) | componentWillUnmount() {
method componentWillReceiveProps (line 41) | componentWillReceiveProps(props) {
method _getDomNodeName (line 46) | _getDomNodeName() {
FILE: src/components/Ripple.jsx
class Ripple (line 18) | class Ripple extends SimpleWrapper {
method _getDomNodeName (line 19) | _getDomNodeName() {
FILE: src/components/Row.jsx
class Row (line 20) | class Row extends SimpleWrapper {
method _getDomNodeName (line 21) | _getDomNodeName() {
method render (line 25) | render() {
FILE: src/components/SimpleWrapper.jsx
class SimpleWrapper (line 5) | class SimpleWrapper extends BasicComponent {
method render (line 6) | render() {
FILE: src/components/SpeedDial.jsx
class SpeedDial (line 24) | class SpeedDial extends SimpleWrapper {
method _getDomNodeName (line 25) | _getDomNodeName() {
FILE: src/components/SpeedDialItem.jsx
class SpeedDialItem (line 23) | class SpeedDialItem extends SimpleWrapper {
method _getDomNodeName (line 24) | _getDomNodeName() {
method componentDidMount (line 28) | componentDidMount() {
method componentWillUnmount (line 34) | componentWillUnmount() {
FILE: src/components/Splitter.jsx
class Splitter (line 37) | class Splitter extends SimpleWrapper {
method _getDomNodeName (line 38) | _getDomNodeName() {
FILE: src/components/SplitterContent.jsx
class SplitterContent (line 34) | class SplitterContent extends SimpleWrapper {
method _getDomNodeName (line 35) | _getDomNodeName() {
FILE: src/components/SplitterSide.jsx
class SplitterSide (line 39) | class SplitterSide extends BasicComponent {
method render (line 40) | render() {
method componentDidMount (line 75) | componentDidMount() {
method componentWillUnmount (line 87) | componentWillUnmount() {
method componentWillReceiveProps (line 95) | componentWillReceiveProps(newProps) {
FILE: src/components/Switch.jsx
class Switch (line 17) | class Switch extends BasicComponent {
method componentDidMount (line 19) | componentDidMount() {
method componentWillUnmount (line 24) | componentWillUnmount() {
method render (line 28) | render() {
FILE: src/components/Tab.jsx
class Tab (line 16) | class Tab extends SimpleWrapper {
method _getDomNodeName (line 17) | _getDomNodeName() {
FILE: src/components/TabActive.jsx
class TabActive (line 20) | class TabActive extends SimpleWrapper {
method _getDomNodeName (line 21) | _getDomNodeName() {
FILE: src/components/TabInactive.jsx
class TabInactive (line 20) | class TabInactive extends SimpleWrapper {
method _getDomNodeName (line 21) | _getDomNodeName() {
FILE: src/components/Tabbar.jsx
class Tabbar (line 35) | class Tabbar extends BasicComponent {
method componentDidMount (line 37) | componentDidMount() {
method componentWillUnmount (line 49) | componentWillUnmount() {
method componentDidUpdate (line 56) | componentDidUpdate(prevProps) {
method render (line 63) | render() {
FILE: src/components/Toolbar.jsx
class Toolbar (line 31) | class Toolbar extends SimpleWrapper {
method _getDomNodeName (line 32) | _getDomNodeName() {
FILE: src/components/ToolbarButton.jsx
class ToolbarButton (line 29) | class ToolbarButton extends SimpleWrapper {
method _getDomNodeName (line 30) | _getDomNodeName() {
FILE: src/components/Util.js
method sizeConverter (line 2) | sizeConverter(item) {
method numberConverter (line 10) | numberConverter(item) {
method animationOptionsConverter (line 14) | animationOptionsConverter(options) {
method convert (line 20) | convert(dict, name, additionalDict = {}) {
Condensed preview — 159 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (423K chars).
[
{
"path": ".eslintrc.json",
"chars": 4453,
"preview": "{\n \"parserOptions\": {\n \"ecmaVersion\": 6,\n \"ecmaFeatures\": {\n \"experimentalObjectRestSpread\": true,\n \"js"
},
{
"path": ".gitignore",
"chars": 559,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscov"
},
{
"path": ".gitmodules",
"chars": 84,
"preview": "[submodule \"OnsenUI\"]\n\tpath = OnsenUI\n\turl = https://github.com/OnsenUI/OnsenUI.git\n"
},
{
"path": ".npmignore",
"chars": 564,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscov"
},
{
"path": "CHANGELOG.md",
"chars": 531,
"preview": "\nCHANGELOG\n====\n\nv1.0.1\n----\n* list: Support static lists.\n* navigator: Properly render pages.\n\nv1.0.0\n----\n\nv0.7.4\n----"
},
{
"path": "ISSUE_TEMPLATE.md",
"chars": 195,
"preview": "<!--\nThis repository has been merged into OnsenUI/OnsenUI repo and will soon be closed.\nFor react-onsenui issues, please"
},
{
"path": "LICENSE",
"chars": 11357,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 4472,
"preview": "**This package has been moved to the [main Onsen UI repository](https://github.com/OnsenUI/OnsenUI/tree/master/bindings/"
},
{
"path": "circle.yml",
"chars": 36,
"preview": "machine:\n node:\n version: 6.2.0\n"
},
{
"path": "demo/examples/AlertDialog.js",
"chars": 1670,
"preview": "import React from 'react';\n\nimport {Page, Toolbar, Button, BackButton, AlertDialog} from '../../src/index.js';\n\nexport d"
},
{
"path": "demo/examples/BackButton.js",
"chars": 878,
"preview": "import React from 'react';\n\nimport ons from '../../OnsenUI/build/js/onsenui.js'\n\nimport {\n Page,\n Toolbar,\n BackButto"
},
{
"path": "demo/examples/BottomToolbar.js",
"chars": 951,
"preview": "import React from 'react';\n\nimport {Page, Button, BottomToolbar} from '../../src/index.js';\n\nimport MyToolbar from './My"
},
{
"path": "demo/examples/Carousel.js",
"chars": 2066,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport MyToolbar from './MyToolbar';\n\nimport {\n Page,\n Bu"
},
{
"path": "demo/examples/Dialog.js",
"chars": 4225,
"preview": "import React from 'react';\n\nimport {\n Page,\n Button,\n Toolbar,\n Dialog,\n Navigator,\n Input\n} from '../../src/index"
},
{
"path": "demo/examples/Icon.js",
"chars": 1843,
"preview": "\nimport React from 'react';\n\nimport {Button, Page, Icon} from '../../src/index.js';\n\nimport MyToolbar from './MyToolbar'"
},
{
"path": "demo/examples/Input.js",
"chars": 2594,
"preview": "import React from 'react';\n\nimport {\n Page,\n Toolbar,\n ToolbarButton,\n BackButton,\n Input\n} from '../../src/index.j"
},
{
"path": "demo/examples/LazyList.js",
"chars": 1047,
"preview": "import React from 'react';\n\nimport MyToolbar from './MyToolbar';\nimport ons from '../../OnsenUI/build/js/onsenui.js';\n\ni"
},
{
"path": "demo/examples/List.js",
"chars": 1412,
"preview": "import React from 'react';\nimport MyToolbar from './MyToolbar';\n\nimport {\n Page,\n List,\n ListItem,\n ListHeader,\n To"
},
{
"path": "demo/examples/Modal.js",
"chars": 1882,
"preview": "import React from 'react';\nimport {\n Page,\n Modal,\n Button,\n BackButton,\n Toolbar,\n ToolbarButton,\n Icon\n} from '"
},
{
"path": "demo/examples/MyToolbar.js",
"chars": 388,
"preview": "import React from 'react';\n\nimport {Toolbar, BackButton} from '../../src/index.js';\n\nexport default class extends React."
},
{
"path": "demo/examples/Page.js",
"chars": 1458,
"preview": "import React from 'react';\n\nimport {Page, Button} from '../../src/index.js';\n\nimport MyToolbar from './MyToolbar';\n\nclas"
},
{
"path": "demo/examples/Popover.js",
"chars": 3515,
"preview": "import React from 'react';\nimport MyToolbar from './MyToolbar';\n\nimport {\n Page,\n Button,\n Popover\n} from '../../src/"
},
{
"path": "demo/examples/ProgressBar.js",
"chars": 1295,
"preview": "import React from 'react';\n\nimport {\n Page,\n ProgressBar,\n ProgressCircular\n} from '../../src/index.js';\n\nimport MyTo"
},
{
"path": "demo/examples/PullHook.js",
"chars": 1707,
"preview": "import React from 'react';\n\nimport {\n Page,\n PullHook,\n Fab,\n Icon,\n Toolbar,\n List,\n ListItem\n} from '../../src/"
},
{
"path": "demo/examples/Range.js",
"chars": 1096,
"preview": "import React from 'react';\n\nimport {\n Page,\n Range\n} from '../../src/index.js';\n\nimport MyToolbar from './MyToolbar';\n"
},
{
"path": "demo/examples/Ripple.js",
"chars": 587,
"preview": "import React from 'react';\n\nimport {Button, Page, Ripple, Icon} from '../../src/index.js';\n\nimport MyToolbar from './MyT"
},
{
"path": "demo/examples/RowColumn.js",
"chars": 4779,
"preview": "import React from 'react';\n\nimport {\n Page,\n Row,\n Col\n} from '../../src/index.js';\n\nimport MyToolbar from './MyToolb"
},
{
"path": "demo/examples/SpeedDial.js",
"chars": 1335,
"preview": "import React from 'react';\n\nimport {\n Page,\n Icon,\n Fab,\n SpeedDial,\n SpeedDialItem,\n Toolbar,\n BackButton\n} from"
},
{
"path": "demo/examples/Splitter.js",
"chars": 3029,
"preview": "import React from 'react';\n\nimport {\n Splitter,\n SplitterSide,\n SplitterContent,\n Page,\n Toolbar,\n Button\n} from '"
},
{
"path": "demo/examples/Switch.js",
"chars": 945,
"preview": "import React from 'react';\n\nimport {\n Page,\n Toolbar,\n ToolbarButton,\n BackButton,\n Input,\n Switch\n} from '../../s"
},
{
"path": "demo/examples/Tabbar.js",
"chars": 1820,
"preview": "import React from 'react';\n\nimport {Tabbar, Tab, Page, Button} from '../../src/index.js';\nimport MyToolbar from './MyToo"
},
{
"path": "demo/index.html",
"chars": 835,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <link href='https://fonts.googleapis.com/css?family"
},
{
"path": "demo/index.js",
"chars": 4647,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport '../OnsenUI/build/js/onsenui.js';\n\nimport '../Onsen"
},
{
"path": "dist/react-onsenui.js",
"chars": 127087,
"preview": "/*! react-onsenui v1.0.3 - Wed Oct 26 2016 16:40:29 GMT+0900 (JST) */\n(function (global, factory) {\n typeof exports ==="
},
{
"path": "docgen.js",
"chars": 669,
"preview": "var filter = require('filter-files');\nvar exec = require('child_process').exec;\n\nvar files = filter.sync('./src/componen"
},
{
"path": "docs/AlertDialog.json",
"chars": 3895,
"preview": "{\"description\":\"@original ons-alert-dialog\\n@category dialog\\n@tutorial react/Reference/dialog\\n@description\\n[en]\\n Al"
},
{
"path": "docs/BackButton.json",
"chars": 1264,
"preview": "{\"description\":\"@original ons-back-button\\n@category navigation\\n@tutorial react/Reference/navigator\\n@description\\n[en]"
},
{
"path": "docs/BasicComponent.json",
"chars": 114,
"preview": "{\"description\":\"\",\"methods\":[{\"name\":\"updateClasses\",\"docblock\":null,\"modifiers\":[],\"params\":[],\"returns\":null}]}\n"
},
{
"path": "docs/BottomToolbar.json",
"chars": 538,
"preview": "{\"description\":\"@original ons-bottom-toolbar\\n@category page\\n@description\\n[en]Toolbar component that is positioned at "
},
{
"path": "docs/Button.json",
"chars": 1243,
"preview": "{\"description\":\"@original ons-button\\n@category form\\n@tutorial react/Reference/button\\n@description\\n[en] Button compon"
},
{
"path": "docs/Carousel.json",
"chars": 4914,
"preview": "{\"description\":\"@original ons-carousel\\n@category carousel\\n@tutorial react/Reference/carousel\\n@description\\n[en] Carou"
},
{
"path": "docs/CarouselItem.json",
"chars": 867,
"preview": "{\"description\":\"@original ons-carousel-item\\n@category carousel\\n@tutorial react/Reference/carousel\\n@description\\n[en] "
},
{
"path": "docs/Col.json",
"chars": 1002,
"preview": "{\"description\":\"@original ons-col\\n@category grid\\n@description\\n[en]\\nRepresents a column in the grid system. Use with "
},
{
"path": "docs/Dialog.json",
"chars": 3574,
"preview": "{\"description\":\"@original ons-dialog\\n@category dialog\\n@tutorial react/Reference/dialog\\n@description\\n[en] Dialog tha"
},
{
"path": "docs/Fab.json",
"chars": 2264,
"preview": "{\"description\":\"@original ons-fab\\n@category form\\n@tutorial react/Reference/fab\\n@description\\n[en] The Floating action"
},
{
"path": "docs/Icon.json",
"chars": 2557,
"preview": "{\"description\":\"@original ons-icon\\n@category visual\\n@tutorial react/Reference/icon\\n@description\\n[en]\\nDisplays an ic"
},
{
"path": "docs/Input.json",
"chars": 2726,
"preview": "{\"description\":\"@original ons-input\\n@category form\\n@tutorial react/Reference/input\\n@description\\n[en]\\nAn input eleme"
},
{
"path": "docs/LazyList.json",
"chars": 1868,
"preview": "{\"description\":\"@original ons-lazy-repeat\\n@category list\\n@tutorial react/Reference/lazy-list\\n@description\\n[en] Using"
},
{
"path": "docs/List.json",
"chars": 2023,
"preview": "{\"description\":\"@original ons-list\\n@category list\\n@tutorial react/Reference/list\\n@description\\n [en]\\n Component "
},
{
"path": "docs/ListHeader.json",
"chars": 770,
"preview": "{\"description\":\"@original ons-list-header\\n@category list\\n@tutorial react/Reference/list\\n@description\\n[en] Header ele"
},
{
"path": "docs/ListItem.json",
"chars": 1615,
"preview": "{\"description\":\"@original ons-list-item\\n@category list\\n@tutorial react/Reference/list\\n@description\\n [en]\\n Compone"
},
{
"path": "docs/Modal.json",
"chars": 2211,
"preview": "{\"description\":\"@original ons-modal\\n@category dialog\\n@tutorial react/Reference/modal\\n@description\\n[en]\\n A modal co"
},
{
"path": "docs/Navigator.json",
"chars": 6767,
"preview": "{\"description\":\"@original ons-navigator\\n@category navigation\\n@tutorial react/Reference/navigator\\n@description\\n[en] T"
},
{
"path": "docs/Page.json",
"chars": 2825,
"preview": "{\"description\":\"@original ons-page\\n@category page\\n@tutorial react/Reference/page\\n@description\\n[en]\\n This component"
},
{
"path": "docs/Popover.json",
"chars": 4104,
"preview": "{\"description\":\"@original ons-popover\\n@category dialog\\n@tutorial react/Reference/popover\\n@description\\n [en]\\n A "
},
{
"path": "docs/ProgressBar.json",
"chars": 1460,
"preview": "{\"description\":\"@original ons-progress-bar\\n@category visual\\n@tutorial react/Reference/progress\\n@description\\n[en] The"
},
{
"path": "docs/ProgressCircular.json",
"chars": 1378,
"preview": "{\"description\":\"@original ons-progress-circular\\n@category visual\\n@tutorial react/Reference/progress\\n@description\\n[en"
},
{
"path": "docs/PullHook.json",
"chars": 2299,
"preview": "{\"description\":\"@original ons-pull-hook\\n@category control\\n@tutorial react/Reference/pull-hook\\n@description\\n[en] Com"
},
{
"path": "docs/Range.json",
"chars": 1127,
"preview": "{\"description\":\"@original ons-range\\n@category form\\n@tutorial react/Reference/range\\n@description\\n[en]\\n Range input "
},
{
"path": "docs/Ripple.json",
"chars": 917,
"preview": "{\"description\":\"@original ons-ripple\\n@category visual\\n@tutorial react/Reference/ripple\\n@description\\n[en]\\n Adds a M"
},
{
"path": "docs/Row.json",
"chars": 739,
"preview": "{\"description\":\"@original ons-row\\n@category grid\\n@description\\n[en]\\nRepresents a row in the grid system. Use with `Co"
},
{
"path": "docs/SimpleWrapper.json",
"chars": 32,
"preview": "{\"description\":\"\",\"methods\":[]}\n"
},
{
"path": "docs/SpeedDial.json",
"chars": 2157,
"preview": "{\"description\":\"@original ons-speed-dial\\n@category control\\n@tutorial react/Reference/speed-dial\\n@description\\n[en] El"
},
{
"path": "docs/SpeedDialItem.json",
"chars": 1295,
"preview": "{\"description\":\"@original ons-speed-dial-item\\n@category control\\n@tutorial react/Reference/speed-dial\\n@description\\n[e"
},
{
"path": "docs/Splitter.json",
"chars": 1114,
"preview": "{\"description\":\"@original ons-splitter\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] A compon"
},
{
"path": "docs/SplitterContent.json",
"chars": 966,
"preview": "{\"description\":\"@original ons-splitter-content\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] "
},
{
"path": "docs/SplitterSide.json",
"chars": 4556,
"preview": "{\"description\":\"@original ons-splitter-side\\n@category menu\\n@tutorial react/Reference/splitter\\n@description\\n[en] The"
},
{
"path": "docs/Switch.json",
"chars": 1168,
"preview": "{\"description\":\"@original ons-switch\\n@category form\\n@tutorial react/Reference/switch\\n@description\\n[en] Switch comp"
},
{
"path": "docs/Tab.json",
"chars": 290,
"preview": "{\"description\":\"@original ons-tab\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Represents a t"
},
{
"path": "docs/TabActive.json",
"chars": 413,
"preview": "{\"description\":\"@original ons-tab-active\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Tab ele"
},
{
"path": "docs/TabInactive.json",
"chars": 417,
"preview": "{\"description\":\"@original ons-tab-inactive\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Tab e"
},
{
"path": "docs/Tabbar.json",
"chars": 2955,
"preview": "{\"description\":\"@original ons-tabbar\\n@category tabbar\\n@tutorial react/Reference/tabbar\\n@description\\n[en] Component t"
},
{
"path": "docs/Toolbar.json",
"chars": 1020,
"preview": "{\"description\":\"@original ons-toolbar\\n@category page\\n@tutorial react/Reference/page\\n@description\\n[en]Toolbar compone"
},
{
"path": "docs/ToolbarButton.json",
"chars": 1052,
"preview": "{\"description\":\"@original ons-toolbar-button\\n@category page\\n@tutorial react/Reference/page\\n@description\\n [en]\\n Bu"
},
{
"path": "githubRelease.js",
"chars": 1470,
"preview": "var prompt = require('prompt');\nvar GitHubApi = require('github');\nvar colors = require('colors');\n\ncolors.setTheme({ wa"
},
{
"path": "index.html",
"chars": 683,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <link href='https://fonts.googleapis.com/css?family"
},
{
"path": "karma.conf.js",
"chars": 1101,
"preview": "var webpack = require('webpack');\n\nmodule.exports = function(config) {\n config.set({\n browsers: [ 'Chrome' ], // run"
},
{
"path": "package.json",
"chars": 2544,
"preview": "{\n \"name\": \"react-onsenui\",\n \"version\": \"1.0.3\",\n \"description\": \"Onsen UI - React Components for Hybrid Cordova/Phon"
},
{
"path": "rollup.config.js",
"chars": 1107,
"preview": "import {readFileSync} from 'fs';\nimport babel from 'rollup-plugin-babel';\nimport nodeResolve from 'rollup-plugin-node-re"
},
{
"path": "scripts/react-docgen.js",
"chars": 333,
"preview": "var Module = require('module');\nvar originalRequire = Module.prototype.require;\n\nModule.prototype.require = function(){\n"
},
{
"path": "src/components/AlertDialog.jsx",
"chars": 4101,
"preview": "import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\n\n/**\n * @original ons-alert-dialog\n * @category di"
},
{
"path": "src/components/BackButton.jsx",
"chars": 1641,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n/**\n * @o"
},
{
"path": "src/components/BaseDialog.jsx",
"chars": 3025,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Util from './Util.js';\n\nclass BaseDialog extends Rea"
},
{
"path": "src/components/BasicComponent.jsx",
"chars": 967,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport ons from 'onsenui';\n\nclass BasicComponent extends R"
},
{
"path": "src/components/BottomToolbar.jsx",
"chars": 677,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-bottom-toolbar\n * @cat"
},
{
"path": "src/components/Button.jsx",
"chars": 1375,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-button\n * @category fo"
},
{
"path": "src/components/Carousel.jsx",
"chars": 6802,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport {findDOMNode} from 'react-dom';\nimpor"
},
{
"path": "src/components/CarouselItem.jsx",
"chars": 1005,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-carousel-item\n * @cate"
},
{
"path": "src/components/Col.jsx",
"chars": 1320,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @origi"
},
{
"path": "src/components/Dialog.jsx",
"chars": 3772,
"preview": "import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\n\n/**\n * @original ons-dialog\n * @category dialog\n "
},
{
"path": "src/components/Fab.jsx",
"chars": 2362,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-fab\n * @category form\n"
},
{
"path": "src/components/Icon.jsx",
"chars": 3464,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @origi"
},
{
"path": "src/components/Input.jsx",
"chars": 3907,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\nimport U"
},
{
"path": "src/components/LazyList.jsx",
"chars": 3627,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\n\n/**\n * @original ons-lazy-repeat\n * @cate"
},
{
"path": "src/components/List.jsx",
"chars": 2418,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\n\n/**\n * @original ons-list\n * @category li"
},
{
"path": "src/components/ListHeader.jsx",
"chars": 896,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-list-header\n * @catego"
},
{
"path": "src/components/ListItem.jsx",
"chars": 2337,
"preview": "import ReactDOM from 'react-dom';\nimport React from 'react';\nimport SimpleWrapper from './SimpleWrapper.jsx';\nimport Uti"
},
{
"path": "src/components/Modal.jsx",
"chars": 2857,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\n\n/**\n * "
},
{
"path": "src/components/Navigator.jsx",
"chars": 10566,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @ori"
},
{
"path": "src/components/Page.jsx",
"chars": 4145,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\n/**\n * @"
},
{
"path": "src/components/Popover.jsx",
"chars": 4449,
"preview": "import BaseDialog from './BaseDialog.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n/**\n * @origina"
},
{
"path": "src/components/ProgressBar.jsx",
"chars": 1899,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @origi"
},
{
"path": "src/components/ProgressCircular.jsx",
"chars": 1839,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @origi"
},
{
"path": "src/components/PullHook.jsx",
"chars": 3275,
"preview": "import ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\nimport React from 'react';\nimport U"
},
{
"path": "src/components/Range.jsx",
"chars": 1851,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst EVE"
},
{
"path": "src/components/Ripple.jsx",
"chars": 1042,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-ripple\n * @category vi"
},
{
"path": "src/components/Row.jsx",
"chars": 997,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\nimport Util from './Util.js';\n\n/**\n * @origi"
},
{
"path": "src/components/SimpleWrapper.jsx",
"chars": 400,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\nclass Simpl"
},
{
"path": "src/components/SpeedDial.jsx",
"chars": 2148,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-speed-dial\n * @categor"
},
{
"path": "src/components/SpeedDialItem.jsx",
"chars": 1761,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport ReactDOM from 'react-dom';\nimport React from 'react';\n\n/**\n * @o"
},
{
"path": "src/components/Splitter.jsx",
"chars": 1171,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-splitter\n * @category menu\n * @tutorial react/Ref"
},
{
"path": "src/components/SplitterContent.jsx",
"chars": 1042,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\n/**\n * @original ons-splitter-content\n * @category menu\n * @tutorial re"
},
{
"path": "src/components/SplitterSide.jsx",
"chars": 6769,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport BasicComponent from './BasicComponent.jsx';\nimport U"
},
{
"path": "src/components/Switch.jsx",
"chars": 1844,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @ori"
},
{
"path": "src/components/Tab.jsx",
"chars": 359,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab\n * @category tabbar\n * @tutorial react/Refere"
},
{
"path": "src/components/TabActive.jsx",
"chars": 494,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab-active\n * @category tabbar\n * @tutorial react"
},
{
"path": "src/components/TabInactive.jsx",
"chars": 504,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\n\n/**\n * @original ons-tab-inactive\n * @category tabbar\n * @tutorial rea"
},
{
"path": "src/components/Tabbar.jsx",
"chars": 4764,
"preview": "import React from 'react';\nimport BasicComponent from './BasicComponent.jsx';\nimport Util from './Util.js';\n\n/**\n * @ori"
},
{
"path": "src/components/Toolbar.jsx",
"chars": 1120,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-toolbar\n * @category p"
},
{
"path": "src/components/ToolbarButton.jsx",
"chars": 1203,
"preview": "import SimpleWrapper from './SimpleWrapper.jsx';\nimport React from 'react';\n\n/**\n * @original ons-toolbar-button\n * @cat"
},
{
"path": "src/components/Util.js",
"chars": 807,
"preview": "export default {\n sizeConverter(item) {\n if (typeof (item) === 'number') {\n return `${item}px`;\n } else {\n "
},
{
"path": "src/index.js",
"chars": 2309,
"preview": "import AlertDialog from './components/AlertDialog.jsx';\nimport BackButton from './components/BackButton.jsx';\nimport Bot"
},
{
"path": "test/backButton-test.js",
"chars": 356,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BackButton} from "
},
{
"path": "test/bottomToolbar-test.js",
"chars": 357,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BottomToolbar} fr"
},
{
"path": "test/button-test.js",
"chars": 340,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Button} from '../"
},
{
"path": "test/carousel-test.js",
"chars": 347,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Carousel} from '."
},
{
"path": "test/carouselItem-test.js",
"chars": 364,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {CarouselItem} fro"
},
{
"path": "test/col-test.js",
"chars": 327,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Col} from '../dis"
},
{
"path": "test/fab-test.js",
"chars": 327,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Fab} from '../dis"
},
{
"path": "test/icon-test.js",
"chars": 331,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Icon} from '../di"
},
{
"path": "test/input.js",
"chars": 335,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Input} from '../d"
},
{
"path": "test/lazyList-test.js",
"chars": 769,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Page, LazyList} f"
},
{
"path": "test/list-test.js",
"chars": 494,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {List} from '../di"
},
{
"path": "test/listHeader-test.js",
"chars": 372,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ListHeader} from "
},
{
"path": "test/listItem-test.js",
"chars": 390,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ListItem} from '."
},
{
"path": "test/modal-test.js",
"chars": 349,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Modal} from '../d"
},
{
"path": "test/page-test.js",
"chars": 344,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Page} from '../di"
},
{
"path": "test/progressBar-test.js",
"chars": 361,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ProgressBar} from"
},
{
"path": "test/progressBarCircular-test.js",
"chars": 381,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ProgressCircular}"
},
{
"path": "test/pullHook-test.js",
"chars": 349,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {PullHook} from '."
},
{
"path": "test/range-test.js",
"chars": 336,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Range} from '../d"
},
{
"path": "test/ripple-test.js",
"chars": 340,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Ripple} from '../"
},
{
"path": "test/row-test.js",
"chars": 327,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Row} from '../dis"
},
{
"path": "test/speedDial-test.js",
"chars": 353,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SpeedDial} from '"
},
{
"path": "test/speedDialItem-test.js",
"chars": 370,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SpeedDialItem} fr"
},
{
"path": "test/splitter-test.js",
"chars": 348,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Splitter} from '."
},
{
"path": "test/splitterContent-test.js",
"chars": 377,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SplitterContent} "
},
{
"path": "test/splitterSide-test.js",
"chars": 381,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SplitterSide} fro"
},
{
"path": "test/switch-test.js",
"chars": 339,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Switch} from '../"
},
{
"path": "test/tab-test.js",
"chars": 327,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Tab} from '../dis"
},
{
"path": "test/tabActive-test.js",
"chars": 352,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {TabActive} from '"
},
{
"path": "test/tabInactive-test.js",
"chars": 360,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {TabInactive} from"
},
{
"path": "test/tabbar-test.js",
"chars": 394,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Tabbar} from '../"
},
{
"path": "test/testUtil.js",
"chars": 410,
"preview": "/* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport TestUtils from 'rea"
},
{
"path": "test/todo",
"chars": 231,
"preview": "../src/components/SimpleWrapper.jsx\n../src/components/Popover.jsx\n../src/components/Navigator.jsx\n../src/components/Aler"
},
{
"path": "test/toolbar-test.js",
"chars": 344,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Toolbar} from '.."
},
{
"path": "test/toolbarButton-test.js",
"chars": 368,
"preview": " /* global describe it assert */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {ToolbarButton} fr"
},
{
"path": "tests.webpack.js",
"chars": 94,
"preview": "var context = require.context('./test', true, /-test\\.js$/);\ncontext.keys().forEach(context);\n"
},
{
"path": "webpack.config.js",
"chars": 1289,
"preview": "var webpack = require('webpack');\nvar path = require('path');\n\nmodule.exports = {\n devtool: 'eval-source-map',\n contex"
}
]
About this extraction
This page contains the full source code of the OnsenUI/react-onsenui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 159 files (384.1 KB), approximately 107.7k tokens, and a symbol index with 313 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.