gabrielbull/react-desktop

React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10.

npm install react-desktop --save

Help wanted!

I am looking for developers to help me develop this project. Please submit some ideas in the issues section or some PRs to get this project going. If you are interested, you can become a collaborator on the project. Thanks.

Contributing

This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as node-webkit or Electron.js!

Everyone is welcome to contribute and add more components/documentation whilst following the contributing guidelines.

Documentation

Guides on installation, components and advanced usage are found in the documentation.

Contributors

react-desktop's Issues

defaultIsPaneExpanded not working when false

"react": "15.4.1",
"react-dom": "15.4.1",
"react-desktop": "0.2.14"

Here's the code I used:

import React, { Component } from 'react';
import { NavPane, NavPaneItem, Text } from 'react-desktop/windows';

export default class extends Component {
  static defaultProps = {
	color: '#cc7f29',
	theme: 'dark',
	defaultIsPaneExpanded: false
  };

  constructor() {
	super();
	this.state = {
	  selected: 'Item 1'
	}
  }

  render() {
	return (
	  <NavPane openLength={200} push color={this.props.color} theme={this.props.theme} defaultIsPaneExpanded={this.props.defaultIsPaneExpanded}>
		{this.renderItem('Item 1', 'Content 1')}
		{this.renderItem('Item 2', 'Content 2')}
		{this.renderItem('Item 3', 'Content 3')}
	  </NavPane>
	);
  }

  renderItem(title, content) {
	return (
	  <NavPaneItem
		title={title}
		icon={this.renderIcon(title)}
		theme="dark"
		background="#ffffff"
		selected={this.state.selected === title}
		onSelect={() => this.setState({ selected: title })}
		padding="10px 20px"
		push
	  >
		<Text>{content}</Text>
	  </NavPaneItem>
	);
  }

  renderIcon(name) {
	const fill = this.props.theme === 'dark' ? '#ffffff' : '#000000';
	switch(name) {
		case 'Item 1':
		  return (
			<svg x="0px" y="0px" width="16px" height="14.9px" viewBox="0 0 16 14.9">
			  <polygon fill={fill} points="16,5.6 10.6,4.7 8,0 5.4,4.7 0,5.7 3.8,9.6 3.1,14.9 8,12.6 13,14.8 12.3,9.5 "/>
			</svg>
		  );
		case 'Item 2':
		  return (
			<svg x="0px" y="0px" width="16px" height="13.5px" viewBox="0 0 16 13.5">
			  <path
				fill={fill}
				d="M16,4.2C16,1.9,14.1,0,11.7,0c-1.4,0-2.6,0.6-3.4,1.6c0,0,0,0,0,0C8.3,1.7,8.1,1.8,8,1.8
				c-0.2,0-0.3-0.1-0.4-0.2c0,0,0,0,0,0C6.8,0.6,5.6,0,4.3,0C1.9,0,0,1.9,0,4.2c0,0,0,0.1,0,0.1l0,0c0,0,0,0.1,0,0.3
				C0,4.8,0.1,5,0.1,5.2c0.3,1.4,1.4,4.1,5.1,6.5c2.1,1.4,2.6,1.8,2.8,1.8c0,0,0,0,0,0c0,0,0,0,0,0c0.1,0,0.7-0.4,2.8-1.8
				c3.5-2.3,4.6-4.8,5-6.3C15.9,5.1,16,4.8,16,4.5C16,4.3,16,4.2,16,4.2L16,4.2C16,4.2,16,4.2,16,4.2z"
			  />
			</svg>
		  );
		case 'Item 3':
		  return (
			<svg x="0px" y="0px" width="16px" height="15.6px" viewBox="0 0 16 15.6">
			  <path
				fill={fill}
				d="M14.9,3.2c0.7-0.9,1-1.7,1.1-2.4c0-0.2,0-0.4-0.1-0.5c0,0,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1
				C15.6,0,15.4,0,15.2,0c-0.7,0-1.6,0.4-2.4,1c-0.7,0.5-1.4,1.2-2.4,2.3C10.2,3.5,10,3.6,9.8,3.8L8.3,3.4L7.9,3.3C8,3.2,8.1,3.1,8.1,3
				c0-0.1,0-0.2-0.1-0.3L7.6,2.3C7.5,2.3,7.4,2.2,7.3,2.2c-0.1,0-0.2,0-0.3,0.1L6.5,2.8L6.2,2.8c0.1-0.1,0.1-0.2,0.1-0.3
				c0-0.1,0-0.2-0.1-0.3L5.8,1.9C5.7,1.8,5.6,1.8,5.5,1.8c-0.1,0-0.2,0-0.3,0.1L4.7,2.3L2.8,1.8c0,0-0.1,0-0.1,0
				c-0.1,0-0.3,0.1-0.4,0.1L1.6,2.6C1.5,2.6,1.5,2.7,1.5,2.8c0,0.1,0.1,0.3,0.2,0.3l4.1,2.2c0,0,0.1,0.1,0.1,0.1L7,6.6
				C6,7.7,5,8.8,4.2,9.7C4.2,9.8,4.1,9.9,4,10L0.9,9.7c0,0,0,0-0.1,0c-0.1,0-0.3,0.1-0.4,0.2l-0.3,0.3C0,10.3,0,10.4,0,10.5
				c0,0.1,0.1,0.3,0.2,0.3l2.2,1c0,0,0.1,0,0.1,0.1l0.2,0.2c-0.1,0.2-0.1,0.3-0.1,0.4c0,0.2,0.1,0.3,0.2,0.4C2.9,13,3,13.1,3.2,13.1
				c0.1,0,0.3,0,0.4-0.1l0.2,0.2c0,0,0,0.1,0.1,0.1l1.1,2.2c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2,0,0.3-0.1l0.3-0.3C6,15.1,6,14.9,6,14.8
				c0,0-0.3-3.1-0.3-3.1c0.1-0.1,0.2-0.1,0.3-0.2c1-0.7,2.1-1.7,3.2-2.7l1.2,1.1c0,0,0.1,0.1,0.1,0.1l2.3,4c0.1,0.1,0.2,0.2,0.3,0.2
				c0.1,0,0.2,0,0.3-0.1l0.7-0.7c0.1-0.1,0.1-0.2,0.1-0.3c0,0,0-0.1,0-0.1l-0.5-1.8L13.6,11l0.5-0.4c0.1-0.1,0.1-0.2,0.1-0.3
				c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.1-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0.1-0.3
				c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1L12.1,6c0.2-0.2,0.4-0.4,0.6-0.5
				C13.7,4.5,14.4,3.8,14.9,3.2z"
			  />
			</svg>
		  );
	}
  }
}

