github-starred/proton-native
2
0
Fork 0
mirror of https://github.com/kusti8/proton-native.git synced 2026-05-21 06:45:31 -06:00
Code Issues 88 Projects Packages Wiki Activity Actions

Add calculator example; try to get devtools working

Browse source
This commit is contained in:
kusti8 2019-12-22 21:35:19 -05:00
parent 5806065925
commit 6ac09c76ba
18 changed files with 6294 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/README.md
View file

@ -2,6 +2,9 @@
> Create desktop applications with React Native components, on all platforms
<img src="calculator.png" alt="calculator" width="200"/>
<img src="catapi_v2.png" alt="catapi_v2" height="300"/>
## What's new in V2?
V2 brought along a complete overhaul, written from the ground up. The source code is better organized, we now support flexbox layout, CSS

2
docs/_sidebar.md
View file

@ -3,6 +3,8 @@
- [V2 Changes](v2_changes.md)
- [Quick start](quickstart.md)
- [Components](components.md)
- Different Components
- [Window](components/Window.md)
- Advanced
- [Packaging](packaging.md)
- [Debugging](debugging.md)

BIN
docs/calculator.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

2
docs/components.md
View file

@ -10,7 +10,7 @@ The root wrapper around your entire code.
## Window
Takes the same props as View. Each window instance corresponds to a new window on the
desktop.
desktop. More detailed information can be seen [here](components/Window.md)
## Other components

49
docs/components/Window.md Normal file
View file

@ -0,0 +1,49 @@
# Window
Window is currently a component that is different than React Native. We create this as a separate component rather than
just creating a window for you in case you want to create multiple windows.
The following creates a window that takes up 50% of the desktop in height, and 20% of the width.
```jsx
import React, { Component } from 'react';
import { AppRegistry, Window, App } from 'proton-native';
class Example extends Component {
render() {
return (
<App>
<Window style={{ height: '50%', width: '20%' }} />
</App>
);
}
}
AppRegistry.registerComponent('Test', <Example />);
```
## Props
- [style](#style)
- [onResize](#onResize)
## Reference
### style
Accepts all the same styles as View. Height and width can be specified as integers, where they are treated
as pixel counts, or percentages, where they are treated as percentages of the entire desktop size.
| **Type** | **Required** | **Default** |
| -------- | ------------ | ----------- |
| object | No | {} |
### onResize
Called when the window is resized. An object is passed into the function, with the following
object: `{w, h}`
| **Type** | **Required** | **Default** |
| -------------------------------- | ------------ | ----------- |
| function({h: number, w: number}) | No | () => {}) |

9
docs/manual_install.md
View file

@ -5,17 +5,14 @@ To install, simply download it from NPM:
You also need to have babel-cli and these babel-presets prepared in devDependencies
`npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react`
`npm install --save-dev @babel/cli @babel/preset-env @babel/preset-stage-0 @babel/preset-react @babel/plugin-proposal-class-properties`
Then create `.babelrc`:
```
{
"presets": [
"env",
"stage-0",
"react"
]
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
```

113
docs/methods/area_gradient.md
View file

@ -1,113 +0,0 @@
# Area.Gradient
A class describing a gradient to be used as a fill or stroke brush as a `fill` or `stroke` prop (see [Area Props](component_APIs/area_props.md#fill)).
```jsx
import React, { Component } from 'react';
import { render, App, Window, Box, Area } from 'proton-native';
const linearGradient = Area.Gradient.createLinear(30, 30, 100, 100, {
0: 'red',
1: 'blue',
});
class Example extends Component {
render() {
return (
<App>
<Window title="Example" size={{ w: 500, h: 500 }}>
<Box>
<Area>
<Area.Rectangle
x="20"
y="20"
width="110"
height="110"
stroke={linearGradient}
strokeWidth="20"
strokeOpacity="50"
/>
</Area>
</Box>
</Window>
</App>
);
}
}
render(<Example />);
```
## Static methods
- [createLinear(x1, y1, x2, y2, stops)](#createlinearx1-y1-x2-y2-stops)
- [createRadial(x, y, r, stops)](#createradialx-y-r-stops)
- [createRadial(x, y, x_r, y_r, r, stops)](#createradialx-y-x_r-y_r-r-stops)
## Reference
### createLinear(x1, y1, x2, y2, stops)
Returns a gradient brush for a linear gradient between the start point (`x1`, `y1) and end point (`x2`,`y2) with the specified color stops.
`stops` is a object with keys specifying the position between the start (`= 0.0`) and end points (`= 1.0`). Example:
```js
{
0: "red",
0.25: "#ff00ff",
1: "green"
}
```
| **Parameter** | **Type** | **Required** |
| ------------- | --------------------------- | ------------ |
| x1 | Number | Yes |
| y1 | Number | Yes |
| x2 | Number | Yes |
| y2 | Number | Yes |
| stops | Object&lt;Number, Color&gt; | Yes |
### createRadial(x, y, r, stops)
Returns a gradient brush for a radial gradient between the center point (`x`,`y`) and the circle with radius `r`.
`stops` is a object with keys specifying the position between the center point (with `0.0`) and the circle itself (`1.0`). Example:
```js
{
0: "red",
0.25: "#ff00ff",
1: "green"
}
```
| **Parameter** | **Type** | **Required** |
| ------------- | --------------------------- | ------------ |
| x1 | Number | Yes |
| y1 | Number | Yes |
| r | Number | Yes |
| stops | Object&lt;Number, Color&gt; | Yes |
### createRadial(x, y, x_r, y_r, r, stops)
Returns a gradient brush for a radial gradient between the point (`x`,`y`) and a circle with radius `r` and center (`x_r`,`y_r`). (This can produce asymetric gradients.)
`stops` is a object with keys specifying the position between the first point (with `0.0`) and the outer circle (`1.0`). Example:
```js
{
0: "red",
0.25: "#ff00ff",
1: "green"
}
```
| **Parameter** | **Type** | **Required** |
| ------------- | --------------------------- | ------------ |
| x1 | Number | Yes |
| y1 | Number | Yes |
| x_r | Number | Yes |
| y_r | Number | Yes |
| r | Number | Yes |
| stops | Object&lt;Number, Color&gt; | Yes |

51
docs/methods/dialog.md
View file

@ -1,51 +0,0 @@
# Dialog
A method to display an alert, or a dialog to save or open a file.
```jsx
import React, { Component } from 'react';
import { render, Window, App, TextInput, Dialog } from 'proton-native';
class Example extends Component {
render() {
return (
<App>
<Window title="Example" size={{ w: 500, h: 500 }}>
<TextInput onChange={() => Dialog('Error', { title: 'Message' })} />
</Window>
</App>
);
}
}
render(<Example />);
```
## Arguments
- [type](#type)
- [options](#options)
## Reference
### type
What type the dialog is. The current types are:
- Message - a simple message
- Error - an error message
- Open - open a file
- Save - save a file
| **Type** | **Required** |
| ---------------------------------------- | ------------ |
| enum('Message', 'Error', 'Open', 'Save') | Yes |
### options
Options for the title and description if it is a Message or Error.
| **Type** | **Required** |
| ------------------------------------ | ------------------------------- |
| {title: string, description: string} | One (if it is Message or Error) |