b-gran / object-editor-react Goto Github PK
View Code? Open in Web Editor NEWSchema-aware editor for structured JSON objects (drop-in React component)
Home Page: https://b-gran.github.io/object-editor-react/githubExample.html
License: MIT License
Schema-aware editor for structured JSON objects (drop-in React component)
Home Page: https://b-gran.github.io/object-editor-react/githubExample.html
License: MIT License
Hello,
I've been using this library as a crux piece for a tool i've been working on.
When running in my dev electron environment everything works exactly as expected; however, upon packaging my application using react-scripts build to create a production build it seems the styling is completely broken.
Here is my package.json
{
"name": "nhmcs-tool",
"version": "0.1.0",
"build": {
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"homepage": "./",
"main": "public/electron.js",
"private": true,
"dependencies": {
"@material-ui/core": "^4.5.0",
"@material-ui/icons": "^4.4.3",
"@rescripts/cli": "0.0.12",
"material-ui-icons": "^1.0.0-beta.36",
"electron-is-dev": "^1.1.0",
"node-uuid": "^1.4.8",
"object-editor-react": "^1.0.6",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.2.0",
"aws-sdk": "^2.546.0",
"typescript": "^3.6.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"electron-dev": "concurrently \"npm start\" \"electron .\"",
"postinstall": "electron-builder install-app-deps",
"preelectron-pack": "npm build",
"electron-pack": "npm run build -mw",
"electron-exec-pack": "electron-packager ./build nhmcstool --platform=win32 --arch=x64",
"dist": "electron-builder"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^5.0.0",
"electron": "^6.0.11",
"rescripts": "0.0.1-security",
"electron-builder": "^21.2.0",
"electron-packager": "^14.0.6"
}
}
Is it possible to:
Context: Using React with Typescript
Starting this thread here as the discussions feature hasn't been enabled for this repo yet.
Test:
/src/test/index.js Line 28, change 'foo' to 'type'
Open demo page and edit 'test' field.
There is an exception on line 330 of Editor.js:
(this.props.type.type && this.props.type.type.match(/array/) !== null) ||
where this.props.type.type.match is not a function.
If you are attaching 'type' for schema checking/validation, perhaps it could be renamed to something a schema would not be likely to contain like ________type π
NPMjs.com reports this package is at version 1.0.0 and when I ran npm install --save
, it only came with package.json. π π
Looking for ^14.0.0
npm ERR! No compatible version found: react-addons-update@^14.0.0
npm ERR! Valid install targets:
npm ERR! 15.3.2, 15.3.2-rc.1, 15.3.1, 15.3.1-rc.2, 15.3.1-rc.1, 15.3.0, 15.3.0-rc.3, 15.3.0-rc.2, 15
.3.0-rc.1, 15.2.1, 15.2.0, 15.2.0-rc.2, 15.2.0-rc.1, 15.1.0, 15.1.0-alpha.1, 15.0.3-alpha.2, 15.0.3-
alpha.1, 15.0.2, 15.0.2-alpha.4, 15.0.2-alpha.3, 15.0.2-alpha.2, 15.0.2-alpha.1, 15.0.1, 15.0.0, 15.
0.0-rc.2, 15.0.0-rc.1, 0.15.0-alpha.1, 0.14.8, 0.14.7, 0.14.6, 0.14.5, 0.14.4, 0.14.3, 0.14.2, 0.14.
1, 0.14.0, 0.14.0-rc1, 0.14.0-beta3, 0.14.0-beta2, 0.14.0-beta1
npm ERR! node v4.4.6
npm ERR! npm v3.10.7
Hi I have an issue, can't resolve symbols by
import { SchemaTypes } from 'object-editor-react';
import { ArrayEditor, ObjectEditor } from 'object-editor-react';
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | @material-ui/core |
|
npm | @material-ui/icons |
|
npm | babel-eslint |
|
npm | eslint-loader |
|
npm | glamorous |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@material-ui/core
, @material-ui/icons
)react
, react-addons-update
, react-dom
)babel-jest
, jest
, jest-resolve
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
eslint-plugin-react-hooks
, react
, react-dom
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)package.json
@material-ui/core ^4.5.1
@material-ui/icons ^4.5.1
classnames ^2.2.5
glamor ^2.20.40
glamorous ^4.12.1
prop-types ^15.6.1
ramda ^0.26.1
react ^16.10.2
react-addons-update ^15.6.2
react-dom ^16.10.2
@babel/core 7.6.4
@svgr/webpack 4.3.3
@typescript-eslint/eslint-plugin 2.4.0
@typescript-eslint/parser 2.4.0
babel-eslint 10.0.3
babel-jest 24.9.0
babel-loader 8.0.6
babel-plugin-named-asset-import 0.3.4
babel-preset-react-app 9.0.2
camelcase 5.3.1
case-sensitive-paths-webpack-plugin 2.2.0
css-loader 2.1.1
dotenv 6.2.0
dotenv-expand 5.1.0
eslint 6.5.1
eslint-config-react-app 5.0.2
eslint-loader 3.0.2
eslint-plugin-flowtype 3.13.0
eslint-plugin-import 2.18.2
eslint-plugin-jsx-a11y 6.2.3
eslint-plugin-react 7.16.0
eslint-plugin-react-hooks 1.7.0
file-loader 3.0.1
fs-extra 7.0.1
html-webpack-plugin 4.0.0-beta.8
identity-obj-proxy 3.0.0
is-wsl 1.1.0
jest 24.9.0
jest-environment-jsdom-fourteen 0.1.0
jest-resolve 24.9.0
jest-watch-typeahead 0.4.0
mini-css-extract-plugin 0.8.0
optimize-css-assets-webpack-plugin 5.0.3
pnp-webpack-plugin 1.5.0
postcss-flexbugs-fixes 4.1.0
postcss-loader 3.0.0
postcss-normalize 7.0.1
postcss-preset-env 6.7.0
postcss-safe-parser 4.0.1
react-app-polyfill 1.0.4
react-dev-utils 9.1.0
resolve 1.12.0
resolve-url-loader 3.1.0
sass-loader 7.2.0
semver 6.3.0
style-loader 1.0.0
terser-webpack-plugin 1.4.1
ts-pnp 1.1.4
url-loader 2.1.0
webpack 4.41.2
webpack-dev-server 3.2.1
webpack-manifest-plugin 2.1.1
workbox-webpack-plugin 4.3.1
.travis.yml
I first create a default react project using npx create-react-app
then
I install the object-editor-react via npm
then
I copy the src directory (by downloading it from git), overwriting my src directory
Failed to compile
src/util.js
Line 54:25: React Hook "R.useWith" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
It appears that the utils.js has a fundamental issue that violates this 'React Hook' principle.
Since I am not an expert, I don't know yet how to go around this issue.
Any idea what I am doing wrong?
Hi,
Is there any way to generate the schema used by this editor from a valid JSON schema?
Thanks
Russell
Hey there,
Thanks for your contribution to the open source world, this components look pretty cool.
Is it possible to pass rowsPerPage as props? Five rows is really not enough for our project...
Kind regards from WΓΌrzburg
Yorick
At
object-editor-react/src/Editor.js
Line 569 in abc7a9f
'row' is used in bootstrap and breaks table alignment.
I propose we either use less classnames or use more unique classnames. Additionally the out-of-box styles play very poorly with bootstrap.
/src/index.js looks like it is no longer needed in this project
I believe this is the same or closely related to issue #6 . That issue was closed but I am not sure why.
Consider the schema:
const schema = {
publicUserProperties: SchemaTypes.arrayOf({
nested: SchemaTypes.string()
}),
(and a few more...)
}
and the object:
{
"publicUserProperties": [
"username",
"givenname",
"surname",
(and a few more...)
],
}
This gives me the GUI:
Instead of seeing the strings in the object, I see whitespace. How can I get the strings to appear correctly in the GUI?
I figure it would be easy enough to have a window.object that populates Editor[elements] and is modified in response to onUpdateElement, onRemoveElement, and onAddElement. That object could then be updated on the window after stringification.
It may then make it easy to port to some other backing store.
Desired:
const schema = { identifier: Schema.SchemaTypes.number(), notes: Schema.SchemaTypes.string(), myArray: Schema.SchemaTypes.arrayOf(Schema.SchemaTypes.string())(), };
What goes wrong? The ElementRow does not show any input elements other than add/trash.
Contrast:
const schema = { identifier: Schema.SchemaTypes.number(), notes: Schema.SchemaTypes.string(), myArray: Schema.SchemaTypes.arrayOf({workaround: Schema.SchemaTypes.string()})(), };
Why does this work? props.type is used in ElementRow as _.map(Object.keys(props.type), ...)
. This does not work well when props.type is a function with no keys
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.