Toggling windows doesnt show anything!

Linux Support

The docs and description only mentions windows 10 and OSX, why doesn't it work on linux? Both the electron and node-webkit work on it btw.

Win10 NavPaneItem title

Hi,

Seems like the NavPaneItem doesn't allow hiding the top title in any way.

[Windows] MasterDetailView width prop does not resize containing div

Setting does not adjust the width of the parent div.

This results in the following. I was expecting the components to have extra space on the page after shrinking Master.

Electron Usage

I noticed electron-js.md is still empty. Would someone mind linking me to a sample project that uses Electron with react-desktop?

update radium to fix react 15 propTypes warning

react-desktop depends on [email protected] which uses React.PropTypes, which has been split into a separate package. It's since been updated (not sure which version, but 0.19.1 is the latest) but since react-desktop uses it I get this warning.

Could you do an update?

Typings / `d.ts` for typescript

A request to be sure, and a much a appreciated and sought after one by myself at least. Probably others using typescript as well.

Great work, and I greatly appreciate it.

Stop ProgressRing Animation when not being showed

MacOS checkbox and radio buttons don't gray out when window is unfocused

Conditional Module Loading

I've noticed that the components in this project seem to mirror each other between macOS and windows. I assume that this is to enable developers to write the same code for both platforms? What's the suggested way of conditionally loading the correct component based upon the current platform? I don't think that something like this is supported:

if (process.platform === 'win32') {
    import { Window, TitleBar, Text } from 'react-desktop/windows'
} else {
    import { Window, TitleBar, Text } from 'react-desktop/macOs'
}

Imports have to be top level statements.

I've also experimented with something like this:

const platform = (process.platform === 'win32') ? 'windows' : 'macOs';

import { Window, TitleBar, Text } from `react-desktop/${platform}`

This doesn't work because import statements don't support string templates (or variables for that matter).

Any other ideas? Do I need to switch to SystemJS or something?

Documentation Status

What is the current status of the documentation? I would really love to use this project in a electron app but I am new to electron and react and would really appreciate at least some kind of installation guide and a kitchen sink.

I assume that this is available somewhere but I can't find it now. Is this still coming or can someone point me to it?

