Showing preview only (435K chars total). Download the full file or copy to clipboard to get everything.
Repository: gabrielbull/react-desktop
Branch: master
Commit: bba61374849d
Files: 249
Total size: 382.5 KB
Directory structure:
gitextract_6tgptjls/
├── .babelrc
├── .codeclimate.yml
├── .editorconfig
├── .eslintrc.yml
├── .github/
│ └── workflows/
│ └── npm-publish.yml
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── demo/
│ └── electron/
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ ├── page_index.js
│ └── webpack.config.js
├── docs/
│ ├── README.md
│ ├── advanced-usage/
│ │ ├── electron-js.md
│ │ └── nw-js.md
│ ├── faq.md
│ ├── getting-started/
│ │ └── installation.md
│ ├── mac-os/
│ │ ├── box.md
│ │ ├── button.md
│ │ ├── checkbox.md
│ │ ├── dialog.md
│ │ ├── label.md
│ │ ├── link.md
│ │ ├── list-view.md
│ │ ├── pin.md
│ │ ├── progress-circle.md
│ │ ├── radio.md
│ │ ├── search-field.md
│ │ ├── segmented-control.md
│ │ ├── text-input.md
│ │ ├── text.md
│ │ ├── title-bar.md
│ │ ├── toolbar-nav.md
│ │ ├── toolbar.md
│ │ ├── view.md
│ │ └── window.md
│ ├── testing.md
│ └── windows/
│ ├── button.md
│ ├── checkbox.md
│ ├── label.md
│ ├── master-details-view.md
│ ├── nav-pane.md
│ ├── progress-circle.md
│ ├── radio.md
│ ├── text-input.md
│ ├── text.md
│ ├── title-bar.md
│ ├── view.md
│ └── window.md
├── examples/
│ ├── macOs/
│ │ ├── advanced/
│ │ │ └── pinDialog.js
│ │ └── components/
│ │ ├── box.js
│ │ ├── button.js
│ │ ├── checkbox.js
│ │ ├── dialog.js
│ │ ├── label.js
│ │ ├── link.js
│ │ ├── listView.js
│ │ ├── pin.js
│ │ ├── progressCircle.js
│ │ ├── radio.js
│ │ ├── searchField.js
│ │ ├── segmentedControl.js
│ │ ├── text.js
│ │ ├── textArea.js
│ │ ├── textInput.js
│ │ ├── titleBar.js
│ │ ├── toolbar.js
│ │ ├── toolbarNav.js
│ │ ├── view.js
│ │ └── window.js
│ └── windows/
│ └── components/
│ ├── button.js
│ ├── checkbox.js
│ ├── label.js
│ ├── masterDetailsView.js
│ ├── navPane.js
│ ├── progressCircle.js
│ ├── radio.js
│ ├── text.js
│ ├── textArea.js
│ ├── textInput.js
│ ├── titleBar.js
│ ├── view.js
│ └── window.js
├── index.js
├── macOs.js
├── package.json
├── playground/
│ ├── assets/
│ │ └── icons.js
│ ├── examplesLoader.js
│ ├── index.js
│ ├── playground.js
│ ├── ui/
│ │ ├── examples/
│ │ │ └── examples.js
│ │ └── sidebar/
│ │ ├── logo.js
│ │ └── sidebar.js
│ └── webpack.config.js
├── src/
│ ├── Box/
│ │ └── macOs/
│ │ ├── index.js
│ │ └── styles/
│ │ └── 10.11.js
│ ├── Button/
│ │ ├── macOs/
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── Checkbox/
│ │ ├── macOs/
│ │ │ ├── Checkmark.js
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── Dialog/
│ │ └── macOs/
│ │ ├── index.js
│ │ └── style/
│ │ └── 10.11.js
│ ├── Label/
│ │ ├── macOs/
│ │ │ └── index.js
│ │ └── windows/
│ │ └── index.js
│ ├── Link/
│ │ └── macOs/
│ │ └── index.js
│ ├── ListView/
│ │ └── macOs/
│ │ ├── Footer/
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── 10.11.js
│ │ ├── Header/
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── 10.11.js
│ │ ├── Row/
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── 10.11.js
│ │ ├── Section/
│ │ │ ├── Header/
│ │ │ │ ├── index.js
│ │ │ │ └── style/
│ │ │ │ └── 10.11.js
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── 10.11.js
│ │ ├── Separator/
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── 10.11.js
│ │ ├── index.js
│ │ └── style/
│ │ └── 10.11.js
│ ├── MasterDetailsView/
│ │ └── windows/
│ │ ├── Details/
│ │ │ └── index.js
│ │ ├── Item/
│ │ │ └── index.js
│ │ ├── Master/
│ │ │ └── index.js
│ │ ├── Pane.js
│ │ └── index.js
│ ├── NavPane/
│ │ └── windows/
│ │ ├── Item/
│ │ │ ├── Content/
│ │ │ │ └── index.js
│ │ │ ├── Title/
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Pane/
│ │ │ ├── Button/
│ │ │ │ └── index.js
│ │ │ ├── Item/
│ │ │ │ └── index.js
│ │ │ ├── index.js
│ │ │ └── style/
│ │ │ └── windows10.js
│ │ ├── index.js
│ │ └── style/
│ │ └── windows10.js
│ ├── Pin/
│ │ └── macOs/
│ │ ├── index.js
│ │ └── style/
│ │ └── 10.11.js
│ ├── ProgressCircle/
│ │ ├── macOs/
│ │ │ ├── index.js
│ │ │ ├── progressCircleAnimation.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ ├── progressCircleAnimation.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── Radio/
│ │ ├── macOs/
│ │ │ ├── Circle.js
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows.js
│ ├── SearchField/
│ │ └── macOs/
│ │ ├── cancelAnimation.js
│ │ ├── icons.js
│ │ ├── index.js
│ │ └── styles/
│ │ └── 10.11.js
│ ├── SegmentedControl/
│ │ └── macOs/
│ │ ├── Item/
│ │ │ └── index.js
│ │ ├── Tabs/
│ │ │ ├── Tab.js
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── style/
│ │ └── 10.11.js
│ ├── Text/
│ │ ├── macOs/
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── TextArea/
│ │ ├── macOs/
│ │ │ ├── centerPlaceholderAnimation.js
│ │ │ ├── focusRingAnimation.js
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── TextInput/
│ │ ├── macOs/
│ │ │ ├── centerPlaceholderAnimation.js
│ │ │ ├── focusRingAnimation.js
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── TitleBar/
│ │ ├── macOs/
│ │ │ ├── Controls/
│ │ │ │ ├── Close.js
│ │ │ │ ├── Minimize.js
│ │ │ │ ├── Resize.js
│ │ │ │ ├── index.js
│ │ │ │ └── styles/
│ │ │ │ └── 10.11.js
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── Controls/
│ │ │ ├── Close.js
│ │ │ ├── Maximize.js
│ │ │ ├── Minimize.js
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── Toolbar/
│ │ └── macOs/
│ │ ├── Nav/
│ │ │ ├── Item/
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── index.js
│ ├── ValueRef.js
│ ├── View/
│ │ ├── macOs/
│ │ │ └── index.js
│ │ └── windows/
│ │ └── index.js
│ ├── Window/
│ │ ├── macOs/
│ │ │ ├── index.js
│ │ │ └── styles/
│ │ │ └── 10.11.js
│ │ └── windows/
│ │ ├── index.js
│ │ └── styles/
│ │ └── windows10.js
│ ├── animation/
│ │ └── bezierEasing.js
│ ├── color.js
│ ├── monitor.js
│ ├── os.js
│ ├── placeholderStyle.js
│ ├── style/
│ │ ├── alignment.js
│ │ ├── background/
│ │ │ ├── macOs.js
│ │ │ └── windows.js
│ │ ├── color/
│ │ │ └── windows.js
│ │ ├── dimension.js
│ │ ├── fontSize.js
│ │ ├── hidden.js
│ │ ├── margin.js
│ │ ├── padding.js
│ │ ├── textAlign.js
│ │ ├── theme/
│ │ │ └── windows.js
│ │ └── width.js
│ ├── styleHelper.js
│ ├── utils/
│ │ └── mapStyles.js
│ └── windowFocus.js
├── test/
│ ├── mocha.opts
│ ├── setup.js
│ └── tests/
│ ├── box.js
│ ├── button.js
│ ├── checkbox.js
│ ├── color.js
│ ├── dialog.js
│ ├── index.js
│ ├── label.js
│ ├── link.js
│ ├── listView.js
│ ├── macOs.js
│ ├── pin.js
│ ├── progressCircle.js
│ ├── searchField.js
│ ├── text.js
│ ├── textArea.js
│ ├── textInput.js
│ ├── toolbar.js
│ ├── toolbarNav.js
│ └── windows.js
└── windows.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"transform-decorators-legacy"
]
}
================================================
FILE: .codeclimate.yml
================================================
languages:
JavaScript: true
exclude_paths:
- "test/*"
- "lib/*"
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc.yml
================================================
parser: babel-eslint
extends:
- plugin:import/errors
- plugin:import/warnings
plugins:
- react
env:
browser: true
node: true
es6: true
mocha: true
rules:
# Strict mode
strict: [2, never]
# Code style
indent: [2, 2]
quotes: [2, single]
no-unused-vars: 1
no-undef: 1
object-curly-spacing: [2, always]
# JSX
jsx-quotes: 1
# React
react/display-name: 0
react/jsx-boolean-value: 1
react/jsx-closing-bracket-location: 1
react/jsx-curly-spacing: 1
react/jsx-max-props-per-line: 0
react/jsx-indent-props: 0
react/jsx-no-duplicate-props: 1
react/jsx-no-undef: 1
react/jsx-sort-prop-types: 0
react/jsx-sort-props: 0
react/jsx-uses-react: 1
react/jsx-uses-vars: 1
react/no-danger: 0
react/no-set-state: 0
react/no-did-mount-set-state: 1
react/no-did-update-set-state: 1
react/no-multi-comp: 0
react/no-unknown-property: 1
react/self-closing-comp: 1
react/jsx-wrap-multilines: 1
================================================
FILE: .github/workflows/npm-publish.yml
================================================
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
name: Node.js Package
on:
release:
types: [created]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 12
- run: npm ci
- run: npm test
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
publish-gpr:
needs: build
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 12
registry-url: https://npm.pkg.github.com/
- run: npm ci
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
================================================
FILE: .gitignore
================================================
# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
/.idea
ehthumbs.db
Thumbs.db
# Node
/node_modules
yarn.lock
# react-desktop #
########
/lib
/build
# Logs
logs
*.log
npm-debug.log*
package-lock.json
================================================
FILE: .npmignore
================================================
/build
/docs
/examples
/lib
/node_modules
/playground
/test
/.idea
/.babelrc
/.codeclimate.yml
/.editorconfig
/.eslintrc
/.npmignore
/.travis.yml
/CONTRIBUTING.md
/npm-debug.log
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- '8'
- '7'
- '6'
================================================
FILE: CHANGELOG.md
================================================
# CHANGELOG
## 0.3.10 (July 28th, 2019)
- Add the Electron framework demo
## 0.3.7 (July 25th, 2018)
- Add ability to disable individual titlebar controls (#125)
- Allow end-user to force `isWindowFocused` prop (#126)
- Allow defaultChecked to be string as well as boolean (#123) (Fixes #90)
## 0.3.6 (July 25th, 2018)
- This release was published incorrectly. Use 0.3.7 instead.
## 0.3.5 (April 6th, 2018)
- Fixed issue with case sensitivity
## 0.3.4 (April 4th, 2018)
- Added TextArea component
- Several minor fixes
## 0.3.3 (November 21st, 2017)
- Updated dependencies
- Fixed title props
## 0.3.2 (October 17th, 2017)
- Updated dependencies
- Fixed unit tests
- Fixed unit playground
- Add public `focus` and `blur` methods to TextInput
- Prop title of TitleBar now supports element node
## 0.3.1 (June 21th, 2017)
- Updated dependencies
## 0.3.0 (April 17th, 2017)
- Added prop-types dependency to avoid deprecation in React 16
## 0.2.19 (March 14th, 2017)
- Removed rubber band effect from list view
## 0.2.18 (March 14th, 2017)
- Fixed an issue with OS detection
## 0.2.17 (January 9th, 2017)
- Fixed issue with windows window background color
- Added ref value for input elements
- CheckBoxes and Radios now changes style when window is unfocused
- Can now import components based on OS from 'react-desktop'
## 0.2.16 (January 9th, 2017)
- Custom styles for Windows text field's label
- Default color for Windows text field's label changes based on theme
## 0.2.15 (January 9th, 2017)
- Fixed bug with macOs text field’s placeholder
## 0.2.14 (September 19th, 2016)
- Fixed duplicate onChange events on the windows textInput
## 0.2.13 (August 25th, 2016)
- Improve macOS title bar control icons
## 0.2.12 (August 17th, 2016)
- Fixed some styling issues with the list view
- Fixed some styling issues with the windows
## 0.2.11 (August 12th, 2016)
- Added macOS list view component
## 0.2.10 (August 11th, 2016)
- Quick fix for the macOS text input component border issue
## 0.2.9 (August 11th, 2016)
- Added macOS search field component
- Added centerPlaceholder, focusRing, icon and onEnter properties to the macOS text input component
## 0.2.8 (August 8th, 2016)
- Added macOS toolbar nav component
- Added inset property to macOS title bar component
- Added dimension and alignment properties to macOS toolbar component
## 0.2.7 (July 28th, 2016)
- Added macOS dialog component
- Added bold property to macOS text
- Added onEnter and disabled properties to macOS button
- Fixed issues with margin on pin component for macOS
## 0.2.6 (July 27th, 2016)
- Added macOS pin component
- Added size, padding and margin properties to macOS buttons
- Fixed issues with text input for macOS
- Added rounded corners and size properties to text input for macOS
## 0.2.5 (July 18th, 2016)
- Fixed some issues with View alignment
## 0.2.4 (July 17th, 2016)
- Removed all unknown props from components
- Intial window focus is now the real window focus instead of being always true
## 0.2.3 (June 24th, 2016)
- Fixed bug with title bar in macOS
## 0.2.2 (June 24th, 2016)
- Added Link component for macOS
- Added size to Text component
- Added transparent option to titlebar for macOS
- Fixed title bar size for macOS
## 0.2.1 (June 14th, 2016)
- Added support for React 15.1.0
## 0.2.0 (May 16th, 2016)
- Beta 1 release
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing Guidelines
We are open to, and grateful for, any contributions made by the community.
## Reporting Issues and Asking Questions
Before opening an issue, please search the [issue tracker](https://github.com/gabrielbull/react-desktop/issues)
to make sure your issue hasn’t already been reported.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright © 2017 Gabriel Bull
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# <a href="http://reactdesktop.js.org/" target="_blank"></a>
[](https://travis-ci.org/gabrielbull/react-desktop)
[](https://codeclimate.com/github/gabrielbull/react-desktop)
[](https://github.com/gabrielbull/react-desktop/blob/master/LICENSE)
[](https://github.com/gabrielbull/react-desktop/stargazers)
[](https://www.npmjs.org/package/react-desktop)
[](https://www.npmjs.org/package/react-desktop)
[](https://gitter.im/gabrielbull/react-desktop?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
React UI Components for macOS High Sierra and Windows 10.
```npm
npm install react-desktop --save
```
<a href="http://reactdesktop.js.org/demo/" target="_blank"></a>
## 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](http://nwjs.io) or [Electron.js](http://electron.atom.io)!
Everyone is welcome to contribute and add more components/documentation whilst following the [contributing guidelines](/CONTRIBUTING.md).
## Documentation
Guides on installation, components and advanced usage are found in the [documentation](http://reactdesktop.js.org).
## Contributors
<a href="https://github.com/gabrielbull/react-desktop/graphs/contributors">
<img src="https://contrib.rocks/image?repo=gabrielbull/react-desktop" />
</a>
================================================
FILE: demo/electron/.gitignore
================================================
node_modules/
dist/
================================================
FILE: demo/electron/README.md
================================================
# React desktop Electron demo
## How to use
First, enter the folder:
```cd demo/electron```
Install the libraries:
```npm i``` or ```yarn``` (if you have been installed it)
Build once:
```npm run build```
Then start the server:
```npm run watch```
Open another console at the same folder, and run this command to start the Electron process:
```npm start```
That's it!
================================================
FILE: demo/electron/babel.config.js
================================================
module.exports = function (api) {
api.cache(false);
const presets = [
[
'@babel/preset-env',
{
'modules': 'commonjs',
'targets': {
'node': 'current'
}
}
],
[
'@babel/preset-react'
]
];
const plugins = [
[
'@babel/plugin-proposal-decorators',
{
'legacy': true
}
],
[
'@babel/plugin-proposal-class-properties',
{
'loose': true
}
]
];
return {
presets,
plugins
};
}
================================================
FILE: demo/electron/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
html {
overflow-x: hidden;
overflow-y: hidden;
display: flex;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
}
.initTitle {
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 1.4em;
color: #333333;
background-color: rgba(255, 255, 255, 0.4);
margin: 0px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}
.position {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.circleBox {
display: block;
background-color: rgba(255, 255, 255, 0.4);
margin: 0px;
padding: 10px;
}
.outside {
display: inline-block;
line-height: 1;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
animation: rotate 1.4s linear infinite;
animation-name: rotate;
}
.svgPrimary {
color: #3399cc;
}
.circle {
stroke: currentColor;
animation: dash 1.4s ease-in-out infinite;
animation-name: dash;
stroke-dasharray: 80px, 200px;
stroke-dashoffset: 0px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1px, 200px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -15px;
}
100% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -125px;
}
}
</style>
</head>
<body>
<div id="content">
<div class="circleBox">
<div class="position">
<div class="outside" style="width: 75px; height: 75px;">
<svg class="svgPrimary" viewBox="22 22 44 44">
<circle class="circle" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle>
</svg>
</div>
</div>
</div>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
================================================
FILE: demo/electron/index.js
================================================
const electron = require('electron');
const { app, BrowserWindow, Menu } = electron;
let mainWnd = null;
function createMainWnd() {
mainWnd = new BrowserWindow({
width:800,
height:600,
minWidth:800,
maxWidth: 800,
minHeight: 600,
maxHeight: 600,
useContentSize: true,
show: false,
frame: false,
titleBarStyle: 'hidden',
webPreferences: {
nodeIntegration: true
}
});
mainWnd.loadURL('http://127.0.0.1:16000/index.html');
mainWnd.on('ready-to-show', ()=>{
Menu.setApplicationMenu(null);
mainWnd.show();
// mainWnd.webContents.openDevTools({ detach:true });
});
mainWnd.on('closed', () => {
mainWnd = null;
process.exit();
});
}
app.on('ready', ()=>{
createMainWnd();
});
app.on('window-all-closed', () => {
app.quit();
});
================================================
FILE: demo/electron/package.json
================================================
{
"name": "react-desktop-electron-demo",
"version": "0.1.0",
"description": "",
"private": true,
"scripts": {
"start": "electron ./index.js",
"watch": "webpack-dev-server --config ./webpack.config.js --colors --inline --port 16000",
"build": "webpack --config ./webpack.config.js",
"package": "electron-packager ./ ReactDesktop --all --overwrite --out=./packaged/",
"package:windows": "electron-packager ./ ReactDesktop --platform=win32 --overwrite --out=./packaged/",
"package:mac": "electron-builder build --mac --config electron-builder.json --publish never",
"test": "jest --watch"
},
"author": "langyo",
"license": "MIT",
"dependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-transform-flow-strip-types": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^4.3.0",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"classnames": "^2.2.6",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-desktop": "^0.3.9",
"react-dom": "^16.8.6"
},
"keywords": [],
"devDependencies": {
"electron": "^9.1.0",
"electron-builder": "^21.1.5",
"electron-packager": "^14.0.3",
"jest": "^24.8.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
================================================
FILE: demo/electron/page_index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { Window, TitleBar } from 'react-desktop/windows';
import Button from '@material-ui/core/Button';
ReactDOM.render(<Window
chrome
height="600px"
width="800px"
padding="12px">
<TitleBar title="My Windows Application" controls onCloseClick={() => process.exit()}/>
<div>
<Button color="primary" variant="outlined">
{'Hello world!'}
</Button>
</div>
</Window>, document.querySelector('#content'));
================================================
FILE: demo/electron/webpack.config.js
================================================
var path = require('path');
module.exports = {
mode: 'development',
entry: './page_index.js',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
// resolve: {
// alias: {
// 'react-desktop': path.join(__dirname, '..', '..')
// }
// },
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
================================================
FILE: docs/README.md
================================================
# Documentation
**react-desktop** is a JavaScript library built on top of [Facebook's React](https://facebook.github.io/react/) library,
which aims to bring a native desktop experience to the web, featuring many macOS High Sierra and Windows 10 components.
**react-desktop** works perfectly with [NW.js](http://nwjs.io) and [Electron.js](http://electron.atom.io), but
can be used in any JavaScript powered project!
## Table of Contents
1. Getting Started
* [Installation](/docs/getting-started/installation.md)
2. macOS
* [Box](/docs/mac-os/box.md)
* [Button](/docs/mac-os/button.md)
* [Checkbox](/docs/mac-os/checkbox.md)
* [Dialog](/docs/mac-os/dialog.md)
* [Label](/docs/mac-os/label.md)
* [Link](/docs/mac-os/link.md)
* [List View](/docs/mac-os/list-view.md)
* [Pin](/docs/mac-os/pin.md)
* [Progress Circle](/docs/mac-os/progress-circle.md)
* [Radio](/docs/mac-os/radio.md)
* [Search Field](/docs/mac-os/search-field.md)
* [Segmented Control](/docs/mac-os/segmented-control.md)
* [Text](/docs/mac-os/text.md)
* [Text Input](/docs/mac-os/text-input.md)
* [Title Bar](/docs/mac-os/title-bar.md)
* [Toolbar](/docs/mac-os/toolbar.md)
* [Toolbar Nav](/docs/mac-os/toolbar-nav.md)
* [View](/docs/mac-os/view.md)
* [Window](/docs/mac-os/window.md)
3. Windows 10
* [Button](/docs/windows/button.md)
* [Checkbox](/docs/windows/checkbox.md)
* [Label](/docs/windows/label.md)
* [Master/Details View](/docs/windows/master-details-view.md)
* [Nav Pane](/docs/windows/nav-pane.md)
* [Progress Circle](/docs/windows/progress-circle.md)
* [Radio](/docs/windows/radio.md)
* [Text](/docs/windows/text.md)
* [Text Input](/docs/windows/text-input.md)
* [Title Bar](/docs/windows/title-bar.md)
* [View](/docs/windows/view.md)
* [Window](/docs/windows/window.md)
4. [Contributing](/CONTRIBUTING.md)
5. [Change Log](/CHANGELOG.md)
<!---
4. Advanced Usage
* [Electron.js](/docs/advanced-usage/electron-js.md)
* [NW.js](/docs/advanced-usage/nw-js.md)
5. [Testing](/docs/testing.md)
6. [Frequently Asked Questions](/docs/faq.md)
-->
================================================
FILE: docs/advanced-usage/electron-js.md
================================================
# Electron.js
Documentation is coming soon.
================================================
FILE: docs/advanced-usage/nw-js.md
================================================
# NW.js
Documentation is coming soon.
================================================
FILE: docs/faq.md
================================================
# Frequently Asked Questions
Documentation is coming soon.
================================================
FILE: docs/getting-started/installation.md
================================================
# Installation
**To install the stable version:**
## [NPM](https://www.npmjs.com/)
`npm install react-desktop --save`
## [Yarn](https://yarnpkg.com)
`yarn add react-desktop`
================================================
FILE: docs/mac-os/box.md
================================================
# Box
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
label | string | Adds a label to the box.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Box, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Box label="Box" padding="10px 30px">
<Text>Some text...</Text>
</Box>
);
}
}
```
================================================
FILE: docs/mac-os/button.md
================================================
# Button
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
color | string | Sets the color of the button<br/>__Property value__ _null_ _"blue"_.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
onClick | function | Callback function when the button is pressed.
onEnter | function | Callback function when the the enter key is pressed.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
size | string, number | Sets the font size of a component.
type | string | Sets the type of the button<br/>__Property value__ _"button"_ _"submit"_. Default value _"button"_.
### Examples
```jsx
import React, { Component } from 'react';
import { Button } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Button color="blue" onClick={() => console.log('Clicked!')}>
Press me!
</Button>
);
}
}
```
================================================
FILE: docs/mac-os/checkbox.md
================================================
# Checkbox
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
defaultValue | string | Sets the default value of the input.
defaultChecked | string | If true, the checkbox is checked by default.
hidden | bool | Sets the visibility of a component.
label | string | Adds a label to the checkbox.
onChange | function | Callback function when the checkbox has changed.
### Examples
```jsx
import React, { Component } from 'react';
import { Checkbox } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Checkbox
label="Check me!"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
);
}
}
```
================================================
FILE: docs/mac-os/dialog.md
================================================
# Dialog
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
buttons | array | Sets the buttons of the component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
icon | element | Sets the icon element of the component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
message | string | Sets the message of the component.
title | string | Sets the title of the component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
### Examples
```jsx
import React, { Component } from 'react';
import { Dialog, Button } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Dialog
title="This is a title"
message="This message is inside a dialog component."
icon={this.renderIcon()}
buttons={[
<Button onClick={() => console.log('close this dialog')}>Cancel</Button>,
<Button color="blue" onClick={() => console.log('submit this dialog')}>Submit</Button>,
]}
/>
);
}
renderIcon() {
return (
<img
src="data:image/png;base64,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"
width="52"
height="52"
/>
);
}
}
```
================================================
FILE: docs/mac-os/label.md
================================================
# Label
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
color | string | Sets the color of the text.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Label } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Label>My Label</Label>
);
}
}
```
================================================
FILE: docs/mac-os/link.md
================================================
# Link
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
color | string | Sets the color of the text.
height | string, number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
size | string, number | Sets the font size of a component.
textAlign | string | Sets the text alignment of the component's content.<br/>__Property value__ _"left"_, _"center"_, _"right"_
width | string, number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { View, Link } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View background="#efefef" padding="20px" width="300px" direction="row">
<Link color="red">
This is a link
</Link>
<Link marginLeft="auto">
This is another link
</Link>
</View>
);
}
}
```
================================================
FILE: docs/mac-os/list-view.md
================================================
# ListView
## ListView
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
width | number | Sets the width of a component.
## ListViewFooter
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
width | number | Sets the width of a component.
## ListViewHeader
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
width | number | Sets the width of a component.
## ListViewRow
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
layout | string | Sets the direction of the content.<br/>__Property value__ _"horizontal"_, _"vertical"_
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
## ListViewSection
### Properties
Property | Type | Description
:------------------ | :---------------------:| :----------
header | string, element, array | Sets the header or header element of the component.
## ListViewSectionHeader
### Properties
Property | Type | Description
:------------------ | :-------------------:| :----------
bold | bool, number, string | Sets the bold value of a component.
color | string | Sets the color of the text.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
size | string, number | Sets the font size of a component.
## ListViewSeparator
### Properties
Property | Type | Description
:------------------ | :-------------------:| :----------
color | string | Sets the color of the separator.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import {
ListView,
ListViewHeader,
ListViewFooter,
ListViewSection,
ListViewSectionHeader,
ListViewRow,
ListViewSeparator,
Text
} from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { selected: null };
}
render() {
return (
<ListView background="#f1f2f4" width="240" height="200">
<ListViewHeader>
<Text size="11" color="#696969">Order by name</Text>
</ListViewHeader>
<ListViewSection header={this.renderSectionHeader('My Section')}>
{this.renderItem('Item 1', 'This is the first item.')}
{this.renderItem('Item 2', 'This is the second item.')}
{this.renderItem('Item 3', 'This is the third item.')}
</ListViewSection>
<ListViewSeparator/>
<ListViewSection header={this.renderSectionHeader('My Section 2')}>
{this.renderItem('Item 4', 'This is the fourth item.')}
{this.renderItem('Item 5', 'This is the fifth item.')}
{this.renderItem('Item 6', 'This is the sixth item.')}
</ListViewSection>
<ListViewFooter>
<Text size="11" color="#696969">Status</Text>
</ListViewFooter>
</ListView>
);
}
renderSectionHeader(title) {
return (
<ListViewSectionHeader>
{title}
</ListViewSectionHeader>
);
}
renderItem(title, info) {
return (
<ListViewRow
onClick={() => this.setState({ selected: title })}
background={this.state.selected === title ? '#d8dadc' : null}
>
<svg x="0px" y="0px" width="18" height="12" viewBox="0 0 18 12" style={{ marginRight: '6px' }}>
<path fill="#727476" d="M13.2,0H4.9L0,6.8v3.7C0,11.3,0.7,12,1.5,12h15
c0.8,0,1.5-0.7,1.5-1.5V6.8L13.2,0z M13.8,6.8L12.3,9L5.9,9L4.2,6.8l-3.1,0l4.2-6h7.4l4.2,6L13.8,6.8z"/>
<polygon fill="#C9CBCD" points="13.8,6.8 12.3,9 5.9,9 4.2,6.8 1.2,6.7 5.4,0.8 12.8,0.8
17,6.7 "/>
</svg>
<Text color="#414141" size="13">{info}</Text>
</ListViewRow>
);
}
}
```
================================================
FILE: docs/mac-os/pin.md
================================================
# Pin
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
hidden | bool | Sets the visibility of a component.
length | number | Sets the length of the pin.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
onChange | function | Callback function when the input changes.
reveal | bool | Reveals the characters in the pin.
### Examples
```jsx
import React, { Component } from 'react';
import { Pin, View } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View background="#efeff1" padding="20px">
<Pin
onChange={value => console.log(value)}
length={4}
reveal
/>
</View>
);
}
}
```
================================================
FILE: docs/mac-os/progress-circle.md
================================================
# Progress Circle
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
color | string | Sets the color of the progress circle.
hidden | bool | Sets the visibility of a component.
size | number | Sets the size of the progress circle.
### Examples
```jsx
import React, { Component } from 'react';
import { ProgressCircle } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<ProgressCircle size={25}/>
);
}
}
```
================================================
FILE: docs/mac-os/radio.md
================================================
# Radio
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
defaultValue | string | Sets the default value of the input.
defaultChecked | string | If true, the radio is checked by default.
hidden | bool | Sets the visibility of a component.
label | string | Adds a label to the checkbox.
name | string | Name of the input.
onChange | function | Callback function when the checkbox has changed.
### Examples
```jsx
import React, { Component } from 'react';
import { View, Radio } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View horizontalAlignment="center" direction="column">
<Radio
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
<Radio
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
/>
</View>
);
}
}
```
================================================
FILE: docs/mac-os/search-field.md
================================================
# SearchField
### Properties
Property | Type | Description
:------------------ | :-------------------:| :----------
cancel | bool | Sets whether the cancel button is visible.
centerPlaceholder | bool | Sets whether the placeholder is animated and centered when the input is not focused.
defaultValue | string | Sets the default value of the input.
focusRing | bool | Sets the visibility of the focus ring around the input.
hidden | bool | Sets the visibility of a component.
icon | element, array | Adds an icon to the input.
label | string | Adds a label to the input.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
onCancel | function | Callback function when the user press the cancel button.
onChange | function | Callback function when the input changes.
onEnter | function | Callback function when the enter key is pressed.
placeholder | string | Adds a placeholder to the input.
rounded | bool, number, string | Sets the roundness of the input border
size | string, number | Sets the font size of a component.
value | string | Sets the value of the input.
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';
export default class extends Component {
handleChange = e => console.log(e.target.value);
render() {
return (
<TitleBar inset>
<Toolbar height="43" horizontalAlignment="right">
<SearchField
placeholder="Search"
defaultValue=""
onChange={this.handleChange}
/>
</Toolbar>
</TitleBar>
);
}
}
```
================================================
FILE: docs/mac-os/segmented-control.md
================================================
# Segmented Control
## SegmentedControl
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
box | bool | Sets whether the item is in a box or not.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
width | number | Sets the width of a component.
## SegmentedControlItem
### Properties
Property | Type | Description
:------------------ | :-------:| :----------
title | string | Sets the title of the item.
onSelect | function | Callback function when selecting an item.
selected | bool | Sets whether the item is selected or not.
### Examples
```jsx
import React, { Component } from 'react';
import { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { selected: 1 }
}
render() {
return (
<SegmentedControl box>
{this.renderItems()}
</SegmentedControl>
);
}
renderItems() {
return [
this.renderItem(1, 'Tab 1', <Text>Content 1</Text>),
this.renderItem(2, 'Tab 2', <Text>Content 2</Text>),
this.renderItem(3, 'Tab 3', <Text>Content 3</Text>)
];
}
renderItem(key, title, content) {
return (
<SegmentedControlItem
key={key}
title={title}
selected={this.state.selected === key}
onSelect={() => this.setState({ selected: key })}
>
{content}
</SegmentedControlItem>
);
}
}
```
================================================
FILE: docs/mac-os/text-input.md
================================================
# TextInput
### Properties
Property | Type | Description
:------------------ | :-------------------:| :----------
centerPlaceholder | bool | Sets whether the placeholder is animated and centered when the input is not focused.
defaultValue | string | Sets the default value of the input.
focusRing | bool | Sets the visibility of the focus ring around the input.
hidden | bool | Sets the visibility of a component.
icon | element, array | Adds an icon to the input.
label | string | Adds a label to the input.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
onChange | function | Callback function when the input changes.
onEnter | function | Callback function when the enter key is pressed.
placeholder | string | Adds a placeholder to the input.
rounded | bool, number, string | Sets the roundness of the input border
size | string, number | Sets the font size of a component.
value | string | Sets the value of the input.
width | number | Sets the width of a component.
password | bool | Sets the input type to password.
### Methods
Method | Type | Description
:------------------ | :-------------:| :----------
focus | function | Focus text input programmatically
blur | function | Remove focus from text input programmatically
### Examples
```jsx
import React, { Component } from 'react';
import { TextInput } from 'react-desktop/macOs';
export default class extends Component {
handleChange = e => console.log(e.target.value);
render() {
return (
<TextInput
label="My Input"
placeholder="My Input"
defaultValue=""
onChange={this.handleChange}
/>
);
}
}
```
================================================
FILE: docs/mac-os/text.md
================================================
# Text
### Properties
Property | Type | Description
:------------------ | :-------------------:| :----------
background | string | Sets the background color of a component.
bold | bool, number, string | Sets the bold value of a component.
color | string | Sets the color of the text.
height | string, number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
size | string, number | Sets the font size of a component.
textAlign | string | Sets the text alignment of the component's content.<br/>__Property value__ _"left"_, _"center"_, _"right"_
width | string, number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Text padding="0 100px" textAlign="center" size="16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</Text>
);
}
}
```
================================================
FILE: docs/mac-os/title-bar.md
================================================
# TitleBar
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
controls | bool | Sets the visibility of the controls of the title bar.
inset | bool | Sets the controls of the title bar state to be inset.
isFullscreen | bool | Sets the title bar state to fullscreen.
onCloseClick | function | Callback function of the close button.
onMaximizeClick | function | Callback function of the maximize button
onMinimizeClick | function | Callback function of the minimize button
onResizeClick | function | Callback function of the resize button
title | string | Sets the title of the title bar.
transparent | bool | Make the title bar background transparent.
disableClose | bool | Disable the close button.
disableMinimize | bool | Disable the minimize button.
disableResize | bool | Disable the resize button.
disableFullscreen | bool | Disable fullscreen, will show the '+' maximize icon instead.
### Examples
```jsx
import React, { Component } from 'react';
import { View, TitleBar } from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { isFullscreen: false };
}
render() {
return (
<TitleBar
title="untitled text 5"
controls
isFullscreen={this.state.isFullscreen}
onCloseClick={() => console.log('Close window')}
onMinimizeClick={() => console.log('Minimize window')}
onMaximizeClick={() => console.log('Mazimize window')}
onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })}
/>
);
}
}
```
================================================
FILE: docs/mac-os/toolbar-nav.md
================================================
# Toolbar Nav
## ToolbarNav
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
height | number | Sets the height of a component.
width | number | Sets the width of a component.
## ToolbarNavItem
### Properties
Property | Type | Description
:------------------ | :---------------------:| :----------
icon | element, array | Sets the icon element of the item.
onClick | function | Callback function when the item is pressed.
selected | bool | Sets whether the item is selected or not.
title | string | Sets the title of the item.
### Examples
```jsx
import React, { Component } from 'react';
import { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs';
const circle = (
<svg x="0px" y="0px" width="25px" height="25px" viewBox="0 0 25 25">
<circle cx="12.5" cy="12.5" r="12.5"/>
</svg>
);
const star = (
<svg x="0px" y="0px" width="25px" height="23.8px" viewBox="0 0 25 23.8">
<polygon points="12.5,0 16.4,7.8 25,9.1 18.8,15.2 20.2,23.8 12.5,19.7 4.8,23.8 6.2,15.2 0,9.1 8.6,7.8 "/>
</svg>
);
const polygon = (
<svg x="0px" y="0px" width="25px" height="21.7px" viewBox="0 0 25 21.7">
<polygon points="6.2,21.7 0,10.8 6.2,0 18.8,0 25,10.8 18.8,21.7 "/>
</svg>
);
export default class extends Component {
constructor() {
super();
this.state = { selected: 1 };
}
render() {
return (
<TitleBar>
<Toolbar>
<ToolbarNav>
<ToolbarNavItem
title="Item 1"
icon={circle}
selected={this.state.selected === 1}
onClick={() => this.setState({ selected: 1 })}
/>
<ToolbarNavItem
title="Item 2"
icon={star}
selected={this.state.selected === 2}
onClick={() => this.setState({ selected: 2 })}
/>
<ToolbarNavItem
title="Item 3"
icon={polygon}
selected={this.state.selected === 3}
onClick={() => this.setState({ selected: 3 })}
/>
</ToolbarNav>
</Toolbar>
</TitleBar>
);
}
}
```
================================================
FILE: docs/mac-os/toolbar.md
================================================
# Toolbar
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
height | number | Sets the height of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { TitleBar, Toolbar, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<TitleBar controls inset>
<Toolbar height="43" horizontalAlignment="center"/>
</TitleBar>
);
}
}
```
================================================
FILE: docs/mac-os/view.md
================================================
# View
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
layout | string | Sets the direction of the content.<br/>__Property value__ _"horizontal"_, _"vertical"_
margin | string, number | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
marginBottom | string, number | Sets the outer margin bottom of a component.
marginLeft | string, number | Sets the outer margin left of a component.
marginRight | string, number | Sets the outer margin right of a component.
marginTop | string, number | Sets the outer margin top of a component.
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View
background="black"
padding="20px"
horizontalAlignment="center"
verticalAlignment="center"
width="200px"
height="100px"
>
<Text color="white">Hello World</Text>
</View>
);
}
}
```
================================================
FILE: docs/mac-os/window.md
================================================
# Window
### Properties
Property | Type | Description
:------------------ | :-------------:| :----------
background | string | Sets the background color of a component.
chrome | bool | Sets the chrome of the window.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
padding | string, number | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
paddingBottom | string, number | Sets the padding bottom inside a component.
paddingLeft | string, number | Sets the padding left inside a component.
paddingRight | string, number | Sets the padding right inside a component.
paddingTop | string, number | Sets the padding top inside a component.
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Window
chrome
height="300px"
padding="10px"
>
<TitleBar title="untitled text 5" controls/>
<Text>Hello World</Text>
</Window>
);
}
}
```
================================================
FILE: docs/testing.md
================================================
# Testing
Documentation is coming soon.
================================================
FILE: docs/windows/button.md
================================================
# Button
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
color | string, bool | Sets whether the button is colored (bool) or sets the color of the button (string).
hidden | bool | Sets the visibility of a component.
onClick | function | Callback function when the button is pressed.
push | bool | Display push animation when pressing the button.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
type | string | Sets the type of the button<br/>__Property value__ _"button"_ _"submit"_. Default value _"button"_.
### Examples
```jsx
import React, { Component } from 'react';
import { Button } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29'
};
render() {
return (
<Button push color={this.props.color} onClick={() => console.log('Clicked!')}>
Press me!
</Button>
);
}
}
```
================================================
FILE: docs/windows/checkbox.md
================================================
# Checkbox
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
color | string | Sets the color of the checkbox.
defaultValue | string | Sets the default value of the input.
defaultChecked | string | If true, the checkbox is checked by default.
hidden | bool | Sets the visibility of a component.
label | string | Adds a label to the checkbox.
onChange | function | Callback function when the checkbox has changed.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
### Examples
```jsx
import React, { Component } from 'react';
import { Checkbox } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Checkbox
color={this.props.color}
theme={this.props.theme}
label="Check me!"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
);
}
}
```
================================================
FILE: docs/windows/label.md
================================================
# Label
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string).
color | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string).
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
margin | string | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
padding | string | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Label } from 'react-desktop/windows';
export default class extends Component {
render() {
return (
<Label>My Label</Label>
);
}
}
```
================================================
FILE: docs/windows/master-details-view.md
================================================
# MasterDetailsView
## MasterDetailsView
### Properties
Property | Type | Description
:------------------ | :-----:| :----------
color | string | Sets the main color of a component.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
## MasterDetailsViewItem
### Properties
Property | Type | Description
:------------------ | :-----:| :----------
color | string | Sets the main color of a component.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
## MasterDetailsViewItemMaster
### Properties
Property | Type | Description
:------------------ | :-----:| :----------
color | string | Sets the main color of a component.
push | bool | Display push animation when selecting an item.
selected | bool | Master is selected.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
width | number | Sets the width of a component.
## MasterDetailsViewItemDetails
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
color | string | Sets the main color of a component.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
### Examples
```jsx
import React, { Component } from 'react';
import {
MasterDetailsView,
MasterDetailsViewItem,
MasterDetailsViewItemMaster,
MasterDetailsViewItemDetails,
Text
} from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<MasterDetailsView color={this.props.color} theme={this.props.theme}>
{this.renderItem('Item 1', 'Content 1')}
{this.renderItem('Item 2', 'Content 2')}
{this.renderItem('Item 3', 'Content 3')}
</MasterDetailsView>
);
}
renderItem(master, details) {
return (
<MasterDetailsViewItem>
<MasterDetailsViewItemMaster push>
{master}
</MasterDetailsViewItemMaster>
<MasterDetailsViewItemDetails background>
<Text padding="20px" color="white">{details}</Text>
</MasterDetailsViewItemDetails>
</MasterDetailsViewItem>
);
}
}
```
================================================
FILE: docs/windows/nav-pane.md
================================================
# NavPane
## NavPane
### Properties
Property | Type | Description
:-------------------- | :-------------:| :----------
canPaneToggle | bool | Sets whether the pane can be compacted. <br/>Default value _"true"_.
color | string | Sets the main color of a component.
defaultIsPaneExpanded | string | Sets whether the pane is expanded by default. <br/>Default value _"true"_.
onPaneToggle | function | Callback function when the pane is expanded or compacted.
paneCompactedLength | string, number | Sets the length of the pane when compacted.<br/>Default value _"48px"_.
paneExpandedLength | string, number | Sets the length of the pane when expanded.<br/>Default value _"200px"_
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
## NavPaneItem
### Properties
Property | Type | Description
:------------------- | :---------------------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
color | string | Sets the main color of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
icon | string, element, array | Sets the icon element of the item.
margin | string | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
onSelect | function | Callback function when an item is selected.
padding | string | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
push | bool | Display push animation when pressing the button.
selected | bool | Sets whether the item is selected or not.
title | string, element, array | Sets the title of the element.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
### Examples
```jsx
import React, { Component } from 'react';
import { NavPane, NavPaneItem, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
constructor() {
super();
this.state = {
selected: 'Item 1'
}
}
render() {
return (
<NavPane openLength={200} push color={this.props.color} theme={this.props.theme}>
{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="light"
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>
);
}
}
}
```
================================================
FILE: docs/windows/progress-circle.md
================================================
# Progress Circle
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
color | string | Sets the color of the progress circle.
hidden | bool | Sets the visibility of a component.
size | number | Sets the size of the progress circle.
### Examples
```jsx
import React, { Component } from 'react';
import { ProgressCircle } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29'
};
render() {
return (
<ProgressCircle
color={this.props.color}
size={100}
/>
);
}
}
```
================================================
FILE: docs/windows/radio.md
================================================
# Radio
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
color | string | Sets the color of the radio.
defaultValue | string | Sets the default value of the input.
defaultChecked | string | If true, the radio is checked by default.
hidden | bool | Sets the visibility of a component.
label | string | Adds a label to the checkbox.
name | string | Name of the input.
onChange | function | Callback function when the checkbox has changed.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
### Examples
```jsx
import React, { Component } from 'react';
import { View, Radio } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<View horizontalAlignment="center" layout="vertical" theme={this.props.theme}>
<Radio
color={this.props.color}
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
<Radio
color={this.props.color}
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
/>
</View>
);
}
}
```
================================================
FILE: docs/windows/text-input.md
================================================
# TextInput
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
color | string | Sets the main color of a component and it's children.
defaultValue | string | Sets the default value of the input.
hidden | bool | Sets the visibility of a component.
label | string | Adds a label to the input.
labelColor | string, bool | Sets whether the label text is colored (bool) or sets the color of the label text (string).
labelStyle | object | Custom styles for the label.
margin | string | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
onChange | function | Callback function when the input changes.
placeholder | function | Adds a placeholder to the input.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
value | string | Sets the value of the input.
width | number | Sets the width of a component.
password | bool | Sets the input type to password.
### Examples
```jsx
import React, { Component } from 'react';
import { TextInput } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
handleChange = e => console.log(e.target.value);
render() {
return (
<TextInput
ref="input"
theme={this.props.theme}
color={this.props.color}
background
label="My Input"
placeholder="My Input"
onChange={this.handleChange}
/>
);
}
}
```
================================================
FILE: docs/windows/text.md
================================================
# Text
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string).
color | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string).
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
margin | string | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
padding | string | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Text
background={this.props.color}
theme={this.props.theme}
width="100%"
horizontalAlignment="center"
verticalAlignment="center"
padding="100px"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</Text>
);
}
}
```
================================================
FILE: docs/windows/title-bar.md
================================================
# TitleBar
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
controls | bool | Sets the visibility of the controls of the title bar.
color | string | Sets the main color of a component and it's children.
isMaximized | bool | Sets the title bar state to maximized.
onCloseClick | function | Callback function of the close button.
onMaximizeClick | function | Callback function of the maximize button
onMinimizeClick | function | Callback function of the minimize button
onRestoreDownClick | function | Callback function of the restore down button
title | string | Sets the title of the title bar.
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
### Examples
```jsx
import React, { Component } from 'react';
import { TitleBar } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
constructor(props) {
super(props);
this.state = { isMaximized: true };
}
close = () => console.log('close');
minimize = () => console.log('minimize');
toggleMaximize = () => this.setState({ isMaximized: !this.state.isMaximized });
render() {
return (
<TitleBar
title="My Windows Application"
controls
isMaximized={this.state.isMaximized}
theme={this.props.theme}
background={this.props.color}
onCloseClick={this.close}
onMinimizeClick={this.minimize}
onMaximizeClick={this.toggleMaximize}
onRestoreDownClick={this.toggleMaximize}
/>
);
}
}
```
================================================
FILE: docs/windows/view.md
================================================
# View
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
color | string | Sets the main color of a component and it's children.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
layout | string | Sets the direction of the content.<br/>__Property value__ _"horizontal"_, _"vertical"_
margin | string | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
padding | string | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<View
color={this.props.color}
background
padding="20px"
horizontalAlignment="center"
verticalAlignment="center"
width="200px"
height="100px"
>
<Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
</View>
);
}
}
```
================================================
FILE: docs/windows/window.md
================================================
# Window
### Properties
Property | Type | Description
:------------------ | :-----------:| :----------
background | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.
chrome | bool | Sets the chrome of the window.
color | string | Sets the main color of a component and it's children.
height | number | Sets the height of a component.
hidden | bool | Sets the visibility of a component.
horizontalAlignment | string | Sets the horizontal alignment of the component's content<br/>__Property value__ _"left"_, _"center"_, _"right"_
padding | string | Sets the padding inside a component.<br/>__E.G.__ _"30px 20px"_
theme | string | Sets the UI theme that is used by this component and its children elements.<br/>__Property value__ _"light"_, _"dark"_
verticalAlignment | string | Sets the vertical alignment of the component's content.<br/>__Property value__ _"top"_, _"center"_, _"bottom"_
width | number | Sets the width of a component.
### Examples
```jsx
import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Window
color={this.props.color}
theme={this.props.theme}
chrome
height="300px"
padding="12px"
>
<TitleBar title="My Windows Application" controls/>
<Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
</Window>
);
}
}
```
================================================
FILE: examples/macOs/advanced/pinDialog.js
================================================
import React, { Component } from 'react';
import { View, Dialog, Pin, Button, Text, ProgressCircle } from 'react-desktop/macOs';
class PinDialog extends Component {
constructor() {
super();
this.state = {
pin: '',
error: null,
loading: false
};
}
submit = () => {
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false, error: 'The confirmation code you entered is incorrect.' });
}, 1500);
};
render() {
let error;
if (this.state.error) {
error = <Text color="red" marginBottom="16px">{this.state.error}</Text>;
}
return (
<View width="596px" background="#efefef">
<Dialog
title="Confirmation code"
message="A confirmation code has been sent to your email. Enter the code you received by email below."
icon={this.renderIcon()}
buttons={[
<Button
disabled={this.state.loading}
>
Cancel
</Button>,
<Button
color="blue"
onEnter={this.submit}
onClick={this.submit}
disabled={this.state.pin.length !== 4 || this.state.loading}
>
Submit
</Button>
]}
horizontalAlignment="center"
>
{error}
<ProgressCircle
hidden={!this.state.loading}
style={{ position: 'absolute', bottom: '46px', marginLeft: '-120px' }}
/>
<Pin length={4} marginBottom="16px" onChange={pin => this.setState({ pin })}/>
<Text>Enter the four digit security code</Text>
</Dialog>
</View>
);
}
renderIcon() {
return (
<img
src="data:image/png;base64,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"
width="52"
height="52"
/>
);
}
}
export default PinDialog;
================================================
FILE: examples/macOs/components/box.js
================================================
import React, { Component } from 'react';
import { Box, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Box label="Box" padding="10px 30px">
<Text>Some text...</Text>
</Box>
);
}
}
================================================
FILE: examples/macOs/components/button.js
================================================
import React, { Component } from 'react';
import { Button } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Button color="blue" onClick={() => console.log('Clicked!')}>
Press me!
</Button>
);
}
}
================================================
FILE: examples/macOs/components/checkbox.js
================================================
import React, { Component } from 'react';
import { Checkbox } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Checkbox
label="Check me!"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
);
}
}
================================================
FILE: examples/macOs/components/dialog.js
================================================
import React, { Component } from 'react';
import { Dialog, Button } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Dialog
title="This is a title"
message="This message is inside a dialog component."
icon={this.renderIcon()}
buttons={[
<Button onClick={() => console.log('close this dialog')}>Cancel</Button>,
<Button color="blue" onClick={() => console.log('submit this dialog')}>Submit</Button>,
]}
/>
);
}
renderIcon() {
return (
<img
src="data:image/png;base64,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"
width="52"
height="52"
/>
);
}
}
================================================
FILE: examples/macOs/components/label.js
================================================
import React, { Component } from 'react';
import { Label } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Label>My Label</Label>
);
}
}
================================================
FILE: examples/macOs/components/link.js
================================================
import React, { Component } from 'react';
import { View, Link } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View background="#efefef" padding="20px" width="300px" direction="row">
<Link color="red">
This is a link
</Link>
<Link marginLeft="auto">
This is another link
</Link>
</View>
);
}
}
================================================
FILE: examples/macOs/components/listView.js
================================================
import React, { Component } from 'react';
import {
ListView,
ListViewHeader,
ListViewFooter,
ListViewSection,
ListViewSectionHeader,
ListViewRow,
ListViewSeparator,
Text
} from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { selected: null };
}
render() {
return (
<ListView background="#f1f2f4" width="240" height="200">
<ListViewHeader>
<Text size="11" color="#696969">Order by name</Text>
</ListViewHeader>
<ListViewSection header={this.renderSectionHeader('My Section')}>
{this.renderItem('Item 1', 'This is the first item.')}
{this.renderItem('Item 2', 'This is the second item.')}
{this.renderItem('Item 3', 'This is the third item.')}
</ListViewSection>
<ListViewSeparator/>
<ListViewSection header={this.renderSectionHeader('My Section 2')}>
{this.renderItem('Item 4', 'This is the fourth item.')}
{this.renderItem('Item 5', 'This is the fifth item.')}
{this.renderItem('Item 6', 'This is the sixth item.')}
</ListViewSection>
<ListViewFooter>
<Text size="11" color="#696969">Status</Text>
</ListViewFooter>
</ListView>
);
}
renderSectionHeader(title) {
return (
<ListViewSectionHeader>
{title}
</ListViewSectionHeader>
);
}
renderItem(title, info) {
return (
<ListViewRow
onClick={() => this.setState({ selected: title })}
background={this.state.selected === title ? '#d8dadc' : null}
>
<svg x="0px" y="0px" width="18" height="12" viewBox="0 0 18 12" style={{ marginRight: '6px' }}>
<path fill="#727476" d="M13.2,0H4.9L0,6.8v3.7C0,11.3,0.7,12,1.5,12h15
c0.8,0,1.5-0.7,1.5-1.5V6.8L13.2,0z M13.8,6.8L12.3,9L5.9,9L4.2,6.8l-3.1,0l4.2-6h7.4l4.2,6L13.8,6.8z"/>
<polygon fill="#C9CBCD" points="13.8,6.8 12.3,9 5.9,9 4.2,6.8 1.2,6.7 5.4,0.8 12.8,0.8
17,6.7 "/>
</svg>
<Text color="#414141" size="13">{info}</Text>
</ListViewRow>
);
}
}
================================================
FILE: examples/macOs/components/pin.js
================================================
import React, { Component } from 'react';
import { Pin, View } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View background="#efeff1" padding="20px">
<Pin
onChange={value => console.log(value)}
length={4}
reveal
/>
</View>
);
}
}
================================================
FILE: examples/macOs/components/progressCircle.js
================================================
import React, { Component } from 'react';
import { ProgressCircle } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<ProgressCircle size={25}/>
);
}
}
================================================
FILE: examples/macOs/components/radio.js
================================================
import React, { Component } from 'react';
import { View, Radio } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View horizontalAlignment="center" direction="column">
<Radio
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
<Radio
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
/>
</View>
);
}
}
================================================
FILE: examples/macOs/components/searchField.js
================================================
import React, { Component } from 'react';
import { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';
export default class extends Component {
handleChange = e => console.log(e.target.value);
render() {
return (
<TitleBar inset>
<Toolbar height="43" horizontalAlignment="right">
<SearchField
placeholder="Search"
defaultValue=""
onChange={this.handleChange}
/>
</Toolbar>
</TitleBar>
);
}
}
================================================
FILE: examples/macOs/components/segmentedControl.js
================================================
import React, { Component } from 'react';
import { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { selected: 1 }
}
render() {
return (
<SegmentedControl box>
{this.renderItems()}
</SegmentedControl>
);
}
renderItems() {
return [
this.renderItem(1, 'Tab 1', <Text>Content 1</Text>),
this.renderItem(2, 'Tab 2', <Text>Content 2</Text>),
this.renderItem(3, 'Tab 3', <Text>Content 3</Text>)
];
}
renderItem(key, title, content) {
return (
<SegmentedControlItem
key={key}
title={title}
selected={this.state.selected === key}
onSelect={() => this.setState({ selected: key })}
>
{content}
</SegmentedControlItem>
);
}
}
================================================
FILE: examples/macOs/components/text.js
================================================
import React, { Component } from 'react';
import { Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Text padding="0 100px" textAlign="center" size="16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</Text>
);
}
}
================================================
FILE: examples/macOs/components/textArea.js
================================================
import React, { Component } from 'react';
import { TextArea } from 'react-desktop/macOs';
export default class extends Component {
handleChange = e => console.log(e.target.value);
render() {
return (
<TextArea
label="My Input"
placeholder="My Input"
defaultValue=""
rows={5}
cols={80}
onChange={this.handleChange}
/>
);
}
}
================================================
FILE: examples/macOs/components/textInput.js
================================================
import React, { Component } from 'react';
import { TextInput } from 'react-desktop/macOs';
export default class extends Component {
handleChange = e => console.log(e.target.value);
render() {
return (
<TextInput
label="My Input"
placeholder="My Input"
defaultValue=""
onChange={this.handleChange}
/>
);
}
}
================================================
FILE: examples/macOs/components/titleBar.js
================================================
import React, { Component } from 'react';
import { View, TitleBar } from 'react-desktop/macOs';
export default class extends Component {
constructor() {
super();
this.state = { isFullscreen: false };
}
render() {
return (
<TitleBar
title="untitled text 5"
controls
isFullscreen={this.state.isFullscreen}
onCloseClick={() => console.log('Close window')}
onMinimizeClick={() => console.log('Minimize window')}
onMaximizeClick={() => console.log('Mazimize window')}
onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })}
/>
);
}
}
================================================
FILE: examples/macOs/components/toolbar.js
================================================
import React, { Component } from 'react';
import { TitleBar, Toolbar, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<TitleBar controls inset>
<Toolbar height="43" horizontalAlignment="center"/>
</TitleBar>
);
}
}
================================================
FILE: examples/macOs/components/toolbarNav.js
================================================
import React, { Component } from 'react';
import { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs';
const circle = (
<svg x="0px" y="0px" width="25px" height="25px" viewBox="0 0 25 25">
<circle cx="12.5" cy="12.5" r="12.5"/>
</svg>
);
const star = (
<svg x="0px" y="0px" width="25px" height="23.8px" viewBox="0 0 25 23.8">
<polygon points="12.5,0 16.4,7.8 25,9.1 18.8,15.2 20.2,23.8 12.5,19.7 4.8,23.8 6.2,15.2 0,9.1 8.6,7.8 "/>
</svg>
);
const polygon = (
<svg x="0px" y="0px" width="25px" height="21.7px" viewBox="0 0 25 21.7">
<polygon points="6.2,21.7 0,10.8 6.2,0 18.8,0 25,10.8 18.8,21.7 "/>
</svg>
);
export default class extends Component {
constructor() {
super();
this.state = { selected: 1 };
}
render() {
return (
<TitleBar>
<Toolbar>
<ToolbarNav>
<ToolbarNavItem
title="Item 1"
icon={circle}
selected={this.state.selected === 1}
onClick={() => this.setState({ selected: 1 })}
/>
<ToolbarNavItem
title="Item 2"
icon={star}
selected={this.state.selected === 2}
onClick={() => this.setState({ selected: 2 })}
/>
<ToolbarNavItem
title="Item 3"
icon={polygon}
selected={this.state.selected === 3}
onClick={() => this.setState({ selected: 3 })}
/>
</ToolbarNav>
</Toolbar>
</TitleBar>
);
}
}
================================================
FILE: examples/macOs/components/view.js
================================================
import React, { Component } from 'react';
import { View, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<View
background="black"
padding="20px"
horizontalAlignment="center"
verticalAlignment="center"
width="200px"
height="100px"
>
<Text color="white">Hello World</Text>
</View>
);
}
}
================================================
FILE: examples/macOs/components/window.js
================================================
import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Window
chrome
height="300px"
padding="10px"
>
<TitleBar title="untitled text 5" controls/>
<Text>Hello World</Text>
</Window>
);
}
}
================================================
FILE: examples/windows/components/button.js
================================================
import React, { Component } from 'react';
import { Button } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29'
};
render() {
return (
<Button push color={this.props.color} onClick={() => console.log('Clicked!')}>
Press me!
</Button>
);
}
}
================================================
FILE: examples/windows/components/checkbox.js
================================================
import React, { Component } from 'react';
import { Checkbox } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Checkbox
color={this.props.color}
theme={this.props.theme}
label="Check me!"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
);
}
}
================================================
FILE: examples/windows/components/label.js
================================================
import React, { Component } from 'react';
import { Label } from 'react-desktop/windows';
export default class extends Component {
render() {
return (
<Label>My Label</Label>
);
}
}
================================================
FILE: examples/windows/components/masterDetailsView.js
================================================
import React, { Component } from 'react';
import {
MasterDetailsView,
MasterDetailsViewItem,
MasterDetailsViewItemMaster,
MasterDetailsViewItemDetails,
Text
} from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<MasterDetailsView color={this.props.color} theme={this.props.theme}>
{this.renderItem('Item 1', 'Content 1')}
{this.renderItem('Item 2', 'Content 2')}
{this.renderItem('Item 3', 'Content 3')}
</MasterDetailsView>
);
}
renderItem(master, details) {
return (
<MasterDetailsViewItem>
<MasterDetailsViewItemMaster push>
{master}
</MasterDetailsViewItemMaster>
<MasterDetailsViewItemDetails background>
<Text padding="20px" color="white">{details}</Text>
</MasterDetailsViewItemDetails>
</MasterDetailsViewItem>
);
}
}
================================================
FILE: examples/windows/components/navPane.js
================================================
import React, { Component } from 'react';
import { NavPane, NavPaneItem, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
constructor() {
super();
this.state = {
selected: 'Item 1'
}
}
render() {
return (
<NavPane openLength={200} push color={this.props.color} theme={this.props.theme}>
{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="light"
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>
);
}
}
}
================================================
FILE: examples/windows/components/progressCircle.js
================================================
import React, { Component } from 'react';
import { ProgressCircle } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29'
};
render() {
return (
<ProgressCircle
color={this.props.color}
size={100}
/>
);
}
}
================================================
FILE: examples/windows/components/radio.js
================================================
import React, { Component } from 'react';
import { View, Radio } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<View horizontalAlignment="center" direction="column" theme={this.props.theme}>
<Radio
color={this.props.color}
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
defaultChecked
/>
<Radio
color={this.props.color}
label="Check me!"
name="radio1"
onChange={(e) => console.log(e.target.value)}
defaultValue="I got checked!"
/>
</View>
);
}
}
================================================
FILE: examples/windows/components/text.js
================================================
import React, { Component } from 'react';
import { Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Text
background={this.props.color}
theme={this.props.theme}
width="100%"
horizontalAlignment="center"
verticalAlignment="center"
padding="100px"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</Text>
);
}
}
================================================
FILE: examples/windows/components/textArea.js
================================================
import React, { Component } from 'react';
import { TextArea } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
handleChange = e => console.log(e.target.value);
render() {
return (
<TextArea
theme={this.props.theme}
color={this.props.color}
background
label="My Input"
placeholder="My Input"
rows={5}
cols={80}
onChange={this.handleChange}
/>
);
}
}
================================================
FILE: examples/windows/components/textInput.js
================================================
import React, { Component } from 'react';
import { TextInput } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
handleChange = e => console.log(e.target.value);
render() {
return (
<TextInput
theme={this.props.theme}
color={this.props.color}
background
label="My Input"
placeholder="My Input"
onChange={this.handleChange}
/>
);
}
}
================================================
FILE: examples/windows/components/titleBar.js
================================================
import React, { Component } from 'react';
import { TitleBar } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
constructor(props) {
super(props);
this.state = { isMaximized: true };
}
close = () => console.log('close');
minimize = () => console.log('minimize');
toggleMaximize = () => this.setState({ isMaximized: !this.state.isMaximized });
render() {
return (
<TitleBar
title="My Windows Application"
controls
isMaximized={this.state.isMaximized}
theme={this.props.theme}
background={this.props.color}
onCloseClick={this.close}
onMinimizeClick={this.minimize}
onMaximizeClick={this.toggleMaximize}
onRestoreDownClick={this.toggleMaximize}
/>
);
}
}
================================================
FILE: examples/windows/components/view.js
================================================
import React, { Component } from 'react';
import { View, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<View
color={this.props.color}
background
padding="20px"
horizontalAlignment="center"
verticalAlignment="center"
width="200px"
height="100px"
>
<Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
</View>
);
}
}
================================================
FILE: examples/windows/components/window.js
================================================
import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/windows';
export default class extends Component {
static defaultProps = {
color: '#cc7f29',
theme: 'light'
};
render() {
return (
<Window
color={this.props.color}
theme={this.props.theme}
chrome
height="300px"
padding="12px"
>
<TitleBar title="My Windows Application" controls/>
<Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
</Window>
);
}
}
================================================
FILE: index.js
================================================
import { default as whichOs, MACOS } from './src/os';
import * as windows from './windows';
import * as macOs from './macOs';
const os = whichOs();
const select = (macOs, windows) => os === MACOS ? macOs : windows;
export { default as os } from './src/os';
export const Box = macOs.Box;
export const Button = select(macOs.Button, windows.Button);
export const Checkbox = select(macOs.Checkbox, windows.Checkbox);
export const Dialog = macOs.Dialog;
export const Label = select(macOs.Label, windows.Label);
export const Link = macOs.Link;
export const ListView = macOs.ListView;
export const ListViewFooter = macOs.ListViewFooter;
export const ListViewHeader = macOs.ListViewHeader;
export const ListViewRow = macOs.ListViewRow;
export const ListViewSection = macOs.ListViewSection;
export const ListViewSectionHeader = macOs.ListViewSectionHeader;
export const ListViewSeparator = macOs.ListViewSeparator;
export const MasterDetailsView = windows.MasterDetailsView;
export const MasterDetailsViewItem = windows.MasterDetailsViewItem;
export const MasterDetailsViewItemMaster = windows.MasterDetailsViewItemMaster;
export const MasterDetailsViewItemDetails = windows.MasterDetailsViewItemDetails;
export const NavPane = windows.NavPane;
export const NavPaneItem = windows.NavPaneItem;
export const Pin = macOs.Pin;
export const ProgressCircle = select(macOs.ProgressCircle, windows.ProgressCircle);
export const Radio = select(macOs.Radio, windows.Radio);
export const SearchField = macOs.SearchField;
export const SegmentedControl = macOs.SegmentedControl;
export const SegmentedControlItem = macOs.SegmentedControlItem;
export const Text = select(macOs.Text, windows.Text);
export const TextInput = select(macOs.TextInput, windows.TextInput);
export const TitleBar = select(macOs.TitleBar, windows.TitleBar);
export const Toolbar = macOs.Toolbar;
export const ToolbarNav = macOs.ToolbarNav;
export const ToolbarNavItem = macOs.ToolbarNavItem;
export const View = select(macOs.View, windows.View);
export const Window = select(macOs.Window, windows.Window);
================================================
FILE: macOs.js
================================================
export { default as Box } from './src/Box/macOs';
export { default as Button } from './src/Button/macOs';
export { default as Checkbox } from './src/Checkbox/macOs';
export { default as Dialog } from './src/Dialog/macOs';
export { default as Label } from './src/Label/macOs';
export { default as Link } from './src/Link/macOs';
export { default as ListView } from './src/ListView/macOs';
export { default as ListViewFooter } from './src/ListView/macOs/Footer';
export { default as ListViewHeader } from './src/ListView/macOs/Header';
export { default as ListViewRow } from './src/ListView/macOs/Row';
export { default as ListViewSection } from './src/ListView/macOs/Section';
export { default as ListViewSectionHeader } from './src/ListView/macOs/Header';
export { default as ListViewSeparator } from './src/ListView/macOs/Separator';
export { default as Pin } from './src/Pin/macOs';
export { default as ProgressCircle } from './src/ProgressCircle/macOs';
export { default as Radio } from './src/Radio/macOs';
export { default as SearchField } from './src/SearchField/macOs';
export { default as SegmentedControl } from './src/SegmentedControl/macOs';
export {
default as SegmentedControlItem
} from './src/SegmentedControl/macOs/Item';
export { default as Text } from './src/Text/macOs';
export { default as TextInput } from './src/TextInput/macOs';
export { default as TextArea } from './src/TextArea/macOs';
export { default as TitleBar } from './src/TitleBar/macOs';
export { default as Toolbar } from './src/Toolbar/macOs';
export { default as ToolbarNav } from './src/Toolbar/macOs/Nav';
export { default as ToolbarNavItem } from './src/Toolbar/macOs/Nav/Item';
export { default as View } from './src/View/macOs';
export { default as Window } from './src/Window/macOs';
================================================
FILE: package.json
================================================
{
"name": "react-desktop",
"author": "Gabriel Bull",
"version": "0.3.9",
"description": "React UI Components for macOS High Sierra and Windows 10",
"main": "./index.js",
"keywords": [
"react",
"react-component",
"electron",
"node-webkit",
"native",
"desktop",
"ui",
"user",
"interface",
"component",
"os x",
"macOS",
"mac",
"windows"
],
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/gabrielbull/react-desktop.git"
},
"scripts": {
"test": "./node_modules/.bin/mocha test",
"eslint": "./node_modules/.bin/eslint ./src ./test",
"prebuild": "rsync -av -delete . build --exclude build --exclude .git --exclude .idea && npm run eslint && npm run test",
"build": "./node_modules/.bin/babel ./build/src --out-dir ./build/src && ./node_modules/.bin/babel ./build/index.js --out-file ./build/index.js && ./node_modules/.bin/babel ./build/macOs.js --out-file ./build/osx.js && ./node_modules/.bin/babel ./build/macOs.js --out-file ./build/macOs.js && ./node_modules/.bin/babel ./build/windows.js --out-file ./build/windows.js",
"playground": "./node_modules/.bin/webpack-dev-server --config ./playground/webpack.config.js --colors --inline --port 3001",
"build-publish": "npm run build && npm publish ./build"
},
"dependencies": {
"radium": "=0.19.6"
},
"peerDependencies": {
"prop-types": "^15.0 || ^16.0",
"react": "^15.0 || ^16.0",
"react-dom": "^15.0 || ^16.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chai": "^4.1.2",
"eslint": "^4.19.1",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.1.0",
"jsdom": "^11.7.0",
"mocha": "^5.0.5",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-addons-test-utils": "^15.6.2",
"react-color": "^2.14.0",
"react-dom": "^16.3.0",
"react-hot-loader": "^4.0.1",
"webpack": "^4.4.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.1"
}
}
================================================
FILE: playground/assets/icons.js
================================================
import * as React from 'react';
export const home = (
<svg width="1792" height="1792" viewBox="0 0 1792 1792">
<path
d="M1472 992v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z"
/>
</svg>
);
export const form = (
<svg width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"
/>
</svg>
);
export const progress = (
<svg width="1792" height="1792" viewBox="0 0 1792 1792">
<path
d="M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z"
/>
</svg>
);
export const listView = (
<svg width="1792" height="1792" viewBox="0 0 1792 1792">
<path
d="M512 1248v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm1280 512v192q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h960q40 0 68 28t28 68zm-1280-1024v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm1280 512v192q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h960q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h960q40 0 68 28t28 68z"
/>
</svg>
);
================================================
FILE: playground/examplesLoader.js
================================================
var fs = require('fs');
var path = require('path');
function scanDir(dir) {
var files = fs.readdirSync(dir);
var filepath;
var subFiles;
var returnValue = [];
for (var i = 0, len = files.length; i < len; ++i) {
if (files[i].charAt(0) !== '.') {
filepath = path.resolve(path.join(dir, files[i]));
if (fs.lstatSync(filepath).isDirectory()) {
subFiles = scanDir(path.join(dir, files[i]));
returnValue.push.apply(returnValue, subFiles);
} else {
returnValue.push({
file: path.join(dir, files[i]),
filepath: filepath
});
}
}
}
return returnValue;
}
module.exports = function(source) {
var dirname = path.join(__dirname, '..');
var files = scanDir(path.join(dirname, 'examples'));
var file;
source = 'let data = {};\n';
for (var i = 0, len = files.length; i < len; ++i) {
file = files[i];
var filename = file.file.replace(dirname, '').replace(/\.js$/, '');
var key = filename.replace(/[\/\-]/g, '_');
source += 'import ' + key + ' from \'.' + filename + '\';\n';
source += 'data[\'' + filename + '\'] = ' + key + ';\n';
}
source += 'export default data;';
return source;
};
================================================
FILE: playground/index.js
================================================
import * as React from 'react';
import { render } from 'react-dom';
import Playground from './playground';
document.title = 'React Desktop Playground';
document.documentElement.style.width = '100%';
document.documentElement.style.height = '100%';
document.body.style.background = 'white';
document.body.style.backgroundImage = 'url(assets/background.jpg)';
document.body.style.backgroundSize = 'cover';
document.body.style.margin = '0';
document.body.style.padding = '0';
document.body.style.width = '100%';
document.body.style.height = '100%';
document.body.style.overflow = 'hidden';
document.body.innerHTML = `
<div id="main" style="width: 100%; height: 100%;"></div>
`;
render(<Playground/>, document.getElementById('main'));
================================================
FILE: playground/playground.js
================================================
import * as React from 'react';
import * as PropTypes from 'prop-types';
import examples from 'examples-loader!examples';
import Sidebar from './ui/sidebar/sidebar';
const styles = {
container: {
width: '100%',
height: '100%',
display: 'flex'
},
sidebar: {
width: '200px'
},
example: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '800px',
height: '100%',
margin: '0 auto'
}
};
class Playground extends React.Component {
static childContextTypes = {
playground: PropTypes.object
};
constructor() {
super();
this.state = {
color: '#cc7f29',
theme: 'light',
example: null
};
this.loadState(false);
}
loadState(mounted = true) {
try {
const state = JSON.parse(localStorage['playground']);
if (mounted) this.setState(state);
else this.state = { ...this.state, ...state };
} catch (err) {}
}
persistState() {
localStorage['playground'] = JSON.stringify(this.state);
}
getChildContext() {
return {
playground: this
};
}
componentDidUpdate() {
this.persistState();
}
showExample = (example) => {
this.setState({ example: example });
};
changeColor = (color) => {
this.setState({ color: color });
this.persistState();
};
changeTheme = (theme) => {
this.setState({ theme: theme });
this.persistState();
};
render() {
let example;
if (this.state.example) {
const Example = examples['/examples/' + this.state.example];
if (Example) {
example = <Example color={this.state.color} theme={this.state.theme}/>;
}
}
return (
<div style={styles.container}>
<Sidebar
onColorChange={this.changeColor}
color={this.state.color}
theme={this.state.theme}
onThemeChange={this.changeTheme}
style={styles.sidebar}
defaultExample={this.state.example}
/>
<div style={styles.example}>
{example}
</div>
</div>
);
}
}
export default Playground;
================================================
FILE: playground/ui/examples/examples.js
================================================
import * as React from 'react';
import * as PropTypes from 'prop-types';
const styles = {
list: {
margin: '0px',
padding: '0px',
listStyle: 'none'
},
title: {
display: 'block',
color: 'white',
fontFamily: 'sans-serif',
fontSize: '18px',
lineHeight: '1.4em',
fontWeight: 'normal',
margin: '20px 10px 10px',
padding: '0px 0px 10px',
borderBottom: '1px solid rgba(255, 255, 255, .2)'
},
subtitle: {
fontSize: '15px',
borderBottom: 'none',
padding: '0px',
margin: '20px 10px 10px',
},
item: {
display: 'block',
color: 'white',
fontFamily: 'sans-serif',
fontSize: '12px',
lineHeight: '1.2em',
fontWeight: 'normal',
margin: 0,
padding: '2px 10px',
cursor: 'pointer'
},
itemSelect: {
color: '#6FFFFD',
fontWeight: 'bold'
}
};
class Examples extends React.Component {
static contextTypes = {
playground: PropTypes.object
};
static propTypes = {
defaultExample: PropTypes.string,
list: PropTypes.object
};
constructor(props, ...args) {
super(props, ...args);
this.state = {
selected: props.defaultExample
}
};
click = (category, key) => {
key = (category + '/' + key).replace(/^\//, '');
this.context.playground.showExample(key);
this.setState({ selected: key });
};
render() {
return (
<div>
{this.renderItem(this.props.list)}
</div>
);
}
renderItem(item, path = '', subtitle = false) {
let finalChildren = [];
for (let prop in item) {
if (item.hasOwnProperty(prop)) {
if (typeof item[prop] === 'object') {
let children = this.renderItem(item[prop], path ? path + '/' + prop : prop, true);
if (children[0] && children[0].type === 'ul') {
finalChildren.push(
<ul style={styles.list} key={prop}>
<li style={styles.list}>
<span style={{ ...styles.title, ...(subtitle ? styles.subtitle : {}) }}>{prop}</span>
{children}
</li>
</ul>
);
} else {
finalChildren.push(
<ul style={styles.list} key={prop}>
<li style={styles.list}>
<span style={{ ...styles.title, ...(subtitle ? styles.subtitle : {}) }}>{prop}</span>
<ul style={styles.list}>
{children}
</ul>
</li>
</ul>
);
}
} else {
const selected = path + '/' + prop === this.state.selected;
finalChildren.push(
<li style={styles.list} key={prop}>
<a
key={path + '/' + prop}
style={{ ...styles.item, ...(selected ? styles.itemSelect : {}) }}
onClick={() => this.click(path, prop)}
>
{prop}
</a>
</li>
);
}
}
}
return finalChildren;
}
}
export default Examples;
================================================
FILE: playground/ui/sidebar/logo.js
================================================
import * as React from 'react';
class Logo extends React.Component {
render() {
return (
<svg x="0px" y="0px" viewBox="0 0 302.6 49.2" width="116" height="20" style={{ padding: '10px 10px 0 10px' }}>
<g>
<path
fill="#ffffff" d="M85.3,37.9c-5-9.4-5.8-10.8-7.1-11.2h-4.4v11.2h-3.6V11.9c2.5-0.1,5.3-0.2,8-0.2c5,0,8.1,2.8,8.1,6.8
c0,4.1-2.9,6.2-4.6,7c1.5,0.8,2.4,2.1,7.9,12.5H85.3z M76.6,14.6h-2.8v9.2h5.7c1.7-0.7,3.1-2.6,3.1-4.6
C82.6,16.3,80.5,14.6,76.6,14.6z"
/>
<path
fill="#ffffff" d="M107,28.7H94.4c0,3.6,2,6.7,6,6.7c2.2,0,4.2-0.5,6.3-1.5l-0.2,2.9c-2,1-4.1,1.5-6.8,1.5
c-5.4,0-8.6-4.2-8.6-9.7c0-6.2,3.9-10.3,8.8-10.3c4.7,0,7.3,3.4,7.3,7.7C107.2,26.8,107.1,28.1,107,28.7z M99.4,21.1
c-2.7,0-4.4,2.6-4.8,5.1h9.4C104,23.3,102.2,21.1,99.4,21.1z"
/>
<path
fill="#ffffff" d="M126.1,37.9c-0.5,0.2-1.3,0.3-2,0.3c-1.5,0-2.6-0.7-2.9-2.3H121c-1.3,1.3-3.2,2.4-5.8,2.4
c-3,0-5.3-2-5.3-4.9c0-3.5,3-6.7,11-7.1V24c0-1.7-1-2.8-2.8-2.8c-1.9,0-4.4,0.9-6.5,2.3l-0.3-2.6c2.1-1.5,4.8-2.5,7.9-2.5
c3.1,0,5.2,1.8,5.2,4.9c0,1.2-0.1,8.9-0.1,9.7c0,1.5,0.7,2.3,2.2,2.4L126.1,37.9z M120.8,28.8c-6.2,0.3-7.6,2.6-7.6,4.1
c0,1.6,1.1,2.7,3.3,2.7c1.7,0,3.4-0.8,4.4-1.7V28.8z"
/>
<path
fill="#ffffff" d="M143,22.7c-1.3-0.7-3.2-1.4-5.1-1.4c-3.4,0-5.8,3.1-5.8,6.8c0,4.1,2.1,7.2,6,7.2c2,0,3.7-0.6,5.3-1.3
l-0.2,3c-1.8,0.9-3.8,1.3-5.9,1.3c-5.5,0-8.7-4.1-8.7-9.6c0-6,3.9-10.3,9.5-10.3c2.2,0,3.9,0.6,5.3,1.4L143,22.7z"
/>
<path
fill="#ffffff" d="M152.5,38.3c-3.1,0-5-2-5-4.8c0-1.2,0-6.7,0-10.3v-1.6h-1.7v-1.4l4.6-5.1h0.4v3.7h6.1v2.8h-6.1
c0,0,0,7.4,0,10.7c0,2,1,3,3,3c1,0,2.1-0.1,3.3-0.5v2.5C155.8,37.9,154.2,38.3,152.5,38.3z"
/>
<path
fill="#ffffff" d="M177.4,38c-2.4,0-5.4,0-7.7-0.1V11.9c2.6-0.1,6-0.2,8.6-0.2c8,0,14.2,4.6,14.2,12.3
C192.5,33.2,186.2,38,177.4,38z M177.3,14.6h-4V35h4.7c6.1,0,10.8-3.5,10.8-10.2C188.8,18.1,184.3,14.6,177.3,14.6z"
/>
<path
fill="#ffffff" d="M211.6,28.7H199c0,3.6,2,6.7,6,6.7c2.2,0,4.2-0.5,6.3-1.5l-0.2,2.9c-2,1-4.1,1.5-6.8,1.5
c-5.4,0-8.6-4.2-8.6-9.7c0-6.2,3.9-10.3,8.8-10.3c4.7,0,7.3,3.4,7.3,7.7C211.8,26.8,211.7,28.1,211.6,28.7z M204,21.1
c-2.7,0-4.4,2.6-4.8,5.1h9.4C208.6,23.3,206.8,21.1,204,21.1z"
/>
<path
fill="#ffffff" d="M219.7,38.3c-2.2,0-3.9-0.5-5.3-1.5l0.5-2.9c1.3,1,3.3,1.6,5.2,1.6c1.7,0,3.6-0.7,3.6-2.6
c0-3.8-8.6-3-8.6-8.9c0-3.7,3.3-5.6,6.9-5.6c1.7,0,3.4,0.5,4.6,1.1l-0.5,2.8c-1.3-0.6-3-1.1-4.6-1.1c-1.6,0-3.1,0.8-3.1,2.3
c0,3.8,8.7,3,8.7,8.8C227.2,36.5,223.5,38.3,219.7,38.3z"
/>
<path
fill="#ffffff"
d="M243.1,37.9l-7.1-9.7h-0.8v9.7h-3.4V8h3.4v18.9c1.2-1.2,7.4-8,7.4-8h4.6l-8.4,8l8.4,11.1H243.1z"
/>
<path
fill="#ffffff" d="M255.5,38.3c-3.1,0-5-2-5-4.8c0-1.2,0-6.7,0-10.3v-1.6h-1.7v-1.4l4.6-5.1h0.4v3.7h6.1v2.8h-6.1
c0,0,0,7.4,0,10.7c0,2,1,3,3,3c1,0,2.1-0.1,3.3-0.5v2.5C258.9,37.9,257.3,38.3,255.5,38.3z"
/>
<path
fill="#ffffff" d="M270.8,38.3c-5.3,0-8.7-4.3-8.7-9.7c0-5.8,3.8-10.2,9.5-10.2c5.3,0,8.7,4.3,8.7,9.7
C280.3,33.9,276.6,38.3,270.8,38.3z M271.2,21.2c-3.4,0-5.6,3.1-5.6,6.9c0,3.9,2.2,7.4,5.7,7.4c3.4,0,5.6-3.1,5.6-7
C276.9,24.7,274.8,21.2,271.2,21.2z"
/>
<path
fill="#ffffff" d="M291.3,38.2c-1.2,0-2.5-0.3-3.3-0.7v10.2h-3.4V19l3.3-0.3l-0.1,2.1h0.2c1.3-1.4,3.3-2.4,5.3-2.4
c4.9,0,7.9,4.1,7.9,9.6C301.2,34,297.3,38.2,291.3,38.2z M292.2,21.3c-1.6,0-3.1,0.5-4.1,1.3v11.7c1,0.7,2.5,1.1,3.8,1.1
c3.6,0,5.9-3,5.9-6.9C297.7,24.1,295.7,21.3,292.2,21.3z"
/>
</g>
<g>
<rect
x="19.3" y="2.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 12.5509 -15.1816)" fill="#9B61A8"
width="10.7" height="10.7"
/>
<rect
x="10.7" y="4.5" transform="matrix(0.9659 0.2588 -0.2588 0.9659 3.0954 -3.8265)" fill="#38C4E8"
width="10.7" height="10.7"
/>
<rect
x="4.5" y="10.7" transform="matrix(0.9659 -0.2588 0.2588 0.9659 -3.8265 3.0954)" fill="#2083C6"
width="10.7" height="10.7"
/>
<rect
x="2.2" y="19.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.1816 12.5509)" fill="#0CA796"
width="10.7" height="10.7"
/>
<rect
x="4.5" y="27.8" transform="matrix(0.2588 -0.9659 0.9659 0.2588 -24.6983 34.0568)" fill="#4BBFAE"
width="10.7" height="10.7"
/>
<rect
x="10.7" y="34" transform="matrix(-0.2588 -0.9659 0.9659 -0.2588 -17.7764 65.0793)" fill="#5EC2A7"
width="10.7" height="10.7"
/>
<rect
x="19.3" y="36.3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12.5509 88.4847)" fill="#F6CE2D"
width="10.7" height="10.7"
/>
<rect
x="27.8" y="34" transform="matrix(-0.9659 -0.2588 0.2588 -0.9659 54.9285 85.9511)" fill="#9B61A8"
width="10.7" height="10.7"
/>
<rect
x="27.8" y="34" transform="matrix(-0.9659 -0.2588 0.2588 -0.9659 54.9285 85.9511)" fill="#FDD463"
width="10.7" height="10.7"
/>
<rect
x="34" y="27.8" transform="matrix(-0.9659 0.2588 -0.2588 -0.9659 85.9511 54.9285)" fill="#F99E3E"
width="10.7" height="10.7"
/>
<rect
x="36.3" y="19.3" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 88.4847 12.5509)" fill="#F6873C"
width="10.7" height="10.7"
/>
<rect
x="34" y="10.7" transform="matrix(-0.2588 0.9659 -0.9659 -0.2588 65.0793 -17.7764)" fill="#F47931"
width="10.7" height="10.7"
/>
<polygon fill="#EF383A" points="36.9,3.3 26.6,6.1 29.8,5.2 32.2,7.6 28.1,11.6 29.3,16.4 39.7,13.6 "/>
</g>
</svg>
);
}
}
export default Logo;
================================================
FILE: playground/ui/sidebar/sidebar.js
================================================
import * as React from 'react';
import ColorPicker from 'react-color';
import examples from 'examples-loader!examples';
import Examples from '../examples/examples';
import Logo from './logo';
const styles = {
sidebar: {
backgroundColor: 'rgba(0,0,0,.8)',
height: '100vh',
overflow: 'scroll',
userSelect: 'none',
WebkitUserSelect: 'none',
cursor: 'default'
}
};
class Sidebar extends React.Component {
constructor(...args) {
super(...args);
this.state = {
example: null,
color: this.props.color,
displayColorPicker: false,
theme: this.props.theme
};
}
handleClick = () => {
this.setState({ displayColorPicker: !this.state.displayColorPicker });
};
changeColor = (color) => {
this.setState({ color: color.hex });
this.props.onColorChange(color.hex);
};
changeTheme = () => {
this.state.theme = this.state.theme === 'light' ? 'dark' : 'light';
this.props.onThemeChange(this.state.theme);
};
render() {
const isChecked = this.state.theme === 'dark';
let colorPicker;
if (this.state.displayColorPicker) {
console.log(this.state.color);
colorPicker = (
<div style={{ position: 'absolute', top: '140px', left: '10px' }}>
<ColorPicker
onChangeComplete={this.changeColor}
color={this.state.color}
type="sketch"
/>
</div>
)
}
return (
<div style={{ ...styles.sidebar, ...this.props.style }}>
<Logo/>
<h1
style={{
margin: 0,
padding: '10px',
fontFamily: 'sans-serif',
color: 'white',
fontSize: '16px',
letterSpacing: '0.7px',
textTransform: 'uppercase',
fontWeight: 'normal'
}}
>
Playground
</h1>
<br/>
<label style={{ margin: '10px', fontFamily: 'sans-serif', color: 'white', fontSize: '11px', clear: 'both' }}>
<input type="checkbox" onChange={this.changeTheme.bind(this)} defaultChecked={isChecked}/>
Dark Theme
</label>
<div style={{ margin: '10px' }}>
<a
style={{
height: '16px',
width: '16px',
display: 'block',
border: '2px solid rgba(255, 255, 255, 1)',
borderRadius: '3px',
backgroundColor: this.state.color,
float: 'left'
}}
onClick={this.handleClick}
/>
<span style={{ margin: '10px', fontFamily: 'sans-serif', color: 'white', fontSize: '11px' }}>
Color
</span>
{colorPicker}
</div>
{this.renderExamples()}
</div>
);
}
renderExamples() {
let list = {};
for (var prop in examples) {
if (examples.hasOwnProperty(prop)) {
let path = prop.replace(/^\/examples\//, '').split('/');
let currentList = list;
path.forEach((item, index) => {
if (index === path.length - 1) currentList[item] = examples[prop];
else if (typeof currentList[item] === 'undefined') currentList[item] = {};
currentList = currentList[item];
});
}
}
return <Examples defaultExample={this.props.defaultExample} list={list}/>;
}
}
export default Sidebar;
================================================
FILE: playground/webpack.config.js
================================================
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'index.js'),
output: {
path: path.join(__dirname),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
filename: 'index.js',
contentBase: './playground'
},
devtool: 'source-map',
resolveLoader: {
alias: {
'examples-loader': path.join(__dirname, 'examplesLoader')
}
},
resolve: {
alias: {
'react-desktop': path.join(__dirname, '..'),
'examples': path.join(__dirname, '..', 'index.js'),
}
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin()
]
};
================================================
FILE: src/Box/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './styles/10.11';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import Margin, { marginPropTypes } from '../../style/margin';
import Padding, { paddingPropTypes } from '../../style/padding';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import { backgroundPropTypes } from '../../style/background/macOs';
import { convertColor, darkenColor } from '../../color';
import Text from '../../Text/macOs';
@Dimension()
@Margin()
@Padding()
@Alignment()
@Hidden()
class Box extends Component {
static propTypes = {
...backgroundPropTypes,
...dimensionPropTypes,
...marginPropTypes,
...paddingPropTypes,
...alignmentPropTypes,
...hiddenPropTypes,
label: PropTypes.string
};
static styleRefs = {
padding: 'box',
dimension: 'box'
};
render() {
let { children, style, background, label, ...props } = this.props;
const hasSegmentedControls = false;
let componentStyle = { ...styles.box, ...style };
if (hasSegmentedControls) {
componentStyle = { ...styles.segmentedControls };
}
if (background) {
background = convertColor(background);
componentStyle = {
...componentStyle,
backgroundColor: background,
borderTopColor: darkenColor(background, 0.3),
borderLeftColor: darkenColor(background, 0.24),
borderRightColor: darkenColor(background, 0.24),
borderBottomColor: darkenColor(background, 0.19)
};
}
if (label) {
return (
<div style={styles.wrapper} {...props}>
<Text margin="0 0 1px 7px" size={11}>
{label}
</Text>
<div ref="box" style={componentStyle}>
{children}
</div>
</div>
);
}
componentStyle = { ...styles.wrapper, ...componentStyle };
return (
<div ref="box" style={componentStyle} {...props}>
{children}
</div>
);
}
}
export default Box;
================================================
FILE: src/Box/macOs/styles/10.11.js
================================================
export default {
wrapper: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
flex: '1'
},
box: {
backgroundColor: 'rgba(0, 0, 0, .04)',
borderWidth: '1px',
borderStyle: 'solid',
borderTopColor: 'rgba(0, 0, 0, .07)',
borderLeftColor: 'rgba(0, 0, 0, .037)',
borderRightColor: 'rgba(0, 0, 0, .037)',
borderBottomColor: 'rgba(0, 0, 0, .026)',
borderRadius: '4px',
position: 'relative',
padding: '23px 18px 22px 18px'
},
segmentedControls: {
marginTop: '10px',
paddingTop: '33px'
}
};
================================================
FILE: src/Button/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../windowFocus';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import FontSize, { fontSizePropTypes } from '../../style/fontSize';
import Padding, { paddingPropTypes, removeDuplicatePaddingProps } from '../../style/padding';
import Margin, { marginPropTypes } from '../../style/margin';
import styles from './styles/10.11';
import Radium from 'radium';
@WindowFocus()
@Padding()
@Margin()
@Hidden()
@FontSize()
@Radium
class Button extends Component {
static propTypes = {
...hiddenPropTypes,
...fontSizePropTypes,
...paddingPropTypes,
...marginPropTypes,
type: PropTypes.string,
color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
onClick: PropTypes.func,
onEnter: PropTypes.func,
disabled: PropTypes.bool
};
componentDidMount() {
if (window && this.props.onEnter) {
window.addEventListener('keyup', this.handleKeyUp);
}
}
componentWillUnmount() {
if (window && this.props.onEnter) {
window.removeEventListener('keyup', this.handleKeyUp);
}
}
handleKeyUp = e => {
if (e.keyCode === 13) {
if (this.props.onEnter && !this.props.disabled) this.props.onEnter(e);
}
};
render() {
let { style, type, children, color, onClick, isWindowFocused, disabled, ...props } = this.props;
delete props.onEnter;
let componentStyle = { ...styles.button };
if (!disabled && color === 'blue' && isWindowFocused) {
componentStyle = { ...componentStyle, ...styles.blue };
} else if (disabled) {
componentStyle = { ...componentStyle, opacity: '.5' };
}
componentStyle = { ...componentStyle, ...style };
return (
<button
ref="element"
type={type || 'button'}
onClick={onClick}
style={removeDuplicatePaddingProps(componentStyle, this.props)}
disabled={disabled}
{...props}
>
{children}
</button>
);
}
}
export default Button;
================================================
FILE: src/Button/macOs/styles/10.11.js
================================================
export default {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
backgroundColor: '#ffffff',
outline: 'none',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '5px',
borderTopColor: '#c8c8c8',
borderBottomColor: '#acacac',
borderLeftColor: '#c2c2c2',
borderRightColor: '#c2c2c2',
boxShadow: '0 1px rgba(0, 0, 0, .039)',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: '13px',
paddingRight: '13px',
lineHeight: '19px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
fontSize: '13px',
':active': {
backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)',
borderTopColor: '#247fff',
borderBottomColor: '#003ddb',
borderLeftColor: '#125eed',
borderRightColor: '#125eed',
color: 'rgba(255, 255, 255, .9 )'
}
},
blue: {
backgroundImage: '-webkit-linear-gradient(top, #6cb3fa 0%, #087eff 100%)',
borderTopColor: '#4ca2f9',
borderBottomColor: '#015cff',
borderLeftColor: '#267ffc',
borderRightColor: '#267ffc',
color: 'rgba(255, 255, 255, .9)',
':active': {
backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)',
borderTopColor: '#247fff',
borderBottomColor: '#003ddb',
borderLeftColor: '#125eed',
borderRightColor: '#125eed',
color: 'rgba(255, 255, 255, .9 )'
}
}
};
================================================
FILE: src/Button/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { colorPropTypes, colorContextTypes } from '../../style/color/windows';
import { ThemeContext, themePropTypes } from '../../style/theme/windows';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Radium from 'radium';
import { darkenColor } from '../../color';
import styles from './styles/windows10';
@Hidden()
@ThemeContext()
@Radium
class Button extends Component {
static propTypes = {
...hiddenPropTypes,
...colorPropTypes,
...themePropTypes,
type: PropTypes.string,
push: PropTypes.bool,
onClick: PropTypes.func
};
static contextTypes = {
...colorContextTypes
};
render() {
let { style, type, children, color, push, onClick, ...props } = this.props;
let componentStyle = { ...styles.button, ...style };
if (color) {
color = color === true ? this.context.color : color;
styles.colorButton = {
...styles.colorButton,
borderColor: color,
backgroundColor: color,
':hover': {
...styles.colorButton[':hover'],
borderColor: darkenColor(color, .35)
},
':active': {
...styles.colorButton[':active'],
borderColor: darkenColor(color, .35),
backgroundColor: darkenColor(color, .35)
}
};
componentStyle = { ...componentStyle, ...styles.colorButton };
}
if (push) {
componentStyle[':active'] = { ...componentStyle[':active'], ...styles.pushTransform };
}
return (
<button
ref="element"
type={type || 'button'}
onClick={onClick}
style={componentStyle}
{...props}
>
{children}
</button>
);
}
}
export default Button;
================================================
FILE: src/Button/windows/styles/windows10.js
================================================
export default {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
backgroundColor: '#cccccc',
outline: 'none',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: '#cccccc',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: '32px',
paddingRight: '32px',
lineHeight: '28px',
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '15px',
color: '#000000',
':hover': {
color: '#000000',
borderColor: '#7a7a7a'
},
':active': {
color: '#000000',
borderColor: '#999999',
backgroundColor: '#999999'
}
},
colorButton: {
color: '#ffffff',
borderColor: '#0078d7',
backgroundColor: '#0078d7',
':hover': {
borderColor: '#004e8c'
},
':active': {
borderColor: '#004e8c',
backgroundColor: '#004e8c'
}
},
pushTransform: {
transform: 'scale(0.97)',
transition: 'transform .1s ease-in'
}
};
================================================
FILE: src/Checkbox/macOs/Checkmark.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Radium from 'radium';
import styles from './styles/10.11';
@Radium
class Checkmark extends Component {
static propTypes = {
show: PropTypes.bool,
color: PropTypes.string,
shadowColor: PropTypes.string
};
static defaultProps = {
color: '#FFFFFF'
};
render() {
const { color, shadowColor } = this.props;
let style = { ...styles.checkmark };
style.opacity = '0';
style.transform = 'scale(0)';
style.transition = 'all 0.5s';
if (this.props.show) {
style.opacity = '1';
style.transform = 'scale(1)';
}
return (
<div style={style}>
<svg viewBox="0 0 285 283.4" style={styles.svg}>
<path
fill={color}
d="M101.2,215.7L227.5,20.6c0,0,20.7-31.9,44.4-16.2c25.4,16.8,6.1,41,6.1,41L134.5,271.9c0,0-8.8,11.5-23.9,11.5
s-29.2-13.3-29.2-13.3L2.7,175.4c0,0-9.4-17.3,6.8-27.4c19.7-12.3,34.6,2.8,34.6,2.8L101.2,215.7z"
/>
</svg>
<svg viewBox="0 0 285 283.4" style={styles.svgShadow}>
<path
fill={shadowColor}
d="M101.2,215.7L227.5,20.6c0,0,20.7-31.9,44.4-16.2c25.4,16.8,6.1,41,6.1,41L134.5,271.9c0,0-8.8,11.5-23.9,11.5
s-29.2-13.3-29.2-13.3L2.7,175.4c0,0-9.4-17.3,6.8-27.4c19.7-12.3,34.6,2.8,34.6,2.8L101.2,215.7z"
/>
</svg>
</div>
);
}
}
export default Checkmark;
================================================
FILE: src/Checkbox/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../windowFocus';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Radium, { getState } from 'radium';
import styles from './styles/10.11';
import Checkmark from './Checkmark';
import Text from '../../Text/macOs';
import ValueRef from '../../ValueRef';
@ValueRef()
@WindowFocus()
@Hidden()
@Radium
class Checkbox extends Component {
static propTypes = {
...hiddenPropTypes,
label: PropTypes.string,
onChange: PropTypes.func
};
constructor(props) {
super();
this.state = {
checked: !!props.defaultChecked === true,
transition: true
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.isWindowFocused !== this.props.isWindowFocused) {
this.setState({ transition: false });
}
}
componentDidUpdate() {
if (!this.state.transition) {
setTimeout(() => this.setState({ transition: true }), 0);
}
}
onChange = event => {
this.setState({ checked: event.target.checked });
if (this.props.onChange) {
this.props.onChange(event);
}
};
render() {
let { style, label, isWindowFocused, ...props } = this.props;
const { transition } = this.state;
let componentStyle = { ...styles.checkbox, ...style };
let labelStyle = styles.label;
let checkMarkColor = '#FFFFFF';
let shadowColor = '#0050a5';
if (this.state.checked) {
if (isWindowFocused) {
componentStyle = {
...componentStyle,
...styles['checkbox:checked']
};
if (!transition) componentStyle.transition = 'none';
} else {
componentStyle = {
...componentStyle,
...styles['checkbox:checked:unfocused']
};
checkMarkColor = '#404040';
shadowColor = '#FFFFFF';
}
}
if (getState(this.state, null, ':active')) {
if (this.state.checked) {
componentStyle = {
...componentStyle,
...styles['checkbox:checked:active']
};
shadowColor = '#001d99';
} else {
componentStyle = {
...componentStyle,
...styles['checkbox:active']
};
}
}
return (
<div style={styles.container}>
<label style={labelStyle}>
<div style={styles.inputWrapper}>
<input
ref="element"
type="checkbox"
{...props}
style={componentStyle}
onChange={this.onChange}
/>
<Checkmark
show={this.state.checked}
color={checkMarkColor}
shadowColor={shadowColor}
/>
</div>
<Text style={{ display: 'inline' }}>{label}</Text>
</label>
</div>
);
}
}
export default Checkbox;
================================================
FILE: src/Checkbox/macOs/styles/10.11.js
================================================
export default {
container: {
display: 'flex'
},
label: {
display: 'flex',
height: '20px',
position: 'relative',
':hover': {},
':active': {}
},
inputWrapper: {
position: 'relative',
marginRight: '3px',
paddingTop: '1px'
},
checkbox: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppearance: 'none',
appearance: 'none',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#b8b8b8',
borderRadius: '3px',
backgroundColor: '#ffffff',
padding: '6px',
margin: '0 1px',
boxShadow: 'inset 0 1px 0 0 rgba(224, 224, 224, .4)',
transition: 'all 0.4s',
':focus': {
outline: 'none'
}
},
'checkbox:active': {
borderColor: '#a4a4a4',
backgroundColor: '#f0f0f0',
boxShadow: 'inset 0 0 0 1px rgba(117, 117, 117, .35)',
transition: 'all 0.4s'
},
'checkbox:checked': {
backgroundColor: '#3b99fc',
boxShadow: 'none',
borderColor: '#2c91fc',
transition: 'all 0.4s'
},
'checkbox:checked:unfocused': {
backgroundColor: '#ffffff',
boxShadow: 'none',
borderColor: '#b8b8b8',
transition: 'none'
},
'checkbox:checked:active': {
backgroundColor: '#0080f6',
borderColor: '#006adc',
boxShadow: 'inset 0 0 0 1px rgba(19, 68, 119, .22)',
transition: 'all 0.4s'
},
checkmark: {
position: 'absolute',
top: '4px',
left: '4px',
width: '8px',
height: '8px'
},
svg: {
zIndex: '2',
position: 'absolute',
top: '0px',
left: '0px',
height: '8px'
},
svgShadow: {
zIndex: '1',
position: 'absolute',
top: '1.5px',
left: '0px',
opacity: '.37',
height: '8px',
filter: 'blur(.5px)'
}
};
================================================
FILE: src/Checkbox/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ColorContext, colorPropTypes, colorContextTypes } from '../../style/color/windows';
import { ThemeContext, themePropTypes, themeContextTypes } from '../../style/theme/windows';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Radium, { getState } from 'radium';
import styles from './styles/windows10';
import ValueRef from '../../ValueRef';
@ValueRef()
@Hidden()
@ColorContext()
@ThemeContext()
@Radium
class Checkbox extends Component {
static propTypes = {
...hiddenPropTypes,
...colorPropTypes,
...themePropTypes,
label: PropTypes.string,
onChange: PropTypes.func
};
static contextTypes = {
...colorContextTypes,
...themeContextTypes
};
constructor(props) {
super();
this.state = {
checked: !!props.defaultChecked === true
};
}
handleChange = event => {
this.setState({ checked: event.target.checked });
if (this.props.onChange) {
this.props.onChange(event);
}
};
render() {
let { style, label, color, ...props } = this.props;
let componentStyle = { ...styles.checkbox };
let checkedStyle = { display: 'none' };
let textStyle = { ...styles.text };
if (this.context.theme === 'dark') {
componentStyle = { ...componentStyle, ...styles.checkboxDark };
textStyle = { ...textStyle, ...styles.textDark };
}
if (this.state.checked) {
checkedStyle = styles.svg;
componentStyle = {
...componentStyle,
...(this.context.theme === 'dark' ? styles['checkboxDark:checked'] : styles['checkbox:checked'])
};
color = color ? color : this.context.color;
componentStyle = {
...componentStyle,
backgroundColor: color,
borderColor: color
};
}
if (getState(this.state, null, ':active')) {
componentStyle = {
...componentStyle,
...(this.context.theme === 'dark' ? styles['checkboxDark:active'] : styles['checkbox:active'])
};
} else if (getState(this.state, null, ':hover')) {
componentStyle = {
...componentStyle,
...(this.context.theme === 'dark' ? styles['checkboxDark:hover'] : styles['checkbox:hover'])
};
}
return (
<div style={{ ...styles.container, ...style }}>
<label style={styles.label}>
<div style={styles.inputWrapper}>
<input
ref="element"
type="checkbox"
{...props}
style={componentStyle}
onChange={this.handleChange}
/>
<svg x="0px" y="0px" viewBox="0 0 6.4 6.4" style={checkedStyle}>
<polygon fill="#fff" points="0,3.3 2.2,5.5 6.4,1.23 6.1,0.9 2.2,4.8 0.3,2.9 "/>
</svg>
</div>
<span style={textStyle}>
{label}
</span>
</label>
</div>
);
}
}
export default Checkbox;
================================================
FILE: src/Checkbox/windows/styles/windows10.js
================================================
export default {
container: {
display: 'flex',
marginBottom: '22px'
},
label: {
display: 'flex',
alignItems: 'center',
position: 'relative',
':hover': {},
':active': {}
},
text: {
WebkitUserSelect: 'none',
userSelect: 'none',
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '15px',
marginTop: '1px',
color: '#000000'
},
textDark: {
color: '#ffffff'
},
inputWrapper: {
position: 'relative',
marginRight: '3px',
paddingTop: '1px'
},
checkbox: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppearance: 'none',
appearance: 'none',
outline: 'none',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: 'rgba(0, 0, 0, .8)',
padding: '8px',
color: '#fff',
verticalAlign: 'bottom',
marginRight: '6px',
':focus': {
outline: 'none'
}
},
checkboxDark: {
borderColor: 'rgba(255, 255, 255, .82)',
},
'checkbox:active': {
borderColor: 'rgba(0, 0, 0, 0)',
backgroundColor: 'rgba(0, 0, 0, .57)'
},
'checkbox:hover': {
borderColor: 'rgba(0, 0, 0, 1)'
},
'checkbox:checked': {
backgroundColor: '#007CD1',
borderColor: '#007CD1'
},
'checkboxDark:active': {
borderColor: 'rgba(255, 255, 255, 0)',
backgroundColor: 'rgba(255, 255, 255, .63)'
},
'checkboxDark:hover': {
borderColor: 'rgba(255, 255, 255, 1)'
},
'checkboxDark:checked': {
backgroundColor: '#007CD1',
borderColor: '#007CD1'
},
svg: {
position: 'absolute',
top: '6px',
left: '5px',
color: '#fff',
height: '16px'
}
};
================================================
FILE: src/Dialog/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Margin, { marginPropTypes } from '../../style/margin';
import Alignment, {
alignmentPropTypes,
removeAlignmentProps
} from '../../style/alignment';
import Text from '../../Text/macOs';
import styles from './style/10.11';
@Margin({
marginTop: '17px',
marginBottom: '19px',
marginLeft: '20px',
marginRight: '20px'
})
class Dialog extends Component {
static propTypes = {
...marginPropTypes,
...alignmentPropTypes,
icon: PropTypes.element,
title: PropTypes.string,
message: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
buttons: PropTypes.array
};
isLast(...next) {
let isLast = false;
for (let i = 0, len = next.length; i < len; ++i) {
if (next[i]) isLast = false;
}
return isLast;
}
render() {
let {
icon,
style,
title,
message,
children,
buttons,
...props
} = this.props;
props = removeAlignmentProps(props);
return (
<div style={{ ...styles.container, ...style }} {...props}>
{this.renderIcon(icon)}
<div style={styles.contentContainer}>
{this.renderTitle(title, this.isLast(message, children, buttons))}
{this.renderMessage(message, this.isLast(children, buttons))}
{this.renderChildren(children, this.isLast(buttons))}
{this.renderButtons(buttons)}
</div>
</div>
);
}
renderIcon(icon) {
if (icon) {
return (
<div style={styles.icon} onMouseDown={e => e.preventDefault()}>
{icon}
</div>
);
}
return null;
}
renderTitle(title, isLast) {
const style = styles.title;
if (isLast) delete style.marginBottom;
if (title)
return (
<Text bold style={style}>
{title}
</Text>
);
return null;
}
renderMessage(message, isLast) {
const style = styles.message;
if (isLast) delete style.marginBottom;
if (message) return <Text style={style}>{message}</Text>;
return null;
}
renderChildren(children, isLast) {
const style = styles.content;
if (isLast) delete style.marginBottom;
if (children)
return Alignment(<div style={style}>{children}</div>, {
...this.props,
layout: 'vertical'
});
return null;
}
renderButtons(buttons) {
if (buttons) {
return (
<div style={styles.buttons}>
{buttons.map((button, index) => (
<div style={styles.buttonContainer} key={index}>
{button}
</div>
))}
</div>
);
}
return null;
}
}
export default Dialog;
================================================
FILE: src/Dialog/macOs/style/10.11.js
================================================
export default {
container: {
MozUserSelect: 'none',
WebkitUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
WebkitUserDrag: 'none',
userDrag: 'none',
WebkitTouchCallout: 'none',
display: 'flex',
position: 'relative'
},
icon: {
width: '67px',
marginRight: '20px',
display: 'flex',
justifyContent: 'center',
},
contentContainer: {
flex: 1
},
title: {
marginBottom: '5px'
},
message: {
marginBottom: '16px'
},
content: {
display: 'flex',
flexDirection: 'column',
marginBottom: '16px',
position: 'relative'
},
buttons: {
display: 'flex',
justifyContent: 'flex-end'
},
buttonContainer: {
marginLeft: '14px'
}
};
================================================
FILE: src/Label/macOs/index.js
================================================
import Label from '../../Text/macOs';
export default Label;
================================================
FILE: src/Label/windows/index.js
================================================
import Label from '../../Text/windows';
export default Label;
================================================
FILE: src/Link/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Margin, { marginPropTypes } from '../../style/margin';
import Padding, { paddingPropTypes } from '../../style/padding';
import FontSize, { fontSizePropTypes } from '../../style/fontSize';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import TextAlign, { textAlignPropTypes } from '../../style/textAlign';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
const componentStyle = {
display: 'inline-block',
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
fontSize: '11px',
textDecoration: 'none'
};
@Margin()
@Padding()
@FontSize()
@Dimension()
@TextAlign()
@Hidden()
class Link extends Component {
static propTypes = {
...marginPropTypes,
...paddingPropTypes,
...fontSizePropTypes,
...dimensionPropTypes,
...textAlignPropTypes,
...hiddenPropTypes,
color: PropTypes.string
};
static defaultProps = {
color: '#009df0'
};
render() {
const { color, children, style, ...props } = this.props;
return (
<a style={{ ...componentStyle, color, ...style }} {...props}>
{children}
</a>
);
}
}
export default Link;
================================================
FILE: src/ListView/macOs/Footer/index.js
================================================
import React, { Component } from 'react';
import Background, { backgroundPropTypes } from '../../../style/background/macOs';
import Dimension, { dimensionPropTypes } from '../../../style/dimension';
import Padding, { paddingPropTypes } from '../../../style/padding';
import styles from './style/10.11';
@Background({ background: '#f0f0f0' })
@Dimension()
@Padding({ paddingLeft: '10px', paddingRight: '10px', paddingTop: '2px', paddingBottom: '2px' })
class Footer extends Component {
static propTypes = {
...backgroundPropTypes,
...dimensionPropTypes,
...paddingPropTypes
};
render() {
const { children, style, ...props } = this.props;
return (
<footer style={{ ...styles.header, ...style }} {...props}>
{children}
</footer>
);
}
}
export default Footer;
================================================
FILE: src/ListView/macOs/Footer/style/10.11.js
================================================
export default {
header: {
top: '0px',
left: '0px',
width: '100%',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: '#c9c9c9',
boxSizing: 'border-box'
}
};
================================================
FILE: src/ListView/macOs/Header/index.js
================================================
import React, { Component } from 'react';
import Background, { backgroundPropTypes } from '../../../style/background/macOs';
import Dimension, { dimensionPropTypes } from '../../../style/dimension';
import Padding, { paddingPropTypes } from '../../../style/padding';
import styles from './style/10.11';
@Background({ background: '#f0f0f0' })
@Dimension()
@Padding({ paddingLeft: '10px', paddingRight: '10px', paddingTop: '2px', paddingBottom: '2px' })
class Header extends Component {
static propTypes = {
...backgroundPropTypes,
...dimensionPropTypes,
...paddingPropTypes
};
render() {
const { children, style, ...props } = this.props;
return (
<header style={{ ...styles.header, ...style }} {...props}>
{children}
</header>
);
}
}
export default Header;
================================================
FILE: src/ListView/macOs/Header/style/10.11.js
================================================
export default {
header: {
top: '0px',
left: '0px',
width: '100%',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: '#c9c9c9',
boxSizing: 'border-box'
}
};
================================================
FILE: src/ListView/macOs/Row/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Background, { backgroundPropTypes } from '../../../style/background/macOs';
import Alignment, { alignmentPropTypes } from '../../../style/alignment';
import Dimension, { dimensionPropTypes } from '../../../style/dimension';
import Hidden, { hiddenPropTypes } from '../../../style/hidden';
import Margin, { marginPropTypes } from '../../../style/margin';
import Padding, { paddingPropTypes } from '../../../style/padding';
import styles from './style/10.11';
@Background()
@Alignment()
@Dimension()
@Hidden()
@Margin({ marginTop: '4px', marginBottom: '4px' })
@Padding({ paddingLeft: '18px', paddingRight: '18px', paddingTop: '5px', paddingBottom: '5px' })
class Row extends Component {
static propTypes = {
...backgroundPropTypes,
...alignmentPropTypes,
...dimensionPropTypes,
...hiddenPropTypes,
...marginPropTypes,
...paddingPropTypes,
layout: PropTypes.string
};
static defaultProps = {
layout: 'horizontal'
};
render() {
const { horizontalAlignment, children, style, layout, ...props } = this.props;
let componentStyle = { ...styles.row };
if (layout === 'vertical') {
componentStyle.flexDirection = 'column';
if (horizontalAlignment) {
switch(horizontalAlignment) {
case 'center': componentStyle.alignItems = 'center'; break;
case 'left': componentStyle.alignItems = 'flex-start'; break;
case 'right': componentStyle.alignItems = 'flex-end'; break;
}
}
} else {
if (horizontalAlignment) {
switch(horizontalAlignment) {
case 'center': componentStyle.justifyContent = 'center'; break;
case 'left': componentStyle.justifyContent = 'flex-start'; break;
case 'right': componentStyle.justifyContent = 'flex-end'; break;
}
}
}
return (
<li style={{ ...styles.row, ...style }} {...props}>
{children}
</li>
);
}
}
export default Row;
================================================
FILE: src/ListView/macOs/Row/style/10.11.js
================================================
export default {
row: {
WebkitUserSelect: 'none',
userSelect: 'none
gitextract_6tgptjls/ ├── .babelrc ├── .codeclimate.yml ├── .editorconfig ├── .eslintrc.yml ├── .github/ │ └── workflows/ │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── demo/ │ └── electron/ │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── index.html │ ├── index.js │ ├── package.json │ ├── page_index.js │ └── webpack.config.js ├── docs/ │ ├── README.md │ ├── advanced-usage/ │ │ ├── electron-js.md │ │ └── nw-js.md │ ├── faq.md │ ├── getting-started/ │ │ └── installation.md │ ├── mac-os/ │ │ ├── box.md │ │ ├── button.md │ │ ├── checkbox.md │ │ ├── dialog.md │ │ ├── label.md │ │ ├── link.md │ │ ├── list-view.md │ │ ├── pin.md │ │ ├── progress-circle.md │ │ ├── radio.md │ │ ├── search-field.md │ │ ├── segmented-control.md │ │ ├── text-input.md │ │ ├── text.md │ │ ├── title-bar.md │ │ ├── toolbar-nav.md │ │ ├── toolbar.md │ │ ├── view.md │ │ └── window.md │ ├── testing.md │ └── windows/ │ ├── button.md │ ├── checkbox.md │ ├── label.md │ ├── master-details-view.md │ ├── nav-pane.md │ ├── progress-circle.md │ ├── radio.md │ ├── text-input.md │ ├── text.md │ ├── title-bar.md │ ├── view.md │ └── window.md ├── examples/ │ ├── macOs/ │ │ ├── advanced/ │ │ │ └── pinDialog.js │ │ └── components/ │ │ ├── box.js │ │ ├── button.js │ │ ├── checkbox.js │ │ ├── dialog.js │ │ ├── label.js │ │ ├── link.js │ │ ├── listView.js │ │ ├── pin.js │ │ ├── progressCircle.js │ │ ├── radio.js │ │ ├── searchField.js │ │ ├── segmentedControl.js │ │ ├── text.js │ │ ├── textArea.js │ │ ├── textInput.js │ │ ├── titleBar.js │ │ ├── toolbar.js │ │ ├── toolbarNav.js │ │ ├── view.js │ │ └── window.js │ └── windows/ │ └── components/ │ ├── button.js │ ├── checkbox.js │ ├── label.js │ ├── masterDetailsView.js │ ├── navPane.js │ ├── progressCircle.js │ ├── radio.js │ ├── text.js │ ├── textArea.js │ ├── textInput.js │ ├── titleBar.js │ ├── view.js │ └── window.js ├── index.js ├── macOs.js ├── package.json ├── playground/ │ ├── assets/ │ │ └── icons.js │ ├── examplesLoader.js │ ├── index.js │ ├── playground.js │ ├── ui/ │ │ ├── examples/ │ │ │ └── examples.js │ │ └── sidebar/ │ │ ├── logo.js │ │ └── sidebar.js │ └── webpack.config.js ├── src/ │ ├── Box/ │ │ └── macOs/ │ │ ├── index.js │ │ └── styles/ │ │ └── 10.11.js │ ├── Button/ │ │ ├── macOs/ │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── Checkbox/ │ │ ├── macOs/ │ │ │ ├── Checkmark.js │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── Dialog/ │ │ └── macOs/ │ │ ├── index.js │ │ └── style/ │ │ └── 10.11.js │ ├── Label/ │ │ ├── macOs/ │ │ │ └── index.js │ │ └── windows/ │ │ └── index.js │ ├── Link/ │ │ └── macOs/ │ │ └── index.js │ ├── ListView/ │ │ └── macOs/ │ │ ├── Footer/ │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── 10.11.js │ │ ├── Header/ │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── 10.11.js │ │ ├── Row/ │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── 10.11.js │ │ ├── Section/ │ │ │ ├── Header/ │ │ │ │ ├── index.js │ │ │ │ └── style/ │ │ │ │ └── 10.11.js │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── 10.11.js │ │ ├── Separator/ │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── 10.11.js │ │ ├── index.js │ │ └── style/ │ │ └── 10.11.js │ ├── MasterDetailsView/ │ │ └── windows/ │ │ ├── Details/ │ │ │ └── index.js │ │ ├── Item/ │ │ │ └── index.js │ │ ├── Master/ │ │ │ └── index.js │ │ ├── Pane.js │ │ └── index.js │ ├── NavPane/ │ │ └── windows/ │ │ ├── Item/ │ │ │ ├── Content/ │ │ │ │ └── index.js │ │ │ ├── Title/ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Pane/ │ │ │ ├── Button/ │ │ │ │ └── index.js │ │ │ ├── Item/ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── style/ │ │ │ └── windows10.js │ │ ├── index.js │ │ └── style/ │ │ └── windows10.js │ ├── Pin/ │ │ └── macOs/ │ │ ├── index.js │ │ └── style/ │ │ └── 10.11.js │ ├── ProgressCircle/ │ │ ├── macOs/ │ │ │ ├── index.js │ │ │ ├── progressCircleAnimation.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ ├── progressCircleAnimation.js │ │ └── styles/ │ │ └── windows10.js │ ├── Radio/ │ │ ├── macOs/ │ │ │ ├── Circle.js │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows.js │ ├── SearchField/ │ │ └── macOs/ │ │ ├── cancelAnimation.js │ │ ├── icons.js │ │ ├── index.js │ │ └── styles/ │ │ └── 10.11.js │ ├── SegmentedControl/ │ │ └── macOs/ │ │ ├── Item/ │ │ │ └── index.js │ │ ├── Tabs/ │ │ │ ├── Tab.js │ │ │ └── index.js │ │ ├── index.js │ │ └── style/ │ │ └── 10.11.js │ ├── Text/ │ │ ├── macOs/ │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── TextArea/ │ │ ├── macOs/ │ │ │ ├── centerPlaceholderAnimation.js │ │ │ ├── focusRingAnimation.js │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── TextInput/ │ │ ├── macOs/ │ │ │ ├── centerPlaceholderAnimation.js │ │ │ ├── focusRingAnimation.js │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── TitleBar/ │ │ ├── macOs/ │ │ │ ├── Controls/ │ │ │ │ ├── Close.js │ │ │ │ ├── Minimize.js │ │ │ │ ├── Resize.js │ │ │ │ ├── index.js │ │ │ │ └── styles/ │ │ │ │ └── 10.11.js │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── Controls/ │ │ │ ├── Close.js │ │ │ ├── Maximize.js │ │ │ ├── Minimize.js │ │ │ └── index.js │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── Toolbar/ │ │ └── macOs/ │ │ ├── Nav/ │ │ │ ├── Item/ │ │ │ │ └── index.js │ │ │ └── index.js │ │ └── index.js │ ├── ValueRef.js │ ├── View/ │ │ ├── macOs/ │ │ │ └── index.js │ │ └── windows/ │ │ └── index.js │ ├── Window/ │ │ ├── macOs/ │ │ │ ├── index.js │ │ │ └── styles/ │ │ │ └── 10.11.js │ │ └── windows/ │ │ ├── index.js │ │ └── styles/ │ │ └── windows10.js │ ├── animation/ │ │ └── bezierEasing.js │ ├── color.js │ ├── monitor.js │ ├── os.js │ ├── placeholderStyle.js │ ├── style/ │ │ ├── alignment.js │ │ ├── background/ │ │ │ ├── macOs.js │ │ │ └── windows.js │ │ ├── color/ │ │ │ └── windows.js │ │ ├── dimension.js │ │ ├── fontSize.js │ │ ├── hidden.js │ │ ├── margin.js │ │ ├── padding.js │ │ ├── textAlign.js │ │ ├── theme/ │ │ │ └── windows.js │ │ └── width.js │ ├── styleHelper.js │ ├── utils/ │ │ └── mapStyles.js │ └── windowFocus.js ├── test/ │ ├── mocha.opts │ ├── setup.js │ └── tests/ │ ├── box.js │ ├── button.js │ ├── checkbox.js │ ├── color.js │ ├── dialog.js │ ├── index.js │ ├── label.js │ ├── link.js │ ├── listView.js │ ├── macOs.js │ ├── pin.js │ ├── progressCircle.js │ ├── searchField.js │ ├── text.js │ ├── textArea.js │ ├── textInput.js │ ├── toolbar.js │ ├── toolbarNav.js │ └── windows.js └── windows.js
SYMBOL INDEX (350 symbols across 127 files)
FILE: demo/electron/index.js
function createMainWnd (line 5) | function createMainWnd() {
FILE: examples/macOs/advanced/pinDialog.js
class PinDialog (line 4) | class PinDialog extends Component {
method constructor (line 5) | constructor() {
method render (line 21) | render() {
method renderIcon (line 62) | renderIcon() {
FILE: examples/macOs/components/box.js
method render (line 5) | render() {
FILE: examples/macOs/components/button.js
method render (line 5) | render() {
FILE: examples/macOs/components/checkbox.js
method render (line 5) | render() {
FILE: examples/macOs/components/dialog.js
method render (line 5) | render() {
method renderIcon (line 19) | renderIcon() {
FILE: examples/macOs/components/label.js
method render (line 5) | render() {
FILE: examples/macOs/components/link.js
method render (line 5) | render() {
FILE: examples/macOs/components/listView.js
method constructor (line 14) | constructor() {
method render (line 19) | render() {
method renderSectionHeader (line 43) | renderSectionHeader(title) {
method renderItem (line 51) | renderItem(title, info) {
FILE: examples/macOs/components/pin.js
method render (line 5) | render() {
FILE: examples/macOs/components/progressCircle.js
method render (line 5) | render() {
FILE: examples/macOs/components/radio.js
method render (line 5) | render() {
FILE: examples/macOs/components/searchField.js
method render (line 7) | render() {
FILE: examples/macOs/components/segmentedControl.js
method constructor (line 5) | constructor() {
method render (line 10) | render() {
method renderItems (line 18) | renderItems() {
method renderItem (line 26) | renderItem(key, title, content) {
FILE: examples/macOs/components/text.js
method render (line 5) | render() {
FILE: examples/macOs/components/textArea.js
method render (line 7) | render() {
FILE: examples/macOs/components/textInput.js
method render (line 7) | render() {
FILE: examples/macOs/components/titleBar.js
method constructor (line 5) | constructor() {
method render (line 10) | render() {
FILE: examples/macOs/components/toolbar.js
method render (line 5) | render() {
FILE: examples/macOs/components/toolbarNav.js
method constructor (line 23) | constructor() {
method render (line 28) | render() {
FILE: examples/macOs/components/view.js
method render (line 5) | render() {
FILE: examples/macOs/components/window.js
method render (line 5) | render() {
FILE: examples/windows/components/button.js
method render (line 9) | render() {
FILE: examples/windows/components/checkbox.js
method render (line 10) | render() {
FILE: examples/windows/components/label.js
method render (line 5) | render() {
FILE: examples/windows/components/masterDetailsView.js
method render (line 16) | render() {
method renderItem (line 26) | renderItem(master, details) {
FILE: examples/windows/components/navPane.js
method constructor (line 10) | constructor() {
method render (line 17) | render() {
method renderItem (line 27) | renderItem(title, content) {
method renderIcon (line 44) | renderIcon(name) {
FILE: examples/windows/components/progressCircle.js
method render (line 9) | render() {
FILE: examples/windows/components/radio.js
method render (line 10) | render() {
FILE: examples/windows/components/text.js
method render (line 10) | render() {
FILE: examples/windows/components/textArea.js
method render (line 12) | render() {
FILE: examples/windows/components/textInput.js
method render (line 12) | render() {
FILE: examples/windows/components/titleBar.js
method constructor (line 10) | constructor(props) {
method render (line 19) | render() {
FILE: examples/windows/components/view.js
method render (line 10) | render() {
FILE: examples/windows/components/window.js
method render (line 10) | render() {
FILE: playground/examplesLoader.js
function scanDir (line 4) | function scanDir(dir) {
FILE: playground/playground.js
class Playground (line 25) | class Playground extends React.Component {
method constructor (line 30) | constructor() {
method loadState (line 40) | loadState(mounted = true) {
method persistState (line 48) | persistState() {
method getChildContext (line 52) | getChildContext() {
method componentDidUpdate (line 58) | componentDidUpdate() {
method render (line 76) | render() {
FILE: playground/ui/examples/examples.js
class Examples (line 44) | class Examples extends React.Component {
method constructor (line 54) | constructor(props, ...args) {
method render (line 67) | render() {
method renderItem (line 75) | renderItem(item, path = '', subtitle = false) {
FILE: playground/ui/sidebar/logo.js
class Logo (line 3) | class Logo extends React.Component {
method render (line 4) | render() {
FILE: playground/ui/sidebar/sidebar.js
class Sidebar (line 18) | class Sidebar extends React.Component {
method constructor (line 19) | constructor(...args) {
method render (line 43) | render() {
method renderExamples (line 110) | renderExamples() {
FILE: src/Box/macOs/index.js
class Box (line 13) | @Dimension()
method render (line 34) | render() {
FILE: src/Button/macOs/index.js
class Button (line 11) | @WindowFocus()
method componentDidMount (line 30) | componentDidMount() {
method componentWillUnmount (line 36) | componentWillUnmount() {
method render (line 48) | render() {
FILE: src/Button/windows/index.js
class Button (line 10) | @Hidden()
method render (line 27) | render() {
FILE: src/Checkbox/macOs/Checkmark.js
class Checkmark (line 6) | @Radium
method render (line 18) | render() {
FILE: src/Checkbox/macOs/index.js
class Checkbox (line 11) | @ValueRef()
method constructor (line 22) | constructor(props) {
method componentWillReceiveProps (line 30) | componentWillReceiveProps(nextProps) {
method componentDidUpdate (line 36) | componentDidUpdate() {
method render (line 49) | render() {
FILE: src/Checkbox/windows/index.js
class Checkbox (line 10) | @ValueRef()
method constructor (line 29) | constructor(props) {
method render (line 43) | render() {
FILE: src/Dialog/macOs/index.js
class Dialog (line 11) | @Margin({
method isLast (line 28) | isLast(...next) {
method render (line 36) | render() {
method renderIcon (line 62) | renderIcon(icon) {
method renderTitle (line 73) | renderTitle(title, isLast) {
method renderMessage (line 85) | renderMessage(message, isLast) {
method renderChildren (line 92) | renderChildren(children, isLast) {
method renderButtons (line 103) | renderButtons(buttons) {
FILE: src/Link/macOs/index.js
class Link (line 20) | @Margin()
method render (line 41) | render() {
FILE: src/ListView/macOs/Footer/index.js
class Footer (line 7) | @Background({ background: '#f0f0f0' })
method render (line 17) | render() {
FILE: src/ListView/macOs/Header/index.js
class Header (line 7) | @Background({ background: '#f0f0f0' })
method render (line 17) | render() {
FILE: src/ListView/macOs/Row/index.js
class Row (line 11) | @Background()
method render (line 32) | render() {
FILE: src/ListView/macOs/Section/Header/index.js
class Header (line 16) | class Header extends Component {
method render (line 39) | render() {
FILE: src/ListView/macOs/Section/index.js
class Section (line 6) | class Section extends Component {
method render (line 15) | render() {
FILE: src/ListView/macOs/Separator/index.js
class Separator (line 9) | @Dimension()
method render (line 26) | render() {
FILE: src/ListView/macOs/index.js
class ListView (line 12) | @Background()
method mapChildren (line 26) | mapChildren(children) {
method render (line 51) | render() {
FILE: src/MasterDetailsView/windows/Details/index.js
class Details (line 16) | @ColorContext()
method getChildContext (line 33) | getChildContext() {
method render (line 39) | render() {
FILE: src/MasterDetailsView/windows/Item/index.js
function applyChildenClasses (line 17) | function applyChildenClasses() {
class Item (line 47) | @applyChildenClasses()
method constructor (line 57) | constructor(props, context, updater) {
method render (line 64) | render() {
FILE: src/MasterDetailsView/windows/Master/index.js
class Master (line 62) | @ColorContext()
method render (line 87) | render() {
FILE: src/MasterDetailsView/windows/Pane.js
class Pane (line 19) | @ThemeContext()
method render (line 25) | render() {
FILE: src/MasterDetailsView/windows/index.js
function applyChildenClasses (line 32) | function applyChildenClasses() {
class MasterDetailsView (line 52) | @applyChildenClasses()
method constructor (line 74) | constructor(props, context, updater) {
method getChildContext (line 82) | getChildContext() {
method select (line 88) | select(index) {
method filterChildren (line 92) | filterChildren(children) {
method render (line 119) | render() {
method renderMasters (line 135) | renderMasters() {
method renderDetail (line 147) | renderDetail() {
FILE: src/NavPane/windows/Item/Content/index.js
class Content (line 9) | @Padding()
method render (line 22) | render() {
FILE: src/NavPane/windows/Item/Title/index.js
class Title (line 47) | @Radium
method render (line 54) | render() {
FILE: src/NavPane/windows/Item/index.js
class Item (line 16) | @Padding()
method constructor (line 46) | constructor() {
method componentWillReceiveProps (line 53) | componentWillReceiveProps(nextProps) {
method render (line 59) | render() {
FILE: src/NavPane/windows/Pane/Button/index.js
class Button (line 15) | @ColorContext()
method render (line 28) | render() {
FILE: src/NavPane/windows/Pane/Item/index.js
class Item (line 9) | @ColorContext()
method render (line 27) | render() {
FILE: src/NavPane/windows/Pane/index.js
class Pane (line 7) | class Pane extends Component {
method constructor (line 36) | constructor(props, ...args) {
method render (line 49) | render() {
method renderItems (line 78) | renderItems() {
FILE: src/NavPane/windows/index.js
function applyChildenClasses (line 14) | function applyChildenClasses() {
class NavPane (line 32) | @applyChildenClasses()
method render (line 56) | render() {
method renderContent (line 72) | renderContent() {
FILE: src/Pin/macOs/index.js
class Pin (line 8) | @Hidden()
method constructor (line 20) | constructor(props, ...args) {
method componentDidMount (line 29) | componentDidMount() {
method render (line 109) | render() {
FILE: src/ProgressCircle/macOs/index.js
class ProgressCircle (line 7) | class ProgressCircle extends Component {
method componentDidMount (line 15) | componentDidMount() {
method componentWillUnmount (line 24) | componentWillUnmount() {
method render (line 28) | render() {
FILE: src/ProgressCircle/macOs/progressCircleAnimation.js
function animate (line 7) | function animate(elements) {
function animateStep (line 15) | function animateStep(elements) {
function findStep (line 26) | function findStep(index) {
function startAnimation (line 34) | function startAnimation(...elements) {
function stopAnimation (line 42) | function stopAnimation(animation) {
FILE: src/ProgressCircle/windows/index.js
class ProgressCircle (line 8) | @ColorContext()
method componentDidMount (line 21) | componentDidMount() {
method componentWillUnmount (line 32) | componentWillUnmount() {
method render (line 36) | render() {
FILE: src/ProgressCircle/windows/progressCircleAnimation.js
function rotateCircle (line 21) | function rotateCircle(circles) {
function startAnimation (line 55) | function startAnimation(...elements) {
function stopAnimation (line 65) | function stopAnimation(animation) {
FILE: src/Radio/macOs/Circle.js
class Circle (line 6) | @Radium
method render (line 18) | render() {
FILE: src/Radio/macOs/index.js
class Radio (line 11) | @ValueRef()
method constructor (line 22) | constructor(props) {
method componentDidMount (line 30) | componentDidMount() {
method componentWillUnmount (line 34) | componentWillUnmount() {
method componentWillReceiveProps (line 38) | componentWillReceiveProps(nextProps) {
method componentDidUpdate (line 44) | componentDidUpdate() {
method render (line 63) | render() {
FILE: src/Radio/windows/index.js
class Radio (line 19) | @ValueRef()
method constructor (line 38) | constructor(props) {
method componentDidMount (line 45) | componentDidMount() {
method componentWillUnmount (line 49) | componentWillUnmount() {
method render (line 66) | render() {
FILE: src/SearchField/macOs/cancelAnimation.js
function animateCancelIcon (line 12) | function animateCancelIcon(timestamp, element) {
FILE: src/SearchField/macOs/index.js
class SearchInput (line 10) | @ValueRef()
method constructor (line 21) | constructor() {
method searchIcon (line 28) | get searchIcon() {
method cancelIcon (line 34) | get cancelIcon() {
method componentDidUpdate (line 92) | componentDidUpdate(prevProps, prevState) {
method render (line 98) | render() {
FILE: src/SegmentedControl/macOs/Item/index.js
class Item (line 4) | class Item extends Component {
method render (line 11) | render() {
FILE: src/SegmentedControl/macOs/Tabs/Tab.js
class Tab (line 7) | @WindowFocus()
method render (line 19) | render() {
FILE: src/SegmentedControl/macOs/Tabs/index.js
class Tabs (line 5) | class Tabs extends Component {
method select (line 6) | select(item) {
method unselect (line 10) | unselect(item) {
method render (line 14) | render() {
method renderTabs (line 72) | renderTabs(tabs) {
FILE: src/SegmentedControl/macOs/index.js
function applyItem (line 12) | function applyItem() {
class SegmentedControl (line 30) | @applyItem()
method select (line 42) | select(item) {
method unselect (line 46) | unselect(item) {
method render (line 50) | render() {
method renderItem (line 70) | renderItem() {
FILE: src/Text/macOs/index.js
class Text (line 13) | @Background()
method render (line 39) | render() {
FILE: src/Text/windows/index.js
class Text (line 13) | @Margin()
method render (line 37) | render() {
FILE: src/TextArea/macOs/centerPlaceholderAnimation.js
function moveLabel (line 15) | function moveLabel(timestamp, label, start, current, end, cb) {
function animateLabel (line 36) | function animateLabel(label, start, end) {
function pullLeft (line 44) | function pullLeft(input, label) {
function pushCenter (line 55) | function pushCenter(input, label) {
FILE: src/TextArea/macOs/index.js
class TextAreaOSX (line 25) | @ValueRef()
method constructor (line 62) | constructor() {
method componentDidMount (line 71) | componentDidMount() {
method componentWillUnmount (line 91) | componentWillUnmount() {
method blur (line 152) | blur() {
method focus (line 161) | focus() {
method render (line 166) | render() {
FILE: src/TextArea/windows/index.js
class TextArea (line 23) | @ValueRef()
method placeholderStyle (line 47) | get placeholderStyle() {
method blur (line 57) | blur() {
method focus (line 66) | focus() {
method render (line 71) | render() {
FILE: src/TextInput/macOs/centerPlaceholderAnimation.js
function moveLabel (line 15) | function moveLabel(timestamp, label, start, current, end, cb) {
function animateLabel (line 36) | function animateLabel(label, start, end) {
function pullLeft (line 44) | function pullLeft(input, label) {
function pushCenter (line 55) | function pushCenter(input, label) {
FILE: src/TextInput/macOs/index.js
class TextFieldOSX (line 25) | @ValueRef()
method constructor (line 61) | constructor() {
method componentDidMount (line 70) | componentDidMount() {
method componentWillUnmount (line 90) | componentWillUnmount() {
method blur (line 151) | blur() {
method focus (line 160) | focus() {
method render (line 165) | render() {
FILE: src/TextInput/windows/index.js
class TextInput (line 23) | @ValueRef()
method placeholderStyle (line 48) | get placeholderStyle() {
method blur (line 58) | blur() {
method focus (line 67) | focus() {
method render (line 72) | render() {
FILE: src/TitleBar/macOs/Controls/Close.js
class Close (line 7) | @WindowFocus()
method render (line 16) | render() {
FILE: src/TitleBar/macOs/Controls/Minimize.js
class Minimize (line 7) | @WindowFocus()
method render (line 16) | render() {
FILE: src/TitleBar/macOs/Controls/Resize.js
class Resize (line 7) | @WindowFocus()
method componentDidMount (line 17) | componentDidMount() {
method render (line 30) | render() {
FILE: src/TitleBar/macOs/Controls/index.js
class Controls (line 21) | class Controls extends Component {
method constructor (line 35) | constructor() {
method render (line 42) | render() {
FILE: src/TitleBar/macOs/index.js
class TitleBar (line 8) | @Dimension({ width: '100%' })
method getChildContext (line 32) | getChildContext() {
method componentDidMount (line 38) | componentDidMount() {
method componentWillUnmount (line 43) | componentWillUnmount() {
method componentDidUpdate (line 47) | componentDidUpdate() {
method render (line 71) | render() {
FILE: src/TitleBar/windows/Controls/Close.js
class Close (line 38) | @WindowFocus()
method render (line 46) | render() {
FILE: src/TitleBar/windows/Controls/Maximize.js
class Maximize (line 50) | @WindowFocus()
method render (line 59) | render() {
FILE: src/TitleBar/windows/Controls/Minimize.js
class Minimize (line 50) | @WindowFocus()
method render (line 58) | render() {
FILE: src/TitleBar/windows/Controls/index.js
class Controls (line 17) | class Controls extends Component {
method render (line 25) | render() {
FILE: src/TitleBar/windows/index.js
class TitleBar (line 17) | @Background((nextProps, prevProps, background) => ({
method getChildContext (line 47) | getChildContext() {
method render (line 53) | render() {
FILE: src/Toolbar/macOs/Nav/Item/index.js
class Item (line 28) | class Item extends Component {
method render (line 36) | render() {
FILE: src/Toolbar/macOs/Nav/index.js
class Nav (line 13) | @Dimension({ height: '54px' })
method render (line 20) | render() {
FILE: src/Toolbar/macOs/index.js
class Toolbar (line 17) | @Alignment()
method getChildContext (line 29) | getChildContext() {
method render (line 35) | render() {
FILE: src/ValueRef.js
function ValueRef (line 4) | function ValueRef(ComposedComponent) {
FILE: src/View/macOs/index.js
class View (line 16) | @Width()
method render (line 40) | render() {
FILE: src/View/windows/index.js
class View (line 18) | @Width()
method render (line 44) | render() {
FILE: src/Window/macOs/index.js
class Window (line 19) | @WindowFocus()
method filterChildren (line 33) | filterChildren() {
method render (line 48) | render() {
FILE: src/Window/windows/index.js
class Window (line 25) | @WindowFocus()
method filterChildren (line 47) | filterChildren() {
method render (line 62) | render() {
FILE: src/animation/bezierEasing.js
function A (line 23) | function A(aA1, aA2) {
function B (line 26) | function B(aA1, aA2) {
function C (line 29) | function C(aA1) {
function calcBezier (line 34) | function calcBezier(aT, aA1, aA2) {
function getSlope (line 39) | function getSlope(aT, aA1, aA2) {
function binarySubdivide (line 43) | function binarySubdivide(aX, aA, aB, mX1, mX2) {
function newtonRaphsonIterate (line 57) | function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
function BezierEasing (line 70) | function BezierEasing(points, b, c, d) {
FILE: src/color.js
function colorLuminance (line 1) | function colorLuminance(hex, lum) {
function hexToRgb (line 20) | function hexToRgb(hex) {
function transparentize (line 37) | function transparentize(color, amount) {
function darkenColor (line 42) | function darkenColor(color, percent) {
function ligthenColor (line 46) | function ligthenColor(color) {
function convertColor (line 50) | function convertColor(color) {
function isDarkColor (line 84) | function isDarkColor(color) {
FILE: src/monitor.js
function windowFocus (line 12) | function windowFocus() {
function windowBlur (line 16) | function windowBlur() {
function windowIsFocused (line 20) | function windowIsFocused() {
FILE: src/os.js
constant MACOS (line 1) | const MACOS = 'macOs';
constant WINDOWS (line 2) | const WINDOWS = 'windows';
function os (line 4) | function os() {
FILE: src/placeholderStyle.js
function generateUniqueId (line 4) | function generateUniqueId() {
function mapRules (line 9) | function mapRules(selector, style) {
method constructor (line 41) | constructor() {
method render (line 46) | render() {
FILE: src/style/alignment.js
function removeAlignmentProps (line 11) | function removeAlignmentProps(props) {
function mapAlignmentStyle (line 15) | function mapAlignmentStyle(key, value, props) {
FILE: src/style/background/macOs.js
function removeBackgroundProps (line 8) | function removeBackgroundProps(props) {
FILE: src/style/background/windows.js
function removeBackgroundProps (line 15) | function removeBackgroundProps(props) {
class BackgroundElement (line 21) | @ColorContext(true)
method render (line 26) | render () {
class BackgroundComponent (line 43) | @ColorContext(true)
method render (line 47) | render() {
FILE: src/style/color/windows.js
function ColorContext (line 15) | function ColorContext(preserveProperty = false) {
FILE: src/style/dimension.js
function removeDimensionProps (line 9) | function removeDimensionProps(props) {
function mapDimensionStyle (line 13) | function mapDimensionStyle(key, value) {
FILE: src/style/fontSize.js
function removeFontSizeProps (line 8) | function removeFontSizeProps(props) {
function mapFontSizeStyle (line 12) | function mapFontSizeStyle(key, value) {
function mapFontSizeStyles (line 16) | function mapFontSizeStyles(styles) {
FILE: src/style/hidden.js
function removeHiddenProps (line 8) | function removeHiddenProps(props) {
function mapHiddenStyle (line 12) | function mapHiddenStyle(key, value) {
FILE: src/style/margin.js
function removeMarginProps (line 12) | function removeMarginProps(props) {
function mapMarginStyle (line 16) | function mapMarginStyle(key, value) {
FILE: src/style/padding.js
function removePaddingProps (line 12) | function removePaddingProps(props) {
function removeDuplicatePaddingProps (line 16) | function removeDuplicatePaddingProps(styles, props) {
function mapPaddingStyle (line 33) | function mapPaddingStyle(key, value) {
FILE: src/style/textAlign.js
function removeTextAlignProps (line 10) | function removeTextAlignProps(props) {
function mapTextAlignStyle (line 14) | function mapTextAlignStyle(key, value) {
FILE: src/style/theme/windows.js
function ThemeContext (line 15) | function ThemeContext() {
FILE: src/style/width.js
function removeWidthProps (line 8) | function removeWidthProps(props) {
function mapWidthStyle (line 12) | function mapWidthStyle(key, value) {
function mapWidthStyles (line 16) | function mapWidthStyles(styles) {
FILE: src/styleHelper.js
function parseDimension (line 3) | function parseDimension(value) {
function applyDefaultProps (line 12) | function applyDefaultProps(props, context, defaultProps) {
function hasProps (line 36) | function hasProps(props, proptypes) {
function extractProps (line 49) | function extractProps(props, proptypes) {
function mapStyle (line 66) | function mapStyle(prevStyles, nextStyles, defaultStyles, styleCallback, ...
function styleHelper (line 91) | function styleHelper(options, propTypes, mapStyleCallback, mapStylesCall...
FILE: src/utils/mapStyles.js
function mapStyles (line 1) | function mapStyles(styles, map) {
FILE: src/windowFocus.js
function WindowFocus (line 4) | function WindowFocus(options, ComposedComponent) {
Condensed preview — 249 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (422K chars).
[
{
"path": ".babelrc",
"chars": 118,
"preview": "{\n \"presets\": [\n \"es2015\",\n \"stage-0\",\n \"react\"\n ],\n \"plugins\": [\n \"transform-decorators-legacy\"\n ]\n}\n"
},
{
"path": ".codeclimate.yml",
"chars": 70,
"preview": "languages:\n JavaScript: true\nexclude_paths:\n - \"test/*\"\n - \"lib/*\"\n"
},
{
"path": ".editorconfig",
"chars": 421,
"preview": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# http"
},
{
"path": ".eslintrc.yml",
"chars": 950,
"preview": "parser: babel-eslint\n\nextends:\n - plugin:import/errors\n - plugin:import/warnings\n\nplugins:\n - react\n\nenv:\n browser: "
},
{
"path": ".github/workflows/npm-publish.yml",
"chars": 1245,
"preview": "# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created\n# For "
},
{
"path": ".gitignore",
"chars": 226,
"preview": "# OS generated files\n.DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\n/.idea\nehthumbs.db\nThumbs.db\n\n# Node\n/node_module"
},
{
"path": ".npmignore",
"chars": 178,
"preview": "/build\n/docs\n/examples\n/lib\n/node_modules\n/playground\n/test\n/.idea\n/.babelrc\n/.codeclimate.yml\n/.editorconfig\n/.eslintrc"
},
{
"path": ".travis.yml",
"chars": 51,
"preview": "language: node_js\nnode_js:\n - '8'\n - '7'\n - '6'\n"
},
{
"path": "CHANGELOG.md",
"chars": 3376,
"preview": "# CHANGELOG\n\n## 0.3.10 (July 28th, 2019)\n\n- Add the Electron framework demo\n\n## 0.3.7 (July 25th, 2018)\n\n- Add ability t"
},
{
"path": "CONTRIBUTING.md",
"chars": 313,
"preview": "# Contributing Guidelines\n\nWe are open to, and grateful for, any contributions made by the community.\n\n## Reporting Issu"
},
{
"path": "LICENSE",
"chars": 1077,
"preview": "The MIT License (MIT)\n\nCopyright © 2017 Gabriel Bull\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "README.md",
"chars": 2306,
"preview": "# <a href=\"http://reactdesktop.js.org/\" target=\"_blank\">![React Desktop](https://rawgit.com/gabrielbull/react-desktop/ma"
},
{
"path": "demo/electron/.gitignore",
"chars": 19,
"preview": "node_modules/\ndist/"
},
{
"path": "demo/electron/README.md",
"chars": 473,
"preview": "# React desktop Electron demo\n\n![TIM201907300143533f238.png](https://miao.su/images/2019/07/30/TIM201907300143533f238.pn"
},
{
"path": "demo/electron/babel.config.js",
"chars": 528,
"preview": "module.exports = function (api) {\n api.cache(false);\n\n const presets = [\n [\n '@babel/preset-env',\n {\n "
},
{
"path": "demo/electron/index.html",
"chars": 2258,
"preview": "<!DOCTYPE html>\n\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title>DEMO</title>\n\n <meta name=\"viewport\" content=\"width=d"
},
{
"path": "demo/electron/index.js",
"chars": 819,
"preview": "const electron = require('electron');\nconst { app, BrowserWindow, Menu } = electron;\nlet mainWnd = null;\n\nfunction creat"
},
{
"path": "demo/electron/package.json",
"chars": 1481,
"preview": "{\n \"name\": \"react-desktop-electron-demo\",\n \"version\": \"0.1.0\",\n \"description\": \"\",\n \"private\": true,\n \"scripts\": {\n"
},
{
"path": "demo/electron/page_index.js",
"chars": 492,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Window, TitleBar } from 'react-desktop/windows';\n"
},
{
"path": "demo/electron/webpack.config.js",
"chars": 420,
"preview": "var path = require('path');\n\nmodule.exports = {\n mode: 'development',\n\n entry: './page_index.js',\n\n output: {\n fil"
},
{
"path": "docs/README.md",
"chars": 2084,
"preview": "# Documentation\n\n**react-desktop** is a JavaScript library built on top of [Facebook's React](https://facebook.github.io"
},
{
"path": "docs/advanced-usage/electron-js.md",
"chars": 45,
"preview": "# Electron.js\n\nDocumentation is coming soon.\n"
},
{
"path": "docs/advanced-usage/nw-js.md",
"chars": 39,
"preview": "# NW.js\n\nDocumentation is coming soon.\n"
},
{
"path": "docs/faq.md",
"chars": 60,
"preview": "# Frequently Asked Questions\n\nDocumentation is coming soon.\n"
},
{
"path": "docs/getting-started/installation.md",
"chars": 177,
"preview": "# Installation\n\n**To install the stable version:**\n\n## [NPM](https://www.npmjs.com/)\n`npm install react-desktop --save`\n"
},
{
"path": "docs/mac-os/box.md",
"chars": 1939,
"preview": "# Box\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :------"
},
{
"path": "docs/mac-os/button.md",
"chars": 1861,
"preview": "# Button\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :---"
},
{
"path": "docs/mac-os/checkbox.md",
"chars": 871,
"preview": "# Checkbox\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-----"
},
{
"path": "docs/mac-os/dialog.md",
"chars": 7516,
"preview": "# Dialog\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :---"
},
{
"path": "docs/mac-os/label.md",
"chars": 1798,
"preview": "# Label\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----"
},
{
"path": "docs/mac-os/link.md",
"chars": 1932,
"preview": "# Link\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :-----"
},
{
"path": "docs/mac-os/list-view.md",
"chars": 9710,
"preview": "# ListView\n\n## ListView\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----"
},
{
"path": "docs/mac-os/pin.md",
"chars": 1228,
"preview": "# Pin\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :------"
},
{
"path": "docs/mac-os/progress-circle.md",
"chars": 594,
"preview": "# Progress Circle\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:|"
},
{
"path": "docs/mac-os/radio.md",
"chars": 1232,
"preview": "# Radio\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :--------"
},
{
"path": "docs/mac-os/search-field.md",
"chars": 2437,
"preview": "# SearchField\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :---------"
},
{
"path": "docs/mac-os/segmented-control.md",
"chars": 2130,
"preview": "# Segmented Control\n\n## SegmentedControl\n\n### Properties\n\nProperty | Type | Description\n:----------"
},
{
"path": "docs/mac-os/text-input.md",
"chars": 2463,
"preview": "# TextInput\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------"
},
{
"path": "docs/mac-os/text.md",
"chars": 2803,
"preview": "# Text\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :----------------"
},
{
"path": "docs/mac-os/title-bar.md",
"chars": 1807,
"preview": "# TitleBar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-----"
},
{
"path": "docs/mac-os/toolbar-nav.md",
"chars": 2366,
"preview": "# Toolbar Nav\n\n## ToolbarNav\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :--"
},
{
"path": "docs/mac-os/toolbar.md",
"chars": 881,
"preview": "# Toolbar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :------"
},
{
"path": "docs/mac-os/view.md",
"chars": 2160,
"preview": "# View\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :-----"
},
{
"path": "docs/mac-os/window.md",
"chars": 1621,
"preview": "# Window\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :---"
},
{
"path": "docs/testing.md",
"chars": 41,
"preview": "# Testing\n\nDocumentation is coming soon.\n"
},
{
"path": "docs/windows/button.md",
"chars": 1149,
"preview": "# Button\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-------"
},
{
"path": "docs/windows/checkbox.md",
"chars": 1237,
"preview": "# Checkbox\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-----"
},
{
"path": "docs/windows/label.md",
"chars": 1461,
"preview": "# Label\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :--------"
},
{
"path": "docs/windows/master-details-view.md",
"chars": 2764,
"preview": "# MasterDetailsView\n\n## MasterDetailsView\n\n### Properties\n\nProperty | Type | Description\n:-----------------"
},
{
"path": "docs/windows/nav-pane.md",
"chars": 6289,
"preview": "# NavPane\n\n## NavPane\n\n### Properties\n\nProperty | Type | Description\n:-------------------- | :---"
},
{
"path": "docs/windows/progress-circle.md",
"chars": 698,
"preview": "# Progress Circle\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:|"
},
{
"path": "docs/windows/radio.md",
"chars": 1627,
"preview": "# Radio\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :--------"
},
{
"path": "docs/windows/text-input.md",
"chars": 1921,
"preview": "# TextInput\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----"
},
{
"path": "docs/windows/text.md",
"chars": 2492,
"preview": "# Text\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :---------"
},
{
"path": "docs/windows/title-bar.md",
"chars": 1949,
"preview": "# TitleBar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-----"
},
{
"path": "docs/windows/view.md",
"chars": 1927,
"preview": "# View\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :---------"
},
{
"path": "docs/windows/window.md",
"chars": 1782,
"preview": "# Window\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :-------"
},
{
"path": "examples/macOs/advanced/pinDialog.js",
"chars": 7531,
"preview": "import React, { Component } from 'react';\nimport { View, Dialog, Pin, Button, Text, ProgressCircle } from 'react-desktop"
},
{
"path": "examples/macOs/components/box.js",
"chars": 263,
"preview": "import React, { Component } from 'react';\nimport { Box, Text } from 'react-desktop/macOs';\n\nexport default class extends"
},
{
"path": "examples/macOs/components/button.js",
"chars": 271,
"preview": "import React, { Component } from 'react';\nimport { Button } from 'react-desktop/macOs';\n\nexport default class extends Co"
},
{
"path": "examples/macOs/components/checkbox.js",
"chars": 337,
"preview": "import React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/macOs';\n\nexport default class extends "
},
{
"path": "examples/macOs/components/dialog.js",
"chars": 6328,
"preview": "import React, { Component } from 'react';\nimport { Dialog, Button } from 'react-desktop/macOs';\n\nexport default class ex"
},
{
"path": "examples/macOs/components/label.js",
"chars": 198,
"preview": "import React, { Component } from 'react';\nimport { Label } from 'react-desktop/macOs';\n\nexport default class extends Com"
},
{
"path": "examples/macOs/components/link.js",
"chars": 414,
"preview": "import React, { Component } from 'react';\nimport { View, Link } from 'react-desktop/macOs';\n\nexport default class extend"
},
{
"path": "examples/macOs/components/listView.js",
"chars": 2125,
"preview": "import React, { Component } from 'react';\nimport {\n ListView,\n ListViewHeader,\n ListViewFooter,\n ListViewSection,\n "
},
{
"path": "examples/macOs/components/pin.js",
"chars": 346,
"preview": "import React, { Component } from 'react';\nimport { Pin, View } from 'react-desktop/macOs';\n\nexport default class extends"
},
{
"path": "examples/macOs/components/progressCircle.js",
"chars": 211,
"preview": "import React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/macOs';\n\nexport default class ex"
},
{
"path": "examples/macOs/components/radio.js",
"chars": 648,
"preview": "import React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/macOs';\n\nexport default class exten"
},
{
"path": "examples/macOs/components/searchField.js",
"chars": 501,
"preview": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';\n\nexport "
},
{
"path": "examples/macOs/components/segmentedControl.js",
"chars": 869,
"preview": "import React, { Component } from 'react';\nimport { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/ma"
},
{
"path": "examples/macOs/components/text.js",
"chars": 1009,
"preview": "import React, { Component } from 'react';\nimport { Text } from 'react-desktop/macOs';\n\nexport default class extends Comp"
},
{
"path": "examples/macOs/components/textArea.js",
"chars": 400,
"preview": "import React, { Component } from 'react';\nimport { TextArea } from 'react-desktop/macOs';\n\nexport default class extends "
},
{
"path": "examples/macOs/components/textInput.js",
"chars": 367,
"preview": "import React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/macOs';\n\nexport default class extends"
},
{
"path": "examples/macOs/components/titleBar.js",
"chars": 647,
"preview": "import React, { Component } from 'react';\nimport { View, TitleBar } from 'react-desktop/macOs';\n\nexport default class ex"
},
{
"path": "examples/macOs/components/toolbar.js",
"chars": 296,
"preview": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, Text } from 'react-desktop/macOs';\n\nexport default"
},
{
"path": "examples/macOs/components/toolbarNav.js",
"chars": 1567,
"preview": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/m"
},
{
"path": "examples/macOs/components/view.js",
"chars": 421,
"preview": "import React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/macOs';\n\nexport default class extend"
},
{
"path": "examples/macOs/components/window.js",
"chars": 370,
"preview": "import React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/macOs';\n\nexport default "
},
{
"path": "examples/windows/components/button.js",
"chars": 343,
"preview": "import React, { Component } from 'react';\nimport { Button } from 'react-desktop/windows';\n\nexport default class extends "
},
{
"path": "examples/windows/components/checkbox.js",
"chars": 478,
"preview": "import React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/windows';\n\nexport default class extend"
},
{
"path": "examples/windows/components/label.js",
"chars": 200,
"preview": "import React, { Component } from 'react';\nimport { Label } from 'react-desktop/windows';\n\nexport default class extends C"
},
{
"path": "examples/windows/components/masterDetailsView.js",
"chars": 974,
"preview": "import React, { Component } from 'react';\nimport {\n MasterDetailsView,\n MasterDetailsViewItem,\n MasterDetailsViewItem"
},
{
"path": "examples/windows/components/navPane.js",
"chars": 3795,
"preview": "import React, { Component } from 'react';\nimport { NavPane, NavPaneItem, Text } from 'react-desktop/windows';\n\nexport de"
},
{
"path": "examples/windows/components/progressCircle.js",
"chars": 315,
"preview": "import React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/windows';\n\nexport default class "
},
{
"path": "examples/windows/components/radio.js",
"chars": 822,
"preview": "import React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/windows';\n\nexport default class ext"
},
{
"path": "examples/windows/components/text.js",
"chars": 1232,
"preview": "import React, { Component } from 'react';\nimport { Text } from 'react-desktop/windows';\n\nexport default class extends Co"
},
{
"path": "examples/windows/components/textArea.js",
"chars": 536,
"preview": "import React, { Component } from 'react';\nimport { TextArea } from 'react-desktop/windows';\n\nexport default class extend"
},
{
"path": "examples/windows/components/textInput.js",
"chars": 503,
"preview": "import React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/windows';\n\nexport default class exten"
},
{
"path": "examples/windows/components/titleBar.js",
"chars": 863,
"preview": "import React, { Component } from 'react';\nimport { TitleBar } from 'react-desktop/windows';\n\nexport default class extend"
},
{
"path": "examples/windows/components/view.js",
"chars": 562,
"preview": "import React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/windows';\n\nexport default class exte"
},
{
"path": "examples/windows/components/window.js",
"chars": 573,
"preview": "import React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/windows';\n\nexport defaul"
},
{
"path": "index.js",
"chars": 2062,
"preview": "import { default as whichOs, MACOS } from './src/os';\nimport * as windows from './windows';\nimport * as macOs from './ma"
},
{
"path": "macOs.js",
"chars": 1779,
"preview": "export { default as Box } from './src/Box/macOs';\nexport { default as Button } from './src/Button/macOs';\nexport { defau"
},
{
"path": "package.json",
"chars": 2324,
"preview": "{\n \"name\": \"react-desktop\",\n \"author\": \"Gabriel Bull\",\n \"version\": \"0.3.9\",\n \"description\": \"React UI Components for"
},
{
"path": "playground/assets/icons.js",
"chars": 2680,
"preview": "import * as React from 'react';\n\nexport const home = (\n <svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\">\n <p"
},
{
"path": "playground/examplesLoader.js",
"chars": 1207,
"preview": "var fs = require('fs');\nvar path = require('path');\n\nfunction scanDir(dir) {\n var files = fs.readdirSync(dir);\n var fi"
},
{
"path": "playground/index.js",
"chars": 735,
"preview": "import * as React from 'react';\nimport { render } from 'react-dom';\nimport Playground from './playground';\n\ndocument.tit"
},
{
"path": "playground/playground.js",
"chars": 2111,
"preview": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport examples from 'examples-loader!examples'"
},
{
"path": "playground/ui/examples/examples.js",
"chars": 3058,
"preview": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\n\nconst styles = {\n list: {\n margin: '0px',\n"
},
{
"path": "playground/ui/sidebar/logo.js",
"chars": 6060,
"preview": "import * as React from 'react';\n\nclass Logo extends React.Component {\n render() {\n return (\n <svg x=\"0px\" y=\"0p"
},
{
"path": "playground/ui/sidebar/sidebar.js",
"chars": 3380,
"preview": "import * as React from 'react';\nimport ColorPicker from 'react-color';\nimport examples from 'examples-loader!examples';\n"
},
{
"path": "playground/webpack.config.js",
"chars": 792,
"preview": "var path = require('path');\nvar HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n entry: path.jo"
},
{
"path": "src/Box/macOs/index.js",
"chars": 2131,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './styles/10.11';\nimpor"
},
{
"path": "src/Box/macOs/styles/10.11.js",
"chars": 574,
"preview": "export default {\n wrapper: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n flex: '1'"
},
{
"path": "src/Button/macOs/index.js",
"chars": 2064,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../windowFocus"
},
{
"path": "src/Button/macOs/styles/10.11.js",
"chars": 1474,
"preview": "export default {\n button: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n background"
},
{
"path": "src/Button/windows/index.js",
"chars": 1794,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { colorPropTypes, colorContextTypes"
},
{
"path": "src/Button/windows/styles/windows10.js",
"chars": 1045,
"preview": "export default {\n button: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n background"
},
{
"path": "src/Checkbox/macOs/Checkmark.js",
"chars": 1449,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium from 'radium';\nimport styles"
},
{
"path": "src/Checkbox/macOs/index.js",
"chars": 2874,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../windowFocus"
},
{
"path": "src/Checkbox/macOs/styles/10.11.js",
"chars": 1741,
"preview": "export default {\n container: {\n display: 'flex'\n },\n\n label: {\n display: 'flex',\n height: '20px',\n positi"
},
{
"path": "src/Checkbox/windows/index.js",
"chars": 2975,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ColorContext, colorPropTypes, col"
},
{
"path": "src/Checkbox/windows/styles/windows10.js",
"chars": 1704,
"preview": "export default {\n container: {\n display: 'flex',\n marginBottom: '22px'\n },\n\n label: {\n display: 'flex',\n "
},
{
"path": "src/Dialog/macOs/index.js",
"chars": 2751,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '."
},
{
"path": "src/Dialog/macOs/style/10.11.js",
"chars": 744,
"preview": "export default {\n container: {\n MozUserSelect: 'none',\n WebkitUserSelect: 'none',\n MsUserSelect: 'none',\n u"
},
{
"path": "src/Label/macOs/index.js",
"chars": 61,
"preview": "import Label from '../../Text/macOs';\n\nexport default Label;\n"
},
{
"path": "src/Label/windows/index.js",
"chars": 63,
"preview": "import Label from '../../Text/windows';\n\nexport default Label;\n"
},
{
"path": "src/Link/macOs/index.js",
"chars": 1322,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '."
},
{
"path": "src/ListView/macOs/Footer/index.js",
"chars": 812,
"preview": "import React, { Component } from 'react';\nimport Background, { backgroundPropTypes } from '../../../style/background/mac"
},
{
"path": "src/ListView/macOs/Footer/style/10.11.js",
"chars": 203,
"preview": "export default {\n header: {\n top: '0px',\n left: '0px',\n width: '100%',\n borderTopWidth: '1px',\n borderTo"
},
{
"path": "src/ListView/macOs/Header/index.js",
"chars": 812,
"preview": "import React, { Component } from 'react';\nimport Background, { backgroundPropTypes } from '../../../style/background/mac"
},
{
"path": "src/ListView/macOs/Header/style/10.11.js",
"chars": 212,
"preview": "export default {\n header: {\n top: '0px',\n left: '0px',\n width: '100%',\n borderBottomWidth: '1px',\n borde"
},
{
"path": "src/ListView/macOs/Row/index.js",
"chars": 2024,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Background, { backgroundPropTypes }"
},
{
"path": "src/ListView/macOs/Row/style/10.11.js",
"chars": 156,
"preview": "export default {\n row: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n display: 'fle"
},
{
"path": "src/ListView/macOs/Section/Header/index.js",
"chars": 1538,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './style/10.11';\nimport"
},
{
"path": "src/ListView/macOs/Section/Header/style/10.11.js",
"chars": 108,
"preview": "export default {\n title: {\n margin: '9px 0px',\n padding: '0px 10px',\n fontWeight: 'normal'\n }\n};\n"
},
{
"path": "src/ListView/macOs/Section/index.js",
"chars": 635,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Header from './Header';\nimport styl"
},
{
"path": "src/ListView/macOs/Section/style/10.11.js",
"chars": 95,
"preview": "export default {\n list: {\n listStyle: 'none',\n padding: '0px',\n margin: '0px'\n }\n};\n"
},
{
"path": "src/ListView/macOs/Separator/index.js",
"chars": 936,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dimension, { dimensionPropTypes } f"
},
{
"path": "src/ListView/macOs/Separator/style/10.11.js",
"chars": 116,
"preview": "export default {\n separator: {\n height: '1px',\n margin: '0px',\n padding: '0px',\n border: 'none'\n }\n};\n"
},
{
"path": "src/ListView/macOs/index.js",
"chars": 1819,
"preview": "import React, { Component, Children } from 'react';\nimport styles from './style/10.11';\nimport Background, { backgroundP"
},
{
"path": "src/ListView/macOs/style/10.11.js",
"chars": 352,
"preview": "export default {\n container: {\n position: 'relative',\n display: 'flex',\n flex: 1,\n height: '100%',\n flex"
},
{
"path": "src/MasterDetailsView/windows/Details/index.js",
"chars": 1453,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { convertColor } from '../../../col"
},
{
"path": "src/MasterDetailsView/windows/Item/index.js",
"chars": 1928,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Master from '../Master';\nimport Det"
},
{
"path": "src/MasterDetailsView/windows/Master/index.js",
"chars": 3475,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { parseDimension } from '../../../s"
},
{
"path": "src/MasterDetailsView/windows/Pane.js",
"chars": 1029,
"preview": "import React, { Component } from 'react';\nimport { parseDimension } from '../../styleHelper';\nimport { ThemeContext, the"
},
{
"path": "src/MasterDetailsView/windows/index.js",
"chars": 3625,
"preview": "import React, { Component, Children, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Master from"
},
{
"path": "src/NavPane/windows/Item/Content/index.js",
"chars": 966,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Padding, { paddingPropTypes } from "
},
{
"path": "src/NavPane/windows/Item/Title/index.js",
"chars": 1841,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium, { keyframes } from 'radium'"
},
{
"path": "src/NavPane/windows/Item/index.js",
"chars": 2138,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Padding, { paddingPropTypes } from "
},
{
"path": "src/NavPane/windows/Pane/Button/index.js",
"chars": 1319,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium, { getState } from 'radium';"
},
{
"path": "src/NavPane/windows/Pane/Item/index.js",
"chars": 2240,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from '../style/windows10';\ni"
},
{
"path": "src/NavPane/windows/Pane/index.js",
"chars": 2234,
"preview": "import React, { Component, Children } from 'react';\nimport PropTypes from 'prop-types';\nimport Item from './Item';\nimpor"
},
{
"path": "src/NavPane/windows/Pane/style/windows10.js",
"chars": 1534,
"preview": "export default {\n pane: {\n cursor: 'default',\n WebkitUserSelect: 'none',\n userSelect: 'none',\n display: 'fl"
},
{
"path": "src/NavPane/windows/index.js",
"chars": 2171,
"preview": "import React, { Component, Children, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Pane from '"
},
{
"path": "src/NavPane/windows/style/windows10.js",
"chars": 838,
"preview": "export default {\n navPane: {\n display: 'flex',\n flexWrap: 'nowrap',\n position: 'relative',\n flex: '1'\n },\n"
},
{
"path": "src/Pin/macOs/index.js",
"chars": 3943,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport T"
},
{
"path": "src/Pin/macOs/style/10.11.js",
"chars": 0,
"preview": ""
},
{
"path": "src/ProgressCircle/macOs/index.js",
"chars": 4574,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { hiddenPropTypes } from '../../sty"
},
{
"path": "src/ProgressCircle/macOs/progressCircleAnimation.js",
"chars": 1050,
"preview": "let ids = [];\nlet animations = {};\n\nconst framerate = 60;\nconst duration = 1900;\n\nfunction animate(elements) {\n this.cu"
},
{
"path": "src/ProgressCircle/macOs/styles/10.11.js",
"chars": 212,
"preview": "export default {\n progress: {\n width: '16px',\n height: '16px'\n },\n\n container: {\n position: 'relative',\n "
},
{
"path": "src/ProgressCircle/windows/index.js",
"chars": 2499,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { hiddenPropTypes } from '../../sty"
},
{
"path": "src/ProgressCircle/windows/progressCircleAnimation.js",
"chars": 2380,
"preview": "import BezierEasing from '../../animation/bezierEasing';\n\nlet requestAnimationFrame;\nif (typeof window !== 'undefined') "
},
{
"path": "src/ProgressCircle/windows/styles/windows10.js",
"chars": 238,
"preview": "export default {\n progress: {\n width: '20px',\n height: '20px',\n position: 'relative'\n },\n\n container: {\n "
},
{
"path": "src/Radio/macOs/Circle.js",
"chars": 1039,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium from 'radium';\nimport styles"
},
{
"path": "src/Radio/macOs/index.js",
"chars": 3191,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Hidden, { hiddenPropTypes } from '."
},
{
"path": "src/Radio/macOs/styles/10.11.js",
"chars": 1722,
"preview": "export default {\n container: {\n display: 'flex'\n },\n\n label: {\n display: 'flex',\n height: '20px',\n positi"
},
{
"path": "src/Radio/windows/index.js",
"chars": 3857,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium, { getState } from 'radium';"
},
{
"path": "src/Radio/windows/styles/windows.js",
"chars": 1690,
"preview": "export default {\n container: {\n display: 'flex',\n marginBottom: '21px'\n },\n\n label: {\n display: 'flex',\n "
},
{
"path": "src/SearchField/macOs/cancelAnimation.js",
"chars": 954,
"preview": "let requestAnimationFrame;\nif (typeof window !== 'undefined') {\n requestAnimationFrame = window.requestAnimationFrame |"
},
{
"path": "src/SearchField/macOs/icons.js",
"chars": 1629,
"preview": "import React from 'react';\n\nexport const searchIcon1x = (\n <svg x=\"0px\" y=\"0px\" width=\"12px\" height=\"12px\" viewBox=\"0 0"
},
{
"path": "src/SearchField/macOs/index.js",
"chars": 3371,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport T"
},
{
"path": "src/SearchField/macOs/styles/10.11.js",
"chars": 319,
"preview": "export default {\n container: {\n position: 'relative'\n },\n\n cancel: {\n position: 'absolute',\n zIndex: 4,\n "
},
{
"path": "src/SegmentedControl/macOs/Item/index.js",
"chars": 483,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass Item extends Component {\n static p"
},
{
"path": "src/SegmentedControl/macOs/Tabs/Tab.js",
"chars": 1533,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from '../style/10.11';\nimpor"
},
{
"path": "src/SegmentedControl/macOs/Tabs/index.js",
"chars": 2130,
"preview": "import React, { Component } from 'react';\nimport Tab from './Tab';\nimport styles from '../style/10.11';\n\nclass Tabs exte"
},
{
"path": "src/SegmentedControl/macOs/index.js",
"chars": 2199,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dimension, { dimensionPropTypes } f"
},
{
"path": "src/SegmentedControl/macOs/style/10.11.js",
"chars": 2385,
"preview": "export default {\n sergmentedControl: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n "
},
{
"path": "src/Text/macOs/index.js",
"chars": 1669,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '."
},
{
"path": "src/Text/macOs/styles/10.11.js",
"chars": 244,
"preview": "export default {\n text: {\n display: 'block',\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'defa"
},
{
"path": "src/Text/windows/index.js",
"chars": 1839,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '."
},
{
"path": "src/Text/windows/styles/windows10.js",
"chars": 293,
"preview": "export default {\n text: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n lineHeight: "
},
{
"path": "src/TextArea/macOs/centerPlaceholderAnimation.js",
"chars": 1869,
"preview": "import BezierEasing from '../../animation/bezierEasing';\n\nlet requestAnimationFrame;\nif (typeof window !== 'undefined') "
},
{
"path": "src/TextArea/macOs/focusRingAnimation.js",
"chars": 1208,
"preview": "import { keyframes } from 'radium';\n\nexport default function (borderRadius) {\n return keyframes(\n {\n '0%': {\n "
},
{
"path": "src/TextArea/macOs/index.js",
"chars": 8074,
"preview": "import React, { Component, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-"
},
{
"path": "src/TextArea/macOs/styles/10.11.js",
"chars": 2475,
"preview": "export default {\n container: {\n position: 'relative',\n zIndex: '2'\n },\n\n containerFocus: {\n zIndex: '3'\n },"
},
{
"path": "src/TextArea/windows/index.js",
"chars": 3160,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport T"
},
{
"path": "src/TextArea/windows/styles/windows10.js",
"chars": 1339,
"preview": "export default {\n textBox: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n borderWidth: '2px',\n borderSt"
},
{
"path": "src/TextInput/macOs/centerPlaceholderAnimation.js",
"chars": 1869,
"preview": "import BezierEasing from '../../animation/bezierEasing';\n\nlet requestAnimationFrame;\nif (typeof window !== 'undefined') "
},
{
"path": "src/TextInput/macOs/focusRingAnimation.js",
"chars": 1208,
"preview": "import { keyframes } from 'radium';\n\nexport default function (borderRadius) {\n return keyframes(\n {\n '0%': {\n "
},
{
"path": "src/TextInput/macOs/index.js",
"chars": 8111,
"preview": "import React, { Component, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-"
},
{
"path": "src/TextInput/macOs/styles/10.11.js",
"chars": 2453,
"preview": "export default {\n container: {\n position: 'relative',\n zIndex: '2'\n },\n\n containerFocus: {\n zIndex: '3'\n },"
},
{
"path": "src/TextInput/windows/index.js",
"chars": 3260,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport T"
},
{
"path": "src/TextInput/windows/styles/windows10.js",
"chars": 1339,
"preview": "export default {\n textBox: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n borderWidth: '2px',\n borderSt"
},
{
"path": "src/TitleBar/macOs/Controls/Close.js",
"chars": 2803,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../../windowFo"
},
{
"path": "src/TitleBar/macOs/Controls/Minimize.js",
"chars": 1986,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../../windowFo"
},
{
"path": "src/TitleBar/macOs/Controls/Resize.js",
"chars": 5107,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../../windowFo"
},
{
"path": "src/TitleBar/macOs/Controls/index.js",
"chars": 1921,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Close from './Close';\nimport Minimi"
},
{
"path": "src/TitleBar/macOs/Controls/styles/10.11.js",
"chars": 2712,
"preview": "export default {\n close: {\n button: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n WebkitAppRegio"
},
{
"path": "src/TitleBar/macOs/index.js",
"chars": 3573,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Controls from './Controls';\nimport "
},
{
"path": "src/TitleBar/macOs/styles/10.11.js",
"chars": 1380,
"preview": "export default {\n titleBar: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n WebkitAppRegion: 'drag',\n cu"
},
{
"path": "src/TitleBar/windows/Controls/Close.js",
"chars": 2043,
"preview": "import React, { Component } from 'react';\nimport Radium, { getState } from 'radium';\nimport WindowFocus from '../../../w"
},
{
"path": "src/TitleBar/windows/Controls/Maximize.js",
"chars": 2688,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../../windowFo"
},
{
"path": "src/TitleBar/windows/Controls/Minimize.js",
"chars": 1997,
"preview": "import React, { Component } from 'react';\nimport WindowFocus from '../../../windowFocus';\nimport { themeContextTypes } f"
},
{
"path": "src/TitleBar/windows/Controls/index.js",
"chars": 964,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Close from './Close';\nimport Minimi"
},
{
"path": "src/TitleBar/windows/index.js",
"chars": 2651,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Background, {\n backgroundPropTypes"
},
{
"path": "src/TitleBar/windows/styles/windows10.js",
"chars": 642,
"preview": "export default {\n titleBar: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n WebkitAppRegion: 'drag',\n ap"
},
{
"path": "src/Toolbar/macOs/Nav/Item/index.js",
"chars": 1287,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Text from '../../../../Text/macOs';"
},
{
"path": "src/Toolbar/macOs/Nav/index.js",
"chars": 1471,
"preview": "import React, { Component } from 'react';\nimport { Style } from 'radium';\nimport Dimension, { dimensionPropTypes } from "
},
{
"path": "src/Toolbar/macOs/index.js",
"chars": 928,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dimension, { dimensionPropTypes } f"
}
]
// ... and 49 more files (download for full content)
About this extraction
This page contains the full source code of the gabrielbull/react-desktop GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 249 files (382.5 KB), approximately 123.5k tokens, and a symbol index with 350 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.