nodegui / react-nodegui Goto Github PK
View Code? Open in Web Editor NEWBuild performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
Home Page: https://react.nodegui.org
License: MIT License
Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
Home Page: https://react.nodegui.org
License: MIT License
Describe the bug
The documentation page for debugging process is not found.
To Reproduce
Steps to reproduce the behavior:
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Describe the bug
Having a View with a flex row layout and two children Views with different width: 'x%' fields doesn't render properly.
To Reproduce
import React from "react";
import {
Renderer,
Window,
View,
} from "./index";
const App = () => {
return (
<Window styleSheet={containerStyle}>
<View id="container">
<View id="left"></View>
<View id="right"></View>
</View>
</Window>
);
};
const containerStyle = `
#container {
flex: 1;
flex-direction: row;
}
#left {
background: red;
flex: 1;
width: '20%';
height: '100%';
}
#right {
background: green;
flex: 1;
width: '80%';
height: '100%';
}
`;
Renderer.render(<App />);
Expected behavior
The Views should use the specified width percentages.
Desktop (please complete the following information):
Hello!
First of all, I've just run into nodegui a couple of days ago and it seems absolutely amazing. While not the first react desktop solution out there, it sure does deliver simplicity of set up and ease of use. Kudos.
I've a question regarding scrolling: I'm trying to figure out how I can make certain views scrollable. overflow: scroll
has no effect, and I'm not sure whether or not I should use QScrollArea
. Help would be much appreciated :)
Also, if you need help with the documentation - I've a knack for writing docs. With a little bit of guidance I'd love to contribute back to the readme.
Cheers!
More of an enhancement than a bug report, but using the ScrollArea
isn't the easiest thing in the world. for example, I can't seem to get it to fill the parent, nor, will it render its content whatsoever.
I so far have only been ale to declare one with fixed sizes declared in pixels through CSS, but I need it to fill the parent. If not, perhaps an automatically overflowing View
would be a better approach, something React Developers, coming from the web might be more comfortable with.
Is your feature request related to a problem? Please describe.
Hi. Thank you for the project. It looks really great and makes me want to dig in, despite the fact I am not a react developer. I have checked the examples and my concern is that even with simple apps things are getting complex really fast. What I am missing is some kind of DOM-less router to attach/detach components based on global state.
Describe the solution you'd like
I would like to create components for 'app pages' with encapsulation and attach/detach them based on store property value.
Describe alternatives you've considered
Maybe react-router-native will do the job? If so, could you provide an example how to use it?
**Packing for **react-nodegui
This requires a bit of restructuring of the repo. Since Packer executes the src/index
file when the executable is run, I recommend renaming src/index.ts
to src/exports.ts
and creating your app root at src/index.tsx
.
Remember to change your imports to something like:
import { Renderer, View, Button, Window, LineEdit, Text } from "./exports";
Hi, im trying to use a second window to make a file/folder picker (i didn't find anything, but is there a simpler way to do it? maybe some widget, or something from the os?), but i can't figure out if theres a way to close it from the javascript side (should close according to some user input), after watching this video https://youtu.be/8jH5gaEEDv4?t=1376 , i tried this:
function App() {
const [showWindow, setShowWindow] = useState(false);
const toggleWindow = () => {
setShowWindow(!showWindow);
};
return (
<>
<Window windowTitle="Hello 👋🏽" size={mainWindowSize}>
<View>
<Button text="Toggle Window" on={{ clicked: toggleWindow }}></Button>
</View>
</Window>
{showWindow && (
<Window
windowTitle="Second Window"
size={secondWindowSize}
>
<View>
<Text>Second Window</Text>
</View>
</Window>
)}
</>
);
}
but the second window doesn't close when showWindow
is toggled to false
, and when it is toggled to true
, it opens another "Second Window".
Hello, look like a really promising project.
Do you know if it's possible and if it would be hard to provide a way to create native menu like File
Edit
, etc ?
Something like this : https://electronjs.org/docs/api/menu
maybe even something like dock menu :
https://electronjs.org/docs/tutorial/macos-dock
I didn't use Qt in many many years but would making the bindings be a hard thing to do?
Or something can use an image as background?
If true, how can do it?
how to get the selected value from ComboBox? also, is there any event listeners for change?
Describe the bug
When I attempt to load an image from a remote repository I get an error message "QPixmap::scaled: Pixmap is a null pixmap"
To Reproduce
Steps to reproduce the behavior:
import * as React from 'react';
import {Image, View , Window, Renderer } from '@nodegui/react-nodegui';
import { AspectRatioMode } from '@nodegui/nodegui';
const minSize = {width:414, height:736};
const App : React.FC = () =>(
<Window minSize={minSize}>
<View style="flex:1">
<Image
aspectRatioMode={AspectRatioMode.KeepAspectRatio}
src={'https://randomuser.me/api/portraits/thumb/men/1.jpg'}
/>
</View>
</Window>
)
Renderer.render(<App />)
Expected behavior
I expect that I am able to load Images from remote URLs
Desktop (please complete the following information):
Additional context
I used the react-nodegui starter template
I'm unable to run the example apps. npm install and yarn fail.
output:
> @nodegui/[email protected] install /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> npm -v
6.10.1
> @nodegui/[email protected] postinstall /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/qode
> node install.js
Local Qode 1.0.0 archive doesnt exists... Copying Qode from cache...
Extracting binaries...
> @nodegui/[email protected] postinstall /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> npm run build:addon
> @nodegui/[email protected] build:addon /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> node-gyp -j 8 configure build
CC(target) Release/obj.target/nothing/../../node-addon-api/src/nothing.o
TOUCH 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
ACTION binding_gyp_qtnode_target_symlink_qt_headers 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
LIBTOOL-STATIC Release/nothing.a
Traceback (most recent call last):
File "./gyp-mac-tool", line 611, in <module>
sys.exit(main(sys.argv[1:]))
File "./gyp-mac-tool", line 30, in main
exit_code = executor.Dispatch(args)
File "./gyp-mac-tool", line 45, in Dispatch
return getattr(self, method)(*args[1:])
File "./gyp-mac-tool", line 248, in ExecFilterLibtool
if not libtool_re.match(line) and not libtool_re5.match(line):
TypeError: cannot use a string pattern on a bytes-like object
make: *** [Release/nothing.a] Error 1
rm 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:190:23)
gyp ERR! stack at ChildProcess.emit (events.js:196:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/12.1.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "-j" "8" "configure" "build"
gyp ERR! cwd /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v5.0.2
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] build:addon: `node-gyp -j 8 configure build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] build:addon script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/[redacted]/.npm/_logs/2019-08-15T19_04_16_298Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] postinstall: `npm run build:addon`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
export interface QLineEditSignals extends QWidgetSignals {
// omit rest
textChanged: (text: string) => void;
}
I can get his value by textChanged
but:
export interface QPlainTextEditSignals extends QAbstractScrollAreaSignals {
textChanged: () => void;
blockCountChanged: (blockCount: number) => void;
copyAvailable: (yes: boolean) => void;
cursorPositionChanged: () => void;
modificationChanged: (changed: boolean) => void;
redoAvailable: (available: boolean) => void;
selectionChanged: () => void;
undoAvailable: (available: boolean) => void;
}
Not seeing it in the docs or example repos. Is this not available yet? I'm eager to try this out, so thanks for your work and sharing it.
When creating a component it would be a nice feature to be able to set any other properties that we might want.
For example,
const windowProps = {WA_TranslucentBackground: true};
<Window setProperties={windowProps}>
...
</Window>
or any of the other widgetAttributes.
That way we can always pass all the attributes we want to set at once, and you don't have to make a property on the component for every possible attribute.
Edit: Might actually be better to name it setAttributes.
Describe the bug
npm install fails
To Reproduce
Expected behavior
npm install is expected to finish without error
Screenshots
Error Log:
npm run build:addon
@nodegui/[email protected] build:addon G:\react-nodegui-starter\node_modules@nodegui\nodegui
node-gyp -j 8 configure build
G:\react-nodegui-starter\node_modules@nodegui\nodegui>if not defined npm_config_node_gyp (node "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" -j 8 configure build ) else (node "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" -j 8 configure build )
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\Admin\AppData\Local\Programs\Python\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:297:12)
gyp ERR! stack at ChildProcess.emit (events.js:197:13)
gyp ERR! stack at maybeClose (internal/child_process.js:978:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "-j" "8" "configure" "build"
gyp ERR! cwd G:\react-nodegui-starter\node_modules@nodegui\nodegui
gyp ERR! node -v v11.9.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] build:addon: node-gyp -j 8 configure build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] build:addon script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache_logs\2019-10-10T23_19_19_270Z-debug.log
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] postinstall: npm run build:addon
npm ERR! Exit status 1
Desktop (please complete the following information):
Additional context
None I can think of.
The styling should feel more natural to the user just as in using with react and other web development frameworks . so it would be very helpful to add translation of many unsupported css properties into corresponding Qt css properties.
Is your feature request related to a problem? Please describe.
Please add a dropdown-list component like select tag.
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Describe the bug
App suddenly closes by itself due to being garbage collected.
Temporary workaround is to use the onInit function to put the reconciler as a global variable, like so.
Renderer.render(<App />, {
onInit: (reconciler) => {
(global as any)._reconcile = reconciler;
},
});
I know that this is in FAQ, but it's not clear how you would actually do this in React NodeGUI.
Since the container is put to Renderer.container
, I suppose there would be no problem with putting a global variable as well?
To Reproduce
npx qode ./dist/index.js
)Expected behavior
The app shouldn't close itself.
Desktop (please complete the following information):
error in index.ts
Module not found : Error : cant resolve @nodegui/nodegui in c/user/lenovo/node-sarter/src
npm ERR! [email protected] start .......
Kindly suggest
When I use the react-nodegui
to write a desktop application, how do I request remote resources in React-nodegui? like the lifeCycleMethod in react syntax??
Is your feature request related to a problem? Please describe.
Big thanks for any help for using QSystemTrayIcon with react-nodegui.
Describe the solution you'd like
Using QSystemTrayIcon with react-nodegui.
Is your feature request related to a problem? Please describe.
Browsed through both react-nodegui and nodegui, but couldn't find any example.
Tried using axios/http on button click and keyboard listeners but the app crashed with
FATAL ERROR: v8::HandleScope::CreateHandle() Cannot create a handle without a HandleScope
It worked fine in componentDidMount though.
Describe the solution you'd like
Examples or guides for networking
Describe alternatives you've considered
Additional context
How to enable hot reload?
The link in the repo goes to https://nodegui.github.io/nodegui%20
, removing the %20
makes it work.
Might be a little nitpicky, sorry.
Is your feature request related to a problem? Please describe.
As you know, React can merge multiple stylesheets like following.
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
But I don't know how to merge multiple stylesheets in react-nodegui.
Because I wanna make some custom components that have own stylesheet can add additional stylesheet, so I need this function.
Describe the solution you'd like
Please add new prop for this.
Describe alternatives you've considered
...
Additional context
...
Describe the bug
Not sure this is the right repo to file this in, but when performing npm install
in the react-nodegui-starter, I got
AssertionError: Spaces in action output filenames not supported (/Users/adam/Documents/Mac Projects/react-nodegui-starter/node_modules/@nodegui/qode/dist/1.0.5/include/QtCore)
To Reproduce
Steps to reproduce the behavior:
git clone https://github.com/nodegui/react-nodegui-starter
npm i
Expected behavior
Dependencies install correctly
Desktop:
Is there a known workaround for this (besides working in a folder without spaces, which I am doing for the moment)?
Describe the bug
Opening and closing new windows doesn't work properly when nested inside another window
To Reproduce
Run the following example code
import React, { useState } from "react";
import { Renderer, Window, View, Button, Text } from "@nodegui/react-nodegui";
function MainWindow() {
const [open1, setOpen1] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
return (
<>
<Window windowTitle="Main window">
<View>
<Button text="Nested in view" on={{clicked: () => setOpen1(!open1)}}/>
<Button text="Nested in window" on={{clicked: () => setOpen2(!open2)}}/>
<Button text="Not nested" on={{clicked: () => setOpen3(!open3)}}/>
{open1 && <Dialog text="Nested in view"/>}{/* Does not work */}
</View>
{open2 && <Dialog text="Nested in window"/>}{/* Partialy working */}
</Window>
{open3 && <Dialog text="Not nested"/>}{/* This works */}
</>
);
}
function Dialog({text}: {text: string}) {
return (
<Window windowTitle={text}>
<View>
<Text>{text}</Text>
</View>
</Window>
)
}
Renderer.render(<MainWindow />);
Expected behavior
That windows can be open and closed no matter where they are placed in the react tree.
Desktop (please complete the following information):
I append text to the control QPlainTextEdit after interval, please help me how to scroll to the bottom,
I can't find any APIs: https://docs.nodegui.org/docs/api/generated/classes/qplaintextedit
Thanks
I tried to use a style sheet on a ScrollArea like so:
QScrollBar { background-color: transparent; }
QScrollBar::sub-page:horizontal { background-color: red; }
QScrollBar::add-page:horizontal { background-color: green; }
QScrollBar::sub-page:vertical { background-color: blue; }
QScrollBar::add-page:vertical { background-color: yellow; }
but it doesn't actually change the scroll bar, so I'm just wondering if I'm doing something wrong, or if there is something that needs to be implemented for this to work.
Ubuntu 19.04
[email protected]
[email protected]
Error when running npm start
:
eli@ubuntu:~/react-nodegui-starter$ npm start
> [email protected] start /home/eli/react-nodegui-starter
> tsc && qode ./dist/index.js
/home/eli/react-nodegui-starter/node_modules/@nodegui/qode/dist/1.0.0/qode: error while loading shared libraries: libicui18n.so.60: cannot open shared object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `tsc && qode ./dist/index.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/eli/.npm/_logs/2019-08-15T19_53_15_146Z-debug.log
Full log:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/home/eli/.nvm/versions/node/v12.8.1/bin/node',
1 verbose cli '/home/eli/.nvm/versions/node/v12.8.1/bin/npm',
1 verbose cli 'run',
1 verbose cli 'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /home/eli/.nvm/versions/node/v12.8.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/eli/react-nodegui-starter/node_modules/.bin:/home/eli/.nvm/versions/node/v12.8.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/local/go/bin:/home/eli/go/bin:/usr/local/go/bin:/home/eli/go/bin
9 verbose lifecycle [email protected]~start: CWD: /home/eli/react-nodegui-starter
10 silly lifecycle [email protected]~start: Args: [ '-c', 'tsc && qode ./dist/index.js' ]
11 info lifecycle [email protected]~start: Failed to exec start script
12 verbose stack Error: [email protected] start: `tsc && qode ./dist/index.js`
12 verbose stack spawn ENOENT
12 verbose stack at ChildProcess.<anonymous> (/home/eli/.nvm/versions/node/v12.8.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack at ChildProcess.emit (events.js:203:13)
12 verbose stack at maybeClose (internal/child_process.js:1021:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
13 verbose pkgid [email protected]
14 verbose cwd /home/eli/react-nodegui-starter
15 verbose Linux 5.0.0-25-generic
16 verbose argv "/home/eli/.nvm/versions/node/v12.8.1/bin/node" "/home/eli/.nvm/versions/node/v12.8.1/bin/npm" "run" "start"
17 verbose node v12.8.1
18 verbose npm v6.10.2
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] start: `tsc && qode ./dist/index.js`
23 error spawn ENOENT
24 error Failed at the [email protected] start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
I cloned the examples followed everything I need (CMake & so on..)
I expected the app after successful install to start the Calculator but I got this error
> [email protected] start d:\Development\Node\node-gui-examples\examples-master\react-nodegui\calculator
> tsc && qode dist/index.js
node_modules/@nodegui/nodegui/dist/lib/QtWidgets/QMainWindow.d.ts:161:9 - error TS1086: An accessor cannot be declared in an ambient context.
161 get layout(): NodeLayout | undefined;
~~~~~~
test/nodegui-starter/src/index.ts:45:2 - error TS2304: Cannot find name 'global'.
45 (global as any).win = win;
~~~~~~
Found 2 errors.
Additional context
Add any other context about the problem here.
I've been working on a small "notes" app and encounter the following issue when trying to implement "remove a note with id x
feature". I believe the bug might be more generic than just my notes app (updating state? trigger re-renders?) but this is just an easy way to expose the behaviour.
Node version: v10.15.2
@nodegui/react-nodegui: 0.1.5,
Expected:
Pressing the trash icon next to a note triggers a state changes, returns an array without the given note. Therefore, the note disappears from the screen.
Observed behaviour:
As seen from the console.log
statements, the note correctly disappears from state. Also the "counter" on top correctly reflects the amount of notes is going down by 1. The note itself however does not disappear from remove. Repeated clicks on this or other buttons at some point will just crash the app.
What I've tried
At first I thought it might have to do with passing the callbacks around which might not be supported from some reason. Based on the calculator example I refactored the notes app to useReducer() instead, so state is more centralised and predictable. This didn't seem to make any difference for this bug.
Diff with relevant code changes:
pepf/react-nodegui-starter@08560d5
Reproduction branch:
https://github.com/pepf/react-nodegui-starter/tree/notes-app
Is your feature request related to a problem? Please describe.
I saw how to use Button in this example. But I wanna use Button by useEventHandler
. But I don't know what deps means.
How can I use it?
Describe the solution you'd like
Example of it
Describe alternatives you've considered
...
Additional context
...
Supporting inline SVG
React by default can support inline svg code. Because NodeGUI does not render to a browser window though, we can't use that.
Possible Solutions
One solution might be to bridge QTSvg albeit I am not savvy enough to do this.
Sample code that triggered error
import React from 'react';
import { letterFrequency } from '@vx/mock-data';
import { Group } from '@vx/group';
import { Bar } from '@vx/shape';
import { scaleLinear, scaleBand } from '@vx/scale';
const data = letterFrequency;
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
const x = (d: any) => d.letter;
const y = (d: any) => +d.frequency * 100;
const xScale = scaleBand({
rangeRound: [0, xMax],
domain: data.map(x),
padding: 0.4,
});
const yScale = scaleLinear({
rangeRound: [yMax, 0],
domain: [0, Math.max(...data.map(y))],
});
const compose = (scale: any, accessor: any) => (data: any) => scale(accessor(data));
const xPoint = compose(
xScale,
x,
);
const yPoint = compose(
yScale,
y,
);
function BarGraph() {
return (
<svg width={width} height={height}>
{data.map((d: any, i: any) => {
const barHeight = yMax - yPoint(d);
return (
<Group key={`bar-${i}`}>
<Bar x={xPoint(d)} y={yMax - barHeight} height={barHeight} width={xScale.bandwidth()} fill="#fc2e1c" />
</Group>
);
})}
</svg>
);
}
export default BarGraph;
``
<!-- Issuehunt content -->
---
<details>
<summary>
<b>IssueHunt Summary</b>
</summary>
### Backers (Total: $20.00)
- $20.00 have been anonymously funded.
#### [Become a backer now!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
#### [Or submit a pull request to get the deposits!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
### Tips
- Checkout the [Issuehunt explorer](https://issuehunt.io/r/nodegui/react-nodegui/) to discover more funded issues.
- Need some help from other developers? [Add your repositories](https://issuehunt.io/r/new) on IssueHunt to raise funds.
---
IssueHunt has been backed by the following sponsors. [Become a sponsor](https://issuehunt.io/membership/members)
</details>
<!-- /Issuehunt content-->
Running npm install
yields the following error:
error Couldn't find package "@nodegui/qode@^1.0.0" required by "@nodegui/nodegui@^0.1.1" on the "npm" registry.
Example:
import { Renderer, View, Button, Window, LineEdit } from '@nodegui/react-nodegui'
import React, { useState } from 'react'
const App = () => {
const [text, setText] = useState("")
return (
<Window minSize={{ width: 500, height: 200 }}>
<View>
<LineEdit text={text} on={{ textChanged: setText }} />
<Button on={{ clicked: () => setText("") }} />
</View>
</Window>
)
}
Renderer.render(<App />)
Describe the bug
When following steps on Getting started block, got an error with CMake.
To Reproduce
Steps to reproduce the behavior:
npm install
Expected behavior
Dependencies installed.
Screenshots
Desktop (please complete the following information):
macOS
0.6.7
0.2.6
10.15.1
Additional context
The problem is gone when install CMake using brew
. I think to add install CMake requirement to Getting started page for not confusing people.
I try to set custom width and height but it seems like these props are ignored. Am I doing it wrong?
QuarkPlayer on master [!] is 📦 v1.0.0 via ⬢ v12.13.0
❯ yarn start
yarn run v1.19.1
$ qode --inspect ./dist/index.js
Debugger listening on ws://127.0.0.1:9229/782a4de1-09c1-45b1-9e31-c1bba1328b18
For help, see: https://nodejs.org/en/docs/inspector
[2019-11-19 13:51:42.230] [info] EventWidget: subscribed to Resize : 14, size: 1
[2019-11-19 13:51:42.235] [info] flexlayout: count 0
[2019-11-19 13:51:42.238] [info] flexlayout: count 0
[2019-11-19 13:51:42.242] [info] flexlayout: count 0
[2019-11-19 13:51:42.243] [info] flexlayout: count 0
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.302] [info] set border: nan
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.304] [info] set border: nan
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set yWidth: 100%
[2019-11-19 13:51:42.304] [info] set yHeight: 100%
Done in 3.42s.
Here's the code:
import React from 'react'
import { Image, View } from '@nodegui/react-nodegui'
import { AspectRatioMode } from '@nodegui/nodegui'
type ImageProps = {
src: string
}
const coverStyle = `
flex: 2;
#img {
flex: 1;
height: '40px';
width: '40px';
qproperty-alignment: 'AlignCenter';
}
`
const Cover = ({ src }: ImageProps) => (
<View styleSheet={coverStyle}>
<Image
id="img"
src={src}
aspectRatioMode={AspectRatioMode.KeepAspectRatio}
/>
</View>
)
export default Cover
Describe the bug
Icon size is not being changed using pixmap
To Reproduce
Steps to reproduce the behavior:
git clone https://github.com/talentlessguy/QuarkPlayer
yarn && yarn dev
in one window, yarn start
in another windowExpected behavior
I expected for icon to increase its size by changing width and height
Screenshots
Desktop (please complete the following information):
Additional context
Code snippet where I try to resize icon:
import { QIcon } from '@nodegui/nodegui'
import icon from '../../assets/play.png'
const Icon = new QIcon(`${__dirname}/${icon}`)
Icon.pixmap(100, 100)
<View styleSheet={containerStyle}>
<Text id="text">{this.state.text}</Text>
</View>
text: <li>hello</li>
const containerStyle = `
#text li{
color:'red';
}
LI{
color:red;
}
UL{
color:red;
}
`
None of the above code works
If can, that's best
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.