36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/docs/CarouselItem.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-carousel-item\n@category carousel\n@tutorial react/Reference/carousel\n@description\n[en] Carousel item component. Used as a child of the `` element.\n [/en]\n[jp][/jp]\n@example\n \n \n
GRAY
\n \n \n
BLUE
\n \n ","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"modifier":{"type":{"name":"string"},"required":false,"description":"@name modifier\n@type string\n@description\n [en]\n Specify modifier name to specify custom styles. Optional.\n [/en]\n [jp] どうしよう[/jp]"}}}
2 |
--------------------------------------------------------------------------------
/test/lazyList-test.js:
--------------------------------------------------------------------------------
1 | /* global describe it assert */
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import {Page, LazyList} from '../dist/react-onsenui.js';
6 | import TestUtils from 'react/lib/ReactTestUtils';
7 |
8 | import rendersToComponent from './testUtil.js';
9 |
10 | describe('LazyList', function() {
11 | it(`renders to <${name}>`, () => {
12 | // lazy repeat needs to be inside page
13 | var root = TestUtils.renderIntoDocument(
14 |
15 | }
18 | calculateItemHeight={() => 45}
19 | />
20 |
21 |
22 | );
23 | var node = ReactDOM.findDOMNode(root);
24 | assert.isNotNull(node);
25 | assert.equal(node.nodeName, 'ONS-PAGE');
26 | assert.equal(node.children[1].firstChild.nodeName, 'ONS-LIST');
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/docs/Ripple.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-ripple\n@category visual\n@tutorial react/Reference/ripple\n@description\n[en]\n Adds a Material Design \"ripple\" effect to an element.\n[/en]\n[jp][/jp]\n@example\n
\n \n
","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"color":{"type":{"name":"string"},"required":false,"description":"@name color\n@type string\n@required false\n@description\n [en]Color of the ripple effect.[/en]\n [jp] [/jp]"},"background":{"type":{"name":"string"},"required":false,"description":"@name background\n@type string\n@required false\n@description\n [en]Color of the background.[/en]\n [jp] [/jp]"},"disabled":{"type":{"name":"bool"},"required":false,"description":"@name disabled\n@type bool\n@description\n [en]\n Specifies whether the button is disabled.\n [/en]\n [jp] [/jp]"}}}
2 |
--------------------------------------------------------------------------------
/docs/SplitterContent.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-splitter-content\n@category menu\n@tutorial react/Reference/splitter\n@description\n[en] The SplitterContent element is used as a child element of Splitter.\n It contains the main content of the page while SplitterSide contains the list.\n [/en]\n[jp][/jp]\n@example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n ","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}]}
2 |
--------------------------------------------------------------------------------
/src/components/Util.js:
--------------------------------------------------------------------------------
1 | export default {
2 | sizeConverter(item) {
3 | if (typeof (item) === 'number') {
4 | return `${item}px`;
5 | } else {
6 | return item;
7 | }
8 | },
9 |
10 | numberConverter(item) {
11 | return `${item}px`;
12 | },
13 |
14 | animationOptionsConverter(options) {
15 | var keys = Object.keys(options);
16 | var innerString = keys.map((key) => key + ': "' + options[key] + '"');
17 | return '{' + innerString.join(',') + '}';
18 | },
19 |
20 | convert(dict, name, additionalDict = {}) {
21 | const fun = additionalDict.fun ? additionalDict.fun : (x) => x;
22 | const newName = additionalDict.newName ? additionalDict.newName : name;
23 |
24 | var val = dict[name];
25 | if (val) {
26 | if (newName !== name) {
27 | delete dict[name];
28 | }
29 | dict[newName] = fun(val);
30 | } else {
31 | dict[newName] = null;
32 | }
33 | return dict;
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/docs/Col.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-col\n@category grid\n@description\n[en]\nRepresents a column in the grid system. Use with `` to layout components.\n[/en]\n[jp][/jp]\n\n
\n \n \n
Text\n","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"verticalAlign":{"type":{"name":"enum","value":[{"value":"'top'","computed":false},{"value":"'bottom'","computed":false},{"value":"'center'","computed":false}]},"required":false,"description":"@name verticalAlign\n@type {String}\n@description\n [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en]\n [ja][/ja]"},"width":{"type":{"name":"union","value":[{"name":"number"},{"name":"string"}]},"required":false,"description":"@name width\n@type {String}\n@description\n [en]The width of the column. Valid values are css width values (\"10%\", 50).[/en]\n [ja][/ja]"}}}
2 |
--------------------------------------------------------------------------------
/docs/Toolbar.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-toolbar\n@category page\n@tutorial react/Reference/page\n@description\n[en]Toolbar component that can be used with navigation. Left, center and right container can be specified by class names. This component will automatically displays as a Material Design toolbar when running on Android devices.[/en]\n[jp] どうしよう[/jp]\n@example\n\n\n \n
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/docs/ToolbarButton.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-toolbar-button\n@category page\n@tutorial react/Reference/page\n@description\n [en]\n Button component for the Toolbar. Using this component gives a nice default style.\n\n\n [/en]\n[jp][/jp]\n@example\n\n \n
Back
\n
Input
\n
\n Add\n
\n \n }>\n Page Content\n ","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"modifier":{"type":{"name":"string"},"required":false,"description":"@name modifier\n@type string\n@required false\n@description\n [en]The appearance of the button.[/en]\n [jp] [/jp]"},"disabled":{"type":{"name":"bool"},"required":false,"description":"@name disabled\n@type bool\n@description\n [en]\n Indicates whether the button is disabled.\n [/en]\n [jp] [/jp]"}}}
2 |
--------------------------------------------------------------------------------
/src/components/ListHeader.jsx:
--------------------------------------------------------------------------------
1 | import SimpleWrapper from './SimpleWrapper.jsx';
2 | import React from 'react';
3 |
4 | /**
5 | * @original ons-list-header
6 | * @category list
7 | * @tutorial react/Reference/list
8 | * @description
9 | * [en] Header element for list items. Must be put inside ons-list component.
10 | [/en]
11 | * [jp][/jp]
12 | * @example
13 |
16 | Header Text }
17 | renderRow={(row, idx) => (
18 | {row}
19 | )}
20 | />
21 | */
22 | class ListHeader extends SimpleWrapper {
23 | _getDomNodeName() {
24 | return 'ons-list-header';
25 | }
26 | };
27 |
28 | ListHeader.propTypes = {
29 | /**
30 | * @name modifier
31 | * @type string
32 | * @description
33 | * [en]
34 | * Specify modifier name to specify custom styles. Optional.
35 | * [/en]
36 | * [jp][/jp]
37 | */
38 | modifier: React.PropTypes.string
39 | };
40 |
41 | export default ListHeader;
42 |
--------------------------------------------------------------------------------
/docs/Splitter.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-splitter\n@category menu\n@tutorial react/Reference/splitter\n@description\n[en] A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout.\n\n It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.\n [/en]\n[jp] どうしよう[/jp]\n@example\n \n \n Page Left \n \n \n Page Content \n \n \n Page Right \n \n ","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}]}
2 |
--------------------------------------------------------------------------------
/demo/examples/BackButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import ons from '../../OnsenUI/build/js/onsenui.js'
4 |
5 | import {
6 | Page,
7 | Toolbar,
8 | BackButton,
9 | } from '../../src/index.js';
10 |
11 | export default class extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | }
15 |
16 | handleClick() {
17 | ons.notification.confirm('Do you really want to go back?')
18 | .then(
19 | (response) => {
20 | if (response === 1) {
21 | this.props.navigator.popPage();
22 | }
23 | }
24 | );
25 | }
26 |
27 | renderToolbar() {
28 | return (
29 |
30 |
31 |
32 | Back
33 |
34 |
35 |
Back button
36 |
37 | );
38 | }
39 |
40 | render() {
41 | return (
42 |
45 |
46 | );
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/docs/Range.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-range\n@category form\n@tutorial react/Reference/range\n@description\n[en]\n Range input component.\n[/en]\n[jp][/jp]\n@example\n this.setState({value: parseInt(event.target.value)})}\n />","methods":[{"name":"_getDomNodeName","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"modifier":{"type":{"name":"string"},"required":false,"description":"@name modifier\n@type string\n@required false\n@description\n [en]The appearance of the progress indicator.[/en]\n [jp] [/jp]"},"onChange":{"type":{"name":"func"},"required":false,"description":"@name onChange\n@type function\n@description\n [en] Called when the value of the input changes.[/en]\n [jp][/jp]"},"value":{"type":{"name":"number"},"required":false,"description":"@name value\n@type number\n@description\n [en]\n Current value of the element.\n [/en]\n [jp] [/jp]"},"disabled":{"type":{"name":"bool"},"required":false,"description":"@name disabled\n@type bool\n@description\n [en] If true, the element is disabled. [/en]\n [jp] [/jp]"}}}
2 |
--------------------------------------------------------------------------------
/demo/examples/Switch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Page,
5 | Toolbar,
6 | ToolbarButton,
7 | BackButton,
8 | Input,
9 | Switch
10 | } from '../../src/index.js';
11 |
12 | import MyToolbar from './MyToolbar';
13 |
14 | export default class extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | this.state = {checked: true};
18 | this.onChange = this.onChange.bind(this);
19 | }
20 |
21 | onChange(event) {
22 | this.setState({checked: event.target.checked});
23 | }
24 |
25 | render() {
26 | return (
27 | } >
28 |
29 |
Page Content
30 |
31 |
32 |
33 |
34 |
The switch is {this.state.checked ? 'on' : 'off'}
35 |
36 |
37 | );
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/docs/Switch.json:
--------------------------------------------------------------------------------
1 | {"description":"@original ons-switch\n@category form\n@tutorial react/Reference/switch\n@description\n[en] Switch component. The switch can be toggled both by dragging and tapping.\n Will automatically displays a Material Design switch on Android devices.\n [/en]\n[jp][/jp]\n@example\n","methods":[],"props":{"onChange":{"type":{"name":"func"},"required":false,"description":"@name onChange\n@type function\n@description\n [en] Called when the value of the switch changes (checked/unchecked) [/en]\n [jp] [/jp]"},"checked":{"type":{"name":"bool"},"required":false,"description":"@name checked\n@type bool\n@description\n [en] Whether the switch is checked.[/en]\n [jp] [/jp]"},"disabled":{"type":{"name":"bool"},"required":false,"description":"@name disabled\n@type bool\n@description\n [en] If set, the switch is disabled.[/en]\n [jp] [/jp]"},"inputId":{"type":{"name":"string"},"required":false,"description":"@name inputId\n@type bool\n@description\n [en] Specify the `id` attribute of the inner `` element. This is useful when using `