[Windows] MasterDetailsViewItemMaster spans vertically off by one

I noticed that each span actually corresponds with the label of the span immediately below. So clicking the empty span is actually JOB00104, clicking JOB00104 is actually JOB00280, etc.

Classic Windows look

Hi,

Is there any interest in having react-desktop support the classic Windows look, known from Win32, Windows Forms and WPF?

If so, I am interested in contributing, as it wouldn't make sense for me to roll my own, when this project is perfect for it.

Demo doesn't work

After click "Forms" in Windows view:

• Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of t.

• Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of t.

• Uncaught Invariant Violation: findComponentRoot(..., .1.$win.0.$/=11.$//=10/=1$/=010.$////=11///=1$///=011//=1$///=011//=01$//=0011/=11=2$///=011//=01$//=0011/=01$//=0011/=001$/=00011.0.$/=11.0.$=1$/=01$=001$=0001$=00001$=000001$=00000013.$=1$=01$=001$=0001$=000013.$/=10.$/=10): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like

  ,

  , or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID ``.

Unable to style label generated by TextInput

Firstly, thanks so much for you work on this! I'm quite enthused to have such an easy experience building a Windows 10 themed Electron app.

My issue is that when my app is using the the dark theme, I can't style the labels associated with the components. Based on your code examples, I was expecting the default behavior of these labels to be that they dynamically determine the color based on the theme, similar to what you suggest for the components. My app is currently pulling UI settings from redux, and I'd like to be able to let the user toggle between light and dark themes (with the text reacting to the props appropriately). I'm likely going to strip out the labels and replace them with components as a workaround, but if I'm missing something.

npm install error

Hi

Thank you! This is a great work. I wanted to have a try, but it happens error when npm install.

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
.....
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@~15.0

[Windows] Minimize icon is not correct

For comparsion:
React Desktop
Native Windows 10

library agnostic?

are there plans to make react-desktop library agnostic/independent?
It would be great if there was a "web components version" that could be used without any framework or library. A "native" implementation would open it to a much larger market. I could be used with angular, ember, aurelia, polymer, and even vanilla js, all within Electron.

If not does anyone know of any non-framework-specific implementation of the mac and windows ui's? I've already looked into Photon, but that only provides mac ui.

No public methods for interactive elements

Native elements like <input> has public methods like focus and blur that allow programmatically enable specific behaviors. This library doesn't provide such API and makes it impossible to change the state of elements without user interaction.

Use case: https://github.com/perrin4869/react-focus-onkeydown

้how to build it ?

How to build it ?

thanks.

This is not native

Am I correct that this is not a native application? Where's the bridge code?

Feature Request: Dropdown Select menus

An implementation could look like:

• https://github.com/fraserxu/react-dropdown
• https://github.com/JedWatson/react-select

But, I'd prefer to have "native" feel to those like the components in this package 😄

Support for Linux theme too !

I see, it has Mac and Window theme. I wish somebody should make a pull for Linux Gnome theme too !

These components aren't native right?

Just double checking that these are CSS styled components and not actual native components.

Issue when use TextInput inside Window

Hi,

my render function look like this

  render() {
    return (
      <div>
        <Window
          color={this.props.color}
          theme={this.props.theme}
          chrome
          height="300px"
          padding="12px"
        >
          <TitleBar title="My Windows Application" controls/>
          <TextInput
            theme={this.props.theme}
            color={this.props.color}
            background
            label="My Input"
            placeholder="My Input"
            onChange={this.handleChange}
          />
        </Window>
        <TextInput
          theme={this.props.theme}
          color={this.props.color}
          background
          label="My Input"
          placeholder="My Input"
          onChange={this.handleChange}
        />
      </div>
    );
  }

When enter value to both TextInput and swap to another tap (in my case using Chrome just hit F12 for developer tools). The input under Window will change to blank while the input outside Window still has its value.

Access Child State from MasterDetailsViewItemMaster

How can i access the "selected" state from the child if i follow the example with the renderItem - method?

Include Alternative Fonts: Arimo, Liberation Sans, Nimbus Sans L and Selawik

This is originally suggested as a workaround for Bug #43, where the devs may use either macOS or Windows styles to make some Linux webapps.
To prevent default Linux font to be used, which may cause metric problems in user interface, I would suggest to include some alternative fonts which are most likely to be available in Linux distros (except Arimo and Selawik, which is available in Google Fonts and Microsoft's GitHub repo respectively).

Window background prop broken for Windows components

Looks like the code for the background color has been commented out of this file:

    //if (this.state.background) {
      //componentStyle = { ...componentStyle, backgroundColor: this.state.background };
    //}

Docs should be updated or this should be uncommented :)

Handle 'alt' press on OS X

Holding the alt key changes the green/full-window icon into a + icon.

Error in Windows Title Bar docs

Example code includes

 <TitleBar
        onClosePress={this.close}
        onMinimizePress={this.minimize}
        onMaximizePress={this.toggleMaximize}
        onRestoreDownPress={this.toggleMaximize}
      />

This should be updated to match the API:

 <TitleBar
        onCloseClick={this.close}
        onMinimizeClick={this.minimize}
        onMaximizeClick={this.toggleMaximize}
        onRestoreDownClick={this.toggleMaximize}
      />

How to use refs to access TextInput value

Hi,

I am having a problem accessing the TextInput value. I have tried to use onChange then from there I set the state but that caused a weird behavior.

Is there a way to use ref with TextInput and be able to use it to access the input value?

      <TextInput
        ref="input"
        theme={this.props.theme}
        color={this.props.color}
        background
        label="My Input"
        placeholder="My Input"
        onChange={this.handleChange}
      />

by doing console.log(this.refs.input.value), I get undefined.

I am trying to use the input value based on click event that is coming from a button.

Any suggestions?

Thanks,

Element to Render Window Component to for Styling entire Application

In going through the samples, it is unclear what element I should render the window component to in order to style the entire application window. Currently my BrowserWindow is:

  mainWindow = new BrowserWindow(
    { 
      width: 800 ,
      height: 600 ,
      //center: false ,
      //title: CONFIG.Title ,
      frame: false,  // causes no title bar on OSX
      //icon: /** see https://github.com/electron/electron/blob/master/docs/api/native-image.md --> The window icon. On Windows it is recommended to use ICO icons to get best visual effects, you can also leave it undefined so the executable's icon will be used. **/ "",
      //backgroundColor: /** String - Window's background color as Hexadecimal value, like #66CD00 or #FFF or #80FFFFFF (alpha is supported). Default is #FFF (white). **/ "#FFF",
      //transparent: false
    });

And my Window class is:

class WindowFrame extends React.Component<any, void> {
    static defaultProps = {
        color: '#cc7f29',
        theme: 'light'
    };

    render() {
        return (
            <Window
                color={this.props.color}
                theme={this.props.theme}
                chrome
                height="300px"
                padding="12px"
                >
                <TitleBar title="This is EDH Title #1" controls/>
                <Menu></Menu>
                <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>HELLO WORLD</Text>
            </Window>
        );
    }
}

When using this code and rendering to the body tag, I yield:

My entire codebase is here

NavMenu does not work with TypeScript

I separated the two issues. Reference: Issue #61

Also, I started writing typings for react-desktop thinking it was the reason I couldn't get my NavMenu working, but it still didn't (called setstate() on an unmounted component) work (and my definitions are neither done nor guaranteed perfect).

Did you get it to work? Your example converted to ES6 works fine

How can I build a 3 column layout similar to sketch?

No where in the examples or demo do you show a multi-column layout

could you create an example I can learn from?

it does work. titleBar for windows 10

you can see my github，
https://github.com/nokisnojok/electron-react-desktop-tools
git clone it， npm install & npm run webpack & npm start

Documentation : For some of the links there is no text, only header and some redirect to '404'

• Go to the URL = http://gabrielbull.github.io/react-desktop/docs/
• Observe that for following URL's there is only header and no other text. On page reload the header text also disappear :
  • http://gabrielbull.github.io/react-desktop/docs/Installation
  • http://gabrielbull.github.io/react-desktop/docs/advanced-usage/Electron-js
  • http://gabrielbull.github.io/react-desktop/docs/advanced-usage/node-webkit
• Observe that for following URL's '404 error' :
  • http://gabrielbull.github.io/CONTRIBUTING
  • http://gabrielbull.github.io/Testing
  • http://gabrielbull.github.io/FAQ
  • http://gabrielbull.github.io/CHANGELOG

Refactor the Split View Windows Component

Windows TextInput onChange triggers dupe action

Every time a user types a character in the TextInput the onChange callback fires twice and the input loses focus. If I use the TextInput from 'react-desktop/macOs' instead everything works fine. My code:

    <TextInput
      value={serverField}
      width="200"
      label="Server"
      theme="dark"
      onChange={e => setServerField(e.target.value)} />

Failed prop type: Invalid prop `title` of type `object` supplied to `TitleBar`, expected `string`.

i need to implement ：

 <TitleBar
     title={<p className="barHead"> <img src={logo} alt="overallLogo"/>HYD Application</p>}
     controls
     isMaximized={this.state.isMaximized}
     theme='dark'
     background='#1b9df8'
     onCloseClick={this.close}
     onMinimizeClick={this.minimize}
     onMaximizeClick={this.toggleMaximize}
     onRestoreDownClick={this.toggleMaximize}/>

but the 'title' props must be string.

IE Support

Hi, is there any way to get react-desktop working in IE ?

Cross browser compatibility

Hi,

I've noticed the demo does not work well on Firefox, it's maybe due to the use of -webkit prefixes.

Regards,

Integrate with electron-react-boilerplate style problem

I'm trying to integrate react desktop components into a boilerplate by electron-react-boilerplate.
Already set the frame option to false, tweak the margin to zero, I got the overflow scrollbar:

If I set the body style to overflow: hidden, the border of main window won't be able to display (due to overflow). In the snip below, right border is not showing.

Since the stylesheet of the boilerplate is pretty simple, I'm not really sure whether I miss any option. Any suggestion will be appreciated.

Prevent double tab zoom by default

Padding prop not having an impact on the W10 NavPaneItem

When working with NavPane and NavPaneItems, I noticed that the icons were offset from the hamburger button by quite a bit. In DevTools, it appears that the parent for the NavPaneItem had padding of 16px on the left and the right.

In the documentation, I noticed that the padding prop, I was unable to use this to reduce the padding issue above.

My current hack to get things to line up involves tagging your render function for the windows 10 NavPaneItem with a className and adding the following css.

/* Hack to fix weird nav-icon alignment */
/* Tacked on className on /keypunch-electron/node_modules/react-desktop/src/navPane/windows/pane/item/item.js*/
span.navItem {
  padding-left: 5px !important;
}

This results in my icons lining up

No way to hide a `Form.Row` element

There are states responsible for that, but they're never changed. We cannot pass display style as well as it is overwritten.

I'll make a pull request to solve that when the refactoring is over, as for now the import paths of the modules doesn't match the directory structure.

Windows ProgressRing has a different offset on the first animation iteration

[Windows] Checkbox, defaultChecked issue?

Hi, I have successfully integrated other components into my electron app and it's working great, Thank you.

I think there is some issue with defaultChecked property of checkbox in Windows. Is it of type string ? as mentioned in docs

I checked the source, it checks if value and type is strictly boolean.

I'm totally new to react and electron development, if you could help me with issue it'd be great. Here is my full code: (Do read the comment below console.log(autostartBool);)

import React from 'react';
import styled from 'styled-components';
import { Checkbox } from 'react-desktop/windows';
// electron variables
const settings = require('electron-settings');

const PREF_BOOT = 'boot';

// Preferences
var autostartBool = false;

function checkIfPrefsAreInitialized() {
  if(!settings.has(PREF_BOOT)) {
    settings.set(PREF_BOOT, autostartBool);
  }
}


class Settings extends React.Component {

constructor(props) {
    super(props);

    // ====== PREF =============
    // At start (first time ever) if user will not have these prefs so ..
    // JUST SET IT !!
    checkIfPrefsAreInitialized();


    autostartBool= settings.get(PREF_BOOT);

    console.log(autostartBool); 
    // For some reason it prints "I got checked!" 
    // which is the defaultValue of Checkbox BUT the checkbox is not checked by default


}


  render() {
    return (
    	    	 <Checkbox
        color={this.props.color}
        theme={this.props.theme}
        label="Automatically start Linkcue on boot"
        onChange={(e) => {
        	settings.set(PREF_BOOT, e.target.value)
        }}
        defaultValue="I got checked!"
        defaultChecked={autostartBool}
      />
    );
  }
}

export default Settings;

Add radio button to Windows components

Windows Input lost focus with onChange

Hello there, I'm using react-desktop on electron with react-redux boilerplate...
I got a problem when using TextInput with windows theme, the onChange method always update the wrapper "data-reactdeskropid". It make the form lost focus. the onChange using redux action.
I tried using the basic html input, and it works fine.
Is this a bug? Or are there ways to stop update the wrapper?