[ { "path": ".babelrc", "content": "{\n \"presets\": [\n \"es2015\",\n \"stage-0\",\n \"react\"\n ],\n \"plugins\": [\n \"transform-decorators-legacy\"\n ]\n}\n" }, { "path": ".codeclimate.yml", "content": "languages:\n JavaScript: true\nexclude_paths:\n - \"test/*\"\n - \"lib/*\"\n" }, { "path": ".editorconfig", "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# http://editorconfig.org\n\nroot = true\n\n[*]\n\n# Change these settings to your own preference\nindent_style = space\nindent_size = 2\n\n# We recommend you to keep these unchanged\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintrc.yml", "content": "parser: babel-eslint\n\nextends:\n - plugin:import/errors\n - plugin:import/warnings\n\nplugins:\n - react\n\nenv:\n browser: true\n node: true\n es6: true\n mocha: true\n\nrules:\n # Strict mode\n strict: [2, never]\n\n # Code style\n indent: [2, 2]\n quotes: [2, single]\n no-unused-vars: 1\n no-undef: 1\n object-curly-spacing: [2, always]\n\n # JSX\n jsx-quotes: 1\n\n # React\n react/display-name: 0\n react/jsx-boolean-value: 1\n react/jsx-closing-bracket-location: 1\n react/jsx-curly-spacing: 1\n react/jsx-max-props-per-line: 0\n react/jsx-indent-props: 0\n react/jsx-no-duplicate-props: 1\n react/jsx-no-undef: 1\n react/jsx-sort-prop-types: 0\n react/jsx-sort-props: 0\n react/jsx-uses-react: 1\n react/jsx-uses-vars: 1\n react/no-danger: 0\n react/no-set-state: 0\n react/no-did-mount-set-state: 1\n react/no-did-update-set-state: 1\n react/no-multi-comp: 0\n react/no-unknown-property: 1\n react/self-closing-comp: 1\n react/jsx-wrap-multilines: 1\n" }, { "path": ".github/workflows/npm-publish.yml", "content": "# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created\n# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages\n\nname: Node.js Package\n\non:\n release:\n types: [created]\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v2\n with:\n node-version: 12\n - run: npm ci\n - run: npm test\n\n publish-npm:\n needs: build\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v2\n with:\n node-version: 12\n registry-url: https://registry.npmjs.org/\n - run: npm ci\n - run: npm publish\n env:\n NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n\n publish-gpr:\n needs: build\n runs-on: ubuntu-latest\n permissions:\n contents: read\n packages: write\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v2\n with:\n node-version: 12\n registry-url: https://npm.pkg.github.com/\n - run: npm ci\n - run: npm publish\n env:\n NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}\n" }, { "path": ".gitignore", "content": "# 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_modules\nyarn.lock\n\n# react-desktop #\n########\n\n/lib\n/build\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\npackage-lock.json\n\n" }, { "path": ".npmignore", "content": "/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\n/.npmignore\n/.travis.yml\n/CONTRIBUTING.md\n/npm-debug.log\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - '8'\n - '7'\n - '6'\n" }, { "path": "CHANGELOG.md", "content": "# 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 to disable individual titlebar controls (#125)\n- Allow end-user to force `isWindowFocused` prop (#126)\n- Allow defaultChecked to be string as well as boolean (#123) (Fixes #90)\n\n## 0.3.6 (July 25th, 2018)\n\n- This release was published incorrectly. Use 0.3.7 instead.\n\n## 0.3.5 (April 6th, 2018)\n\n- Fixed issue with case sensitivity\n\n## 0.3.4 (April 4th, 2018)\n\n- Added TextArea component\n- Several minor fixes\n\n## 0.3.3 (November 21st, 2017)\n\n- Updated dependencies\n- Fixed title props\n\n## 0.3.2 (October 17th, 2017)\n\n- Updated dependencies\n- Fixed unit tests\n- Fixed unit playground\n- Add public `focus` and `blur` methods to TextInput\n- Prop title of TitleBar now supports element node\n\n## 0.3.1 (June 21th, 2017)\n\n- Updated dependencies\n\n## 0.3.0 (April 17th, 2017)\n\n- Added prop-types dependency to avoid deprecation in React 16\n\n## 0.2.19 (March 14th, 2017)\n\n- Removed rubber band effect from list view\n\n## 0.2.18 (March 14th, 2017)\n\n- Fixed an issue with OS detection\n\n## 0.2.17 (January 9th, 2017)\n\n- Fixed issue with windows window background color\n- Added ref value for input elements\n- CheckBoxes and Radios now changes style when window is unfocused\n- Can now import components based on OS from 'react-desktop'\n\n## 0.2.16 (January 9th, 2017)\n\n- Custom styles for Windows text field's label\n- Default color for Windows text field's label changes based on theme\n\n## 0.2.15 (January 9th, 2017)\n\n- Fixed bug with macOs text field’s placeholder\n\n## 0.2.14 (September 19th, 2016)\n\n- Fixed duplicate onChange events on the windows textInput\n\n## 0.2.13 (August 25th, 2016)\n\n- Improve macOS title bar control icons\n\n## 0.2.12 (August 17th, 2016)\n\n- Fixed some styling issues with the list view\n- Fixed some styling issues with the windows\n\n## 0.2.11 (August 12th, 2016)\n\n- Added macOS list view component\n\n## 0.2.10 (August 11th, 2016)\n\n- Quick fix for the macOS text input component border issue\n\n## 0.2.9 (August 11th, 2016)\n\n- Added macOS search field component\n- Added centerPlaceholder, focusRing, icon and onEnter properties to the macOS text input component\n\n## 0.2.8 (August 8th, 2016)\n\n- Added macOS toolbar nav component\n- Added inset property to macOS title bar component\n- Added dimension and alignment properties to macOS toolbar component\n\n## 0.2.7 (July 28th, 2016)\n\n- Added macOS dialog component\n- Added bold property to macOS text\n- Added onEnter and disabled properties to macOS button\n- Fixed issues with margin on pin component for macOS\n\n## 0.2.6 (July 27th, 2016)\n\n- Added macOS pin component\n- Added size, padding and margin properties to macOS buttons\n- Fixed issues with text input for macOS\n- Added rounded corners and size properties to text input for macOS\n\n## 0.2.5 (July 18th, 2016)\n\n- Fixed some issues with View alignment\n\n## 0.2.4 (July 17th, 2016)\n\n- Removed all unknown props from components\n- Intial window focus is now the real window focus instead of being always true\n\n## 0.2.3 (June 24th, 2016)\n\n- Fixed bug with title bar in macOS\n\n## 0.2.2 (June 24th, 2016)\n\n- Added Link component for macOS\n- Added size to Text component\n- Added transparent option to titlebar for macOS\n- Fixed title bar size for macOS\n\n## 0.2.1 (June 14th, 2016)\n\n- Added support for React 15.1.0\n\n## 0.2.0 (May 16th, 2016)\n\n- Beta 1 release\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing Guidelines\n\nWe are open to, and grateful for, any contributions made by the community.\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the [issue tracker](https://github.com/gabrielbull/react-desktop/issues) \nto make sure your issue hasn’t already been reported.\n\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright © 2017 Gabriel Bull\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "# ![React Desktop](https://rawgit.com/gabrielbull/react-desktop/master/docs/resources/react-desktop.svg \"React Desktop\")\n\n[![Build Status](https://travis-ci.org/gabrielbull/react-desktop.svg?branch=master)](https://travis-ci.org/gabrielbull/react-desktop)\n[![Code Climate](https://codeclimate.com/github/gabrielbull/react-desktop/badges/gpa.svg)](https://codeclimate.com/github/gabrielbull/react-desktop)\n[![GitHub license](https://img.shields.io/github/license/gabrielbull/react-desktop?style=square)](https://github.com/gabrielbull/react-desktop/blob/master/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/gabrielbull/react-desktop)](https://github.com/gabrielbull/react-desktop/stargazers)\n[![npm downloads](http://img.shields.io/npm/dt/react-desktop.svg)](https://www.npmjs.org/package/react-desktop)\n[![npm version](https://img.shields.io/npm/v/react-desktop.svg)](https://www.npmjs.org/package/react-desktop)\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/gabrielbull/react-desktop?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)\n\nReact UI Components for macOS High Sierra and Windows 10.\n\n```npm \nnpm install react-desktop --save\n```\n\n![Demo](https://rawgit.com/gabrielbull/react-desktop/master/docs/resources/demo.svg \"Demo\")\n\n## Help wanted!\n\nI 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.\n\n## Contributing\n\nThis 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)!\n\nEveryone is welcome to contribute and add more components/documentation whilst following the [contributing guidelines](/CONTRIBUTING.md).\n\n## Documentation\n\nGuides on installation, components and advanced usage are found in the [documentation](http://reactdesktop.js.org).\n\n## Contributors\n\n \n \n" }, { "path": "demo/electron/.gitignore", "content": "node_modules/\ndist/" }, { "path": "demo/electron/README.md", "content": "# React desktop Electron demo\n\n![TIM201907300143533f238.png](https://miao.su/images/2019/07/30/TIM201907300143533f238.png)\n\n## How to use\n\nFirst, enter the folder:\n\n```cd demo/electron```\n\nInstall the libraries:\n\n```npm i``` or ```yarn``` (if you have been installed it)\n\nBuild once:\n\n```npm run build```\n\nThen start the server:\n\n```npm run watch```\n\nOpen another console at the same folder, and run this command to start the Electron process:\n\n```npm start```\n\nThat's it!\n" }, { "path": "demo/electron/babel.config.js", "content": "module.exports = function (api) {\n api.cache(false);\n\n const presets = [\n [\n '@babel/preset-env',\n {\n 'modules': 'commonjs',\n 'targets': {\n 'node': 'current'\n }\n }\n ],\n [\n '@babel/preset-react'\n ]\n ];\n const plugins = [\n [\n '@babel/plugin-proposal-decorators',\n {\n 'legacy': true\n }\n ],\n [\n '@babel/plugin-proposal-class-properties',\n {\n 'loose': true\n }\n ]\n ];\n\n return {\n presets,\n plugins\n };\n}" }, { "path": "demo/electron/index.html", "content": "\n\n\n\n\n \n DEMO\n\n \n\n \n\n\n\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n\n\n" }, { "path": "demo/electron/index.js", "content": "const electron = require('electron');\nconst { app, BrowserWindow, Menu } = electron;\nlet mainWnd = null;\n\nfunction createMainWnd() {\n mainWnd = new BrowserWindow({\n width:800,\n height:600,\n minWidth:800,\n maxWidth: 800,\n minHeight: 600,\n maxHeight: 600,\n useContentSize: true,\n show: false,\n frame: false,\n titleBarStyle: 'hidden',\n webPreferences: {\n nodeIntegration: true\n }\n });\n\n mainWnd.loadURL('http://127.0.0.1:16000/index.html');\n\n mainWnd.on('ready-to-show', ()=>{\n Menu.setApplicationMenu(null);\n mainWnd.show();\n // mainWnd.webContents.openDevTools({ detach:true });\n });\n\n mainWnd.on('closed', () => {\n mainWnd = null;\n process.exit();\n });\n}\n\napp.on('ready', ()=>{\n createMainWnd();\n});\n\napp.on('window-all-closed', () => {\n app.quit();\n});\n" }, { "path": "demo/electron/package.json", "content": "{\n \"name\": \"react-desktop-electron-demo\",\n \"version\": \"0.1.0\",\n \"description\": \"\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"electron ./index.js\",\n \"watch\": \"webpack-dev-server --config ./webpack.config.js --colors --inline --port 16000\",\n \"build\": \"webpack --config ./webpack.config.js\",\n \"package\": \"electron-packager ./ ReactDesktop --all --overwrite --out=./packaged/\",\n \"package:windows\": \"electron-packager ./ ReactDesktop --platform=win32 --overwrite --out=./packaged/\",\n \"package:mac\": \"electron-builder build --mac --config electron-builder.json --publish never\",\n \"test\": \"jest --watch\"\n },\n \"author\": \"langyo\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@babel/cli\": \"^7.5.5\",\n \"@babel/core\": \"^7.5.5\",\n \"@babel/plugin-proposal-class-properties\": \"^7.5.5\",\n \"@babel/plugin-proposal-decorators\": \"^7.4.4\",\n \"@babel/plugin-transform-flow-strip-types\": \"^7.4.4\",\n \"@babel/preset-env\": \"^7.5.5\",\n \"@babel/preset-react\": \"^7.0.0\",\n \"@material-ui/core\": \"^4.3.0\",\n \"babel-jest\": \"^24.8.0\",\n \"babel-loader\": \"^8.0.6\",\n \"classnames\": \"^2.2.6\",\n \"prop-types\": \"^15.7.2\",\n \"react\": \"^16.8.6\",\n \"react-desktop\": \"^0.3.9\",\n \"react-dom\": \"^16.8.6\"\n },\n \"keywords\": [],\n \"devDependencies\": {\n \"electron\": \"^9.1.0\",\n \"electron-builder\": \"^21.1.5\",\n \"electron-packager\": \"^14.0.3\",\n \"jest\": \"^24.8.0\",\n \"webpack\": \"^4.38.0\",\n \"webpack-cli\": \"^3.3.6\",\n \"webpack-dev-server\": \"^3.7.2\"\n }\n}\n" }, { "path": "demo/electron/page_index.js", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Window, TitleBar } from 'react-desktop/windows';\nimport Button from '@material-ui/core/Button';\n\nReactDOM.render(\n process.exit()}/>\n
\n \n
\n, document.querySelector('#content'));\n" }, { "path": "demo/electron/webpack.config.js", "content": "var path = require('path');\n\nmodule.exports = {\n mode: 'development',\n\n entry: './page_index.js',\n\n output: {\n filename: 'bundle.js'\n },\n\n devtool: 'source-map',\n\n // resolve: {\n // alias: {\n // 'react-desktop': path.join(__dirname, '..', '..')\n // }\n // },\n\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: 'babel-loader'\n }\n ]\n }\n};\n" }, { "path": "docs/README.md", "content": "# Documentation\n\n**react-desktop** is a JavaScript library built on top of [Facebook's React](https://facebook.github.io/react/) library, \nwhich aims to bring a native desktop experience to the web, featuring many macOS High Sierra and Windows 10 components. \n**react-desktop** works perfectly with [NW.js](http://nwjs.io) and [Electron.js](http://electron.atom.io), but \ncan be used in any JavaScript powered project!\n\n## Table of Contents\n\n1. Getting Started\n * [Installation](/docs/getting-started/installation.md)\n2. macOS\n * [Box](/docs/mac-os/box.md)\n * [Button](/docs/mac-os/button.md)\n * [Checkbox](/docs/mac-os/checkbox.md)\n * [Dialog](/docs/mac-os/dialog.md)\n * [Label](/docs/mac-os/label.md)\n * [Link](/docs/mac-os/link.md)\n * [List View](/docs/mac-os/list-view.md)\n * [Pin](/docs/mac-os/pin.md)\n * [Progress Circle](/docs/mac-os/progress-circle.md)\n * [Radio](/docs/mac-os/radio.md)\n * [Search Field](/docs/mac-os/search-field.md)\n * [Segmented Control](/docs/mac-os/segmented-control.md)\n * [Text](/docs/mac-os/text.md)\n * [Text Input](/docs/mac-os/text-input.md)\n * [Title Bar](/docs/mac-os/title-bar.md)\n * [Toolbar](/docs/mac-os/toolbar.md)\n * [Toolbar Nav](/docs/mac-os/toolbar-nav.md)\n * [View](/docs/mac-os/view.md)\n * [Window](/docs/mac-os/window.md)\n3. Windows 10\n * [Button](/docs/windows/button.md)\n * [Checkbox](/docs/windows/checkbox.md)\n * [Label](/docs/windows/label.md)\n * [Master/Details View](/docs/windows/master-details-view.md)\n * [Nav Pane](/docs/windows/nav-pane.md)\n * [Progress Circle](/docs/windows/progress-circle.md)\n * [Radio](/docs/windows/radio.md)\n * [Text](/docs/windows/text.md)\n * [Text Input](/docs/windows/text-input.md)\n * [Title Bar](/docs/windows/title-bar.md)\n * [View](/docs/windows/view.md)\n * [Window](/docs/windows/window.md)\n4. [Contributing](/CONTRIBUTING.md)\n5. [Change Log](/CHANGELOG.md)\n\n\n" }, { "path": "docs/advanced-usage/electron-js.md", "content": "# Electron.js\n\nDocumentation is coming soon.\n" }, { "path": "docs/advanced-usage/nw-js.md", "content": "# NW.js\n\nDocumentation is coming soon.\n" }, { "path": "docs/faq.md", "content": "# Frequently Asked Questions\n\nDocumentation is coming soon.\n" }, { "path": "docs/getting-started/installation.md", "content": "# Installation\n\n**To install the stable version:**\n\n## [NPM](https://www.npmjs.com/)\n`npm install react-desktop --save`\n\n## [Yarn](https://yarnpkg.com)\n`yarn add react-desktop`\n" }, { "path": "docs/mac-os/box.md", "content": "# Box\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nlabel | string | Adds a label to the box.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Box, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Some text...\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/button.md", "content": "# Button\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\ncolor | string | Sets the color of the button
__Property value__ _null_ _\"blue\"_.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nonClick | function | Callback function when the button is pressed.\nonEnter | function | Callback function when the the enter key is pressed.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nsize | string, number | Sets the font size of a component.\ntype | string | Sets the type of the button
__Property value__ _\"button\"_ _\"submit\"_. Default value _\"button\"_.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Button } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/checkbox.md", "content": "# Checkbox\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ndefaultValue | string | Sets the default value of the input.\ndefaultChecked | string | If true, the checkbox is checked by default.\nhidden | bool | Sets the visibility of a component.\nlabel | string | Adds a label to the checkbox.\nonChange | function | Callback function when the checkbox has changed.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n );\n }\n}\n```\n" }, { "path": "docs/mac-os/dialog.md", "content": "# Dialog\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbuttons | array | Sets the buttons of the component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nicon | element | Sets the icon element of the component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nmessage | string | Sets the message of the component.\ntitle | string | Sets the title of the component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Dialog, Button } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n console.log('close this dialog')}>Cancel,\n ,\n ]}\n />\n );\n }\n\n renderIcon() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/label.md", "content": "# Label\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\ncolor | string | Sets the color of the text.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Label } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/link.md", "content": "# Link\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\ncolor | string | Sets the color of the text.\nheight | string, number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nsize | string, number | Sets the font size of a component.\ntextAlign | string | Sets the text alignment of the component's content.
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nwidth | string, number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Link } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n This is a link\n \n \n This is another link\n \n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/list-view.md", "content": "# ListView\n\n## ListView\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nwidth | number | Sets the width of a component.\n\n## ListViewFooter\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nwidth | number | Sets the width of a component.\n\n## ListViewHeader\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nwidth | number | Sets the width of a component.\n\n## ListViewRow\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nlayout | string | Sets the direction of the content.
__Property value__ _\"horizontal\"_, _\"vertical\"_\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n## ListViewSection\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :---------------------:| :----------\nheader | string, element, array | Sets the header or header element of the component.\n\n## ListViewSectionHeader\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------------:| :----------\nbold | bool, number, string | Sets the bold value of a component.\ncolor | string | Sets the color of the text.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nsize | string, number | Sets the font size of a component.\n\n## ListViewSeparator\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------------:| :----------\ncolor | string | Sets the color of the separator.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n ListView,\n ListViewHeader,\n ListViewFooter,\n ListViewSection,\n ListViewSectionHeader,\n ListViewRow,\n ListViewSeparator,\n Text\n} from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: null };\n }\n\n render() {\n return (\n \n \n Order by name\n \n \n {this.renderItem('Item 1', 'This is the first item.')}\n {this.renderItem('Item 2', 'This is the second item.')}\n {this.renderItem('Item 3', 'This is the third item.')}\n \n \n \n {this.renderItem('Item 4', 'This is the fourth item.')}\n {this.renderItem('Item 5', 'This is the fifth item.')}\n {this.renderItem('Item 6', 'This is the sixth item.')}\n \n \n Status\n \n \n );\n }\n\n renderSectionHeader(title) {\n return (\n \n {title}\n \n );\n }\n\n renderItem(title, info) {\n return (\n this.setState({ selected: title })}\n background={this.state.selected === title ? '#d8dadc' : null}\n >\n \n \n \n \n {info}\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/pin.md", "content": "# Pin\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nhidden | bool | Sets the visibility of a component.\nlength | number | Sets the length of the pin.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nonChange | function | Callback function when the input changes.\nreveal | bool | Reveals the characters in the pin.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Pin, View } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n console.log(value)}\n length={4}\n reveal\n />\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/progress-circle.md", "content": "# Progress Circle\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncolor | string | Sets the color of the progress circle.\nhidden | bool | Sets the visibility of a component.\nsize | number | Sets the size of the progress circle.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/radio.md", "content": "# Radio\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ndefaultValue | string | Sets the default value of the input.\ndefaultChecked | string | If true, the radio is checked by default.\nhidden | bool | Sets the visibility of a component.\nlabel | string | Adds a label to the checkbox.\nname | string | Name of the input.\nonChange | function | Callback function when the checkbox has changed.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n />\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/search-field.md", "content": "# SearchField\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------------:| :----------\ncancel | bool | Sets whether the cancel button is visible.\ncenterPlaceholder | bool | Sets whether the placeholder is animated and centered when the input is not focused.\ndefaultValue | string | Sets the default value of the input.\nfocusRing | bool | Sets the visibility of the focus ring around the input.\nhidden | bool | Sets the visibility of a component.\nicon | element, array | Adds an icon to the input.\nlabel | string | Adds a label to the input.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nonCancel | function | Callback function when the user press the cancel button.\nonChange | function | Callback function when the input changes.\nonEnter | function | Callback function when the enter key is pressed.\nplaceholder | string | Adds a placeholder to the input.\nrounded | bool, number, string | Sets the roundness of the input border\nsize | string, number | Sets the font size of a component.\nvalue | string | Sets the value of the input.\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';\n\nexport default class extends Component {\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/segmented-control.md", "content": "# Segmented Control\n\n## SegmentedControl\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbox | bool | Sets whether the item is in a box or not.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nwidth | number | Sets the width of a component.\n\n## SegmentedControlItem\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------:| :----------\ntitle | string | Sets the title of the item.\nonSelect | function | Callback function when selecting an item.\nselected | bool | Sets whether the item is selected or not. \n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: 1 }\n }\n\n render() {\n return (\n \n {this.renderItems()}\n \n );\n }\n\n renderItems() {\n return [\n this.renderItem(1, 'Tab 1', Content 1),\n this.renderItem(2, 'Tab 2', Content 2),\n this.renderItem(3, 'Tab 3', Content 3)\n ];\n }\n\n renderItem(key, title, content) {\n return (\n this.setState({ selected: key })}\n >\n {content}\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/text-input.md", "content": "# TextInput\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------------:| :----------\ncenterPlaceholder | bool | Sets whether the placeholder is animated and centered when the input is not focused.\ndefaultValue | string | Sets the default value of the input.\nfocusRing | bool | Sets the visibility of the focus ring around the input.\nhidden | bool | Sets the visibility of a component.\nicon | element, array | Adds an icon to the input.\nlabel | string | Adds a label to the input.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\nonChange | function | Callback function when the input changes.\nonEnter | function | Callback function when the enter key is pressed.\nplaceholder | string | Adds a placeholder to the input.\nrounded | bool, number, string | Sets the roundness of the input border\nsize | string, number | Sets the font size of a component.\nvalue | string | Sets the value of the input.\nwidth | number | Sets the width of a component.\npassword | bool | Sets the input type to password.\n\n### Methods\n\nMethod | Type | Description\n:------------------ | :-------------:| :----------\nfocus | function | Focus text input programmatically\nblur | function | Remove focus from text input programmatically\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/macOs';\n\nexport default class extends Component {\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/text.md", "content": "# Text\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------------:| :----------\nbackground | string | Sets the background color of a component.\nbold | bool, number, string | Sets the bold value of a component.\ncolor | string | Sets the color of the text.\nheight | string, number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nsize | string, number | Sets the font size of a component.\ntextAlign | string | Sets the text alignment of the component's content.
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nwidth | string, number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan\n bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus\n eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,\n vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit\n amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et\n elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi\n tristique senectus et netus et malesuada fames ac turpis egestas.\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/title-bar.md", "content": "# TitleBar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncontrols | bool | Sets the visibility of the controls of the title bar.\ninset | bool | Sets the controls of the title bar state to be inset.\nisFullscreen | bool | Sets the title bar state to fullscreen.\nonCloseClick | function | Callback function of the close button.\nonMaximizeClick | function | Callback function of the maximize button\nonMinimizeClick | function | Callback function of the minimize button\nonResizeClick | function | Callback function of the resize button\ntitle | string | Sets the title of the title bar.\ntransparent | bool | Make the title bar background transparent.\ndisableClose | bool | Disable the close button.\ndisableMinimize | bool | Disable the minimize button.\ndisableResize | bool | Disable the resize button.\ndisableFullscreen | bool | Disable fullscreen, will show the '+' maximize icon instead.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, TitleBar } from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { isFullscreen: false };\n }\n\n render() {\n return (\n console.log('Close window')}\n onMinimizeClick={() => console.log('Minimize window')}\n onMaximizeClick={() => console.log('Mazimize window')}\n onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })}\n />\n );\n }\n}\n```\n" }, { "path": "docs/mac-os/toolbar-nav.md", "content": "# Toolbar Nav\n\n## ToolbarNav\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nheight | number | Sets the height of a component.\nwidth | number | Sets the width of a component.\n\n## ToolbarNavItem\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :---------------------:| :----------\nicon | element, array | Sets the icon element of the item.\nonClick | function | Callback function when the item is pressed.\nselected | bool | Sets whether the item is selected or not. \ntitle | string | Sets the title of the item.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs';\n\nconst circle = (\n \n \n \n);\n\nconst star = (\n \n \n \n);\n\nconst polygon = (\n \n \n \n);\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: 1 };\n }\n\n render() {\n return (\n \n \n \n this.setState({ selected: 1 })}\n />\n this.setState({ selected: 2 })}\n />\n this.setState({ selected: 3 })}\n />\n \n \n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/toolbar.md", "content": "# Toolbar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nheight | number | Sets the height of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TitleBar, Toolbar, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/view.md", "content": "# View\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nlayout | string | Sets the direction of the content.
__Property value__ _\"horizontal\"_, _\"vertical\"_\nmargin | string, number | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nmarginBottom | string, number | Sets the outer margin bottom of a component.\nmarginLeft | string, number | Sets the outer margin left of a component.\nmarginRight | string, number | Sets the outer margin right of a component.\nmarginTop | string, number | Sets the outer margin top of a component.\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Hello World\n \n );\n }\n}\n```\n" }, { "path": "docs/mac-os/window.md", "content": "# Window\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-------------:| :----------\nbackground | string | Sets the background color of a component.\nchrome | bool | Sets the chrome of the window.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\npadding | string, number | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npaddingBottom | string, number | Sets the padding bottom inside a component.\npaddingLeft | string, number | Sets the padding left inside a component.\npaddingRight | string, number | Sets the padding right inside a component.\npaddingTop | string, number | Sets the padding top inside a component.\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n Hello World\n \n );\n }\n}\n```\n" }, { "path": "docs/testing.md", "content": "# Testing\n\nDocumentation is coming soon.\n" }, { "path": "docs/windows/button.md", "content": "# Button\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncolor | string, bool | Sets whether the button is colored (bool) or sets the color of the button (string).\nhidden | bool | Sets the visibility of a component.\nonClick | function | Callback function when the button is pressed.\npush | bool | Display push animation when pressing the button.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\ntype | string | Sets the type of the button
__Property value__ _\"button\"_ _\"submit\"_. Default value _\"button\"_.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Button } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29'\n };\n\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/checkbox.md", "content": "# Checkbox\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncolor | string | Sets the color of the checkbox.\ndefaultValue | string | Sets the default value of the input.\ndefaultChecked | string | If true, the checkbox is checked by default.\nhidden | bool | Sets the visibility of a component.\nlabel | string | Adds a label to the checkbox.\nonChange | function | Callback function when the checkbox has changed.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n );\n }\n}\n```\n" }, { "path": "docs/windows/label.md", "content": "# Label\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string).\ncolor | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string).\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nmargin | string | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\npadding | string | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Label } from 'react-desktop/windows';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/master-details-view.md", "content": "# MasterDetailsView\n\n## MasterDetailsView\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----:| :----------\ncolor | string | Sets the main color of a component.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n## MasterDetailsViewItem\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----:| :----------\ncolor | string | Sets the main color of a component.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n## MasterDetailsViewItemMaster\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----:| :----------\ncolor | string | Sets the main color of a component.\npush | bool | Display push animation when selecting an item.\nselected | bool | Master is selected.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nwidth | number | Sets the width of a component.\n\n## MasterDetailsViewItemDetails\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\ncolor | string | Sets the main color of a component.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n MasterDetailsView,\n MasterDetailsViewItem,\n MasterDetailsViewItemMaster,\n MasterDetailsViewItemDetails,\n Text\n} from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n {this.renderItem('Item 1', 'Content 1')}\n {this.renderItem('Item 2', 'Content 2')}\n {this.renderItem('Item 3', 'Content 3')}\n \n );\n }\n\n renderItem(master, details) {\n return (\n \n \n {master}\n \n \n {details}\n \n \n );\n }\n}\n```\n" }, { "path": "docs/windows/nav-pane.md", "content": "# NavPane\n\n## NavPane\n\n### Properties\n\nProperty | Type | Description\n:-------------------- | :-------------:| :----------\ncanPaneToggle | bool | Sets whether the pane can be compacted.
Default value _\"true\"_.\ncolor | string | Sets the main color of a component.\ndefaultIsPaneExpanded | string | Sets whether the pane is expanded by default.
Default value _\"true\"_.\nonPaneToggle | function | Callback function when the pane is expanded or compacted.\npaneCompactedLength | string, number | Sets the length of the pane when compacted.
Default value _\"48px\"_.\npaneExpandedLength | string, number | Sets the length of the pane when expanded.
Default value _\"200px\"_\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n## NavPaneItem\n\n### Properties\n\nProperty | Type | Description\n:------------------- | :---------------------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\ncolor | string | Sets the main color of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nicon | string, element, array | Sets the icon element of the item.\nmargin | string | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nonSelect | function | Callback function when an item is selected.\npadding | string | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\npush | bool | Display push animation when pressing the button.\nselected | bool | Sets whether the item is selected or not.\ntitle | string, element, array | Sets the title of the element.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { NavPane, NavPaneItem, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n constructor() {\n super();\n this.state = {\n selected: 'Item 1'\n }\n }\n\n render() {\n return (\n \n {this.renderItem('Item 1', 'Content 1')}\n {this.renderItem('Item 2', 'Content 2')}\n {this.renderItem('Item 3', 'Content 3')}\n \n );\n }\n\n renderItem(title, content) {\n return (\n this.setState({ selected: title })}\n padding=\"10px 20px\"\n push\n >\n {content}\n \n );\n }\n\n renderIcon(name) {\n const fill = this.props.theme === 'dark' ? '#ffffff' : '#000000';\n switch(name) {\n case 'Item 1':\n return (\n \n \n \n );\n case 'Item 2':\n return (\n \n \n \n );\n case 'Item 3':\n return (\n \n \n \n );\n }\n }\n}\n```\n" }, { "path": "docs/windows/progress-circle.md", "content": "# Progress Circle\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncolor | string | Sets the color of the progress circle.\nhidden | bool | Sets the visibility of a component.\nsize | number | Sets the size of the progress circle.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29'\n };\n\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/radio.md", "content": "# Radio\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\ncolor | string | Sets the color of the radio.\ndefaultValue | string | Sets the default value of the input.\ndefaultChecked | string | If true, the radio is checked by default.\nhidden | bool | Sets the visibility of a component.\nlabel | string | Adds a label to the checkbox.\nname | string | Name of the input.\nonChange | function | Callback function when the checkbox has changed.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n />\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/text-input.md", "content": "# TextInput\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\ncolor | string | Sets the main color of a component and it's children.\ndefaultValue | string | Sets the default value of the input.\nhidden | bool | Sets the visibility of a component.\nlabel | string | Adds a label to the input.\nlabelColor | string, bool | Sets whether the label text is colored (bool) or sets the color of the label text (string).\nlabelStyle | object | Custom styles for the label.\nmargin | string | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\nonChange | function | Callback function when the input changes.\nplaceholder | function | Adds a placeholder to the input.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nvalue | string | Sets the value of the input.\nwidth | number | Sets the width of a component.\npassword | bool | Sets the input type to password.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n```\n\n" }, { "path": "docs/windows/text.md", "content": "# Text\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets whether the background is colored (bool) or sets the color of the background (string).\ncolor | string, bool | Sets whether the text is colored (bool) or sets the color of the text (string).\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nmargin | string | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\npadding | string | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan\n bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus\n eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,\n vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit\n amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et\n elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi\n tristique senectus et netus et malesuada fames ac turpis egestas.\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/title-bar.md", "content": "# TitleBar\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\ncontrols | bool | Sets the visibility of the controls of the title bar.\ncolor | string | Sets the main color of a component and it's children.\nisMaximized | bool | Sets the title bar state to maximized.\nonCloseClick | function | Callback function of the close button.\nonMaximizeClick | function | Callback function of the maximize button\nonMinimizeClick | function | Callback function of the minimize button\nonRestoreDownClick | function | Callback function of the restore down button\ntitle | string | Sets the title of the title bar.\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { TitleBar } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n constructor(props) {\n super(props);\n this.state = { isMaximized: true };\n }\n\n close = () => console.log('close');\n minimize = () => console.log('minimize');\n toggleMaximize = () => this.setState({ isMaximized: !this.state.isMaximized });\n\n render() {\n return (\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/view.md", "content": "# View\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\ncolor | string | Sets the main color of a component and it's children.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\nlayout | string | Sets the direction of the content.
__Property value__ _\"horizontal\"_, _\"vertical\"_\nmargin | string | Sets the outer margin of a component.
__E.G.__ _\"30px 20px\"_\npadding | string | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n Hello World\n \n );\n }\n}\n```\n" }, { "path": "docs/windows/window.md", "content": "# Window\n\n### Properties\n\nProperty | Type | Description\n:------------------ | :-----------:| :----------\nbackground | string, bool | Sets the background color of a component, if bool, the color will be used as the background color.\nchrome | bool | Sets the chrome of the window.\ncolor | string | Sets the main color of a component and it's children.\nheight | number | Sets the height of a component.\nhidden | bool | Sets the visibility of a component.\nhorizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _\"left\"_, _\"center\"_, _\"right\"_\npadding | string | Sets the padding inside a component.
__E.G.__ _\"30px 20px\"_\ntheme | string | Sets the UI theme that is used by this component and its children elements.
__Property value__ _\"light\"_, _\"dark\"_\nverticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _\"top\"_, _\"center\"_, _\"bottom\"_\nwidth | number | Sets the width of a component.\n\n### Examples\n\n```jsx\nimport React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n \n Hello World\n \n );\n }\n}\n```\n" }, { "path": "examples/macOs/advanced/pinDialog.js", "content": "import React, { Component } from 'react';\nimport { View, Dialog, Pin, Button, Text, ProgressCircle } from 'react-desktop/macOs';\n\nclass PinDialog extends Component {\n constructor() {\n super();\n this.state = {\n pin: '',\n error: null,\n loading: false\n };\n }\n\n submit = () => {\n this.setState({ loading: true });\n setTimeout(() => {\n this.setState({ loading: false, error: 'The confirmation code you entered is incorrect.' });\n }, 1500);\n };\n\n render() {\n let error;\n if (this.state.error) {\n error = {this.state.error};\n }\n\n return (\n \n \n Cancel\n ,\n \n Submit\n \n ]}\n horizontalAlignment=\"center\"\n >\n {error}\n \n );\n }\n\n renderIcon() {\n return (\n \n );\n }\n}\n\nexport default PinDialog;\n" }, { "path": "examples/macOs/components/box.js", "content": "import React, { Component } from 'react';\nimport { Box, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Some text...\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/button.js", "content": "import React, { Component } from 'react';\nimport { Button } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/checkbox.js", "content": "import React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n );\n }\n}\n" }, { "path": "examples/macOs/components/dialog.js", "content": "import React, { Component } from 'react';\nimport { Dialog, Button } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n console.log('close this dialog')}>Cancel,\n ,\n ]}\n />\n );\n }\n\n renderIcon() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/label.js", "content": "import React, { Component } from 'react';\nimport { Label } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/link.js", "content": "import React, { Component } from 'react';\nimport { View, Link } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n This is a link\n \n \n This is another link\n \n \n );\n }\n}\n" }, { "path": "examples/macOs/components/listView.js", "content": "import React, { Component } from 'react';\nimport {\n ListView,\n ListViewHeader,\n ListViewFooter,\n ListViewSection,\n ListViewSectionHeader,\n ListViewRow,\n ListViewSeparator,\n Text\n} from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: null };\n }\n\n render() {\n return (\n \n \n Order by name\n \n \n {this.renderItem('Item 1', 'This is the first item.')}\n {this.renderItem('Item 2', 'This is the second item.')}\n {this.renderItem('Item 3', 'This is the third item.')}\n \n \n \n {this.renderItem('Item 4', 'This is the fourth item.')}\n {this.renderItem('Item 5', 'This is the fifth item.')}\n {this.renderItem('Item 6', 'This is the sixth item.')}\n \n \n Status\n \n \n );\n }\n\n renderSectionHeader(title) {\n return (\n \n {title}\n \n );\n }\n\n renderItem(title, info) {\n return (\n this.setState({ selected: title })}\n background={this.state.selected === title ? '#d8dadc' : null}\n >\n \n \n \n \n {info}\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/pin.js", "content": "import React, { Component } from 'react';\nimport { Pin, View } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n console.log(value)}\n length={4}\n reveal\n />\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/progressCircle.js", "content": "import React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/radio.js", "content": "import React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n />\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/searchField.js", "content": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';\n\nexport default class extends Component {\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n" }, { "path": "examples/macOs/components/segmentedControl.js", "content": "import React, { Component } from 'react';\nimport { SegmentedControl, SegmentedControlItem, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: 1 }\n }\n\n render() {\n return (\n \n {this.renderItems()}\n \n );\n }\n\n renderItems() {\n return [\n this.renderItem(1, 'Tab 1', Content 1),\n this.renderItem(2, 'Tab 2', Content 2),\n this.renderItem(3, 'Tab 3', Content 3)\n ];\n }\n\n renderItem(key, title, content) {\n return (\n this.setState({ selected: key })}\n >\n {content}\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/text.js", "content": "import React, { Component } from 'react';\nimport { Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan\n bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus\n eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,\n vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit\n amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et\n elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi\n tristique senectus et netus et malesuada fames ac turpis egestas.\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/textArea.js", "content": "import React, { Component } from 'react';\nimport { TextArea } from 'react-desktop/macOs';\n\nexport default class extends Component {\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/textInput.js", "content": "import React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/macOs';\n\nexport default class extends Component {\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/titleBar.js", "content": "import React, { Component } from 'react';\nimport { View, TitleBar } from 'react-desktop/macOs';\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { isFullscreen: false };\n }\n\n render() {\n return (\n console.log('Close window')}\n onMinimizeClick={() => console.log('Minimize window')}\n onMaximizeClick={() => console.log('Mazimize window')}\n onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })}\n />\n );\n }\n}\n" }, { "path": "examples/macOs/components/toolbar.js", "content": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n \n );\n }\n}\n" }, { "path": "examples/macOs/components/toolbarNav.js", "content": "import React, { Component } from 'react';\nimport { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs';\n\nconst circle = (\n \n \n \n);\n\nconst star = (\n \n \n \n);\n\nconst polygon = (\n \n \n \n);\n\nexport default class extends Component {\n constructor() {\n super();\n this.state = { selected: 1 };\n }\n\n render() {\n return (\n \n \n \n this.setState({ selected: 1 })}\n />\n this.setState({ selected: 2 })}\n />\n this.setState({ selected: 3 })}\n />\n \n \n \n );\n }\n}\n" }, { "path": "examples/macOs/components/view.js", "content": "import React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n Hello World\n \n );\n }\n}\n" }, { "path": "examples/macOs/components/window.js", "content": "import React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/macOs';\n\nexport default class extends Component {\n render() {\n return (\n \n \n Hello World\n \n );\n }\n}\n" }, { "path": "examples/windows/components/button.js", "content": "import React, { Component } from 'react';\nimport { Button } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29'\n };\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/checkbox.js", "content": "import React, { Component } from 'react';\nimport { Checkbox } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n );\n }\n}\n" }, { "path": "examples/windows/components/label.js", "content": "import React, { Component } from 'react';\nimport { Label } from 'react-desktop/windows';\n\nexport default class extends Component {\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/masterDetailsView.js", "content": "import React, { Component } from 'react';\nimport {\n MasterDetailsView,\n MasterDetailsViewItem,\n MasterDetailsViewItemMaster,\n MasterDetailsViewItemDetails,\n Text\n} from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n {this.renderItem('Item 1', 'Content 1')}\n {this.renderItem('Item 2', 'Content 2')}\n {this.renderItem('Item 3', 'Content 3')}\n \n );\n }\n\n renderItem(master, details) {\n return (\n \n \n {master}\n \n \n {details}\n \n \n );\n }\n}\n" }, { "path": "examples/windows/components/navPane.js", "content": "import React, { Component } from 'react';\nimport { NavPane, NavPaneItem, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n constructor() {\n super();\n this.state = {\n selected: 'Item 1'\n }\n }\n\n render() {\n return (\n \n {this.renderItem('Item 1', 'Content 1')}\n {this.renderItem('Item 2', 'Content 2')}\n {this.renderItem('Item 3', 'Content 3')}\n \n );\n }\n\n renderItem(title, content) {\n return (\n this.setState({ selected: title })}\n padding=\"10px 20px\"\n push\n >\n {content}\n \n );\n }\n\n renderIcon(name) {\n const fill = this.props.theme === 'dark' ? '#ffffff' : '#000000';\n switch(name) {\n case 'Item 1':\n return (\n \n \n \n );\n case 'Item 2':\n return (\n \n \n \n );\n case 'Item 3':\n return (\n \n \n \n );\n }\n }\n}\n" }, { "path": "examples/windows/components/progressCircle.js", "content": "import React, { Component } from 'react';\nimport { ProgressCircle } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29'\n };\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/radio.js", "content": "import React, { Component } from 'react';\nimport { View, Radio } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n defaultChecked\n />\n console.log(e.target.value)}\n defaultValue=\"I got checked!\"\n />\n \n );\n }\n}\n" }, { "path": "examples/windows/components/text.js", "content": "import React, { Component } from 'react';\nimport { Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan\n bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus\n eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,\n vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit\n amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et\n elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi\n tristique senectus et netus et malesuada fames ac turpis egestas.\n \n );\n }\n}\n" }, { "path": "examples/windows/components/textArea.js", "content": "import React, { Component } from 'react';\nimport { TextArea } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/textInput.js", "content": "import React, { Component } from 'react';\nimport { TextInput } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n handleChange = e => console.log(e.target.value);\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/titleBar.js", "content": "import React, { Component } from 'react';\nimport { TitleBar } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n constructor(props) {\n super(props);\n this.state = { isMaximized: true };\n }\n\n close = () => console.log('close');\n minimize = () => console.log('minimize');\n toggleMaximize = () => this.setState({ isMaximized: !this.state.isMaximized });\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "examples/windows/components/view.js", "content": "import React, { Component } from 'react';\nimport { View, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n Hello World\n \n );\n }\n}\n" }, { "path": "examples/windows/components/window.js", "content": "import React, { Component } from 'react';\nimport { Window, TitleBar, Text } from 'react-desktop/windows';\n\nexport default class extends Component {\n static defaultProps = {\n color: '#cc7f29',\n theme: 'light'\n };\n\n render() {\n return (\n \n \n Hello World\n \n );\n }\n}\n" }, { "path": "index.js", "content": "import { default as whichOs, MACOS } from './src/os';\nimport * as windows from './windows';\nimport * as macOs from './macOs';\n\nconst os = whichOs();\nconst select = (macOs, windows) => os === MACOS ? macOs : windows;\n\nexport { default as os } from './src/os';\n\nexport const Box = macOs.Box;\nexport const Button = select(macOs.Button, windows.Button);\nexport const Checkbox = select(macOs.Checkbox, windows.Checkbox);\n\nexport const Dialog = macOs.Dialog;\nexport const Label = select(macOs.Label, windows.Label);\nexport const Link = macOs.Link;\nexport const ListView = macOs.ListView;\nexport const ListViewFooter = macOs.ListViewFooter;\nexport const ListViewHeader = macOs.ListViewHeader;\nexport const ListViewRow = macOs.ListViewRow;\nexport const ListViewSection = macOs.ListViewSection;\nexport const ListViewSectionHeader = macOs.ListViewSectionHeader;\nexport const ListViewSeparator = macOs.ListViewSeparator;\nexport const MasterDetailsView = windows.MasterDetailsView;\nexport const MasterDetailsViewItem = windows.MasterDetailsViewItem;\nexport const MasterDetailsViewItemMaster = windows.MasterDetailsViewItemMaster;\nexport const MasterDetailsViewItemDetails = windows.MasterDetailsViewItemDetails;\nexport const NavPane = windows.NavPane;\nexport const NavPaneItem = windows.NavPaneItem;\nexport const Pin = macOs.Pin;\nexport const ProgressCircle = select(macOs.ProgressCircle, windows.ProgressCircle);\nexport const Radio = select(macOs.Radio, windows.Radio);\nexport const SearchField = macOs.SearchField;\nexport const SegmentedControl = macOs.SegmentedControl;\nexport const SegmentedControlItem = macOs.SegmentedControlItem;\nexport const Text = select(macOs.Text, windows.Text);\nexport const TextInput = select(macOs.TextInput, windows.TextInput);\nexport const TitleBar = select(macOs.TitleBar, windows.TitleBar);\nexport const Toolbar = macOs.Toolbar;\nexport const ToolbarNav = macOs.ToolbarNav;\nexport const ToolbarNavItem = macOs.ToolbarNavItem;\nexport const View = select(macOs.View, windows.View);\nexport const Window = select(macOs.Window, windows.Window);\n" }, { "path": "macOs.js", "content": "export { default as Box } from './src/Box/macOs';\nexport { default as Button } from './src/Button/macOs';\nexport { default as Checkbox } from './src/Checkbox/macOs';\nexport { default as Dialog } from './src/Dialog/macOs';\nexport { default as Label } from './src/Label/macOs';\nexport { default as Link } from './src/Link/macOs';\nexport { default as ListView } from './src/ListView/macOs';\nexport { default as ListViewFooter } from './src/ListView/macOs/Footer';\nexport { default as ListViewHeader } from './src/ListView/macOs/Header';\nexport { default as ListViewRow } from './src/ListView/macOs/Row';\nexport { default as ListViewSection } from './src/ListView/macOs/Section';\nexport { default as ListViewSectionHeader } from './src/ListView/macOs/Header';\nexport { default as ListViewSeparator } from './src/ListView/macOs/Separator';\nexport { default as Pin } from './src/Pin/macOs';\nexport { default as ProgressCircle } from './src/ProgressCircle/macOs';\nexport { default as Radio } from './src/Radio/macOs';\nexport { default as SearchField } from './src/SearchField/macOs';\nexport { default as SegmentedControl } from './src/SegmentedControl/macOs';\nexport {\n default as SegmentedControlItem\n} from './src/SegmentedControl/macOs/Item';\nexport { default as Text } from './src/Text/macOs';\nexport { default as TextInput } from './src/TextInput/macOs';\nexport { default as TextArea } from './src/TextArea/macOs';\nexport { default as TitleBar } from './src/TitleBar/macOs';\nexport { default as Toolbar } from './src/Toolbar/macOs';\nexport { default as ToolbarNav } from './src/Toolbar/macOs/Nav';\nexport { default as ToolbarNavItem } from './src/Toolbar/macOs/Nav/Item';\nexport { default as View } from './src/View/macOs';\nexport { default as Window } from './src/Window/macOs';\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-desktop\",\n \"author\": \"Gabriel Bull\",\n \"version\": \"0.3.9\",\n \"description\": \"React UI Components for macOS High Sierra and Windows 10\",\n \"main\": \"./index.js\",\n \"keywords\": [\n \"react\",\n \"react-component\",\n \"electron\",\n \"node-webkit\",\n \"native\",\n \"desktop\",\n \"ui\",\n \"user\",\n \"interface\",\n \"component\",\n \"os x\",\n \"macOS\",\n \"mac\",\n \"windows\"\n ],\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/gabrielbull/react-desktop.git\"\n },\n \"scripts\": {\n \"test\": \"./node_modules/.bin/mocha test\",\n \"eslint\": \"./node_modules/.bin/eslint ./src ./test\",\n \"prebuild\": \"rsync -av -delete . build --exclude build --exclude .git --exclude .idea && npm run eslint && npm run test\",\n \"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\",\n \"playground\": \"./node_modules/.bin/webpack-dev-server --config ./playground/webpack.config.js --colors --inline --port 3001\",\n \"build-publish\": \"npm run build && npm publish ./build\"\n },\n \"dependencies\": {\n \"radium\": \"=0.19.6\"\n },\n \"peerDependencies\": {\n \"prop-types\": \"^15.0 || ^16.0\",\n \"react\": \"^15.0 || ^16.0\",\n \"react-dom\": \"^15.0 || ^16.0\"\n },\n \"devDependencies\": {\n \"babel-cli\": \"^6.26.0\",\n \"babel-core\": \"^6.26.0\",\n \"babel-eslint\": \"^8.2.2\",\n \"babel-loader\": \"^7.1.4\",\n \"babel-plugin-transform-decorators-legacy\": \"^1.3.4\",\n \"babel-preset-es2015\": \"^6.24.1\",\n \"babel-preset-react\": \"^6.24.1\",\n \"babel-preset-stage-0\": \"^6.24.1\",\n \"chai\": \"^4.1.2\",\n \"eslint\": \"^4.19.1\",\n \"eslint-plugin-import\": \"^2.10.0\",\n \"eslint-plugin-react\": \"^7.7.0\",\n \"html-webpack-plugin\": \"^3.1.0\",\n \"jsdom\": \"^11.7.0\",\n \"mocha\": \"^5.0.5\",\n \"prop-types\": \"^15.6.1\",\n \"react\": \"^16.3.0\",\n \"react-addons-test-utils\": \"^15.6.2\",\n \"react-color\": \"^2.14.0\",\n \"react-dom\": \"^16.3.0\",\n \"react-hot-loader\": \"^4.0.1\",\n \"webpack\": \"^4.4.1\",\n \"webpack-cli\": \"^3.1.2\",\n \"webpack-dev-server\": \"^3.1.1\"\n }\n}\n" }, { "path": "playground/assets/icons.js", "content": "import * as React from 'react';\n\nexport const home = (\n \n \n \n);\n\nexport const form = (\n \n \n \n);\n\nexport const progress = (\n \n \n \n);\n\nexport const listView = (\n \n \n \n);\n" }, { "path": "playground/examplesLoader.js", "content": "var fs = require('fs');\nvar path = require('path');\n\nfunction scanDir(dir) {\n var files = fs.readdirSync(dir);\n var filepath;\n var subFiles;\n var returnValue = [];\n for (var i = 0, len = files.length; i < len; ++i) {\n if (files[i].charAt(0) !== '.') {\n filepath = path.resolve(path.join(dir, files[i]));\n if (fs.lstatSync(filepath).isDirectory()) {\n subFiles = scanDir(path.join(dir, files[i]));\n returnValue.push.apply(returnValue, subFiles);\n } else {\n returnValue.push({\n file: path.join(dir, files[i]),\n filepath: filepath\n });\n }\n }\n }\n return returnValue;\n}\n\nmodule.exports = function(source) {\n var dirname = path.join(__dirname, '..');\n var files = scanDir(path.join(dirname, 'examples'));\n var file;\n\n source = 'let data = {};\\n';\n for (var i = 0, len = files.length; i < len; ++i) {\n file = files[i];\n var filename = file.file.replace(dirname, '').replace(/\\.js$/, '');\n var key = filename.replace(/[\\/\\-]/g, '_');\n source += 'import ' + key + ' from \\'.' + filename + '\\';\\n';\n source += 'data[\\'' + filename + '\\'] = ' + key + ';\\n';\n }\n\n source += 'export default data;';\n\n return source;\n};\n" }, { "path": "playground/index.js", "content": "import * as React from 'react';\nimport { render } from 'react-dom';\nimport Playground from './playground';\n\ndocument.title = 'React Desktop Playground';\ndocument.documentElement.style.width = '100%';\ndocument.documentElement.style.height = '100%';\ndocument.body.style.background = 'white';\ndocument.body.style.backgroundImage = 'url(assets/background.jpg)';\ndocument.body.style.backgroundSize = 'cover';\ndocument.body.style.margin = '0';\ndocument.body.style.padding = '0';\ndocument.body.style.width = '100%';\ndocument.body.style.height = '100%';\ndocument.body.style.overflow = 'hidden';\n\ndocument.body.innerHTML = `\n
\n`;\n\nrender(, document.getElementById('main'));\n" }, { "path": "playground/playground.js", "content": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport examples from 'examples-loader!examples';\nimport Sidebar from './ui/sidebar/sidebar';\n\nconst styles = {\n container: {\n width: '100%',\n height: '100%',\n display: 'flex'\n },\n sidebar: {\n width: '200px'\n },\n example: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '800px',\n height: '100%',\n margin: '0 auto'\n }\n};\n\nclass Playground extends React.Component {\n static childContextTypes = {\n playground: PropTypes.object\n };\n\n constructor() {\n super();\n this.state = {\n color: '#cc7f29',\n theme: 'light',\n example: null\n };\n this.loadState(false);\n }\n\n loadState(mounted = true) {\n try {\n const state = JSON.parse(localStorage['playground']);\n if (mounted) this.setState(state);\n else this.state = { ...this.state, ...state };\n } catch (err) {}\n }\n\n persistState() {\n localStorage['playground'] = JSON.stringify(this.state);\n }\n\n getChildContext() {\n return {\n playground: this\n };\n }\n\n componentDidUpdate() {\n this.persistState();\n }\n\n showExample = (example) => {\n this.setState({ example: example });\n };\n\n changeColor = (color) => {\n this.setState({ color: color });\n this.persistState();\n };\n\n changeTheme = (theme) => {\n this.setState({ theme: theme });\n this.persistState();\n };\n\n render() {\n let example;\n if (this.state.example) {\n const Example = examples['/examples/' + this.state.example];\n if (Example) {\n example = ;\n }\n }\n\n return (\n
\n \n
\n {example}\n
\n
\n );\n }\n}\n\nexport default Playground;\n" }, { "path": "playground/ui/examples/examples.js", "content": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\n\nconst styles = {\n list: {\n margin: '0px',\n padding: '0px',\n listStyle: 'none'\n },\n title: {\n display: 'block',\n color: 'white',\n fontFamily: 'sans-serif',\n fontSize: '18px',\n lineHeight: '1.4em',\n fontWeight: 'normal',\n margin: '20px 10px 10px',\n padding: '0px 0px 10px',\n borderBottom: '1px solid rgba(255, 255, 255, .2)'\n },\n subtitle: {\n fontSize: '15px',\n borderBottom: 'none',\n padding: '0px',\n margin: '20px 10px 10px',\n },\n item: {\n display: 'block',\n color: 'white',\n fontFamily: 'sans-serif',\n fontSize: '12px',\n lineHeight: '1.2em',\n fontWeight: 'normal',\n margin: 0,\n padding: '2px 10px',\n cursor: 'pointer'\n },\n itemSelect: {\n color: '#6FFFFD',\n fontWeight: 'bold'\n }\n};\n\nclass Examples extends React.Component {\n static contextTypes = {\n playground: PropTypes.object\n };\n\n static propTypes = {\n defaultExample: PropTypes.string,\n list: PropTypes.object\n };\n\n constructor(props, ...args) {\n super(props, ...args);\n this.state = {\n selected: props.defaultExample\n }\n };\n\n click = (category, key) => {\n key = (category + '/' + key).replace(/^\\//, '');\n this.context.playground.showExample(key);\n this.setState({ selected: key });\n };\n\n render() {\n return (\n
\n {this.renderItem(this.props.list)}\n
\n );\n }\n\n renderItem(item, path = '', subtitle = false) {\n let finalChildren = [];\n for (let prop in item) {\n if (item.hasOwnProperty(prop)) {\n if (typeof item[prop] === 'object') {\n let children = this.renderItem(item[prop], path ? path + '/' + prop : prop, true);\n if (children[0] && children[0].type === 'ul') {\n finalChildren.push(\n
    \n
  • \n {prop}\n {children}\n
    • \n
\n );\n } else {\n finalChildren.push(\n
    \n
  • \n {prop}\n
      \n {children}\n
    \n
    • \n
\n );\n }\n } else {\n const selected = path + '/' + prop === this.state.selected;\n finalChildren.push(\n
  • \n this.click(path, prop)}\n >\n {prop}\n \n
    • \n );\n }\n }\n }\n return finalChildren;\n }\n}\n\nexport default Examples;\n" }, { "path": "playground/ui/sidebar/logo.js", "content": "import * as React from 'react';\n\nclass Logo extends React.Component {\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default Logo;\n" }, { "path": "playground/ui/sidebar/sidebar.js", "content": "import * as React from 'react';\nimport ColorPicker from 'react-color';\nimport examples from 'examples-loader!examples';\nimport Examples from '../examples/examples';\nimport Logo from './logo';\n\nconst styles = {\n sidebar: {\n backgroundColor: 'rgba(0,0,0,.8)',\n height: '100vh',\n overflow: 'scroll',\n userSelect: 'none',\n WebkitUserSelect: 'none',\n cursor: 'default'\n }\n};\n\nclass Sidebar extends React.Component {\n constructor(...args) {\n super(...args);\n this.state = {\n example: null,\n color: this.props.color,\n displayColorPicker: false,\n theme: this.props.theme\n };\n }\n\n handleClick = () => {\n this.setState({ displayColorPicker: !this.state.displayColorPicker });\n };\n\n changeColor = (color) => {\n this.setState({ color: color.hex });\n this.props.onColorChange(color.hex);\n };\n\n changeTheme = () => {\n this.state.theme = this.state.theme === 'light' ? 'dark' : 'light';\n this.props.onThemeChange(this.state.theme);\n };\n\n render() {\n const isChecked = this.state.theme === 'dark';\n\n let colorPicker;\n if (this.state.displayColorPicker) {\n console.log(this.state.color);\n colorPicker = (\n
    \n \n
    \n )\n }\n\n return (\n
    \n \n\n \n Playground\n \n\n
    \n\n \n\n
    \n \n \n Color\n \n {colorPicker}\n
    \n\n {this.renderExamples()}\n
    \n );\n }\n\n renderExamples() {\n let list = {};\n for (var prop in examples) {\n if (examples.hasOwnProperty(prop)) {\n let path = prop.replace(/^\\/examples\\//, '').split('/');\n let currentList = list;\n path.forEach((item, index) => {\n if (index === path.length - 1) currentList[item] = examples[prop];\n else if (typeof currentList[item] === 'undefined') currentList[item] = {};\n currentList = currentList[item];\n });\n }\n }\n\n return ;\n }\n}\n\nexport default Sidebar;\n" }, { "path": "playground/webpack.config.js", "content": "var path = require('path');\nvar HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n entry: path.join(__dirname, 'index.js'),\n\n output: {\n path: path.join(__dirname),\n filename: 'bundle.js',\n publicPath: '/'\n },\n\n devServer: {\n filename: 'index.js',\n contentBase: './playground'\n },\n\n devtool: 'source-map',\n\n resolveLoader: {\n alias: {\n 'examples-loader': path.join(__dirname, 'examplesLoader')\n }\n },\n\n resolve: {\n alias: {\n 'react-desktop': path.join(__dirname, '..'),\n 'examples': path.join(__dirname, '..', 'index.js'),\n }\n },\n\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: 'babel-loader'\n }\n ]\n },\n\n plugins: [\n new HtmlWebpackPlugin()\n ]\n};\n" }, { "path": "src/Box/macOs/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './styles/10.11';\nimport Dimension, { dimensionPropTypes } from '../../style/dimension';\nimport Margin, { marginPropTypes } from '../../style/margin';\nimport Padding, { paddingPropTypes } from '../../style/padding';\nimport Alignment, { alignmentPropTypes } from '../../style/alignment';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport { backgroundPropTypes } from '../../style/background/macOs';\nimport { convertColor, darkenColor } from '../../color';\nimport Text from '../../Text/macOs';\n\n@Dimension()\n@Margin()\n@Padding()\n@Alignment()\n@Hidden()\nclass Box extends Component {\n static propTypes = {\n ...backgroundPropTypes,\n ...dimensionPropTypes,\n ...marginPropTypes,\n ...paddingPropTypes,\n ...alignmentPropTypes,\n ...hiddenPropTypes,\n label: PropTypes.string\n };\n\n static styleRefs = {\n padding: 'box',\n dimension: 'box'\n };\n\n render() {\n let { children, style, background, label, ...props } = this.props;\n const hasSegmentedControls = false;\n\n let componentStyle = { ...styles.box, ...style };\n if (hasSegmentedControls) {\n componentStyle = { ...styles.segmentedControls };\n }\n\n if (background) {\n background = convertColor(background);\n componentStyle = {\n ...componentStyle,\n backgroundColor: background,\n borderTopColor: darkenColor(background, 0.3),\n borderLeftColor: darkenColor(background, 0.24),\n borderRightColor: darkenColor(background, 0.24),\n borderBottomColor: darkenColor(background, 0.19)\n };\n }\n\n if (label) {\n return (\n
    \n \n {label}\n \n
    \n {children}\n
    \n
    \n );\n }\n componentStyle = { ...styles.wrapper, ...componentStyle };\n return (\n
    \n {children}\n
    \n );\n }\n}\n\nexport default Box;\n" }, { "path": "src/Box/macOs/styles/10.11.js", "content": "export default {\n wrapper: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n flex: '1'\n },\n\n box: {\n backgroundColor: 'rgba(0, 0, 0, .04)',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderTopColor: 'rgba(0, 0, 0, .07)',\n borderLeftColor: 'rgba(0, 0, 0, .037)',\n borderRightColor: 'rgba(0, 0, 0, .037)',\n borderBottomColor: 'rgba(0, 0, 0, .026)',\n borderRadius: '4px',\n position: 'relative',\n padding: '23px 18px 22px 18px'\n },\n\n segmentedControls: {\n marginTop: '10px',\n paddingTop: '33px'\n }\n};\n" }, { "path": "src/Button/macOs/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../windowFocus';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport FontSize, { fontSizePropTypes } from '../../style/fontSize';\nimport Padding, { paddingPropTypes, removeDuplicatePaddingProps } from '../../style/padding';\nimport Margin, { marginPropTypes } from '../../style/margin';\nimport styles from './styles/10.11';\nimport Radium from 'radium';\n\n@WindowFocus()\n@Padding()\n@Margin()\n@Hidden()\n@FontSize()\n@Radium\nclass Button extends Component {\n static propTypes = {\n ...hiddenPropTypes,\n ...fontSizePropTypes,\n ...paddingPropTypes,\n ...marginPropTypes,\n type: PropTypes.string,\n color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n onClick: PropTypes.func,\n onEnter: PropTypes.func,\n disabled: PropTypes.bool\n };\n\n componentDidMount() {\n if (window && this.props.onEnter) {\n window.addEventListener('keyup', this.handleKeyUp);\n }\n }\n\n componentWillUnmount() {\n if (window && this.props.onEnter) {\n window.removeEventListener('keyup', this.handleKeyUp);\n }\n }\n\n handleKeyUp = e => {\n if (e.keyCode === 13) {\n if (this.props.onEnter && !this.props.disabled) this.props.onEnter(e);\n }\n };\n\n render() {\n let { style, type, children, color, onClick, isWindowFocused, disabled, ...props } = this.props;\n delete props.onEnter;\n\n let componentStyle = { ...styles.button };\n if (!disabled && color === 'blue' && isWindowFocused) {\n componentStyle = { ...componentStyle, ...styles.blue };\n } else if (disabled) {\n componentStyle = { ...componentStyle, opacity: '.5' };\n }\n\n componentStyle = { ...componentStyle, ...style };\n\n return (\n \n {children}\n \n );\n }\n}\n\nexport default Button;\n" }, { "path": "src/Button/macOs/styles/10.11.js", "content": "export default {\n button: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n backgroundColor: '#ffffff',\n outline: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderRadius: '5px',\n borderTopColor: '#c8c8c8',\n borderBottomColor: '#acacac',\n borderLeftColor: '#c2c2c2',\n borderRightColor: '#c2c2c2',\n boxShadow: '0 1px rgba(0, 0, 0, .039)',\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: '13px',\n paddingRight: '13px',\n lineHeight: '19px',\n fontFamily: '-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif',\n fontSize: '13px',\n\n ':active': {\n backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)',\n borderTopColor: '#247fff',\n borderBottomColor: '#003ddb',\n borderLeftColor: '#125eed',\n borderRightColor: '#125eed',\n color: 'rgba(255, 255, 255, .9 )'\n }\n },\n\n blue: {\n backgroundImage: '-webkit-linear-gradient(top, #6cb3fa 0%, #087eff 100%)',\n borderTopColor: '#4ca2f9',\n borderBottomColor: '#015cff',\n borderLeftColor: '#267ffc',\n borderRightColor: '#267ffc',\n color: 'rgba(255, 255, 255, .9)',\n\n ':active': {\n backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)',\n borderTopColor: '#247fff',\n borderBottomColor: '#003ddb',\n borderLeftColor: '#125eed',\n borderRightColor: '#125eed',\n color: 'rgba(255, 255, 255, .9 )'\n }\n }\n};\n" }, { "path": "src/Button/windows/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { colorPropTypes, colorContextTypes } from '../../style/color/windows';\nimport { ThemeContext, themePropTypes } from '../../style/theme/windows';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport Radium from 'radium';\nimport { darkenColor } from '../../color';\nimport styles from './styles/windows10';\n\n@Hidden()\n@ThemeContext()\n@Radium\nclass Button extends Component {\n static propTypes = {\n ...hiddenPropTypes,\n ...colorPropTypes,\n ...themePropTypes,\n type: PropTypes.string,\n push: PropTypes.bool,\n onClick: PropTypes.func\n };\n\n static contextTypes = {\n ...colorContextTypes\n };\n\n render() {\n let { style, type, children, color, push, onClick, ...props } = this.props;\n\n let componentStyle = { ...styles.button, ...style };\n\n if (color) {\n color = color === true ? this.context.color : color;\n styles.colorButton = {\n ...styles.colorButton,\n borderColor: color,\n backgroundColor: color,\n ':hover': {\n ...styles.colorButton[':hover'],\n borderColor: darkenColor(color, .35)\n },\n\n ':active': {\n ...styles.colorButton[':active'],\n borderColor: darkenColor(color, .35),\n backgroundColor: darkenColor(color, .35)\n }\n };\n componentStyle = { ...componentStyle, ...styles.colorButton };\n }\n\n if (push) {\n componentStyle[':active'] = { ...componentStyle[':active'], ...styles.pushTransform };\n }\n\n return (\n \n {children}\n \n );\n }\n}\n\nexport default Button;\n" }, { "path": "src/Button/windows/styles/windows10.js", "content": "export default {\n button: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n backgroundColor: '#cccccc',\n outline: 'none',\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: '#cccccc',\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: '32px',\n paddingRight: '32px',\n lineHeight: '28px',\n fontFamily: '\"Segoe UI\", Frutiger, \"Frutiger Linotype\", \"Dejavu Sans\", \"Helvetica Neue\", Arial, sans-serif',\n fontSize: '15px',\n color: '#000000',\n\n ':hover': {\n color: '#000000',\n borderColor: '#7a7a7a'\n },\n\n ':active': {\n color: '#000000',\n borderColor: '#999999',\n backgroundColor: '#999999'\n }\n },\n\n colorButton: {\n color: '#ffffff',\n borderColor: '#0078d7',\n backgroundColor: '#0078d7',\n\n ':hover': {\n borderColor: '#004e8c'\n },\n\n ':active': {\n borderColor: '#004e8c',\n backgroundColor: '#004e8c'\n }\n },\n\n pushTransform: {\n transform: 'scale(0.97)',\n transition: 'transform .1s ease-in'\n }\n};\n" }, { "path": "src/Checkbox/macOs/Checkmark.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Radium from 'radium';\nimport styles from './styles/10.11';\n\n@Radium\nclass Checkmark extends Component {\n static propTypes = {\n show: PropTypes.bool,\n color: PropTypes.string,\n shadowColor: PropTypes.string\n };\n\n static defaultProps = {\n color: '#FFFFFF'\n };\n\n render() {\n const { color, shadowColor } = this.props;\n let style = { ...styles.checkmark };\n style.opacity = '0';\n style.transform = 'scale(0)';\n style.transition = 'all 0.5s';\n\n if (this.props.show) {\n style.opacity = '1';\n style.transform = 'scale(1)';\n }\n\n return (\n
    \n \n \n \n \n \n \n
    \n );\n }\n}\n\nexport default Checkmark;\n" }, { "path": "src/Checkbox/macOs/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport WindowFocus from '../../windowFocus';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport Radium, { getState } from 'radium';\nimport styles from './styles/10.11';\nimport Checkmark from './Checkmark';\nimport Text from '../../Text/macOs';\nimport ValueRef from '../../ValueRef';\n\n@ValueRef()\n@WindowFocus()\n@Hidden()\n@Radium\nclass Checkbox extends Component {\n static propTypes = {\n ...hiddenPropTypes,\n label: PropTypes.string,\n onChange: PropTypes.func\n };\n\n constructor(props) {\n super();\n this.state = {\n checked: !!props.defaultChecked === true,\n transition: true\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.isWindowFocused !== this.props.isWindowFocused) {\n this.setState({ transition: false });\n }\n }\n\n componentDidUpdate() {\n if (!this.state.transition) {\n setTimeout(() => this.setState({ transition: true }), 0);\n }\n }\n\n onChange = event => {\n this.setState({ checked: event.target.checked });\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n render() {\n let { style, label, isWindowFocused, ...props } = this.props;\n const { transition } = this.state;\n let componentStyle = { ...styles.checkbox, ...style };\n let labelStyle = styles.label;\n let checkMarkColor = '#FFFFFF';\n let shadowColor = '#0050a5';\n\n if (this.state.checked) {\n if (isWindowFocused) {\n componentStyle = {\n ...componentStyle,\n ...styles['checkbox:checked']\n };\n if (!transition) componentStyle.transition = 'none';\n } else {\n componentStyle = {\n ...componentStyle,\n ...styles['checkbox:checked:unfocused']\n };\n checkMarkColor = '#404040';\n shadowColor = '#FFFFFF';\n }\n }\n\n if (getState(this.state, null, ':active')) {\n if (this.state.checked) {\n componentStyle = {\n ...componentStyle,\n ...styles['checkbox:checked:active']\n };\n shadowColor = '#001d99';\n } else {\n componentStyle = {\n ...componentStyle,\n ...styles['checkbox:active']\n };\n }\n }\n\n return (\n
    \n \n
    \n );\n }\n}\n\nexport default Checkbox;\n" }, { "path": "src/Checkbox/macOs/styles/10.11.js", "content": "export default {\n container: {\n display: 'flex'\n },\n\n label: {\n display: 'flex',\n height: '20px',\n position: 'relative',\n\n ':hover': {},\n ':active': {}\n },\n\n inputWrapper: {\n position: 'relative',\n marginRight: '3px',\n paddingTop: '1px'\n },\n\n checkbox: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n WebkitAppearance: 'none',\n appearance: 'none',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: '#b8b8b8',\n borderRadius: '3px',\n backgroundColor: '#ffffff',\n padding: '6px',\n margin: '0 1px',\n boxShadow: 'inset 0 1px 0 0 rgba(224, 224, 224, .4)',\n transition: 'all 0.4s',\n\n ':focus': {\n outline: 'none'\n }\n },\n\n 'checkbox:active': {\n borderColor: '#a4a4a4',\n backgroundColor: '#f0f0f0',\n boxShadow: 'inset 0 0 0 1px rgba(117, 117, 117, .35)',\n transition: 'all 0.4s'\n },\n\n 'checkbox:checked': {\n backgroundColor: '#3b99fc',\n boxShadow: 'none',\n borderColor: '#2c91fc',\n transition: 'all 0.4s'\n },\n\n 'checkbox:checked:unfocused': {\n backgroundColor: '#ffffff',\n boxShadow: 'none',\n borderColor: '#b8b8b8',\n transition: 'none'\n },\n\n 'checkbox:checked:active': {\n backgroundColor: '#0080f6',\n borderColor: '#006adc',\n boxShadow: 'inset 0 0 0 1px rgba(19, 68, 119, .22)',\n transition: 'all 0.4s'\n },\n\n checkmark: {\n position: 'absolute',\n top: '4px',\n left: '4px',\n width: '8px',\n height: '8px'\n },\n\n svg: {\n zIndex: '2',\n position: 'absolute',\n top: '0px',\n left: '0px',\n height: '8px'\n },\n\n svgShadow: {\n zIndex: '1',\n position: 'absolute',\n top: '1.5px',\n left: '0px',\n opacity: '.37',\n height: '8px',\n filter: 'blur(.5px)'\n }\n};\n" }, { "path": "src/Checkbox/windows/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ColorContext, colorPropTypes, colorContextTypes } from '../../style/color/windows';\nimport { ThemeContext, themePropTypes, themeContextTypes } from '../../style/theme/windows';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport Radium, { getState } from 'radium';\nimport styles from './styles/windows10';\nimport ValueRef from '../../ValueRef';\n\n@ValueRef()\n@Hidden()\n@ColorContext()\n@ThemeContext()\n@Radium\nclass Checkbox extends Component {\n static propTypes = {\n ...hiddenPropTypes,\n ...colorPropTypes,\n ...themePropTypes,\n label: PropTypes.string,\n onChange: PropTypes.func\n };\n\n static contextTypes = {\n ...colorContextTypes,\n ...themeContextTypes\n };\n\n constructor(props) {\n super();\n this.state = {\n checked: !!props.defaultChecked === true\n };\n }\n\n handleChange = event => {\n this.setState({ checked: event.target.checked });\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n render() {\n let { style, label, color, ...props } = this.props;\n let componentStyle = { ...styles.checkbox };\n let checkedStyle = { display: 'none' };\n let textStyle = { ...styles.text };\n\n if (this.context.theme === 'dark') {\n componentStyle = { ...componentStyle, ...styles.checkboxDark };\n textStyle = { ...textStyle, ...styles.textDark };\n }\n\n if (this.state.checked) {\n checkedStyle = styles.svg;\n componentStyle = {\n ...componentStyle,\n ...(this.context.theme === 'dark' ? styles['checkboxDark:checked'] : styles['checkbox:checked'])\n };\n\n color = color ? color : this.context.color;\n componentStyle = {\n ...componentStyle,\n backgroundColor: color,\n borderColor: color\n };\n }\n\n if (getState(this.state, null, ':active')) {\n componentStyle = {\n ...componentStyle,\n ...(this.context.theme === 'dark' ? styles['checkboxDark:active'] : styles['checkbox:active'])\n };\n } else if (getState(this.state, null, ':hover')) {\n componentStyle = {\n ...componentStyle,\n ...(this.context.theme === 'dark' ? styles['checkboxDark:hover'] : styles['checkbox:hover'])\n };\n }\n\n return (\n
    \n \n
    \n );\n }\n}\n\nexport default Checkbox;\n" }, { "path": "src/Checkbox/windows/styles/windows10.js", "content": "export default {\n container: {\n display: 'flex',\n marginBottom: '22px'\n },\n\n label: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n\n ':hover': {},\n ':active': {}\n },\n\n text: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n fontFamily: '\"Segoe UI\", Frutiger, \"Frutiger Linotype\", \"Dejavu Sans\", \"Helvetica Neue\", Arial, sans-serif',\n fontSize: '15px',\n marginTop: '1px',\n color: '#000000'\n },\n\n textDark: {\n color: '#ffffff'\n },\n\n inputWrapper: {\n position: 'relative',\n marginRight: '3px',\n paddingTop: '1px'\n },\n\n checkbox: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n WebkitAppearance: 'none',\n appearance: 'none',\n outline: 'none',\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: 'rgba(0, 0, 0, .8)',\n padding: '8px',\n color: '#fff',\n verticalAlign: 'bottom',\n marginRight: '6px',\n\n ':focus': {\n outline: 'none'\n }\n },\n\n checkboxDark: {\n borderColor: 'rgba(255, 255, 255, .82)',\n },\n\n 'checkbox:active': {\n borderColor: 'rgba(0, 0, 0, 0)',\n backgroundColor: 'rgba(0, 0, 0, .57)'\n },\n\n 'checkbox:hover': {\n borderColor: 'rgba(0, 0, 0, 1)'\n },\n\n 'checkbox:checked': {\n backgroundColor: '#007CD1',\n borderColor: '#007CD1'\n },\n\n 'checkboxDark:active': {\n borderColor: 'rgba(255, 255, 255, 0)',\n backgroundColor: 'rgba(255, 255, 255, .63)'\n },\n\n 'checkboxDark:hover': {\n borderColor: 'rgba(255, 255, 255, 1)'\n },\n\n 'checkboxDark:checked': {\n backgroundColor: '#007CD1',\n borderColor: '#007CD1'\n },\n\n svg: {\n position: 'absolute',\n top: '6px',\n left: '5px',\n color: '#fff',\n height: '16px'\n }\n};\n" }, { "path": "src/Dialog/macOs/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '../../style/margin';\nimport Alignment, {\n alignmentPropTypes,\n removeAlignmentProps\n} from '../../style/alignment';\nimport Text from '../../Text/macOs';\nimport styles from './style/10.11';\n\n@Margin({\n marginTop: '17px',\n marginBottom: '19px',\n marginLeft: '20px',\n marginRight: '20px'\n})\nclass Dialog extends Component {\n static propTypes = {\n ...marginPropTypes,\n ...alignmentPropTypes,\n icon: PropTypes.element,\n title: PropTypes.string,\n message: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),\n buttons: PropTypes.array\n };\n\n isLast(...next) {\n let isLast = false;\n for (let i = 0, len = next.length; i < len; ++i) {\n if (next[i]) isLast = false;\n }\n return isLast;\n }\n\n render() {\n let {\n icon,\n style,\n title,\n message,\n children,\n buttons,\n ...props\n } = this.props;\n\n props = removeAlignmentProps(props);\n\n return (\n
    \n {this.renderIcon(icon)}\n
    \n {this.renderTitle(title, this.isLast(message, children, buttons))}\n {this.renderMessage(message, this.isLast(children, buttons))}\n {this.renderChildren(children, this.isLast(buttons))}\n {this.renderButtons(buttons)}\n
    \n
    \n );\n }\n\n renderIcon(icon) {\n if (icon) {\n return (\n
    e.preventDefault()}>\n {icon}\n
    \n );\n }\n return null;\n }\n\n renderTitle(title, isLast) {\n const style = styles.title;\n if (isLast) delete style.marginBottom;\n if (title)\n return (\n \n {title}\n \n );\n return null;\n }\n\n renderMessage(message, isLast) {\n const style = styles.message;\n if (isLast) delete style.marginBottom;\n if (message) return {message};\n return null;\n }\n\n renderChildren(children, isLast) {\n const style = styles.content;\n if (isLast) delete style.marginBottom;\n if (children)\n return Alignment(
    {children}
    , {\n ...this.props,\n layout: 'vertical'\n });\n return null;\n }\n\n renderButtons(buttons) {\n if (buttons) {\n return (\n
    \n {buttons.map((button, index) => (\n
    \n {button}\n
    \n ))}\n
    \n );\n }\n return null;\n }\n}\n\nexport default Dialog;\n" }, { "path": "src/Dialog/macOs/style/10.11.js", "content": "export default {\n container: {\n MozUserSelect: 'none',\n WebkitUserSelect: 'none',\n MsUserSelect: 'none',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n userDrag: 'none',\n WebkitTouchCallout: 'none',\n display: 'flex',\n position: 'relative'\n },\n icon: {\n width: '67px',\n marginRight: '20px',\n display: 'flex',\n justifyContent: 'center',\n },\n contentContainer: {\n flex: 1\n },\n title: {\n marginBottom: '5px'\n },\n message: {\n marginBottom: '16px'\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '16px',\n position: 'relative'\n },\n buttons: {\n display: 'flex',\n justifyContent: 'flex-end'\n },\n buttonContainer: {\n marginLeft: '14px'\n }\n};\n" }, { "path": "src/Label/macOs/index.js", "content": "import Label from '../../Text/macOs';\n\nexport default Label;\n" }, { "path": "src/Label/windows/index.js", "content": "import Label from '../../Text/windows';\n\nexport default Label;\n" }, { "path": "src/Link/macOs/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Margin, { marginPropTypes } from '../../style/margin';\nimport Padding, { paddingPropTypes } from '../../style/padding';\nimport FontSize, { fontSizePropTypes } from '../../style/fontSize';\nimport Dimension, { dimensionPropTypes } from '../../style/dimension';\nimport TextAlign, { textAlignPropTypes } from '../../style/textAlign';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\n\nconst componentStyle = {\n display: 'inline-block',\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n fontFamily: '-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif',\n fontSize: '11px',\n textDecoration: 'none'\n};\n\n@Margin()\n@Padding()\n@FontSize()\n@Dimension()\n@TextAlign()\n@Hidden()\nclass Link extends Component {\n static propTypes = {\n ...marginPropTypes,\n ...paddingPropTypes,\n ...fontSizePropTypes,\n ...dimensionPropTypes,\n ...textAlignPropTypes,\n ...hiddenPropTypes,\n color: PropTypes.string\n };\n\n static defaultProps = {\n color: '#009df0'\n };\n\n render() {\n const { color, children, style, ...props } = this.props;\n\n return (\n \n {children}\n \n );\n }\n}\n\nexport default Link;\n" }, { "path": "src/ListView/macOs/Footer/index.js", "content": "import React, { Component } from 'react';\nimport Background, { backgroundPropTypes } from '../../../style/background/macOs';\nimport Dimension, { dimensionPropTypes } from '../../../style/dimension';\nimport Padding, { paddingPropTypes } from '../../../style/padding';\nimport styles from './style/10.11';\n\n@Background({ background: '#f0f0f0' })\n@Dimension()\n@Padding({ paddingLeft: '10px', paddingRight: '10px', paddingTop: '2px', paddingBottom: '2px' })\nclass Footer extends Component {\n static propTypes = {\n ...backgroundPropTypes,\n ...dimensionPropTypes,\n ...paddingPropTypes\n };\n\n render() {\n const { children, style, ...props } = this.props;\n\n return (\n
    \n {children}\n
    \n );\n }\n}\n\nexport default Footer;\n" }, { "path": "src/ListView/macOs/Footer/style/10.11.js", "content": "export default {\n header: {\n top: '0px',\n left: '0px',\n width: '100%',\n borderTopWidth: '1px',\n borderTopStyle: 'solid',\n borderTopColor: '#c9c9c9',\n boxSizing: 'border-box'\n }\n};\n" }, { "path": "src/ListView/macOs/Header/index.js", "content": "import React, { Component } from 'react';\nimport Background, { backgroundPropTypes } from '../../../style/background/macOs';\nimport Dimension, { dimensionPropTypes } from '../../../style/dimension';\nimport Padding, { paddingPropTypes } from '../../../style/padding';\nimport styles from './style/10.11';\n\n@Background({ background: '#f0f0f0' })\n@Dimension()\n@Padding({ paddingLeft: '10px', paddingRight: '10px', paddingTop: '2px', paddingBottom: '2px' })\nclass Header extends Component {\n static propTypes = {\n ...backgroundPropTypes,\n ...dimensionPropTypes,\n ...paddingPropTypes\n };\n\n render() {\n const { children, style, ...props } = this.props;\n\n return (\n
    \n {children}\n
    \n );\n }\n}\n\nexport default Header;\n" }, { "path": "src/ListView/macOs/Header/style/10.11.js", "content": "export default {\n header: {\n top: '0px',\n left: '0px',\n width: '100%',\n borderBottomWidth: '1px',\n borderBottomStyle: 'solid',\n borderBottomColor: '#c9c9c9',\n boxSizing: 'border-box'\n }\n};\n" }, { "path": "src/ListView/macOs/Row/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Background, { backgroundPropTypes } from '../../../style/background/macOs';\nimport Alignment, { alignmentPropTypes } from '../../../style/alignment';\nimport Dimension, { dimensionPropTypes } from '../../../style/dimension';\nimport Hidden, { hiddenPropTypes } from '../../../style/hidden';\nimport Margin, { marginPropTypes } from '../../../style/margin';\nimport Padding, { paddingPropTypes } from '../../../style/padding';\nimport styles from './style/10.11';\n\n@Background()\n@Alignment()\n@Dimension()\n@Hidden()\n@Margin({ marginTop: '4px', marginBottom: '4px' })\n@Padding({ paddingLeft: '18px', paddingRight: '18px', paddingTop: '5px', paddingBottom: '5px' })\nclass Row extends Component {\n static propTypes = {\n ...backgroundPropTypes,\n ...alignmentPropTypes,\n ...dimensionPropTypes,\n ...hiddenPropTypes,\n ...marginPropTypes,\n ...paddingPropTypes,\n layout: PropTypes.string\n };\n\n static defaultProps = {\n layout: 'horizontal'\n };\n\n render() {\n const { horizontalAlignment, children, style, layout, ...props } = this.props;\n\n let componentStyle = { ...styles.row };\n\n if (layout === 'vertical') {\n componentStyle.flexDirection = 'column';\n if (horizontalAlignment) {\n switch(horizontalAlignment) {\n case 'center': componentStyle.alignItems = 'center'; break;\n case 'left': componentStyle.alignItems = 'flex-start'; break;\n case 'right': componentStyle.alignItems = 'flex-end'; break;\n }\n }\n } else {\n if (horizontalAlignment) {\n switch(horizontalAlignment) {\n case 'center': componentStyle.justifyContent = 'center'; break;\n case 'left': componentStyle.justifyContent = 'flex-start'; break;\n case 'right': componentStyle.justifyContent = 'flex-end'; break;\n }\n }\n }\n\n return (\n
  • \n {children}\n
    • \n );\n }\n}\n\nexport default Row;\n" }, { "path": "src/ListView/macOs/Row/style/10.11.js", "content": "export default {\n row: {\n WebkitUserSelect: 'none',\n userSelect: 'none',\n cursor: 'default',\n display: 'flex',\n position: 'relative'\n }\n};\n" }, { "path": "src/ListView/macOs/Section/Header/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './style/10.11';\nimport Text from '../../../../Text/macOs';\nimport Margin, {\n marginPropTypes,\n removeMarginProps\n} from '../../../../style/margin';\nimport Padding, {\n paddingPropTypes,\n removePaddingProps\n} from '../../../../style/padding';\nimport { fontSizePropTypes } from '../../../../style/fontSize';\nimport mapStyles from '../../../../utils/mapStyles';\n\nclass Header extends Component {\n static propTypes = {\n ...marginPropTypes,\n ...paddingPropTypes,\n ...fontSizePropTypes,\n color: PropTypes.string,\n bold: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.number,\n PropTypes.string\n ])\n };\n\n static defaultProps = {\n color: '#5a5b5c',\n bold: true,\n size: '10'\n };\n\n static mapStyles = {\n text: ['color', 'fontSize', 'fontWeight', 'lineHeight', 'fontFamily']\n };\n\n render() {\n let { color, bold, size, children, style, ...props } = this.props;\n\n props = removePaddingProps(removeMarginProps(props));\n\n let [headerStyle, textStyle] = mapStyles(style, Header.mapStyles);\n\n return (\n
    \n {Padding(\n Margin(\n

    \n \n {children}\n \n

    ,\n this.props\n ),\n this.props\n )}\n
    \n );\n }\n}\n\nexport default Header;\n" }, { "path": "src/ListView/macOs/Section/Header/style/10.11.js", "content": "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", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Header from './Header';\nimport styles from './style/10.11';\n\nclass Section extends Component {\n static propTypes = {\n header: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.array\n ])\n };\n\n render() {\n let { children, header, ...props } = this.props;\n\n if (typeof header === 'string') {\n header =
    {header}
    ;\n }\n\n return (\n
    \n {header}\n
      {children}
    \n
    \n );\n }\n}\n\nexport default Section;\n" }, { "path": "src/ListView/macOs/Section/style/10.11.js", "content": "export default {\n list: {\n listStyle: 'none',\n padding: '0px',\n margin: '0px'\n }\n};\n" }, { "path": "src/ListView/macOs/Separator/index.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dimension, { dimensionPropTypes } from '../../../style/dimension';\nimport Hidden, { hiddenPropTypes } from '../../../style/hidden';\nimport Margin, { marginPropTypes } from '../../../style/margin';\nimport Padding, { paddingPropTypes } from '../../../style/padding';\nimport styles from './style/10.11';\n\n@Dimension()\n@Hidden()\n@Margin({ marginLeft: '10px', marginRight: '10px', marginTop: '4px', marginBottom: '4px' })\n@Padding()\nclass Separator extends Component {\n static propTypes = {\n ...dimensionPropTypes,\n ...hiddenPropTypes,\n ...marginPropTypes,\n ...paddingPropTypes,\n color: PropTypes.string,\n };\n\n static defaultProps = {\n color: '#e5e5e5'\n };\n\n render() {\n const { style, ...props } = this.props;\n\n return (\n
    \n );\n }\n}\n\nexport default Separator;\n" }, { "path": "src/ListView/macOs/Separator/style/10.11.js", "content": "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", "content": "import React, { Component, Children } from 'react';\nimport styles from './style/10.11';\nimport Background, { backgroundPropTypes } from '../../style/background/macOs';\nimport Dimension, { dimensionPropTypes } from '../../style/dimension';\nimport Hidden, { hiddenPropTypes } from '../../style/hidden';\nimport Margin, { marginPropTypes } from '../../style/margin';\nimport Padding, { paddingPropTypes } from '../../style/padding';\nimport Header from './Header';\nimport Footer from './Footer';\nimport Row from './Row';\n\n@Background()\n@Dimension()\n@Hidden()\n@Margin()\n@Padding()\nclass ListView extends Component {\n static propTypes = {\n ...backgroundPropTypes,\n ...dimensionPropTypes,\n ...hiddenPropTypes,\n ...marginPropTypes,\n ...paddingPropTypes\n };\n\n mapChildren(children) {\n let hasDirectRows = false;\n let header = null,\n items = null,\n footer = null;\n Children.map(children, child => {\n const HeaderEl =
    ;\n const FooterEl =