Skip to content

Commit 04eaecc

Browse files
romka-fmromka-fm
committedJan 20, 2020
React Native module / initial commit
1 parent c79735c commit 04eaecc

8 files changed

+9068
-2
lines changed
 

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["module:metro-react-native-babel-preset"]
3+
}

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎.gitignore

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle

‎README.md

+83-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
1-
# react-native-flexmonster
2-
React Native module for Flexmonster Pivot Table & Charts
1+
# React Native module for Flexmonster Pivot Table & Charts
2+
[![Flexmonster Pivot Table & Charts](https://s3.amazonaws.com/flexmonster/github/fm-github-cover.png)](https://flexmonster.com)
3+
4+
5+
This repository holds the source code for using [Flexmonster Pivot](https://www.flexmonster.com/) in [React Native](https://facebook.github.io/react-native/) applications.
6+
7+
* [Getting started](#getting-started)
8+
* [Usage](#usage)
9+
* [License](#license)
10+
* [Support & feedback](#support-feedback)
11+
12+
## <a name="getting-started"></a>Getting Started ##
13+
14+
If you don’t have React Native app, you can create it by running in the console:
15+
16+
```bash
17+
npm install -g expo-cli
18+
19+
expo init my-app
20+
cd my-app
21+
expo start
22+
```
23+
You can find more information here: [React Native: Getting Started](https://facebook.github.io/react-native/docs/getting-started)
24+
25+
Add Flexmonster React module by running in the console:
26+
27+
```bash
28+
npm i react-native-flexmonster --save
29+
```
30+
31+
Include `FlexmonsterReactNative` into `App.js`:
32+
33+
```bash
34+
import * as FlexmonsterReactNative from 'react-native-flexmonster';
35+
```
36+
37+
Insert a pivot table into `App.js`:
38+
39+
```bash
40+
class FlexmonsterReactNativeApp extends React.Component<{}, { licenseKey: string, report: object }> {
41+
private flexmonsterRef = React.createRef<FlexmonsterReactNative.Pivot>();
42+
constructor(props) {
43+
super(props);
44+
// .................... // your code here
45+
this.state = {
46+
// .................... // your code here
47+
licenseKey: "LICENSE_KEY",
48+
report: {
49+
// add your report object here
50+
}
51+
}
52+
}
53+
render() {
54+
return (
55+
<View style={{ flex: 1 }}>
56+
<FlexmonsterReactNative.Pivot
57+
licenseKey={this.state.licenseKey}
58+
report={this.state.report}
59+
/>
60+
</View>
61+
);
62+
}
63+
}
64+
```
65+
66+
To see the result open your browser on `http://localhost:3000/`.
67+
68+
## <a name="usage"></a>Usage ##
69+
70+
Available attributes for `FlexmonsterReactNative.Pivot`:
71+
72+
* `report` – property to set a report. It can be inline [Report Object](https://www.flexmonster.com/api/report-object/) or URL to report JSON.
73+
* `licenseKey` – the license key.
74+
75+
## <a name="license"></a>License ##
76+
77+
Here is [Flexmonster licensing page](https://www.flexmonster.com/pivot-table-editions-and-pricing/). We have free 30 day trial!
78+
79+
Flexmonster React module is released as a MIT-licensed (free and open-source) add-on to Flexmonster Pivot.
80+
81+
## <a name="support-feedback"></a>Support & feedback ##
82+
83+
Please share your feedback or ask questions via [Flexmonster Forum](https://www.flexmonster.com/forum/).

‎package.json

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"name": "react-native-flexmonster",
3+
"version": "2.7.23",
4+
"license": "MIT",
5+
"description": "React 16.5+ Module for Flexmonster Pivot Table & Charts",
6+
"main": "./build/index.js",
7+
"typings": "./build/index.d.ts",
8+
"peerDependencies": {
9+
"@types/flexmonster": "latest",
10+
"flexmonster": "latest",
11+
"prop-types": "^15.7.2",
12+
"react": "^16.8.1",
13+
"react-dom": "^16.8.1"
14+
},
15+
"dependencies": {
16+
"@types/flexmonster": "latest",
17+
"flexmonster": "latest",
18+
"prop-types": "^15.7.2",
19+
"react": "^16.8.1",
20+
"react-dom": "^16.8.1"
21+
},
22+
"scripts": {
23+
"test": "echo \"Error: no test specified\" && exit 1",
24+
"start": "webpack-dev-server --open",
25+
"build": "webpack"
26+
},
27+
"keywords": [
28+
"pivot",
29+
"html5",
30+
"grid",
31+
"table",
32+
"pivottable",
33+
"pivotgrid",
34+
"pivotchart",
35+
"react",
36+
"reactnative"
37+
],
38+
"author": {
39+
"name": "Flexmonster",
40+
"email": "help@flexmonster.com"
41+
},
42+
"repository": {
43+
"type": "git",
44+
"url": "https://github.com/flexmonster/react-native-flexmonster"
45+
},
46+
"bugs": {
47+
"url": "https://flexmonster.com/forum/"
48+
},
49+
"homepage": "https://flexmonster.com/",
50+
"devDependencies": {
51+
"babel-cli": "^6.24.1",
52+
"babel-core": "^6.24.1",
53+
"babel-loader": "^7.0.0",
54+
"babel-plugin-transform-object-rest-spread": "^6.23.0",
55+
"babel-plugin-transform-react-jsx": "^6.24.1",
56+
"babel-preset-env": "^1.5.1",
57+
"babel-preset-react": "^6.24.1",
58+
"css-loader": "^1.0.0",
59+
"file-loader": "^2.0.0",
60+
"style-loader": "^0.23.0",
61+
"url-loader": "^1.1.2",
62+
"webpack": "^4.20.2",
63+
"webpack-cli": "^3.1.2",
64+
"webpack-dev-server": "^3.4.1"
65+
},
66+
"browserslist": [
67+
">0.2%",
68+
"not dead",
69+
"not ie <= 11",
70+
"not op_mini all"
71+
]
72+
}

‎src/index.js

+412
Large diffs are not rendered by default.

‎webpack.config.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var path = require('path');
2+
module.exports = [{
3+
entry: './src/index.js',
4+
output: {
5+
path: path.resolve(__dirname, 'build'),
6+
filename: 'index.js',
7+
libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
8+
},
9+
module: {
10+
rules: [
11+
{
12+
test: /\.js$/,
13+
include: path.resolve(__dirname, 'src'),
14+
exclude: /(node_modules|bower_components|build)/,
15+
use: {
16+
loader: 'babel-loader',
17+
options: {
18+
presets: ['react']
19+
}
20+
}
21+
}
22+
]
23+
},
24+
externals: {
25+
'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React
26+
'react-native': 'commonjs react-native',// this line is just to use the React-Dom dependency of our parent-testing-project instead of using our own React-Dom.
27+
'react-native-webview': 'commonjs react-native-webview',// this line is just to use the React-Dom dependency of our parent-testing-project instead of using our own React-Dom.
28+
'prop-types': 'commonjs prop-types'
29+
}
30+
}];

‎yarn.lock

+8,411
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.