Repository: chandu0101/scalajs-react-components Branch: master Commit: 56864d39ca66 Files: 250 Total size: 725.4 KB Directory structure: gitextract_2kkbcz6e/ ├── .gitignore ├── .scalafmt.conf ├── .travis.yml ├── LICENSE ├── NOTICE ├── README.md ├── build.sbt ├── core/ │ └── src/ │ └── main/ │ └── scala/ │ └── chandu0101/ │ └── scalajs/ │ └── react/ │ └── components/ │ ├── DefaultSelect.scala │ ├── GoogleMap.scala │ ├── Implicits.scala │ ├── Pager.scala │ ├── ReactDraggable.scala │ ├── ReactGeomIcon.scala │ ├── ReactInfinite.scala │ ├── ReactListView.scala │ ├── ReactPopOver.scala │ ├── ReactSearchBox.scala │ ├── ReactTable.scala │ ├── ReactTagsInput.scala │ ├── ReactTapEventPlugin.scala │ ├── ReactTreeView.scala │ ├── Spinner.scala │ ├── elementalui/ │ │ ├── Eui.scala │ │ └── types.scala │ ├── fascades/ │ │ └── GoogleMapFascade.scala │ ├── helpers.scala │ ├── hljs/ │ │ ├── HLJSStatic.scala │ │ ├── Hljs.scala │ │ ├── IAutoHighlightResult.scala │ │ ├── ICompiledMode.scala │ │ ├── IHighlightResult.scala │ │ ├── IHighlightResultBase.scala │ │ ├── IMode.scala │ │ ├── IModeBase.scala │ │ └── IOptions.scala │ ├── materialui/ │ │ ├── Mui.scala │ │ ├── MuiAutoCompleteFilters.scala │ │ ├── MuiColors.scala │ │ ├── MuiStyles.scala │ │ ├── MuiSvgIcons.scala │ │ ├── MuiUtil.scala │ │ ├── package.scala │ │ ├── raw/ │ │ │ └── TouchTapEvent.scala │ │ └── types.scala │ ├── package.scala │ ├── reactsplitpane/ │ │ └── ReactSplitPane.scala │ └── semanticui/ │ ├── Sui.scala │ └── types.scala ├── demo/ │ ├── index.html │ ├── src/ │ │ └── main/ │ │ └── scala/ │ │ └── demo/ │ │ ├── AppCSS.scala │ │ ├── CallbackDebug.scala │ │ ├── ReactApp.scala │ │ ├── components/ │ │ │ ├── AppHeader.scala │ │ │ ├── CallbackDebug.scala │ │ │ ├── CodeExample.scala │ │ │ ├── CodeHighlight.scala │ │ │ ├── ComponentCredits.scala │ │ │ ├── ComponentGridItem.scala │ │ │ ├── GithubUser.scala │ │ │ ├── Images.scala │ │ │ ├── InfoTemplate.scala │ │ │ ├── LeftNav.scala │ │ │ ├── LeftNavPage.scala │ │ │ ├── LocalDemoButton.scala │ │ │ ├── ReactDraggableDemo.scala │ │ │ ├── ReactDraggableInfo.scala │ │ │ ├── ReactGeomIconDemo.scala │ │ │ ├── ReactGeomIconInfo.scala │ │ │ ├── ReactInfiniteDemo.scala │ │ │ ├── ReactInfiniteInfo.scala │ │ │ ├── ReactListViewDemo.scala │ │ │ ├── ReactListViewInfo.scala │ │ │ ├── ReactPopoverDemo.scala │ │ │ ├── ReactPopoverInfo.scala │ │ │ ├── ReactTagsInputDemo.scala │ │ │ ├── ReactTagsInputInfo.scala │ │ │ ├── ReactTreeViewDemo.scala │ │ │ ├── ReactTreeViewInfo.scala │ │ │ ├── RedLink.scala │ │ │ ├── ScalaCSSTutorial.scala │ │ │ ├── SpinnerDemo.scala │ │ │ ├── SpinnerInfo.scala │ │ │ ├── elementalui/ │ │ │ │ ├── EuiButtonsDemo.scala │ │ │ │ ├── EuiFormsDemo.scala │ │ │ │ ├── EuiGlyphsDemo.scala │ │ │ │ ├── EuiInfo.scala │ │ │ │ ├── EuiMiscDemo.scala │ │ │ │ ├── EuiModalDemo.scala │ │ │ │ └── EuiSpinnerDemo.scala │ │ │ ├── googlemap/ │ │ │ │ ├── GoogleMapBasic.scala │ │ │ │ ├── GoogleMapCustomMarkerIcon.scala │ │ │ │ ├── GoogleMapInfo.scala │ │ │ │ ├── GoogleMapMarkerInfoWindow.scala │ │ │ │ ├── GoogleMapMarkers.scala │ │ │ │ └── MutableGoogleMapMarkers.scala │ │ │ ├── materialui/ │ │ │ │ ├── MobileTearSheet.scala │ │ │ │ ├── MuiAppBarDemo.scala │ │ │ │ ├── MuiAutoCompleteDemo.scala │ │ │ │ ├── MuiAvatarDemo.scala │ │ │ │ ├── MuiButtonsDemo.scala │ │ │ │ ├── MuiDatePickerDemo.scala │ │ │ │ ├── MuiDialogDemo.scala │ │ │ │ ├── MuiDrawerDemo.scala │ │ │ │ ├── MuiDropDownMenuDemo.scala │ │ │ │ ├── MuiInfo.scala │ │ │ │ ├── MuiListDemo.scala │ │ │ │ ├── MuiMenuDemo.scala │ │ │ │ ├── MuiPaperDemo.scala │ │ │ │ ├── MuiPopoverDemo.scala │ │ │ │ ├── MuiProgressDemo.scala │ │ │ │ ├── MuiSelectFieldDemo.scala │ │ │ │ ├── MuiSliderDemo.scala │ │ │ │ ├── MuiSnackBarDemo.scala │ │ │ │ ├── MuiSvgIconDemo.scala │ │ │ │ ├── MuiSwitchesDemo.scala │ │ │ │ ├── MuiTableDemo.scala │ │ │ │ ├── MuiTabsDemo.scala │ │ │ │ ├── MuiTextFieldDemo.scala │ │ │ │ ├── MuiThemeProviderDemo.scala │ │ │ │ ├── MuiTimePickerDemo.scala │ │ │ │ └── MuiToolbarDemo.scala │ │ │ ├── reactsplitpane/ │ │ │ │ ├── ReactSplitPaneInfo.scala │ │ │ │ ├── ReactSplitPaneSimpleHorizontal.scala │ │ │ │ ├── ReactSplitPaneSimpleNested.scala │ │ │ │ └── ReactSplitPaneSimpleVertical.scala │ │ │ ├── reacttable/ │ │ │ │ ├── ReactTableBasic.scala │ │ │ │ ├── ReactTableCustomCell.scala │ │ │ │ ├── ReactTableCustomColumnSize.scala │ │ │ │ └── ReactTableInfo.scala │ │ │ └── semanticui/ │ │ │ ├── SuiButtonDemo.scala │ │ │ ├── SuiContainerDemo.scala │ │ │ ├── SuiDividerDemo.scala │ │ │ ├── SuiFlagDemo.scala │ │ │ ├── SuiGridDemo.scala │ │ │ ├── SuiHeaderDemo.scala │ │ │ ├── SuiIconDemo.scala │ │ │ ├── SuiInfo.scala │ │ │ ├── SuiInputDemo.scala │ │ │ └── SuiListDemo.scala │ │ ├── pages/ │ │ │ ├── EuiPage.scala │ │ │ ├── GoogleMapPage.scala │ │ │ ├── HomePage.scala │ │ │ ├── MuiPage.scala │ │ │ ├── ReactDraggablePage.scala │ │ │ ├── ReactGeomIconPage.scala │ │ │ ├── ReactInfinitePage.scala │ │ │ ├── ReactListViewPage.scala │ │ │ ├── ReactPopoverPage.scala │ │ │ ├── ReactSplitPanePage.scala │ │ │ ├── ReactTablePage.scala │ │ │ ├── ReactTagsInputPage.scala │ │ │ ├── ReactTreeViewPage.scala │ │ │ ├── SpinnerPage.scala │ │ │ └── SuiPage.scala │ │ ├── routes/ │ │ │ ├── AppRouter.scala │ │ │ ├── EuiRouteModule.scala │ │ │ ├── GoogleMapRouteModule.scala │ │ │ ├── LeftRoute.scala │ │ │ ├── MuiRouteModule.scala │ │ │ ├── ReactDraggableRouteModule.scala │ │ │ ├── ReactGeomIcontRouteModule.scala │ │ │ ├── ReactInfiniteRouteModule.scala │ │ │ ├── ReactListViewRouteModule.scala │ │ │ ├── ReactPopoverRouteModule.scala │ │ │ ├── ReactSplitPaneRouteModule.scala │ │ │ ├── ReactTableRouteModule.scala │ │ │ ├── ReactTagsInputRouteModule.scala │ │ │ ├── ReactTreeViewRouteModule.scala │ │ │ ├── SpinnerRouteModule.scala │ │ │ └── SuiRouteModule.scala │ │ └── util/ │ │ └── SampleData.scala │ ├── webpack.config.dev.js │ ├── webpack.config.prod.js │ ├── webpack.config.shared.js │ └── webpack.config.test.js ├── doc/ │ ├── CHANGELOG-0.1.md │ ├── CHANGELOG-1.0.md │ ├── CHANGELOG_0.2.md │ ├── CHANGELOG_0.3.md │ ├── CHANGELOG_0.4.md │ ├── CHANGELOG_0.5.md │ ├── CHANGELOG_0.6.md │ ├── CHANGELOG_0.7.md │ ├── CHANGELOG_0.8.md │ ├── CONTRIBUTE.md │ └── InteropWithThirdParty.md ├── example/ │ ├── .scalafmt.conf │ ├── .travis.yml │ ├── LICENSE │ ├── NOTICE │ ├── README.md │ ├── build.sbt │ ├── index.html │ ├── project/ │ │ ├── build.properties │ │ └── plugins.sbt │ └── src/ │ └── main/ │ └── scala/ │ └── HelloWorldApp.scala ├── gen/ │ └── src/ │ ├── main/ │ │ └── scala/ │ │ └── com/ │ │ └── olvind/ │ │ ├── DomTypes.scala │ │ ├── OutputFolder.scala │ │ ├── Runner.scala │ │ ├── componentParsers.scala │ │ ├── eui/ │ │ │ ├── EuiLibrary.scala │ │ │ ├── EuiRunner.scala │ │ │ ├── EuiTypeMapper.scala │ │ │ ├── EuiTypeMapperFunction.scala │ │ │ └── EuiTypeMemberMethodMapper.scala │ │ ├── libraries.scala │ │ ├── mui/ │ │ │ ├── MuiLibrary.scala │ │ │ ├── MuiRunner.scala │ │ │ ├── MuiTypeMapper.scala │ │ │ ├── MuiTypeMapperFunction.scala │ │ │ └── MuiTypeMemberMethodMapper.scala │ │ ├── package.scala │ │ ├── printers.scala │ │ ├── props.scala │ │ ├── requiresjs/ │ │ │ ├── JsParser.scala │ │ │ ├── Lazy.scala │ │ │ ├── Require.scala │ │ │ ├── ResolvePath.scala │ │ │ ├── ScanCtx.scala │ │ │ ├── VisitorComponentMembers.scala │ │ │ ├── VisitorComponents.scala │ │ │ ├── VisitorExports.scala │ │ │ ├── VisitorHelper.scala │ │ │ ├── VisitorHelperNameStack.scala │ │ │ ├── VisitorImports.scala │ │ │ ├── VisitorPropType.scala │ │ │ └── types.scala │ │ ├── sui/ │ │ │ ├── SuiLibrary.scala │ │ │ ├── SuiRunner.scala │ │ │ ├── SuiTypeMapper.scala │ │ │ ├── SuiTypeMapperFunction.scala │ │ │ └── SuiTypeMemberMethodMapper.scala │ │ └── types.scala │ └── test/ │ ├── resources/ │ │ └── mui15/ │ │ ├── Paper/ │ │ │ ├── Paper.js │ │ │ └── index.js │ │ ├── comps/ │ │ │ ├── Divider.js │ │ │ └── Drawer.js │ │ ├── internal/ │ │ │ ├── AutoLockScrolling.js │ │ │ └── Overlay.js │ │ ├── styles/ │ │ │ └── transitions.js │ │ └── utils/ │ │ ├── autoPrefix.js │ │ └── propTypes.js │ └── scala/ │ └── com/ │ └── olvind/ │ ├── JsParserTest.scala │ └── PropCommentTest.scala ├── macros/ │ └── src/ │ ├── main/ │ │ └── scala/ │ │ └── chandu0101/ │ │ └── macros/ │ │ └── tojs/ │ │ ├── GhPagesMacros.scala │ │ ├── JSMacro.scala │ │ └── ReactMacroUtils.scala │ └── test/ │ └── scala/ │ └── chandu0101/ │ └── macros/ │ └── tojs/ │ └── JSMacroTest.scala └── project/ ├── build.properties └── plugins.sbt ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ *.class *.log # sbt specific .cache/ .history/ .lib/ dist/* target/ lib_managed/ src_managed/ project/boot/ project/plugins/project/ # Scala-IDE specific .scala_dependencies/ .worksheet/ .cache-main/ .cache-tests/ */.classpath/ */.metadata/ */.project/ */.settings/ #intellij .idea .idea_modules #project assets/ node_modules/ /core/docs .DS_Store yarn.lock core/.cache-main core/.classpath core/.project demo/.classpath demo/.project gen/.cache-main gen/.cache-tests gen/.classpath gen/.project macros/.cache-main macros/.classpath macros/.project */.gitignore ================================================ FILE: .scalafmt.conf ================================================ align = true # For pretty alignment. maxColumn = 100 # For my wide 30" display. ================================================ FILE: .travis.yml ================================================ language: scala scala: - 2.12.4 jdk: - oraclejdk8 sbt_args: -no-colors -J-Xss2m env: - NODE_VERSION="8.10.0" before_install: - nvm install $NODE_VERSION - npm install -g yarn script: - sbt ++$TRAVIS_SCALA_VERSION test demo/fastOptJS::webpack # Tricks to avoid unnecessary cache updates, from # http://www.scala-sbt.org/0.13/docs/Travis-CI-with-sbt.html - find $HOME/.sbt -name "*.lock" | xargs rm - find $HOME/.ivy2 -name "ivydata-*.properties" | xargs rm cache: yarn: true directories: - $HOME/.ivy2/cache - $HOME/.sbt - $HOME/.cache/yarn ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "{}" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright {yyyy} {name of copyright owner} Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: NOTICE ================================================ Copyright 2017 rleibman ================================================ FILE: README.md ================================================ scalajs-react-components ======================== [![Join the chat at https://gitter.im/chandu0101/scalajs-react-components](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/chandu0101/scalajs-react-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) Reusable [scalajs-react](https://github.com/japgolly/scalajs-react) components. We are trying to make the experience of using javascript components in scala.js as good as possible by adding typed wrappers. Adding types to javascript is a lot of guesswork, and we're certain to have gotten them wrong some places. Bug reports and/or pull requests are very much welcome! :) ### Wrappers for javascript components: These components require you to provide javascript yourself. - Material-ui 0.18.1 - Elemental-ui 0.6.1 - Semantic-ui 0.68.5 - Google maps (downloads js directly from google) - React GeomIcon (react-geomicons: 2.1.10) - React Infinite (react-infinite, 0.11.0) - Spinner (react-spinner, 0.2.7) - React Select (react-select: 1.0.0-rc.5) - React TagsInput (react-tagsinput, 3.16.1) - React Slick (react-slick: 0.14.11) ### Components written in scala.js - DefaultSelect - Pager - ReactDraggable - ReactListView - ReactPopOver - ReactSearchBox - ReactTable - ReactTreeView ## Gotchas #### You have to call `apply` even when components dont have children: ```scala MuiRaisedButton(label = "label")() ``` ## Setup #### SBT Add these dependencies to you sbt build file ```scala libraryDependencies ++= Seq( "com.github.japgolly.scalajs-react" %%% "core" % "1.1.0", "com.github.japgolly.scalajs-react" %%% "extra" % "1.1.0", "com.olvind" %%% "scalajs-react-components" % "1.0.0-M2" ) ``` This repository includes an example project, by all means use it as a template for your own. #### ScalaCSS In order to use the scala.js components, you need to make sure you load their CSS: ```scala GlobalRegistry.register(.Style) ``` See [here](https://japgolly.github.io/scalacss/book/ext/react.html) for more details ## Full Demo With Code Examples **Online :** http://chandu0101.github.io/scalajs-react-components **Local :** This will start a web server on http://localhost:8080 ``` sbt fastOptJS::webpack demo/compile:fastOptJS::startWebpackDevServer ``` ## Example project We've included an example project to give you an idea how to use the components ================================================ FILE: build.sbt ================================================ // ***************************************************************************** // Projects // ***************************************************************************** lazy val macros = project .in(file("macros")) .enablePlugins(ScalaJSPlugin) .settings(commonSettings, publicationSettings) .settings( name := "scalajs-react-components-macros", libraryDependencies ++= Seq( "com.github.japgolly.scalajs-react" %%% "core" % "1.1.1", "com.github.japgolly.scalajs-react" %%% "extra" % "1.1.1", "org.scalatest" %%% "scalatest" % "3.0.4" % Test ) ) lazy val gen = project .in(file("gen")) .enablePlugins(ScalaJSBundlerPlugin) .settings(commonSettings, preventPublication, npmGenSettings) .settings( organization := "com.olvind", name := "generator", version in webpack := "2.6.1", libraryDependencies ++= Seq( "com.lihaoyi" %% "ammonite-ops" % "1.0.1", "org.scalatest" %% "scalatest" % "3.0.4" % Test ) ) lazy val generateMui = TaskKey[Seq[File]]("generateMui") lazy val generateEui = TaskKey[Seq[File]]("generateEui") lazy val generateSui = TaskKey[Seq[File]]("generateSui") lazy val core = project .in(file("core")) .dependsOn(macros) .enablePlugins(ScalaJSPlugin) .settings(commonSettings, publicationSettings) .settings( generateEui := { val genDir = sourceManaged.value genDir.mkdirs() val res = runner.value.run( "com.olvind.eui.EuiRunner", (fullClasspath in (gen, Runtime)).value.files, List( (npmUpdate in (gen, Compile)).value / "node_modules" / "elemental", sourceManaged.value / "main" ) map (_.absolutePath), streams.value.log ) val pathFinder: PathFinder = sourceManaged.value ** "*.scala" pathFinder.get.filter(_.getAbsolutePath.contains("elemental")) }, generateMui := { val genDir = sourceManaged.value genDir.mkdirs() val res = runner.value.run( "com.olvind.mui.MuiRunner", (fullClasspath in (gen, Runtime)).value.files, List( (npmUpdate in (gen, Compile)).value / "node_modules" / "material-ui", sourceManaged.value / "main" ) map (_.absolutePath), streams.value.log ) val pathFinder: PathFinder = sourceManaged.value ** "*.scala" pathFinder.get.filter(_.getAbsolutePath.contains("material")) }, generateSui := { val genDir = sourceManaged.value genDir.mkdirs() val res = runner.value.run( "com.olvind.sui.SuiRunner", (fullClasspath in (gen, Runtime)).value.files, List( (npmUpdate in (gen, Compile)).value / "node_modules" / "semantic-ui-react" / "dist" / "commonjs", sourceManaged.value / "main" ) map (_.absolutePath), streams.value.log ) val pathFinder: PathFinder = sourceManaged.value ** "*.scala" pathFinder.get.filter(_.getAbsolutePath.contains("semanticui")) } ) .settings( sourceGenerators in Compile += generateMui, sourceGenerators in Compile += generateEui, sourceGenerators in Compile += generateSui, mappings in (Compile, packageSrc) ++= { val sourceDir = (sourceManaged.value / "main").toPath def rel(f: File) = sourceDir.relativize(f.toPath).toString (managedSources in Compile).value map (s ⇒ s → rel(s)) }, libraryDependencies ++= Seq( "com.github.japgolly.scalajs-react" %%% "core" % "1.1.1" withSources (), "com.github.japgolly.scalajs-react" %%% "extra" % "1.1.1" withSources (), "com.github.japgolly.scalacss" %%% "core" % "0.5.5" withSources (), "com.github.japgolly.scalacss" %%% "ext-react" % "0.5.5" withSources (), "org.scala-js" %%% "scalajs-dom" % "0.9.4" withSources (), "org.scalacheck" %%% "scalacheck" % "1.13.5" % Test, "org.scalatest" %%% "scalatest" % "3.0.4" % Test ) ) lazy val preventPublication = Seq( publishArtifact := false, publish := {}, packagedArtifacts := Map.empty) // doesn't work - https://github.com/sbt/sbt-pgp/issues/42 lazy val demo = project .in(file("demo")) .dependsOn(core) .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin) .settings(commonSettings, preventPublication, npmSettings, npmDevSettings) .settings( name := "scalajs-react-components-demo", version in webpack := "2.6.1", // version in installWebpackDevServer := "2.7.1", scalaJSUseMainModuleInitializer := true, scalaJSUseMainModuleInitializer.in(Test) := false, artifactPath.in(Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value / ((moduleName in fastOptJS).value + "-opt.js")), webpackResources := webpackResources.value +++ PathFinder(Seq(baseDirectory.value / "images", baseDirectory.value / "index.html")) ** "*.*", webpackConfigFile in (Test) := Some(baseDirectory.value / "webpack.config.test.js"), webpackConfigFile in (Compile, fastOptJS) := Some( baseDirectory.value / "webpack.config.dev.js"), webpackConfigFile in (Compile, fullOptJS) := Some( baseDirectory.value / "webpack.config.prod.js"), jsEnv := new org.scalajs.jsenv.jsdomnodejs.JSDOMNodeJSEnv, webpackBundlingMode := BundlingMode.LibraryOnly() ) lazy val root = project .in(file(".")) .aggregate(macros, core, demo) .settings(commonSettings, preventPublication) // ***************************************************************************** // Settings // ***************************************************************************** lazy val commonSettings = Seq( scalaVersion := "2.12.4", version := "1.0.0-M2", name := "scalajs-react-components", organization := "com.olvind", homepage := Some(url("http://chandu0101.github.io/scalajs-react-components")), licenses += ("Apache 2.0", url("http://www.apache.org/licenses/LICENSE-2.0")), mappings.in(Compile, packageBin) += baseDirectory.in(ThisBuild).value / "LICENSE" -> "LICENSE", scalacOptions ++= Seq( "-deprecation", // Emit warning and location for usages of deprecated APIs. "-feature", // Emit warning and location for usages of features that should be imported explicitly. "-unchecked", // Enable additional warnings where generated code depends on assumptions. "-language:implicitConversions", // Allow definition of implicit functions called views "-language:postfixOps", "-P:scalajs:sjsDefinedByDefault" ), unmanagedSourceDirectories.in(Compile) := Seq(scalaSource.in(Compile).value), unmanagedSourceDirectories.in(Test) := Seq(scalaSource.in(Test).value) ) lazy val publicationSettings = Seq( publishTo := { val nexus = "https://oss.sonatype.org/" if (isSnapshot.value) Some("snapshots" at nexus + "content/repositories/snapshots") else Some("releases" at nexus + "service/local/staging/deploy/maven2") }, pomExtra := scm:git:github.com:chandu0101/scalajs-react-components scm:git:git@github.com:chandu0101/scalajs-react-components.git github.com:chandu0101/scalajs-react-components.git chandu0101 Chandra Sekhar Kode oyvindberg Øyvind Raddum Berg fmcgough Frankie roberto@leibman.net Roberto Leibman ) lazy val SuiVersion = "0.68.5" lazy val EuiVersion = "0.6.1" lazy val MuiVersion = "0.20.0" lazy val reactVersion = "15.5.4" lazy val npmGenSettings = Seq( useYarn := true, npmDependencies.in(Compile) := Seq( "elemental" -> EuiVersion, "material-ui" -> MuiVersion, "semantic-ui-react" -> SuiVersion ) ) lazy val npmSettings = Seq( useYarn := true, npmDependencies.in(Compile) := Seq( "elemental" -> EuiVersion, "highlight.js" -> "9.9.0", "material-ui" -> MuiVersion, "react" -> reactVersion, "react-dom" -> reactVersion, "react-addons-create-fragment" -> "15.6.2", "react-addons-css-transition-group" -> "15.6.2", "react-addons-pure-render-mixin" -> "15.6.2", "react-addons-transition-group" -> "15.6.2", "react-addons-update" -> "15.6.2", "react-geomicons" -> "2.1.0", "react-infinite" -> "0.12.1", "react-select" -> "1.2.1", "react-slick" -> "0.16.0", "react-spinner" -> "0.2.7", "react-split-pane" -> "0.1.74", "react-tagsinput" -> "3.16.1", "react-tap-event-plugin" -> "2.0.1", "semantic-ui-react" -> SuiVersion, "svg-loader" -> "0.0.2" ) ) lazy val npmDevSettings = { val deps = Seq( "css-loader" -> "0.28.9", "expose-loader" -> "0.7.4", "file-loader" -> "1.1.6", "gulp-decompress" -> "2.0.1", "imagemin" -> "5.3.1", "image-webpack-loader" -> "4.0.0", "less" -> "2.7.3", "less-loader" -> "4.0.5", "lodash" -> "4.17.4", "node-libs-browser" -> "2.1.0", "react-hot-loader" -> "3.1.3", "style-loader" -> "0.19.0", "url-loader" -> "0.6.2", "webpack" -> "2.6.1", "webpack-dev-server" -> "2.11.1" ) Seq( npmDevDependencies in Test := deps, npmDevDependencies in Compile := deps ) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/DefaultSelect.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Scala.Unmounted import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object DefaultSelect { class Backend(t: BackendScope[Props, Unit]) { def onChange(P: Props)(e: ReactEventFromInput) = P.onChange(e.target.value) def render(P: Props) = { <.div( <.label(<.strong(P.label)), <.select(^.paddingLeft := "5px", ^.id := "reactselect", ^.value := P.value, ^.onChange ==> onChange(P))( P.options.map(item => <.option(item)).toTagMod ) ) } } val component = ScalaComponent .builder[Props]("DefaultSelect") .stateless .renderBackend[Backend] .build case class Props(label: String, options: List[String], value: String, onChange: String => Callback) def apply(key: js.UndefOr[Key] = js.undefined, label: String, options: List[String], value: String, onChange: String => Callback): Unmounted[Props, Unit, Backend] = { val props = Props(label, options, value, onChange) key.fold(component(props))(key => component.withKey(key)(props)) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/GoogleMap.scala ================================================ package chandu0101.scalajs.react.components import chandu0101.scalajs.react.components.fascades._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.{Event, document, html} import scala.scalajs.js import scala.scalajs.js.Dynamic.{global => g} object GoogleMap { def parameterizeUrl(url: String, parameters: Map[String, Any]): String = { require(url != null, "Missing argument 'url'.") require(parameters != null, "Missing argument 'parameters'.") parameters.foldLeft(url)((base, kv) => base ++ { if (base.contains("?")) "&" else "?" } ++ kv._1 ++ "=" + kv._2) } case class State(mapObjects: Option[(GMap, GInfoWindow)], markers: List[GMarker]) class Backend(t: BackendScope[Props, State]) { def loadScript(P: Props): Callback = if (js.isUndefined(g.google) || js.isUndefined(g.google.maps)) Callback { val script = document.createElement("script").asInstanceOf[html.Script] script.`type` = "text/javascript" script.src = parameterizeUrl(P.url, Map("callback" -> "gmapinit")) document.body.appendChild(script) g.gmapinit = initialize(P).toJsFn } else initialize(P) def initialize(P: Props): Callback = t.root.getDOMNode .flatMap( node => t.modState( _.copy(mapObjects = Some( (new GMap(node, MapOptions(P.center, P.zoom).toGMapOptions), new GInfoWindow))), callback = updateMap(P) )) def updateMap(P: Props): Callback = t.modState( S => S.mapObjects.fold(S) { case (gmap, infoWindow) => gmap.setCenter(P.center.toGlatlng) S.markers.foreach(_.setMap(null)) val newMarkers = P.markers.map(prepareMarker(infoWindow, gmap)).toList S.copy(markers = newMarkers) } ) private def prepareMarker(infowindow: GInfoWindow, map: GMap)(m: Marker) = { val marker = new GMarker(m.toGMarker(map)) if (!m.content.isEmpty) { new GAddListener( marker, "click", (e: Event) => { infowindow.setContent(m.content) infowindow.open(map, marker) } ) } marker } def render(P: Props) = <.div(^.height := P.height, ^.width := P.width) } case class Props(width: String, height: String, center: LatLng, zoom: Int, markers: Seq[Marker], url: String) val component = ScalaComponent .builder[Props]("googleMap") .initialState(State(None, Nil)) .renderBackend[Backend] .componentWillReceiveProps { wrp => wrp.backend.updateMap(wrp.nextProps) } .componentDidMount($ => $.backend.loadScript($.props)) .componentWillUnmount($ => Callback($.state.markers.foreach(new GClearInstanceListeners(_)))) .build /** * * @param width width of map * @param height height of map * @param center center position(lat,lng) for map * @param zoom zoom value * @param markers markers for the map * @param url url to get googlemap api, by default it uses https://maps.googleapis.com/maps/api/js you can override if you want. * @return */ def apply( width: String = "500px", height: String = "500px", center: LatLng, zoom: Int = 4, markers: List[Marker] = Nil, url: String = "https://maps.googleapis.com/maps/api/js" ) = component(Props(width, height, center, zoom, markers, url)) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/Implicits.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import scala.scalajs.js // todo: figure out if we should keep these private[components] object Implicits { /* this works here, but not in the general case! * (see https://github.com/scala-js/scala-js/pull/2070 ) */ implicit final class UCB[R](private val uc: js.UndefOr[CallbackTo[R]]) extends AnyVal { @inline def asCbo: CallbackOption[R] = CallbackOption.liftOption(uc.toOption.map(_.runNow())) } implicit final class UF1CB[T1, R](private val uc: js.UndefOr[T1 => CallbackTo[R]]) extends AnyVal { @inline def asCbo(t1: T1): CallbackOption[R] = CallbackOption.liftOptionLike(uc).flatMap(_.apply(t1).toCBO) } implicit final class UF2CB[T1, T2, R](private val uc: js.UndefOr[(T1, T2) => CallbackTo[R]]) extends AnyVal { @inline def asCbo(t1: T1, t2: T2): CallbackOption[R] = CallbackOption.liftOptionLike(uc).flatMap(_.apply(t1, t2).toCBO) } implicit final class UF3CB[T1, T2, T3, R]( private val uc: js.UndefOr[(T1, T2, T3) => CallbackTo[R]]) extends AnyVal { @inline def asCbo(t1: T1, t2: T2, t3: T3): CallbackOption[R] = CallbackOption.liftOptionLike(uc).flatMap(_.apply(t1, t2, t3).toCBO) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/Pager.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ScalaCssReact._ object Pager { val cssSettings = scalacss.devOrProdDefaults import cssSettings._ class Style extends StyleSheet.Inline { import dsl._ val pager = style( margin :=! "15px 0", unsafeChild("a")( display.inlineBlock, padding :=! "5px 14px", backgroundColor :=! "#EF5350", border :=! "1px solid transparent", borderRadius :=! "2px", cursor.pointer, color :=! "#ffffff", fontWeight.bold, boxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)", &.hover.apply( textDecoration := "none", backgroundColor :=! "#ff1034" ), &.focus.apply( textDecoration := "none", backgroundColor :=! "#ff1034" ) ) ) } case class Backend(t: BackendScope[Props, Unit]) { def render(P: Props) = { <.div(P.style.pager)( <.a( ^.onClick --> P.previousClick, ^.float := "left", "← Previous" ).when(P.offset > 0), <.a( ^.onClick --> P.nextClick, ^.float := "right", "Next →" ).when(P.offset + P.itemsPerPage < P.totalItems) ) } } object DefaultStyle extends Style val component = ScalaComponent .builder[Props]("Pager") .renderBackend[Backend] .build case class Props(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: Callback, previousClick: Callback, style: Style) def apply(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: Callback, previousClick: Callback, style: Style = DefaultStyle) = { component(Props(itemsPerPage, totalItems, offset, nextClick, previousClick, style)) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactDraggable.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.Reusability import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom import org.scalajs.dom._ import scala.scalajs.js import scalacss.ScalaCssReact._ import Implicits._ case class RPoint(x: Int, y: Int) case class RGrid(width: Int, height: Int) case class RElementPosition(element: Element, top: Int = 0, left: Int = 0, right: Int = 0, bottom: Int = 0) case class ClientRect(top: Double, left: Double) object ReactDraggable { val cssSettings = scalacss.devOrProdDefaults import cssSettings._ object Style extends StyleSheet.Inline { import dsl._ val draggable = style(position.relative) val draggableActive = style(userSelect := "none") } import RCustomStyles._ type CssClassType = Map[String, Boolean] object DomUtil { /** * https://developer.mozilla.org/en-US/docs/Web/API/Element.matches#Browser_compatibility * @param element dom element * @param selector css selector */ def matchesSelector(element: js.Dynamic)(selector: String): Boolean = { val funcName = Stream( "matches", "webkitMatchesSelector", "mozMatchesSelector", "msMatchesSelector", "oMatchesSelector" ).filter(name => !js.isUndefined(element.selectDynamic(name))).head element.selectDynamic(funcName).call(element, selector).asInstanceOf[Boolean] } /** * onTouchStart - / works on most browsers * onmsgesturechange - works on ie10 on ms surface * @return whether device is touch enabled or not */ def isTouchDevice = dom.window.hasOwnProperty("ontouchstart") || dom.window.hasOwnProperty("onmsgesturechange") def dragEventFor(e: Event, name: String) = name match { case "start" => if (e.`type`.contains("touch")) "touchstart" else "mousedown" case "move" => if (e.`type`.contains("touch")) "touchmove" else "mousemove" case "end" => if (e.`type`.contains("touch")) "touchend" else "mouseup" } def getControlPosition(e: Event): RPoint = if (e.`type`.contains("touch")) { val position = e.asInstanceOf[TouchEvent].touches(0) RPoint(position.clientX.toInt, position.clientY.toInt) } else { val position = e.asInstanceOf[MouseEvent] RPoint(position.clientX.toInt, position.clientY.toInt) } def isLeftClick(e: Event) = e.`type` == "touchstart" || e.asInstanceOf[MouseEvent].button == 0 } case class Props( cancel: js.UndefOr[String], onDrag: js.UndefOr[(Event, RElementPosition) => Callback], useCSSTransforms: Boolean, clsNames: CssClassType, ref: js.UndefOr[String], moveOnStartChange: Boolean, grid: js.UndefOr[RGrid], key: js.Any, zIndex: Int, axis: String, onStop: js.UndefOr[(Event, RElementPosition) => Callback], start: RPoint, onStart: js.UndefOr[(Event, RElementPosition) => Callback], onMouseDown: js.UndefOr[Event => Callback], handle: js.UndefOr[String], minConstraints: js.UndefOr[RGrid], maxConstraints: js.UndefOr[RGrid] ) /** * @param dragging whether or not currently dragging * @param startX Start left of t.getDOmNode() * @param startY Start top of t.getDOmNode() * @param offsetX Offset between start left and mouse left * @param offsetY Offset between start top and mouse top * @param clientX Current left of this.getDOMNode * @param clientY Current top of this.getDOMNode */ case class State( dragging: Boolean, startX: Int, startY: Int, offsetX: Int, offsetY: Int, clientX: Int, clientY: Int, stopListening: js.UndefOr[Callback] ) implicit val r0 = Reusability.byRef[Props] implicit val r1 = Reusability.byRef[State] class Backend(t: BackendScope[Props, State]) { def pos(S: State) = t.root.getDOMNode.map(node => RElementPosition(node, top = S.clientY, left = S.clientX)) def handleDragStart(props: Props)(e: Event): Callback = { val moveEventType = DomUtil.dragEventFor(e, "move") val endEventType = DomUtil.dragEventFor(e, "end") val dragPoint = DomUtil.getControlPosition(e) val mouseDown: Callback = props.onMouseDown.fold(Callback.empty)(fn => fn(e)) val onStart: Callback = { t.state.flatMap(S => { pos(S).flatMap(pos => props.onStart.asCbo(e, pos)) }) } val startDrag = t.modState { S => val u1 = Events.register(dom.window, moveEventType, handleDrag(props)) val u2 = Events.register(dom.window, endEventType, handleDragEnd(props)) S.copy( dragging = true, offsetX = dragPoint.x.toInt - S.clientX, offsetY = dragPoint.y.toInt - S.clientY, stopListening = u1 >> u2 ) } val matches: Boolean = { val matchesTarget = DomUtil.matchesSelector(e.target.asInstanceOf[js.Dynamic]) _ props.handle.fold(true)(matchesTarget) && props.cancel.fold(true)(matchesTarget) } mouseDown << (onStart >> startDrag).when(DomUtil.isLeftClick(e) && matches).void } def handleDrag(props: Props)(e: Event): Callback = { val dragPoint = DomUtil.getControlPosition(e) val c1 = t.modState { S => // calculate top and left var clientX: Int = S.startX + (dragPoint.x - S.offsetX) var clientY: Int = S.startY + (dragPoint.y - S.offsetY) // Snap to grid if prop has been provided props.grid.foreach { (grid: RGrid) => val directionX = if (clientX < S.clientX) -1 else 1 val directionY = if (clientY < S.clientY) -1 else 1 clientX = if (math.abs(clientX - S.clientX) >= grid.width) S.clientX + (grid.width * directionX) else S.clientX clientY = if (math.abs(clientY - S.clientY) >= grid.height) S.clientY + (grid.height * directionY) else S.clientY } //min/max contraints props.minConstraints.foreach { (min: RGrid) => clientX = math.max(min.width, clientX) clientY = math.max(min.height, clientY) } props.maxConstraints.foreach { (max: RGrid) => clientX = math.min(max.width, clientX) clientY = math.min(max.height, clientY) } // Update top and left S.copy(clientX = clientX.toInt, clientY = clientY.toInt) } //call event handler val c2 = t.state.flatMap(S => { pos(S).flatMap(pos => props.onDrag.asCbo(e, pos)) }) c1 >> c2 } def handleDragEnd(props: Props)(e: Event): Callback = { val unregister: Callback = t.state.flatMap(_.stopListening.asCbo) val onStop: Callback = t.state.flatMap(S => { pos(S).flatMap(pos => props.onStop.asCbo(e, pos)) }) val stopDragging: Callback = t.modState(_.copy(dragging = false, stopListening = js.undefined)) unregister >> onStop >> stopDragging } def canDragY(props: Props): Boolean = props.axis == "both" || props.axis == "y" def canDragX(props: Props): Boolean = props.axis == "both" || props.axis == "x" private val transforms = Seq(^.transform, mozTransform, WebkitTransform, msTransform) def positionToCSSTransform(left: Int, top: Int): TagMod = (transforms map (_ := s"translate(${left}px, ${top}px)")).toTagMod def render(props: Props, S: State, C: PropsChildren) = { val topValue: Int = if (canDragY(props)) S.clientY else S.startY val leftValue: Int = if (canDragX(props)) S.clientX else S.startX val stl: TagMod = if (props.useCSSTransforms) positionToCSSTransform(leftValue, topValue) else TagMod(^.top := topValue.px, ^.left := leftValue.px) implicit def rawEventCallbackToReactEventCallback( fn: Event => Callback): ReactEvent => Callback = { e => fn(e.nativeEvent) } <.div( Style.draggable, Style.draggableActive.when(S.dragging), stl, ^.onMouseDown ==> handleDragStart(props), ^.onTouchStart ==> handleDragStart(props), ^.onMouseUp ==> handleDragEnd(props), ^.onTouchEnd ==> handleDragEnd(props) )(C) } } def newStateFrom(props: Props): State = State( dragging = false, startX = 0, startY = 0, clientX = props.start.x.toInt, clientY = props.start.y.toInt, offsetX = 0, offsetY = 0, stopListening = js.undefined ) val component = ScalaComponent .builder[Props]("ReactDraggable") .initialStateFromProps(newStateFrom) .renderBackendWithChildren[Backend] .componentWillReceiveProps { case componentWillReceiveProps => componentWillReceiveProps .setState(newStateFrom(componentWillReceiveProps.nextProps)) .when(componentWillReceiveProps.nextProps.moveOnStartChange) .void } .configure(Reusability.shouldComponentUpdate) .componentWillUnmount($ => $.state.stopListening.getOrElse(Callback.empty)) .build /** * * @param cancel specifies a selector to be used to prevent drag initialization. * @param onDrag Called while dragging * @param useCSSTransforms if true will place the element using translate(x, y) * rather than CSS top/left. * This generally gives better performance, and is useful in combination with * other layout systems that use translate(), such as react-grid-layout. * @param clsNames css class names map * @param ref ref for this component * @param moveOnStartChange tells the Draggable element to reset its position * if the `start` parameters are changed. By default, if the `start` * parameters change, the Draggable element still remains where it started * or was dragged to. * @param grid specifies the x and y that dragging should snap to. * @param key key for this react component * @param zIndex specifies the zIndex to use while dragging. * @param axis determines which axis the draggable can move.(both,x,y) * @param onStop Called when dragging stops * @param start specifies the x and y that the dragged item should start at * @param onStart Called when dragging starts. * @param onMouseDown * A workaround option which can be passed if onMouseDown needs to be accessed, * since it'll always be blocked (due to that there's internal use of onMouseDown) * @param handle specifies a selector to be used as the handle that initiates drag. * @param children * @return */ def apply( cancel: js.UndefOr[String] = js.undefined, onDrag: js.UndefOr[(Event, RElementPosition) => Callback] = js.undefined, useCSSTransforms: Boolean = false, clsNames: CssClassType = Map(), ref: js.UndefOr[String] = js.undefined, moveOnStartChange: Boolean = false, grid: js.UndefOr[RGrid] = js.undefined, key: js.Any = {}, zIndex: Int = 0, axis: String = "both", onStop: js.UndefOr[(Event, RElementPosition) => Callback] = js.undefined, start: RPoint = RPoint(0, 0), onStart: js.UndefOr[(Event, RElementPosition) => Callback] = js.undefined, onMouseDown: js.UndefOr[Event => Callback] = js.undefined, handle: js.UndefOr[String] = js.undefined, minConstraints: js.UndefOr[RGrid] = js.undefined, maxConstraints: js.UndefOr[RGrid] = js.undefined )(children: VdomNode) = { val props = Props( cancel = cancel, onDrag = onDrag, useCSSTransforms = useCSSTransforms, clsNames = clsNames, ref = ref, moveOnStartChange = moveOnStartChange, grid = grid, key = key, zIndex = zIndex, axis = axis, onStop = onStop, start = start, onStart = onStart, onMouseDown = onMouseDown, handle = handle, minConstraints = minConstraints, maxConstraints = maxConstraints ) component(props)(children) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactGeomIcon.scala ================================================ package chandu0101.scalajs.react.components import chandu0101.macros.tojs.JSMacro import japgolly.scalajs.react._ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @JSImport("react-geomicons", JSImport.Default) @js.native object ReactGeomIconRequire extends js.Any case class ReactGeomIcon( name: IconName, height: js.UndefOr[String] = js.undefined, ref: js.UndefOr[String] = js.undefined, key: js.UndefOr[String] = js.undefined, fill: js.UndefOr[String] = js.undefined, width: js.UndefOr[String] = js.undefined ) { def apply() = { val props = JSMacro[ReactGeomIcon](this) val f = JsComponent[js.Object, Children.None, Null](ReactGeomIconRequire) f(props) } } class IconName private (val value: String) extends AnyVal object IconName { val BOOKMARK = new IconName("bookmark") val CALENDAR = new IconName("calendar") val CAMERA = new IconName("camera") val CHAT = new IconName("chat") val CHECK = new IconName("check") val CHEVRONDOWN = new IconName("chevronDown") val CHEVRONLEFT = new IconName("chevronLeft") val CHEVRONRIGHT = new IconName("chevronRight") val CHEVRONUP = new IconName("chevronUp") val CLOCK = new IconName("clock") val CLOSE = new IconName("close") val CLOUD = new IconName("cloud") val COG = new IconName("cog") val COMPOSE = new IconName("compose") val DRIBBBLE = new IconName("dribbble") val EXPAND = new IconName("expand") val EXTERNAL = new IconName("external") val FACEBOOK = new IconName("facebook") val FILE = new IconName("file") val FOLDER = new IconName("folder") val GEOLOCATION = new IconName("geolocation") val GITHUB = new IconName("github") val GRID = new IconName("grid") val HEART = new IconName("heart") val HOME = new IconName("home") val INFO = new IconName("info") val LINK = new IconName("link") val LIST = new IconName("list") val LOCK = new IconName("lock") val MAIL = new IconName("mail") val MUSIC_NOTE = new IconName("musicNote") val NEXT = new IconName("next") val NO = new IconName("no") val PAUSE = new IconName("pause") val PICTURE = new IconName("picture") val PIN = new IconName("pin") val PLAY = new IconName("play") val PREVIOUS = new IconName("previous") val REFRESH = new IconName("refresh") val REPOST = new IconName("repost") val SEARCH = new IconName("search") val SHOPPING_CART = new IconName("shoppingCart") val SKULL = new IconName("skull") val SPEAKER = new IconName("speaker") val SPEAKER_VOLUME = new IconName("speakerVolume") val STAR = new IconName("star") val TAG = new IconName("tag") val TRASH = new IconName("trash") val TRIANGLE_DOWN = new IconName("triangleDown") val TRIANGLE_LEFT = new IconName("triangleLeft") val TRIANGLE_RIGHT = new IconName("triangleRight") val TRIANGLE_UP = new IconName("triangleUp") val TWITTER = new IconName("twitter") val USER = new IconName("user") val VIDEO = new IconName("video") val WARNING = new IconName("warning") def newName(name: String) = new IconName(name) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactInfinite.scala ================================================ package chandu0101.scalajs.react.components import chandu0101.macros.tojs.JSMacro import japgolly.scalajs.react._ import japgolly.scalajs.react.raw._ import japgolly.scalajs.react.vdom.VdomElement import org.scalajs.dom.raw.HTMLElement import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @JSImport("react-infinite", JSImport.Default) @js.native object ReactInfiniteRequire extends js.Any case class ReactInfinite( handleScroll: js.UndefOr[HTMLElement => Callback] = js.undefined, preloadAdditionalHeight: js.UndefOr[Int] = js.undefined, isInfiniteLoading: js.UndefOr[Boolean] = js.undefined, preloadBatchSize: js.UndefOr[Int] = js.undefined, containerHeight: Int, ref: js.UndefOr[ReactInfiniteM => Unit] = js.undefined, loadingSpinnerDelegate: js.UndefOr[ReactElement] = js.undefined, timeScrollStateLastsForAfterUserScrolls: js.UndefOr[Int] = js.undefined, elementHeight: Double, key: js.UndefOr[String] = js.undefined, className: js.UndefOr[String] = js.undefined, infiniteLoadBeginBottomOffset: js.UndefOr[Int] = js.undefined, onInfiniteLoad: js.UndefOr[Callback] = js.undefined ) { def apply(children: Seq[VdomElement]) = { val props = JSMacro[ReactInfinite](this) val f = JsComponent[js.Object, Children.Varargs, Null](ReactInfiniteRequire) f(props)(children: _*) } } @js.native trait ReactInfiniteM extends js.Object { def getScrollTop(): Double = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactListView.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ import Implicits._ object ReactListView { class Style extends StyleSheet.Inline { import dsl._ val listGroup = style( marginBottom(20.px), paddingLeft.`0`, &.firstChild.lastChild( borderBottomLeftRadius(4 px), borderBottomRightRadius(4 px) ) ) val listItem = styleF.bool( selected => styleS( position.relative, display.block, padding(v = 10.px, h = 15.px), border :=! "1px solid #ecf0f1", cursor.pointer, mixinIfElse(selected)( color.white, fontWeight._500, backgroundColor :=! "#146699" )( backgroundColor.white, &.hover( color :=! "#555555", backgroundColor :=! "#ecf0f1" ) ) )) } object DefaultStyle extends Style case class State(filterText: String, selectedItem: String) class Backend(t: BackendScope[Props, State]) { def onTextChange(text: String): Callback = t.modState(_.copy(filterText = text)) def onItemSelect(onItemSelect: js.UndefOr[String => Callback])(value: String): Callback = { val setSelected = t.modState(_.copy(selectedItem = value)) val onSelect = onItemSelect.asCbo(value) setSelected >> onSelect } def render(P: Props, S: State) = { val fItems = P.items.filter(item => item.toString.toLowerCase.contains(S.filterText.toLowerCase)) <.div( ReactSearchBox(onTextChange = onTextChange).when(P.showSearchBox), <.ul( P.style.listGroup, fItems.map { item => val selected = item.toString == S.selectedItem <.li( P.style.listItem(selected), ^.onClick --> onItemSelect(P.onItemSelect)(item.toString), item ) }.toTagMod ) ) } } val component = ScalaComponent .builder[Props]("ReactListView") .initialState(State(filterText = "", selectedItem = "")) .renderBackend[Backend] .build case class Props( items: List[String], onItemSelect: js.UndefOr[String => Callback], showSearchBox: Boolean, style: Style ) def apply( items: List[String], onItemSelect: js.UndefOr[String => Callback] = js.undefined, showSearchBox: Boolean = false, style: Style = DefaultStyle, ref: js.UndefOr[String] = js.undefined, key: js.Any = {} ) = component /*.set(key, ref)*/ (Props(items, onItemSelect, showSearchBox, style)) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactPopOver.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom import org.scalajs.dom.html object ReactPopOver { import RCustomStyles._ object DomUtil { def offset(element: html.Element) = { val rect = element.getBoundingClientRect() var scrollTop = 0.0 var scrollLeft = 0.0 if (dom.document.body.scrollTop > 0) { scrollTop = dom.document.body.scrollTop scrollLeft = dom.document.body.scrollLeft } else if (dom.document.documentElement.scrollTop > 0) { // for firefox scrollTop = dom.document.documentElement.scrollTop scrollLeft = dom.document.documentElement.scrollLeft } ClientRect(rect.top + scrollTop, rect.left + scrollLeft) } } trait Style { def popover: TagMod = TagMod( ^.position := "absolute", ^.top := "0", ^.left := "-100%", ^.zIndex := "1060", ^.maxWidth := "500px", ^.padding := "1px", ^.fontSize := "15px", ^.fontWeight := "normal", ^.lineHeight := "1.42857143", ^.textAlign := "left", ^.backgroundColor := "white", ^.borderRadius := "6px", ^.border := "1px solid #cccccc", ^.whiteSpace := "normal", backgroundClipPreFixer("padding-box"), boxShadowPreFixer("0 5px 10px rgba(0, 0, 0, 0.2)") ) def backgroundClipPreFixer(value: String) = TagMod( ^.backgroundClip := value, WebkitBackgroundClip := value ) def boxShadowPreFixer(value: String) = TagMod( ^.boxShadow := value, WebkitBoxShadow := value ) def popoverTop = TagMod(^.marginTop := "-10px") def popoverLeft = TagMod(^.marginLeft := "-10px") def popoverRight = TagMod(^.marginLeft := "10px") def popoverBottom = TagMod(^.marginTop := "10px") def popoverTitle = TagMod(^.margin := "0", ^.padding := "8px 14px", ^.fontSize := "15px", ^.backgroundColor := "#f7f7f7", ^.borderBottom := "1px solid #ebebeb", ^.borderRadius := "5px 5px 0 0") def popoverContent = TagMod(^.padding := "9px 14px") val displayBlock = ^.display := "block" def popoverArrow = TagMod( ^.position := "absolute", displayBlock, ^.width := "0", ^.height := "0", ^.border := "solid transparent", ^.borderWidth := "11px" ) def popoverArrowAfter = TagMod( ^.position := "absolute", displayBlock, ^.width := "0", ^.height := "0", ^.border := "solid transparent", ^.borderWidth := "10px" ) def popoverTopArrow = TagMod( ^.left := "50%", ^.marginLeft := "-11px", ^.borderBottomWidth := "0", ^.borderTopColor := "#999999", ^.bottom := "-11px" ) def popoverTopArrowAfter = TagMod( ^.marginLeft := "-10px", ^.borderBottomWidth := "0", ^.borderTopColor := "#ffffff", ^.bottom := "1px" ) def popoverRightArrow = TagMod( ^.top := "50%", ^.left := "-11px", ^.marginTop := "-11px", ^.borderLeftWidth := "0", ^.borderRightColor := "#999999", ^.bottom := "-11px" ) def popoverRightArrowAfter = TagMod( ^.left := "1px", ^.borderLeftWidth := "0", ^.borderRightColor := "#ffffff", ^.bottom := "-10px" ) def popoverBottomArrow = TagMod( ^.left := "50%", ^.marginLeft := "-11px", ^.borderTopWidth := "0", ^.borderBottomColor := "#999999", ^.top := "-11px" ) def popoverBottomArrowAfter = TagMod( ^.top := "1px", ^.marginLeft := "-10px", ^.borderTopWidth := "0", ^.borderBottomColor := "#ffffff" ) def popoverLeftArrow = TagMod( ^.top := "50%", ^.right := "-11px", ^.marginTop := "-11px", ^.borderRightWidth := "0", ^.borderLeftColor := "#999999" ) def popoverLeftArrowAfter = TagMod( ^.right := "1px", ^.borderRightWidth := "0", ^.borderLeftColor := "#ffffff", ^.bottom := "-10px" ) } case class State(open: Boolean, top: Double = 0, left: Double = 0) class Backend($ : BackendScope[Props, State]) { def toggle(node: html.Element): Callback = ($.props zip $.state).flatMap { case (p, s) => if (s.open) hide else show(getPosition(p)(node)) } private def show(position: ClientRect) = $.modState(_.copy(open = true, top = position.top, left = position.left)) private val hide = $.modState(_.copy(open = false)) def getPosition(P: Props)(node: html.Element): ClientRect = { val offset = DomUtil.offset(node) val height = node.offsetHeight val width = node.offsetWidth val popoverHeight = $.getDOMNode.map(_.domAsHtml.offsetHeight).runNow() val popoverWidth = $.getDOMNode.map(_.domAsHtml.offsetWidth).runNow() P.placement match { case "right" => val top = offset.top + height / 2 - popoverHeight / 2 val left = offset.left + width ClientRect(top, left) case "left" => val top = offset.top + height / 2 - popoverHeight / 2 val left = offset.left - popoverWidth ClientRect(top, left) case "top" => val top = offset.top - popoverHeight val left = offset.left + width / 2 - popoverWidth / 2 ClientRect(top, left) case "bottom" => val top = offset.top + height val left = offset.left + width / 2 - popoverWidth / 2 ClientRect(top, left) case _ => throw new Exception(s"unsupported placement: ${P.placement}") } } def arrowAfter(P: Props): TagMod = { if (P.placement == "top") <.span(P.style.popoverArrowAfter, P.style.popoverTopArrowAfter, " ") else if (P.placement == "left") <.span(P.style.popoverArrowAfter, P.style.popoverLeftArrowAfter, " ") else if (P.placement == "right") <.span(P.style.popoverArrowAfter, P.style.popoverRightArrowAfter, " ") else if (P.placement == "bottom") <.span(P.style.popoverArrowAfter, P.style.popoverBottomArrowAfter, " ") else "" } def render(P: Props, S: State, C: PropsChildren) = { <.div( P.style.popover, P.style.popoverTop.when(P.placement == "top"), P.style.popoverLeft.when(P.placement == "left"), P.style.popoverRight.when(P.placement == "right"), P.style.popoverBottom.when(P.placement == "bottom"), ^.top := S.top.toString(), (^.left := S.left.toString).when(S.open) )( <.div( P.style.popoverArrow, P.style.popoverTopArrow.when(P.placement == "top"), P.style.popoverLeftArrow.when(P.placement == "left"), P.style.popoverRightArrow.when(P.placement == "right"), P.style.popoverBottomArrow.when(P.placement == "bottom"), arrowAfter(P) ), (<.h3(P.style.popoverTitle)(P.title)).unless(P.title.isEmpty), <.div(P.style.popoverContent)( C ) ) } } val component = ScalaComponent .builder[Props]("ReactPopover") .initialState(State(open = false)) .renderBackendWithChildren[Backend] .build case class Props(title: String = "", placement: String = "", style: Style = new Style {}) def apply( title: String = "", placement: String = "right", style: Style = new Style {} )(children: VdomNode*) = component(Props(title, placement, style))(children: _*) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactSearchBox.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ScalaCssReact._ object ReactSearchBox { val cssSettings = scalacss.devOrProdDefaults import cssSettings._ class Style extends StyleSheet.Inline { import dsl._ val searchBox = style(marginBottom(10 px)) val input = style( fontSize(13 px), fontWeight._300, padding(3 px), width(100.%%), backgroundColor.transparent, borderBottom :=! "1px solid #B2ADAD", &.focus( outline.none, borderBottom :=! "1.5px solid #03a9f4" ) ) } class Backend(t: BackendScope[Props, Unit]) { def onTextChange(P: Props)(e: ReactEventFromInput) = e.preventDefaultCB >> P.onTextChange(e.target.value) def render(P: Props) = <.div(P.style.searchBox)( <.input(P.style.input, ^.placeholder := "Search ..", ^.onKeyUp ==> onTextChange(P)) ) } object DefaultStyle extends Style val component = ScalaComponent .builder[Props]("ReactSearchBox") .stateless .renderBackend[Backend] .build case class Props(onTextChange: String => Callback, style: Style) def apply(onTextChange: String => Callback, style: Style = DefaultStyle) = component(Props(onTextChange, style)) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactTable.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react.vdom.html_<^._ import japgolly.scalajs.react.Callback import japgolly.scalajs.react.BackendScope import japgolly.scalajs.react.ScalaComponent import scala.collection.immutable import scalacss.ProdDefaults._ import scalacss.ScalaCssReact.scalacssStyleaToTagMod /** * Companion object of ReactTable, with tons of little utilities */ object ReactTable { /** * The direction of the sort */ object SortDirection extends Enumeration { type SortDirection = Value val asc, dsc = Value } /* * Pass this to the ColumnConfig to sort using an ordering */ // def Sort[T, B](fn: T => B)(implicit ordering: Ordering[B]): (T, T) => Boolean = { // (m1: T, m2: T) => // ordering.compare(fn(m1), fn(m2)) > 0 // } // /* // * Pass this to the ColumnConfig to sort a string ignoring case using an ordering // */ // def IgnoreCaseStringSort[T](fn: T => String): (T, T) => Boolean = // (m1: T, m2: T) => fn(m1).compareToIgnoreCase(fn(m2)) > 0 def DefaultOrdering[T, B](fn: T => B)(implicit ordering: Ordering[B]) = new Ordering[T] { def compare(a: T, b: T) = ordering.compare(fn(a), fn(b)) } def ignoreCaseStringOrdering[T](fn: T => String) = new Ordering[T] { def compare(a: T, b: T) = fn(a).compareToIgnoreCase(fn(b)) } class Style extends StyleSheet.Inline { import dsl._ val reactTableContainer = style(display.flex, flexDirection.column) val table = style( display.flex, flexDirection.column, boxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)", media.maxWidth(740 px)(boxShadow := "none") ) val tableRow = style(padding :=! "0.8rem", &.hover(backgroundColor :=! "rgba(244, 244, 244, 0.77)"), media.maxWidth(740 px)(boxShadow := "0 1px 3px grey", margin(5 px))) val tableHeader = style(fontWeight.bold, borderBottom :=! "1px solid #e0e0e0", tableRow) val settingsBar = style(display.flex, margin :=! "15px 0", justifyContent.spaceBetween) val sortIcon = styleF.bool( ascending => styleS( &.after(fontSize(9 px), marginLeft(5 px), if (ascending) { content := "'\\25B2'" } else { content := "'\\25BC'" }))) } object DefaultStyle extends Style type CellRenderer[T] = T => VdomNode def DefaultCellRenderer[T]: CellRenderer[T] = { model => <.span(model.toString) } def EmailRenderer[T](fn: T => String): CellRenderer[T] = { t => val str = fn(t) <.a(^.whiteSpace.nowrap, ^.href := s"mailto:${str}", str) } def OptionRenderer[T, B](defaultValue: VdomNode = "", bRenderer: CellRenderer[B])( fn: T => Option[B]): CellRenderer[T] = t => fn(t).fold(defaultValue)(bRenderer) case class ColumnConfig[T](name: String, cellRenderer: CellRenderer[T], //sortBy: Option[(T, T) => Boolean] = None, width: Option[String] = None, nowrap: Boolean = false)(implicit val ordering: Ordering[T]) def SimpleStringConfig[T](name: String, stringRetriever: T => String, width: Option[String] = None, nowrap: Boolean = false): ReactTable.ColumnConfig[T] = { val renderer: CellRenderer[T] = if (nowrap) { t => <.span(stringRetriever(t)) } else { t => stringRetriever(t) } ColumnConfig(name, renderer, width, nowrap)(ignoreCaseStringOrdering(stringRetriever)) } } /** * A relatively simple html/react table with a pager. * You should pass in the data as a sequence of items of type T * But you should also pass a list of Column Configurations, each of which describes how to get to each column for a given item in the data, how to display it, how to sort it, etc. */ case class ReactTable[T](data: Seq[T], configs: List[ReactTable.ColumnConfig[T]] = List(), rowsPerPage: Int = 5, style: ReactTable.Style = ReactTable.DefaultStyle, enableSearch: Boolean = true, searchBoxStyle: ReactSearchBox.Style = ReactSearchBox.DefaultStyle, onRowClick: (Int) => Callback = { _ => Callback {} }, searchStringRetriever: T => String = { t: T => t.toString }) { import ReactTable._ import SortDirection._ case class State(filterText: String, offset: Int, rowsPerPage: Int, filteredData: Seq[T], sortedState: Map[Int, SortDirection]) class Backend(t: BackendScope[Props, State]) { def onTextChange(props: Props)(value: String): Callback = t.modState(_.copy(filteredData = getFilteredData(value, props.data), offset = 0)) def onPreviousClick: Callback = t.modState(s => s.copy(offset = s.offset - s.rowsPerPage)) def onNextClick: Callback = t.modState(s => s.copy(offset = s.offset + s.rowsPerPage)) def getFilteredData(text: String, data: Seq[T]): Seq[T] = { if (text.isEmpty) { data } else { data.filter(searchStringRetriever(_).toLowerCase.contains(text.toLowerCase)) } } def sort(ordering: Ordering[T], columnIndex: Int): Callback = t.modState { state => val rows = state.filteredData state.sortedState.get(columnIndex) match { case Some(asc) => state.copy(filteredData = rows.sorted(ordering.reverse), sortedState = Map(columnIndex -> dsc), offset = 0) case _ => state.copy(filteredData = rows.sorted(ordering), sortedState = Map(columnIndex -> asc), offset = 0) } } def onPageSizeChange(value: String): Callback = t.modState(_.copy(rowsPerPage = value.toInt)) def render(props: Props, state: State): VdomElement = { def settingsBar = { var value = "" var options: List[String] = Nil val total = state.filteredData.length if (total > props.rowsPerPage) { value = state.rowsPerPage.toString options = immutable.Range .inclusive(props.rowsPerPage, total, 10 * (total / 100 + 1)) .:+(total) .toList .map(_.toString) } <.div(props.style.settingsBar)(<.div(<.strong("Total: " + state.filteredData.size)), DefaultSelect(label = "Page Size: ", options = options, value = value, onChange = onPageSizeChange)) } def renderHeader: TagMod = <.tr( props.style.tableHeader, props.configs.zipWithIndex.map { case (config, columnIndex) => val cell = getHeaderDiv(config) // config.sortBy.fold(cell(config.name.capitalize))(sortByFn => cell( ^.cursor := "pointer", ^.onClick --> sort(config.ordering, columnIndex), config.name.capitalize, props.style .sortIcon(state.sortedState.isDefinedAt(columnIndex) && state.sortedState( columnIndex) == asc) .when(state.sortedState.isDefinedAt(columnIndex)) ) //) }.toTagMod ) def renderRow(model: T): TagMod = <.tr( props.style.tableRow, props.configs .map( config => <.td(^.whiteSpace.nowrap.when(config.nowrap), ^.verticalAlign.middle, config.cellRenderer(model))) .toTagMod ) val rows = state.filteredData .slice(state.offset, state.offset + state.rowsPerPage) .zipWithIndex .map { case (row, i) => renderRow(row) //tableRow.withKey(i)((row, props)) } .toTagMod <.div( props.style.reactTableContainer, ReactSearchBox(onTextChange = onTextChange(props) _, style = props.searchBoxStyle) .when(props.enableSearch), settingsBar, <.div(props.style.table, <.table(<.thead(renderHeader()), <.tbody(rows))), Pager(state.rowsPerPage, state.filteredData.length, state.offset, onNextClick, onPreviousClick) ) } } def getHeaderDiv(config: ColumnConfig[T]): TagMod = { config.width.fold(<.th())(width => <.th(^.width := width)) } def arrowUp: TagMod = TagMod(^.width := 0.px, ^.height := 0.px, ^.borderLeft := "5px solid transparent", ^.borderRight := "5px solid transparent", ^.borderBottom := "5px solid black") def arrowDown: TagMod = TagMod(^.width := 0.px, ^.height := 0.px, ^.borderLeft := "5px solid transparent", ^.borderRight := "5px solid transparent", ^.borderTop := "5px solid black") def emptyClass: TagMod = TagMod(^.padding := "1px") val component = ScalaComponent .builder[Props]("ReactTable") .initialStateFromProps(props => State(filterText = "", offset = 0, props.rowsPerPage, props.data, Map())) .renderBackend[Backend] .componentWillReceiveProps(e => Callback.when(e.currentProps.data != e.nextProps.data)( e.backend.onTextChange(e.nextProps)(e.state.filterText))) .build case class Props(data: Seq[T], configs: List[ColumnConfig[T]], rowsPerPage: Int, style: Style, enableSearch: Boolean, searchBoxStyle: ReactSearchBox.Style) def apply() = component(Props(data, configs, rowsPerPage, style, enableSearch, searchBoxStyle)) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactTagsInput.scala ================================================ package chandu0101.scalajs.react.components import chandu0101.macros.tojs.JSMacro import japgolly.scalajs.react._ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @JSImport("react-tagsinput", JSImport.Default) @js.native object ReactTagsInputRequire extends js.Any @JSImport("react-tagsinput/react-tagsinput.css", JSImport.Namespace) @js.native object ReactTagsInputCss extends js.Any case class ReactTagsInput( key: js.UndefOr[String] = js.undefined, ref: js.UndefOr[ReactTagsInputM => Unit] = js.undefined, /* An array of tags. */ value: js.Array[String], /* Callback when tags change. */ onChange: js.Array[String] => Callback, /* An array of key codes that add a tag, default is [9, 13] (Tab and Enter). */ addKeys: js.UndefOr[js.Array[Int]] = js.undefined, /* An array of key codes that remove a tag, default is [8] (Backspace). */ removeKeys: js.UndefOr[js.Array[Int]] = js.undefined, /* Props passed down to every tag component. Defualt is: {className: 'react-tagsinput-tag', classNameRemove: 'react-tagsinput-remove'}. */ tagProps: js.UndefOr[js.Any] = js.undefined, /* Props passed down to input. Default is: {className: 'react-tagsinput-input'} */ inputProps: js.UndefOr[js.Any] = js.undefined, /* Render function for every tag. Default is: function defaultRenderTag (props) { let {tag, key, onRemove, ...other} = props return ( {tag} onRemove(key)} /> ) }*/ renderTag: js.UndefOr[js.Any] = js.undefined, /* Render function for input. Default is: function defaultRenderInput (props) { let {onChange, value, ...other} = props return ( ) } */ renderInput: js.UndefOr[js.Any] = js.undefined, /* Renders the layout of the component. Takes tagComponents and inputComponent as args. Default is: function defaultRenderLayout (tagComponents, inputComponent) { return ( {tagComponents} {inputComponent} ) } */ renderLayout: js.UndefOr[js.Any] = js.undefined, onBlur: js.UndefOr[Callback] = js.undefined, onKeyDown: js.UndefOr[ReactEventFromInput => Callback] = js.undefined, onKeyUp: js.UndefOr[ReactEventFromInput => Callback] = js.undefined ) { def apply() = { val props = JSMacro[ReactTagsInput](this) val f = JsComponent[js.Object, Children.None, Null](ReactTagsInputRequire) f(props) } } @js.native trait ReactTagsInputM extends js.Object { def focus(): Unit = js.native def blur(): Unit = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactTapEventPlugin.scala ================================================ package chandu0101.scalajs.react.components import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import scala.scalajs.js.{Date, UndefOr} @js.native trait StrategyOverrides extends js.Object { var shouldRejectClick: js.UndefOr[ js.Function2[ /* lastTouchEventTimestamp */ Date, /* clickEventTimestamp */ Date, Boolean]] = js.native } @JSImport("react-tap-event-plugin", "default") @js.native object ReactTapEventPlugin extends js.Function1[ /* strategyOverrides */ js.UndefOr[StrategyOverrides], Unit] { override def apply(strategyOverrides: UndefOr[StrategyOverrides]): Unit = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/ReactTreeView.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import Implicits._ case class TreeItem(item: Any, children: TreeItem*) { def apply(item: Any): TreeItem = this(item, Nil) } object ReactTreeView { trait Style { def reactTreeView = Seq[TagMod]() def treeGroup = Seq(^.margin := "0", ^.padding := "0 0 0 14px") def treeItem = Seq(^.listStyleType := "none") def selectedTreeItemContent = Seq(^.backgroundColor := "#1B8EB0", ^.color := "white", ^.fontWeight := "400", ^.padding := "0 7px") def treeItemBefore = Seq( ^.display := "inline-block", ^.fontSize := "11px", ^.color := "grey", ^.margin := "3px 7px 0 0", ^.textAlign := "center", ^.width := "11px" ) def treeItemHasChildrenClosed = Seq(^.contentStyle := "▶") def treeItemHasChildrenOpened = Seq(^.contentStyle := "▼") } type NodeC = ScalaComponent.MountedPure[NodeProps, NodeState, NodeBackend] //, _ <: CtorType[_, _]] case class State(filterText: String, filterMode: Boolean, selectedNode: js.UndefOr[NodeC]) class Backend($ : BackendScope[Props, State]) { def onNodeSelect(P: Props)(selected: NodeC): Callback = { val removeSelection: Callback = $.state.flatMap( _.selectedNode .filterNot(_ == selected) .fold(Callback.empty)(_.modState(_.copy(selected = false))) ) val updateThis: Callback = $.modState(_.copy(selectedNode = selected, filterMode = false)) val setSelection: Callback = selected.modState(_.copy(selected = true)) val tell: Callback = selected.props.flatMap(p => P.onItemSelect.asCbo(p.root.item.toString, p.parent, p.depth)) removeSelection >> updateThis >> setSelection >> tell } def onTextChange(text: String): Callback = $.modState(_.copy(filterText = text, filterMode = true)) def render(P: Props, S: State) = <.div(P.style.reactTreeView.toTagMod)( ReactSearchBox(onTextChange = onTextChange).when(P.showSearchBox), TreeNode.withKey("root")( NodeProps( root = P.root, open = if (S.filterText.nonEmpty) true else P.open, onNodeSelect = onNodeSelect(P), filterText = S.filterText, style = P.style, filterMode = S.filterMode )) ) } case class NodeBackend($ : BackendScope[NodeProps, NodeState]) { def onItemSelect(P: NodeProps)(e: ReactEventFromHtml): Callback = { P.onNodeSelect($.asInstanceOf[NodeC]) >> e.preventDefaultCB >> e.stopPropagationCB } def childrenFromProps(P: NodeProps): CallbackTo[Option[Unit]] = $.modState(S => S.copy(children = if (S.children.isEmpty) P.root.children else Nil)) .when(P.root.children.nonEmpty) def onTreeMenuToggle(P: NodeProps)(e: ReactEventFromHtml): Callback = childrenFromProps(P) >> e.preventDefaultCB >> e.stopPropagationCB def isFilterTextExist(filterText: String, data: TreeItem): Boolean = { def matches(item: TreeItem): Boolean = item.item.toString.toLowerCase.contains(filterText.toLowerCase) def loop(data: Seq[TreeItem]): Boolean = data.view.exists( item => if (item.children.isEmpty) matches(item) else loop(item.children) ) matches(data) || loop(data.children) } def render(P: NodeProps, S: NodeState): VdomTag = { val depth = P.depth + 1 val parent = if (P.parent.isEmpty) P.root.item.toString else s"${P.parent}<-${P.root.item.toString}" val treeMenuToggle: TagMod = if (S.children.nonEmpty) <.span( ^.onClick ==> onTreeMenuToggle(P), ^.key := "arrow", P.style.treeItemBefore.toTagMod, "▼" ) else if (P.root.children.nonEmpty && S.children.isEmpty) <.span( ^.onClick ==> onTreeMenuToggle(P), ^.key := "arrow", P.style.treeItemBefore.toTagMod, "▶" ) else "" <.li( P.style.treeItem.toTagMod, treeMenuToggle, ^.key := "toggle", ^.cursor := "pointer", <.span( P.style.selectedTreeItemContent.toTagMod.when(S.selected), ^.onClick ==> onItemSelect(P), P.root.item.toString ), <.ul(P.style.treeGroup.toTagMod)( S.children .map( child => TreeNode .withKey(s"$parent$depth${child.item}") .apply( P.copy( root = child, open = !P.filterText.trim.isEmpty, depth = depth, parent = parent, filterText = P.filterText )) .when(isFilterTextExist(P.filterText, child))) .toTagMod) ) } } case class NodeState(children: Seq[TreeItem] = Nil, selected: Boolean = false) case class NodeProps(root: TreeItem, open: Boolean, depth: Int = 0, parent: String = "", onNodeSelect: (NodeC) => Callback, filterText: String, style: Style, filterMode: Boolean) lazy val TreeNode = ScalaComponent .builder[NodeProps]("ReactTreeNode") .initialStateFromProps(P => if (P.open) NodeState(P.root.children) else NodeState()) .renderBackend[NodeBackend] .componentWillReceiveProps { c => c.modState(_.copy(children = if (c.nextProps.open) c.nextProps.root.children else Nil)) .when(c.nextProps.filterMode) .void } .build val component = ScalaComponent .builder[Props]("ReactTreeView") .initialState(State("", false, js.undefined)) .renderBackend[Backend] .build case class Props(root: TreeItem, open: Boolean, onItemSelect: js.UndefOr[(String, String, Int) => Callback], showSearchBox: Boolean, style: Style) def apply(root: TreeItem, openByDefault: Boolean = false, onItemSelect: js.UndefOr[(String, String, Int) => Callback] = js.undefined, showSearchBox: Boolean = false, style: Style = new Style {}) = component(Props(root, openByDefault, onItemSelect, showSearchBox, style)) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/Spinner.scala ================================================ package chandu0101.scalajs.react.components import chandu0101.macros.tojs.JSMacro import japgolly.scalajs.react._ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @js.native @JSImport("react-spinner", JSImport.Default) object SpinnerRequire extends js.Any @js.native @JSImport("react-spinner/react-spinner.css", JSImport.Namespace) object SpinnerCss extends js.Any case class Spinner( key: js.UndefOr[String] = js.undefined, ref: js.UndefOr[String] = js.undefined, className: js.UndefOr[String] = js.undefined ) { def apply() = { val f = JsComponent[js.Object, Children.None, Null](SpinnerRequire) f(JSMacro[Spinner](this)) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/elementalui/Eui.scala ================================================ package chandu0101.scalajs.react.components.elementalui import scala.scalajs.js import scala.scalajs.js.annotation.JSImport object Eui { // we need to fix these renames @js.native @JSImport("elemental/lib/components/Alert", JSImport.Default) object ElementalAlert extends js.Any @js.native @JSImport("elemental/lib/components/FileDragAndDrop", JSImport.Default) object Dropzone extends js.Any @js.native @JSImport("elemental/lib/components/BlankState", JSImport.Default) object BlankState extends js.Any @js.native @JSImport("elemental/lib/components/Button", JSImport.Default) object Button extends js.Any @js.native @JSImport("elemental/lib/components/ButtonGroup", JSImport.Default) object ButtonGroup extends js.Any @js.native @JSImport("elemental/lib/components/Checkbox", JSImport.Default) object Checkbox extends js.Any @js.native @JSImport("elemental/lib/components/Card", JSImport.Default) object Card extends js.Any @js.native @JSImport("elemental/lib/components/Col", JSImport.Default) object Col extends js.Any @js.native @JSImport("elemental/lib/components/Container", JSImport.Default) object Container extends js.Any @js.native @JSImport("elemental/lib/components/Dropdown", JSImport.Default) object Dropdown extends js.Any @js.native @JSImport("elemental/lib/components/EmailInputGroup", JSImport.Default) object EmailInputGroup extends js.Any @js.native @JSImport("elemental/lib/components/FileUpload", JSImport.Default) object FileUpload extends js.Any @js.native @JSImport("elemental/lib/components/Form", JSImport.Default) object Form extends js.Any @js.native @JSImport("elemental/lib/components/FormField", JSImport.Default) object FormField extends js.Any @js.native @JSImport("elemental/lib/components/FormIcon", JSImport.Default) object FormIcon extends js.Any @js.native @JSImport("elemental/lib/components/FormIconField", JSImport.Default) object FormIconField extends js.Any @js.native @JSImport("elemental/lib/components/FormInput", JSImport.Default) object FormInput extends js.Any @js.native @JSImport("elemental/lib/components/FormLabel", JSImport.Default) object FormLabel extends js.Any @js.native @JSImport("elemental/lib/components/FormNote", JSImport.Default) object FormNote extends js.Any @js.native @JSImport("elemental/lib/components/FormRow", JSImport.Default) object FormRow extends js.Any @js.native @JSImport("elemental/lib/components/FormSelect", JSImport.Default) object FormSelect extends js.Any @js.native @JSImport("elemental/lib/components/Glyph", JSImport.Default) object Glyph extends js.Any @js.native @JSImport("elemental/lib/components/InputGroup", JSImport.Default) object InputGroup extends js.Any @js.native @JSImport("elemental/lib/components/InputGroupSection", JSImport.Default) object InputGroupSection extends js.Any @js.native @JSImport("elemental/lib/components/Modal", JSImport.Default) object Modal extends js.Any @js.native @JSImport("elemental/lib/components/ModalBody", JSImport.Default) object ModalBody extends js.Any @js.native @JSImport("elemental/lib/components/ModalFooter", JSImport.Default) object ModalFooter extends js.Any @js.native @JSImport("elemental/lib/components/ModalHeader", JSImport.Default) object ModalHeader extends js.Any @js.native @JSImport("elemental/lib/components/Pagination", JSImport.Default) object Pagination extends js.Any @js.native @JSImport("elemental/lib/components/PasswordInputGroup", JSImport.Default) object PasswordInputGroup extends js.Any @js.native @JSImport("elemental/lib/components/Pill", JSImport.Default) object Pill extends js.Any @js.native @JSImport("elemental/lib/components/Radio", JSImport.Default) object Radio extends js.Any @js.native @JSImport("elemental/lib/components/ResponsiveText", JSImport.Default) object ResponsiveText extends js.Any @js.native @JSImport("elemental/lib/components/Row", JSImport.Default) object Row extends js.Any @js.native @JSImport("elemental/lib/components/RadioGroup", JSImport.Default) object RadioGroup extends js.Any @js.native @JSImport("elemental/lib/components/SegmentedControl", JSImport.Default) object SegmentedControl extends js.Any @js.native @JSImport("elemental/lib/components/Spinner", JSImport.Default) object Spinner extends js.Any @js.native @JSImport("elemental/lib/components/Table", JSImport.Default) object Table extends js.Any } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/elementalui/types.scala ================================================ package chandu0101.scalajs.react.components.elementalui import chandu0101.macros.tojs.JSMacro import scala.scalajs.js import scala.scalajs.js.annotation.ScalaJSDefined class FormSelectOption(val label: String, val value: String) extends js.Object { val toJS = JSMacro[FormSelectOption](this) } object FormSelectOption { def apply(label: String, value: String) = new FormSelectOption(label, value) } case class ModalSize(value: String) extends AnyVal object ModalSize { val small = ModalSize("small") val medium = ModalSize("medium") val large = ModalSize("large") val values = List(small, medium, large) def apply(value: String) = new ModalSize(value) } case class ColBasis private (value: String) extends AnyVal object ColBasis { val number = ColBasis("number") val string = ColBasis("string") } case class EuiDropdownMenuItemType private (value: String) extends AnyVal object EuiDropdownMenuItemType { val DIVIDER = EuiDropdownMenuItemType("divider") val HEADER = EuiDropdownMenuItemType("header") val DEFAULT = EuiDropdownMenuItemType("") def fromString(str: String): EuiDropdownMenuItemType = str match { case "divider" => DIVIDER case "header" => HEADER case _ => DEFAULT } } case class EuiDropdownMenuItem(label: String = "", `type`: EuiDropdownMenuItemType = EuiDropdownMenuItemType.DEFAULT) { val toJS = JSMacro[EuiDropdownMenuItem](this) } object EuiDropdownMenuItem { def fromJson(obj: js.Dynamic) = EuiDropdownMenuItem(label = obj.label.toString, `type` = EuiDropdownMenuItemType.fromString(obj.`type`.toString)) } case class File(lastModifiedDate: String, name: String, isClosed: Boolean, size: Long, `type`: String) { val toJS = JSMacro[File](this) } object File { def fromJson(obj: js.Dynamic) = File( lastModifiedDate = obj.lastModifiedState.toString, name = obj.name.toString, isClosed = obj.isClosed.toString.toBoolean, size = obj.size.toString.toLong, `type` = obj.`type`.toString ) } case class IconColorVariant private (value: String) extends AnyVal object IconColorVariant { val DANGER = IconColorVariant("danger") val DEFAULT = IconColorVariant("default") val PRIMARY = IconColorVariant("primary") val SUCCESS = IconColorVariant("success") val WARNING = IconColorVariant("warning") } case class FormIconFieldPosition private (value: String) extends AnyVal object FormIconFieldPosition { val LEFT = FormIconFieldPosition("left") val RIGHT = FormIconFieldPosition("right") } case class FormInputSize private (value: String) extends AnyVal object FormInputSize { val LG = FormInputSize("lg") val SM = FormInputSize("sm") val XS = FormInputSize("xs") } case class VerticalAlignment private (value: String) extends AnyVal object VerticalAlignment { val baseline = VerticalAlignment("baseline") val bottom = VerticalAlignment("bottom") val inherit = VerticalAlignment("inherit") val initial = VerticalAlignment("initial") val middle = VerticalAlignment("middle") val sub = VerticalAlignment("sub") val `super` = VerticalAlignment("super") val text_bottom = VerticalAlignment("text-bottom") val text_top = VerticalAlignment("text-top") val top = VerticalAlignment("top'") } case class ModalWidth private (value: String) extends AnyVal object ModalWidth { val SMALL = ModalWidth("small") val MEDIUM = ModalWidth("medium") val LARGE = ModalWidth("large") } case class Octicons private (value: String) extends AnyVal object Octicons { val alert = Octicons("alert") val arrow_down = Octicons("arrow-down") val arrow_left = Octicons("arrow-left") val arrow_right = Octicons("arrow-right") val arrow_small_down = Octicons("arrow-small-down") val arrow_small_left = Octicons("arrow-small-left") val arrow_small_right = Octicons("arrow-small-right") val arrow_small_up = Octicons("arrow-small-up") val arrow_up = Octicons("arrow-up") val beaker = Octicons("beaker") val bell = Octicons("bell") // val bold = Octicons("bold") val bookmark = Octicons("bookmark") val book = Octicons("book") val briefcase = Octicons("briefcase") val broadcast = Octicons("broadcast") val browser = Octicons("browser") val bug = Octicons("bug") val calendar = Octicons("calendar") val checklist = Octicons("checklist") val check = Octicons("check") val chevron_down = Octicons("chevron-down") val chevron_left = Octicons("chevron-left") val chevron_right = Octicons("chevron-right") val chevron_up = Octicons("chevron-up") val circle_slash = Octicons("circle-slash") val circuit_board = Octicons("circuit-board") val clippy = Octicons("clippy") val clock = Octicons("clock") val cloud_download = Octicons("cloud-download") val cloud_upload = Octicons("cloud-upload") val code = Octicons("code") val color_mode = Octicons("color-mode") val comment_discussion = Octicons("comment-discussion") val comment = Octicons("comment") val credit_card = Octicons("credit-card") val dashboard = Octicons("dashboard") val dash = Octicons("dash") val database = Octicons("database") val desktop_download = Octicons("desktop-download") val device_camera = Octicons("device-camera") val device_camera_video = Octicons("device-camera-video") val device_desktop = Octicons("device-desktop") val device_mobile = Octicons("device-mobile") val diff_added = Octicons("diff-added") val diff_ignored = Octicons("diff-ignored") val diff_modified = Octicons("diff-modified") val diff_removed = Octicons("diff-removed") val diff_renamed = Octicons("diff-renamed") val diff = Octicons("diff") val ellipsis = Octicons("ellipsis") val eye = Octicons("eye") val file_binary = Octicons("file-binary") val file_code = Octicons("file-code") val file_directory = Octicons("file-directory") val file_media = Octicons("file-media") val file_pdf = Octicons("file-pdf") val file_submodule = Octicons("file-submodule") val file_symlink_directory = Octicons("file-symlink-directory") val file_symlink_file = Octicons("file-symlink-file") val file_text = Octicons("file-text") val file_zip = Octicons("file-zip") val flame = Octicons("flame") val fold = Octicons("fold") val gear = Octicons("gear") val gift = Octicons("gift") val gist_secret = Octicons("gist-secret") val gist = Octicons("gist") val git_branch = Octicons("git-branch") val git_commit = Octicons("git-commit") val git_compare = Octicons("git-compare") val git_merge = Octicons("git-merge") val git_pull_request = Octicons("git-pull-request") val globe = Octicons("globe") val graph = Octicons("graph") val heart = Octicons("heart") val history = Octicons("history") val home = Octicons("home") val horizontal_rule = Octicons("horizontal-rule") val hubot = Octicons("hubot") // val icons = Octicons("icons") val inbox = Octicons("inbox") val info = Octicons("info") val issue_closed = Octicons("issue-closed") val issue_opened = Octicons("issue-opened") val issue_reopened = Octicons("issue-reopened") // val italic = Octicons("italic") val jersey = Octicons("jersey") val keyboard = Octicons("keyboard") val key = Octicons("key") val law = Octicons("law") val light_bulb = Octicons("light-bulb") val link_external = Octicons("link-external") val link = Octicons("link") val list_ordered = Octicons("list-ordered") val list_unordered = Octicons("list-unordered") val location = Octicons("location") val lock = Octicons("lock") val logo_github = Octicons("logo-github") val mail_read = Octicons("mail-read") val mail_reply = Octicons("mail-reply") val mail = Octicons("mail") val markdown = Octicons("markdown") val mark_github = Octicons("mark-github") val megaphone = Octicons("megaphone") val mention = Octicons("mention") val milestone = Octicons("milestone") val mirror = Octicons("mirror") val mortar_board = Octicons("mortar-board") val mute = Octicons("mute") val no_newline = Octicons("no-newline") val octoface = Octicons("octoface") val organization = Octicons("organization") val paintcan = Octicons("paintcan") val pencil = Octicons("pencil") val person = Octicons("person") val pin = Octicons("pin") val plug = Octicons("plug") val plus = Octicons("plus") val primitive_dot = Octicons("primitive-dot") val primitive_square = Octicons("primitive-square") val pulse = Octicons("pulse") val question = Octicons("question") val quote = Octicons("quote") val radio_tower = Octicons("radio-tower") val repo_clone = Octicons("repo-clone") val repo_force_push = Octicons("repo-force-push") val repo_forked = Octicons("repo-forked") val repo_pull = Octicons("repo-pull") val repo_push = Octicons("repo-push") val repo = Octicons("repo") val rocket = Octicons("rocket") val rss = Octicons("rss") val ruby = Octicons("ruby") val search = Octicons("search") val server = Octicons("server") val settings = Octicons("settings") val shield = Octicons("shield") val sign_in = Octicons("sign-in") val sign_out = Octicons("sign-out") val squirrel = Octicons("squirrel") val star = Octicons("star") val stop = Octicons("stop") val sync = Octicons("sync") val tag = Octicons("tag") // val tasklist = Octicons("tasklist") val telescope = Octicons("telescope") val terminal = Octicons("terminal") // val text_size = Octicons("text-size") val three_bars = Octicons("three-bars") val thumbsdown = Octicons("thumbsdown") val thumbsup = Octicons("thumbsup") val tools = Octicons("tools") val trashcan = Octicons("trashcan") val triangle_down = Octicons("triangle-down") val triangle_left = Octicons("triangle-left") val triangle_right = Octicons("triangle-right") val triangle_up = Octicons("triangle-up") val unfold = Octicons("unfold") val unmute = Octicons("unmute") val versions = Octicons("versions") val watch = Octicons("watch") val x = Octicons("x") val zap = Octicons("zap") val values = List( alert, arrow_down, arrow_left, arrow_right, arrow_small_down, arrow_small_left, arrow_small_right, arrow_small_up, arrow_up, beaker, bell, // bold, bookmark, book, briefcase, broadcast, browser, bug, calendar, checklist, check, chevron_down, chevron_left, chevron_right, chevron_up, circle_slash, circuit_board, clippy, clock, cloud_download, cloud_upload, code, color_mode, comment_discussion, comment, credit_card, dashboard, dash, database, desktop_download, device_camera, device_camera_video, device_desktop, device_mobile, diff_added, diff_ignored, diff_modified, diff_removed, diff_renamed, diff, ellipsis, eye, file_binary, file_code, file_directory, file_media, file_pdf, file_submodule, file_symlink_directory, file_symlink_file, file_text, file_zip, flame, fold, gear, gift, gist_secret, gist, git_branch, git_commit, git_compare, git_merge, git_pull_request, globe, graph, heart, history, home, horizontal_rule, hubot, // icons, inbox, info, issue_closed, issue_opened, issue_reopened, // italic, jersey, keyboard, key, law, light_bulb, link_external, link, list_ordered, list_unordered, location, lock, logo_github, mail_read, mail_reply, mail, markdown, mark_github, megaphone, mention, milestone, mirror, mortar_board, primitive_square, pulse, question, quote, radio_tower, repo_clone, repo_force_push, repo_forked, repo_pull, repo_push, repo, rocket, rss, ruby, search, server, settings, shield, sign_in, sign_out, squirrel, star, stop, sync, tag, // tasklist, telescope, terminal, //text_size, three_bars, thumbsdown, thumbsup, tools, trashcan, triangle_down, triangle_left, triangle_right, triangle_up, unfold, unmute, versions, watch, x ) } case class PillType private (value: String) extends AnyVal object PillType { val danger = PillType("danger") val default = PillType("default") val info = PillType("info") val primary = PillType("primary") val success = PillType("success") val warning = PillType("warning") val danger_inverted = PillType("danger-inverted") val default_inverted = PillType("default-inverted") val info_inverted = PillType("info-inverted") val primary_inverted = PillType("primary-inverted") val success_inverted = PillType("success-inverted") val warning_inverted = PillType("warning-inverted") } case class SpinnerSize private (value: String) extends AnyVal object SpinnerSize { val SM = SpinnerSize("sm") val MD = SpinnerSize("md") val LG = SpinnerSize("lg") } case class SpinnerType private (value: String) extends AnyVal object SpinnerType { val DEFAULT = SpinnerType("default") val PRIMARY = SpinnerType("primary") val INVERTED = SpinnerType("inverted") } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/fascades/GoogleMapFascade.scala ================================================ package chandu0101.scalajs.react.components package fascades import japgolly.scalajs.react.vdom.TopNode import org.scalajs.dom.Event import scala.scalajs.js import scala.scalajs.js.Dynamic.{literal => json} import scala.scalajs.js.JSConverters.genTravConvertible2JSRichGenTrav import scala.scalajs.js.annotation._ @js.native @JSGlobal("google.maps.LatLng") class GLatLng(lat: Double, lng: Double) extends js.Object @js.native @JSGlobal("google.maps.Map") class GMap(node: TopNode, options: js.Dynamic) extends js.Object { def setCenter(latLng: GLatLng): Unit = js.native } @js.native @JSGlobal("google.maps.Point") class GPoint(x: Int, y: Int) extends js.Object @js.native @JSGlobal("google.maps.Size") class GSize(width: Int, height: Int) extends js.Object @js.native @JSGlobal("google.maps.Marker") class GMarker(ops: js.Dynamic) extends js.Object { def setMap(map: GMap): Unit = js.native } @js.native @JSGlobal("google.maps.InfoWindow") class GInfoWindow extends js.Object { def setContent(content: String): Unit = js.native def open(map: GMap, marker: GMarker): Unit = js.native } @js.native @JSGlobal("google.maps.event") class GEvent extends js.Object { def addListener(marker: GMarker, tpe: String, callback: js.Function0[Unit]): Unit = js.native def addListener(marker: GMarker, tpe: String, callback: js.Function1[Event, Unit]): Unit = js.native } @js.native @JSGlobal("google.maps.event.addListener") class GAddListener(marker: GMarker, tpe: String, callback: js.Function) extends js.Object @js.native @JSGlobal("google.maps.event.clearInstanceListeners") class GClearInstanceListeners(marker: GMarker) extends js.Object @js.native @JSGlobal("google.maps.event.clearListeners") class GClearListeners(marker: GMarker, `type`: String) extends js.Object case class Point(x: Int, y: Int) { def toGPoint = new GPoint(x, y) } case class Size(width: Int, height: Int) { def toGSize = new GSize(width, height) } /* url = image location size = This marker is 20 pixels wide by 32 pixels tall. origin = The origin for this image is 0,0. anchor = The anchor for this image is the base of the flagpole at 0,32. */ case class Icon(url: String, size: Size, origin: Point, anchor: Point) { def toGIcon = json(url = url, size = size.toGSize, origin = origin.toGPoint, anchor = anchor.toGPoint) } /* Shapes define the clickable region of the icon. The type defines an HTML <area> element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes the poly by connecting to the first coordinate. */ case class Shape(coords: List[Int], tpe: String) { def toGShape = json("coords" -> coords.toJSArray, "type" -> tpe) } case class LatLng(lat: Double, lng: Double) { def toGlatlng = new GLatLng(lat, lng) } case class Marker(position: LatLng, title: String = "", icon: Icon = null, shape: Shape = null, zIndex: Int = 0, draggable: Boolean = false, content: String = "") { def toGMarker(map: GMap) = json( map = map, position = position.toGlatlng, title = title, icon = if (icon != null) icon.toGIcon else null, shape = if (shape != null) shape.toGShape else null, zIndex = zIndex, draggable = draggable ) } case class MapOptions(center: LatLng, zoom: Int = 4) { def toGMapOptions = json(center = center.toGlatlng, zoom = zoom) } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/helpers.scala ================================================ package chandu0101.scalajs.react.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom._ import scala.scalajs.js object Events { def register( element: EventTarget, tpe: String, _cb: Event => Callback, capture: Boolean = false ): Callback = { val cb: js.Function1[Event, Unit] = (e: Event) => _cb(e).runNow() element.addEventListener(tpe, cb, capture) Callback(element.removeEventListener(tpe, cb, capture)) } } object RCustomStyles extends RCustomStyles /** * Eventually these should be copied to scalajs-react core */ trait RCustomStyles { val MsFlexAlign = VdomStyle("MsFlexAlign") val MsFlexDirection = VdomStyle("MsFlexDirection") val MsFlexWrap = VdomStyle("MsFlexWrap") val WebkitAlignItems = VdomStyle("WebkitAlignItems") val WebkitBackgroundClip = VdomStyle("WebkitBackgroundClip") val WebkitBoxAlign = VdomStyle("WebkitBoxAlign") val WebkitBoxDirection = VdomStyle("WebkitBoxDirection") val WebkitBoxOrient = VdomStyle("WebkitBoxOrient") val WebkitBoxShadow = VdomStyle("WebkitBoxShadow") val WebkitFlexDirection = VdomStyle("WebkitFlexDirection") val WebkitFlexWrap = VdomStyle("WebkitFlexWrap") val WebkitTransform = VdomStyle("WebkitTransform") val mozTransform = VdomStyle("mozTransform") val msTransform = VdomStyle("msTransform") } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/HLJSStatic.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait HLJSStatic extends js.Object { var APOS_STRING_MODE: IMode = js.native // Common modes var BACKSLASH_ESCAPE: IMode = js.native var BINARY_NUMBER_MODE: IMode = js.native var BINARY_NUMBER_RE: String = js.native var CSS_NUMBER_MODE: IMode = js.native var C_BLOCK_COMMENT_MODE: IMode = js.native var C_LINE_COMMENT_MODE: IMode = js.native var C_NUMBER_MODE: IMode = js.native var C_NUMBER_RE: String = js.native var HASH_COMMENT_MODE: IMode = js.native // Common regexps var IDENT_RE: String = js.native var NUMBER_MODE: IMode = js.native var NUMBER_RE: String = js.native var PHRASAL_WORDS_MODE: IMode = js.native var QUOTE_STRING_MODE: IMode = js.native var REGEX_MODE: IMode = js.native var RE_STARTERS_RE: String = js.native var TITLE_MODE: IMode = js.native var UNDERSCORE_IDENT_RE: String = js.native var UNDERSCORE_TITLE_MODE: IMode = js.native def inherit(parent: js.Object, obj: js.Object): js.Object = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/Hljs.scala ================================================ package chandu0101.scalajs.react.components.hljs import org.scalajs.dom.Node import scala.scalajs.js import scala.scalajs.js.annotation._ import scala.scalajs.js.{RegExp, UndefOr, `|`} object Css { @js.native @JSImport("highlight.js/styles/github.css", JSImport.Namespace) object Github extends js.Any } object Languages { @js.native @JSImport("highlight.js/lib/languages/scala", JSImport.Namespace) object Scala extends js.Function1[ /* hljs */ js.UndefOr[HLJSStatic], IModeBase] { override def apply(arg1: UndefOr[HLJSStatic]): IModeBase = js.native } } @JSImport("highlight.js/lib/highlight.js", JSImport.Default) @js.native object Hljs extends js.Any { var APOS_STRING_MODE: IMode = js.native var BACKSLASH_ESCAPE: IMode = js.native var BINARY_NUMBER_MODE: IMode = js.native var BINARY_NUMBER_RE: String = js.native var CSS_NUMBER_MODE: IMode = js.native var C_BLOCK_COMMENT_MODE: IMode = js.native var C_LINE_COMMENT_MODE: IMode = js.native var C_NUMBER_MODE: IMode = js.native var C_NUMBER_RE: String = js.native var HASH_COMMENT_MODE: IMode = js.native var IDENT_RE: String = js.native var NUMBER_MODE: IMode = js.native var NUMBER_RE: String = js.native var PHRASAL_WORDS_MODE: IMode = js.native var QUOTE_STRING_MODE: IMode = js.native var REGEX_MODE: IMode = js.native var RE_STARTERS_RE: String = js.native var TITLE_MODE: IMode = js.native var UNDERSCORE_IDENT_RE: String = js.native var UNDERSCORE_TITLE_MODE: IMode = js.native def COMMENT(begin: String | RegExp, end: String | RegExp, inherits: IModeBase): IMode = js.native def configure(options: IOptions): Unit = js.native def fixMarkup(value: String): String = js.native def getLanguage(name: String): IMode = js.native def highlight(name: String, value: String): IHighlightResult = js.native def highlight(name: String, value: String, ignore_illegals: Boolean): IHighlightResult = js.native def highlight(name: String, value: String, ignore_illegals: Boolean, continuation: Boolean): IHighlightResult = js.native def highlightAuto(value: String): IAutoHighlightResult = js.native def highlightAuto(value: String, languageSubset: js.Array[String]): IAutoHighlightResult = js.native def highlightBlock(block: Node): Unit = js.native def inherit(parent: js.Object, obj: js.Object): js.Object = js.native def initHighlighting(): Unit = js.native def initHighlightingOnLoad(): Unit = js.native def listLanguages(): js.Array[String] = js.native def registerLanguage( name: String, language: js.Function1[ /* hljs */ js.UndefOr[HLJSStatic], IModeBase]): Unit = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IAutoHighlightResult.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait IAutoHighlightResult extends IHighlightResultBase { var second_best: js.UndefOr[IAutoHighlightResult] = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/ICompiledMode.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js import scala.scalajs.js.RegExp @js.native trait ICompiledMode extends IModeBase { var compiled: Boolean = js.native var contains: js.UndefOr[js.Array[ICompiledMode]] = js.native var keywords: js.UndefOr[js.Object] = js.native var terminator_end: js.UndefOr[String] = js.native var terminators: RegExp = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IHighlightResult.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait IHighlightResult extends IHighlightResultBase { var top: ICompiledMode = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IHighlightResultBase.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait IHighlightResultBase extends js.Object { var language: String = js.native var relevance: Double = js.native var value: String = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IMode.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait IMode extends IModeBase { var contains: js.UndefOr[js.Array[IMode]] = js.native var keywords: js.UndefOr[Any] = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IModeBase.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js import scala.scalajs.js.{RegExp, `|`} @js.native trait IModeBase extends js.Object { var aliases: js.UndefOr[js.Array[String]] = js.native var begin: js.UndefOr[String | RegExp] = js.native var beginKeyword: js.UndefOr[String] = js.native var case_insensitive: js.UndefOr[Boolean] = js.native var className: js.UndefOr[String] = js.native var end: js.UndefOr[String | RegExp] = js.native var endsWithParent: js.UndefOr[Boolean] = js.native var excludeBegin: js.UndefOr[Boolean] = js.native var excludeEnd: js.UndefOr[Boolean] = js.native var illegal: js.UndefOr[String] = js.native var lexems: js.UndefOr[String] = js.native var relevance: js.UndefOr[Double] = js.native var returnBegin: js.UndefOr[Boolean] = js.native var returnEnd: js.UndefOr[Boolean] = js.native var starts: js.UndefOr[String] = js.native var subLanguage: js.UndefOr[String] = js.native var subLanguageMode: js.UndefOr[String] = js.native var variants: js.UndefOr[js.Array[IMode]] = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/hljs/IOptions.scala ================================================ package chandu0101.scalajs.react.components.hljs import scala.scalajs.js @js.native trait IOptions extends js.Object { var classPrefix: js.UndefOr[String] = js.native var languages: js.UndefOr[js.Array[String]] = js.native var tabReplace: js.UndefOr[String] = js.native var useBR: js.UndefOr[Boolean] = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/Mui.scala ================================================ package chandu0101.scalajs.react.components.materialui import scala.scalajs.js import scala.scalajs.js.annotation._ object Mui { @js.native @JSImport("material-ui/AppBar", JSImport.Default) object AppBar extends js.Any @js.native @JSImport("material-ui/AutoComplete", JSImport.Default) object AutoComplete extends js.Any @js.native @JSImport("material-ui/Avatar", JSImport.Default) object Avatar extends js.Any @js.native @JSImport("material-ui/Badge", JSImport.Default) object Badge extends js.Any @js.native @JSImport("material-ui/BottomNavigation", JSImport.Default) object BottomNavigation extends js.Any @js.native @JSImport("material-ui/BottomNavigation/BottomNavigationItem", JSImport.Default) object BottomNavigationItem extends js.Any @js.native @JSImport("material-ui/Card", JSImport.Default) object Card extends js.Any @js.native @JSImport("material-ui/Card/CardActions", JSImport.Default) object CardActions extends js.Any @js.native @JSImport("material-ui/Card/CardHeader", JSImport.Default) object CardHeader extends js.Any @js.native @JSImport("material-ui/Card/CardMedia", JSImport.Default) object CardMedia extends js.Any @js.native @JSImport("material-ui/Card/CardTitle", JSImport.Default) object CardTitle extends js.Any @js.native @JSImport("material-ui/Card/CardText", JSImport.Default) object CardText extends js.Any @js.native @JSImport("material-ui/Checkbox", JSImport.Default) object Checkbox extends js.Any @js.native @JSImport("material-ui/Chip", JSImport.Default) object Chip extends js.Any @js.native @JSImport("material-ui/CircularProgress", JSImport.Default) object CircularProgress extends js.Any @js.native @JSImport("material-ui/DatePicker", JSImport.Default) object DatePicker extends js.Any @js.native @JSImport("material-ui/Dialog", JSImport.Default) object Dialog extends js.Any @js.native @JSImport("material-ui/Divider", JSImport.Default) object Divider extends js.Any @js.native @JSImport("material-ui/Drawer", JSImport.Default) object Drawer extends js.Any @js.native @JSImport("material-ui/DropDownMenu", JSImport.Default) object DropDownMenu extends js.Any @js.native @JSImport("material-ui/FlatButton", JSImport.Default) object FlatButton extends js.Any @js.native @JSImport("material-ui/FloatingActionButton", JSImport.Default) object FloatingActionButton extends js.Any @js.native @JSImport("material-ui/FontIcon", JSImport.Default) object FontIcon extends js.Any @js.native @JSImport("material-ui/GridList", JSImport.Default) object GridList extends js.Any @js.native @JSImport("material-ui/GridList/GridTile", JSImport.Default) object GridTile extends js.Any @js.native @JSImport("material-ui/IconButton", JSImport.Default) object IconButton extends js.Any @js.native @JSImport("material-ui/IconMenu", JSImport.Default) object IconMenu extends js.Any @js.native @JSImport("material-ui/LinearProgress", JSImport.Default) object LinearProgress extends js.Any @js.native @JSImport("material-ui/List", JSImport.Default) object List extends js.Any @js.native @JSImport("material-ui/List/ListItem", JSImport.Default) object ListItem extends js.Any @js.native @JSImport("material-ui/List/makeSelectable", JSImport.Default) object makeSelectable extends js.Any @js.native @JSImport("material-ui/Menu", JSImport.Default) object Menu extends js.Any @js.native @JSImport("material-ui/MenuItem", JSImport.Default) object MenuItem extends js.Any @js.native @JSImport("material-ui/styles/MuiThemeProvider", JSImport.Default) object MuiThemeProvider extends js.Any @js.native @JSImport("material-ui/Paper", JSImport.Default) object Paper extends js.Any @js.native @JSImport("material-ui/Popover", JSImport.Default) object Popover extends js.Any @js.native @JSImport("material-ui/RadioButton", JSImport.Default) object RadioButton extends js.Any @js.native @JSImport("material-ui/RadioButton/RadioButtonGroup", JSImport.Default) object RadioButtonGroup extends js.Any @js.native @JSImport("material-ui/RaisedButton", JSImport.Default) object RaisedButton extends js.Any @js.native @JSImport("material-ui/RefreshIndicator", JSImport.Default) object RefreshIndicator extends js.Any @js.native @JSImport("material-ui/SelectField", JSImport.Default) object SelectField extends js.Any @js.native @JSImport("material-ui/Slider", JSImport.Default) object Slider extends js.Any @js.native @JSImport("material-ui/Subheader", JSImport.Default) object Subheader extends js.Any @js.native @JSImport("material-ui/SvgIcon", JSImport.Default) object SvgIcon extends js.Any @js.native @JSImport("material-ui/Stepper/Step", JSImport.Default) object Step extends js.Any @js.native @JSImport("material-ui/Stepper/StepButton", JSImport.Default) object StepButton extends js.Any @js.native @JSImport("material-ui/Stepper/StepContent", JSImport.Default) object StepContent extends js.Any @js.native @JSImport("material-ui/Stepper/StepLabel", JSImport.Default) object StepLabel extends js.Any @js.native @JSImport("material-ui/Stepper/Stepper", JSImport.Default) object Stepper extends js.Any @js.native @JSImport("material-ui/Snackbar", JSImport.Default) object Snackbar extends js.Any @js.native @JSImport("material-ui/Tabs", JSImport.Default) object Tabs extends js.Any @js.native @JSImport("material-ui/Tabs/Tab", JSImport.Default) object Tab extends js.Any @js.native @JSImport("material-ui/Table", JSImport.Default) object Table extends js.Any @js.native @JSImport("material-ui/Table/TableBody", JSImport.Default) object TableBody extends js.Any @js.native @JSImport("material-ui/Table/TableFooter", JSImport.Default) object TableFooter extends js.Any @js.native @JSImport("material-ui/Table/TableHeader", JSImport.Default) object TableHeader extends js.Any @js.native @JSImport("material-ui/Table/TableHeaderColumn", JSImport.Default) object TableHeaderColumn extends js.Any @js.native @JSImport("material-ui/Table/TableRow", JSImport.Default) object TableRow extends js.Any @js.native @JSImport("material-ui/Table/TableRowColumn", JSImport.Default) object TableRowColumn extends js.Any @js.native @JSImport("material-ui/TextField", JSImport.Default) object TextField extends js.Any @js.native @JSImport("material-ui/TimePicker", JSImport.Default) object TimePicker extends js.Any @js.native @JSImport("material-ui/Toggle", JSImport.Default) object Toggle extends js.Any @js.native @JSImport("material-ui/Toolbar", JSImport.Default) object Toolbar extends js.Any @js.native @JSImport("material-ui/Toolbar/ToolbarGroup", JSImport.Default) object ToolbarGroup extends js.Any @js.native @JSImport("material-ui/Toolbar/ToolbarSeparator", JSImport.Default) object ToolbarSeparator extends js.Any @js.native @JSImport("material-ui/Toolbar/ToolbarTitle", JSImport.Default) object ToolbarTitle extends js.Any @js.native @JSImport("material-ui/styles", JSImport.Default) object Styles extends MuiStyles val SvgIcons = MuiSvgIcons } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/MuiAutoCompleteFilters.scala ================================================ package chandu0101.scalajs.react.components.materialui import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @js.native @JSImport("material-ui/AutoComplete", JSImport.Default) object MuiAutoCompleteFilters extends js.Any { val noFilter: js.Function3[String, String, String, Boolean] = js.native val defaultFilter: js.Function3[String, String, String, Boolean] = js.native val caseInsensitiveFilter: js.Function3[String, String, String, Boolean] = js.native val levenshteinDistanceFilter: js.Function3[String, String, String, Boolean] = js.native val fuzzyFilter: js.Function3[String, String, String, Boolean] = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/MuiColors.scala ================================================ package chandu0101.scalajs.react.components.materialui import scala.scalajs.js @js.native trait MuiColors extends js.Object { val red50: MuiColor = js.native val red100: MuiColor = js.native val red200: MuiColor = js.native val red300: MuiColor = js.native val red400: MuiColor = js.native val red500: MuiColor = js.native val red600: MuiColor = js.native val red700: MuiColor = js.native val red800: MuiColor = js.native val red900: MuiColor = js.native val redA100: MuiColor = js.native val redA200: MuiColor = js.native val redA400: MuiColor = js.native val redA700: MuiColor = js.native val pink50: MuiColor = js.native val pink100: MuiColor = js.native val pink200: MuiColor = js.native val pink300: MuiColor = js.native val pink400: MuiColor = js.native val pink500: MuiColor = js.native val pink600: MuiColor = js.native val pink700: MuiColor = js.native val pink800: MuiColor = js.native val pink900: MuiColor = js.native val pinkA100: MuiColor = js.native val pinkA200: MuiColor = js.native val pinkA400: MuiColor = js.native val pinkA700: MuiColor = js.native val purple50: MuiColor = js.native val purple100: MuiColor = js.native val purple200: MuiColor = js.native val purple300: MuiColor = js.native val purple400: MuiColor = js.native val purple500: MuiColor = js.native val purple600: MuiColor = js.native val purple700: MuiColor = js.native val purple800: MuiColor = js.native val purple900: MuiColor = js.native val purpleA100: MuiColor = js.native val purpleA200: MuiColor = js.native val purpleA400: MuiColor = js.native val purpleA700: MuiColor = js.native val deepPurple50: MuiColor = js.native val deepPurple100: MuiColor = js.native val deepPurple200: MuiColor = js.native val deepPurple300: MuiColor = js.native val deepPurple400: MuiColor = js.native val deepPurple500: MuiColor = js.native val deepPurple600: MuiColor = js.native val deepPurple700: MuiColor = js.native val deepPurple800: MuiColor = js.native val deepPurple900: MuiColor = js.native val deepPurpleA100: MuiColor = js.native val deepPurpleA200: MuiColor = js.native val deepPurpleA400: MuiColor = js.native val deepPurpleA700: MuiColor = js.native val indigo50: MuiColor = js.native val indigo100: MuiColor = js.native val indigo200: MuiColor = js.native val indigo300: MuiColor = js.native val indigo400: MuiColor = js.native val indigo500: MuiColor = js.native val indigo600: MuiColor = js.native val indigo700: MuiColor = js.native val indigo800: MuiColor = js.native val indigo900: MuiColor = js.native val indigoA100: MuiColor = js.native val indigoA200: MuiColor = js.native val indigoA400: MuiColor = js.native val indigoA700: MuiColor = js.native val blue50: MuiColor = js.native val blue100: MuiColor = js.native val blue200: MuiColor = js.native val blue300: MuiColor = js.native val blue400: MuiColor = js.native val blue500: MuiColor = js.native val blue600: MuiColor = js.native val blue700: MuiColor = js.native val blue800: MuiColor = js.native val blue900: MuiColor = js.native val blueA100: MuiColor = js.native val blueA200: MuiColor = js.native val blueA400: MuiColor = js.native val blueA700: MuiColor = js.native val lightBlue50: MuiColor = js.native val lightBlue100: MuiColor = js.native val lightBlue200: MuiColor = js.native val lightBlue300: MuiColor = js.native val lightBlue400: MuiColor = js.native val lightBlue500: MuiColor = js.native val lightBlue600: MuiColor = js.native val lightBlue700: MuiColor = js.native val lightBlue800: MuiColor = js.native val lightBlue900: MuiColor = js.native val lightBlueA100: MuiColor = js.native val lightBlueA200: MuiColor = js.native val lightBlueA400: MuiColor = js.native val lightBlueA700: MuiColor = js.native val cyan50: MuiColor = js.native val cyan100: MuiColor = js.native val cyan200: MuiColor = js.native val cyan300: MuiColor = js.native val cyan400: MuiColor = js.native val cyan500: MuiColor = js.native val cyan600: MuiColor = js.native val cyan700: MuiColor = js.native val cyan800: MuiColor = js.native val cyan900: MuiColor = js.native val cyanA100: MuiColor = js.native val cyanA200: MuiColor = js.native val cyanA400: MuiColor = js.native val cyanA700: MuiColor = js.native val teal50: MuiColor = js.native val teal100: MuiColor = js.native val teal200: MuiColor = js.native val teal300: MuiColor = js.native val teal400: MuiColor = js.native val teal500: MuiColor = js.native val teal600: MuiColor = js.native val teal700: MuiColor = js.native val teal800: MuiColor = js.native val teal900: MuiColor = js.native val tealA100: MuiColor = js.native val tealA200: MuiColor = js.native val tealA400: MuiColor = js.native val tealA700: MuiColor = js.native val green50: MuiColor = js.native val green100: MuiColor = js.native val green200: MuiColor = js.native val green300: MuiColor = js.native val green400: MuiColor = js.native val green500: MuiColor = js.native val green600: MuiColor = js.native val green700: MuiColor = js.native val green800: MuiColor = js.native val green900: MuiColor = js.native val greenA100: MuiColor = js.native val greenA200: MuiColor = js.native val greenA400: MuiColor = js.native val greenA700: MuiColor = js.native val lightGreen50: MuiColor = js.native val lightGreen100: MuiColor = js.native val lightGreen200: MuiColor = js.native val lightGreen300: MuiColor = js.native val lightGreen400: MuiColor = js.native val lightGreen500: MuiColor = js.native val lightGreen600: MuiColor = js.native val lightGreen700: MuiColor = js.native val lightGreen800: MuiColor = js.native val lightGreen900: MuiColor = js.native val lightGreenA100: MuiColor = js.native val lightGreenA200: MuiColor = js.native val lightGreenA400: MuiColor = js.native val lightGreenA700: MuiColor = js.native val lime50: MuiColor = js.native val lime100: MuiColor = js.native val lime200: MuiColor = js.native val lime300: MuiColor = js.native val lime400: MuiColor = js.native val lime500: MuiColor = js.native val lime600: MuiColor = js.native val lime700: MuiColor = js.native val lime800: MuiColor = js.native val lime900: MuiColor = js.native val limeA100: MuiColor = js.native val limeA200: MuiColor = js.native val limeA400: MuiColor = js.native val limeA700: MuiColor = js.native val yellow50: MuiColor = js.native val yellow100: MuiColor = js.native val yellow200: MuiColor = js.native val yellow300: MuiColor = js.native val yellow400: MuiColor = js.native val yellow500: MuiColor = js.native val yellow600: MuiColor = js.native val yellow700: MuiColor = js.native val yellow800: MuiColor = js.native val yellow900: MuiColor = js.native val yellowA100: MuiColor = js.native val yellowA200: MuiColor = js.native val yellowA400: MuiColor = js.native val yellowA700: MuiColor = js.native val amber50: MuiColor = js.native val amber100: MuiColor = js.native val amber200: MuiColor = js.native val amber300: MuiColor = js.native val amber400: MuiColor = js.native val amber500: MuiColor = js.native val amber600: MuiColor = js.native val amber700: MuiColor = js.native val amber800: MuiColor = js.native val amber900: MuiColor = js.native val amberA100: MuiColor = js.native val amberA200: MuiColor = js.native val amberA400: MuiColor = js.native val amberA700: MuiColor = js.native val orange50: MuiColor = js.native val orange100: MuiColor = js.native val orange200: MuiColor = js.native val orange300: MuiColor = js.native val orange400: MuiColor = js.native val orange500: MuiColor = js.native val orange600: MuiColor = js.native val orange700: MuiColor = js.native val orange800: MuiColor = js.native val orange900: MuiColor = js.native val orangeA100: MuiColor = js.native val orangeA200: MuiColor = js.native val orangeA400: MuiColor = js.native val orangeA700: MuiColor = js.native val deepOrange50: MuiColor = js.native val deepOrange100: MuiColor = js.native val deepOrange200: MuiColor = js.native val deepOrange300: MuiColor = js.native val deepOrange400: MuiColor = js.native val deepOrange500: MuiColor = js.native val deepOrange600: MuiColor = js.native val deepOrange700: MuiColor = js.native val deepOrange800: MuiColor = js.native val deepOrange900: MuiColor = js.native val deepOrangeA100: MuiColor = js.native val deepOrangeA200: MuiColor = js.native val deepOrangeA400: MuiColor = js.native val deepOrangeA700: MuiColor = js.native val brown50: MuiColor = js.native val brown100: MuiColor = js.native val brown200: MuiColor = js.native val brown300: MuiColor = js.native val brown400: MuiColor = js.native val brown500: MuiColor = js.native val brown600: MuiColor = js.native val brown700: MuiColor = js.native val brown800: MuiColor = js.native val brown900: MuiColor = js.native val blueGrey50: MuiColor = js.native val blueGrey100: MuiColor = js.native val blueGrey200: MuiColor = js.native val blueGrey300: MuiColor = js.native val blueGrey400: MuiColor = js.native val blueGrey500: MuiColor = js.native val blueGrey600: MuiColor = js.native val blueGrey700: MuiColor = js.native val blueGrey800: MuiColor = js.native val blueGrey900: MuiColor = js.native val grey50: MuiColor = js.native val grey100: MuiColor = js.native val grey200: MuiColor = js.native val grey300: MuiColor = js.native val grey400: MuiColor = js.native val grey500: MuiColor = js.native val grey600: MuiColor = js.native val grey700: MuiColor = js.native val grey800: MuiColor = js.native val grey900: MuiColor = js.native val black: MuiColor = js.native val white: MuiColor = js.native val transparent: MuiColor = js.native val fullBlack: MuiColor = js.native val darkBlack: MuiColor = js.native val lightBlack: MuiColor = js.native val minBlack: MuiColor = js.native val faintBlack: MuiColor = js.native val fullWhite: MuiColor = js.native val darkWhite: MuiColor = js.native val lightWhite: MuiColor = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/MuiStyles.scala ================================================ package chandu0101.scalajs.react.components.materialui import japgolly.scalajs.react._ import scala.scalajs.js @js.native trait MuiColor extends js.Object @js.native trait MuiStyles extends js.Object { def getMuiTheme(raw: MuiRawTheme): MuiTheme = js.native val AutoPrefix: js.Dynamic = js.native val colors: MuiColors = js.native val Spacing: MuiSpacings = js.native val MuiThemeProvider: js.Dynamic = js.native val Typography: js.Dynamic = js.native val Transitions: js.Dynamic = js.native val DarkRawTheme: MuiRawTheme = js.native val LightRawTheme: MuiRawTheme = js.native } @js.native trait MuiSpacings extends js.Object { val iconSize: Int = js.native val desktopGutter: Int = js.native val desktopGutterMore: Int = js.native val desktopGutterLess: Int = js.native val desktopGutterMini: Int = js.native val desktopKeylineIncrement: Int = js.native val desktopDropDownMenuItemHeight: Int = js.native val desktopDropDownMenuFontSize: Int = js.native val desktopLeftNavMenuItemHeight: Int = js.native val desktopSubheaderHeight: Int = js.native val desktopToolbarHeight: Int = js.native } object MuiSpacings { def apply(iconSize: Int, desktopGutter: Int, desktopGutterMore: Int, desktopGutterLess: Int, desktopGutterMini: Int, desktopKeylineIncrement: Int, desktopDropDownMenuItemHeight: Int, desktopDropDownMenuFontSize: Int, desktopLeftNavMenuItemHeight: Int, desktopSubheaderHeight: Int, desktopToolbarHeight: Int): MuiSpacings = js.Dynamic .literal( iconSize = iconSize, desktopGutter = desktopGutter, desktopGutterMore = desktopGutterMore, desktopGutterLess = desktopGutterLess, desktopGutterMini = desktopGutterMini, desktopKeylineIncrement = desktopKeylineIncrement, desktopDropDownMenuItemHeight = desktopDropDownMenuItemHeight, desktopDropDownMenuFontSize = desktopDropDownMenuFontSize, desktopLeftNavMenuItemHeight = desktopLeftNavMenuItemHeight, desktopSubheaderHeight = desktopSubheaderHeight, desktopToolbarHeight = desktopToolbarHeight ) .asInstanceOf[MuiSpacings] implicit class MuiSpacingOps(s: MuiSpacings) { def copy(iconSize: Int = s.iconSize, desktopGutter: Int = s.desktopGutter, desktopGutterMore: Int = s.desktopGutterMore, desktopGutterLess: Int = s.desktopGutterLess, desktopGutterMini: Int = s.desktopGutterMini, desktopKeylineIncrement: Int = s.desktopKeylineIncrement, desktopDropDownMenuItemHeight: Int = s.desktopDropDownMenuItemHeight, desktopDropDownMenuFontSize: Int = s.desktopDropDownMenuFontSize, desktopLeftNavMenuItemHeight: Int = s.desktopLeftNavMenuItemHeight, desktopSubheaderHeight: Int = s.desktopSubheaderHeight, desktopToolbarHeight: Int = s.desktopToolbarHeight): MuiSpacings = js.Dynamic .literal( iconSize = iconSize, desktopGutter = desktopGutter, desktopGutterMore = desktopGutterMore, desktopGutterLess = desktopGutterLess, desktopGutterMini = desktopGutterMini, desktopKeylineIncrement = desktopKeylineIncrement, desktopDropDownMenuItemHeight = desktopDropDownMenuItemHeight, desktopDropDownMenuFontSize = desktopDropDownMenuFontSize, desktopLeftNavMenuItemHeight = desktopLeftNavMenuItemHeight, desktopSubheaderHeight = desktopSubheaderHeight, desktopToolbarHeight = desktopToolbarHeight ) .asInstanceOf[MuiSpacings] } } @js.native trait MuiPalette extends js.Object { val primary1Color: MuiColor = js.native val primary2Color: MuiColor = js.native val primary3Color: MuiColor = js.native val accent1Color: MuiColor = js.native val accent2Color: MuiColor = js.native val accent3Color: MuiColor = js.native val textColor: MuiColor = js.native val alternateTextColor: MuiColor = js.native val canvasColor: MuiColor = js.native val borderColor: MuiColor = js.native val disabledColor: MuiColor = js.native } object MuiPalette { def apply(primary1Color: MuiColor, primary2Color: MuiColor, primary3Color: MuiColor, accent1Color: MuiColor, accent2Color: MuiColor, accent3Color: MuiColor, textColor: MuiColor, alternateTextColor: MuiColor, canvasColor: MuiColor, borderColor: MuiColor, disabledColor: MuiColor): MuiPalette = { js.Dynamic .literal( primary1Color = primary1Color, primary2Color = primary2Color, primary3Color = primary3Color, accent1Color = accent1Color, accent2Color = accent2Color, accent3Color = accent3Color, textColor = textColor, alternateTextColor = alternateTextColor, canvasColor = canvasColor, borderColor = borderColor, disabledColor = disabledColor ) .asInstanceOf[MuiPalette] } implicit class MuiPaletteOps(p: MuiPalette) { def copy(primary1Color: MuiColor = p.primary1Color, primary2Color: MuiColor = p.primary2Color, primary3Color: MuiColor = p.primary3Color, accent1Color: MuiColor = p.accent1Color, accent2Color: MuiColor = p.accent2Color, accent3Color: MuiColor = p.accent3Color, textColor: MuiColor = p.textColor, alternateTextColor: MuiColor = p.alternateTextColor, canvasColor: MuiColor = p.canvasColor, borderColor: MuiColor = p.borderColor, disabledColor: MuiColor = p.disabledColor): MuiPalette = js.Dynamic .literal( primary1Color = primary1Color, primary2Color = primary2Color, primary3Color = primary3Color, accent1Color = accent1Color, accent2Color = accent2Color, accent3Color = accent3Color, textColor = textColor, alternateTextColor = alternateTextColor, canvasColor = canvasColor, borderColor = borderColor, disabledColor = disabledColor ) .asInstanceOf[MuiPalette] } } @js.native trait MuiRawTheme extends js.Object { val spacing: MuiSpacings = js.native val fontFamily: String = js.native val palette: MuiPalette = js.native } object MuiRawTheme { def apply(spacing: MuiSpacings, fontFamily: String, palette: MuiPalette): MuiRawTheme = { js.Dynamic .literal(spacing = spacing, fontFamily = fontFamily, palette = palette) .asInstanceOf[MuiRawTheme] } implicit class MuiRawThemeOps(t: MuiRawTheme) { def copy(spacing: MuiSpacings = t.spacing, fontFamily: String = t.fontFamily, palette: MuiPalette = t.palette): MuiRawTheme = js.Dynamic .literal( spacing = spacing, fontFamily = fontFamily, palette = palette ) .asInstanceOf[MuiRawTheme] } } @js.native trait MuiTheme extends js.Object ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/MuiSvgIcons.scala ================================================ package chandu0101.scalajs.react.components package materialui import japgolly.scalajs.react.component.Js.{RawMounted, UnmountedWithRawType} import japgolly.scalajs.react.vdom.VdomNode import japgolly.scalajs.react.{Callback, Children, JsComponent, ReactMouseEventFromHtml} import scala.scalajs.js import scala.scalajs.js.annotation.JSImport @js.native trait MuiSvgIconProps extends js.Object { def key: js.UndefOr[String] def ref: js.UndefOr[String] def color: js.UndefOr[String] def hoverColor: js.UndefOr[String] def onMouseEnter: js.UndefOr[ReactMouseEventFromHtml => Callback] def onMouseLeave: js.UndefOr[ReactMouseEventFromHtml => Callback] def style: js.UndefOr[CssProperties] def viewBox: js.UndefOr[String] } object MuiSvgIcon { implicit class SvgIconApply(icon: MuiSvgIcon) { def apply( key: js.UndefOr[String] = js.undefined, ref: js.UndefOr[String] = js.undefined, color: js.UndefOr[String] = js.undefined, hoverColor: js.UndefOr[MuiColor] = js.undefined, onMouseEnter: js.UndefOr[ReactMouseEventFromHtml => Callback] = js.undefined, onMouseLeave: js.UndefOr[ReactMouseEventFromHtml => Callback] = js.undefined, style: js.UndefOr[CssProperties] = js.undefined, viewBox: js.UndefOr[String] = js.undefined )(children: VdomNode*): UnmountedWithRawType[MuiSvgIconProps, Null, RawMounted] = { val props = js.Dynamic.literal() key.foreach(v => props.updateDynamic("key")(v)) ref.foreach(v => props.updateDynamic("ref")(v)) color.foreach(v => props.updateDynamic("color")(v)) hoverColor.foreach(v => props.updateDynamic("hoverColor")(v)) onMouseEnter.foreach(v => props.updateDynamic("onMouseEnter")(v andThen (_.runNow()))) onMouseLeave.foreach(v => props.updateDynamic("onMouseLeave")(v andThen (_.runNow()))) style.foreach(v => props.updateDynamic("style")(v)) viewBox.foreach(v => props.updateDynamic("viewBox")(v)) val svgProps: MuiSvgIconProps = props.asInstanceOf[MuiSvgIconProps] val Component = JsComponent[MuiSvgIconProps, Children.Varargs, Null](icon) Component(svgProps)(children: _*) } } } @js.native trait MuiSvgIcon extends js.Any object MuiSvgIcons { @js.native @JSImport("material-ui/svg-icons/action/accessibility", JSImport.Default) object ActionAccessibility extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/accessible", JSImport.Default) object ActionAccessible extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/account-balance-wallet", JSImport.Default) object ActionAccountBalanceWallet extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/account-balance", JSImport.Default) object ActionAccountBalance extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/account-box", JSImport.Default) object ActionAccountBox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/account-circle", JSImport.Default) object ActionAccountCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/add-shopping-cart", JSImport.Default) object ActionAddShoppingCart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/alarm-add", JSImport.Default) object ActionAlarmAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/alarm-off", JSImport.Default) object ActionAlarmOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/alarm-on", JSImport.Default) object ActionAlarmOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/alarm", JSImport.Default) object ActionAlarm extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/all-out", JSImport.Default) object ActionAllOut extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/android", JSImport.Default) object ActionAndroid extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/announcement", JSImport.Default) object ActionAnnouncement extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/aspect-ratio", JSImport.Default) object ActionAspectRatio extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assessment", JSImport.Default) object ActionAssessment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment-ind", JSImport.Default) object ActionAssignmentInd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment-late", JSImport.Default) object ActionAssignmentLate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment-return", JSImport.Default) object ActionAssignmentReturn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment-returned", JSImport.Default) object ActionAssignmentReturned extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment-turned-in", JSImport.Default) object ActionAssignmentTurnedIn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/assignment", JSImport.Default) object ActionAssignment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/autorenew", JSImport.Default) object ActionAutorenew extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/backup", JSImport.Default) object ActionBackup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/book", JSImport.Default) object ActionBook extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/bookmark-border", JSImport.Default) object ActionBookmarkBorder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/bookmark", JSImport.Default) object ActionBookmark extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/bug-report", JSImport.Default) object ActionBugReport extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/build", JSImport.Default) object ActionBuild extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/cached", JSImport.Default) object ActionCached extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/camera-enhance", JSImport.Default) object ActionCameraEnhance extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/card-giftcard", JSImport.Default) object ActionCardGiftcard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/card-membership", JSImport.Default) object ActionCardMembership extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/card-travel", JSImport.Default) object ActionCardTravel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/change-history", JSImport.Default) object ActionChangeHistory extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/check-circle", JSImport.Default) object ActionCheckCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/chrome-reader-mode", JSImport.Default) object ActionChromeReaderMode extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/class", JSImport.Default) object ActionClass extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/code", JSImport.Default) object ActionCode extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/compare-arrows", JSImport.Default) object ActionCompareArrows extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/copyright", JSImport.Default) object ActionCopyright extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/credit-card", JSImport.Default) object ActionCreditCard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/dashboard", JSImport.Default) object ActionDashboard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/date-range", JSImport.Default) object ActionDateRange extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/delete-forever", JSImport.Default) object ActionDeleteForever extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/delete", JSImport.Default) object ActionDelete extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/description", JSImport.Default) object ActionDescription extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/dns", JSImport.Default) object ActionDns extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/done-all", JSImport.Default) object ActionDoneAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/done", JSImport.Default) object ActionDone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/donut-large", JSImport.Default) object ActionDonutLarge extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/donut-small", JSImport.Default) object ActionDonutSmall extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/eject", JSImport.Default) object ActionEject extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/euro-symbol", JSImport.Default) object ActionEuroSymbol extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/event-seat", JSImport.Default) object ActionEventSeat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/event", JSImport.Default) object ActionEvent extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/exit-to-app", JSImport.Default) object ActionExitToApp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/explore", JSImport.Default) object ActionExplore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/extension", JSImport.Default) object ActionExtension extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/face", JSImport.Default) object ActionFace extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/favorite-border", JSImport.Default) object ActionFavoriteBorder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/favorite", JSImport.Default) object ActionFavorite extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/feedback", JSImport.Default) object ActionFeedback extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/find-in-page", JSImport.Default) object ActionFindInPage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/find-replace", JSImport.Default) object ActionFindReplace extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/fingerprint", JSImport.Default) object ActionFingerprint extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/flight-land", JSImport.Default) object ActionFlightLand extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/flight-takeoff", JSImport.Default) object ActionFlightTakeoff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/flip-to-back", JSImport.Default) object ActionFlipToBack extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/flip-to-front", JSImport.Default) object ActionFlipToFront extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/g-translate", JSImport.Default) object ActionGTranslate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/gavel", JSImport.Default) object ActionGavel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/get-app", JSImport.Default) object ActionGetApp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/gif", JSImport.Default) object ActionGif extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/grade", JSImport.Default) object ActionGrade extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/group-work", JSImport.Default) object ActionGroupWork extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/help-outline", JSImport.Default) object ActionHelpOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/help", JSImport.Default) object ActionHelp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/highlight-off", JSImport.Default) object ActionHighlightOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/history", JSImport.Default) object ActionHistory extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/home", JSImport.Default) object ActionHome extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/hourglass-empty", JSImport.Default) object ActionHourglassEmpty extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/hourglass-full", JSImport.Default) object ActionHourglassFull extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/http", JSImport.Default) object ActionHttp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/https", JSImport.Default) object ActionHttps extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/important-devices", JSImport.Default) object ActionImportantDevices extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/info-outline", JSImport.Default) object ActionInfoOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/info", JSImport.Default) object ActionInfo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/input", JSImport.Default) object ActionInput extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/invert-colors", JSImport.Default) object ActionInvertColors extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/label-outline", JSImport.Default) object ActionLabelOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/label", JSImport.Default) object ActionLabel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/language", JSImport.Default) object ActionLanguage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/launch", JSImport.Default) object ActionLaunch extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/lightbulb-outline", JSImport.Default) object ActionLightbulbOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/line-style", JSImport.Default) object ActionLineStyle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/line-weight", JSImport.Default) object ActionLineWeight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/list", JSImport.Default) object ActionList extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/lock-open", JSImport.Default) object ActionLockOpen extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/lock-outline", JSImport.Default) object ActionLockOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/lock", JSImport.Default) object ActionLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/loyalty", JSImport.Default) object ActionLoyalty extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/markunread-mailbox", JSImport.Default) object ActionMarkunreadMailbox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/motorcycle", JSImport.Default) object ActionMotorcycle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/note-add", JSImport.Default) object ActionNoteAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/offline-pin", JSImport.Default) object ActionOfflinePin extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/opacity", JSImport.Default) object ActionOpacity extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/open-in-browser", JSImport.Default) object ActionOpenInBrowser extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/open-in-new", JSImport.Default) object ActionOpenInNew extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/open-with", JSImport.Default) object ActionOpenWith extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/pageview", JSImport.Default) object ActionPageview extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/pan-tool", JSImport.Default) object ActionPanTool extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/payment", JSImport.Default) object ActionPayment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-camera-mic", JSImport.Default) object ActionPermCameraMic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-contact-calendar", JSImport.Default) object ActionPermContactCalendar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-data-setting", JSImport.Default) object ActionPermDataSetting extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-device-information", JSImport.Default) object ActionPermDeviceInformation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-identity", JSImport.Default) object ActionPermIdentity extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-media", JSImport.Default) object ActionPermMedia extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-phone-msg", JSImport.Default) object ActionPermPhoneMsg extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/perm-scan-wifi", JSImport.Default) object ActionPermScanWifi extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/pets", JSImport.Default) object ActionPets extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/picture-in-picture-alt", JSImport.Default) object ActionPictureInPictureAlt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/picture-in-picture", JSImport.Default) object ActionPictureInPicture extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/play-for-work", JSImport.Default) object ActionPlayForWork extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/polymer", JSImport.Default) object ActionPolymer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/power-settings-new", JSImport.Default) object ActionPowerSettingsNew extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/pregnant-woman", JSImport.Default) object ActionPregnantWoman extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/print", JSImport.Default) object ActionPrint extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/query-builder", JSImport.Default) object ActionQueryBuilder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/question-answer", JSImport.Default) object ActionQuestionAnswer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/receipt", JSImport.Default) object ActionReceipt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/record-voice-over", JSImport.Default) object ActionRecordVoiceOver extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/redeem", JSImport.Default) object ActionRedeem extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/remove-shopping-cart", JSImport.Default) object ActionRemoveShoppingCart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/reorder", JSImport.Default) object ActionReorder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/report-problem", JSImport.Default) object ActionReportProblem extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/restore-page", JSImport.Default) object ActionRestorePage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/restore", JSImport.Default) object ActionRestore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/room", JSImport.Default) object ActionRoom extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/rounded-corner", JSImport.Default) object ActionRoundedCorner extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/rowing", JSImport.Default) object ActionRowing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/schedule", JSImport.Default) object ActionSchedule extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/search", JSImport.Default) object ActionSearch extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-applications", JSImport.Default) object ActionSettingsApplications extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-backup-restore", JSImport.Default) object ActionSettingsBackupRestore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-bluetooth", JSImport.Default) object ActionSettingsBluetooth extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-brightness", JSImport.Default) object ActionSettingsBrightness extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-cell", JSImport.Default) object ActionSettingsCell extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-ethernet", JSImport.Default) object ActionSettingsEthernet extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-input-antenna", JSImport.Default) object ActionSettingsInputAntenna extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-input-component", JSImport.Default) object ActionSettingsInputComponent extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-input-composite", JSImport.Default) object ActionSettingsInputComposite extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-input-hdmi", JSImport.Default) object ActionSettingsInputHdmi extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-input-svideo", JSImport.Default) object ActionSettingsInputSvideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-overscan", JSImport.Default) object ActionSettingsOverscan extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-phone", JSImport.Default) object ActionSettingsPhone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-power", JSImport.Default) object ActionSettingsPower extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-remote", JSImport.Default) object ActionSettingsRemote extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings-voice", JSImport.Default) object ActionSettingsVoice extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/settings", JSImport.Default) object ActionSettings extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/shop-two", JSImport.Default) object ActionShopTwo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/shop", JSImport.Default) object ActionShop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/shopping-basket", JSImport.Default) object ActionShoppingBasket extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/shopping-cart", JSImport.Default) object ActionShoppingCart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/speaker-notes-off", JSImport.Default) object ActionSpeakerNotesOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/speaker-notes", JSImport.Default) object ActionSpeakerNotes extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/spellcheck", JSImport.Default) object ActionSpellcheck extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/stars", JSImport.Default) object ActionStars extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/store", JSImport.Default) object ActionStore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/subject", JSImport.Default) object ActionSubject extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/supervisor-account", JSImport.Default) object ActionSupervisorAccount extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/swap-horiz", JSImport.Default) object ActionSwapHoriz extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/swap-vert", JSImport.Default) object ActionSwapVert extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/swap-vertical-circle", JSImport.Default) object ActionSwapVerticalCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/system-update-alt", JSImport.Default) object ActionSystemUpdateAlt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/tab-unselected", JSImport.Default) object ActionTabUnselected extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/tab", JSImport.Default) object ActionTab extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/theaters", JSImport.Default) object ActionTheaters extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/three-d-rotation", JSImport.Default) object ActionThreeDRotation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/thumb-down", JSImport.Default) object ActionThumbDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/thumb-up", JSImport.Default) object ActionThumbUp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/thumbs-up-down", JSImport.Default) object ActionThumbsUpDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/timeline", JSImport.Default) object ActionTimeline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/toc", JSImport.Default) object ActionToc extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/today", JSImport.Default) object ActionToday extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/toll", JSImport.Default) object ActionToll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/touch-app", JSImport.Default) object ActionTouchApp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/track-changes", JSImport.Default) object ActionTrackChanges extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/translate", JSImport.Default) object ActionTranslate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/trending-down", JSImport.Default) object ActionTrendingDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/trending-flat", JSImport.Default) object ActionTrendingFlat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/trending-up", JSImport.Default) object ActionTrendingUp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/turned-in-not", JSImport.Default) object ActionTurnedInNot extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/turned-in", JSImport.Default) object ActionTurnedIn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/update", JSImport.Default) object ActionUpdate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/verified-user", JSImport.Default) object ActionVerifiedUser extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-agenda", JSImport.Default) object ActionViewAgenda extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-array", JSImport.Default) object ActionViewArray extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-carousel", JSImport.Default) object ActionViewCarousel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-column", JSImport.Default) object ActionViewColumn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-day", JSImport.Default) object ActionViewDay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-headline", JSImport.Default) object ActionViewHeadline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-list", JSImport.Default) object ActionViewList extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-module", JSImport.Default) object ActionViewModule extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-quilt", JSImport.Default) object ActionViewQuilt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-stream", JSImport.Default) object ActionViewStream extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/view-week", JSImport.Default) object ActionViewWeek extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/visibility-off", JSImport.Default) object ActionVisibilityOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/visibility", JSImport.Default) object ActionVisibility extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/watch-later", JSImport.Default) object ActionWatchLater extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/work", JSImport.Default) object ActionWork extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/youtube-searched-for", JSImport.Default) object ActionYoutubeSearchedFor extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/zoom-in", JSImport.Default) object ActionZoomIn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/action/zoom-out", JSImport.Default) object ActionZoomOut extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/alert/add-alert", JSImport.Default) object AlertAddAlert extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/alert/error-outline", JSImport.Default) object AlertErrorOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/alert/error", JSImport.Default) object AlertError extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/alert/warning", JSImport.Default) object AlertWarning extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/add-to-queue", JSImport.Default) object AvAddToQueue extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/airplay", JSImport.Default) object AvAirplay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/album", JSImport.Default) object AvAlbum extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/art-track", JSImport.Default) object AvArtTrack extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/av-timer", JSImport.Default) object AvAvTimer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/branding-watermark", JSImport.Default) object AvBrandingWatermark extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/call-to-action", JSImport.Default) object AvCallToAction extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/closed-caption", JSImport.Default) object AvClosedCaption extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/equalizer", JSImport.Default) object AvEqualizer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/explicit", JSImport.Default) object AvExplicit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fast-forward", JSImport.Default) object AvFastForward extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fast-rewind", JSImport.Default) object AvFastRewind extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/featured-play-list", JSImport.Default) object AvFeaturedPlayList extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/featured-video", JSImport.Default) object AvFeaturedVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fiber-dvr", JSImport.Default) object AvFiberDvr extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fiber-manual-record", JSImport.Default) object AvFiberManualRecord extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fiber-new", JSImport.Default) object AvFiberNew extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fiber-pin", JSImport.Default) object AvFiberPin extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/fiber-smart-record", JSImport.Default) object AvFiberSmartRecord extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/forward-10", JSImport.Default) object AvForward10 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/forward-30", JSImport.Default) object AvForward30 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/forward-5", JSImport.Default) object AvForward5 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/games", JSImport.Default) object AvGames extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/hd", JSImport.Default) object AvHd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/hearing", JSImport.Default) object AvHearing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/high-quality", JSImport.Default) object AvHighQuality extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/library-add", JSImport.Default) object AvLibraryAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/library-books", JSImport.Default) object AvLibraryBooks extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/library-music", JSImport.Default) object AvLibraryMusic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/loop", JSImport.Default) object AvLoop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/mic-none", JSImport.Default) object AvMicNone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/mic-off", JSImport.Default) object AvMicOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/mic", JSImport.Default) object AvMic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/movie", JSImport.Default) object AvMovie extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/music-video", JSImport.Default) object AvMusicVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/new-releases", JSImport.Default) object AvNewReleases extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/not-interested", JSImport.Default) object AvNotInterested extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/note", JSImport.Default) object AvNote extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/pause-circle-filled", JSImport.Default) object AvPauseCircleFilled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/pause-circle-outline", JSImport.Default) object AvPauseCircleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/pause", JSImport.Default) object AvPause extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/play-arrow", JSImport.Default) object AvPlayArrow extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/play-circle-filled", JSImport.Default) object AvPlayCircleFilled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/play-circle-outline", JSImport.Default) object AvPlayCircleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/playlist-add-check", JSImport.Default) object AvPlaylistAddCheck extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/playlist-add", JSImport.Default) object AvPlaylistAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/playlist-play", JSImport.Default) object AvPlaylistPlay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/queue-music", JSImport.Default) object AvQueueMusic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/queue-play-next", JSImport.Default) object AvQueuePlayNext extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/queue", JSImport.Default) object AvQueue extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/radio", JSImport.Default) object AvRadio extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/recent-actors", JSImport.Default) object AvRecentActors extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/remove-from-queue", JSImport.Default) object AvRemoveFromQueue extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/repeat-one", JSImport.Default) object AvRepeatOne extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/repeat", JSImport.Default) object AvRepeat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/replay-10", JSImport.Default) object AvReplay10 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/replay-30", JSImport.Default) object AvReplay30 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/replay-5", JSImport.Default) object AvReplay5 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/replay", JSImport.Default) object AvReplay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/shuffle", JSImport.Default) object AvShuffle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/skip-next", JSImport.Default) object AvSkipNext extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/skip-previous", JSImport.Default) object AvSkipPrevious extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/slow-motion-video", JSImport.Default) object AvSlowMotionVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/snooze", JSImport.Default) object AvSnooze extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/sort-by-alpha", JSImport.Default) object AvSortByAlpha extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/stop", JSImport.Default) object AvStop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/subscriptions", JSImport.Default) object AvSubscriptions extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/subtitles", JSImport.Default) object AvSubtitles extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/surround-sound", JSImport.Default) object AvSurroundSound extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/video-call", JSImport.Default) object AvVideoCall extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/video-label", JSImport.Default) object AvVideoLabel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/video-library", JSImport.Default) object AvVideoLibrary extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/videocam-off", JSImport.Default) object AvVideocamOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/videocam", JSImport.Default) object AvVideocam extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/volume-down", JSImport.Default) object AvVolumeDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/volume-mute", JSImport.Default) object AvVolumeMute extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/volume-off", JSImport.Default) object AvVolumeOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/volume-up", JSImport.Default) object AvVolumeUp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/web-asset", JSImport.Default) object AvWebAsset extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/av/web", JSImport.Default) object AvWeb extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/business", JSImport.Default) object CommunicationBusiness extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-end", JSImport.Default) object CommunicationCallEnd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-made", JSImport.Default) object CommunicationCallMade extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-merge", JSImport.Default) object CommunicationCallMerge extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-missed-outgoing", JSImport.Default) object CommunicationCallMissedOutgoing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-missed", JSImport.Default) object CommunicationCallMissed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-received", JSImport.Default) object CommunicationCallReceived extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call-split", JSImport.Default) object CommunicationCallSplit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/call", JSImport.Default) object CommunicationCall extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/chat-bubble-outline", JSImport.Default) object CommunicationChatBubbleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/chat-bubble", JSImport.Default) object CommunicationChatBubble extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/chat", JSImport.Default) object CommunicationChat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/clear-all", JSImport.Default) object CommunicationClearAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/comment", JSImport.Default) object CommunicationComment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/contact-mail", JSImport.Default) object CommunicationContactMail extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/contact-phone", JSImport.Default) object CommunicationContactPhone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/contacts", JSImport.Default) object CommunicationContacts extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/dialer-sip", JSImport.Default) object CommunicationDialerSip extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/dialpad", JSImport.Default) object CommunicationDialpad extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/email", JSImport.Default) object CommunicationEmail extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/forum", JSImport.Default) object CommunicationForum extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/import-contacts", JSImport.Default) object CommunicationImportContacts extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/import-export", JSImport.Default) object CommunicationImportExport extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/invert-colors-off", JSImport.Default) object CommunicationInvertColorsOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/live-help", JSImport.Default) object CommunicationLiveHelp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/location-off", JSImport.Default) object CommunicationLocationOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/location-on", JSImport.Default) object CommunicationLocationOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/mail-outline", JSImport.Default) object CommunicationMailOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/message", JSImport.Default) object CommunicationMessage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/no-sim", JSImport.Default) object CommunicationNoSim extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/phone", JSImport.Default) object CommunicationPhone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/phonelink-erase", JSImport.Default) object CommunicationPhonelinkErase extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/phonelink-lock", JSImport.Default) object CommunicationPhonelinkLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/phonelink-ring", JSImport.Default) object CommunicationPhonelinkRing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/phonelink-setup", JSImport.Default) object CommunicationPhonelinkSetup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/portable-wifi-off", JSImport.Default) object CommunicationPortableWifiOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/present-to-all", JSImport.Default) object CommunicationPresentToAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/ring-volume", JSImport.Default) object CommunicationRingVolume extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/rss-feed", JSImport.Default) object CommunicationRssFeed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/screen-share", JSImport.Default) object CommunicationScreenShare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/speaker-phone", JSImport.Default) object CommunicationSpeakerPhone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/stay-current-landscape", JSImport.Default) object CommunicationStayCurrentLandscape extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/stay-current-portrait", JSImport.Default) object CommunicationStayCurrentPortrait extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/stay-primary-landscape", JSImport.Default) object CommunicationStayPrimaryLandscape extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/stay-primary-portrait", JSImport.Default) object CommunicationStayPrimaryPortrait extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/stop-screen-share", JSImport.Default) object CommunicationStopScreenShare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/swap-calls", JSImport.Default) object CommunicationSwapCalls extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/textsms", JSImport.Default) object CommunicationTextsms extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/voicemail", JSImport.Default) object CommunicationVoicemail extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/communication/vpn-key", JSImport.Default) object CommunicationVpnKey extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/add-box", JSImport.Default) object ContentAddBox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/add-circle-outline", JSImport.Default) object ContentAddCircleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/add-circle", JSImport.Default) object ContentAddCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/add", JSImport.Default) object ContentAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/archive", JSImport.Default) object ContentArchive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/backspace", JSImport.Default) object ContentBackspace extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/block", JSImport.Default) object ContentBlock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/clear", JSImport.Default) object ContentClear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/content-copy", JSImport.Default) object ContentContentCopy extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/content-cut", JSImport.Default) object ContentContentCut extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/content-paste", JSImport.Default) object ContentContentPaste extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/create", JSImport.Default) object ContentCreate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/delete-sweep", JSImport.Default) object ContentDeleteSweep extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/drafts", JSImport.Default) object ContentDrafts extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/filter-list", JSImport.Default) object ContentFilterList extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/flag", JSImport.Default) object ContentFlag extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/font-download", JSImport.Default) object ContentFontDownload extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/forward", JSImport.Default) object ContentForward extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/gesture", JSImport.Default) object ContentGesture extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/inbox", JSImport.Default) object ContentInbox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/link", JSImport.Default) object ContentLink extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/low-priority", JSImport.Default) object ContentLowPriority extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/mail", JSImport.Default) object ContentMail extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/markunread", JSImport.Default) object ContentMarkunread extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/move-to-inbox", JSImport.Default) object ContentMoveToInbox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/next-week", JSImport.Default) object ContentNextWeek extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/redo", JSImport.Default) object ContentRedo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/remove-circle-outline", JSImport.Default) object ContentRemoveCircleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/remove-circle", JSImport.Default) object ContentRemoveCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/remove", JSImport.Default) object ContentRemove extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/reply-all", JSImport.Default) object ContentReplyAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/reply", JSImport.Default) object ContentReply extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/report", JSImport.Default) object ContentReport extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/save", JSImport.Default) object ContentSave extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/select-all", JSImport.Default) object ContentSelectAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/send", JSImport.Default) object ContentSend extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/sort", JSImport.Default) object ContentSort extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/text-format", JSImport.Default) object ContentTextFormat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/unarchive", JSImport.Default) object ContentUnarchive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/undo", JSImport.Default) object ContentUndo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/content/weekend", JSImport.Default) object ContentWeekend extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/access-alarm", JSImport.Default) object DeviceAccessAlarm extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/access-alarms", JSImport.Default) object DeviceAccessAlarms extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/access-time", JSImport.Default) object DeviceAccessTime extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/add-alarm", JSImport.Default) object DeviceAddAlarm extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/airplanemode-active", JSImport.Default) object DeviceAirplanemodeActive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/airplanemode-inactive", JSImport.Default) object DeviceAirplanemodeInactive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-20", JSImport.Default) object DeviceBattery20 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-30", JSImport.Default) object DeviceBattery30 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-50", JSImport.Default) object DeviceBattery50 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-60", JSImport.Default) object DeviceBattery60 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-80", JSImport.Default) object DeviceBattery80 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-90", JSImport.Default) object DeviceBattery90 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-alert", JSImport.Default) object DeviceBatteryAlert extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-20", JSImport.Default) object DeviceBatteryCharging20 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-30", JSImport.Default) object DeviceBatteryCharging30 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-50", JSImport.Default) object DeviceBatteryCharging50 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-60", JSImport.Default) object DeviceBatteryCharging60 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-80", JSImport.Default) object DeviceBatteryCharging80 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-90", JSImport.Default) object DeviceBatteryCharging90 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-charging-full", JSImport.Default) object DeviceBatteryChargingFull extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-full", JSImport.Default) object DeviceBatteryFull extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-std", JSImport.Default) object DeviceBatteryStd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/battery-unknown", JSImport.Default) object DeviceBatteryUnknown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/bluetooth-connected", JSImport.Default) object DeviceBluetoothConnected extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/bluetooth-disabled", JSImport.Default) object DeviceBluetoothDisabled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/bluetooth-searching", JSImport.Default) object DeviceBluetoothSearching extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/bluetooth", JSImport.Default) object DeviceBluetooth extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/brightness-auto", JSImport.Default) object DeviceBrightnessAuto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/brightness-high", JSImport.Default) object DeviceBrightnessHigh extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/brightness-low", JSImport.Default) object DeviceBrightnessLow extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/brightness-medium", JSImport.Default) object DeviceBrightnessMedium extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/data-usage", JSImport.Default) object DeviceDataUsage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/developer-mode", JSImport.Default) object DeviceDeveloperMode extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/devices", JSImport.Default) object DeviceDevices extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/dvr", JSImport.Default) object DeviceDvr extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/gps-fixed", JSImport.Default) object DeviceGpsFixed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/gps-not-fixed", JSImport.Default) object DeviceGpsNotFixed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/gps-off", JSImport.Default) object DeviceGpsOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/graphic-eq", JSImport.Default) object DeviceGraphicEq extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/location-disabled", JSImport.Default) object DeviceLocationDisabled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/location-searching", JSImport.Default) object DeviceLocationSearching extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/network-cell", JSImport.Default) object DeviceNetworkCell extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/network-wifi", JSImport.Default) object DeviceNetworkWifi extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/nfc", JSImport.Default) object DeviceNfc extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/screen-lock-landscape", JSImport.Default) object DeviceScreenLockLandscape extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/screen-lock-portrait", JSImport.Default) object DeviceScreenLockPortrait extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/screen-lock-rotation", JSImport.Default) object DeviceScreenLockRotation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/screen-rotation", JSImport.Default) object DeviceScreenRotation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/sd-storage", JSImport.Default) object DeviceSdStorage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/settings-system-daydream", JSImport.Default) object DeviceSettingsSystemDaydream extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-0-bar", JSImport.Default) object DeviceSignalCellular0Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-1-bar", JSImport.Default) object DeviceSignalCellular1Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-2-bar", JSImport.Default) object DeviceSignalCellular2Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-3-bar", JSImport.Default) object DeviceSignalCellular3Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-4-bar", JSImport.Default) object DeviceSignalCellular4Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-connected-no-internet-0-bar", JSImport.Default) object DeviceSignalCellularConnectedNoInternet0Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-connected-no-internet-1-bar", JSImport.Default) object DeviceSignalCellularConnectedNoInternet1Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-connected-no-internet-2-bar", JSImport.Default) object DeviceSignalCellularConnectedNoInternet2Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-connected-no-internet-3-bar", JSImport.Default) object DeviceSignalCellularConnectedNoInternet3Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-connected-no-internet-4-bar", JSImport.Default) object DeviceSignalCellularConnectedNoInternet4Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-no-sim", JSImport.Default) object DeviceSignalCellularNoSim extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-null", JSImport.Default) object DeviceSignalCellularNull extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-cellular-off", JSImport.Default) object DeviceSignalCellularOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-0-bar", JSImport.Default) object DeviceSignalWifi0Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-1-bar-lock", JSImport.Default) object DeviceSignalWifi1BarLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-1-bar", JSImport.Default) object DeviceSignalWifi1Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-2-bar-lock", JSImport.Default) object DeviceSignalWifi2BarLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-2-bar", JSImport.Default) object DeviceSignalWifi2Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-3-bar-lock", JSImport.Default) object DeviceSignalWifi3BarLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-3-bar", JSImport.Default) object DeviceSignalWifi3Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-4-bar-lock", JSImport.Default) object DeviceSignalWifi4BarLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-4-bar", JSImport.Default) object DeviceSignalWifi4Bar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/signal-wifi-off", JSImport.Default) object DeviceSignalWifiOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/storage", JSImport.Default) object DeviceStorage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/usb", JSImport.Default) object DeviceUsb extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/wallpaper", JSImport.Default) object DeviceWallpaper extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/widgets", JSImport.Default) object DeviceWidgets extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/wifi-lock", JSImport.Default) object DeviceWifiLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/device/wifi-tethering", JSImport.Default) object DeviceWifiTethering extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/attach-file", JSImport.Default) object EditorAttachFile extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/attach-money", JSImport.Default) object EditorAttachMoney extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-all", JSImport.Default) object EditorBorderAll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-bottom", JSImport.Default) object EditorBorderBottom extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-clear", JSImport.Default) object EditorBorderClear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-color", JSImport.Default) object EditorBorderColor extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-horizontal", JSImport.Default) object EditorBorderHorizontal extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-inner", JSImport.Default) object EditorBorderInner extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-left", JSImport.Default) object EditorBorderLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-outer", JSImport.Default) object EditorBorderOuter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-right", JSImport.Default) object EditorBorderRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-style", JSImport.Default) object EditorBorderStyle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-top", JSImport.Default) object EditorBorderTop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/border-vertical", JSImport.Default) object EditorBorderVertical extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/bubble-chart", JSImport.Default) object EditorBubbleChart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/drag-handle", JSImport.Default) object EditorDragHandle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-align-center", JSImport.Default) object EditorFormatAlignCenter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-align-justify", JSImport.Default) object EditorFormatAlignJustify extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-align-left", JSImport.Default) object EditorFormatAlignLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-align-right", JSImport.Default) object EditorFormatAlignRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-bold", JSImport.Default) object EditorFormatBold extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-clear", JSImport.Default) object EditorFormatClear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-color-fill", JSImport.Default) object EditorFormatColorFill extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-color-reset", JSImport.Default) object EditorFormatColorReset extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-color-text", JSImport.Default) object EditorFormatColorText extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-indent-decrease", JSImport.Default) object EditorFormatIndentDecrease extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-indent-increase", JSImport.Default) object EditorFormatIndentIncrease extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-italic", JSImport.Default) object EditorFormatItalic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-line-spacing", JSImport.Default) object EditorFormatLineSpacing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-list-bulleted", JSImport.Default) object EditorFormatListBulleted extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-list-numbered", JSImport.Default) object EditorFormatListNumbered extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-paint", JSImport.Default) object EditorFormatPaint extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-quote", JSImport.Default) object EditorFormatQuote extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-shapes", JSImport.Default) object EditorFormatShapes extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-size", JSImport.Default) object EditorFormatSize extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-strikethrough", JSImport.Default) object EditorFormatStrikethrough extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-textdirection-l-to-r", JSImport.Default) object EditorFormatTextdirectionLToR extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-textdirection-r-to-l", JSImport.Default) object EditorFormatTextdirectionRToL extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/format-underlined", JSImport.Default) object EditorFormatUnderlined extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/functions", JSImport.Default) object EditorFunctions extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/highlight", JSImport.Default) object EditorHighlight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-chart", JSImport.Default) object EditorInsertChart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-comment", JSImport.Default) object EditorInsertComment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-drive-file", JSImport.Default) object EditorInsertDriveFile extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-emoticon", JSImport.Default) object EditorInsertEmoticon extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-invitation", JSImport.Default) object EditorInsertInvitation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-link", JSImport.Default) object EditorInsertLink extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/insert-photo", JSImport.Default) object EditorInsertPhoto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/linear-scale", JSImport.Default) object EditorLinearScale extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/merge-type", JSImport.Default) object EditorMergeType extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/mode-comment", JSImport.Default) object EditorModeComment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/mode-edit", JSImport.Default) object EditorModeEdit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/monetization-on", JSImport.Default) object EditorMonetizationOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/money-off", JSImport.Default) object EditorMoneyOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/multiline-chart", JSImport.Default) object EditorMultilineChart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/pie-chart-outlined", JSImport.Default) object EditorPieChartOutlined extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/pie-chart", JSImport.Default) object EditorPieChart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/publish", JSImport.Default) object EditorPublish extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/short-text", JSImport.Default) object EditorShortText extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/show-chart", JSImport.Default) object EditorShowChart extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/space-bar", JSImport.Default) object EditorSpaceBar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/strikethrough-s", JSImport.Default) object EditorStrikethroughS extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/text-fields", JSImport.Default) object EditorTextFields extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/title", JSImport.Default) object EditorTitle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/vertical-align-bottom", JSImport.Default) object EditorVerticalAlignBottom extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/vertical-align-center", JSImport.Default) object EditorVerticalAlignCenter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/vertical-align-top", JSImport.Default) object EditorVerticalAlignTop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/editor/wrap-text", JSImport.Default) object EditorWrapText extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/attachment", JSImport.Default) object FileAttachment extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-circle", JSImport.Default) object FileCloudCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-done", JSImport.Default) object FileCloudDone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-download", JSImport.Default) object FileCloudDownload extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-off", JSImport.Default) object FileCloudOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-queue", JSImport.Default) object FileCloudQueue extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud-upload", JSImport.Default) object FileCloudUpload extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/cloud", JSImport.Default) object FileCloud extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/create-new-folder", JSImport.Default) object FileCreateNewFolder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/file-download", JSImport.Default) object FileFileDownload extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/file-upload", JSImport.Default) object FileFileUpload extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/folder-open", JSImport.Default) object FileFolderOpen extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/folder-shared", JSImport.Default) object FileFolderShared extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/file/folder", JSImport.Default) object FileFolder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/cast-connected", JSImport.Default) object HardwareCastConnected extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/cast", JSImport.Default) object HardwareCast extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/computer", JSImport.Default) object HardwareComputer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/desktop-mac", JSImport.Default) object HardwareDesktopMac extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/desktop-windows", JSImport.Default) object HardwareDesktopWindows extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/developer-board", JSImport.Default) object HardwareDeveloperBoard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/device-hub", JSImport.Default) object HardwareDeviceHub extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/devices-other", JSImport.Default) object HardwareDevicesOther extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/dock", JSImport.Default) object HardwareDock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/gamepad", JSImport.Default) object HardwareGamepad extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/headset-mic", JSImport.Default) object HardwareHeadsetMic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/headset", JSImport.Default) object HardwareHeadset extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-arrow-down", JSImport.Default) object HardwareKeyboardArrowDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-arrow-left", JSImport.Default) object HardwareKeyboardArrowLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-arrow-right", JSImport.Default) object HardwareKeyboardArrowRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-arrow-up", JSImport.Default) object HardwareKeyboardArrowUp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-backspace", JSImport.Default) object HardwareKeyboardBackspace extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-capslock", JSImport.Default) object HardwareKeyboardCapslock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-hide", JSImport.Default) object HardwareKeyboardHide extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-return", JSImport.Default) object HardwareKeyboardReturn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-tab", JSImport.Default) object HardwareKeyboardTab extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard-voice", JSImport.Default) object HardwareKeyboardVoice extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/keyboard", JSImport.Default) object HardwareKeyboard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/laptop-chromebook", JSImport.Default) object HardwareLaptopChromebook extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/laptop-mac", JSImport.Default) object HardwareLaptopMac extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/laptop-windows", JSImport.Default) object HardwareLaptopWindows extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/laptop", JSImport.Default) object HardwareLaptop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/memory", JSImport.Default) object HardwareMemory extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/mouse", JSImport.Default) object HardwareMouse extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/phone-android", JSImport.Default) object HardwarePhoneAndroid extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/phone-iphone", JSImport.Default) object HardwarePhoneIphone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/phonelink-off", JSImport.Default) object HardwarePhonelinkOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/phonelink", JSImport.Default) object HardwarePhonelink extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/power-input", JSImport.Default) object HardwarePowerInput extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/router", JSImport.Default) object HardwareRouter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/scanner", JSImport.Default) object HardwareScanner extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/security", JSImport.Default) object HardwareSecurity extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/sim-card", JSImport.Default) object HardwareSimCard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/smartphone", JSImport.Default) object HardwareSmartphone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/speaker-group", JSImport.Default) object HardwareSpeakerGroup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/speaker", JSImport.Default) object HardwareSpeaker extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/tablet-android", JSImport.Default) object HardwareTabletAndroid extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/tablet-mac", JSImport.Default) object HardwareTabletMac extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/tablet", JSImport.Default) object HardwareTablet extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/toys", JSImport.Default) object HardwareToys extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/tv", JSImport.Default) object HardwareTv extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/videogame-asset", JSImport.Default) object HardwareVideogameAsset extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/hardware/watch", JSImport.Default) object HardwareWatch extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/add-a-photo", JSImport.Default) object ImageAddAPhoto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/add-to-photos", JSImport.Default) object ImageAddToPhotos extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/adjust", JSImport.Default) object ImageAdjust extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/assistant-photo", JSImport.Default) object ImageAssistantPhoto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/assistant", JSImport.Default) object ImageAssistant extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/audiotrack", JSImport.Default) object ImageAudiotrack extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/blur-circular", JSImport.Default) object ImageBlurCircular extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/blur-linear", JSImport.Default) object ImageBlurLinear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/blur-off", JSImport.Default) object ImageBlurOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/blur-on", JSImport.Default) object ImageBlurOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-1", JSImport.Default) object ImageBrightness1 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-2", JSImport.Default) object ImageBrightness2 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-3", JSImport.Default) object ImageBrightness3 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-4", JSImport.Default) object ImageBrightness4 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-5", JSImport.Default) object ImageBrightness5 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-6", JSImport.Default) object ImageBrightness6 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brightness-7", JSImport.Default) object ImageBrightness7 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/broken-image", JSImport.Default) object ImageBrokenImage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/brush", JSImport.Default) object ImageBrush extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/burst-mode", JSImport.Default) object ImageBurstMode extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/camera-alt", JSImport.Default) object ImageCameraAlt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/camera-front", JSImport.Default) object ImageCameraFront extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/camera-rear", JSImport.Default) object ImageCameraRear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/camera-roll", JSImport.Default) object ImageCameraRoll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/camera", JSImport.Default) object ImageCamera extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/center-focus-strong", JSImport.Default) object ImageCenterFocusStrong extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/center-focus-weak", JSImport.Default) object ImageCenterFocusWeak extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/collections-bookmark", JSImport.Default) object ImageCollectionsBookmark extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/collections", JSImport.Default) object ImageCollections extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/color-lens", JSImport.Default) object ImageColorLens extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/colorize", JSImport.Default) object ImageColorize extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/compare", JSImport.Default) object ImageCompare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/control-point-duplicate", JSImport.Default) object ImageControlPointDuplicate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/control-point", JSImport.Default) object ImageControlPoint extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-16-9", JSImport.Default) object ImageCrop169 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-3-2", JSImport.Default) object ImageCrop32 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-5-4", JSImport.Default) object ImageCrop54 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-7-5", JSImport.Default) object ImageCrop75 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-din", JSImport.Default) object ImageCropDin extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-free", JSImport.Default) object ImageCropFree extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-landscape", JSImport.Default) object ImageCropLandscape extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-original", JSImport.Default) object ImageCropOriginal extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-portrait", JSImport.Default) object ImageCropPortrait extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-rotate", JSImport.Default) object ImageCropRotate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop-square", JSImport.Default) object ImageCropSquare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/crop", JSImport.Default) object ImageCrop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/dehaze", JSImport.Default) object ImageDehaze extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/details", JSImport.Default) object ImageDetails extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/edit", JSImport.Default) object ImageEdit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure-neg-1", JSImport.Default) object ImageExposureNeg1 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure-neg-2", JSImport.Default) object ImageExposureNeg2 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure-plus-1", JSImport.Default) object ImageExposurePlus1 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure-plus-2", JSImport.Default) object ImageExposurePlus2 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure-zero", JSImport.Default) object ImageExposureZero extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/exposure", JSImport.Default) object ImageExposure extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-1", JSImport.Default) object ImageFilter1 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-2", JSImport.Default) object ImageFilter2 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-3", JSImport.Default) object ImageFilter3 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-4", JSImport.Default) object ImageFilter4 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-5", JSImport.Default) object ImageFilter5 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-6", JSImport.Default) object ImageFilter6 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-7", JSImport.Default) object ImageFilter7 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-8", JSImport.Default) object ImageFilter8 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-9-plus", JSImport.Default) object ImageFilter9Plus extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-9", JSImport.Default) object ImageFilter9 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-b-and-w", JSImport.Default) object ImageFilterBAndW extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-center-focus", JSImport.Default) object ImageFilterCenterFocus extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-drama", JSImport.Default) object ImageFilterDrama extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-frames", JSImport.Default) object ImageFilterFrames extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-hdr", JSImport.Default) object ImageFilterHdr extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-none", JSImport.Default) object ImageFilterNone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-tilt-shift", JSImport.Default) object ImageFilterTiltShift extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter-vintage", JSImport.Default) object ImageFilterVintage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/filter", JSImport.Default) object ImageFilter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/flare", JSImport.Default) object ImageFlare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/flash-auto", JSImport.Default) object ImageFlashAuto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/flash-off", JSImport.Default) object ImageFlashOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/flash-on", JSImport.Default) object ImageFlashOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/flip", JSImport.Default) object ImageFlip extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/gradient", JSImport.Default) object ImageGradient extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/grain", JSImport.Default) object ImageGrain extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/grid-off", JSImport.Default) object ImageGridOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/grid-on", JSImport.Default) object ImageGridOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/hdr-off", JSImport.Default) object ImageHdrOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/hdr-on", JSImport.Default) object ImageHdrOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/hdr-strong", JSImport.Default) object ImageHdrStrong extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/hdr-weak", JSImport.Default) object ImageHdrWeak extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/healing", JSImport.Default) object ImageHealing extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/image-aspect-ratio", JSImport.Default) object ImageImageAspectRatio extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/image", JSImport.Default) object ImageImage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/iso", JSImport.Default) object ImageIso extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/landscape", JSImport.Default) object ImageLandscape extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/leak-add", JSImport.Default) object ImageLeakAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/leak-remove", JSImport.Default) object ImageLeakRemove extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/lens", JSImport.Default) object ImageLens extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/linked-camera", JSImport.Default) object ImageLinkedCamera extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-3", JSImport.Default) object ImageLooks3 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-4", JSImport.Default) object ImageLooks4 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-5", JSImport.Default) object ImageLooks5 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-6", JSImport.Default) object ImageLooks6 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-one", JSImport.Default) object ImageLooksOne extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks-two", JSImport.Default) object ImageLooksTwo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/looks", JSImport.Default) object ImageLooks extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/loupe", JSImport.Default) object ImageLoupe extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/monochrome-photos", JSImport.Default) object ImageMonochromePhotos extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/movie-creation", JSImport.Default) object ImageMovieCreation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/movie-filter", JSImport.Default) object ImageMovieFilter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/music-note", JSImport.Default) object ImageMusicNote extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/nature-people", JSImport.Default) object ImageNaturePeople extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/nature", JSImport.Default) object ImageNature extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/navigate-before", JSImport.Default) object ImageNavigateBefore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/navigate-next", JSImport.Default) object ImageNavigateNext extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/palette", JSImport.Default) object ImagePalette extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/panorama-fish-eye", JSImport.Default) object ImagePanoramaFishEye extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/panorama-horizontal", JSImport.Default) object ImagePanoramaHorizontal extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/panorama-vertical", JSImport.Default) object ImagePanoramaVertical extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/panorama-wide-angle", JSImport.Default) object ImagePanoramaWideAngle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/panorama", JSImport.Default) object ImagePanorama extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-album", JSImport.Default) object ImagePhotoAlbum extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-camera", JSImport.Default) object ImagePhotoCamera extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-filter", JSImport.Default) object ImagePhotoFilter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-library", JSImport.Default) object ImagePhotoLibrary extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-size-select-actual", JSImport.Default) object ImagePhotoSizeSelectActual extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-size-select-large", JSImport.Default) object ImagePhotoSizeSelectLarge extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo-size-select-small", JSImport.Default) object ImagePhotoSizeSelectSmall extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/photo", JSImport.Default) object ImagePhoto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/picture-as-pdf", JSImport.Default) object ImagePictureAsPdf extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/portrait", JSImport.Default) object ImagePortrait extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/remove-red-eye", JSImport.Default) object ImageRemoveRedEye extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/rotate-90-degrees-ccw", JSImport.Default) object ImageRotate90DegreesCcw extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/rotate-left", JSImport.Default) object ImageRotateLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/rotate-right", JSImport.Default) object ImageRotateRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/slideshow", JSImport.Default) object ImageSlideshow extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/straighten", JSImport.Default) object ImageStraighten extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/style", JSImport.Default) object ImageStyle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/switch-camera", JSImport.Default) object ImageSwitchCamera extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/switch-video", JSImport.Default) object ImageSwitchVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/tag-faces", JSImport.Default) object ImageTagFaces extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/texture", JSImport.Default) object ImageTexture extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/timelapse", JSImport.Default) object ImageTimelapse extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/timer-10", JSImport.Default) object ImageTimer10 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/timer-3", JSImport.Default) object ImageTimer3 extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/timer-off", JSImport.Default) object ImageTimerOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/timer", JSImport.Default) object ImageTimer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/tonality", JSImport.Default) object ImageTonality extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/transform", JSImport.Default) object ImageTransform extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/tune", JSImport.Default) object ImageTune extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/view-comfy", JSImport.Default) object ImageViewComfy extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/view-compact", JSImport.Default) object ImageViewCompact extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/vignette", JSImport.Default) object ImageVignette extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/wb-auto", JSImport.Default) object ImageWbAuto extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/wb-cloudy", JSImport.Default) object ImageWbCloudy extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/wb-incandescent", JSImport.Default) object ImageWbIncandescent extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/wb-iridescent", JSImport.Default) object ImageWbIridescent extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/image/wb-sunny", JSImport.Default) object ImageWbSunny extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/add-location", JSImport.Default) object MapsAddLocation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/beenhere", JSImport.Default) object MapsBeenhere extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-bike", JSImport.Default) object MapsDirectionsBike extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-boat", JSImport.Default) object MapsDirectionsBoat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-bus", JSImport.Default) object MapsDirectionsBus extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-car", JSImport.Default) object MapsDirectionsCar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-railway", JSImport.Default) object MapsDirectionsRailway extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-run", JSImport.Default) object MapsDirectionsRun extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-subway", JSImport.Default) object MapsDirectionsSubway extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-transit", JSImport.Default) object MapsDirectionsTransit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions-walk", JSImport.Default) object MapsDirectionsWalk extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/directions", JSImport.Default) object MapsDirections extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/edit-location", JSImport.Default) object MapsEditLocation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/ev-station", JSImport.Default) object MapsEvStation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/flight", JSImport.Default) object MapsFlight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/hotel", JSImport.Default) object MapsHotel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/layers-clear", JSImport.Default) object MapsLayersClear extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/layers", JSImport.Default) object MapsLayers extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-activity", JSImport.Default) object MapsLocalActivity extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-airport", JSImport.Default) object MapsLocalAirport extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-atm", JSImport.Default) object MapsLocalAtm extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-bar", JSImport.Default) object MapsLocalBar extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-cafe", JSImport.Default) object MapsLocalCafe extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-car-wash", JSImport.Default) object MapsLocalCarWash extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-convenience-store", JSImport.Default) object MapsLocalConvenienceStore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-dining", JSImport.Default) object MapsLocalDining extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-drink", JSImport.Default) object MapsLocalDrink extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-florist", JSImport.Default) object MapsLocalFlorist extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-gas-station", JSImport.Default) object MapsLocalGasStation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-grocery-store", JSImport.Default) object MapsLocalGroceryStore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-hospital", JSImport.Default) object MapsLocalHospital extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-hotel", JSImport.Default) object MapsLocalHotel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-laundry-service", JSImport.Default) object MapsLocalLaundryService extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-library", JSImport.Default) object MapsLocalLibrary extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-mall", JSImport.Default) object MapsLocalMall extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-movies", JSImport.Default) object MapsLocalMovies extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-offer", JSImport.Default) object MapsLocalOffer extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-parking", JSImport.Default) object MapsLocalParking extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-pharmacy", JSImport.Default) object MapsLocalPharmacy extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-phone", JSImport.Default) object MapsLocalPhone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-pizza", JSImport.Default) object MapsLocalPizza extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-play", JSImport.Default) object MapsLocalPlay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-post-office", JSImport.Default) object MapsLocalPostOffice extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-printshop", JSImport.Default) object MapsLocalPrintshop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-see", JSImport.Default) object MapsLocalSee extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-shipping", JSImport.Default) object MapsLocalShipping extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/local-taxi", JSImport.Default) object MapsLocalTaxi extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/map", JSImport.Default) object MapsMap extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/my-location", JSImport.Default) object MapsMyLocation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/navigation", JSImport.Default) object MapsNavigation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/near-me", JSImport.Default) object MapsNearMe extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/person-pin-circle", JSImport.Default) object MapsPersonPinCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/person-pin", JSImport.Default) object MapsPersonPin extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/pin-drop", JSImport.Default) object MapsPinDrop extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/place", JSImport.Default) object MapsPlace extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/rate-review", JSImport.Default) object MapsRateReview extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/restaurant-menu", JSImport.Default) object MapsRestaurantMenu extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/restaurant", JSImport.Default) object MapsRestaurant extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/satellite", JSImport.Default) object MapsSatellite extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/store-mall-directory", JSImport.Default) object MapsStoreMallDirectory extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/streetview", JSImport.Default) object MapsStreetview extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/subway", JSImport.Default) object MapsSubway extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/terrain", JSImport.Default) object MapsTerrain extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/traffic", JSImport.Default) object MapsTraffic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/train", JSImport.Default) object MapsTrain extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/tram", JSImport.Default) object MapsTram extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/transfer-within-a-station", JSImport.Default) object MapsTransferWithinAStation extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/maps/zoom-out-map", JSImport.Default) object MapsZoomOutMap extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/apps", JSImport.Default) object NavigationApps extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-back", JSImport.Default) object NavigationArrowBack extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-downward", JSImport.Default) object NavigationArrowDownward extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-drop-down-circle", JSImport.Default) object NavigationArrowDropDownCircle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-drop-down", JSImport.Default) object NavigationArrowDropDown extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-drop-up", JSImport.Default) object NavigationArrowDropUp extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-forward", JSImport.Default) object NavigationArrowForward extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/arrow-upward", JSImport.Default) object NavigationArrowUpward extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/cancel", JSImport.Default) object NavigationCancel extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/check", JSImport.Default) object NavigationCheck extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/chevron-left", JSImport.Default) object NavigationChevronLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/chevron-right", JSImport.Default) object NavigationChevronRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/close", JSImport.Default) object NavigationClose extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/expand-less", JSImport.Default) object NavigationExpandLess extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/expand-more", JSImport.Default) object NavigationExpandMore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/first-page", JSImport.Default) object NavigationFirstPage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/fullscreen-exit", JSImport.Default) object NavigationFullscreenExit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/fullscreen", JSImport.Default) object NavigationFullscreen extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/last-page", JSImport.Default) object NavigationLastPage extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/menu", JSImport.Default) object NavigationMenu extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/more-horiz", JSImport.Default) object NavigationMoreHoriz extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/more-vert", JSImport.Default) object NavigationMoreVert extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/refresh", JSImport.Default) object NavigationRefresh extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/subdirectory-arrow-left", JSImport.Default) object NavigationSubdirectoryArrowLeft extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/subdirectory-arrow-right", JSImport.Default) object NavigationSubdirectoryArrowRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/unfold-less", JSImport.Default) object NavigationUnfoldLess extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation/unfold-more", JSImport.Default) object NavigationUnfoldMore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/navigation-arrow-drop-right", JSImport.Default) object NavigationArrowDropRight extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/adb", JSImport.Default) object NotificationAdb extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-flat-angled", JSImport.Default) object NotificationAirlineSeatFlatAngled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-flat", JSImport.Default) object NotificationAirlineSeatFlat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-individual-suite", JSImport.Default) object NotificationAirlineSeatIndividualSuite extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-legroom-extra", JSImport.Default) object NotificationAirlineSeatLegroomExtra extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-legroom-normal", JSImport.Default) object NotificationAirlineSeatLegroomNormal extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-legroom-reduced", JSImport.Default) object NotificationAirlineSeatLegroomReduced extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-recline-extra", JSImport.Default) object NotificationAirlineSeatReclineExtra extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/airline-seat-recline-normal", JSImport.Default) object NotificationAirlineSeatReclineNormal extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/bluetooth-audio", JSImport.Default) object NotificationBluetoothAudio extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/confirmation-number", JSImport.Default) object NotificationConfirmationNumber extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/disc-full", JSImport.Default) object NotificationDiscFull extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/do-not-disturb-alt", JSImport.Default) object NotificationDoNotDisturbAlt extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/do-not-disturb-off", JSImport.Default) object NotificationDoNotDisturbOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/do-not-disturb-on", JSImport.Default) object NotificationDoNotDisturbOn extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/do-not-disturb", JSImport.Default) object NotificationDoNotDisturb extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/drive-eta", JSImport.Default) object NotificationDriveEta extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/enhanced-encryption", JSImport.Default) object NotificationEnhancedEncryption extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/event-available", JSImport.Default) object NotificationEventAvailable extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/event-busy", JSImport.Default) object NotificationEventBusy extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/event-note", JSImport.Default) object NotificationEventNote extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/folder-special", JSImport.Default) object NotificationFolderSpecial extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/live-tv", JSImport.Default) object NotificationLiveTv extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/mms", JSImport.Default) object NotificationMms extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/more", JSImport.Default) object NotificationMore extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/network-check", JSImport.Default) object NotificationNetworkCheck extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/network-locked", JSImport.Default) object NotificationNetworkLocked extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/no-encryption", JSImport.Default) object NotificationNoEncryption extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/ondemand-video", JSImport.Default) object NotificationOndemandVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/personal-video", JSImport.Default) object NotificationPersonalVideo extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-bluetooth-speaker", JSImport.Default) object NotificationPhoneBluetoothSpeaker extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-forwarded", JSImport.Default) object NotificationPhoneForwarded extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-in-talk", JSImport.Default) object NotificationPhoneInTalk extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-locked", JSImport.Default) object NotificationPhoneLocked extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-missed", JSImport.Default) object NotificationPhoneMissed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/phone-paused", JSImport.Default) object NotificationPhonePaused extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/power", JSImport.Default) object NotificationPower extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/priority-high", JSImport.Default) object NotificationPriorityHigh extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/rv-hookup", JSImport.Default) object NotificationRvHookup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sd-card", JSImport.Default) object NotificationSdCard extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sim-card-alert", JSImport.Default) object NotificationSimCardAlert extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sms-failed", JSImport.Default) object NotificationSmsFailed extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sms", JSImport.Default) object NotificationSms extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sync-disabled", JSImport.Default) object NotificationSyncDisabled extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sync-problem", JSImport.Default) object NotificationSyncProblem extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/sync", JSImport.Default) object NotificationSync extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/system-update", JSImport.Default) object NotificationSystemUpdate extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/tap-and-play", JSImport.Default) object NotificationTapAndPlay extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/time-to-leave", JSImport.Default) object NotificationTimeToLeave extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/vibration", JSImport.Default) object NotificationVibration extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/voice-chat", JSImport.Default) object NotificationVoiceChat extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/vpn-lock", JSImport.Default) object NotificationVpnLock extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/wc", JSImport.Default) object NotificationWc extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/notification/wifi", JSImport.Default) object NotificationWifi extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/ac-unit", JSImport.Default) object PlacesAcUnit extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/airport-shuttle", JSImport.Default) object PlacesAirportShuttle extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/all-inclusive", JSImport.Default) object PlacesAllInclusive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/beach-access", JSImport.Default) object PlacesBeachAccess extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/business-center", JSImport.Default) object PlacesBusinessCenter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/casino", JSImport.Default) object PlacesCasino extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/child-care", JSImport.Default) object PlacesChildCare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/child-friendly", JSImport.Default) object PlacesChildFriendly extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/fitness-center", JSImport.Default) object PlacesFitnessCenter extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/free-breakfast", JSImport.Default) object PlacesFreeBreakfast extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/golf-course", JSImport.Default) object PlacesGolfCourse extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/hot-tub", JSImport.Default) object PlacesHotTub extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/kitchen", JSImport.Default) object PlacesKitchen extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/pool", JSImport.Default) object PlacesPool extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/room-service", JSImport.Default) object PlacesRoomService extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/rv-hookup", JSImport.Default) object PlacesRvHookup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/smoke-free", JSImport.Default) object PlacesSmokeFree extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/smoking-rooms", JSImport.Default) object PlacesSmokingRooms extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/places/spa", JSImport.Default) object PlacesSpa extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/cake", JSImport.Default) object SocialCake extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/domain", JSImport.Default) object SocialDomain extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/group-add", JSImport.Default) object SocialGroupAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/group", JSImport.Default) object SocialGroup extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/location-city", JSImport.Default) object SocialLocationCity extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/mood-bad", JSImport.Default) object SocialMoodBad extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/mood", JSImport.Default) object SocialMood extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/notifications-active", JSImport.Default) object SocialNotificationsActive extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/notifications-none", JSImport.Default) object SocialNotificationsNone extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/notifications-off", JSImport.Default) object SocialNotificationsOff extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/notifications-paused", JSImport.Default) object SocialNotificationsPaused extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/notifications", JSImport.Default) object SocialNotifications extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/pages", JSImport.Default) object SocialPages extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/party-mode", JSImport.Default) object SocialPartyMode extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/people-outline", JSImport.Default) object SocialPeopleOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/people", JSImport.Default) object SocialPeople extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/person-add", JSImport.Default) object SocialPersonAdd extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/person-outline", JSImport.Default) object SocialPersonOutline extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/person", JSImport.Default) object SocialPerson extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/plus-one", JSImport.Default) object SocialPlusOne extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/poll", JSImport.Default) object SocialPoll extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/public", JSImport.Default) object SocialPublic extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/school", JSImport.Default) object SocialSchool extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/sentiment-dissatisfied", JSImport.Default) object SocialSentimentDissatisfied extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/sentiment-neutral", JSImport.Default) object SocialSentimentNeutral extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/sentiment-satisfied", JSImport.Default) object SocialSentimentSatisfied extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/sentiment-very-dissatisfied", JSImport.Default) object SocialSentimentVeryDissatisfied extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/sentiment-very-satisfied", JSImport.Default) object SocialSentimentVerySatisfied extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/share", JSImport.Default) object SocialShare extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/social/whatshot", JSImport.Default) object SocialWhatshot extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/check-box-outline-blank", JSImport.Default) object ToggleCheckBoxOutlineBlank extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/check-box", JSImport.Default) object ToggleCheckBox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/indeterminate-check-box", JSImport.Default) object ToggleIndeterminateCheckBox extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/radio-button-checked", JSImport.Default) object ToggleRadioButtonChecked extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/radio-button-unchecked", JSImport.Default) object ToggleRadioButtonUnchecked extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/star-border", JSImport.Default) object ToggleStarBorder extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/star-half", JSImport.Default) object ToggleStarHalf extends MuiSvgIcon @js.native @JSImport("material-ui/svg-icons/toggle/star", JSImport.Default) object ToggleStar extends MuiSvgIcon } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/MuiUtil.scala ================================================ package chandu0101.scalajs.react.components.materialui import scala.scalajs.js @js.native trait MuiUtil extends js.Object { val CssEvent: js.Dynamic = js.native val Dom: js.Dynamic = js.native val Events: js.Dynamic = js.native val KeyCode: js.Dynamic = js.native val KeyLine: js.Dynamic = js.native val ColorManipulator: ColorManipulator = js.native val Extend: js.Dynamic = js.native val UniqueId: js.Dynamic = js.native } @js.native trait ColorManipulator extends js.Object { def fade(color: MuiColor, amount: Double): MuiColor = js.native def lighten(color: MuiColor, amount: Double): MuiColor = js.native def darken(color: MuiColor, amount: Double): MuiColor = js.native def contrastRatio(background: MuiColor, foreground: MuiColor): Double = js.native def contrastRatioLevel(background: MuiColor, foreground: MuiColor): String = js.native } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/package.scala ================================================ package chandu0101.scalajs.react.components package object materialui { type RowId = Int type ColumnId = Int /* todo: need generate script to become more clever */ private[materialui] implicit class A(m: Mui.type) { def MuiThemeProvider = m.Styles.MuiThemeProvider } type TouchTapEvent = raw.TouchTapEvent[org.scalajs.dom.Node] type TouchTapEventH = raw.TouchTapEvent[org.scalajs.dom.html.Element] type TouchTapEventI = raw.TouchTapEvent[org.scalajs.dom.html.Input] type TouchTapEventTA = raw.TouchTapEvent[org.scalajs.dom.html.TextArea] } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/raw/TouchTapEvent.scala ================================================ package chandu0101.scalajs.react.components.materialui.raw import japgolly.scalajs.react.ReactEventFrom import org.scalajs.dom import scala.scalajs.js @js.native trait TouchTapEvent[+DOMEventTarget <: dom.Node] extends ReactEventFrom[DOMEventTarget] { def altKey: Boolean def ctrlKey: Boolean def getModifierState(key: String): Boolean def metaKey: Boolean def shiftKey: Boolean } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/materialui/types.scala ================================================ package chandu0101.scalajs.react.components.materialui import chandu0101.macros.tojs.JSMacro import scala.scalajs.js class Vertical(val value: String) extends AnyVal object Vertical { val top = new Vertical("top") val center = new Vertical("center") val bottom = new Vertical("bottom") val values = List(top, center, bottom) } class Horizontal(val value: String) extends AnyVal object Horizontal { val left = new Horizontal("left") val middle = new Horizontal("middle") val right = new Horizontal("right") val values = List(left, middle, right) } case class Origin(vertical: Vertical, horizontal: Horizontal) { val toJS = JSMacro[Origin](this) } class ZDepth(val value: Int) extends AnyVal object ZDepth { val _0 = new ZDepth(0) val _1 = new ZDepth(1) val _2 = new ZDepth(2) val _3 = new ZDepth(3) val _4 = new ZDepth(4) val _5 = new ZDepth(5) } class Corners(val value: String) extends AnyVal object Corners { val bottom_left = new Corners("bottom-left") val bottom_right = new Corners("bottom-right") val top_left = new Corners("top-left") val top_right = new Corners("top-right") val values = List(bottom_left, bottom_right, top_left, top_right) } class CornersAndCenter(val value: String) extends AnyVal object CornersAndCenter { val bottom_center = new CornersAndCenter("bottom-center") val bottom_left = new CornersAndCenter("bottom-left") val bottom_right = new CornersAndCenter("bottom-right") val top_center = new CornersAndCenter("top-center") val top_left = new CornersAndCenter("top-left") val top_right = new CornersAndCenter("top-right") val values = List(bottom_center, bottom_left, bottom_right, top_center, top_left, top_right) } class MuiFocusedState(val value: String) extends AnyVal object MuiFocusedState { val none = new MuiFocusedState("none") val focused = new MuiFocusedState("focused") val keyboardfocused = new MuiFocusedState("keyboardfocused") val value = List(none, focused, keyboardfocused) } @js.native trait HasValue[T] extends js.Object { def value: js.UndefOr[T] = js.native } @js.native trait DropDownMenuProps extends js.Object { //TODO } @js.native trait Wrapper extends js.Object { //TODO } @js.native trait CircularProgressPath extends js.Object { //TODO } @js.native trait Position extends js.Object { //TODO } @js.native trait DatePickerUtils extends js.Object { //TODO } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/package.scala ================================================ package chandu0101.scalajs.react import scala.scalajs.js package object components { type CssProperties = js.Any } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/reactsplitpane/ReactSplitPane.scala ================================================ package chandu0101.scalajs.react.components.reactsplitpane import chandu0101.macros.tojs.JSMacro import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.VdomElement import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import scalacss.internal.mutable.StyleSheet import scalacss.DevDefaults._ object ReactSplitPane { @js.native @JSImport("react-split-pane", JSImport.Default) object Component extends js.Any class Style extends StyleSheet.Inline { import dsl._ val Resizer = style("Resizer")( backgroundColor(black), opacity(0.2), zIndex(1), boxSizing.borderBox, backgroundClip.paddingBox, &.hover( transition := "all 2s ease" ) ) val ResizerVertical = style("Resizer.vertical")( width(11.px), marginTop(0.px), marginBottom(0.px), marginLeft(-5.px), marginRight(-5.px), borderLeft(5.px, solid, c"rgba(0,0,0,0)"), borderRight(5.px, solid, transparent), cursor.colResize, &.hover( borderLeft(5.px, solid, c"rgba(0, 0, 0, 0.5)"), borderRight(5.px, solid, c"rgba(0, 0, 0, 0.5)") ) ) val ResizerHorizontal = style("Resizer.horizontal")( height(11.px), marginTop(-5.px), marginBottom(-5.px), marginLeft(0.px), marginRight(0.px), borderTop(5.px, solid, c"rgba(0,0,0,0)"), borderBottom(5.px, solid, transparent), cursor.rowResize, &.hover( borderTop(5.px, solid, c"rgba(0, 0, 0, 0.5)"), borderBottom(5.px, solid, c"rgba(0, 0, 0, 0.5)") ) ) val ResizerDisabled = style("Resizer.disabled")( cursor.notAllowed, &.hover( border.transparent ) ) val SplitPaneContent = style("splitPaneContent")( width(100.%%), height(100.%%), position.absolute, left(0.px), top(0.px) ) } object DefaultStyle extends Style } case class ReactSplitPane( // Specify whether resizing is allowed allowResize: js.UndefOr[Boolean] = true, className: js.UndefOr[String] = js.undefined, primary: js.UndefOr[String] = js.undefined, minSize: js.UndefOr[Double] = js.undefined, maxSize: js.UndefOr[Double] = js.undefined, defaultSize: js.UndefOr[Double] = js.undefined, size: js.UndefOr[Double] = js.undefined, split: js.UndefOr[String] = js.undefined, onDragStarted: js.UndefOr[Callback] = js.undefined, onDragFinished: js.UndefOr[Callback] = js.undefined, onChange: js.UndefOr[Double => Callback] = js.undefined, onResizerClick: js.UndefOr[Callback] = js.undefined, onResizerDoubleClick: js.UndefOr[Callback] = js.undefined, style: js.UndefOr[js.Object] = js.undefined, resizerStyle: js.UndefOr[js.Object] = js.undefined, paneStyle: js.UndefOr[js.Object] = js.undefined, pane1Style: js.UndefOr[js.Object] = js.undefined, pane2Style: js.UndefOr[js.Object] = js.undefined, resizerClassName: js.UndefOr[String] = ReactSplitPane.DefaultStyle.Resizer.htmlClass, step: js.UndefOr[Double] = js.undefined ) { def apply(first: VdomElement, second: VdomElement): JsComponent.Unmounted[_, _] = { val props = JSMacro[ReactSplitPane](this) val component = JsComponent[js.Object, Children.Varargs, Null](ReactSplitPane.Component) component(props)( <.div( ^.cls := "splitPaneContent", first ), <.div( ^.cls := "splitPaneContent", second ) ) } } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/semanticui/Sui.scala ================================================ package chandu0101.scalajs.react.components package semanticui import scala.scalajs.js import scala.scalajs.js.annotation.JSImport object Sui { // Addons @js.native @JSImport("semantic-ui-react/dist/commonjs/addons/Confirm", JSImport.Default) object Confirm extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/addons/Portal", JSImport.Default) object Portal extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/addons/Radio", JSImport.Default) object Radio extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/addons/Select", JSImport.Default) object Select extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/addons/TextArea", JSImport.Default) object TextArea extends js.Any // Behaviors @js.native @JSImport("semantic-ui-react/dist/commonjs/behaviors/Visibility", JSImport.Default) object Visibility extends js.Any // Collections @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Breadcrumb", JSImport.Default) object Breadcrumb extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Breadcrumb/BreadcrumbDivider", JSImport.Default) object BreadcrumbDivider extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Breadcrumb/BreadcrumbSection", JSImport.Default) object BreadcrumbSection extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form", JSImport.Default) object Form extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormButton", JSImport.Default) object FormButton extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormCheckbox", JSImport.Default) object FormCheckbox extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormDropdown", JSImport.Default) object FormDropdown extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormField", JSImport.Default) object FormField extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormGroup", JSImport.Default) object FormGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormInput", JSImport.Default) object FormInput extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormRadio", JSImport.Default) object FormRadio extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormSelect", JSImport.Default) object FormSelect extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Form/FormTextArea", JSImport.Default) object FormTextArea extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Grid", JSImport.Default) object Grid extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Grid/GridColumn", JSImport.Default) object GridColumn extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Grid/GridRow", JSImport.Default) object GridRow extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Menu", JSImport.Default) object Menu extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Menu/MenuHeader", JSImport.Default) object MenuHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Menu/MenuItem", JSImport.Default) object MenuItem extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Menu/MenuMenu", JSImport.Default) object MenuMenu extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Message", JSImport.Default) object Message extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Message/MessageContent", JSImport.Default) object MessageContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Message/MessageHeader", JSImport.Default) object MessageHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Message/MessageItem", JSImport.Default) object MessageItem extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Message/MessageList", JSImport.Default) object MessageList extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table", JSImport.Default) object Table extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableBody", JSImport.Default) object TableBody extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableCell", JSImport.Default) object TableCell extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableFooter", JSImport.Default) object TableFooter extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableHeader", JSImport.Default) object TableHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableHeaderCell", JSImport.Default) object TableHeaderCell extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/collections/Table/TableRow", JSImport.Default) object TableRow extends js.Any // Elements @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Button/Button", JSImport.Default) object Button extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Button/ButtonContent", JSImport.Default) object ButtonContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Button/ButtonGroup", JSImport.Default) object ButtonGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Button/ButtonOr", JSImport.Default) object ButtonOr extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Container", JSImport.Default) object Container extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Divider", JSImport.Default) object Divider extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Flag", JSImport.Default) object Flag extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Header", JSImport.Default) object Header extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Header/HeaderContent", JSImport.Default) object HeaderContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Header/HeaderSubheader", JSImport.Default) object HeaderSubheader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Icon", JSImport.Default) object Icon extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Icon/IconGroup", JSImport.Default) object IconGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Image", JSImport.Default) object Image extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Image/ImageGroup", JSImport.Default) object ImageGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Input", JSImport.Default) object Input extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Label", JSImport.Default) object Label extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Label/LabelDetail", JSImport.Default) object LabelDetail extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Label/LabelGroup", JSImport.Default) object LabelGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List", JSImport.Default) object List extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListContent", JSImport.Default) object ListContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListDescription", JSImport.Default) object ListDescription extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListHeader", JSImport.Default) object ListHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListIcon", JSImport.Default) object ListIcon extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListItem", JSImport.Default) object ListItem extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/List/ListList", JSImport.Default) object ListList extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Loader", JSImport.Default) object Loader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Rail", JSImport.Default) object Rail extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Reveal", JSImport.Default) object Reveal extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Reveal/RevealContent", JSImport.Default) object RevealContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Segment", JSImport.Default) object Segment extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Segment/SegmentGroup", JSImport.Default) object SegmentGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Step", JSImport.Default) object Step extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Step/StepContent", JSImport.Default) object StepContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Step/StepDescription", JSImport.Default) object StepDescription extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Step/StepGroup", JSImport.Default) object StepGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/elements/Step/StepTitle", JSImport.Default) object StepTitle extends js.Any // Modules @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Accordion/Accordion", JSImport.Default) object Accordion extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Accordion/AccordionContent", JSImport.Default) object AccordionContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Accordion/AccordionTitle", JSImport.Default) object AccordionTitle extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Checkbox", JSImport.Default) object Checkbox extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dimmer", JSImport.Default) object Dimmer extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerDimmable", JSImport.Default) object DimmerDimmable extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dropdown", JSImport.Default) object Dropdown extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dropdown/DropdownDivider", JSImport.Default) object DropdownDivider extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dropdown/DropdownHeader", JSImport.Default) object DropdownHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dropdown/DropdownItem", JSImport.Default) object DropdownItem extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Dropdown/DropdownMenu", JSImport.Default) object DropdownMenu extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Embed", JSImport.Default) object Embed extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Modal", JSImport.Default) object Modal extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Modal/ModalActions", JSImport.Default) object ModalActions extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Modal/ModalContent", JSImport.Default) object ModalContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Modal/ModalDescription", JSImport.Default) object ModalDescription extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Modal/ModalHeader", JSImport.Default) object ModalHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Popup", JSImport.Default) object Popup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Popup/PopupContent", JSImport.Default) object PopupContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Popup/PopupHeader", JSImport.Default) object PopupHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Progress", JSImport.Default) object Progress extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Rating", JSImport.Default) object Rating extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Rating/RatingIcon", JSImport.Default) object RatingIcon extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Search", JSImport.Default) object Search extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Search/SearchCategory", JSImport.Default) object SearchCategory extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Search/SearchResult", JSImport.Default) object SearchResult extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Search/SearchResults", JSImport.Default) object SearchResults extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Sidebar", JSImport.Default) object Sidebar extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Sidebar/SidebarPushable", JSImport.Default) object SidebarPushable extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/modules/Sidebar/SidebarPusher", JSImport.Default) object SidebarPusher extends js.Any // Views @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Advertisement", JSImport.Default) object Advertisement extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/Card", JSImport.Default) object Card extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/CardContent", JSImport.Default) object CardContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/CardDescription", JSImport.Default) object CardDescription extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/CardGroup", JSImport.Default) object CardGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/CardHeader", JSImport.Default) object CardHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Card/CardMeta", JSImport.Default) object CardMeta extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment", JSImport.Default) object Comment extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentAction", JSImport.Default) object CommentAction extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentActions", JSImport.Default) object CommentActions extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentAuthor", JSImport.Default) object CommentAuthor extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentAvatar", JSImport.Default) object CommentAvatar extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentContent", JSImport.Default) object CommentContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentGroup", JSImport.Default) object CommentGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentMetadata", JSImport.Default) object CommentMetadata extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Comment/CommentText", JSImport.Default) object CommentText extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed", JSImport.Default) object Feed extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedContent", JSImport.Default) object FeedContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedDate", JSImport.Default) object FeedDate extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedEvent", JSImport.Default) object FeedEvent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedExtra", JSImport.Default) object FeedExtra extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedLabel", JSImport.Default) object FeedLabel extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedLike", JSImport.Default) object FeedLike extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedMeta", JSImport.Default) object FeedMeta extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedSummary", JSImport.Default) object FeedSummary extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Feed/FeedUser", JSImport.Default) object FeedUser extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item", JSImport.Default) object Item extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemContent", JSImport.Default) object ItemContent extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemDescription", JSImport.Default) object ItemDescription extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemExtra", JSImport.Default) object ItemExtra extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemGroup", JSImport.Default) object ItemGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemHeader", JSImport.Default) object ItemHeader extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemImage", JSImport.Default) object ItemImage extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Item/ItemMeta", JSImport.Default) object ItemMeta extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Statistic", JSImport.Default) object Statistic extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Statistic/StatisticGroup", JSImport.Default) object StatisticGroup extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Statistic/StatisticLabel", JSImport.Default) object StatisticLabel extends js.Any @js.native @JSImport("semantic-ui-react/dist/commonjs/views/Statistic/StatisticValue", JSImport.Default) object StatisticValue extends js.Any } ================================================ FILE: core/src/main/scala/chandu0101/scalajs/react/components/semanticui/types.scala ================================================ package chandu0101.scalajs.react.components.semanticui case class ButtonAnimatedType private (value: String) extends AnyVal object ButtonAnimatedType { val fade = ButtonAnimatedType("fade") val vertical = ButtonAnimatedType("vertical") val values = List(fade, vertical) } case class SuiIconType(value: String) extends AnyVal case class SuiCountry(value: String) extends AnyVal ================================================ FILE: demo/index.html ================================================ scalajs-react components demo
================================================ FILE: demo/src/main/scala/demo/AppCSS.scala ================================================ package demo import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane import chandu0101.scalajs.react.components.{ Pager, ReactDraggable, ReactListView, ReactSearchBox, ReactTable, ReactTagsInputCss, SpinnerCss, hljs } import demo.components._ import demo.components.materialui._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ import scalacss.internal.mutable.GlobalRegistry object AppCSS { def load(): Unit = { GlobalRegistry.register( LeftNav.Style, LeftNavPage.Style, MuiButtonsDemo.Style, MuiPaperDemo.Style, MuiSwitchesDemo.Style, MuiTabsDemo.Style, MobileTearSheet.Style, ReactTable.DefaultStyle, ReactListView.DefaultStyle, ReactSearchBox.DefaultStyle, Pager.DefaultStyle, ScalaCSSTutorial.Style, InfoTemplate.Style, ReactInfiniteDemo.styles, ReactDraggable.Style, MuiTabsDemo.Style, ReactSplitPane.DefaultStyle, ReactDraggable.Style, ) /* touch objects to force namespace import */ hljs.Css.Github ReactTagsInputCss SpinnerCss GlobalRegistry.addToDocumentOnRegistration() } } ================================================ FILE: demo/src/main/scala/demo/CallbackDebug.scala ================================================ package demo import japgolly.scalajs.react._ import scala.scalajs.js object CallbackDebug { trait Print[T] { def print(t: T): String } trait PrintLower { final implicit def PrintAny[T]: Print[T] = new Print[T] { override def print(t: T): String = if (t == js.undefined) "undefined" else if (t == null) "null" else t.toString } } object Print extends PrintLower { def apply[T: Print](t: T): String = implicitly[Print[T]].print(t) implicit def PrintEvent[E <: ReactEvent]: Print[E] = new Print[E] { override def print(e: E): String = { val d = e.asInstanceOf[js.Dynamic] val u = js.undefined.asInstanceOf[js.Dynamic] val event = if (d.clipboardData != u) "ReactClipboardEvent" else if (d.data != u) "ReactCompositionEvent" else if (d.dataTransfer != u) "ReactDragEvent" else if (d.relatedTarget != u) "ReactFocusEvent" else if (d.locale != u) "ReactKeyboardEvent" else if (d.buttons != u) "ReactMouseEvent" else if (d.touches != u) "ReactTouchEvent" else if (d.detail != u) "ReactUIEvent" else if (d.deltaZ != u) "ReactWheelEvent" else "ReactEvent" val t = e.target.asInstanceOf[js.Dynamic] val target = if (t.value != u) "I" else if (t.offsetTop != u) "H" else "" s"$event$target: t.value: ${t.value}, t.offsetTop: ${t.offsetTop}" } } } private def base(name: String, params: String*): Callback = Callback.info(s"Event handler: $name(${params.mkString(", ")})") def f0(name: String): Callback = base(name) def f1[T1: Print](name: String): js.UndefOr[T1 => Callback] = (_1: T1) => base(name, Print(_1)) def f2[T1: Print, T2: Print](name: String): js.UndefOr[(T1, T2) => Callback] = (_1: T1, _2: T2) => base(name, Print(_1), Print(_2)) def f3[T1: Print, T2: Print, T3: Print](name: String): js.UndefOr[(T1, T2, T3) => Callback] = (_1: T1, _2: T2, _3: T3) => base(name, Print(_1), Print(_2), Print(_3)) } ================================================ FILE: demo/src/main/scala/demo/ReactApp.scala ================================================ package demo import chandu0101.scalajs.react.components.ReactTapEventPlugin import chandu0101.scalajs.react.components.hljs import demo.routes.AppRouter import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic.{global => g} import scala.scalajs.js.JSApp object ReactApp extends JSApp { override def main(): Unit = { // remove waiting page stuff if (!js.isUndefined(g.loadingElement)) { g.document.body.removeChild(g.loadingElement) g.loadingElement = js.undefined dom.document.body.className.replace("pg-loading", "") dom.document.body.className += " pg-loaded" } //TODO: dev-server complains that we load several times? ReactTapEventPlugin(js.undefined) hljs.Hljs.registerLanguage("scala", hljs.Languages.Scala) AppCSS.load() val router = AppRouter.router() router.renderIntoDOM(dom.document.getElementById("container")) () } } ================================================ FILE: demo/src/main/scala/demo/components/AppHeader.scala ================================================ package demo package components import chandu0101.scalajs.react.components._ import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Generic.toComponentCtor import japgolly.scalajs.react.vdom.html_<^._ object AppHeader { import RCustomStyles._ object Style { val headerStyle = TagMod( ^.background := "#F2706D", ^.fontSize := "1.5em", ^.padding := "0px", ^.margin := "0px", ^.position := "fixed", ^.width := "100%", ^.zIndex := "5" ) val menuNav = TagMod( MsFlexAlign := "center", WebkitAlignItems := "center", WebkitBoxAlign := "center", ^.alignItems := "center", ^.display := "-ms-flexbox", ^.display := "-webkit-box", ^.display := "-webkit-flex", ^.display := "flex", ^.height := "64px", ^.lineHeight := "64px", ^.margin := "0 3rem" ) val logo = TagMod( ^.color := "rgb(244, 233, 233)", ^.textDecoration := "none", ^.width := "150px" ) val menuItem = TagMod( ^.padding := "20px", ^.color := "rgb(244, 233, 233)", ^.textDecoration := "none" ) val menuItemHover = TagMod(^.background := "#f1453e") } case class State(menuHover: String = "") class Backend(t: BackendScope[_, State]) { def onMouseEnter(menu: String) = t.modState(_.copy(menuHover = menu)) val onMouseLeave = t.modState(_.copy(menuHover = "")) def render(S: State) = { val github: String = "Github" <.header(Style.headerStyle)( <.nav(Style.menuNav)( <.a(Style.logo, ^.href := "#")("S J R C"), <.div(^.marginLeft := "auto")( <.a( ^.target := "_blank", Style.menuItemHover.when(S.menuHover == github), Style.menuItem, ^.href := "https://github.com/chandu0101/scalajs-react-components", ^.onMouseEnter --> onMouseEnter(github), ^.onMouseLeave --> onMouseLeave )(github) ) ) ) } } val component = ScalaComponent .builder[Unit]("AppHeader") .initialState(State()) .renderBackend[Backend] .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/CallbackDebug.scala ================================================ package demo.components import japgolly.scalajs.react._ import scala.scalajs.js object CallbackDebug { trait Print[T] { def print(t: T): String } trait PrintLower { final implicit def PrintAny[T]: Print[T] = new Print[T] { override def print(t: T): String = if (t == js.undefined) "undefined" else if (t == null) "null" else t.toString } } object Print extends PrintLower { def apply[T: Print](t: T): String = implicitly[Print[T]].print(t) implicit def PrintEvent[E <: ReactEvent]: Print[E] = new Print[E] { override def print(e: E): String = { val d = e.asInstanceOf[js.Dynamic] val u = js.undefined.asInstanceOf[js.Dynamic] val event = if (d.clipboardData != u) "ReactClipboardEvent" else if (d.data != u) "ReactCompositionEvent" else if (d.dataTransfer != u) "ReactDragEvent" else if (d.relatedTarget != u) "ReactFocusEvent" else if (d.locale != u) "ReactKeyboardEvent" else if (d.buttons != u) "ReactMouseEvent" else if (d.touches != u) "ReactTouchEvent" else if (d.detail != u) "ReactUIEvent" else if (d.deltaZ != u) "ReactWheelEvent" else "ReactEvent" val t = e.target.asInstanceOf[js.Dynamic] val target = if (t.value != u) "I" else if (t.offsetTop != u) "H" else "" val values = js.Object.keys(e).map{ key => val valueU: js.Any = e.asInstanceOf[js.Dictionary[js.Any]](key) val valueS = if (js.isUndefined(valueU)) "empty" else if (js.typeOf(valueU) == "function") "function" else util.Try(js.JSON.stringify(valueU)).getOrElse("circular") s"$key: $valueS" } s"$event$target: ${values.mkString("{", ", ", "}")}" } } } private def base(name: String, params: String*): Callback = Callback.warn(s"Event handler: $name(${params.mkString(", ")})") def f0(name: String): Callback = base(name) def f1[T1: Print](name: String): js.UndefOr[T1 => Callback] = (_1: T1) => base(name, Print(_1)) def f2[T1: Print, T2: Print](name: String): js.UndefOr[(T1, T2) => Callback] = (_1: T1, _2: T2) => base(name, Print(_1), Print(_2)) def f3[T1: Print, T2: Print, T3: Print](name: String): js.UndefOr[(T1, T2, T3) => Callback] = (_1: T1, _2: T2, _3: T3) => base(name, Print(_1), Print(_2), Print(_3)) } ================================================ FILE: demo/src/main/scala/demo/components/CodeExample.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object CodeExample { object Style { val pageBodyContent = TagMod( ^.borderRadius := "2px", ^.boxShadow := "0 1px 4px rgba(223, 228, 228, 0.79)", ^.maxWidth := "1024px" ) val contentDemo = TagMod(^.padding := "30px") val contentCode = TagMod(^.borderTop := "solid 1px #e0e0e0") val title = TagMod( ^.paddingBottom := "15px" ) } case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props, C: PropsChildren) = { <.div( (<.h3(P.title, Style.title)).when(P.title.nonEmpty), <.div(Style.pageBodyContent)( <.div(Style.contentDemo, ^.key := "dan")( C ), <.pre(Style.contentCode, ^.key := "code")( CodeHighlight(P.code) ) ) ) } } val component = ScalaComponent .builder[Props]("codeexample") .renderBackendWithChildren[Backend] .build case class Props(code: String, title: String) def apply( code: String, title: String )(children: VdomNode*) = { // component.set(key, ref)(Props(code, title), children: _*) component(Props(code, title))(children: _*) } } ================================================ FILE: demo/src/main/scala/demo/components/CodeHighlight.scala ================================================ package demo package components import chandu0101.scalajs.react.components.hljs.Hljs import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Generic.toComponentCtor import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom import org.scalajs.dom.ext.PimpedNodeList object CodeHighlight { val applySyntaxHighlight = Callback( dom.document.querySelectorAll("code").foreach(Hljs.highlightBlock) ) private val component = ScalaComponent .builder[String]("CodeHighLighter") .render_P(str => <.code(^.`class` := "scala", ^.padding := "20px", str)) .configure( _.componentDidMountConst(applySyntaxHighlight).componentDidUpdateConst(applySyntaxHighlight)) .build def apply(code: String) = component(code) } ================================================ FILE: demo/src/main/scala/demo/components/ComponentCredits.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.ext.Ajax import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue import scala.scalajs.js import scala.scalajs.js.{Date, JSON} object ComponentCredits { case class State(users: List[Github]) class Backend(t: BackendScope[Props, State]) { assert(t != null) def render(S: State) = { if (S.users.isEmpty) <.div("Loading Credits ...") else <.div( <.h4("Contributors: "), <.div(^.marginRight := "10px")( S.users.map(u => GithubUser(user = u, key = u.login)).toTagMod) ) } } val component = ScalaComponent .builder[Props]("ComponentCredits") .initialState(State(List())) .renderBackend[Backend] .componentDidMount( $ => Callback { val url = s"https://api.github.com/repos/chandu0101/scalajs-react-components/commits?path=${$.props.filePath}" Ajax.get(url).foreach { case xhr => if (xhr.status == 200) { val rawUsers = JSON.parse(xhr.responseText).asInstanceOf[js.Array[js.Dynamic]] val users = rawUsers .map( u => Github( login = u.author.login.toString, html_url = u.author.html_url.toString, avatar_url = u.author.avatar_url.toString, time = new Date(u.commit.author.date.toString).getTime() ) ) .toList .groupBy(_.login) .map { case (_, objlist) => objlist.minBy(_.time) } .toSet .toList $.modState(_.copy(users = users.sortBy(_.time))) .when(true) //TODO ($.isMounted) .runNow() } } } ) .build case class Props(filePath: String) def apply(filePath: String) = { // component.set(key, ref)(Props(filePath)) component(Props(filePath)) } } ================================================ FILE: demo/src/main/scala/demo/components/ComponentGridItem.scala ================================================ package demo package components import demo.routes.AppRouter._ import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object ComponentGridItem { object Style { val item = TagMod( ^.margin := "30px", ^.maxWidth := "250px", ^.cursor := "pointer", ^.boxShadow := "0 1px 3px rgba(85, 89, 88, 0.24)" ) val itemTitle = TagMod( ^.backgroundColor := "#eeeeee", ^.color := "rgba(0, 0, 0, 0.87)", ^.fontSize := "18px", ^.fontWeight := "500", ^.letterSpacing := "0px", ^.lineHeight := "54px", ^.margin := "0px", ^.padding := "0px", ^.textAlign := "center" ) val itemImage = TagMod( ^.maxHeight := "250 px", ^.maxWidth := "250 px", ^.minHeight := "100 px", ^.minWidth := "120 px" ) val itemHover = TagMod(^.boxShadow := "0 10px 18px rgba(16, 208, 194, 0.24)") } case class State(itemHover: Boolean = false) class Backend(t: BackendScope[Props, State]) { val onMouseOver = t.modState(_.copy(itemHover = true)) val onMouseOut = t.modState(_.copy(itemHover = false)) def render(P: Props, S: State) = <.div( Style.item, Style.itemHover.when(S.itemHover), P.ctrl setOnClick P.route, ^.onMouseEnter --> onMouseOver, ^.onMouseLeave --> onMouseOut, <.h3( Style.itemTitle, ^.key := P.heading, P.heading ), <.img( ^.src := P.img.asInstanceOf[String], Style.itemImage, ^.key := "alink", ^.width := 250.px ) ) } val component = ScalaComponent .builder[Props]("ComponentGridElement") .initialState(State()) .renderBackend[Backend] .build case class Props(heading: String, route: Page, img: js.Any, ctrl: RouterCtl[Page]) def apply(heading: String, route: Page, img: js.Any, ctrl: RouterCtl[Page]) = { component(Props(heading, route, img, ctrl)) // component.set(key, ref)(Props(heading, route, img, ctrl)) } } ================================================ FILE: demo/src/main/scala/demo/components/GithubUser.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ case class Github(login: String = "", html_url: String = "", avatar_url: String = "", time: Double = 0) { override def equals(obj: Any): Boolean = obj match { case that: Github => that.login.equalsIgnoreCase(this.login) case _ => false } } object GithubUser { object Styles { val userGroup = TagMod(^.display := "inline-block", ^.textAlign := "center", ^.textDecoration := "none", ^.color := "black") val userIcon = TagMod(^.margin := "10px", ^.display := "block", ^.width := "100px", ^.height := "100px", ^.borderRadius := "50%") val userName = TagMod(^.fontSize := "18px", ^.fontWeight := "500") } case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { <.a(Styles.userGroup, ^.href := P.user.html_url)( <.img(Styles.userIcon, ^.src := P.user.avatar_url), <.span(Styles.userName)(P.user.login) ) } } val component = ScalaComponent .builder[Props]("GithubUser") .renderBackend[Backend] .build case class Props(user: Github) def apply(user: Github, key: Key) = { // component.set(key, ref)(Props(user))} component.withKey(key)(Props(user)) } } ================================================ FILE: demo/src/main/scala/demo/components/Images.scala ================================================ package demo.components import scala.scalajs.js import scala.scalajs.js.annotation.JSImport object Images { @js.native @JSImport("./googleMap.png", JSImport.Default) object googleMapImage extends js.Any @js.native @JSImport("./reactListView.png", JSImport.Default) object reactListViewImage extends js.Any @js.native @JSImport("./reactTreeView.png", JSImport.Default) object reactTreeViewImage extends js.Any @js.native @JSImport("./elementalui.png", JSImport.Default) object elementaluiImage extends js.Any @js.native @JSImport("./mui.png", JSImport.Default) object materialuiImage extends js.Any @js.native @JSImport("./semanticui.png", JSImport.Default) object semanticuiImage extends js.Any @js.native @JSImport("./reactTable.png", JSImport.Default) object reactTableImage extends js.Any @js.native @JSImport("./reactSplitPane.png", JSImport.Default) object reactSplitPaneImage extends js.Any @js.native @JSImport("./bottom-tear.svg", JSImport.Default) object bottomTearImage extends js.Any @js.native @JSImport("./reactTagsInput.png", JSImport.Default) object reactTagsInputImage extends js.Any @js.native @JSImport("./reactInfinite.png", JSImport.Default) object reactInfiniteImage extends js.Any @js.native @JSImport("./reactGeomIcon.png", JSImport.Default) object reactGeomIconImage extends js.Any @js.native @JSImport("./spinner.png", JSImport.Default) object spinnerImage extends js.Any @js.native @JSImport("./reactPopover.png", JSImport.Default) object reactPopoverImage extends js.Any @js.native @JSImport("./reactDraggable.png", JSImport.Default) object reactDraggableImage extends js.Any } ================================================ FILE: demo/src/main/scala/demo/components/InfoTemplate.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object InfoTemplate { case class Props( browsersTested: List[String], componentFilePath: String, scalacss: Boolean ) case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props, C: PropsChildren) = { <.div(^.cls := "info-template")( <.div(^.cls := "component-info")(C), (<.div( <.h4("Style :"), <.a(^.href := "#scalacss", "scalacss") )).when(P.scalacss), (<.div(^.marginTop := "10px")( <.h4("Tested Browsers List :"), <.ul(^.marginLeft := "50px")(P.browsersTested.map(s => <.li(s)).toTagMod) )).when(P.browsersTested.nonEmpty), <.div(^.marginTop := "10px")( ComponentCredits( filePath = s"core/src/main/scala/chandu0101/scalajs/react/components/${P.componentFilePath}") ) ) } } val component = ScalaComponent .builder[Props]("InfoTemplate") .renderBackendWithChildren[Backend] .build object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } def apply( componentFilePath: String, scalacss: Boolean = false, browsersTested: List[String] = List() )(children: VdomNode*) = // component.set(key, ref)( // Props(browsersTested, componentFilePath, scalacss), // children: _* // ) component(Props(browsersTested, componentFilePath, scalacss))(children: _*) } ================================================ FILE: demo/src/main/scala/demo/components/LeftNav.scala ================================================ package demo package components import demo.routes.LeftRoute import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Generic.toComponentCtor import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object LeftNav { object Style extends StyleSheet.Inline { import dsl._ val container = style( display.flex, flexDirection.column, listStyle := "none", padding.`0` ) val menuItem = styleF.bool( selected => styleS( lineHeight(48.px), padding :=! "0 25px", cursor.pointer, textDecoration := "none", mixinIfElse(selected)( color.red, fontWeight._500 )( color.black, &.hover( color(c"#555555"), backgroundColor(c"#ecf0f1") ) ) )) } case class Props(menus: List[LeftRoute], selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { <.ul(Style.container)( P.menus .map( item => <.li( ^.key := item.name, Style.menuItem(item == P.selectedPage), item.name, P.ctrl setOnClick item )) .toTagMod ) } } val component = ScalaComponent .builder[Props]("LeftNav") .renderBackend[Backend] .build def apply(menus: List[LeftRoute], selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = { component(Props(menus, selectedPage, ctrl)) // component.set(key, ref)(Props(menus, selectedPage, ctrl)) } } ================================================ FILE: demo/src/main/scala/demo/components/LeftNavPage.scala ================================================ package demo package components import demo.routes.LeftRoute import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object LeftNavPage { object Style extends StyleSheet.Inline { import dsl._ val container = style( display.flex, minHeight(600.px), paddingTop(64.px) ) val nav = style(width(190.px)) val content = style( padding(30.px), borderLeft :=! "1px solid rgb(223, 220, 220)", flex := "1" ) } case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { <.div( Style.container, <.div(Style.nav, LeftNav(P.menu, P.selectedPage, P.ctrl)), <.div(Style.content, P.selectedPage.render()) ) } } val component = ScalaComponent .builder[Props]("LeftNavPage") .renderBackend[Backend] .build case class Props(menu: List[LeftRoute], selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(menu: List[LeftRoute], selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]): VdomElement = { component(Props(menu, selectedPage, ctrl)) } } ================================================ FILE: demo/src/main/scala/demo/components/LocalDemoButton.scala ================================================ package demo.components import chandu0101.scalajs.react.components._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object LocalDemoButton { import RCustomStyles._ trait Style { val button = TagMod( ^.backgroundColor := "#F2706D", ^.border := "1px solid transparent", ^.boxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)", ^.color := "#F5F4F4", ^.cursor := "pointer", ^.display := "inline-block", ^.fontSize := "15px", ^.textDecoration := "none", ^.padding := "5px 7px", WebkitBoxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)" ) val buttonHover = TagMod( ^.backgroundColor := "#DA423E", ^.textDecoration := "none" ) } case class State(buttonHover: Boolean = false) class Backend(t: BackendScope[Props, State]) { def onButtonClick(P: Props)(e: ReactMouseEvent): Callback = (CallbackOption.liftOptionLike(P.onButtonClick).flatMap(f => f(e)) >> e.preventDefaultCB) val onMouseEnter: Callback = t.modState(_.copy(buttonHover = true)) val onMouseLeave: Callback = t.modState(_.copy(buttonHover = false)) def styleSet1(st1: TagMod, more: (TagMod, Boolean)*): TagMod = { TagMod(st1, more.filter(_._2).map(_._1).toTagMod) } def render(P: Props, S: State) = { val buttonStyle = styleSet1( P.style.button, P.style.buttonHover -> S.buttonHover ) if (P.linkButton) <.a( buttonStyle, ^.href := P.href, ^.target := "_blank", ^.onMouseEnter --> onMouseEnter, ^.onMouseLeave --> onMouseLeave, P.name ) else <.a( buttonStyle, ^.onClick ==> onButtonClick(P), ^.onMouseEnter --> onMouseEnter, ^.onMouseLeave --> onMouseLeave, P.name ) } } val component = ScalaComponent .builder[Props]("LocalDemoButton") .initialState(State()) .renderBackend[Backend] .build case class Props( name: String, onButtonClick: js.UndefOr[ReactMouseEvent => Callback], linkButton: Boolean, href: String, style: Style ) def apply( name: String, onButtonClick: js.UndefOr[ReactMouseEvent => Callback] = js.undefined, linkButton: Boolean = false, href: String = "", style: Style = new Style {} ) = { component(Props(name, onButtonClick, linkButton, href, style)) } } ================================================ FILE: demo/src/main/scala/demo/components/ReactDraggableDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.{RElementPosition, ReactDraggable} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.raw.Event object ReactDraggableDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render = <.div( ^.cls := "react-draggable-demo", <.h2(^.cls := "mui-font-style-headline", "Demo"), CodeExample(code, "ReactDraggable")( ReactDraggable( zIndex = 100, onStop = (e: Event, pos: RElementPosition) => Callback.info(s"stopped at $pos") )( <.div( <.h2("Drag me"), ^.backgroundColor := "#F2706D", ^.padding := "20px", ^.width := "200px" ) ) ) ) } val component = ScalaComponent .builder[Unit]("ReactDraggableDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactDraggableInfo.scala ================================================ package demo.components import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ object ReactDraggableInfo { val component = ScalaComponent .builder[Unit]("ReactDraggableInfo") .render( P => InfoTemplate(componentFilePath = "ReactDraggable.scala")( <.div(^.cls := "full-width-section")( <.h3("React Draggable :"), <.p( "Port of ", <.a(^.href := "https://github.com/STRML/react-draggable")( "react-draggable" ) ) ) )) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactGeomIconDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.{IconName, ReactGeomIcon} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactGeomIconDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State(value: String = "", multiValue: String = "") class Backend(t: BackendScope[Unit, State]) { def render(S: State) = { <.div( CodeExample(code, "Demo")( <.div( ReactGeomIcon(name = IconName.CAMERA, width = "2em", height = "2em", fill = "red")(), ReactGeomIcon(name = IconName.CALENDAR, width = "2em", height = "2em", fill = "blue")(), ReactGeomIcon(name = IconName.CHAT, width = "2em", height = "2em", fill = "black")(), ReactGeomIcon(name = IconName.CHEVRONDOWN, width = "2em", height = "2em", fill = "orange")() ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactGeomIconDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactGeomIconInfo.scala ================================================ package demo.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object ReactGeomIconInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .builder[Unit]("ReactGeomIconInfo") .render(P => { InfoTemplate(componentFilePath = "icons/ReactGeomIcon.scala")( <.div( <.h3("React GeomIcon "), <.p( "scalajs-react wrapper for ", RedLink("react geom icons", "https://github.com/jxnblk/react-geomicons") ), <.div( <.h4("Supported Version :"), <.span("2.0.4") ), <.div( <.h4("How To Use :"), <.p("Follow the installation guide from :", RedLink("here", "https://github.com/jxnblk/react-geomicons#getting-started")) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactInfiniteDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactInfinite import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object ReactInfiniteDemo { object styles extends StyleSheet.Inline { import dsl._ val container = style( display.flex, justifyContent.center, alignItems.center, width(65 %%) ) val item = style( width(300 px), textAlign.center, height(70 px), padding(20 px) ) val border = style( borderBottom :=! "2px solid rgba(0, 0, 0, 0.1)", marginLeft(4 px) ) } val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State(isLoading: Boolean = true, data: Vector[String] = Vector()) class Backend(t: BackendScope[_, State]) { def renderRow(s: String): VdomElement = { <.div(styles.item, s, ^.key := s, <.div(styles.border)) } def loadData() = { val data = (1 to 500).toVector.map(i => s"List Item $i") t.modState(_.copy(isLoading = false, data = data)) } def render(S: State) = { <.div( CodeExample(code, "Demo")( <.div( styles.container, if (S.isLoading) <.div("Loading ..") else ReactInfinite( elementHeight = 70, containerHeight = 400 )(S.data.map(renderRow)) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactSelectDemo") .initialState(State()) .renderBackend[Backend] .componentDidMount(scope => scope.backend.loadData()) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactInfiniteInfo.scala ================================================ package demo.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object ReactInfiniteInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .builder[Unit]("ReactInfiniteInfo") .render(P => { InfoTemplate(componentFilePath = "listviews/ReactInfinite.scala")( <.div( <.h3("React Infinite "), <.p( "scalajs-react wrapper for ", RedLink("react infinite", "https://github.com/seatgeek/react-infinite") ), <.div( <.h4("Supported Version :"), <.span("0.7.1") ), <.div( <.h4("How To Use :"), <.p("Follow the installation guide from :", RedLink("here", "https://github.com/seatgeek/react-infinite#installation")) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactListViewDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactListView import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom object ReactListViewDemo { object Style { def listViewComponent = TagMod(^.float := "left", ^.marginBottom := "2em") def selectedContent = TagMod(^.alignSelf := "center", ^.margin := "0 40px") def listViewDemo = TagMod(^.display := "flex") } val code = GhPagesMacros.exampleSource // EXAMPLE:START val data = List("ScalaJS", "JavasScript", "ReactJS", "Html", "Css", "Software", "Browser") case class State(content: String = "") class Backend(t: BackendScope[Unit, State]) { def onItemSelect(item: String) = Callback { val content = s"Selected Item: $item
" dom.document.getElementById("listviewcontent").innerHTML = content } def render = <.div( <.h3("Demo"), CodeExample(code, "ReactListView")( <.div(Style.listViewDemo)( ReactListView( items = data, showSearchBox = true, onItemSelect = onItemSelect _ ), <.strong( ^.id := "listviewcontent", Style.selectedContent, "Selected Content Here" ) ) ) ) } val component = ScalaComponent .builder[Unit]("ReactListViewDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactListViewInfo.scala ================================================ package demo.components import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ object ReactListViewInfo { val component = ScalaComponent .builder[Unit]("ReactListViewInfo") .render(P => { InfoTemplate(componentFilePath = "listviews/ReactListView.scala")( <.h3("React ListView :"), <.p("List View Component with search feature") ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactPopoverDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactPopOver import chandu0101.scalajs.react.components.ReactPopOver.{Props, State} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactPopoverDemo { object Style { val popoverExample = TagMod(^.display := "flex", ^.flexDirection := "column", ^.alignItems := "center") } val code = GhPagesMacros.exampleSource // EXAMPLE:START class Backend(t: BackendScope[Unit, Unit]) { private val topRef = ScalaComponent.mutableRefTo(ReactPopOver.component) private val rightRef = ScalaComponent.mutableRefTo(ReactPopOver.component) private val leftRef = ScalaComponent.mutableRefTo(ReactPopOver.component) private val bottomRef = ScalaComponent.mutableRefTo(ReactPopOver.component) def toggleCB(refComp: => ScalaComponent.MountedImpure[Props, State, ReactPopOver.Backend]) : ReactMouseEvent => Callback = { e => CallbackTo(e.currentTarget.domAsHtml) flatMap refComp.backend.toggle } def render = { <.div( <.h3("Demo"), CodeExample(code, "ReactPopover")( <.div(Style.popoverExample)( <.div(^.padding := "20px")( topRef.component(Props("Top Title", "top"))("I am Top Pop over"), LocalDemoButton(name = "Top Button", onButtonClick = toggleCB(topRef.value)) ), <.div(^.padding := "20px")( leftRef.component(Props("Left Title", "left"))("I am left Popover"), LocalDemoButton(name = "Left Button", onButtonClick = toggleCB(leftRef.value)) ), <.div(^.padding := "20px")( rightRef.component(Props("Right Title", "right"))("I am Right Popover"), LocalDemoButton(name = "Right Button", onButtonClick = toggleCB(rightRef.value)) ), <.div(^.padding := "20px")( bottomRef.component(Props("Bottom Title", "bottom"))("I am bottom Popover"), LocalDemoButton(name = "Bottom Button", onButtonClick = toggleCB(bottomRef.value)) ) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactPopoverDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactPopoverInfo.scala ================================================ package demo.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactPopoverInfo { val component = ScalaComponent .builder[Unit]("ReactPopoverInfo") .render(P => { InfoTemplate(componentFilePath = "popovers/ReactPopOver.scala")( <.h3("React Popover :"), <.p(" Simple popover component with following options: "), <.ul(^.paddingLeft := "15px")( <.li("left"), <.li("right"), <.li("top"), <.li("bottom") ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactTagsInputDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.{ReactTagsInput, ReactTagsInputM} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object ReactTagsInputDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State(tags: js.Array[String] = js.Array("scala", "scalajs")) class Backend(t: BackendScope[_, State]) { val onChange: (js.Array[String]) => Callback = tags => t.modState(_.copy(tags = tags)) >> Callback.info(s"New state: $tags") def render(S: State) = <.div( CodeExample(code, "Demo")( <.div( ReactTagsInput( value = S.tags, onChange = onChange, onBlur = demo.CallbackDebug.f0("onBlur"), onKeyDown = demo.CallbackDebug.f1("onKeyDown"), onKeyUp = demo.CallbackDebug.f1("onKeyUp") )() ) ) ) } val component = ScalaComponent .builder[Unit]("ReactTagsInputDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactTagsInputInfo.scala ================================================ package demo.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object ReactTagsInputInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .builder[Unit]("ReactTagsInputInfo") .render(P => { InfoTemplate(componentFilePath = "textfields/ReactTagsInput.scala")( <.div( <.h3("React Tags Input "), <.p( "scalajs-react wrapper for ", RedLink("tags input", "https://github.com/olahol/react-tagsinput") ), <.div( <.h4("Supported Version :"), <.span("3.0.3") ), <.div( <.h4("How To Use :"), <.p("Follow the installation guide from :", RedLink("here", "https://github.com/olahol/react-tagsinput#install")) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactTreeViewDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.{ReactTreeView, TreeItem} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom object ReactTreeViewDemo { object Style { def treeViewDemo = TagMod(^.display := "flex") def selectedContent = TagMod(^.alignSelf := "center", ^.margin := "0 40px") } val code = GhPagesMacros.exampleSource // EXAMPLE:START val data = TreeItem( "root", TreeItem( "dude1", TreeItem("dude1c") ), TreeItem("dude2"), TreeItem("dude3"), TreeItem( "dude4", TreeItem( "dude4c", TreeItem("dude4cc") ) ) ) case class State(content: String = "") class Backend(t: BackendScope[Unit, State]) { def onItemSelect(item: String, parent: String, depth: Int): Callback = { val content = s"""Selected Item: $item
|Its Parent : $parent
|Its depth: $depth
""".stripMargin Callback(dom.document.getElementById("treeviewcontent").innerHTML = content) } def render = { <.div( <.h3("Demo"), CodeExample(code, "ReactTreeView")( <.div(Style.treeViewDemo)( ReactTreeView( root = data, openByDefault = true, onItemSelect = onItemSelect _, showSearchBox = true ), <.strong(^.id := "treeviewcontent", Style.selectedContent) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactTreeViewDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/ReactTreeViewInfo.scala ================================================ package demo.components import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ object ReactTreeViewInfo { val component = ScalaComponent .builder[Unit]("ReactTreeViewInfo") .render(P => { InfoTemplate(componentFilePath = "treeviews/ReactTreeView.scala")( <.h3("React TreeView :"), <.p("Tree View Component with search feature") ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/RedLink.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object RedLink { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { <.a( ^.href := P.url, P.name, ^.textDecoration.none, ^.color.red, ^.margin := "0 5px", ^.target := "_blank" ) } } val component = ScalaComponent .builder[Props]("RedLink") .renderBackend[Backend] .build case class Props(name: String, url: String) def apply(name: String, url: String) = component(Props(name, url)) } ================================================ FILE: demo/src/main/scala/demo/components/ScalaCSSTutorial.scala ================================================ package demo package components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object ScalaCSSTutorial { object Style extends StyleSheet.Inline { import dsl._ val content = style( padding(80.px), unsafeChild("a")( color.red, margin(20.px), textDecoration := "none" ) ) } val basicCode = """ | | //place this code at starting point of u r app / page where u using this component | | GlobalRegistry.register(ReactTable.DefaultStyle) // register style | | GlobalRegistry.addToDocumentOnRegistration() // add to html in runtime | | """.stripMargin val customCode = """ | | object CustomTableStyle extends ReactTable.Style { | | val original = new ReactTable.Style or ReactTable.DefaultStyle // we need this hack as scala doesn't allow super.val :( | | import dsl._ | | override val tableRow = style(original.tableRow.style, | &.hover( | backGroundColor.red | ) | ) | } | |// make sure you register ur new style | GlobalRegistry.register(CustomTableStyle) | | | """.stripMargin val component = ScalaComponent .builder[Unit]("ScalaCSSTutorial") .renderStatic( <.div( Style.content, <.div( <.h4("Basic Usage :"), <.p( "To use scalacss based components, u just need to register component style", <.br(), "For example if you want to use ReactTable component in ur project " ), <.pre( CodeHighlight(basicCode) ), <.a( ^.href := "https://github.com/chandu0101/scalajs-react-components/blob/master/demo/src/main/scala/chandu0101/scalajs/react/components/demo/css/AppCSS.scala", "real world example", ^.target := "_blank" ) ), <.div( <.h4("Custom Styles:"), <.p( "If you want to customize style of a component then define a new style by extending base style class of component ", <.br(), "For example we want to add custom hover color for ReactTable component" ), <.pre( CodeHighlight(customCode) ) ) ) ) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/SpinnerDemo.scala ================================================ package demo.components import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.Spinner import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js.{Array => JArray} object SpinnerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("SpinnerDemo") .render( P => <.div( CodeExample(code, "Demo")( <.div(^.width := "100px", ^.height := "100px", ^.backgroundColor := "grey", Spinner()()) ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/SpinnerInfo.scala ================================================ package demo.components import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object SpinnerInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .static("SpinnerInfo")( InfoTemplate(componentFilePath = "spinners/Spinner.scala")( <.div( <.h3("Spinner "), <.p( "scalajs-react wrapper for ", RedLink("react-spinner", "https://github.com/chenglou/react-spinner") ), <.div( <.h4("Supported Version :"), <.span("0.2.2") ), <.div( <.h4("How To Use :"), <.p("Follow the installation guide from :", RedLink("here", "https://github.com/chenglou/react-spinner#install")) ) ) ) ) def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiButtonsDemo.scala ================================================ package demo package components package elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object EuiButtonsDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { val renderButtonSizes = <.div( EuiButton(size = ButtonSize.lg)("Large"), EuiButton()("Default"), EuiButton(size = ButtonSize.sm)("Small"), EuiButton(size = ButtonSize.xs)("Extra Small") ) def renderButtonVariants(list: (ButtonType, String)*) = <.div( list.map(t => EuiButton(`type` = t._1)(t._2)).toTagMod ) def render = CodeExample(code, "EuiButtons")( <.div( <.h1("Buttons"), <.h2("Sizes"), renderButtonSizes, <.h2("Fill Buttons"), renderButtonVariants( (ButtonType.primary, "Primary"), (ButtonType.success, "Success"), (ButtonType.warning, "Warning"), (ButtonType.danger, "Danger") ), <.h2("Default Button Alternatives"), renderButtonVariants( (ButtonType.default_primary, "Primary"), (ButtonType.default_success, "Success"), (ButtonType.default_warning, "Warning"), (ButtonType.default_danger, "Danger") ), <.h2("Hollow Button Alternatives"), renderButtonVariants( (ButtonType.hollow_primary, "Primary"), (ButtonType.hollow_success, "Success"), (ButtonType.hollow_warning, "Warning"), (ButtonType.hollow_danger, "Danger") ), <.h2("Link Style Buttons"), renderButtonVariants( (ButtonType.link, "Link"), (ButtonType.link_cancel, "Cancel"), (ButtonType.link_delete, "Delete"), (ButtonType.link_text, "Text") ), <.h2("Button Groups"), EuiButtonGroup()( EuiButton()("Left"), EuiButton()("Middle"), EuiButton()("Right") ), <.h2("Dropdown"), EuiDropdown( buttonLabel = "Default Trigger", items = js.Array( EuiDropdownMenuItem(label = "Action"), EuiDropdownMenuItem(label = "Another Action"), EuiDropdownMenuItem(`type` = EuiDropdownMenuItemType.DIVIDER), EuiDropdownMenuItem(label = "Header", `type` = EuiDropdownMenuItemType.HEADER), EuiDropdownMenuItem(label = "Action") ) )(), <.h3("Custom Trigger"), EuiDropdown( items = js.Array( EuiDropdownMenuItem(label = "Action"), EuiDropdownMenuItem(label = "Another Action"), EuiDropdownMenuItem(`type` = EuiDropdownMenuItemType.DIVIDER), EuiDropdownMenuItem(label = "Header", `type` = EuiDropdownMenuItemType.HEADER), EuiDropdownMenuItem(label = "Action") ) )(<.h3("I am an H3!!!")) ) ) } val component = ScalaComponent .builder[Unit]("EuiButtonsDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiFormsDemo.scala ================================================ package demo.components.elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.concurrent.duration._ import scala.scalajs.js object EuiFormsDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val flavors = js.Array( FormSelectOption("Caramel", "caramel"), FormSelectOption("Chocolate", "chocolate"), FormSelectOption("Vanilla", "vanilla"), FormSelectOption("Strawberry", "strawberry") ) case class State( searching: Boolean = false, inputSelect: String = "", inlineRadioGroup: String = "", inputEmail: String = "", inputPassword: String = "", inputConfirmPassword: String = "", files: scala.scalajs.js.Array[File] = scala.scalajs.js.Array() ) val renderBasicExample = <.div( ^.className := "code-example__example", EuiForm()( EuiFormField(label = "Email address", htmlFor = "basic-form-input-email")( EuiFormInput(`type` = "email", name = "basic-form-input-email")() ), EuiFormField(label = "Password", htmlFor = "basic-form-input-password")( EuiFormInput(`type` = "password", name = "basic-form-input-password")() ), EuiFormField()( EuiCheckbox(label = "Check It")() ), EuiButton()("Submit") ) ) val renderBasicExampleHorizontal = <.div( ^.className := "code-example__example", EuiForm(`type` = FormType.horizontal)( EuiFormField(label = "Email address", htmlFor = "horizontal-input-email")( EuiFormInput(`type` = "email", name = "horizontal-input-email")() ), EuiFormField(label = "Password", htmlFor = "horizontal-input-password")( EuiFormInput(`type` = "password", name = "horizontal-input-password")() ), EuiFormField(offsetAbsentLabel = true)( EuiCheckbox(label = "Check It")() ), EuiFormField(offsetAbsentLabel = true)( EuiButton()("Submit") ) ) ) val renderBasicExampleInline = <.div( ^.className := "code-example__example", EuiForm(`type` = FormType.inline)( EuiFormField(label = "Email address", htmlFor = "inline-input-email")( EuiFormInput(`type` = "email", name = "inline-input-email")() ), EuiFormField(label = "Password", htmlFor = "inline-input-password")( EuiFormInput(`type` = "password", name = "inline-input-password")() ), EuiFormField()( EuiCheckbox(label = "Check It")() ), EuiFormField()( EuiButton()("Submit") ) ) ) val renderInputGroupsContiguous = <.div( EuiInputGroup(contiguous = true)( EuiInputGroupSection(grow = true)( EuiFormInput(`type` = "text")() ), EuiInputGroupSection()( EuiButton()("Button") ) ), EuiInputGroup(contiguous = true)( EuiInputGroupSection()( EuiButton()(EuiGlyph(icon = Octicons.pencil)()) ), EuiInputGroupSection()( EuiFormInput(`type` = "text")() ) ) ) val renderInputGroupsSeparate = <.div( EuiInputGroup()( EuiInputGroupSection(grow = true)( EuiFormInput(`type` = "text")() ), EuiInputGroupSection()( EuiButton()("Button") ) ), EuiInputGroup()( EuiInputGroupSection()( EuiButton()(EuiGlyph(icon = Octicons.pencil)()) ), EuiInputGroupSection()( EuiFormInput(`type` = "text")() ) ) ) val renderSizes = <.div( EuiFormField(label = "Input", htmlFor = "supported-controls-input")( EuiFormInput(name = "supported-controls-input")() ), EuiFormField(label = "Large Input", htmlFor = "supported-controls-input-lg")( EuiFormInput(name = "supported-controls-input-lg", size = LgSmXs.lg)() ), EuiFormField(label = "Small Input", htmlFor = "supported-controls-input-sm")( EuiFormInput(name = "supported-controls-input-sm", size = LgSmXs.sm)() ) ) val renderNotes = EuiFormField(label = "Input with Notes")( EuiFormInput()(), EuiFormNote()( "A note to help the user understand it's associated field, may extend beyond one line" ), EuiFormNote(`type` = NoteType.warning)( "A warning to help the user understand it's associated field, may extend beyond one line" ) ) case class Backend($ : BackendScope[Unit, State]) { def onDrop(files: scala.scalajs.js.Array[File]) = { scala.scalajs.js.Dynamic.global.alert(files) $.modState(_.copy(files = files)) } def updateInlineRadios(value: String) = $.modState(_.copy(inlineRadioGroup = value)) def updateSelect(value: String) = $.modState(_.copy(inputSelect = value)) def updateEmail(e: ReactEventFromInput) = { val value = e.target.value $.modState(_.copy(inputEmail = value)) } def updatePassword(e: ReactEventFromInput) = { val value = e.target.value $.modState(_.copy(inputPassword = value)) } def updateConfirmPassword(e: ReactEventFromInput) = { val value = e.target.value $.modState(_.copy(inputConfirmPassword = value)) } def validateConfirm(password: String) = { $.state.map(_.inputPassword == password) } def handleSearch(e: ReactEventFromHtml) = { val result = $.modState(_.copy(searching = true)) scala.scalajs.js.timers.setTimeout(2 seconds) { $.modState(_.copy(searching = false)).runNow() } result } val renderSupportedControls = <.div( EuiFormInput()(), EuiFormInput(multiline = true)(), EuiFormSelect( options = flavors, firstOption = "Select", onChange = updateSelect _ )(), EuiFormField(label = "Checkboxes")( EuiCheckbox(label = "Check me out")(), EuiCheckbox(label = "I'm disabled", disabled = true)() ), EuiFormField(label = "Radios")( EuiRadio(label = "Pick Me")(), EuiRadio(label = "No, pick me!")() ), EuiFormField(label = "Inline Checkboxes", className = "inline-controls")( EuiCheckbox(label = "Check me out")(), EuiCheckbox(label = "I'm disabled", disabled = true)() ), EuiFormField(label = "Inline Radios", className = "inline-controls")( EuiRadio(label = "Pick Me")(), EuiRadio(label = "No, pick me!")() ) ) val renderComplexForms = <.div( EuiFormRow()( EuiFormField( width = FormFieldWidth.one_half, label = "Credit Card Number", htmlFor = "credit-card-number" )( EuiFormInput( pattern = "[0-9]", name = "credit-card-number" )() ), EuiFormField( width = FormFieldWidth.one_quarter, label = "Expiration", htmlFor = "credit-card-expiration" )( EuiFormInput( name = "credit-card-expiration" )() ), EuiFormField( width = FormFieldWidth.one_quarter, label = "Security Code (CCV)", htmlFor = "credit-card-security" )( EuiFormInput( pattern = "[0-9]", name = "credit-card-security" )() ) ), EuiFormRow()( EuiFormField( width = FormFieldWidth.one_half, label = "First Name", htmlFor = "first-name" )( EuiFormInput( name = "first-name" )() ), EuiFormField( width = FormFieldWidth.one_half, label = "Last Name", htmlFor = "last-name" )( EuiFormInput( name = "last-name" )() ) ), EuiFormField( label = "Billing Address", htmlFor = "billing-address" )( EuiFormInput( name = "address-street1" )() ), EuiFormField()( EuiFormInput( name = "address-street2" )() ), EuiFormRow()( EuiFormField(width = FormFieldWidth.two_thirds)( EuiFormInput(name = "city")() ), EuiFormField(width = FormFieldWidth.one_third)( EuiFormInput(name = "state")() ), EuiFormField(width = FormFieldWidth.one_third)( EuiFormInput(name = "postal-code")() ), EuiFormField(width = FormFieldWidth.two_thirds)( EuiFormSelect( options = js.Array( FormSelectOption("Esperantujo", "esperantujo"), FormSelectOption("Volapuko", "volapuko"), FormSelectOption("Usono", "usono") ), firstOption = "Country", onChange = updateSelect _ )() ) ) ) def renderValidation(S: State) = EuiForm()( EuiRadioGroup( label = "Radios", value = S.inlineRadioGroup, onChange = updateInlineRadios _, options = flavors.map(_.asInstanceOf[js.Object]), required = true )(), EuiFormSelect( label = "Select", value = S.inputSelect, onChange = updateSelect _, options = flavors, required = true, prependEmptyOption = true )(), EuiEmailInputGroup( label = "Email", value = S.inputEmail, onChange = js.defined(updateEmail _), required = true )(), EuiPasswordInputGroup( label = "Password", value = S.inputPassword, onChange = js.defined(updatePassword _), required = true )(), EuiPasswordInputGroup( label = "Confirm", value = S.inputConfirmPassword, onChange = js.defined(updateConfirmPassword _), required = true, validatePassword = js.defined(validateConfirm _), invalidMessage = "Password validation doesn't match password" )() ) def renderIcons(S: State) = <.div( <.h3("Alignment"), EuiFormRow()( EuiFormIconField(width = FormFieldWidth.one_half, iconPosition = LeftRight.left, iconColor = ColorVariant.default, iconKey = Octicons.star)( EuiFormInput(name = "icon-alignment-left")() ), EuiFormIconField(width = FormFieldWidth.one_half, iconPosition = LeftRight.right, iconColor = ColorVariant.default, iconKey = Octicons.star)( EuiFormInput(name = "icon-alignment-right")() ) ), <.h3("Context Variants Color"), EuiFormRow()( EuiFormIconField(width = FormFieldWidth.one_fifth, iconColor = ColorVariant.default, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconColor = ColorVariant.primary, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconColor = ColorVariant.success, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconColor = ColorVariant.warning, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconColor = ColorVariant.danger, iconKey = Octicons.star)(EuiFormInput()()) ), <.h3("Context Variants Fill"), EuiFormRow()( EuiFormIconField(width = FormFieldWidth.one_fifth, iconFill = ColorVariant.default, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconFill = ColorVariant.primary, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconFill = ColorVariant.success, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconFill = ColorVariant.warning, iconKey = Octicons.star)(EuiFormInput()()), EuiFormIconField(width = FormFieldWidth.one_fifth, iconFill = ColorVariant.danger, iconKey = Octicons.star)(EuiFormInput()()) ), <.h3("Loading Indicator"), EuiFormIconField(iconPosition = LeftRight.right, iconKey = Octicons.search, iconColor = ColorVariant.default, iconIsLoading = S.searching)( EuiFormInput( onChange = js.defined(handleSearch _), `type` = "search", name = "icon-form-search" )() ) ) def renderFileUpload(S: State) = EuiForm(`type` = FormType.horizontal)( EuiFormField(label = "Image")( EuiFileUpload( buttonLabelInitial = "Upload Image", buttonLabelChange = "Change Image", accept = "image/jpg, image/gif, image/png" )() ), EuiFormField()( EuiDropzone( /*files = S.files, */ onDrop = onDrop _)() ) ) def render(S: State) = CodeExample(code, "EuiForms")( <.div( <.h1("Forms"), <.h2("Basic Example"), renderBasicExample, <.h2("Horizontal Form"), renderBasicExampleHorizontal, <.h2("Inline Form"), renderBasicExampleInline, <.h2("Input Groups"), <.h3("Contiguous Form Elements"), renderInputGroupsContiguous, <.h3("Separate When Required"), renderInputGroupsSeparate, <.h2("Sizes"), renderSizes, <.h2("Supported Controls"), renderSupportedControls, <.h2("Notes"), renderNotes, <.h2("ComplexForms"), renderComplexForms, <.h2("Icons"), renderIcons(S), <.h2("Validation"), renderValidation(S), <.h2("File Upload"), renderFileUpload(S) ) ) } val component = ScalaComponent .builder[Unit]("EuiFormsDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiGlyphsDemo.scala ================================================ package demo.components.elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui.{EuiGlyph, Octicons, _} import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.TagOf import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.html.Div object EuiGlyphsDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { val renderButtons: TagOf[Div] = <.div( EuiButton(`type` = ButtonType.primary)(EuiGlyph(icon = Octicons.beaker)()), EuiButton(`type` = ButtonType.danger)(EuiGlyph(icon = Octicons.flame)()), EuiButton(`type` = ButtonType.success)(EuiGlyph(icon = Octicons.squirrel)()), EuiButton(`type` = ButtonType.warning)(EuiGlyph(icon = Octicons.bug)()) ) val renderLinkButtons: TagOf[Div] = <.div( EuiButton(`type` = ButtonType.link)(EuiGlyph(icon = Octicons.beaker)()), EuiButton(`type` = ButtonType.link_cancel)(EuiGlyph(icon = Octicons.flame)()), EuiButton(`type` = ButtonType.link_delete)(EuiGlyph(icon = Octicons.squirrel)()), EuiButton(`type` = ButtonType.link_text)(EuiGlyph(icon = Octicons.bug)()) ) val renderGlyphGrid: VdomNode = Octicons.values .grouped(10) .zipWithIndex .map { case (list, index) => EuiRow(key = s"row_$index") { list.map { icon => EuiCol(key = s"col_${icon.value}", sm = "1/10")( EuiCard(className = "code-example--glyph__icon")( EuiGlyph(key = icon.value, icon = icon)(), <.div( ^.className := "code-example--glyph__icon-name", icon.value ) ) ) }.toVdomArray } } .toVdomArray def renderGlyphColors(icon: Octicons): VdomNode = GlyphType.values .map( glyphType => <.div( ^.key := s"${glyphType.value}-${icon.value}", ^.className := "code-example__example-element--inline", EuiGlyph(icon = icon, `type` = glyphType)(), glyphType.value )) .toVdomArray def render = CodeExample(code, "EuiGlyphs")( <.div( <.h1("Glyphs"), <.h2("Basic Example"), EuiGlyph(icon = Octicons.thumbsup)(), <.h2("Icons"), renderGlyphGrid, <.h2("Colors"), renderGlyphColors(Octicons.heart), <.h2("Buttons"), renderButtons, <.h2("Link Buttons"), renderLinkButtons ) ) } val component = ScalaComponent .builder[Unit]("EuiGlyphsDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiInfo.scala ================================================ package demo package components package elementalui import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object EuiInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .builder[Unit]("EuiInfo") .render(P => { InfoTemplate(componentFilePath = "elementalui/")( <.div( <.h3("elemental-ui "), <.p( "scalajs-react wrapper for ", RedLink("elemental-ui", "http://elemental-ui.com") ), <.div( <.h4("Supported Version :"), <.span("0.5.4") ), <.div( <.h4("How To Use :"), <.p( "Follow the installation guide from :", RedLink("here", "https://github.com/elementalui/elemental"), <.br(), <.br(), "Configure elemental-ui context in your top level component :", RedLink( "example", "https://github.com/chandu0101/scalajs-react-components/blob/master/demo/src/main/scala/demo/pages/EuiPage.scala") ) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiMiscDemo.scala ================================================ package demo.components.elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js.`|` object EuiMiscDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State( currentPage: Int = 1, pageSize: Int = 25, plural: String = "Potatoes", singular: String = "Potato", total: Int = 123, limit: Int = 5 ) case class Backend($ : BackendScope[Unit, State]) { def handleClear(event: ReactEvent) = $.modState(identity) def handlePageSelect(page: Int) = $.modState(_.copy(currentPage = page)) def handleCurrentPageChange(event: ReactEventFromInput) = { val value = event.target.value.toInt match { case x if x < 0 => 0 case x => x } $.modState(_.copy(currentPage = value)) } def handlePageSizeChange(event: ReactEventFromInput) = { val value = event.target.value.toInt match { case x if x > 100 => 100 case x if x < 1 => 1 case x => x } $.modState(_.copy(pageSize = value)) } def handleTotalChange(event: ReactEventFromInput) = { val value = event.target.value.toInt match { case x if x > 1000 => 1000 case x if x < 1 => 1 case x => x } $.modState(_.copy(total = value)) } def handleLimitChange(event: ReactEventFromInput) = { val value = event.target.value.toInt match { case x if x < 1 => 1 case x => x } $.modState(_.copy(limit = value)) } def handlePluralChange(event: ReactEventFromInput) = { $.modState(_.copy(plural = event.target.value)) } def handleSingularChange(event: ReactEventFromInput) = $.modState(_.copy(singular = event.target.value)) def renderAlerts = <.div( EuiElementalAlert(`type` = AlertType.info)( <.strong("Info"), "Blah Blah Blah au au oeu oeau eouaoeu eou aouo u"), EuiElementalAlert(`type` = AlertType.success)( <.strong("Success"), "Blah Blah Blah au au oeu oeau eouaoeu eou aouo u"), EuiElementalAlert(`type` = AlertType.warning)( <.strong("Warning"), "Blah Blah Blah au au oeu oeau eouaoeu eou aouo u"), EuiElementalAlert(`type` = AlertType.danger)( <.strong("Error"), "Blah Blah Blah au au oeu oeau eouaoeu eou aouo u") ) def renderCards = <.div( EuiCard()("Hello, this is a very simple card, but blah blah blah"), EuiRow()( EuiCol(xs = "1/2")(EuiCard()("Use")), EuiCol(xs = "1/2")(EuiCard()("Me")) ), EuiRow()( EuiCol(xs = "1/3")(EuiCard()("In")), EuiCol(xs = "1/3")(EuiCard()("A")), EuiCol(xs = "1/3")(EuiCard()("Grid")) ) ) def renderPagination(S: State) = <.div( EuiPagination( currentPage = S.currentPage, onPageSelect = handlePageSelect _, pageSize = S.pageSize, plural = S.plural, singular = S.singular, total = S.total, limit = S.limit )(), EuiInputGroup()( EuiInputGroupSection(grow = true)( EuiFormField(label = "Current Page")( EuiFormInput( name = "currentPage", `type` = "number", value = S.currentPage: String | Int, onChange = handleCurrentPageChange _, placeholder = "Current Page" )() ) ), EuiInputGroupSection(grow = true)( EuiFormField(label = "Page Size")( EuiFormInput( name = "pageSize", `type` = "number", value = S.pageSize: String | Int, onChange = handlePageSizeChange _, placeholder = "Page Size" )() ) ), EuiInputGroupSection(grow = true)( EuiFormField(label = "Plural")( EuiFormInput( name = "plural", `type` = "number", value = S.plural: String | Int, onChange = handlePluralChange _, placeholder = "Plural" )() ) ), EuiInputGroupSection(grow = true)( EuiFormField(label = "Singular")( EuiFormInput( name = "singular", `type` = "number", value = S.singular: String | Int, onChange = handleSingularChange _, placeholder = "Singular" )() ) ), EuiInputGroupSection(grow = true)( EuiFormField(label = "Total")( EuiFormInput( name = "total", `type` = "number", value = S.total: String | Int, onChange = handleTotalChange _, placeholder = "Total" )() ) ), EuiInputGroupSection(grow = true)( EuiFormField(label = "Limit")( EuiFormInput( name = "limit", `type` = "number", value = S.limit: String | Int, onChange = handleLimitChange _, placeholder = "Limit" )() ) ) ) ) def renderPills = <.div( EuiPill(label = "Create", `type` = AlertType.success_inverted)(), EuiPill(label = "First Pill", `type` = AlertType.primary, onClear = handleClear _)(), EuiPill(label = "Second Pill", `type` = AlertType.primary, onClear = handleClear _)(), EuiPill(label = "Third Pill", `type` = AlertType.primary, onClear = handleClear _)(), EuiPill(label = "Clear All")() ) def render(S: State) = CodeExample(code, "EuiMisc")( <.div( <.h1("Miscellaneous"), <.h2("Alerts"), renderAlerts, <.h2("Cards"), renderCards, <.h2("Pagination"), renderPagination(S), <.h2("Pills"), renderPills ) ) } val component = ScalaComponent .builder[Unit]("EuiMiscDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiModalDemo.scala ================================================ package demo.components.elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.TagOf import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.html.Div import scala.scalajs.js.`|` object EuiModalDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State( modalIsOpen: Boolean = false, sizeModalIsOpen: Boolean = false, modalSize: ModalSize | Double = 0.0 ) case class Backend($ : BackendScope[Unit, State]) { def toggleModal(event: ReactEventFromHtml): Callback = $.modState(state => state.copy(modalIsOpen = !state.modalIsOpen)) def toggleSizeModal(size: ModalSize | Double)(event: ReactEventFromHtml): Callback = $.modState(state => state.copy(sizeModalIsOpen = !state.sizeModalIsOpen, modalSize = size)) def renderLiveDemo(state: State): TagOf[Div] = { <.div( EuiButton(onClick = toggleModal _)("Show it"), EuiModal( isOpen = state.modalIsOpen, backdropClosesModal = true, onCancel = toggleModal _ )( EuiModalHeader(text = "Modal Header")(), EuiModalBody()( EuiFormField(label = "Email")( EuiFormInput( `type` = "email", name = "email", required = true )() ), EuiFormField(label = "Password")( EuiFormInput( `type` = "password", name = "password", required = true )() ), <.p( "From the Wikipedia article", <.a( ^.href := "https://en.wikipedia.org/wiki/Elemental", ^.target := "_blank", "https://en.wikipedia.org/wiki/Elemental" ) ), <.p( "An elemental is a mythic being described in occult and alchemical works from around the time of the European Renaissance and particularly elaborated in the 16th century works of Paracelsus."), <.p( "There are four elemental categories: gnomes, undines, sylphs, and salamanders. These correspond to the Classical elements of antiquity: earth, water, air and fire. Aether (quintessence) was not assigned an elemental."), <.p( "Terms employed for beings associated with alchemical elements vary by source and gloss."), <.h2("History"), <.p( "The Paracelsian concept of elementals draws from several much older traditions in mythology and religion. Common threads can be found in folklore, animism, and anthropomorphism. Examples of creatures such as the Pygmy were taken from Greek mythology."), <.p( "The elements of earth, water, air, and fire, were classed as the fundamental building blocks of nature. This system prevailed in the Classical world and was highly influential in medieval natural philosophy. Although Paracelsus uses these foundations and the popular preexisting names of elemental creatures, he is doing so to present new ideas which expand on his own philosophical system. The homunculus is another example of a Paracelsian idea with roots in earlier alchemical, scientific, and folklore traditions."), <.h3("Paracelsus"), <.p( "In his 16th-century alchemical work Liber de Nymphis, sylphis, pygmaeis et salamandris et de caeteris spiritibus, Paracelsus identified mythological beings as belonging to one of the four elements. Part of the Philosophia Magna, this book was first printed in 1566 after Paracelsus' death. He wrote the book to \"describe the creatures that are outside the cognizance of the light of nature, how they are to be understood, what marvellous works God has created\". He states that there is more bliss in describing these \"divine objects\" than in describing fencing, court etiquette, cavalry, and other worldly pursuits."), <.p("The concept of elementals seems to have been conceived by Paracelsus in the 16th century, though he did not in fact use the term \"elemental\" or a German equivalent.[5] He regarded them not so much as spirits but as beings between creatures and spirits, generally being invisible to mankind but having physical and commonly humanoid bodies, as well as eating, sleeping, and wearing clothes like humans. Paracelsus gave common names for the elemental types, as well as correct names, which he seems to have considered somewhat more proper, \"recht namen\". He also referred to them by purely German terms which are roughly equivalent to \"water people,\" \"mountain people,\" and so on, using all the different forms interchangeably.") ), EuiModalFooter()( EuiButton(onClick = toggleModal _, `type` = ButtonType.primary)("Submit"), EuiButton(onClick = toggleModal _, `type` = ButtonType.link_cancel)("Cancel") ) ) ) } val renderStaticExample: TagOf[Div] = <.div( ^.className := "code-example", <.div( ^.className := "code-example__example", <.div( ^.className := "Modal-content", EuiModalHeader(text = "Modal Header")(), EuiModalBody()( EuiFormField(label = "Email")( EuiFormInput( `type` = "email", name = "email", required = true )() ), EuiFormField(label = "Password")( EuiFormInput( `type` = "password", name = "password", required = true )() ) ), EuiModalFooter()( EuiButton()("Submit"), EuiButton()("Cancel") ) ) ) ) def renderSizes(state: State): TagOf[Div] = { <.div( EuiButton(onClick = toggleSizeModal(ModalSize.small) _)("small"), EuiButton(onClick = toggleSizeModal(ModalSize.large) _)("large"), EuiButton(onClick = toggleSizeModal(768) _)("768"), EuiModal( isOpen = state.sizeModalIsOpen, onCancel = toggleSizeModal(ModalSize.small) _, backdropClosesModal = true, width = state.modalSize )( EuiModalHeader( text = s"${state.modalSize.toString}", showCloseButton = true, onClose = toggleSizeModal(ModalSize.small) _ )(), EuiModalBody()(<.p("…")) ) ) } def render(state: State): VdomElement = CodeExample(code, "EuiModal")( EuiContainer()( <.h1("Modal"), <.h2("Static Example"), renderStaticExample, <.h2("Live Demo"), renderLiveDemo(state), <.h2("Sizes"), renderSizes(state) ) ) } val component = ScalaComponent .builder[Unit]("EuiModalDemo") .initialState(State()) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/elementalui/EuiSpinnerDemo.scala ================================================ package demo.components.elementalui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.elementalui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object EuiSpinnerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("EuiSpinnerDemo") .render( P => CodeExample(code, "EuiSpinner")( <.div( <.h1("Spinner"), <.h2("Common Use Cases"), <.h3("Page Element"), EuiSpinner(size = SmMdLg.md)(), EuiSpinner(size = SmMdLg.md, `type` = DefaultPrimaryInverted.primary)(), EuiSpinner(size = SmMdLg.md, `type` = DefaultPrimaryInverted.inverted)(), <.h3("Inside Buttons"), EuiButton()(EuiSpinner()()), EuiButton(disabled = true)(EuiSpinner(`type` = DefaultPrimaryInverted.primary)(), "Saving"), EuiButton(`type` = ButtonType.primary)( EuiSpinner(`type` = DefaultPrimaryInverted.inverted)(), ("Submitting")), <.h3("Full Page Load"), EuiSpinner(size = SmMdLg.lg)() ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/GoogleMapBasic.scala ================================================ package demo package components package googlemap import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.GoogleMap import chandu0101.scalajs.react.components.fascades.LatLng import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapBasic { val code = GhPagesMacros.exampleSource // EXAMPLE:START val latlng = LatLng(16.3008, 80.4428) val component = ScalaComponent .builder[Unit]("BasicMap") .render( P => <.div( <.h2(^.cls := "mui-font-style-headline")("Basic Map"), CodeExample(code, "GoogleMapBasic")( GoogleMap(width = "600px", height = "500px", center = latlng, zoom = 8) ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/GoogleMapCustomMarkerIcon.scala ================================================ package demo package components package googlemap import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components._ import chandu0101.scalajs.react.components.fascades._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapCustomMarkerIcon { val code = GhPagesMacros.exampleSource // EXAMPLE:START val latlng = LatLng(-33.9, 151.2) /* url = image location size = This marker is 20 pixels wide by 32 pixels tall. origin = The origin for this image is 0,0. anchor = The anchor for this image is the base of the flagpole at 0,32. */ val image = Icon( url = "http://www.bookyourparis.com/images-site/beachflag.png", size = Size(20, 32), origin = Point(0, 0), anchor = Point(0, 32) ) /* Shapes define the clickable region of the icon. The type defines an HTML <area> element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes the poly by connecting to the first coordinate. */ val shape = Shape( coords = List(1, 1, 1, 20, 18, 20, 18, 1), tpe = "poly" ) val markers = List( Marker(position = LatLng(-33.890542, 151.274856), title = "Bondi Beach", icon = image), Marker(position = LatLng(-33.923036, 151.259052), title = "Coogee Beach", icon = image), Marker(position = LatLng(-34.028249, 151.157507), title = "Cronulla Beach", icon = image), Marker(position = LatLng(-33.80010128657071, 151.28747820854187), title = "Manly Beach", icon = image) ) val component = ScalaComponent .builder[Unit]("plain") .render(P => { <.div( <.h2(^.cls := "mui-font-style-headline")("Custom Marker Icon"), CodeExample(code, "GoogleMapCustomMarkerIcon")( GoogleMap(center = latlng, markers = markers, zoom = 10) ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/GoogleMapInfo.scala ================================================ package demo package components package googlemap import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapInfo { val component = ScalaComponent .builder[Unit]("googleMapInfo") .render(P => { InfoTemplate(componentFilePath = "maps/GoogleMap.scala")( <.h3("Google Map :"), <.p("Map component based on ", <.a(^.href := "https://developers.google.com/maps/documentation/javascript/")( "google map javascript api")) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/GoogleMapMarkerInfoWindow.scala ================================================ package demo package components package googlemap import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.GoogleMap import chandu0101.scalajs.react.components.fascades.{LatLng, Marker} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapMarkerInfoWindow { val code = GhPagesMacros.exampleSource // EXAMPLE:START val latlng = LatLng(-33.9, 151.2) // to add info window on click of marker just specify content field val markers = List( Marker(position = LatLng(-33.890542, 151.274856), title = "Bondi Beach", content = "

This is Bondi Beach

"), Marker(position = LatLng(-33.923036, 151.259052), title = "Coogee Beach", content = "

This is Coogee Beach

"), Marker(position = LatLng(-34.028249, 151.157507), title = "Cronulla Beach", content = "

This is Cronulla Beach

"), Marker(position = LatLng(-33.80010128657071, 151.28747820854187), title = "Manly Beach", content = "

This is Manly Beach

") ) val component = ScalaComponent .builder[Unit]("infowindow") .render(P => <.div( <.h2(^.cls := "mui-font-style-headline")("Marker InfoWindow"), CodeExample(code, "GoogleMapMarkerInfoWindow")( GoogleMap(center = latlng, markers = markers, zoom = 10) ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/GoogleMapMarkers.scala ================================================ package demo package components package googlemap import chandu0101.scalajs.react.components.GoogleMap import chandu0101.scalajs.react.components.fascades.{LatLng, Marker} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapMarkers { val code = """ | | val latlng = LatLng(-33.9 ,151.2) | | val markers = List( | Marker( position = LatLng(-33.890542,151.274856) ,title = "Bondi Beach" ), | Marker( position = LatLng(-33.923036,151.259052) ,title = "Coogee Beach" ), | Marker( position = LatLng(-34.028249,151.157507) ,title = "Cronulla Beach" ), | Marker( position = LatLng(-33.80010128657071,151.28747820854187) ,title = "Manly Beach" ) | ) | GoogleMap(center = latlng ,markers = markers ,zoom = 10) | """.stripMargin val component = ScalaComponent .builder[Unit]("mapmarkers") .render(P => { <.div( <.h2(^.cls := "mui-font-style-headline")("Markers"), CodeExample(code, "GoogleMapMarkers")( GoogleMap(center = latlng, markers = markers, zoom = 10) ) ) }) .build val latlng = LatLng(-33.9, 151.2) val markers = List( Marker(position = LatLng(-33.890542, 151.274856), title = "Bondi Beach"), Marker(position = LatLng(-33.923036, 151.259052), title = "Coogee Beach"), Marker(position = LatLng(-34.028249, 151.157507), title = "Cronulla Beach"), Marker(position = LatLng(-33.80010128657071, 151.28747820854187), title = "Manly Beach") ) def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/googlemap/MutableGoogleMapMarkers.scala ================================================ package demo.components package googlemap import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.GoogleMap import chandu0101.scalajs.react.components.fascades.{LatLng, Marker} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object MutableGoogleMapMarkers { val code = GhPagesMacros.exampleSource // EXAMPLE:START val markers = List( Marker(position = LatLng(52.2, 21), title = "Warsaw"), Marker(position = LatLng(51.23, 22.5), title = "Lublin") ) case class State(lat: Double, lng: Double, markers: List[Marker]) class Backend(t: BackendScope[Unit, State]) { def changeLat(event: ReactEventFromInput): Callback = { t.modState(_.copy(lat = event.target.value.toDouble)) } def changeLng(event: ReactEventFromInput): Callback = { t.modState(_.copy(lng = event.target.value.toDouble)) } val addMarker: Callback = t.modState(s => s.copy(markers = s.markers :+ Marker(LatLng(s.lat, s.lng), s"Marker ${s.markers.size}"))) def render(S: State) = <.div( <.h2(^.cls := "mui-font-style-headline")("Mutable markers"), CodeExample(code, "MutableGoogleMapMarkers")( <.div( <.input(^.`type` := "text", ^.value := S.lat.toString, ^.onChange ==> changeLat), <.input(^.`type` := "text", ^.value := S.lng.toString, ^.onChange ==> changeLng), <.button(^.onClick --> addMarker, "Add marker") ), GoogleMap(center = LatLng(S.lat, S.lng), markers = S.markers, zoom = 10) ) ) } val component = ScalaComponent .builder[Unit]("mapmarkers") .initialState(State(52.2, 21, markers)) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MobileTearSheet.scala ================================================ package demo package components package materialui import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object MobileTearSheet { object Style extends StyleSheet.Inline { import dsl._ val root = style( marginBottom(24 px), marginRight(24 px), width(360 px) ) val container = style( border :=! "solid 1px #d9d9d9", height :=! "500px", overflow.hidden ) val bottomTear = style( display.block, position.relative, marginTop :=! "-10px", width(360 px) ) } case class Backend($ : BackendScope[Unit, Unit]) { def render(C: PropsChildren) = { <.div( Style.root, <.div( Style.container, C ), <.img(Style.bottomTear, ^.src := Images.bottomTearImage.toString) ) } } val component = ScalaComponent .builder[Unit]("MobileTearSheet") .renderBackendWithChildren[Backend] .build def apply(children: VdomNode*) = component(children: _*) } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiAppBarDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiAppBarDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiAppBarDemo") .render( P => <.div( CodeExample(code, "MuiAppBar")( MuiAppBar( title = js.defined("Title"), onLeftIconButtonClick = CallbackDebug.f1("onLeftIconButtonClick"), onRightIconButtonClick = CallbackDebug.f1("onRightIconButtonClick"), onTitleClick = CallbackDebug.f1("onTitleClick"), showMenuIconButton = true )() ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiAutoCompleteDemo.scala ================================================ package demo.components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiAutoCompleteDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val fruit = js.Array( "Apple", "Apricot", "Avocado", "Banana", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry", "Boysenberry", "Blood Orange", "Cantaloupe", "Currant", "Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Clementine", "Damson", "Date", "Dragonfruit", "Durian", "Elderberry", "Feijoa", "Fig", "Goji berry", "Gooseberry", "Grape", "Grapefruit", "Guava", "Honeydew", "Huckleberry", "Jabouticaba", "Jackfruit", "Jambul", "Jujube", "Juniper berry", "Kiwi fruit", "Kumquat", "Lemon", "Lime", "Loquat", "Lychee", "Nectarine", "Mango", "Marion berry", "Melon", "Miracle fruit", "Mulberry", "Mandarine", "Olive", "Orange", "Papaya", "Passionfruit", "Peach", "Pear", "Persimmon", "Physalis", "Plum", "Pineapple", "Pumpkin", "Pomegranate", "Pomelo", "Purple Mangosteen", "Quince", "Raspberry", "Raisin", "Rambutan", "Redcurrant", "Salal berry", "Satsuma", "Star fruit", "Strawberry", "Squash", "Salmonberry", "Tamarillo", "Tamarind", "Tomato", "Tangerine", "Ugli fruit", "Watermelon" ) val colors = js.Array("Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Black", "White") val onNewRequest: (String, Int) => Callback = (chosen, idx) => Callback.info(s"onNewRequest: chosen: $chosen, idx: $idx") val onUpdateInput: (String, js.Array[String], js.Object) => Callback = (search, ds, params) => Callback.info(s"onUpdateInput: search $search") val component = ScalaComponent .builder[Unit]("MuiAutoCompleteDemo") .render(P => CodeExample(code, "MuiAutoComplete")( <.div( MuiAutoComplete( floatingLabelText = js.defined("Type t, fuzzy search"), filter = js.defined(MuiAutoCompleteFilters.fuzzyFilter), dataSource = fruit, anchorOrigin = Origin(Vertical.bottom, Horizontal.middle), onNewRequest = onNewRequest, onUpdateInput = onUpdateInput )() ), <.div( MuiAutoComplete( floatingLabelText = js.defined("Type r, case insensitive"), filter = js.defined(MuiAutoCompleteFilters.caseInsensitiveFilter), dataSource = colors, onNewRequest = onNewRequest, onUpdateInput = onUpdateInput )() ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiAvatarDemo.scala ================================================ package demo.components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiAvatarDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START import Mui.Styles.colors import Mui.SvgIcons val component = ScalaComponent .builder[Unit]("MuiAvatarDemo") .renderStatic( <.div( CodeExample(code, "MuiAvatar")( MuiAvatar( key = "1", backgroundColor = colors.grey700, color = colors.deepPurple200, icon = js.defined(SvgIcons.ActionGrade()()) )(), MuiAvatar(key = "2", size = js.defined(120), backgroundColor = colors.lime600)( js.defined("Ø")), MuiAvatar(key = "3")(js.defined("one")), MuiAvatar(key = "4")(js.defined("two")), MuiAvatar(key = "5", backgroundColor = colors.red400)(js.defined(SvgIcons.ActionFace()())) ) ) ) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiButtonsDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object MuiButtonsDemo { val code = GhPagesMacros.exampleSource object Style extends StyleSheet.Inline { import dsl._ val container = style(maxWidth(1024 px)) val content = style( display.flex, padding(30.px), flexDirection.column, alignItems.center ) } // EXAMPLE:START import Mui.SvgIcons.ActionGrade val component = ScalaComponent .builder[Unit]("MuiButtonsDemo") .render( P => CodeExample(code, "MuiButtons")( <.div( Style.container, <.h3("Buttons"), MuiTabs()( MuiTab(key = "tab1", label = js.defined("Flat Buttons"))( <.div( Style.content, MuiFlatButton( key = "flat1", label = "Default", onBlur = CallbackDebug.f1("onBlur"), onFocus = CallbackDebug.f1("onFocus"), onKeyboardFocus = CallbackDebug.f2("onKeyboardFocus"), onKeyDown = CallbackDebug.f1("onKeyDown"), onKeyUp = CallbackDebug.f1("onKeyUp"), onClick = CallbackDebug.f1("onClick"), onMouseLeave = CallbackDebug.f1("onMouseLeave"), onTouchStart = CallbackDebug.f1("onTouchStart"), onMouseEnter = CallbackDebug.f1("onMouseEnter") )(), MuiFlatButton(key = "flat2", label = "Primary", primary = true)(), MuiFlatButton(key = "flat3", label = "Secondary", secondary = true)(), MuiFlatButton(key = "flat4", label = "Disabled", disabled = true)() ) ), MuiTab(key = "tab2", label = js.defined("Raised Buttons"))( <.div( Style.content, MuiRaisedButton(key = "raised1", label = "Default")(), MuiRaisedButton(key = "raised2", label = "Primary", primary = true)(), MuiRaisedButton(key = "raised3", label = "Secondary", secondary = true)(), MuiRaisedButton(key = "raised4", label = "Disabled", disabled = true)() ) ), MuiTab(key = "tab3", label = js.defined("Floating Action Buttons"))( <.div( Style.content, MuiFloatingActionButton(key = "floating1")(ActionGrade()()), MuiFloatingActionButton(key = "floating2", mini = true)(ActionGrade()()), MuiFloatingActionButton(key = "floating3", secondary = true)(ActionGrade()()), MuiFloatingActionButton(key = "floating4", secondary = true, mini = true)( ActionGrade()()) ) ), MuiTab(key = "tab4", label = js.defined("Icon Buttons"))( <.div( Style.content, MuiIconButton(onClick = CallbackDebug.f1("onClick"))(ActionGrade()()) ) ) ) ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiDatePickerDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiDatePickerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiDatePickerDemo") .render(P => { <.div( CodeExample(code, "MuiDatePicker")( MuiDatePicker( hintText = js.defined("Portrait Dialog"), onChange = CallbackDebug.f2("onChange"), onDismiss = CallbackDebug.f0("onDismiss"), onFocus = CallbackDebug.f1("onFocus"), onShow = CallbackDebug.f0("onShow"), onClick = CallbackDebug.f1("onClick") )(), MuiDatePicker( hintText = js.defined("Landscape Dialog"), mode = PortraitLandscape.landscape )() ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiDialogDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiDialogDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State(isOpen: Boolean) class Backend($ : BackendScope[_, State]) { val open = $.setState(State(true)) val close = $.setState(State(false)) def handleDialogCancel: ReactEvent => Callback = e => close >> Callback.info("Cancel Clicked") def handleDialogSubmit: ReactEvent => Callback = e => close >> Callback.info("Submit Clicked") val openDialog: ReactEvent => Callback = e => open >> Callback.info("Opened") def render(S: State) = { val actions = VdomArray( MuiFlatButton(key = "1", label = "Cancel", secondary = true, onClick = handleDialogCancel)(), MuiFlatButton(key = "2", label = "Submit", secondary = true, onClick = handleDialogSubmit)() ) <.div( CodeExample(code, "MuiDialog")( <.div( MuiDialog( title = js.defined("Dialog With Actions"), actions = actions, open = S.isOpen, onRequestClose = CallbackDebug.f1("onRequestClose") )( "Dialog example with floating buttons" ), MuiRaisedButton(label = "Dialog", onClick = openDialog)() ) ) ) } } val component = ScalaComponent .builder[Unit]("MuiDialogDemo") .initialState(State(isOpen = false)) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiDrawerDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiDrawerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State( selected: js.UndefOr[String], isOpen: Boolean, isDocked: Boolean, isRight: Boolean ) case class Choice(id: String, text: String) val choices = Seq( Choice("1", "First option"), Choice("2", "Second option"), Choice("3", "Third option"), Choice("4", "Fourth option") ) class Backend($ : BackendScope[Unit, State]) { val toggleOpenCb: Callback = $.modState(s => s.copy(isOpen = !s.isOpen)) val toggleOpen: (ReactMouseEvent, Boolean) => Callback = (e, b) => toggleOpenCb val toggleDocked: (ReactMouseEvent, Boolean) => Callback = (e, b) => $.modState(s => s.copy(isDocked = !s.isDocked)) val toggleRight: (ReactMouseEvent, Boolean) => Callback = (e, b) => $.modState(s => s.copy(isRight = !s.isRight)) val onRequestChange: (Boolean, String) => Callback = (open, reason) => Callback.info(s"onRequestChange: open: $open, reason: $reason") >> toggleOpenCb val selectItem: String => ReactEvent => Callback = id => e => $.modState(s => s.copy(selected = id)) def render(S: State) = { <.div( CodeExample(code, "MuiDrawer")( <.div( MuiDrawer( onRequestChange = onRequestChange, openSecondary = S.isRight, open = S.isOpen, docked = S.isDocked )( /* hack in a cheesy centered avatar */ MuiAvatar( key = "avatar", size = js.defined(112), backgroundColor = Mui.Styles.colors.red400, style = js.Dynamic.literal(margin = "auto", display = "block", padding = "10px") )(js.defined(":D")), choices .map( c => MuiMenuItem( key = c.id, primaryText = js.defined(c.text), checked = S.selected == js.defined(c.id), onClick = selectItem(c.id) )()) .toVdomArray ), MuiToggle(key = "toggle1", toggled = S.isOpen, label = js.defined("Show drawer"), onToggle = toggleOpen)(), MuiToggle(key = "toggle2", toggled = S.isDocked, label = js.defined("Show docked"), onToggle = toggleDocked)(), MuiToggle(key = "toggle3", toggled = S.isRight, label = js.defined("Show on right side"), onToggle = toggleRight)() ) ) ) } } val component = ScalaComponent .builder[Unit]("MuiDrawerDemo") .initialState( State( selected = js.undefined, isOpen = false, isDocked = false, isRight = false ) ) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiDropDownMenuDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.annotation.ScalaJSDefined object MuiDropDownMenuDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START class Item(val id: String, val name: String) extends js.Object val items: Seq[Item] = Seq( new Item("1", "Never"), new Item("2", "Every Night"), new Item("3", "Weeknights"), new Item("4", "Weekends"), new Item("5", "Weekly") ) case class Backend($ : BackendScope[Unit, Item]) { val onChange: (TouchTapEvent, Int, Item) => Callback = (e, idx, value) => $.setState(value) >> Callback.info(s"idx: $idx, value: $value") def render(chosen: Item) = <.div( CodeExample(code, "MuiDropDownMenu")( MuiDropDownMenu[Item]( onChange = onChange, value = chosen )( items .map( item => MuiMenuItem[Item](key = item.id, value = item, primaryText = js.defined(item.name))() ) .toVdomArray ) ) ) } val component = ScalaComponent .builder[Unit]("MuiDropDownMenuDemo") .initialState(items.head) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiInfo.scala ================================================ package demo package components package materialui import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ object MuiInfo { object Style extends StyleSheet.Inline { import dsl._ val content = style( textAlign.center, fontSize(30.px), paddingTop(40.px) ) } val component = ScalaComponent .builder[Unit]("MuiInfo") .render(P => { InfoTemplate(componentFilePath = "materialui/package.scala")( <.div( <.h3("Material-ui "), <.p( "scalajs-react wrapper for ", RedLink("material-ui", "http://material-ui.com/#/") ), <.div( <.h4("Supported Version :"), <.span("0.18.1") ), <.div( <.h4("How To Use :"), <.p( "Follow the installation guide from :", RedLink("here", "https://github.com/callemall/material-ui#installation"), <.br(), <.br(), "Configure material-ui context in your top level component :", RedLink( "example", "https://github.com/chandu0101/scalajs-react-components/blob/master/demo/src/main/scala/demo/pages/MuiPage.scala") ) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiListDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiListDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START import Mui.SvgIcons._ val component = ScalaComponent .builder[Unit]("MuiListDemo") .render(P => { <.div( CodeExample(code, "MuiList")( MobileTearSheet( MuiList(key = "list1")( MuiListItem( key = "item1", leftIcon = js.defined(ContentInbox()()), onKeyboardFocus = CallbackDebug.f2("onKeyboardFocus"), onMouseLeave = CallbackDebug.f1("onMouseLeave"), onMouseEnter = CallbackDebug.f1("onMouseEnter"), onNestedListToggle = CallbackDebug.f1("onNestedListToggle"), onTouchStart = CallbackDebug.f1("onTouchStart"), onClick = CallbackDebug.f1("onClick") )("Inbox"), MuiListItem(key = "item2", primaryText = js.defined("Starred"), leftIcon = js.defined(ActionGrade()()))(), MuiListItem(key = "item3", primaryText = js.defined("Sent Mail"), leftIcon = js.defined(ContentSend()()))(), MuiListItem(key = "item4", primaryText = js.defined("Drafts"), leftIcon = js.defined(ContentDrafts()()))() ), MuiDivider(key = "div")(), MuiList(key = "list2")( MuiListItem(key = "item1", primaryText = js.defined("All mail"), rightIcon = js.defined(ActionInfo()()))(), MuiListItem(key = "item2", primaryText = js.defined("Trash"), rightIcon = js.defined(ActionInfo()()))(), MuiListItem(key = "item3", primaryText = js.defined("Spam"), rightIcon = js.defined(ActionInfo()()))(), MuiListItem(key = "item4", primaryText = js.defined("Follow up"), rightIcon = js.defined(ActionInfo()()))() ) ) ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiMenuDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.| object MuiMenuDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START sealed abstract class Value object Value { case object Bold extends Value case object Italic extends Value case object Under extends Value case object Strike extends Value case object Super extends Value case object Sub extends Value case object Align extends Value } case class State(isOpen: Boolean, values: js.Array[Value]) class Backend($ : BackendScope[Unit, State]) { val toggleOpen: ReactEvent => Callback = e => $.modState(s => s.copy(isOpen = !s.isOpen)) val onChange: (TouchTapEvent, Value | js.Array[Value]) => Callback = (e, values) => values match { case v: Value => $.modState(_.copy(values = js.Array(v))) case vs: js.Array[Value] => $.modState(_.copy(values = vs)) } def renderOpen(S: State) = { <.div( MuiFlatButton( label = "Close menu", onClick = toggleOpen )(), MuiMenu[Value]( width = 320, value = S.values, desktop = true, multiple = true, onEscKeyDown = toggleOpen, onChange = js.defined(onChange) )( MuiMenuItem(value = Value.Bold, secondaryText = js.defined("⌘B"))("Bold"), MuiMenuItem(value = Value.Italic, secondaryText = js.defined("⌘I"))("Italic"), MuiMenuItem(value = Value.Under, secondaryText = js.defined("⌘U"))("Underline"), MuiMenuItem(value = Value.Strike, secondaryText = js.defined("Alt+Shift+5"))( "Strikethrough"), MuiMenuItem(value = Value.Super, secondaryText = js.defined("⌘."))("Superscript"), MuiMenuItem(value = Value.Sub, secondaryText = js.defined("⌘,"))("Subscript"), MuiDivider()(), MuiMenuItem(value = Value.Align)("Align") ) ) } def renderClosed(S: State) = MuiFlatButton( label = "open menu", onClick = toggleOpen )() def render(S: State) = CodeExample(code, "MuiMenu")( if (S.isOpen) renderOpen(S) else renderClosed(S), s"Has chosen: ${S.values.mkString(", ")}" ) } val component = ScalaComponent .builder[Unit]("MuiMenuDemo") .initialState(State(isOpen = false, values = js.Array[Value](Value.Bold))) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiPaperDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object MuiPaperDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiPaperDemo") .render(P => { <.div( CodeExample(code, "MuiPaper")( <.div( Style.paperContainer, MuiPaper(zDepth = ZDepth._1)(<.p("zDepth = 1")), MuiPaper(zDepth = ZDepth._2)(<.p("zDepth = 2")), MuiPaper(zDepth = ZDepth._3)(<.p("zDepth = 3")), MuiPaper(zDepth = ZDepth._4)(<.p("zDepth = 4")), MuiPaper(zDepth = ZDepth._5)(<.p("zDepth = 5")), MuiPaper(zDepth = ZDepth._1, rounded = false)(<.p("rounded = false")), MuiPaper(zDepth = ZDepth._2, rounded = false)(<.p("rounded = false")), MuiPaper(zDepth = ZDepth._3, rounded = false)(<.p("rounded = false")), MuiPaper(zDepth = ZDepth._4, rounded = false)(<.p("rounded = false")), MuiPaper(zDepth = ZDepth._5, rounded = false)(<.p("rounded = false")), MuiPaper(zDepth = ZDepth._1, circle = true)(<.p("circle = true")), MuiPaper(zDepth = ZDepth._2, circle = true)(<.p("circle = true")), MuiPaper(zDepth = ZDepth._3, circle = true)(<.p("circle = true")), MuiPaper(zDepth = ZDepth._4, circle = true)(<.p("circle = true")), MuiPaper(zDepth = ZDepth._5, circle = true)(<.p("circle = true")) ) ) ) }) .build object Style extends StyleSheet.Inline { import dsl._ val paperContainer = style( display.flex, flexWrap.wrap, paddingTop(20.px), unsafeChild("div")( margin(15 px), unsafeChild("p")( padding(15 px) ) ) ) } // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiPopoverDemo.scala ================================================ package demo.components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.html.Div import scala.scalajs.js object MuiPopoverDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START private case class OriginChoice[T](ts: Seq[T], label: String)(set: T => Callback, fromState: State => T, str: T => String) { val action: (ReactEvent, Int, String) => Callback = (e, idx, any) => set(ts(idx)) val items: VdomNode = ts.map(t => MuiMenuItem[String](value = str(t), primaryText = js.defined(str(t)))()) .toVdomArray def menu(S: State): VdomElement = <.div( ^.key := label, <.label(label, ^.width := "400px"), MuiDropDownMenu[String](onChange = action, value = str(fromState(S)))(items) ) } case class State(open: Boolean, target: Origin, anchor: Origin) private case class Backend($ : BackendScope[Unit, State]) { var ref: js.UndefOr[Div] = js.undefined val toggle: Callback = $.modState(s => s.copy(open = !s.open)) val anchorH = OriginChoice(Horizontal.values, "Change anchor horizontal")( t => $.modState(s => s.copy(anchor = s.anchor.copy(horizontal = t))), _.anchor.horizontal, _.value ) val anchorV = OriginChoice(Vertical.values, "Change anchor vertical")( t => $.modState(s => s.copy(anchor = s.anchor.copy(vertical = t))), _.anchor.vertical, _.value ) val targetH = OriginChoice(Horizontal.values, "Change target horizontal")( t => $.modState(s => s.copy(target = s.target.copy(horizontal = t))), _.target.horizontal, _.value ) val targetV = OriginChoice(Vertical.values, "Change target vertical")( t => $.modState(s => s.copy(target = s.target.copy(vertical = t))), _.target.vertical, _.value ) val originChoices = Seq(anchorV, anchorH, targetV, targetH) def render(S: State) = { <.div( CodeExample(code, "MuiPopoverDemo")( <.div( <.div( MuiRaisedButton( onClick = (e: ReactEvent) => toggle, label = "Click on me to show a popover" )() ).ref(ref = _), originChoices.map(_.menu(S)).toVdomArray, MuiPopover( open = S.open, anchorEl = ref, anchorOrigin = S.anchor, targetOrigin = S.target, onRequestClose = (s: String) => toggle )( <.div( ^.padding := "20px", <.h2("here is an arbitrary popover"), <.p("Hi - here is some content"), MuiRaisedButton( primary = true, label = "here is a button", onClick = (e: ReactEvent) => toggle )() ) ) ) ) ) } } private val component = ScalaComponent .builder[Unit]("MuiPopoverDemo") .initialState( State( open = false, target = Origin(Vertical.top, Horizontal.left), anchor = Origin(Vertical.bottom, Horizontal.left) )) .renderBackend[Backend] .build // EXAMPLE:END def apply(): VdomElement = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiProgressDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ object MuiProgressDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiProgressDemo") .render(P => { <.div( CodeExample(code, "Progress Bars")( MuiCircularProgress(mode = DeterminateIndeterminate.determinate, value = 50.0)(), MuiCircularProgress(mode = DeterminateIndeterminate.indeterminate, size = 0.5)(), MuiCircularProgress(mode = DeterminateIndeterminate.indeterminate)(), MuiCircularProgress(mode = DeterminateIndeterminate.indeterminate, size = 2.0)(), MuiLinearProgress(mode = DeterminateIndeterminate.indeterminate)() ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiSelectFieldDemo.scala ================================================ package demo.components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Scala.Unmounted import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.annotation.ScalaJSDefined object MuiSelectFieldDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START class ChoiceId(val value: String) extends js.Object class Choice(val id: ChoiceId, val text: String) extends js.Object case class Backend($ : BackendScope[Seq[Choice], Choice]) { val onChange: (TouchTapEvent, Int, Choice) => Callback = (e, idx, a) => $.setState(a) >> Callback.info(s"selected $a") def render(choices: Seq[Choice], selected: Choice): VdomElement = CodeExample(code, "MuiSelectField")( MuiSelectField[Choice]( value = selected, onBlur = CallbackDebug.f1("onBlur"), onFocus = CallbackDebug.f1("onFocus"), onChange = onChange )( choices .map( c => MuiMenuItem[Choice](key = c.id.value, value = c, primaryText = js.defined(c.text))() ) .toVdomArray ) ) } private val component = ScalaComponent .builder[Seq[Choice]]("MuiSelectFieldDemo") .initialStateFromProps(_.head) .renderBackend[Backend] .build def apply(): Unmounted[Seq[Choice], Choice, Backend] = component( Seq( new Choice(new ChoiceId("1"), "Never"), new Choice(new ChoiceId("2"), "Every Night"), new Choice(new ChoiceId("3"), "Weeknights"), new Choice(new ChoiceId("4"), "Weekends"), new Choice(new ChoiceId("5"), "Weekly") ) ) // EXAMPLE:END } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiSliderDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui.MuiSlider import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object MuiSliderDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiSliderDemo") .render(P => { val onChange: (ReactMouseEvent, Double) => Callback = (e, v) => Callback.info(s"chose value: $v") <.div( CodeExample(code, "MuiSlider")( MuiSlider(name = "slider1", onChange = onChange)(), MuiSlider(name = "slider2", onChange = onChange, defaultValue = 0.5)(), MuiSlider(name = "slider1", onChange = onChange, value = 0.3, disabled = true)() ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiSnackBarDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom import scala.scalajs.js object MuiSnackbarDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START class Backend($ : BackendScope[_, Boolean]) { val close = $.setState(false) val open = $.setState(true) val undoAdd: ReactEvent => Callback = e => close >> Callback(dom.window.alert("We removed Event from your calendar")) val closeRequested: String => Callback = reason => close >> Callback.info(s"onRequestClose: $reason") val toggleSnack: ReactEvent => Callback = e => $.modState(!_) def render(isOpen: Boolean) = CodeExample(code, "MuiSnackBar")( <.div( MuiSnackbar( autoHideDuration = js.defined(5000), message = "Event added to your calendar", action = js.defined("undo"), onActionClick = undoAdd, onRequestClose = closeRequested, open = isOpen )(), MuiRaisedButton( label = "Add event to calendar", onClick = toggleSnack )().unless(isOpen) ) ) } val component = ScalaComponent .builder[Unit]("MuiSnackBar") .initialState(false) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiSvgIconDemo.scala ================================================ package demo.components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.{Px, Reusability} import japgolly.scalajs.react.vdom.TagOf import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom.html.Div import scala.scalajs.js object MuiSvgIconDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Props(icons: js.Array[(String, MuiSvgIcon)]) case class State(accepts: Accepts, hovered: js.UndefOr[String]) case class Accepts(search: js.UndefOr[String]) { private val lower = search map (_.toLowerCase) def apply(name: String): Boolean = lower forall name.toLowerCase.contains } case class Backend($ : BackendScope[Props, State]) { implicit val r0 = Reusability.by_==[Props] implicit val r1 = Reusability.by_==[Accepts] def lookupIcon(name: String): MuiSvgIcon = { val lookup = Mui.SvgIcons.asInstanceOf[js.Dynamic] lookup.selectDynamic(name).asInstanceOf[MuiSvgIcon] } val select: String => ReactMouseEventFromHtml => Callback = name => e => $.modState(_.copy(hovered = name)) val unselect: ReactMouseEventFromHtml => Callback = e => $.modState(_.copy(hovered = js.undefined)) val onSearchChange: (ReactEventFromInput, String) => Callback = (e, str) => { e.persist() $.modState(_.copy(accepts = Accepts(e.target.value))) } /* rendering all icons turned out to be expensive, so * we cache things based on search string */ val renderedIconsPx: Px[VdomNode] = Px.callback($.props zip $.state.map(_.accepts)).withReuse.autoRefresh.map { case (p, accepts) => p.icons.collect { case (name, icon) if accepts(name) => icon.apply( key = name, style = js.Dynamic.literal(width = "30px", height = "30px"), hoverColor = Mui.Styles.colors.amber500, onMouseEnter = select(name), onMouseLeave = unselect, viewBox = "0 0 30 30" )() }.toVdomArray } def render(P: Props, S: State): TagOf[Div] = <.div( CodeExample(code, "MuiSvgIcons")( <.div( <.h4(s"Current icon: ${S.hovered.getOrElse("None")}"), <.label("Search: "), MuiTextField(name = "search", value = S.accepts.search, onChange = js.defined(onSearchChange))() ), <.div( ^.height := "300px", ^.overflowY := "scroll", renderedIconsPx.value() ) ) ) } val component = ScalaComponent .builder[Props]("MuiSvgIconDemo") .initialState(State(Accepts(js.undefined), js.undefined)) .renderBackend[Backend] .build val icons: js.Array[(String, MuiSvgIcon)] = js.Array( "PlacesRvHookup" -> MuiSvgIcons.PlacesRvHookup, "PlacesSmokeFree" -> MuiSvgIcons.PlacesSmokeFree, "PlacesSmokingRooms" -> MuiSvgIcons.PlacesSmokingRooms, "PlacesSpa" -> MuiSvgIcons.PlacesSpa, "SocialCake" -> MuiSvgIcons.SocialCake, "SocialDomain" -> MuiSvgIcons.SocialDomain, "SocialGroupAdd" -> MuiSvgIcons.SocialGroupAdd, "SocialGroup" -> MuiSvgIcons.SocialGroup, "SocialLocationCity" -> MuiSvgIcons.SocialLocationCity, "SocialMoodBad" -> MuiSvgIcons.SocialMoodBad, "SocialMood" -> MuiSvgIcons.SocialMood, "SocialNotificationsActive" -> MuiSvgIcons.SocialNotificationsActive, "SocialNotificationsNone" -> MuiSvgIcons.SocialNotificationsNone, "SocialNotificationsOff" -> MuiSvgIcons.SocialNotificationsOff, "SocialNotificationsPaused" -> MuiSvgIcons.SocialNotificationsPaused, "SocialNotifications" -> MuiSvgIcons.SocialNotifications, "SocialPages" -> MuiSvgIcons.SocialPages, "SocialPartyMode" -> MuiSvgIcons.SocialPartyMode, "SocialPeopleOutline" -> MuiSvgIcons.SocialPeopleOutline, "SocialPeople" -> MuiSvgIcons.SocialPeople, "SocialPersonAdd" -> MuiSvgIcons.SocialPersonAdd, "SocialPersonOutline" -> MuiSvgIcons.SocialPersonOutline, "SocialPerson" -> MuiSvgIcons.SocialPerson, "SocialPlusOne" -> MuiSvgIcons.SocialPlusOne, "SocialPoll" -> MuiSvgIcons.SocialPoll, "SocialPublic" -> MuiSvgIcons.SocialPublic, "SocialSchool" -> MuiSvgIcons.SocialSchool, "SocialSentimentDissatisfied" -> MuiSvgIcons.SocialSentimentDissatisfied ) // EXAMPLE:END def apply() = component(Props(icons)) } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiSwitchesDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object MuiSwitchesDemo { object Style extends StyleSheet.Inline { import dsl._ val container = style(maxWidth(1024 px)) val content = style( display.flex, padding(30.px), flexDirection.column, alignItems.center ) } val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiSwitchesDemo") .render( P => CodeExample(code, "MuiSwitches")( <.div( Style.container, <.h3("Switches"), MuiTabs()( MuiTab(label = js.defined("Checkbox"))( <.div( Style.content, MuiCheckbox( name = "checkboxName1", value = 1, label = js.defined("went for a run today") )(), MuiCheckbox( name = "checkboxName2", value = "checkboxValue2", label = js.defined("feed the dog") )(), MuiCheckbox( name = "checkboxName3", value = "checkboxValue3", label = js.defined("built a house on the moon"), disabled = true )() ) ), MuiTab(label = js.defined("RadioButton"))( <.div( Style.content, MuiRadioButtonGroup(name = "shipspeed", defaultSelected = js.defined("not_light"))( MuiRadioButton(value = "light", label = js.defined("prepare for light speed"))(), MuiRadioButton(value = "no_light", label = js.defined("light speed too slow"))(), MuiRadioButton(value = "ludicrous", label = js.defined("go to ludicrous speed"), disabled = true)() ) ) ), MuiTab(label = js.defined("Toggle"))( <.div( Style.content, MuiToggle(name = "toggleName1", value = "togglevalue1", label = js.defined("active thrusters"))(), MuiToggle(name = "toggleName2", value = "togglevalue2", label = js.defined("auto-pilot"), defaultToggled = true)(), MuiToggle(name = "toggleName3", value = "togglevalue3", label = js.defined("initiate self-destruct sequence"), disabled = true)() ) ) ) ) )) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiTableDemo.scala ================================================ package demo.components.materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.`|` object MuiTableDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State( fixedHeader: Boolean, fixedFooter: Boolean, stripedRows: Boolean, showRowHover: Boolean, selectable: Boolean, multiSelectable: Boolean, enableSelectAll: Boolean, deselectOnClickaway: Boolean, height: String, selected: String | js.Array[Int] ) case class Backend($ : BackendScope[Unit, State]) { val onRowSelection: String | js.Array[Int] => Callback = rows => $.modState(_.copy(selected = rows)) >> Callback.info(s"selected $rows") val toggleMultiSelectable: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(multiSelectable = b)) val toggleEnableSelectAll: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(enableSelectAll = b)) val toggleDeselectOnClickaway: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(deselectOnClickaway = b)) val toggleSelectable: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(selectable = b)) val toggleFixedHeader: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(fixedHeader = b)) val toggleFixedFooter: (ReactEvent, Boolean) => Callback = (e, b) => $.modState(_.copy(fixedFooter = b)) val colNames = MuiTableRow()( MuiTableHeaderColumn(tooltip = "The ID")("ID"), MuiTableHeaderColumn(tooltip = "The Name")("Name"), MuiTableHeaderColumn(tooltip = "The Status")("Status") ) case class Person(id: String, name: String, status: String) val persons = List( Person("1", "John Smith", "Employed"), Person("2", "Randal White", "Unemployed"), Person("4", "Steve Brown", "Employed"), Person("6", "Samuel Roberts", "Unemployed"), Person("7", "Adam Moore", "Employed") ) def renderPersons(selecteds: String | js.Array[Int]): Seq[VdomNode] = persons.zipWithIndex.map { case (p, idx) => val selected = selecteds match { case a: js.Array[_] => a.contains(idx) case all => true } MuiTableRow(selected = selected)( MuiTableRowColumn()(p.id), MuiTableRowColumn()(p.name), MuiTableRowColumn()(p.status) ): VdomNode } def render(S: State) = CodeExample(code, "MuiTable")( <.div( MuiTable( key = S.toString, height = S.height, fixedHeader = S.fixedHeader, fixedFooter = S.fixedFooter, selectable = S.selectable, multiSelectable = S.multiSelectable, onRowSelection = onRowSelection )( MuiTableHeader(enableSelectAll = S.enableSelectAll)( MuiTableRow()( MuiTableHeaderColumn( tooltip = "Super Header", style = js.Dynamic.literal("textAlign" -> "center") )() ), colNames ), MuiTableBody( deselectOnClickaway = S.deselectOnClickaway, showRowHover = S.showRowHover, stripedRows = S.stripedRows )( renderPersons(S.selected): _* ), MuiTableFooter()( colNames, MuiTableRow(style = js.Dynamic.literal("textAlign" -> "center"))() ) ), MuiPaper(rounded = true, style = js.Dynamic.literal("width" -> "300", "padding" -> "20px"))( MuiToggle( label = js.defined("selectable"), defaultToggled = S.selectable, onToggle = toggleSelectable )(), MuiToggle( label = js.defined("multiSelectable"), defaultToggled = S.multiSelectable, onToggle = toggleMultiSelectable )(), MuiToggle( label = js.defined("enableSelectAll"), defaultToggled = S.enableSelectAll, onToggle = toggleEnableSelectAll )(), MuiToggle( label = js.defined("deselectOnClickaway"), defaultToggled = S.deselectOnClickaway, onToggle = toggleDeselectOnClickaway )(), MuiToggle( label = js.defined("fixedHeader"), defaultToggled = S.fixedHeader, onToggle = toggleFixedHeader )(), MuiToggle( label = js.defined("fixedFooter"), defaultToggled = S.fixedFooter, onToggle = toggleFixedFooter )() ) ) ) } val component = ScalaComponent .builder[Unit]("MuiTableDemo") .initialState(State( fixedHeader = false, fixedFooter = false, stripedRows = true, showRowHover = true, selectable = true, multiSelectable = false, enableSelectAll = false, deselectOnClickaway = true, height = "400px", selected = js.Array[Int]() )) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiTabsDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.raw._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scalacss.ProdDefaults._ import scalacss.ScalaCssReact._ object MuiTabsDemo { object Style extends StyleSheet.Inline { import dsl._ val tabContent = style( textAlign.center, padding(40.px) ) } val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Int]) { val onChange: (Int, ReactEventFromHtml, ReactElement) => Callback = (chosen, _, _) ⇒ $.setState(chosen) >> Callback.info(s"chose $chosen") def render(current: Int) = <.div( CodeExample(code, "MuiTabs")( MuiTabs[Int](value = current, onChange = onChange)( MuiTab[Int](label = js.defined("Tab1"), value = 1)( <.h3(Style.tabContent, "Tab1 Content") ), MuiTab[Int](label = js.defined("Tab2"), value = 2)( <.h3(Style.tabContent, "Tab2 Content") ) ) ) ) } val component = ScalaComponent .builder[Unit]("MuiTabsDemo") .initialState(2) .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiTextFieldDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiTextFieldDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START //TODO for some reason the vdomNodeFromString implicit is not working val component = ScalaComponent .builder[Unit]("MuiTextFieldDemo") .render(P => { <.div( CodeExample(code, "MuiTextField")( <.div( ^.display.flex, ^.flexDirection.column, MuiTextField( hintText = js.defined("Hint Text"), onBlur = CallbackDebug.f1("onBlur"), onChange = CallbackDebug.f2("onChange"), onFocus = CallbackDebug.f1("onFocus") )(), MuiTextField(hintText = js.defined("Hint Text"), floatingLabelText = js.defined("Floating Label Text"))(), MuiTextField(hintText = js.defined("Multi Line Text"), multiLine = true)(), MuiTextField(hintText = js.defined("Multi Line Text"), multiLine = true, floatingLabelText = js.defined("Multi Line Floating Label Text"))(), MuiTextField(hintText = js.defined("Disabled Hint text"), disabled = true)() ) ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiThemeProviderDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js import scala.scalajs.js.Dynamic object MuiThemeProviderDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class State( baseTheme: MuiRawTheme, backgroundColor: js.UndefOr[MuiColor] ) { val theme: MuiTheme = Mui.Styles.getMuiTheme( backgroundColor.fold(baseTheme)( color ⇒ baseTheme.copy(palette = baseTheme.palette.copy(canvasColor = color)) )) } case class Backend($ : BackendScope[Unit, State]) { def pickColor(s: String): MuiColor = Mui.Styles.colors.asInstanceOf[Dynamic].selectDynamic(s).asInstanceOf[MuiColor] val colors: Seq[(String, MuiColor)] = js.Object.keys(Mui.Styles.colors).map { key ⇒ key → pickColor(key) } val onThemeChanged: (ReactEvent, Int, MuiRawTheme) ⇒ Callback = (e, idx, theme) ⇒ $.setState(State(theme, js.undefined)) val onColorChanged: (ReactEvent, Int, MuiColor) ⇒ Callback = (e, idx, color) ⇒ $.modState(_.copy(backgroundColor = color)) def render(S: State): VdomElement = { <.div( CodeExample(code, "MuiThemeProvider")( MuiMuiThemeProvider(muiTheme = S.theme)( MuiPaper()( <.h3("Pick base theme"), MuiDropDownMenu[MuiRawTheme](key = "themeDropdown", value = S.baseTheme, onChange = onThemeChanged)( MuiMenuItem[MuiRawTheme](key = "LightRawTheme", primaryText = js.defined("LightRawTheme"), value = Mui.Styles.LightRawTheme)(), MuiMenuItem[MuiRawTheme](key = "DarkRawTheme", primaryText = js.defined("DarkRawTheme"), value = Mui.Styles.DarkRawTheme)() ), <.h3("Override theme canvas color"), MuiDropDownMenu[MuiColor]( key = "colorDropdown", onChange = onColorChanged, value = S.backgroundColor )( colors.map { case (name, color) ⇒ MuiMenuItem[MuiColor]( key = name, primaryText = js.defined(name), value = color, style = js.Dynamic.literal(backgroundColor = color) )(): VdomNode }: _* ) ) ) ) ) } } private val component = ScalaComponent .builder[Unit]("MuiThemeProviderDemo") .initialState(State(Mui.Styles.LightRawTheme, js.undefined)) .renderBackend[Backend] .build // EXAMPLE:END def apply(): VdomElement = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiTimePickerDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiTimePickerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiTimePickerDemo") .render(P => { <.div( CodeExample(code, "MuiTimePicker")( MuiTimePicker(format = Ampm_24hr.ampm, hintText = js.defined("12 hr format"))(), MuiTimePicker(format = Ampm_24hr._24hr, hintText = js.defined("24 hr format"))() ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/materialui/MuiToolbarDemo.scala ================================================ package demo package components package materialui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.materialui._ import japgolly.scalajs.react.ScalaComponent import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object MuiToolbarDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START val component = ScalaComponent .builder[Unit]("MuiToolbarDemo") .render(P => { <.div( CodeExample(code, "MuiToolbar")( MuiToolbar()( MuiToolbarGroup(key = "1")( MuiRaisedButton(label = "Tool Left", secondary = true)() ), MuiToolbarGroup(key = "2")( MuiToolbarTitle(text = js.defined("options"))(), MuiToolbarSeparator()(), MuiRaisedButton(label = "Create Broadcast", primary = true)() ) ) ) ) }) .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneInfo.scala ================================================ package demo.components.reactsplitpane import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactSplitPaneInfo { val component = ScalaComponent .builder[Unit]("ReactSplitPaneInfo") .render(P => { <.div(^.cls := "full-width-section")( <.h3("React Split Pane :"), <.p("Wrapper for the react-split-pane component (0.1.66)"), <.a( ^.href := "https://github.com/tomkp/react-split-pane", "react-split-pane on GitHub" ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneSimpleHorizontal.scala ================================================ package demo.components.reactsplitpane import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactSplitPaneSimpleHorizontal { val code = GhPagesMacros.exampleSource // EXAMPLE:START class Backend(t: BackendScope[_, _]) { def render() = { <.div( CodeExample(code, "Simple Vertical Split")( <.div( ^.width := "95%", ^.height := "400px", ^.border := "1px solid", ^.margin := "auto", ^.position := "relative", ReactSplitPane( split = "horizontal" )(<.div("first"), <.div("second")) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactSplitPaneDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneSimpleNested.scala ================================================ package demo.components.reactsplitpane import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import scala.language.existentials object ReactSplitPaneSimpleNested { val code = GhPagesMacros.exampleSource // EXAMPLE:START class Backend(t: BackendScope[_, _]) { def render() = { val vert = ReactSplitPane()(<.div("second"), <.div("third")) <.div( CodeExample(code, "Simple Nested")( <.div( ^.width := "95%", ^.height := "400px", ^.border := "1px solid", ^.margin := "auto", ^.position := "relative", ReactSplitPane( split = "horizontal" )(<.div("first"), vert) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactSplitPaneDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneSimpleVertical.scala ================================================ package demo.components.reactsplitpane import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactSplitPaneSimpleVertical { val code = GhPagesMacros.exampleSource // EXAMPLE:START class Backend(t: BackendScope[_, _]) { def render() = { <.div( CodeExample(code, "Simple Vertical Split")( <.div( ^.width := "95%", ^.height := "200px", ^.border := "1px solid", ^.margin := "auto", ^.position := "relative", ReactSplitPane()(<.div("first"), <.div("second")) ) ) ) } } val component = ScalaComponent .builder[Unit]("ReactSplitPaneDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reacttable/ReactTableBasic.scala ================================================ package demo package components package reacttable import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactTable import demo.util.{Person, SampleData} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactTableBasic { import ReactTable._ val code = GhPagesMacros.exampleSource // EXAMPLE:START // val columns: List[String] = // List("fname", "lname", "email", "country") val configs = List( SimpleStringConfig[Person](name = "First Name", _.fname), SimpleStringConfig[Person](name = "Last Name", _.lname), ColumnConfig[Person]( name = "Email", person => <.a(^.href := s"mailto:${person.email}", person.email))(DefaultOrdering(_.email)), SimpleStringConfig[Person](name = "Country", _.country) ) case class Backend($ : BackendScope[_, _]) { def render = <.div( <.h2(^.cls := "mui-font-style-headline")("Basic Table"), CodeExample(code, "ReactTableBasic")( ReactTable(data = SampleData.people, configs = configs, rowsPerPage = 6)()) ) } val component = ScalaComponent .builder[Unit]("plain") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reacttable/ReactTableCustomCell.scala ================================================ package demo package components package reacttable import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactTable import demo.util.{Person, SampleData} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactTableCustomCell { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[_, _]) { import ReactTable._ // let say if i want to turn all fnames to grey that starts with J (you can return any VdomElement(buttons,well another ReactTable if you want!) val configs = List( ColumnConfig[Person](name = "First Name", customFname)(DefaultOrdering(_.fname)), SimpleStringConfig[Person](name = "Last Name", _.lname), ColumnConfig[Person]( name = "Email", person => <.a(^.href := s"mailto:${person.email}", person.email))(DefaultOrdering(_.email)), SimpleStringConfig[Person](name = "Country", _.country) ) def customFname: Person => VdomElement = person => { if (person.fname.startsWith("J")) <.span(^.backgroundColor := "grey")(person.fname) else <.span(person.fname) } def render = <.div( <.h2(^.cls := "mui-font-style-headline")("Custom Cell Factory"), CodeExample(code, "ReactTableCustomCell")( ReactTable(data = SampleData.people, configs = configs, rowsPerPage = 6)()) ) } val component = ScalaComponent .builder[Unit]("plain") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reacttable/ReactTableCustomColumnSize.scala ================================================ package demo package components package reacttable import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.ReactTable import demo.util.{Person, SampleData} import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactTableCustomColumnSize { import ReactTable._ val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[_, _]) { val configs = List( SimpleStringConfig[Person](name = "First Name", _.fname), SimpleStringConfig[Person](name = "Last Name", _.lname), ColumnConfig[Person](name = "Email", person => <.a(^.href := s"mailto:${person.email}", person.email), width = Some("10%"))(DefaultOrdering(_.email)), SimpleStringConfig[Person](name = "Country", _.country) ) def render = <.div( CodeExample(code, "Custom Column Size")( ReactTable(data = SampleData.people, configs = configs, rowsPerPage = 6)())) } val component = ScalaComponent .builder[Unit]("ReactTableCustomColumnSize") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/reacttable/ReactTableInfo.scala ================================================ package demo package components package reacttable import chandu0101.macros.tojs.GhPagesMacros import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object ReactTableInfo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render = InfoTemplate(componentFilePath = "/tables/ReactTable.scala", scalacss = true)( <.div(^.cls := "full-width-section")( <.h3("React Table :"), <.p("Responsive HTML(flexbox) table with the following features"), <.ul(^.paddingLeft := "25px")( <.li("Search"), <.li("Pagination"), <.li("Sorting"), <.li("Custom Styles"), <.li("Custom Custom Column Sizes"), <.li("Custom Cell Factory") ) ) ) } val component = ScalaComponent .builder[Unit]("ReactTableInfo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiButtonDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui.SuiButton import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiButtonDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { val handleOnClick = (e: ReactMouseEventFromInput) => Callback.info("You clicked me!") def render() = <.div( CodeExample(code, "SuiButton")( SuiButton(onClick = handleOnClick)("Click Here"), SuiButton(primary = true)("Primary"), SuiButton(secondary = true)("Secondary") ) ) } val component = ScalaComponent .builder[Unit]("SuiButtonDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiContainerDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiContainerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiContainer")( <.b("A standard container"), SuiContainer()( <.p("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.") ) ) ) } val component = ScalaComponent .builder[Unit]("SuiContainerDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiDividerDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiDividerDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiDivider")( <.b("A standard divider"), SuiDivider()(), <.br(), <.b("Horizontal Divider"), SuiDivider(horizontal = true)("OR") ) ) } val component = ScalaComponent .builder[Unit]("SuiDividerDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiFlagDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiFlagDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiFlag")( <.b("A flag can use the two digit country code, the full name, or a common alias."), SuiSegment()( SuiFlag(name = "ae")(), SuiFlag(name = "india")(), SuiFlag(name = "france")(), SuiFlag(name = "myanmar")() ) ) ) } val component = ScalaComponent .builder[Unit]("SuiFlagDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiGridDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiGridDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { val columns = (1 to 16).map( i => (SuiGridColumn(key = i.toString)( SuiImage(src = "http://semantic-ui.com/images/wireframe/image.png")()).vdomElement)) def render() = <.div(CodeExample(code, "SuiGrid")(SuiGrid()(columns: _*))) } val component = ScalaComponent .builder[Unit]("SuiGridDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiHeaderDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiHeaderDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiHeader")( SuiHeader(as = "h1")("First Header"), SuiHeader(as = "h2")("Second Header"), SuiHeader(as = "h3")("Third Header"), SuiHeader(as = "h4")("Fourth Header"), SuiHeader(as = "h5")("Fifth Header"), SuiHeader(as = "h6")("Sixth Header") ) ) } val component = ScalaComponent .builder[Unit]("SuiHeaderDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiIconDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiIconDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiIcon")( <.div( SuiIcon(name = SuiIconType("home"), size = SuiSize.mini)(), SuiIcon(name = SuiIconType("home"), size = SuiSize.tiny)(), SuiIcon(name = SuiIconType("home"), size = SuiSize.small)(), <.br(), SuiIcon(name = SuiIconType("home"))(), <.br(), SuiIcon(name = SuiIconType("home"), size = SuiSize.large)(), SuiIcon(name = SuiIconType("home"), size = SuiSize.big)(), SuiIcon(name = SuiIconType("home"), size = SuiSize.huge)() ), <.br(), <.br(), <.div( SuiIconGroup(size = SuiSize.huge)( SuiIcon(size = SuiSize.big, name = SuiIconType("thin circle"))(), SuiIcon(name = SuiIconType("user"))() ) ) ) ) } val component = ScalaComponent .builder[Unit]("SuiIconDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiInfo.scala ================================================ package demo package components package semanticui import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiInfo { val component = ScalaComponent .builder[Unit]("SuiInfo") .render(P => { InfoTemplate(componentFilePath = "semanticui/package.scala")( <.div( <.h3("Semnatic-UI-React "), <.p( "scalajs-react wrapper for ", RedLink("semantic-ui-react", "http://react.semantic-ui.com/introduction") ), <.div( <.h4("Supported Version :"), <.span("0.62.0") ), <.div( <.h4("How To Use :"), <.p("Follow the installation guide from :", RedLink("here", "http://react.semantic-ui.com/usage#javascript")) ) ) ) }) .build def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiInputDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiInputDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiInput")( <.b("A standard input field"), <.br(), SuiInput(placeholder = "Search ..")(), <.br(), <.b("Focus"), <.br(), SuiInput(placeholder = "Search ..", focus = true)(), <.br(), <.b("Error"), <.br(), SuiInput(placeholder = "Search ..", error = true)(), <.br(), <.b("Icon"), <.br(), SuiInput(placeholder = "Search ..", icon = SuiIconType("search"))() ) ) } val component = ScalaComponent .builder[Unit]("SuiInputDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/components/semanticui/SuiListDemo.scala ================================================ package demo.components.semanticui import chandu0101.macros.tojs.GhPagesMacros import chandu0101.scalajs.react.components.semanticui._ import demo.components.CodeExample import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ object SuiListDemo { val code = GhPagesMacros.exampleSource // EXAMPLE:START case class Backend($ : BackendScope[Unit, Unit]) { def render() = <.div( CodeExample(code, "SuiList")( SuiList()( SuiListItem()( SuiListIcon(name = SuiIconType("users"))(), SuiListContent()("Semantic UI") ), SuiListItem()( SuiListIcon(name = SuiIconType("marker"))(), SuiListContent()("New York, NY") ), SuiListItem()( SuiListIcon(name = SuiIconType("mail"))(), SuiListContent()(<.a(^.href := "mailto:jack@semantic-ui.com")("jack@semantic-ui.com")) ), SuiListItem()( SuiListIcon(name = SuiIconType("linkify"))(), SuiListContent()(<.a(^.href := "http://www.semantic-ui.com")("semantic-ui.com")) ) ) ) ) } val component = ScalaComponent .builder[Unit]("SuiListDemo") .renderBackend[Backend] .build // EXAMPLE:END def apply() = component() } ================================================ FILE: demo/src/main/scala/demo/pages/EuiPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{EuiRouteModule, LeftRoute} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ object EuiPage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = <.div(LeftNavPage(EuiRouteModule.menu, P.selectedPage, P.ctrl)) } val component = ScalaComponent .builder[Props]("EuiPage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/GoogleMapPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{GoogleMapRouteModule, LeftRoute} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object GoogleMapPage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { LeftNavPage(GoogleMapRouteModule.menu, P.selectedPage, P.ctrl) } } val component = ScalaComponent .builder[Props]("GoogleMapPage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/HomePage.scala ================================================ package demo package pages import chandu0101.scalajs.react.components._ import demo.components.{ComponentGridItem, LocalDemoButton} import demo.routes.AppRouter import demo.routes.AppRouter._ import japgolly.scalajs.react._ import japgolly.scalajs.react.component.Generic.toComponentCtor import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ import scala.scalajs.js object HomePage { import RCustomStyles._ case class ComponentInfo(name: String, imagePath: js.Any, route: Page, tags: Stream[String]) object Style { val info = TagMod( MsFlexAlign := "center", MsFlexDirection := "column", WebkitAlignItems := "center", WebkitBoxAlign := "center", WebkitBoxDirection := "normal", WebkitBoxOrient := "vertical", WebkitFlexDirection := "column", ^.alignItems := "center", ^.backgroundColor := "#eeeeee", ^.display := "-ms-flexbox", ^.display := "-webkit-box", ^.display := "-webkit-flex", ^.display := "flex", ^.flexDirection := "column", ^.fontSize := "18px", ^.fontWeight := "500", ^.paddingBottom := "45px", ^.paddingTop := "85px" ) val infoContent = TagMod(^.fontWeight := "500", ^.fontSize := "18px") val infoLink = TagMod( ^.color := "#ff4081", ^.padding := "0 5px", ^.textDecoration := "none" ) val searchSection = TagMod( ^.display := "-ms-flexbox", ^.display := "-webkit-box", ^.display := "-webkit-flex", ^.display := "flex", ^.margin := "50px", ^.marginBottom := "15px" ) val componentsGrid = TagMod( MsFlexWrap := "wrap", WebkitFlexWrap := "wrap", ^.display := "-ms-flexbox", ^.display := "-webkit-box", ^.display := "-webkit-flex", ^.display := "flex", ^.flexWrap := "wrap", ^.margin := "30px" ) } case class State(filterText: String = "", results: Vector[ComponentInfo]) class Backend(t: BackendScope[RouterCtl[Page], State]) { def onTextChange(text: String) = { val results = AppRouter.homePageMenu.filter(c => c.tags.exists(s => s.contains(text))) t.modState(_.copy(results = results, filterText = text)) } def render(P: RouterCtl[Page], S: State) = { <.div( <.div(Style.info, ^.key := "info")( <.h3(Style.infoContent)( "Reusable ", <.a(^.href := "https://github.com/japgolly/scalajs-react", Style.infoLink, ^.target := "_blank")("scalajs-react"), " Components, want to Contribute ? " ), LocalDemoButton( name = "Welcome Mama", linkButton = true, href = "https://github.com/chandu0101/scalajs-react-components/tree/master/doc/CONTRIBUTE.md") ), <.div(Style.searchSection)( ReactSearchBox(onTextChange = onTextChange, style = ReactSearchBox.DefaultStyle), <.strong(^.alignSelf := "center", ^.paddingLeft := "30px")( s"Results: ${S.results.length}").unless(S.filterText.isEmpty) ), <.div(Style.componentsGrid)( S.results.map(c => ComponentGridItem(c.name, c.route, c.imagePath, P)).toTagMod ) ) } } val component = ScalaComponent .builder[RouterCtl[Page]]("homepage") .initialState(State("", AppRouter.homePageMenu)) .renderBackend[Backend] .build def apply(ctrl: RouterCtl[Page]) = component(ctrl) } ================================================ FILE: demo/src/main/scala/demo/pages/MuiPage.scala ================================================ package demo package pages import chandu0101.scalajs.react.components.materialui._ import demo.components.LeftNavPage import demo.routes.{LeftRoute, MuiRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ object MuiPage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { MuiMuiThemeProvider()(MuiPaper()(LeftNavPage(MuiRouteModule.menu, P.selectedPage, P.ctrl))) } } private val component = ScalaComponent .builder[Props]("MuiPage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactDraggablePage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactDraggableRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.VdomElement import japgolly.scalajs.react.vdom.html_<^._ object ReactDraggablePage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props): VdomElement = LeftNavPage(ReactDraggableRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactDraggablePage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactGeomIconPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactGeomIcontRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ object ReactGeomIconPage { class Backend(t: BackendScope[Props, Unit]) { def render(P: Props): VdomElement = LeftNavPage(ReactGeomIcontRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactGeomIconPage") .stateless .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactInfinitePage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactInfiniteRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ object ReactInfinitePage { class Backend(t: BackendScope[Props, Unit]) { def render(P: Props): VdomElement = LeftNavPage(ReactInfiniteRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactInfinitePage") .stateless .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactListViewPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactListViewRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object ReactListViewPage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = LeftNavPage(ReactListViewRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactListViewPage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactPopoverPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactPopoverRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object ReactPopoverPage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = { LeftNavPage(ReactPopoverRouteModule.menu, P.selectedPage, P.ctrl) } } val component = ScalaComponent .builder[Props]("ReactPopOverPage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactSplitPanePage.scala ================================================ package demo.pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactSplitPaneRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.html_<^._ object ReactSplitPanePage { case class Backend($ : BackendScope[_, _]) { def render(P: Props): VdomElement = LeftNavPage(ReactSplitPaneRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactSplitPanePage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactTablePage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactTableRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object ReactTablePage { case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = LeftNavPage(ReactTableRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("ReactTablePage") .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactTagsInputPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactTagsInputRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object ReactTagsInputPage { class Backend(t: BackendScope[Props, Unit]) { def render(P: Props) = { LeftNavPage(ReactTagsInputRouteModule.menu, P.selectedPage, P.ctrl) } } val component = ScalaComponent .builder[Props]("ReactTagsInputPage") .stateless .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/ReactTreeViewPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, ReactTreeViewRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object ReactTreeViewPage { val component = ScalaComponent .builder[Props]("ReactTreeViewPage") .renderBackend[Backend] .build class Backend(t: BackendScope[Props, Unit]) { def render(P: Props) = LeftNavPage(ReactTreeViewRouteModule.menu, P.selectedPage, P.ctrl) } case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/SpinnerPage.scala ================================================ package demo package pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, SpinnerRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object SpinnerPage { class Backend(t: BackendScope[Props, Unit]) { def render(P: Props) = LeftNavPage(SpinnerRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("SpinnerPage") .stateless .renderBackend[Backend] .build case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/pages/SuiPage.scala ================================================ package demo.pages import demo.components.LeftNavPage import demo.routes.{LeftRoute, SuiRouteModule} import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl object SuiPage { case class Props(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) case class Backend($ : BackendScope[Props, Unit]) { def render(P: Props) = LeftNavPage(SuiRouteModule.menu, P.selectedPage, P.ctrl) } val component = ScalaComponent .builder[Props]("SuiPage") .renderBackend[Backend] .build def apply(selectedPage: LeftRoute, ctrl: RouterCtl[LeftRoute]) = component(Props(selectedPage, ctrl)) } ================================================ FILE: demo/src/main/scala/demo/routes/AppRouter.scala ================================================ package demo package routes import demo.components._ import demo.pages._ import japgolly.scalajs.react.extra.router._ import japgolly.scalajs.react.vdom.html_<^._ import org.scalajs.dom object AppRouter { sealed trait Page case object Home extends Page case class EuiPages(p: LeftRoute) extends Page case class GoogleMapPages(p: LeftRoute) extends Page case class MuiPages(p: LeftRoute) extends Page case class SuiPages(p: LeftRoute) extends Page case class ReactDraggablePages(p: LeftRoute) extends Page case class ReactGeomIconPages(p: LeftRoute) extends Page case class ReactInfinitePages(p: LeftRoute) extends Page case class ReactListViewPages(p: LeftRoute) extends Page case class ReactPopoverPages(p: LeftRoute) extends Page case class ReactSplitPanePages(p: LeftRoute) extends Page case class ReactTablePages(p: LeftRoute) extends Page case class ReactTagsInputPages(p: LeftRoute) extends Page case class ReactTreeViewPages(p: LeftRoute) extends Page case class SpinnerPages(p: LeftRoute) extends Page case object ScalaCSSDoc extends Page val config = RouterConfigDsl[Page].buildConfig { dsl => import dsl._ val reactListViewRoutes: Rule = ReactListViewRouteModule.routes .prefixPath_/("#reactlistview") .pmap[Page](ReactListViewPages) { case ReactListViewPages(p) => p } val reactTreeViewRoutes: Rule = ReactTreeViewRouteModule.routes .prefixPath_/("#reacttreeview") .pmap[Page](ReactTreeViewPages) { case ReactTreeViewPages(p) => p } val reactPopoverRoutes: Rule = ReactPopoverRouteModule.routes .prefixPath_/("#reactpopover") .pmap[Page](ReactPopoverPages) { case ReactPopoverPages(p) => p } val reactTableRoutes: Rule = ReactTableRouteModule.routes .prefixPath_/("#reacttable") .pmap[Page](ReactTablePages) { case ReactTablePages(p) => p } val reactSplitPaneRoutes: Rule = ReactSplitPaneRouteModule.routes .prefixPath_/("#reactsplitpane") .pmap[Page](ReactSplitPanePages) { case ReactSplitPanePages(p) => p } val reactTagsInputRoutes: Rule = ReactTagsInputRouteModule.routes .prefixPath_/("#reacttagsinput") .pmap[Page](ReactTagsInputPages) { case ReactTagsInputPages(p) => p } val reactGeomIconRoutes: Rule = ReactGeomIcontRouteModule.routes .prefixPath_/("#reactgeomicon") .pmap[Page](ReactGeomIconPages) { case ReactGeomIconPages(p) => p } val reactInfiniteRoutes: Rule = ReactInfiniteRouteModule.routes .prefixPath_/("#reactinite") .pmap[Page](ReactInfinitePages) { case ReactInfinitePages(p) => p } val reactDraggableRoutes: Rule = ReactDraggableRouteModule.routes .prefixPath_/("#reactdraggable") .pmap[Page](ReactDraggablePages) { case ReactDraggablePages(p) => p } val googleMapRoutes: Rule = GoogleMapRouteModule.routes .prefixPath_/("#googlemap") .pmap[Page](GoogleMapPages) { case GoogleMapPages(p) => p } val muiRoutes: Rule = MuiRouteModule.routes .prefixPath_/("#materialui") .pmap[Page](MuiPages) { case MuiPages(p) => p } val euiRoutes: Rule = EuiRouteModule.routes .prefixPath_/("#elementalui") .pmap[Page](EuiPages) { case EuiPages(p) => p } val suiRoutes: Rule = SuiRouteModule.routes .prefixPath_/("#semanticui") .pmap[Page](SuiPages) { case SuiPages(p) => p } val spinnerRoutes: Rule = SpinnerRouteModule.routes .prefixPath_/("#spinner") .pmap[Page](SpinnerPages) { case SpinnerPages(p) => p } (trimSlashes | staticRoute(root, Home) ~> renderR(ctrl => HomePage(ctrl)) | staticRoute("#scalacss", ScalaCSSDoc) ~> render(ScalaCSSTutorial()) | euiRoutes | suiRoutes | googleMapRoutes | muiRoutes | reactDraggableRoutes | reactGeomIconRoutes | reactInfiniteRoutes | reactListViewRoutes | reactPopoverRoutes | reactSplitPaneRoutes | reactTableRoutes | reactTagsInputRoutes | reactTreeViewRoutes | spinnerRoutes) .notFound(redirectToPage(Home)(Redirect.Replace)) .renderWith(layout) } def layout(c: RouterCtl[Page], r: Resolution[Page]) = { assert(c != null) <.div( AppHeader(), r.render(), <.div(^.textAlign := "center", ^.key := "footer")( <.hr(), <.p("Built using scalajs-react") ) ) } val homePageMenu = Vector( HomePage.ComponentInfo( name = "Material UI", imagePath = Images.materialuiImage, route = MuiPages(MuiRouteModule.Info), tags = Stream("materialui", "material", "framework") ), HomePage.ComponentInfo( name = "Elemental UI", imagePath = Images.elementaluiImage, route = EuiPages(EuiRouteModule.Info), tags = Stream("elementalui", "elemental", "framework") ), HomePage.ComponentInfo( name = "Semantic UI", imagePath = Images.semanticuiImage, route = SuiPages(SuiRouteModule.Info), tags = Stream("semanticui", "semantic", "framework") ), HomePage.ComponentInfo( name = "React ListView", imagePath = Images.reactListViewImage, route = ReactListViewPages(ReactListViewRouteModule.Info), tags = Stream("list view", "search", "listview") ), HomePage.ComponentInfo( name = "Google Map", imagePath = Images.googleMapImage, route = GoogleMapPages(GoogleMapRouteModule.Info), tags = Stream("google", "map", "googlemap") ), HomePage.ComponentInfo( name = "React Draggable", imagePath = Images.reactDraggableImage, route = ReactDraggablePages(ReactDraggableRouteModule.Info), tags = Stream("react", "drag/drop") ), HomePage.ComponentInfo( name = "React TreeView", imagePath = Images.reactTreeViewImage, route = ReactTreeViewPages(ReactTreeViewRouteModule.Info), tags = Stream("tree view", "search", "treeview") ), HomePage.ComponentInfo( name = "React Table", imagePath = Images.reactTableImage, route = ReactTablePages(ReactTableRouteModule.Info), tags = Stream("table", "search", "pagination", "sorting", "cutom cell") ), HomePage.ComponentInfo( name = "React Split Pane", imagePath = Images.reactSplitPaneImage, route = ReactSplitPanePages(ReactSplitPaneRouteModule.Info), tags = Stream("split pane") ), HomePage.ComponentInfo( name = "React Tags Input", imagePath = Images.reactTagsInputImage, route = ReactTagsInputPages(ReactTagsInputRouteModule.Info), tags = Stream("tags", "input") ), HomePage.ComponentInfo( name = "React GeomIcons", imagePath = Images.reactGeomIconImage, route = ReactGeomIconPages(ReactGeomIcontRouteModule.Info), tags = Stream("icons", "svg") ), HomePage.ComponentInfo( name = "React Infinite", imagePath = Images.reactInfiniteImage, route = ReactInfinitePages(ReactInfiniteRouteModule.Info), tags = Stream("infinite scroll", "listview") ), HomePage.ComponentInfo( name = "Spinner", imagePath = Images.spinnerImage, route = SpinnerPages(SpinnerRouteModule.Info), tags = Stream("spinner") ), HomePage.ComponentInfo( name = "React Popover", imagePath = Images.reactPopoverImage, route = ReactPopoverPages(ReactPopoverRouteModule.Info), tags = Stream("modal", "popover") ) ) val baseUrl = if (dom.window.location.hostname == "localhost") BaseUrl.fromWindowOrigin_/ else BaseUrl.fromWindowOrigin val router = Router(baseUrl, config) } ================================================ FILE: demo/src/main/scala/demo/routes/EuiRouteModule.scala ================================================ package demo.routes import demo.components.elementalui._ import demo.pages.EuiPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object EuiRouteModule { case object Info extends LeftRoute("Info", "info", () => EuiInfo()) case object Buttons extends LeftRoute("Buttons", "buttons", () => EuiButtonsDemo()) case object Glyphs extends LeftRoute("Glyphs", "glyphs", () => EuiGlyphsDemo()) case object Forms extends LeftRoute("Forms", "forms", () => EuiFormsDemo()) case object Spinner extends LeftRoute("Spinner", "spinner", () => EuiSpinnerDemo()) case object Modal extends LeftRoute("Modal", "modal", () => EuiModalDemo()) case object Misc extends LeftRoute("Misc", "misc", () => EuiMiscDemo()) val menu: List[LeftRoute] = List( Info, Buttons, Glyphs, Forms, Spinner, Modal, Misc ) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => EuiPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/GoogleMapRouteModule.scala ================================================ package demo package routes import demo.components.googlemap._ import demo.pages.GoogleMapPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object GoogleMapRouteModule { case object Info extends LeftRoute("Info", "info", () => GoogleMapInfo()) case object Basic extends LeftRoute("Basic Map", "basic", () => GoogleMapBasic()) case object Marker extends LeftRoute("Map With Markers", "markers", () => GoogleMapMarkers()) case object MutableMarker extends LeftRoute("Mutable Markers", "mutableMarkers", () => MutableGoogleMapMarkers()) case object MarkerIcon extends LeftRoute("Custom Marker Icon", "markericon", () => GoogleMapCustomMarkerIcon()) case object MarkerInfoWindow extends LeftRoute("Marker Info Window", "markerinfowindow", () => GoogleMapMarkerInfoWindow()) val menu: List[LeftRoute] = List(Info, Basic, Marker, MutableMarker, MarkerIcon, MarkerInfoWindow) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => GoogleMapPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/LeftRoute.scala ================================================ package demo package routes import japgolly.scalajs.react.vdom.VdomElement abstract class LeftRoute(val name: String, val route: String, val render: () => VdomElement) ================================================ FILE: demo/src/main/scala/demo/routes/MuiRouteModule.scala ================================================ package demo package routes import demo.components.materialui._ import demo.pages.MuiPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object MuiRouteModule { case object Info extends LeftRoute("Info", "info", () => MuiInfo()) case object AppBar extends LeftRoute("AppBar", "appbar", () => MuiAppBarDemo()) case object AutoComplete extends LeftRoute("AutoComplete", "autocomplete", () => MuiAutoCompleteDemo()) case object Avatar extends LeftRoute("Avatar", "avatar", () => MuiAvatarDemo()) case object Tabs extends LeftRoute("Tabs", "tabs", () => MuiTabsDemo()) case object Buttons extends LeftRoute("Buttons", "buttons", () => MuiButtonsDemo()) case object DatePicker extends LeftRoute("Date Picker", "datepicker", () => MuiDatePickerDemo()) case object Dialog extends LeftRoute("Dialog", "dialog", () => MuiDialogDemo()) case object DropDownMenu extends LeftRoute("DropDown Menu", "dropdownmenu", () => MuiDropDownMenuDemo()) case object Paper extends LeftRoute("Paper", "paper", () => MuiPaperDemo()) case object Popover extends LeftRoute("Popover", "popover", () => MuiPopoverDemo()) case object TextField extends LeftRoute("Text Field", "textfield", () => MuiTextFieldDemo()) case object ThemeProvider extends LeftRoute("Themes", "themes", () => MuiThemeProviderDemo()) case object Progress extends LeftRoute("Progress Bars", "progress", () => MuiProgressDemo()) case object SelectField extends LeftRoute("Select Field", "selectfield", () => MuiSelectFieldDemo()) case object SnackBar extends LeftRoute("SnackBar", "snackbar", () => MuiSnackbarDemo()) case object Slider extends LeftRoute("Slider", "slider", () => MuiSliderDemo()) case object SvgIcon extends LeftRoute("Svg icons", "svgicon", () => MuiSvgIconDemo()) case object TimePicker extends LeftRoute("Time Picker", "timepicker", () => MuiTimePickerDemo()) case object Switches extends LeftRoute("Switches", "switches", () => MuiSwitchesDemo()) case object Toolbar extends LeftRoute("Toolbar", "toolbar", () => MuiToolbarDemo()) case object Drawer extends LeftRoute("Drawer", "drawer", () => MuiDrawerDemo()) case object Menu extends LeftRoute("Menus", "menus", () => MuiMenuDemo()) case object MList extends LeftRoute("List", "list", () => MuiListDemo()) case object Table extends LeftRoute("Table", "table", () => MuiTableDemo()) val menu: List[LeftRoute] = List( Info, // Updates, AppBar, AutoComplete, Avatar, Buttons, DatePicker, Dialog, DropDownMenu, Drawer, MList, Menu, Paper, Popover, Progress, SelectField, Switches, Slider, SvgIcon, SnackBar, TextField, ThemeProvider, TimePicker, Table, Tabs, Toolbar ) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => MuiPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactDraggableRouteModule.scala ================================================ package demo package routes import demo.components.{ReactDraggableDemo, ReactDraggableInfo} import demo.pages.ReactDraggablePage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactDraggableRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactDraggableInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactDraggableDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu .map(i => staticRoute(i.route, i) ~> renderR(r => ReactDraggablePage(i, r))) .reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactGeomIcontRouteModule.scala ================================================ package demo package routes import demo.components.{ReactGeomIconDemo, ReactGeomIconInfo} import demo.pages.ReactGeomIconPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactGeomIcontRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactGeomIconInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactGeomIconDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactGeomIconPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactInfiniteRouteModule.scala ================================================ package demo package routes import demo.components.{ReactInfiniteDemo, ReactInfiniteInfo} import demo.pages.ReactInfinitePage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactInfiniteRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactInfiniteInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactInfiniteDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactInfinitePage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactListViewRouteModule.scala ================================================ package demo package routes import demo.components.{ReactListViewDemo, ReactListViewInfo} import demo.pages.ReactListViewPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactListViewRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactListViewInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactListViewDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactListViewPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactPopoverRouteModule.scala ================================================ package demo package routes import demo.components.{ReactPopoverDemo, ReactPopoverInfo} import demo.pages.ReactPopoverPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactPopoverRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactPopoverInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactPopoverDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactPopoverPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactSplitPaneRouteModule.scala ================================================ package demo.routes import demo.components.reactsplitpane._ import demo.pages.ReactSplitPanePage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactSplitPaneRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactSplitPaneInfo()) case object SimpleVertical extends LeftRoute("Simple Vertical", "simplevertical", () => ReactSplitPaneSimpleVertical()) case object SimpleHorizontal extends LeftRoute("Simple Horizontal", "simplehorizontal", () => ReactSplitPaneSimpleHorizontal()) case object SimpleNested extends LeftRoute("Simple Nested", "simplenested", () => ReactSplitPaneSimpleNested()) val menu: List[LeftRoute] = List(Info, SimpleVertical, SimpleHorizontal, SimpleNested) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactSplitPanePage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactTableRouteModule.scala ================================================ package demo package routes import demo.components.reacttable._ import demo.pages.ReactTablePage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactTableRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactTableInfo()) case object Basic extends LeftRoute("Search ,Pagination", "basic", () => ReactTableBasic()) case object CustomCell extends LeftRoute("Custom Cell", "customcell", () => ReactTableCustomCell()) case object CustomColumn extends LeftRoute("Custom Colum Size", "customcolumsize", () => ReactTableCustomColumnSize()) val menu: List[LeftRoute] = List(Info, Basic, CustomCell, CustomColumn) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactTablePage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactTagsInputRouteModule.scala ================================================ package demo package routes import demo.components.{ReactTagsInputDemo, ReactTagsInputInfo} import demo.pages.ReactTagsInputPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactTagsInputRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactTagsInputInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactTagsInputDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactTagsInputPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/ReactTreeViewRouteModule.scala ================================================ package demo package routes import demo.components.{ReactTreeViewDemo, ReactTreeViewInfo} import demo.pages.ReactTreeViewPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object ReactTreeViewRouteModule { case object Info extends LeftRoute("Info", "info", () => ReactTreeViewInfo()) case object Demo extends LeftRoute("Demo", "demo", () => ReactTreeViewDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => ReactTreeViewPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/SpinnerRouteModule.scala ================================================ package demo package routes import demo.components.{SpinnerDemo, SpinnerInfo} import demo.pages.SpinnerPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object SpinnerRouteModule { case object Info extends LeftRoute("Info", "info", () => SpinnerInfo()) case object Demo extends LeftRoute("Demo", "demo", () => SpinnerDemo()) val menu: List[LeftRoute] = List(Info, Demo) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu.map(i => staticRoute(i.route, i) ~> renderR(r => SpinnerPage(i, r))).reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/routes/SuiRouteModule.scala ================================================ package demo.routes import demo.components.semanticui._ import demo.pages.SuiPage import japgolly.scalajs.react.extra.router.RouterConfigDsl import japgolly.scalajs.react.vdom.html_<^._ object SuiRouteModule { case object Info extends LeftRoute("Info", "info", () => SuiInfo()) case object Button extends LeftRoute("Button", "button", () => SuiButtonDemo()) case object Container extends LeftRoute("Container", "container", () => SuiContainerDemo()) case object Divider extends LeftRoute("Divider", "divider", () => SuiDividerDemo()) case object Flag extends LeftRoute("Flag", "flag", () => SuiFlagDemo()) case object Header extends LeftRoute("Header", "header", () => SuiHeaderDemo()) case object Icon extends LeftRoute("Icon", "icon", () => SuiIconDemo()) case object Input extends LeftRoute("Input", "input", () => SuiInputDemo()) case object SuiList extends LeftRoute("List", "list", () => SuiListDemo()) case object Grid extends LeftRoute("Grid", "grid", () => SuiGridDemo()) val menu: List[LeftRoute] = List( Info, Button, Container, Divider, Flag, Header, Icon, Input, SuiList, Grid ) val routes = RouterConfigDsl[LeftRoute].buildRule { dsl => import dsl._ menu .map(i => staticRoute(i.route, i) ~> renderR(r => SuiPage(i, r))) .reduce(_ | _) } } ================================================ FILE: demo/src/main/scala/demo/util/SampleData.scala ================================================ package demo package util case class Person(_id: Int = 0, age: Int = 0, fname: String = "", lname: String = "", email: String = "", country: String = "") object SampleData { val people = List( Person(fname = "Joshua", lname = "Myers", email = "jmyers0@trellian.com", country = "France"), Person(fname = "Gloria", lname = "Porter", email = "gporter1@hatena.ne.jp", country = "Indonesia"), Person(fname = "Joe", lname = "Elliott", email = "jelliott2@mediafire.com", country = "Brazil"), Person(fname = "Larry", lname = "Henry", email = "lhenry3@goo.ne.jp", country = "Philippines"), Person(fname = "Frances", lname = "Roberts", email = "froberts4@fema.gov", country = "Mexico"), Person(fname = "Ashley", lname = "Turner", email = "aturner5@paypal.com", country = "Brazil"), Person(fname = "Jeremy", lname = "Morris", email = "jmorris6@yale.edu", country = "China"), Person(fname = "Todd", lname = "Carter", email = "tcarter7@printfriendly.com", country = "Peru"), Person(fname = "Antonio", lname = "Hart", email = "ahart8@webs.com", country = "Brazil"), Person(fname = "Henry", lname = "Welch", email = "hwelch9@soup.io", country = "Paraguay"), Person(fname = "Russell", lname = "Carr", email = "rcarra@unicef.org", country = "China"), Person(fname = "Jean", lname = "Rivera", email = "jriverab@ebay.co.uk", country = "Bulgaria"), Person(fname = "Sara", lname = "Chavez", email = "schavezc@goo.ne.jp", country = "South Africa"), Person(fname = "Gerald", lname = "Arnold", email = "garnoldd@mashable.com", country = "Thailand"), Person(fname = "Bruce", lname = "Rice", email = "bricee@webeden.co.uk", country = "China"), Person(fname = "Barbara", lname = "Parker", email = "bparkerf@over-blog.com", country = "China"), Person(fname = "Philip", lname = "Griffin", email = "pgriffing@ebay.com", country = "China"), Person(fname = "Adam", lname = "Mason", email = "amasonh@nature.com", country = "Pakistan"), Person(fname = "Juan", lname = "Johnston", email = "jjohnstoni@mozilla.com", country = "Tunisia"), Person(fname = "Robin", lname = "Clark", email = "rclarkj@tmall.com", country = "Brazil"), Person(fname = "Martha", lname = "Bryant", email = "mbryantk@photobucket.com", country = "Chile"), Person(fname = "Fred", lname = "Carter", email = "fcarterl@godaddy.com", country = "Bangladesh"), Person(fname = "Norma", lname = "Hughes", email = "nhughesm@free.fr", country = "Indonesia"), Person(fname = "Cheryl", lname = "Garcia", email = "cgarcian@shinystat.com", country = "Croatia"), Person(fname = "Brenda", lname = "Hall", email = "bhallo@weather.com", country = "Russia"), Person(fname = "Anthony", lname = "Lee", email = "aleep@amazon.co.jp", country = "Kenya"), Person(fname = "Marie", lname = "Shaw", email = "mshawq@noaa.gov", country = "Philippines"), Person(fname = "Terry", lname = "Knight", email = "tknightr@miitbeian.gov.cn", country = "Brazil"), Person(fname = "Todd", lname = "Murray", email = "tmurrays@yolasite.com", country = "Finland"), Person(fname = "Sean", lname = "Hudson", email = "shudsont@berkeley.edu", country = "Peru"), Person(fname = "Robert", lname = "Garrett", email = "rgarrettu@sbwire.com", country = "Thailand"), Person(fname = "Louis", lname = "Thomas", email = "lthomasv@php.net", country = "Philippines"), Person(fname = "Stephanie", lname = "Sanchez", email = "ssanchezw@statcounter.com", country = "Argentina"), Person(fname = "James", lname = "Young", email = "jyoungx@spiegel.de", country = "Argentina"), Person(fname = "Stephen", lname = "Miller", email = "smillery@webeden.co.uk", country = "Russia"), Person(fname = "Shirley", lname = "Rodriguez", email = "srodriguezz@weather.com", country = "Philippines"), Person(fname = "Daniel", lname = "Rivera", email = "drivera10@yolasite.com", country = "Russia"), Person(fname = "Steven", lname = "Morrison", email = "smorrison11@indiegogo.com", country = "Indonesia"), Person(fname = "Julia", lname = "Gonzalez", email = "jgonzalez12@homestead.com", country = "Poland"), Person(fname = "Randy", lname = "Ramirez", email = "rramirez13@answers.com", country = "Hungary"), Person(fname = "Jimmy", lname = "Hill", email = "jhill14@webmd.com", country = "China"), Person(fname = "Robert", lname = "Reed", email = "rreed15@upenn.edu", country = "China"), Person(fname = "Gerald", lname = "Burke", email = "gburke16@youku.com", country = "Nicaragua"), Person(fname = "Dorothy", lname = "Moreno", email = "dmoreno17@ihg.com", country = "Indonesia"), Person(fname = "Roger", lname = "Franklin", email = "rfranklin18@chronoengine.com", country = "Sweden"), Person(fname = "Billy", lname = "Wilson", email = "bwilson19@instagram.com", country = "Philippines"), Person(fname = "Anna", lname = "Warren", email = "awarren1a@shutterfly.com", country = "Poland"), Person(fname = "Brandon", lname = "Lawson", email = "blawson1b@squarespace.com", country = "Libya"), Person(fname = "Paula", lname = "Gonzales", email = "pgonzales1c@blogs.com", country = "Norway"), Person(fname = "Judith", lname = "Hamilton", email = "jhamilton1d@drupal.org", country = "Madagascar"), Person(fname = "Jonathan", lname = "Pierce", email = "jpierce1e@msu.edu", country = "Tajikistan"), Person(fname = "Carlos", lname = "Carpenter", email = "ccarpenter1f@google.de", country = "Senegal"), Person(fname = "Carolyn", lname = "Dean", email = "cdean1g@examiner.com", country = "Brazil"), Person(fname = "Betty", lname = "Harper", email = "bharper1h@oakley.com", country = "Russia"), Person(fname = "Margaret", lname = "Lewis", email = "mlewis1i@cbsnews.com", country = "Finland"), Person(fname = "Jean", lname = "Ellis", email = "jellis1j@livejournal.com", country = "Bulgaria"), Person(fname = "Janet", lname = "Hunt", email = "jhunt1k@rediff.com", country = "Indonesia"), Person(fname = "Amy", lname = "Burns", email = "aburns1l@fda.gov", country = "Tunisia"), Person(fname = "Nicole", lname = "Fowler", email = "nfowler1m@yellowpages.com", country = "Indonesia"), Person(fname = "Kelly", lname = "Rice", email = "krice1n@reference.com", country = "Thailand"), Person(fname = "Bobby", lname = "Ramos", email = "bramos1o@ask.com", country = "Pakistan"), Person(fname = "Timothy", lname = "Spencer", email = "tspencer1p@51.la", country = "Ireland"), Person(fname = "Brandon", lname = "Stewart", email = "bstewart1q@ed.gov", country = "Brazil"), Person(fname = "Janet", lname = "Coleman", email = "jcoleman1r@amazon.de", country = "Poland"), Person(fname = "Terry", lname = "Medina", email = "tmedina1s@usnews.com", country = "Brazil"), Person(fname = "David", lname = "Rivera", email = "drivera1t@joomla.org", country = "Poland"), Person(fname = "Amy", lname = "Lee", email = "alee1u@reddit.com", country = "China"), Person(fname = "Brandon", lname = "Sullivan", email = "bsullivan1v@newsvine.com", country = "Russia"), Person(fname = "Charles", lname = "Rivera", email = "crivera1w@sitemeter.com", country = "Portugal"), Person(fname = "Henry", lname = "Moreno", email = "hmoreno1x@vkontakte.ru", country = "Russia"), Person(fname = "Janet", lname = "Mason", email = "jmason1y@ycombinator.com", country = "Afghanistan"), Person(fname = "Judy", lname = "Porter", email = "jporter1z@mysql.com", country = "Netherlands"), Person(fname = "Bruce", lname = "Diaz", email = "bdiaz20@hp.com", country = "Indonesia"), Person(fname = "Russell", lname = "Fields", email = "rfields21@livejournal.com", country = "Indonesia"), Person(fname = "Jose", lname = "Wagner", email = "jwagner22@fastcompany.com", country = "Czech Republic"), Person(fname = "Joyce", lname = "Wells", email = "jwells23@issuu.com", country = "Indonesia"), Person(fname = "Debra", lname = "Sims", email = "dsims24@nps.gov", country = "France"), Person(fname = "Lois", lname = "Evans", email = "levans25@princeton.edu", country = "Venezuela"), Person(fname = "Juan", lname = "Hart", email = "jhart26@ibm.com", country = "China"), Person(fname = "Joe", lname = "Ruiz", email = "jruiz27@a8.net", country = "Vietnam"), Person(fname = "Nicole", lname = "Powell", email = "npowell28@reddit.com", country = "Indonesia"), Person(fname = "Sandra", lname = "Elliott", email = "selliott29@answers.com", country = "Indonesia"), Person(fname = "Ernest", lname = "West", email = "ewest2a@ehow.com", country = "Czech Republic"), Person(fname = "Philip", lname = "Garrett", email = "pgarrett2b@nhs.uk", country = "France"), Person(fname = "Tammy", lname = "Jenkins", email = "tjenkins2c@taobao.com", country = "Russia"), Person(fname = "Andrew", lname = "Murphy", email = "amurphy2d@imdb.com", country = "Indonesia"), Person(fname = "Melissa", lname = "Campbell", email = "mcampbell2e@shinystat.com", country = "China"), Person(fname = "Catherine", lname = "Nichols", email = "cnichols2f@walmart.com", country = "Nigeria"), Person(fname = "Brandon", lname = "Black", email = "bblack2g@cnet.com", country = "Netherlands"), Person(fname = "Louise", lname = "Woods", email = "lwoods2h@globo.com", country = "China"), Person(fname = "Benjamin", lname = "Kelly", email = "bkelly2i@amazon.co.uk", country = "China"), Person(fname = "Carolyn", lname = "Powell", email = "cpowell2j@mozilla.com", country = "Portugal"), Person(fname = "Lillian", lname = "Perkins", email = "lperkins2k@sakura.ne.jp", country = "Slovenia"), Person(fname = "Patrick", lname = "Morales", email = "pmorales2l@intel.com", country = "China"), Person(fname = "Thomas", lname = "Kelley", email = "tkelley2m@webnode.com", country = "Ukraine"), Person(fname = "James", lname = "Smith", email = "jsmith2n@google.com.hk", country = "Kenya"), Person(fname = "Diana", lname = "Willis", email = "dwillis2o@theguardian.com", country = "Thailand"), Person(fname = "Marie", lname = "Simmons", email = "msimmons2p@msn.com", country = "Brazil"), Person(fname = "Samuel", lname = "Brown", email = "sbrown2q@geocities.jp", country = "United Kingdom"), Person(fname = "Carlos", lname = "Chapman", email = "cchapman2r@columbia.edu", country = "Indonesia") ) val peopleWithAge = List( Person(_id = 1, fname = "Catherine", lname = "Bennett", age = 81, email = "cbennett0@phoca.cz", country = "Czech Republic"), Person(_id = 2, fname = "Johnny", lname = "Fields", age = 26, email = "jfields1@noaa.gov", country = "Indonesia"), Person(_id = 3, fname = "Ernest", lname = "Smith", age = 65, email = "esmith2@last.fm", country = "Poland"), Person(_id = 4, fname = "Judith", lname = "Peterson", age = 51, email = "jpeterson3@msn.com", country = "Indonesia"), Person(_id = 5, fname = "Norma", lname = "Carroll", age = 76, email = "ncarroll4@mapquest.com", country = "China"), Person(_id = 6, fname = "Kathryn", lname = "Thompson", age = 82, email = "kthompson5@bravesites.com", country = "China"), Person(_id = 7, fname = "John", lname = "Warren", age = 52, email = "jwarren6@cbsnews.com", country = "Portugal"), Person(_id = 8, fname = "Adam", lname = "Mitchell", age = 13, email = "amitchell7@baidu.com", country = "Russia"), Person(_id = 9, fname = "Wanda", lname = "Watson", age = 65, email = "wwatson8@odnoklassniki.ru", country = "Iran"), Person(_id = 10, fname = "Catherine", lname = "Rivera", age = 44, email = "crivera9@umn.edu", country = "Russia"), Person(_id = 11, fname = "Irene", lname = "Gonzalez", age = 70, email = "igonzaleza@behance.net", country = "Croatia"), Person(_id = 12, fname = "Ryan", lname = "Larson", age = 94, email = "rlarsonb@hao123.com", country = "China"), Person(_id = 13, fname = "David", lname = "Sims", age = 13, email = "dsimsc@accuweather.com", country = "Malaysia"), Person(_id = 14, fname = "Heather", lname = "Turner", age = 18, email = "hturnerd@msu.edu", country = "Chile"), Person(_id = 15, fname = "Alice", lname = "Moreno", age = 100, email = "amorenoe@jiathis.com", country = "China"), Person(_id = 16, fname = "Karen", lname = "Howard", age = 78, email = "khowardf@parallels.com", country = "Austria"), Person(_id = 17, fname = "Paula", lname = "Lopez", age = 67, email = "plopezg@google.de", country = "Poland"), Person(_id = 18, fname = "Helen", lname = "Warren", age = 14, email = "hwarrenh@icq.com", country = "Ivory Coast"), Person(_id = 19, fname = "Kathryn", lname = "Mcdonald", age = 78, email = "kmcdonaldi@ucsd.edu", country = "China"), Person(_id = 20, fname = "Jimmy", lname = "Morris", age = 9, email = "jmorrisj@hatena.ne.jp", country = "Vietnam"), Person(_id = 21, fname = "Johnny", lname = "Burton", age = 47, email = "jburtonk@stumbleupon.com", country = "China"), Person(_id = 22, fname = "Brandon", lname = "Alvarez", age = 44, email = "balvarezl@blogspot.com", country = "Greece"), Person(_id = 23, fname = "Alice", lname = "Lawrence", age = 16, email = "alawrencem@parallels.com", country = "China"), Person(_id = 24, fname = "Philip", lname = "Gonzalez", age = 99, email = "pgonzalezn@discovery.com", country = "Portugal"), Person(_id = 25, fname = "Ernest", lname = "Campbell", age = 70, email = "ecampbello@amazon.de", country = "Sweden"), Person(_id = 26, fname = "Martin", lname = "Wood", age = 73, email = "mwoodp@cisco.com", country = "Indonesia"), Person(_id = 27, fname = "Lois", lname = "Bryant", age = 69, email = "lbryantq@diigo.com", country = "Sweden"), Person(_id = 28, fname = "Sharon", lname = "Freeman", age = 5, email = "sfreemanr@etsy.com", country = "Russia"), Person(_id = 29, fname = "Diane", lname = "Lawson", age = 44, email = "dlawsons@amazonaws.com", country = "China"), Person(_id = 30, fname = "Alice", lname = "Fields", age = 47, email = "afieldst@addthis.com", country = "Portugal"), Person(_id = 31, fname = "Alice", lname = "Reyes", age = 39, email = "areyesu@tiny.cc", country = "China"), Person(_id = 32, fname = "Margaret", lname = "James", age = 73, email = "mjamesv@sitemeter.com", country = "Indonesia"), Person(_id = 33, fname = "Martha", lname = "Robinson", age = 78, email = "mrobinsonw@usda.gov", country = "Poland"), Person(_id = 34, fname = "Alice", lname = "Lawson", age = 75, email = "alawsonx@tamu.edu", country = "Canada"), Person(_id = 35, fname = "Bruce", lname = "Chavez", age = 57, email = "bchavezy@tiny.cc", country = "China"), Person(_id = 36, fname = "Sara", lname = "Kelly", age = 66, email = "skellyz@issuu.com", country = "Canada"), Person(_id = 37, fname = "Carol", lname = "Robertson", age = 78, email = "crobertson10@spotify.com", country = "Indonesia"), Person(_id = 38, fname = "Brenda", lname = "Hamilton", age = 14, email = "bhamilton11@wired.com", country = "Thailand"), Person(_id = 39, fname = "Harold", lname = "Patterson", age = 35, email = "hpatterson12@themeforest.net", country = "Armenia"), Person(_id = 40, fname = "Ryan", lname = "Lopez", age = 68, email = "rlopez13@lycos.com", country = "China"), Person(_id = 41, fname = "Ralph", lname = "Russell", age = 97, email = "rrussell14@marketwatch.com", country = "Indonesia"), Person(_id = 42, fname = "Lisa", lname = "Armstrong", age = 13, email = "larmstrong15@fc2.com", country = "Palestinian Territory"), Person(_id = 43, fname = "Daniel", lname = "Harris", age = 68, email = "dharris16@springer.com", country = "Vietnam"), Person(_id = 44, fname = "Timothy", lname = "Harper", age = 18, email = "tharper17@smh.com.au", country = "Poland"), Person(_id = 45, fname = "Jerry", lname = "Weaver", age = 56, email = "jweaver18@ted.com", country = "Peru"), Person(_id = 46, fname = "Mary", lname = "Williamson", age = 73, email = "mwilliamson19@google.ca", country = "China"), Person(_id = 47, fname = "Donald", lname = "Chapman", age = 40, email = "dchapman1a@ed.gov", country = "Brazil"), Person(_id = 48, fname = "Randy", lname = "Mccoy", age = 95, email = "rmccoy1b@51.la", country = "China"), Person(_id = 49, fname = "Stephanie", lname = "Bennett", age = 43, email = "sbennett1c@google.es", country = "Greece"), Person(_id = 50, fname = "Mildred", lname = "Moore", age = 67, email = "mmoore1d@washingtonpost.com", country = "Indonesia"), Person(_id = 51, fname = "Lisa", lname = "George", age = 70, email = "lgeorge1e@geocities.com", country = "Czech Republic"), Person(_id = 52, fname = "Emily", lname = "Myers", age = 7, email = "emyers1f@bigcartel.com", country = "China"), Person(_id = 53, fname = "Andrew", lname = "Wilson", age = 42, email = "awilson1g@answers.com", country = "Croatia"), Person(_id = 54, fname = "Alice", lname = "Morris", age = 29, email = "amorris1h@jimdo.com", country = "Somalia"), Person(_id = 55, fname = "Roger", lname = "Carroll", age = 37, email = "rcarroll1i@wiley.com", country = "New Caledonia"), Person(_id = 56, fname = "Gerald", lname = "Parker", age = 74, email = "gparker1j@symantec.com", country = "China"), Person(_id = 57, fname = "Alan", lname = "Warren", age = 27, email = "awarren1k@com.com", country = "China"), Person(_id = 58, fname = "Kelly", lname = "Morris", age = 84, email = "kmorris1l@i2i.jp", country = "Iran"), Person(_id = 59, fname = "Joe", lname = "Green", age = 56, email = "jgreen1m@slate.com", country = "Guatemala"), Person(_id = 60, fname = "Cheryl", lname = "Vasquez", age = 92, email = "cvasquez1n@sfgate.com", country = "Tunisia"), Person(_id = 61, fname = "Jeffrey", lname = "Carpenter", age = 4, email = "jcarpenter1o@squarespace.com", country = "China"), Person(_id = 62, fname = "Frances", lname = "Palmer", age = 42, email = "fpalmer1p@uiuc.edu", country = "Philippines"), Person(_id = 63, fname = "Roger", lname = "Bryant", age = 47, email = "rbryant1q@oakley.com", country = "Finland"), Person(_id = 64, fname = "Juan", lname = "Hernandez", age = 64, email = "jhernandez1r@sogou.com", country = "Sweden"), Person(_id = 65, fname = "Bruce", lname = "Stewart", age = 94, email = "bstewart1s@constantcontact.com", country = "Japan"), Person(_id = 66, fname = "Fred", lname = "Hunter", age = 81, email = "fhunter1t@diigo.com", country = "China"), Person(_id = 67, fname = "Ernest", lname = "Henderson", age = 64, email = "ehenderson1u@admin.ch", country = "Argentina"), Person(_id = 68, fname = "Anne", lname = "Martin", age = 11, email = "amartin1v@godaddy.com", country = "China"), Person(_id = 69, fname = "Roger", lname = "Washington", age = 50, email = "rwashington1w@naver.com", country = "China"), Person(_id = 70, fname = "Mildred", lname = "Andrews", age = 64, email = "mandrews1x@sciencedaily.com", country = "Portugal"), Person(_id = 71, fname = "Susan", lname = "Martin", age = 82, email = "smartin1y@yahoo.com", country = "Aland Islands"), Person(_id = 72, fname = "Debra", lname = "Ford", age = 9, email = "dford1z@senate.gov", country = "China"), Person(_id = 73, fname = "Shawn", lname = "Nguyen", age = 16, email = "snguyen20@usgs.gov", country = "Costa Rica"), Person(_id = 74, fname = "Jose", lname = "Jordan", age = 74, email = "jjordan21@unblog.fr", country = "Colombia"), Person(_id = 75, fname = "Amy", lname = "Bell", age = 71, email = "abell22@networksolutions.com", country = "Yemen"), Person(_id = 76, fname = "Patrick", lname = "Hansen", age = 45, email = "phansen23@slashdot.org", country = "China"), Person(_id = 77, fname = "Anna", lname = "Olson", age = 26, email = "aolson24@washington.edu", country = "Mongolia"), Person(_id = 78, fname = "Eugene", lname = "Ruiz", age = 58, email = "eruiz25@icio.us", country = "United States"), Person(_id = 79, fname = "Catherine", lname = "Lynch", age = 13, email = "clynch26@bloglines.com", country = "China"), Person(_id = 80, fname = "Kimberly", lname = "Hernandez", age = 65, email = "khernandez27@hatena.ne.jp", country = "Albania"), Person(_id = 81, fname = "Heather", lname = "Jackson", age = 95, email = "hjackson28@businessweek.com", country = "China"), Person(_id = 82, fname = "Joshua", lname = "Wheeler", age = 20, email = "jwheeler29@auda.org.au", country = "China"), Person(_id = 83, fname = "Joseph", lname = "Hayes", age = 87, email = "jhayes2a@ovh.net", country = "Albania"), Person(_id = 84, fname = "Maria", lname = "Robinson", age = 43, email = "mrobinson2b@sohu.com", country = "Botswana"), Person(_id = 85, fname = "Carl", lname = "Alvarez", age = 70, email = "calvarez2c@weebly.com", country = "China"), Person(_id = 86, fname = "Doris", lname = "Young", age = 15, email = "dyoung2d@studiopress.com", country = "France"), Person(_id = 87, fname = "Johnny", lname = "Anderson", age = 53, email = "janderson2e@weibo.com", country = "China"), Person(_id = 88, fname = "Frank", lname = "Day", age = 54, email = "fday2f@google.it", country = "Indonesia"), Person(_id = 89, fname = "Donna", lname = "Perez", age = 22, email = "dperez2g@cocolog-nifty.com", country = "Indonesia"), Person(_id = 90, fname = "Nicholas", lname = "Miller", age = 70, email = "nmiller2h@instagram.com", country = "Peru"), Person(_id = 91, fname = "Rachel", lname = "Reed", age = 81, email = "rreed2i@slate.com", country = "Indonesia"), Person(_id = 92, fname = "Cheryl", lname = "Berry", age = 31, email = "cberry2j@wired.com", country = "Russia"), Person(_id = 93, fname = "Christopher", lname = "Gray", age = 41, email = "cgray2k@quantcast.com", country = "China"), Person(_id = 94, fname = "Lois", lname = "Ryan", age = 63, email = "lryan2l@chronoengine.com", country = "China"), Person(_id = 95, fname = "Earl", lname = "Garza", age = 65, email = "egarza2m@apple.com", country = "China"), Person(_id = 96, fname = "Martin", lname = "Ferguson", age = 40, email = "mferguson2n@marketwatch.com", country = "Taiwan"), Person(_id = 97, fname = "Janet", lname = "Harris", age = 41, email = "jharris2o@pinterest.com", country = "Hungary"), Person(_id = 98, fname = "Alice", lname = "Powell", age = 48, email = "apowell2p@seesaa.net", country = "Brazil"), Person(_id = 99, fname = "Kathy", lname = "Wagner", age = 51, email = "kwagner2q@telegraph.co.uk", country = "China"), Person(_id = 100, fname = "Debra", lname = "Cooper", age = 17, email = "dcooper2r@smh.com.au", country = "Indonesia") ) } ================================================ FILE: demo/webpack.config.dev.js ================================================ 'use strict'; var webpack = require('webpack'); var _ = require('lodash'); module.exports = _.merge( require('./scalajs.webpack.config'), require('./webpack.config.shared'), { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) ], }); ================================================ FILE: demo/webpack.config.prod.js ================================================ 'use strict'; var webpack = require('webpack'); var _ = require('lodash'); module.exports = _.merge( require('./scalajs.webpack.config'), require('./webpack.config.shared'), { plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, screw_ie8: true, conditionals: true, unused: true, comparisons: true, sequences: true, dead_code: true, evaluate: true, if_return: true, join_vars: true }, output: { comments: false } }), new webpack.HashedModuleIdsPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }); ================================================ FILE: demo/webpack.config.shared.js ================================================ 'use strict'; var webpack = require('webpack'); module.exports = { plugins: [ new webpack.NoEmitOnErrorsPlugin(), ], module: { rules: [ { test: /\.css$/, loader: ['style-loader', 'css-loader'] }, { test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, loader: 'url-loader', options: { limit: 20000 } }] } }; ================================================ FILE: demo/webpack.config.test.js ================================================ 'use strict'; var webpack = require('webpack'); var _ = require('lodash'); module.exports = _.merge( require('./webpack.config.shared'), { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('test') }) ], }); ================================================ FILE: doc/CHANGELOG-0.1.md ================================================ # 0.1.0 * [Material-ui](http://chandu0101.github.io/sjrc/#materialui/info) * [ReactListView](http://chandu0101.github.io/sjrc/#reactlistview/info) * [GoogleMap](http://chandu0101.github.io/sjrc/#googlemap/info) * [ReactTable](http://chandu0101.github.io/sjrc/#reacttable/info) * [ReactTagsInput](http://chandu0101.github.io/sjrc/#reacttagsinput/info) * [ReactSelect](http://chandu0101.github.io/sjrc/#reactselect/info) * [ReactGeomIcons](http://chandu0101.github.io/sjrc/#reactgeomicons/info) ================================================ FILE: doc/CHANGELOG-1.0.md ================================================ # 1.0.0-M1 * Completely reorganized the project to use sbt-scalajs-bundler * Incorporated code generator for material-ui, elemental-ui and semantic-ui, baselined to all their latest versions - Semantic "0.68.5", Elemental "0.6.1", Material "0.18.1" * React version "15.5.4" * ReactJS version 1.1.0! * ScalaJS version 0.6.20 * Included an example project ================================================ FILE: doc/CHANGELOG_0.2.md ================================================ # 0.2.0 * Ported to scalajs-react 0.10 * Regenerated all material-ui, added heaps of new props and components. * Deleted bootstrap wrappers for now * Added wrapper for [Elemental UI](http://elemental-ui.com/) - Roberto Leibman * [TimerMixin](https://github.com/chandu0101/scalajs-react-components/blob/master/core/src/main/scala/chandu0101/scalajs/react/components/mixins/TimerMixin.scala) * Corrected MuiRadioButtonGroup onChange property type - @enijns * [ReactInfinite](http://chandu0101.github.io/sjrc/#reactinfinite/info) * [Spinner](http://chandu0101.github.io/sjrc/#spinner/info) ================================================ FILE: doc/CHANGELOG_0.3.md ================================================ # 0.3.0 * Remove accidental dependency upon utest for production code * Bumped scalajs-react to 0.10.3 * Made MuiSpacings and MuiPalette easier to use to specify theme * Added Svg icons ================================================ FILE: doc/CHANGELOG_0.4.md ================================================ # 0.4.1 * Upgraded to Scala-js 0.6.7 since it has important fixes * Added a bunch of props to MuiIconButton # 0.4.0 * Material-ui bumped from 0.13 to 0.14.4 * Bumped Scala-js to 0.6.6 to avoid some implicit resolution issues * Bumped scalacss dependency * Rewrote React Select wrapper, added Async support * Added React Slick wrapper * Move inference driving implicits to `chandu0101.scalajs.react.components.Implicits`. See `README` for more info * Moved `CssProperties` to `chandu0101.scalajs.react.components` as it isnt specific to material-ui * Big changes in Material-ui 0.14 * Removed old menus from default imports, so it's not necessary to override anymore * Changed names of derived enum classes from Component/prop to a name derived from its values. For example `labelPosition: js.UndefOr[MuiCheckboxLabelPosition]` => `labelPosition: js.UndefOr[LeftRight]` * Fixed a bug/common warning with one child wrapped in a js array ================================================ FILE: doc/CHANGELOG_0.5.md ================================================ # 0.5.0 * Bumped to react 0.15.3 * Material-ui bumped from 0.14.4 to 0.15.2 * Bumped Scala-js to 0.6.11 * Bumped Elemental-ui to work with new react, not really tested * Changes in Material-ui 0.15 * There are many small changes in the library as they try to make the API more sane and more composable. It's recommended to read through the [Changelog](https://github.com/callemall/material-ui/blob/master/CHANGELOG.md) * Javascript imports changed (also described in changelog) * Now need to use `MuiThemeProvider` instead of `ThemeInstaller.installMuiContext()` * Added a demo for themes to showcase how to use and adjust current theme * Now some of the components are generic, for example `MuiDropDownMenu[T]`. This means that you can get back sane things in callbacks. ================================================ FILE: doc/CHANGELOG_0.6.md ================================================ # 0.6.0 * Cross built for Scala 2.12 * Bumped to react 0.15.4.2 * Bumped Scala-js to 0.6.14 * Material-ui bumped to 0.17.0. - A lot of the Event handlers changed type, they are all now React*EventI, just to signal that it was never well thought out which type they had. ================================================ FILE: doc/CHANGELOG_0.7.md ================================================ # 0.7.0 - Upgraded to scalajs-react 1.0.1. This also involves bumping scala-js to 0.6.17. Usage for most components should be very similar to how it was previously, however callbacks etc. now often take a VdomNode/VdomElement rather than ReactNode/ReactElement. ================================================ FILE: doc/CHANGELOG_0.8.md ================================================ # 0.8.0 - scalajs-react 1.1.0 - new component: react-split-pane (thanks to @aatoni) - better ReactTable (thanks @rleibman) ================================================ FILE: doc/CONTRIBUTE.md ================================================ #Contribute * There are no global rules for this project, follow whatever works for you. * If you're working on new component please create an [issue](https://github.com/chandu0101/scalajs-react-components/issues), so that we can minimize duplicate works, and you may find other awesome contributors. * If you want to create a wrapper for third party components (js/jsx world) then follow this tutorial [InteropWithThirdparty](https://github.com/chandu0101/scalajs-react-components/tree/master/doc/InteropWithThirdParty.md) * To create a demo for your new component(like adding routes /pages /deps/..) check this [changelist](https://github.com/chandu0101/scalajs-react-components/commit/8619624d6de6be91dca7f6761c8ff48199084cf6) as an example. * That's all , have fun , happy coding :) * Keep in mind that some code is auto-generated (material-ui for now). File bug reports instead of PR for those ================================================ FILE: doc/InteropWithThirdParty.md ================================================ # Interop With Third Party Components If you want to use a reactjs component in your scalajs-react project then you must define a wrapper for js component. ## Example Let say we have a JS component , Name : AwesomeJSComp , props .. ```js propTypes: { numberOfLines: React.PropTypes.number.isRequired, onPress: React.PropTypes.func, // function with zero args suppressHighlighting: React.PropTypes.bool, testID: React.PropTypes.string, } ``` To create a wrapper first we must map js types to scala types ```scala numberOfLines: Int, onPress: js.UndefOr[() => Unit] = js.undefined, suppressHighlighting: js.UndefOr[Bool] = js.undefined, testID: js.UndefOr[String] = js.undefined ``` make sure you have js.UndefOr[T] for non required fields.we also need a method which converts our scala fields to js.Object ```scala def toJS = { val p = js.Dynamic.literal() p.updateDynamic("numberOfLines")(numberOfLines) onPress.foreach(v => p.updateDynamic("onPress")(v)) suppressHighlighting.foreach(v => p.updateDynamic("suppressHighlighting")(v)) testID.foreach(v => p.updateDynamic("testID")(v)) p } ``` that's it, now we have all required bits , just composing bits is pending.lets do that ```scala case class AwesomeJSCompWrapper( numberOfLines: Int, onPress: js.UndefOr[() => Unit] = js.undefined, suppressHighlighting: js.UndefOr[Bool] = js.undefined, testID: js.UndefOr[String] = js.undefined) { def toJS = { val p = js.Dynamic.literal() p.updateDynamic("numberOfLines")(numberOfLines) onPress.foreach(v => p.updateDynamic("onPress")(v)) suppressHighlighting.foreach(v => p.updateDynamic("suppressHighlighting")(v)) testID.foreach(v => p.updateDynamic("testID")(v)) p } def apply(children : ReactNode*) = { val f = React.asInstanceOf[js.Dynamic].createFactory(js.Dynamic.global.AwesomeJSComp) // access real js component , make sure you wrap with createFactory (this is needed from 0.13 onwards) f(toJS, children.toJsArray).asInstanceOf[ReactComponentU_] } } ``` hola you successfully created wrapper! :) To use this add original js comp source to jsDependencies in sbt build file/or what ever build tool you use. now you can use AwesomeJSCmpWrapper like a normal scalajs-react component ```scala val component = ReactComponentB.static("Demo", <.div( AwesomeJSCmpWrapper(numberOfLines = 3,testID = "id")() ) ).build ``` ## Wrapper Generator Manual wrapper creation is easy but its a tedius task! To generate wrapper automatically go to following link and fill required fields then hit Generate Button. http://chandu0101.github.io/reactjs-scalajs/ 1) Scala component name text field : Enter you scala wrapper name(Example : AwesomeJSCmpWrapper) 2) Js component text field : Enter full access path to js component (Example : js.Dynamic.global.AwesomeJSComp) 3) WithChildren check box : By default it is checked ,uncheck this if your js component doesn't allow children 4) JS component props textview : Place your js comp props with ``,`` separated ```js numberOfLines: React.PropTypes.number.isRequired, onPress: React.PropTypes.func, suppressHighlighting: React.PropTypes.bool, testID: React.PropTypes.string, ``` Now click on Generate Button :) ## Refs Some times we may want to call public(exposed) methods of mounted react component's , we use refs to achieve this Lets assume that our AwesomeJSComp has public method hideMe() JS World : ```js // pseudo code
function test() { this.refs.awesomecomp.hideMe() } ``` Scala World : To achieve same thing in scala world ,add a new field ref to our AwesomeJSCompWrapper and then create a facade for public methods of AwesomeJSComp ```scala trait AwesomeJSCompWrapperM extends js.Object { def hideMe() : Unit = js.native ... more public methods } ``` scala example : ```scala class RB(t:BackendScope[_,_]) { def test = { val awesomeJSRef = Ref.toJS[AwesomeJSCompWrapperM]("awesomescalajs")(t) // get ref if(awesomeJSRef.isDefined) awesomeJSRef.get.hideMe() } } val C = ReactComponentB[Unit]("RefsToThirdPartyCompDemo") .stateless .backend(new RB(_)) .render((P,S,B) => { div( AwesomeJSCompWrapper(ref = "awesomescalajs",..props)() ) }) .build ``` ##Real World Examples https://github.com/japgolly/scalajs-react/blob/master/core/src/main/scala/japgolly/scalajs/react/Addons.scala https://github.com/chandu0101/scalajs-react-components/tree/master/core/src/main/scala/chandu0101/scalajs/react/components/materialui https://github.com/chandu0101/scalajs-react-native ================================================ FILE: example/.scalafmt.conf ================================================ style = defaultWithAlign danglingParentheses = true indentOperator = spray maxColumn = 100 project.excludeFilters = [".*\\.sbt"] rewrite.rules = [RedundantBraces, RedundantParens, SortImports] spaces.inImportCurlyBraces = true unindentTopLevelOperators = true ================================================ FILE: example/.travis.yml ================================================ language: scala scala: - 2.12.2 jdk: - oraclejdk8 ================================================ FILE: example/LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: example/NOTICE ================================================ Copyright 2017 rleibman ================================================ FILE: example/README.md ================================================ # example # Welcome to the reactjs-component example project! This is a dead simple, standalone, "hello world" project that shows you how to get started with a scalajs-react-components project. Simply clone this project and run sbt fastOptJS::webpack fastOptJS::startWebpackDevServer For a much bigger example of all the components, look at the demo project! ## Contribution policy ## Contributions via GitHub pull requests are gladly accepted from their original author. Along with any pull requests, please state that the contribution is your original work and that you license the work to the project under the project's open source license. Whether or not you state this explicitly, by submitting any copyrighted material via pull request, email, or other means you agree to license the material under the project's open source license and warrant that you have the legal authority to do so. ## License ## This code is open source software licensed under the [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0) license. ================================================ FILE: example/build.sbt ================================================ // ***************************************************************************** // Projects // ***************************************************************************** lazy val example = project .in(file(".")) .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin) .settings(settings) .settings( libraryDependencies ++= Seq( "com.github.japgolly.scalajs-react" %%% "core" % "1.0.1", "com.github.japgolly.scalajs-react" %%% "extra" % "1.0.1", "com.olvind" %%% "scalajs-react-components" % "1.0.+" ) ) // ***************************************************************************** // Settings // ***************************************************************************** lazy val settings = commonSettings ++ bundlerSettings lazy val commonSettings = Seq( scalaVersion := "2.12.2", organization := "net.leibman", mappings.in(Compile, packageBin) += baseDirectory.in(ThisBuild).value / "LICENSE" -> "LICENSE", scalacOptions ++= Seq( "-unchecked", "-deprecation", "-language:_", "-target:jvm-1.8", "-encoding", "UTF-8" ) ) lazy val SuiVersion = "0.68.5" lazy val EuiVersion = "0.6.1" lazy val MuiVersion = "0.18.1" lazy val reactVersion = "15.5.4" lazy val bundlerSettings = Seq( version in webpack := "2.6.1", version in installWebpackDevServer := "2.4.5", scalaJSUseMainModuleInitializer := true, scalaJSUseMainModuleInitializer.in(Test) := false, artifactPath.in(Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value / ((moduleName in fastOptJS).value + "-opt.js")), webpackResources := webpackResources.value +++ PathFinder( Seq( baseDirectory.value / "index.html" )) ** "*.*", webpackEmitSourceMaps := false, enableReloadWorkflow := true, useYarn := true, npmDependencies.in(Compile) := Seq( "elemental" -> EuiVersion, "highlight.js" -> "9.9.0", "material-ui" -> MuiVersion, "react" -> reactVersion, "react-dom" -> reactVersion, "react-addons-create-fragment" -> reactVersion, "react-addons-css-transition-group" -> "15.0.2", "react-addons-pure-render-mixin" -> "15.5.2", "react-addons-transition-group" -> "15.0.0", "react-addons-update" -> "15.5.2", "react-geomicons" -> "2.1.0", "react-infinite" -> "0.11.0", "react-select" -> "1.0.0-rc.5", "react-slick" -> "0.14.11", "react-spinner" -> "0.2.7", "react-tagsinput" -> "3.16.1", "react-tap-event-plugin" -> "2.0.1", "semantic-ui-react" -> SuiVersion, "svg-loader" -> "0.0.2" ) ) ================================================ FILE: example/index.html ================================================ scalajs-react components demo
================================================ FILE: example/project/build.properties ================================================ sbt.version = 0.13.15 ================================================ FILE: example/project/plugins.sbt ================================================ addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.17") addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.6.0") ================================================ FILE: example/src/main/scala/HelloWorldApp.scala ================================================ package demo import chandu0101.scalajs.react.components.ReactTapEventPlugin import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic.{global => g} import scala.scalajs.js.JSApp import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.html_<^._ import chandu0101.scalajs.react.components.elementalui.EuiButton import chandu0101.scalajs.react.components.elementalui.ButtonType object HelloWorldApp extends JSApp { override def main(): Unit = { // remove waiting page stuff if (!js.isUndefined(g.loadingElement)) { g.document.body.removeChild(g.loadingElement) g.loadingElement = js.undefined dom.document.body.className.replace("pg-loading", "") dom.document.body.className += " pg-loaded" } //todo: dev-server complains that we load several times? ReactTapEventPlugin(js.undefined) // ReactTapEventPlugin val component = ScalaComponent .builder[Unit]("component") .renderStatic( <.div(^.padding := 100.px, EuiButton(`type` = ButtonType.primary)("Hello World!")) ) .build component().renderIntoDOM(dom.document.getElementById("container")) () } } ================================================ FILE: gen/src/main/scala/com/olvind/DomTypes.scala ================================================ package com.olvind case object DomNode extends DomType("") case object DomElement extends DomType("FromHtml") case object DomInput extends DomType("FromInput") { private val formMethodType = com.olvind.Enum(CompName("Input"), Seq("get", "post"), "FormMethodType") private val formTarget = com.olvind.Enum(CompName("Input"), Seq("_blank", "_self", "_parent", "_top", "framename"), "FormTarget") private val inputAutoComplete = com.olvind.Enum(CompName("Input"), Seq("on", "off"), "AutoComplete") private val inputType = com.olvind.Enum( CompName("Input"), Seq( "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week" ), "InputType" ) private val inputEncodingType = com.olvind.Enum( CompName("Input"), Seq("application/x-www-form-urlencoded", "multipart/form-data", "text/plain"), "InputEncodingType") override val props = super.props ++ Seq( ParsedProp( PropName("accept"), baseType = Normal("String"), commentOpt = Some( PropComment( "Specifies the types of files that the server accepts (only for type='file')")) ), ParsedProp(PropName("alt"), baseType = Normal("String"), commentOpt = Some( PropComment("Specifies an alternate text for images (only for type='image')"))), ParsedProp( PropName("autocomplete"), baseType = inputAutoComplete, commentOpt = Some(PropComment("Specifies whether an element should have autocomplete enabled")) ), ParsedProp( PropName("autofocus"), baseType = Normal("Boolean"), commentOpt = Some( PropComment( "Specifies that an element should automatically get focus when the page loads")) ), ParsedProp( PropName("checked"), baseType = Normal("Boolean"), commentOpt = Some(PropComment( "Specifies that an element should be pre-selected when the page loads (for type='checkbox' or type='radio')")) ), ParsedProp(PropName("dirname"), baseType = Normal("Boolean"), commentOpt = Some(PropComment("Specifies that the text direction will be submitted"))), ParsedProp(PropName("disabled"), baseType = Normal("Boolean"), commentOpt = Some(PropComment("Specifies that an element should be disabled"))), ParsedProp(PropName("form"), baseType = Normal("String"), commentOpt = Some(PropComment("Specifies one or more forms the element belongs to"))), ParsedProp( PropName("formaction"), baseType = Normal("String"), commentOpt = Some(PropComment( "Specifies the URL of the file that will process the input control when the form is submitted (for type='submit' and type='image')")) ), ParsedProp( PropName("formenctype"), baseType = inputEncodingType, commentOpt = Some(PropComment( "Specifies how the form-data should be encoded when submitting it to the server (for type='submit' and type='image')")) ), ParsedProp( PropName("formmethod"), baseType = formMethodType, commentOpt = Some(PropComment( "Defines the HTTP method for sending data to the action URL (for type='submit' and type='image')")) ), ParsedProp( PropName("formnovalidate"), baseType = Normal("Boolean"), commentOpt = Some(PropComment("Defines that form elements should not be validated when submitted")) ), ParsedProp( PropName("formtarget"), baseType = formTarget, commentOpt = Some(PropComment( "Specifies where to display the response that is received after submitting the form (for type='submit' and type='image')")) ), ParsedProp( PropName("height"), baseType = Normal("Int"), commentOpt = Some(PropComment("Specifies the height of an element (only for type='image')"))), ParsedProp( PropName("list"), baseType = Normal("String"), commentOpt = Some(PropComment( "Refers to a element that contains pre-defined options for an element")) ), ParsedProp(PropName("max"), baseType = Normal("Long | String"), commentOpt = Some(PropComment("Specifies the maximum value for an element"))), ParsedProp( PropName("maxlength"), baseType = Normal("Int"), commentOpt = Some( PropComment("Specifies the maximum number of characters allowed in an element"))), ParsedProp( PropName("min"), baseType = Normal("Long | String"), commentOpt = Some(PropComment("Specifies a minimum value for an element"))), ParsedProp( PropName("multiple"), baseType = Normal("Boolean"), commentOpt = Some( PropComment("Specifies that a user can enter more than one value in an element")) ), ParsedProp(PropName("name"), baseType = Normal("String"), commentOpt = Some(PropComment("Specifies the name of an element"))), ParsedProp( PropName("pattern"), baseType = Normal("String"), commentOpt = Some( PropComment( "Specifies a regular expression that an element's value is checked against")) ), ParsedProp( PropName("placeholder"), baseType = Normal("String"), commentOpt = Some( PropComment( "Specifies a short hint that describes the expected value of an element")) ), ParsedProp(PropName("readonly"), baseType = Normal("Boolean"), commentOpt = Some(PropComment("Specifies that an input field is read-only"))), ParsedProp( PropName("required"), baseType = Normal("Boolean"), commentOpt = Some( PropComment( "Specifies that an input field must be filled out before submitting the form")) ), ParsedProp(PropName("size"), baseType = Normal("Int"), commentOpt = Some(PropComment("Specifies the width; in characters; of an element"))), ParsedProp( PropName("src"), baseType = Normal("String"), commentOpt = Some( PropComment( "Specifies the URL of the image to use as a submit button (only for type='image')")) ), ParsedProp(PropName("step"), baseType = Normal("Int"), commentOpt = Some(PropComment("Specifies the legal number intervals for an input field"))), ParsedProp(PropName("type"), baseType = inputType, commentOpt = Some(PropComment("Specifies the type element to display"))), ParsedProp(PropName("value"), baseType = Normal("String"), commentOpt = Some(PropComment("Specifies the value of an element "))), ParsedProp( PropName("width"), baseType = Normal("Int"), commentOpt = Some(PropComment("Specifies the width of an element (only for type='image')"))) ) } case object DomTextArea extends DomType("FromTextArea") sealed abstract class DomType(val suffix: String) { def props: Seq[ParsedProp] = Seq() private def handler(name: String, param: String): ParsedProp = { ParsedProp( name = PropName(name), isRequired = false, baseType = Normal(s"$param${suffix} => Callback"), commentOpt = None, deprecatedMsg = None, inheritedFrom = Some(CompName("DOM")) ) } val handlers: Seq[ParsedProp] = Seq( handler("onAnimationEnd", "ReactEvent"), handler("onAnimationIteration", "ReactEvent"), handler("onAnimationStart", "ReactEvent"), handler("onBlur", "ReactFocusEvent"), handler("onChange", "ReactEvent"), handler("onClick", "ReactMouseEvent"), handler("onCompositionEnd", "ReactCompositionEvent"), handler("onCompositionStart", "ReactCompositionEvent"), handler("onCompositionUpdate", "ReactCompositionEvent"), handler("onContextMenu", "ReactEvent"), handler("onCopy", "ReactClipboardEvent"), handler("onCut", "ReactClipboardEvent"), handler("onDoubleClick", "ReactMouseEvent"), handler("onDrag", "ReactDragEvent"), handler("onDragEnd", "ReactDragEvent"), handler("onDragEnter", "ReactDragEvent"), handler("onDragExit", "ReactDragEvent"), handler("onDragLeave", "ReactDragEvent"), handler("onDragOver", "ReactDragEvent"), handler("onDragStart", "ReactDragEvent"), handler("onDrop", "ReactDragEvent"), handler("onFocus", "ReactFocusEvent"), handler("onInput", "ReactKeyboardEvent"), handler("onKeyDown", "ReactKeyboardEvent"), handler("onKeyPress", "ReactKeyboardEvent"), handler("onKeyUp", "ReactKeyboardEvent"), handler("onMouseDown", "ReactMouseEvent"), handler("onMouseEnter", "ReactMouseEvent"), handler("onMouseLeave", "ReactMouseEvent"), handler("onMouseMove", "ReactMouseEvent"), handler("onMouseUp", "ReactMouseEvent"), handler("onPaste", "ReactClipboardEvent"), handler("onScroll", "ReactUIEvent"), handler("onSelect", "ReactUIEvent"), handler("onSubmit", "ReactEvent"), handler("onTouchCancel", "ReactTouchEvent"), handler("onTouchEnd", "ReactTouchEvent"), handler("onTouchMove", "ReactTouchEvent"), handler("onTouchStart", "ReactTouchEvent"), handler("onTransitionEnd", "ReactTouchEvent"), handler("onWheel", "ReactWheelEvent") ) } ================================================ FILE: gen/src/main/scala/com/olvind/OutputFolder.scala ================================================ package com.olvind import ammonite.ops.FileType.Dir import ammonite.ops.{Path, mkdir, pwd} import scala.util.{Failure, Success, Try} object OutputFolder { def unapply(s: String): Option[Path] = Try { val p = Path(s, pwd) if (!exists(p)) { mkdir(p) } (p, p.fileType) } match { case Success((p, Dir)) => Some(p) case Success((p, other)) => System.err.println(s"Illegal argument: s. must be folder") None case Failure(th) => System.err.println(s"Illegal argument $s: ${th.getMessage}") None } } ================================================ FILE: gen/src/main/scala/com/olvind/Runner.scala ================================================ package com.olvind import java.io.File import ammonite.ops.{Path, RelPath} import com.olvind.requiresjs._ import scala.collection.mutable object Runner { def preludeFor(library: Library): String = s"""package chandu0101.scalajs.react.components |package ${library.name} | |import chandu0101.macros.tojs.JSMacro |import japgolly.scalajs.react._ |import japgolly.scalajs.react.raw._ |import japgolly.scalajs.react.vdom._ |import org.scalajs.dom |import scala.scalajs.js |import scala.scalajs.js.`|` | |/** | * This file is generated - submit issues instead of PR against it | */ """.stripMargin def destinationPathFor(outputPath: Path, prefixOpt: Option[String], comp: CompName): Path = { val baseFile = comp.value + ".scala" val filename = prefixOpt.fold(baseFile)(_ + baseFile) outputPath / filename } def foundComponentsFor(library: Library): Seq[FoundComponent] = { val visited = mutable.HashSet.empty[Path] def flattenScan(r: Required): Seq[FoundComponent] = r match { case NotFound(path) => System.err.println(s"not found required path: $path") Seq.empty case Single(n, c) => Seq(c) case Multiple(path, rs) => if (visited.contains(path)) { Seq.empty } else { visited += path val requireds: Seq[Required] = rs.map(_.run).toList val recursive: Seq[FoundComponent] = requireds flatMap flattenScan System.err.println(s"Found in path $path: ${recursive.map(_.name.value)}") recursive } } library.locations.map(requiresjs.Require(_, library.indexNames)).flatMap(flattenScan) } def apply(library: Library, outputFolder: Path): Seq[Path] = { val foundComponents: Seq[FoundComponent] = foundComponentsFor(library) val allFound: Map[CompName, FoundComponent] = foundComponents.map(c => c.name -> c).toMap val (mainFiles: Seq[PrimaryOutFile], secondaryFiles: Seq[SecondaryOutFile]) = library.components.foldLeft((Seq.empty[PrimaryOutFile], Seq.empty[SecondaryOutFile])) { case ((ps, ss), c) => val parsed: ParsedComponent = ParseComponent(allFound, library, c) val (primaryFile, secondaryFile) = Printer(library.prefixOpt.getOrElse(""), parsed) (ps :+ primaryFile, ss ++ secondaryFile) } val fullOutputPath = outputFolder / RelPath( library.packageName.replaceAll("\\.", if (File.separator == "\\") "\\\\" else File.separator)) fullOutputPath.toIO.mkdirs() val prelude: String = preludeFor(library) val secondary: Path = fullOutputPath / "gen-types.scala" printToFile(secondary) { w => w.println(prelude) secondaryFiles.sortBy(_.content).distinct.foreach { case file => w.println(file.content) w.println("") } } val outs: Seq[(PrimaryOutFile, Path)] = mainFiles map (f => (f, destinationPathFor(fullOutputPath, library.prefixOpt, f.filename))) outs.foreach { case (PrimaryOutFile(compName, content, secondaries), file) => printToFile(file) { w => w.println(prelude + content) secondaries.foreach { case SecondaryOutFile(_, c) => w.println("") w.println(c) } } } outs.map(_._2) :+ secondary } } ================================================ FILE: gen/src/main/scala/com/olvind/componentParsers.scala ================================================ package com.olvind object ParseComponent { val ignoredMembers: Set[String] = Set( "render", "componentDidMount", "componentWillMount", "componentWillReceiveProps", "componentDidUpdate", "componentWillUnmount", "shouldComponentUpdate" ) def apply( scope: Map[CompName, requiresjs.FoundComponent], library: Library, comp: ComponentDef ): ParsedComponent = { val propTypes: Map[PropName, PropUnparsed] = scope .get(comp.name) .map(_.props) .getOrElse( panic(s"No Proptypes found for ${comp.name}") ) val inheritedProps: Map[PropName, PropUnparsed] = comp.shared match { case None => Map.empty case Some(shared) => scope .get(shared.name) .map(_.props) .getOrElse( panic(s"$comp: No Proptypes found for $shared") ) } val methodClassOpt: Option[ParsedMethodClass] = scope .get(comp.name) .flatMap(_.methods) .map(_.filterNot(m ⇒ ignoredMembers(m.name) || m.name.startsWith("handle") || m.name.startsWith("_"))) .filter(_.nonEmpty) .map( members ⇒ ParsedMethodClass( library.prefixOpt.getOrElse("") + comp.name + "M", members.toSeq.sortBy(_.name).map(library.memberMapper(comp.name)) )) val basicFields: Seq[ParsedProp] = Seq( ParsedProp(PropName("key"), isRequired = false, Normal("String"), None, None, None), ParsedProp(PropName("ref"), isRequired = false, Normal(methodClassOpt.fold("String")(c => c.className + " => Unit")), None, None, None) ) val parsedProps: Seq[ParsedProp] = (inheritedProps ++ propTypes) .filterNot(t => basicFields.exists(_.name == t._1)) .toSeq .sortBy(p => (p._2.fromComp != comp.name, p._1.clean.value)) .map { case (propName, PropUnparsed(origComp, tpe, commentOpt)) => ParseProp( library, comp.name, origComp, propName, tpe, commentOpt ) } val domProps: Seq[ParsedProp] = comp.domeTypeOpt .map(domType => domType.handlers ++ domType.props) .toSeq .flatten .filterNot(p ⇒ parsedProps.exists(_.name == p.name)) ParsedComponent(comp, basicFields ++ parsedProps ++ domProps, methodClassOpt) } } object ParseProp { // "Deprecated(string, 'Instead, use a custom `actions` property.')" val Pattern = "Deprecated\\(([^,]+), '(.+)'\\)".r def apply( library: Library, compName: CompName, origCompName: CompName, propName: PropName, propString: PropTypeUnparsed, commentOpt: Option[PropComment] ): ParsedProp = { val _clean: String = propString.value .replace("PropTypes.", "") .replace(".isRequired", "") /* old style */ .replace("_react2['default'].", "") //TODO: this is fairly mui specific, and actually breaks Sui .replace("_utilsPropTypes2['default'].", "Mui.") .replace("(0, _utilsDeprecatedPropType2['default'])", "Deprecated") /* new style */ .replace("_react2.default.", "") .replace("_propTypes2.default.", "Mui.") .replace("(0, _deprecatedPropType2.default)", "Deprecated") /* even another style*/ .replace("_react.", "") val (typeStr: String, deprecatedOpt: Option[String]) = _clean match { case Pattern(tpe, depMsg) => (tpe, Some(depMsg)) case tpe => (tpe, None) } val mappedType: Type = library.typeMapper(origCompName, propName, typeStr) val isRequired: Boolean = propString.value.contains(".isRequired") val inheritedFrom: Option[CompName] = if (compName == origCompName) None else Some(origCompName) ParsedProp( propName, isRequired && inheritedFrom.isEmpty, mappedType, commentOpt, deprecatedOpt, inheritedFrom ) } } ================================================ FILE: gen/src/main/scala/com/olvind/eui/EuiLibrary.scala ================================================ package com.olvind package eui import ammonite.ops._ import scala.language.implicitConversions case class EuiLibrary(base: Path) extends Library { /* todo: make requiresjs clever enough to figure this out by itself */ override val locations = Seq( base / 'lib // / 'components ) override val prefixOpt = Some("Eui") override val name = "elementalui" override val typeMapper = EuiTypeMapper override val memberMapper = EuiTypeMemberMethodMapper override val indexNames = Set("Elemental.js", "index.js") override val packageName = "chandu0101.scalajs.react.components.elementalui" val formField = ComponentDef(CompName("FormField"), forceChildren = true, domeTypeOpt = Some(DomInput)) val components: Seq[ComponentDef] = Seq( // ComponentDef(CompName("BlankState")), // ComponentDef(CompName("BlankStateHeading")), //Error, two components in one file // ComponentDef(CompName("Section")), // ComponentDef(CompName("Body")), // ComponentDef(CompName("Footer")), // ComponentDef(CompName("Header")), ComponentDef(CompName("ElementalAlert")), ComponentDef(CompName("ButtonGroup")), ComponentDef(CompName("Button"), forceChildren = true, domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Card")), ComponentDef(CompName("Col")), // Error, comments ComponentDef(CompName("Container"), forceChildren = true), ComponentDef(CompName("Checkbox"), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Dropdown")), ComponentDef(CompName("EmailInputGroup"), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Dropzone")), ComponentDef(CompName("FileUpload"), domeTypeOpt = Some(DomInput)), formField, ComponentDef(CompName("FormIconField"), forceChildren = true, shared = Some(formField), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("FormIcon"), forceChildren = true), ComponentDef(CompName("FormInput"), forceChildren = true, domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Form"), forceChildren = true), ComponentDef(CompName("FormLabel"), forceChildren = true), ComponentDef(CompName("FormNote"), forceChildren = true), ComponentDef(CompName("FormRow"), forceChildren = true), ComponentDef(CompName("FormSelect"), forceChildren = true), ComponentDef(CompName("Glyph"), forceChildren = true), ComponentDef(CompName("InputGroup"), forceChildren = true), ComponentDef(CompName("InputGroupSection"), forceChildren = true), ComponentDef(CompName("ModalBody"), forceChildren = true), ComponentDef(CompName("ModalFooter"), forceChildren = true), ComponentDef(CompName("ModalHeader"), forceChildren = true), ComponentDef(CompName("Modal"), forceChildren = true), // ComponentDef(CompName("Page")), ComponentDef(CompName("Pagination")), ComponentDef(CompName("PasswordInputGroup"), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Pill")), ComponentDef(CompName("RadioGroup")), ComponentDef(CompName("ResponsiveText"), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Row")), ComponentDef(CompName("SegmentedControl")), ComponentDef(CompName("Spinner")), ComponentDef(CompName("Table")), ComponentDef(CompName("Radio"), domeTypeOpt = Some(DomInput)) ) } ================================================ FILE: gen/src/main/scala/com/olvind/eui/EuiRunner.scala ================================================ package com.olvind package eui import ammonite.ops.Path object EuiRunner extends App { args.toList match { case OutputFolder(buildFolder) :: OutputFolder(outputFolder) :: Nil => val outs: Seq[Path] = Runner(EuiLibrary(buildFolder), outputFolder) case _ => System.err.println("Syntax: EuiRunner ") System.exit(1) } } ================================================ FILE: gen/src/main/scala/com/olvind/eui/EuiTypeMapper.scala ================================================ package com.olvind package eui object EuiTypeMapper extends TypeMapper { val typeT = Normal("T").generic("T") val typeTJs = Normal("T").genericJs("T") def apply(compName: CompName, fieldName: PropName, typeString: String): Type = { def is(s: String) = fieldName.value.toLowerCase contains s.toLowerCase def split(drop: Int, s: String) = s.split("[\'\"\\(\\)\\[\\],\\s]").map(_.trim).filterNot(_.isEmpty).drop(drop) (compName.value, fieldName.value, typeString) match { // /* Double => Int */ // case (_, "autoHideDuration", "number") => Normal("Int") // // /* specific */ // case ("AutoComplete", "dataSource", "Mui.array") => Normal("js.Array[String]") // // /* general */ case ("FormIconField", "iconKey", _) => Normal("Octicons") case ("Dropdown", "items", _) => Normal("js.Array[EuiDropdownMenuItem]") case ("Modal", "width", _) => Normal("ModalSize | Double") case (_, _, "array") => Normal("js.Array[js.Any]") case (_, "children", "any") => Normal("VdomNode") case (_, _, "any") => Normal("js.Any") case (_, _, "bool") => Normal("Boolean") case (_, _, "Form") => Normal("Form") case (_, _, "React.bool") => Normal("Boolean") case (_, _, "string") => Normal("String") case (_, _, "React.string") => Normal("String") case (_, _, "React.object") => Normal("js.Object") case (_, _, "object") => Normal("js.Object") case (_, "children", "React.node") => Normal("VdomNode") case (_, "children", "node") => Normal("VdomNode") case (_, _, "React.node") => Normal("ReactNode") case (_, "children", "React.element") => Normal("VdomNode") case (_, _, "React.element") => Normal("ReactElement") case (_, _, "number") => Normal("Double") case (_, _, "React.number") => Normal("Double") case ("Glyph", "icon", _) => Normal("Octicons") case ("FormField", "width", enum) => Enum(compName, split(1, enum), "FormFieldWidth") case ("Glyph", "type", enum) => Enum(compName, split(1, enum), "GlyphType") case ("Form", "type", enum) => Enum(compName, split(1, enum), "FormType") case (_, _, "React.oneOf(COLOR_VARIANTS)") => Enum( compName, Seq("danger", "default", "primary", "success", "warning"), "ColorVariant" ) case (_, _, "React.oneOf(BUTTON_SIZES)") => Enum( compName, Seq("lg", "sm", "xs"), "ButtonSize" ) case (_, _, "React.oneOf(NOTE_TYPES)") => Enum( compName, Seq("default", "primary", "success", "warning", "danger"), "NoteType" ) case (_, _, "React.oneOf(BUTTON_TYPES)") => Enum( compName, Seq( "default", "default-primary", "default-success", "default-warning", "default-danger", "hollow-primary", "hollow-success", "hollow-warning", "hollow-danger", "primary", "success", "warning", "danger", "link", "link-text", "link-primary", "link-success", "link-warning", "link-danger", "link-cancel", "link-delete" ), "ButtonType" ) case (_, _, "React.oneOf(ALERT_TYPES)") => Enum(compName, Seq("danger", "error", "info", "primary", "success", "warning", "success_inverted"), "AlertType") case (_, _, enum) if enum.contains("oneOfType") => Normal(split(1, enum) map (t => apply(compName, fieldName, t)) map (_.name) mkString " | ") case (_, _, enum) if enum.contains("oneOf") => Enum(compName, split(1, enum)) case (_, "children", "React.arrayOf(React.element)") => Normal("js.Array[VdomElement]") case (_, _, "React.array") => Normal("js.Array[js.Object]") case ("FormSelect", "options", array) => Normal("js.Array[FormSelectOption]") case (_, _, "func") => Normal(EuiTypeMapperFunction(compName, fieldName)) case (_, _, "React.func") => Normal(EuiTypeMapperFunction(compName, fieldName)) // case a=> // println(a) // throw new Error() } } } ================================================ FILE: gen/src/main/scala/com/olvind/eui/EuiTypeMapperFunction.scala ================================================ package com.olvind package eui object EuiTypeMapperFunction { val Callback = "Callback" def apply(compName: CompName, name: PropName): String = (compName.value, name.value) match { case ("Dropzone", "onDrop") => "js.Array[File] => Callback" //TODO case ("Page", "onSelect") => Callback //TODO case ("Dropdown", "onSelect") => Callback //TODO case ("EmailInputGroup", "onChange") => "ReactEventFromInput => Callback" case ("FileUpload", "onChange") => Callback //TODO case ("FormInput", "onChange") => "ReactEventFromInput => Callback" case ("FormSelect", "onChange") => "String => Callback" case ("ModalHeader", "onClose") => "ReactEventFromHtml => Callback" case ("Modal", "onCancel") => "ReactEventFromHtml => Callback" case ("Pagination", "onPageSelect") => "Int => Callback" //TODO case ("PasswordInputGroup", "onChange") => "ReactEventFromInput => Callback" //TODO case ("PasswordInputGroup", "validatePassword") => "String => CallbackTo[Boolean]" case ("Pill", "onClear") => "ReactEvent => Callback" case ("Pill", "onClick") => "ReactEventFromHtml => Callback" case ("RadioGroup", "onChange") => "String => Callback" case ("SegmentedControl", "onChange") => Callback case _ => throw new Error( s"""case ("${compName.value}", "${name.value}") => Callback //TODO: Add function type mapping in ${getClass().getName}""") } } ================================================ FILE: gen/src/main/scala/com/olvind/eui/EuiTypeMemberMethodMapper.scala ================================================ package com.olvind package eui object EuiTypeMemberMethodMapper extends MemberMapper { override def apply(compName: CompName)(memberMethod: MemberMethod): ParsedMethod = ParsedMethod( apply(compName, memberMethod.paramNames, memberMethod.name), None ) private def apply(c: CompName, args: Seq[String], m: String) = (c.value, args.size, m) match { // case ("TimePicker", 0, "isControlled") => "isControlled(): Boolean" case other ⇒ println("missing types for method: " + other) m + args.map(sanitize(_) + ": js.Any").mkString("(", ", ", ")") + ": js.Dynamic" } def sanitize(s: String) = if (s == "val") "`val`" else s } ================================================ FILE: gen/src/main/scala/com/olvind/libraries.scala ================================================ package com.olvind import ammonite.ops.Path final case class ComponentDef( name: CompName, shared: Option[ComponentDef] = None, multipleChildren: Boolean = true, domeTypeOpt: Option[DomType] = None, //Some(DomElement), forceChildren: Boolean = false ) trait TypeMapper { def apply(compName: CompName, fieldName: PropName, typeString: String): Type } trait MemberMapper { def apply(compName: CompName)(memberMethod: MemberMethod): ParsedMethod } trait Library { def name: String def prefixOpt: Option[String] def locations: Seq[Path] def components: Seq[ComponentDef] def typeMapper: TypeMapper def memberMapper: MemberMapper def indexNames: Set[String] def packageName: String @deprecated("", "") final def prefix: String = prefixOpt getOrElse "" } ================================================ FILE: gen/src/main/scala/com/olvind/mui/MuiLibrary.scala ================================================ package com.olvind package mui import ammonite.ops._ import scala.language.implicitConversions case class MuiLibrary(base: Path) extends Library { /* todo: make requiresjs clever enough to figure this out by itself */ override val locations = Seq( base, base / 'styles, base / 'internal / 'EnhancedButton, base / 'internal / 'EnhancedSwitch, base / 'TextField / 'EnhancedTextarea ) override val prefixOpt = Some("Mui") override val name = "materialui" override val typeMapper = MuiTypeMapper override val memberMapper = MuiTypeMemberMethodMapper override val indexNames = Set("index.js") override val packageName = "chandu0101.scalajs.react.components.materialui" case object Internal { val AppCanvas = ComponentDef(CompName("AppCanvas")) val BeforeAfterWrapper = ComponentDef(CompName("BeforeAfterWrapper")) val EnhancedButton = ComponentDef(CompName("EnhancedButton")) val EnhancedSwitch = ComponentDef(CompName("EnhancedSwitch")) val Overlay = ComponentDef(CompName("Overlay")) val CircleRipple = ComponentDef(CompName("CircleRipple")) val FocusRipple = ComponentDef(CompName("FocusRipple")) val TouchRipple = ComponentDef(CompName("TouchRipple")) val RenderToLayer = ComponentDef(CompName("RenderToLayer")) val EnhancedTextarea = ComponentDef(CompName("EnhancedTextarea")) val Tooltip = ComponentDef(CompName("Tooltip")) } val DropDownMenu = ComponentDef(CompName("DropDownMenu")) val List_ = ComponentDef(CompName("List")) val ListItem = ComponentDef(CompName("ListItem"), Some(Internal.EnhancedButton)) val Menu = ComponentDef(CompName("Menu"), Some(List_)) val Paper = ComponentDef(CompName("Paper")) val RadioButton = ComponentDef(CompName("RadioButton"), Some(Internal.EnhancedSwitch)) val TextField = ComponentDef(CompName("TextField"), Some(Internal.EnhancedTextarea), domeTypeOpt = Some(DomInput)) val components: Seq[ComponentDef] = Seq( ComponentDef(CompName("AppBar"), Option(Paper)), ComponentDef(CompName("AutoComplete"), Some(TextField)), ComponentDef(CompName("Avatar"), multipleChildren = false), ComponentDef(CompName("Badge")), ComponentDef(CompName("Card"), Some(Paper)), ComponentDef(CompName("CardActions")), // ComponentDef(CompName("CardExpandable"), None), ComponentDef(CompName("CardHeader")), ComponentDef(CompName("CardMedia")), ComponentDef(CompName("CardText")), ComponentDef(CompName("CardTitle")), ComponentDef(CompName("Checkbox"), Some(Internal.EnhancedSwitch)), ComponentDef(CompName("Chip"), Some(Internal.EnhancedButton)), ComponentDef(CompName("CircularProgress")), ComponentDef(CompName("DatePicker"), Option(TextField), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Dialog"), None), ComponentDef(CompName("Divider")), ComponentDef(CompName("Drawer"), None), DropDownMenu, ComponentDef(CompName("FlatButton"), Some(Internal.EnhancedButton)), ComponentDef(CompName("FloatingActionButton"), Some(Internal.EnhancedButton)), ComponentDef(CompName("FontIcon")), ComponentDef(CompName("GridList")), ComponentDef(CompName("GridTile")), ComponentDef(CompName("IconButton"), Some(Internal.EnhancedButton)), ComponentDef(CompName("IconMenu"), Option(Menu)), ComponentDef(CompName("LinearProgress")), List_, ListItem, Menu, ComponentDef(CompName("MenuItem"), Option(ListItem)), ComponentDef(CompName("MuiThemeProvider")), Paper, ComponentDef(CompName("Popover")), // ComponentDef(CompName("PopoverAnimationVertical")), RadioButton, ComponentDef(CompName("RadioButtonGroup"), Some(RadioButton)), ComponentDef(CompName("RaisedButton"), Some(Internal.EnhancedButton)), ComponentDef(CompName("RefreshIndicator")), ComponentDef(CompName("SelectField"), Option(DropDownMenu)), ComponentDef(CompName("Slider")), ComponentDef(CompName("Snackbar")), ComponentDef(CompName("Step")), ComponentDef(CompName("StepContent")), ComponentDef(CompName("StepLabel")), ComponentDef(CompName("Stepper")), ComponentDef(CompName("Subheader")), ComponentDef(CompName("Tab"), Some(Internal.EnhancedButton)), ComponentDef(CompName("Table")), ComponentDef(CompName("TableBody")), ComponentDef(CompName("TableFooter")), ComponentDef(CompName("TableHeader")), ComponentDef(CompName("TableHeaderColumn")), ComponentDef(CompName("TableRow")), ComponentDef(CompName("TableRowColumn")), ComponentDef(CompName("Tabs")), TextField, ComponentDef(CompName("TimePicker"), Option(TextField), domeTypeOpt = Some(DomInput)), ComponentDef(CompName("Toggle"), Some(Internal.EnhancedSwitch)), ComponentDef(CompName("Toolbar")), ComponentDef(CompName("ToolbarGroup")), ComponentDef(CompName("ToolbarSeparator")), ComponentDef(CompName("ToolbarTitle")) ) } ================================================ FILE: gen/src/main/scala/com/olvind/mui/MuiRunner.scala ================================================ package com.olvind package mui import ammonite.ops.Path object MuiRunner extends App { args.toList match { case OutputFolder(buildFolder) :: OutputFolder(outputFolder) :: Nil => val outs: Seq[Path] = Runner(MuiLibrary(buildFolder), outputFolder) case _ => System.err.println("Syntax: MuiRunner ") System.exit(1) } } ================================================ FILE: gen/src/main/scala/com/olvind/mui/MuiTypeMapper.scala ================================================ package com.olvind package mui object MuiTypeMapper extends TypeMapper { val typeT = Normal("T").generic("T") val typeTJs = Normal("T").genericJs("T") def apply(compName: CompName, fieldName: PropName, typeString: String): Type = { def is(s: String) = fieldName.value.toLowerCase contains s.toLowerCase def split(drop: Int, s: String) = s.split("[\'\"\\(\\)\\[\\],\\s]").map(_.trim).filterNot(_.isEmpty).drop(drop) //Please note that the following match statement is incredibly order-sensitive, if you change order around you can break things (compName.value, fieldName.value, typeString) match { // i dont have patience to do this properly (GridList) case (_, "cellHeight", _) => Normal("Int") case (_, _, e) if e.contains("oneOfType") => Normal(split(1, e) map (t => apply(compName, fieldName, t)) map (_.name) mkString " | ") case (_, _, enum) if enum.startsWith("Mui.oneOf") => Enum(compName, split(1, enum)) /* Double => Int */ case (_, "autoHideDuration", "number") => Normal("Int") case (_, "cols", "number") => Normal("Int") case (_, "columnNumber", "number") => Normal("Int") case (_, "columnId", "number") => Normal("Int") case (_, "initialSelectedIndex", "number") => Normal("Int") case (_, "left", "number") => Normal("Int") case (_, "maxHeight", "number") => Normal("Int") case (_, "nestedLevel", "number") => Normal("Int") case (_, "padding", "number") => Normal("Int") case (_, "rowNumber", "number") => Normal("Int") case (_, "rows", "number") => Normal("Int") case (_, "rowsMax", "number") => Normal("Int") case (_, "selectedIndex", "number") => Normal("Int") case ("Avatar", "size", "number") => Normal("Int") case ("RefreshIndicator", "size", "number") => Normal("Int") case (_, "top", "number") => Normal("Int") case (_, "touchTapCloseDelay", "number") => Normal("Int") case (_, _, e) if e.toLowerCase.contains("index") => Normal("Int") /* specific */ case ("AutoComplete", "dataSource", "Mui.array") => Normal("js.Array[String]") case ("DatePicker", "value", _) => Normal("js.Date") case ("DatePicker", "defaultDate", "Mui.object") => Normal("js.Date") case ("DatePicker", "maxDate", "Mui.object") => Normal("js.Date") case ("DatePicker", "minDate", "Mui.object") => Normal("js.Date") case ("DatePicker", "initialDate", "Mui.object") => Normal("js.Date") case ("Dialog", "width", "Mui.any") => Normal("Int") case ("DropDownMenu", "value", "Mui.any") => typeT case ("EnhancedSwitch", "value", "Mui.any") => typeT case ("RadioButtonGroup", "defaultSelected", "Mui.any") => typeT case ("RadioButtonGroup", "valueSelected", "Mui.any") => typeT case ("RadioButton", "value", "Mui.any") => typeT case ("Tab", "index", "Mui.any") => Normal("js.Any") case ("ListItem", "nestedItems", "Mui.arrayOf(Mui.element)") => Normal("js.Array[VdomElement]") case ("Menu", "value", "Mui.any") => Normal("T | js.Array[T]").generic("T") case ("MenuItem", "value", "Mui.any") => typeT case ("SelectField", "selectFieldRoot", "Mui.object") => Normal("CssProperties") case ("SelectField", "value", "Mui.any") => typeT case ("Slider", "defaultValue", "valueInRangePropType") => Normal("Double") case ("Slider", "max", "minMaxPropType") => Normal("Double") case ("Slider", "min", "minMaxPropType") => Normal("Double") case ("Slider", "value", "valueInRangePropType") => Normal("Double") case ("Step", "controlButtonsGroup", "Mui.arrayOf(Mui.node)") => Normal("js.Array[VdomNode]") case ("Step", "actions", "Mui.arrayOf(Mui.node)") => Normal("js.Array[VdomNode]") case ("Tab", "value", "Mui.any") => typeTJs case ("Tabs", "value", "Mui.any") => typeTJs case ("TextField", "value", "Mui.any") => Normal("String") case ("TextField", "defaultValue", "Mui.any") => Normal("String") case ("TimePicker", "defaultTime", "Mui.object") => Normal("js.Date") case ("TimePicker", "value", "Mui.object") => Normal("js.Date") case ("DatePicker", "utils", "Mui.object") => Normal("DatePickerUtils") //TODO ??? case ("SelectField", "dropDownMenuProps", "Mui.object") => Normal("DropDownMenuProps") //TODO ??? /* TODO: dubious */ case ("EnhancedTextarea", "defaultValue", "Mui.any") => Normal("js.Any") case ("GridTile", "rootClass", "Mui.object") => Normal("js.Any") case ("Popover", "anchorEl", "Mui.object") => Normal("js.Any") case ("Stepper", "createIcon", "Mui.func") => Normal("js.Function") case ("Stepper", "updateAvatarBackgroundColor", "Mui.func") => Normal("js.Function") case (_, "valueLink", "Mui.object") => Normal("js.Any") /* mui general */ case (_, _, "Mui.string") if is("color") => Normal("MuiColor") case (_, _, "Mui.object") if is("style") => Normal("CssProperties") case (_, _, "Mui.object") if is("muiTheme") => Normal("MuiTheme") case (_, _, "Mui.object") => Normal("js.Object") case (_, _, "Mui.any") => Normal("js.Any") case (_, "label", "validateLabel") => Normal("String") case (_, "zDepth", _) => Normal("ZDepth") case (_, _, "Mui.origin") => Normal("Origin") case (_, _, "_propTypes4.default.origin") => Normal("Origin") //TODO??? case (_, _, "_propTypes4.default.cornersAndCenter") => Normal("CornersAndCenter") //TODO??? case (_, _, "_propTypes4.default.stringOrNumber") => Normal("String | Double") //TODO??? case (_, _, "Mui.cornersAndCenter") => Normal("CornersAndCenter") case (_, _, "Mui.corners") => Normal("Corners") case (_, _, "Mui.stringOrNumber") => Normal("String | Double") /* general */ case (_, _, "Mui.string") => Normal("String") case (_, _, "Mui.bool") => Normal("Boolean") case (_, "children", "Mui.element") => Normal("VdomElement") case (_, _, "Mui.element") => Normal("VdomElement") case (_, "children", "Mui.node") => Normal("VdomNode") case (_, _, "Mui.node") => Normal("VdomNode") case (_, _, "Mui.number") => Normal("Double") case (_, "children", "Mui.arrayOf(Mui.element)") => Normal("js.Array[VdomElement]") case ("Stepper", "children", "Mui.arrayOf(Mui.node)") => Normal("js.Any") case (_, _, "Mui.func") => Normal(MuiTypeMapperFunction(compName, fieldName)) } } } ================================================ FILE: gen/src/main/scala/com/olvind/mui/MuiTypeMapperFunction.scala ================================================ package com.olvind package mui object MuiTypeMapperFunction { val TouchTapEventHandler = "TouchTapEvent => Callback" val TouchEventHandler = "ReactTouchEvent => Callback" val MouseEventHandler = "ReactMouseEvent => Callback" val FocusEventhandler = "ReactFocusEvent => Callback" val KeyboardEventHandler = "ReactKeyboardEvent => Callback" val Callback = "Callback" def apply(compName: CompName, name: PropName): String = (compName.value, name.value) match { case ("AppBar", "onTitleClick") => "ReactEvent => Callback" case ("AppBar", "onLeftIconButtonClick") => "ReactEvent => Callback" case ("AppBar", "onRightIconButtonClick") => "ReactEvent => Callback" // case ("AppBar", "onLeftIconButtonTouchTap") => TouchTapEventHandler // case ("AppBar", "onRightIconButtonTouchTap") => TouchTapEventHandler // case ("AppBar", "onTitleTouchTap") => TouchTapEventHandler case ("AutoComplete", "onBlur") => "ReactFocusEventFromInput => Callback" case ("AutoComplete", "onFocus") => "ReactFocusEventFromInput => Callback" case ("AutoComplete", "onNewRequest") => "(String, Int) => Callback" case ("AutoComplete", "onUpdateInput") => "(String, js.Array[String], js.Object) => Callback" case ("AutoComplete", "filter") => "(String, String, String) => Boolean" case ("AutoComplete", "animation") => "js.Function" case ("AutoComplete", "onClose") => Callback case ("Card", "onExpandChange") => "Boolean => Callback" case ("CardExpandable", "onExpanding") => Callback case ("Checkbox", "onCheck") => "(ReactMouseEvent, Boolean) => Callback" case ("Chip", "onRequestDelete") => TouchEventHandler case ("DatePicker", "DateTimeFormat") => "js.Function" case ("DatePicker", "formatDate") => "js.Date => String" case ("DatePicker", "onChange") => "(js.UndefOr[Nothing], js.Date) => Callback" case ("DatePicker", "onDismiss") => Callback case ("DatePicker", "onShow") => Callback case ("DatePicker", "shouldDisableDate") => "js.Date => Boolean" case ("DatePickerDialog", "onAccept") => "js.Date => Callback" case ("DatePickerDialog", "DateTimeFormat") => "js.Function" case ("DatePickerDialog", "shouldDisableDate") => "js.Date => Boolean" case ("Dialog", "onRequestClose") => "Boolean => Callback" case ("DialogInline", "onRequestClose") => "Boolean => Callback" case ("Drawer", "onRequestChange") => "(Boolean, String) => Callback" case ("DropDownMenu", "onChange") => "(TouchTapEvent, Int, T) => Callback" case ("DropDownMenu", "animation") => "js.Function" case ("DropDownMenu", "onClose") => Callback case ("EnhancedSwitch", "onParentShouldUpdate") => "Boolean => Callback" case ("EnhancedSwitch", "onSwitch") => "(ReactMouseEvent, Boolean) => Callback" case ("EnhancedTextarea", "onChange") => "ReactEvent => Callback" case ("EnhancedTextarea", "onHeightChange") => "(ReactEvent, Int)=> Callback" case ("IconButton", "onMouseOut") => MouseEventHandler case ("IconMenu", "animation") => "js.Function" case ("IconMenu", "onChange") => "(ReactEvent, js.UndefOr[T]) => Callback" case ("IconMenu", "onItemTouchTap") => "(ReactTouchEvent, ReactElement) => Callback" case ("IconMenu", "onItemClick") => "(ReactEvent, ReactElement) => Callback" case ("IconMenu", "onRequestChange") => "(Boolean, String) => Callback" case ("ListItem", "onNestedListToggle") => "js.Any => Callback" case ("Menu", "onItemClick") => "(ReactEvent, js.Object) => Callback" case ("Menu", "onEscKeyDown") => KeyboardEventHandler case ("Menu", "onChange") => "(TouchTapEvent, T | js.Array[T]) => Callback" case ("Menu", "onMenuItemFocusChange") => "(js.UndefOr[ReactEvent], Int) => Callback" case ("Menu", "onItemTouchTap") => "(TouchTapEvent, js.Object) => Callback" case ("MenuItem", "animation") => "js.Function" case ("Popover", "onRequestClose") => "String => Callback" case ("Popover", "animation") => "js.Function" case ("RadioButton", "onCheck") => "(ReactEvent, T) => Callback" case ("RadioButtonGroup", "onCheck") => "(ReactEvent, T) => Callback" case ("RadioButtonGroup", "onChange") => "(ReactEvent, T) => Callback" case ("SelectField", "onChange") => "(TouchTapEvent, Int, T) => Callback" case ("Snackbar", "onActionClick") => "ReactEvent => Callback" case ("Slider", "onChange") => "(ReactMouseEvent, Double) => Callback" case ("Slider", "onDragStart") => "ReactDragEvent => Callback" case ("Slider", "onDragStop") => "ReactDragEvent => Callback" case ("Slider", "onFocus") => FocusEventhandler // case ("Snackbar", "onActionTouchTap") => TouchEventHandler case ("Snackbar", "onRequestClose") => "String => Callback" case ("StepContent", "transition") => "js.Any" case ("Stepper", "updateCompletedStatus") => "(Int, ReactNode) => CallbackTo[Boolean]" case ("Table", "onCellClick") => "(RowId, ColumnId) => Callback" case ("Table", "onCellHover") => "(RowId, ColumnId) => Callback" case ("Table", "onCellHoverExit") => "(RowId, ColumnId) => Callback" case ("Table", "onRowHover") => "RowId => Callback" case ("Table", "onRowHoverExit") => "RowId => Callback" case ("Table", "onRowSelection") => "String | js.Array[RowId] => Callback" case ("TableBody", "onCellClick") => "(RowId, ColumnId) => Callback" case ("TableBody", "onCellHover") => "(RowId, ColumnId) => Callback" case ("TableBody", "onCellHoverExit") => "(RowId, ColumnId) => Callback" case ("TableBody", "onRowHoverExit") => "RowId => Callback" case ("TableBody", "onRowHover") => "RowId => Callback" case ("TableBody", "onRowSelection") => "String | js.Array[RowId] => Callback" case ("TableHeader", "onSelectAll") => "Boolean => Callback" case ("TableHeaderColumn", "onHover") => Callback case ("TableHeaderColumn", "onHoverExit") => Callback case ("TableHeaderColumn", "onClick") => "(ReactMouseEvent, ColumnId) => Callback" case ("TableRow", "onCellClick") => "(ReactMouseEvent, RowId, ColumnId) => Callback" case ("TableRow", "onCellHover") => "(ReactMouseEvent, RowId, ColumnId) => Callback" case ("TableRow", "onCellHoverExit") => "(ReactMouseEvent, RowId, ColumnId) => Callback" case ("TableRow", "onRowHover") => "(ReactMouseEvent, RowId) => Callback" case ("TableRow", "onRowClick") => "(ReactMouseEvent, RowId) => Callback" case ("TableRow", "onRowHoverExit") => "(ReactMouseEvent, RowId) => Callback" case ("TableRowColumn", "onClick") => "(ReactMouseEvent, ColumnId) => Callback" case ("TableRowColumn", "onHover") => "(ReactMouseEvent, ColumnId) => Callback" case ("TableRowColumn", "onHoverExit") => "(ReactMouseEvent, ColumnId) => Callback" case ("Tab", "onActive") => "ReactElement => Callback" case ("Tabs", "onChange") => "(T, ReactEventFromHtml, ReactElement) => Callback" case ("Tabs", "tabTemplate") => "js.Any" case ("TextField", "onChange") => "(ReactEventFromInput, String) => Callback" case ("TextField", "onEnterKeyDown") => "ReactKeyboardEventFromInput => Callback" case ("TextField", "onBlur") => "ReactFocusEventFromInput => Callback" case ("TextField", "onFocus") => "ReactFocusEventFromInput => Callback" case ("TimePicker", "onChange") => "(js.UndefOr[Nothing], js.Date) => Callback" case ("TimePicker", "onShow") => Callback case ("TimePicker", "onDismiss") => Callback case ("Toggle", "onToggle") => "(ReactMouseEvent, Boolean) => Callback" case (_, "onBlur") => FocusEventhandler case (_, "onFocus") => FocusEventhandler case (_, "onKeyDown") => KeyboardEventHandler case (_, "onKeyUp") => KeyboardEventHandler case (_, "onKeyboardFocus") => "(ReactFocusEvent, Boolean) => Callback" case (_, "onMouseEnter") => MouseEventHandler case (_, "onMouseLeave") => MouseEventHandler case (_, "onMouseUp") => MouseEventHandler case (_, "onMouseDown") => MouseEventHandler case (_, "onTouchStart") => TouchEventHandler case (_, "onTouchEnd") => TouchEventHandler case (_, "onClick") => "ReactEvent => Callback" /*Added by roberto@leibman.net*/ case ("DropDownMenu", "selectionRenderer") => Callback //TODO ??? case ("SelectField", "selectionRenderer") => Callback //TODO ??? case _ => throw new Error( s"""case ("${compName.value}", "${name.value}") => Callback //TODO: Add function type mapping in ${getClass().getName}""") } } ================================================ FILE: gen/src/main/scala/com/olvind/mui/MuiTypeMemberMethodMapper.scala ================================================ package com.olvind package mui object MuiTypeMemberMethodMapper extends MemberMapper { override def apply(compName: CompName)(memberMethod: MemberMethod): ParsedMethod = ParsedMethod( apply(compName, memberMethod.paramNames, memberMethod.name), None ) private def apply(c: CompName, args: Seq[String], m: String) = (c.value, args.size, m) match { case ("DatePicker", 0, "getDate") => "getDate(): js.Date" case ("DatePicker", 1, "setDate") => "setDate(d: js.Date): Unit" case ("DatePicker", 0, "openDialog") => "openDialog(): Unit" case ("DatePicker", 0, "focus") => "focus(): Unit" case ("Dialog", 0, "dismiss") => "dismiss(): Unit" case ("Dialog", 0, "show") => "show(): Unit" case ("Dialog", 0, "isOpen") => "isOpen(): Boolean" case ("Drawer", 0, "open") => "open(): Unit" case ("Drawer", 0, "close") => "close(): Unit" case ("Drawer", 0, "toggle") => "toggle(): Unit" case ("Snackbar", 0, "dismiss") => "dismiss(): Unit" case ("Snackbar", 0, "show") => "show(): Unit" case ("Checkbox", 0, "isChecked") => "isChecked(): Boolean" case ("Checkbox", 1, "setChecked") => "isChecked(newCheckedValue: Boolean): Unit" case ("RadioButtonGroup", 0, "getSelectedValue") => "getSelectedValue(): String" case ("RadioButtonGroup", 1, "setSelectedValue") => "setSelectedValue(newSelectionValue: String): Unit" case ("RadioButtonGroup", 0, "clearValue") => "clearValue(): Unit" case ("Slider", 2, "onDragUpdate") => "onDragUpdate(event: js.Any, `type`: js.Any): js.Dynamic" case ("Toggle", 0, "isToggled") => "isToggled(): Boolean" case ("Toggle", 1, "setToggled") => "setToggled(newToggledValue: Boolean): Unit" case ("TextField", 0, "blur") => "blur(): Unit" case ("TextField", 0, "clearValue") => "clearValue(): Unit" case ("TextField", 0, "focus") => "focus(): Unit" case ("TextField", 0, "getValue") => "getValue(): String" case ("TextField", 1, "setErrorText") => "setErrorText(newErrorText: String): Unit" case ("TextField", 1, "setValue") => "setValue(newValue: String): Unit" case ("TimePicker", 0, "getTime") => "getTime(): js.Date" case ("TimePicker", 1, "setTime") => "setTime(d: js.Date): Unit" case ("TimePicker", 1, "formatTime") => "formatTime(d: js.Date): String" case ("TimePicker", 0, "openDialog") => "openDialog(): Unit" case ("TimePicker", 0, "focus") => "focus(): Unit" /* Added by roberto@leibman.net for material-ui */ case ("AutoComplete", 0, "blur") => "blur(): Unit" case ("AutoComplete", 0, "close") => "close(): Unit" case ("AutoComplete", 0, "focus") => "focus(): Unit" case ("CircularProgress", 1, "rotateWrapper") => "rotateWrapper(wrapper: Wrapper): Unit" case ("CircularProgress", 1, "scalePath") => "scalePath(path: CircularProgressPath): Unit" case ("DatePicker", 0, "getControlledDate") => "getControlledDate(): js.Date" case ("DatePicker", 0, "isControlled") => "isControlled(): Unit" case ("Drawer", 0, "removeBodyTouchListeners")=> "removeBodyTouchListeners(): Unit" case ("Drawer", 1, "close") => "close(reason: String): Unit" case ("Drawer", 0, "disableSwipeHandling") => "disableSwipeHandling(): Unit" case ("Drawer", 0, "enableSwipeHandling") => "enableSwipeHandling(): Unit" case ("Drawer", 0, "getMaxTranslateX") => "getMaxTranslateX(): Int" case ("Drawer", 0, "getStyles") => "getStyles(): CssProperties" case ("Drawer", 0, "getTranslateMultiplier") => "getTranslateMultiplier(): Int" case ("Drawer", 1, "getTranslateX") => "getTranslateX(currentX: Int): Int" case ("Drawer", 0, "getTranslatedWidth") => "getTranslatedWidth(): Double" case ("Drawer", 1, "open") => "open(reason: String): Unit" case ("Drawer", 1, "setPosition") => "setPosition(position: Int): Unit" case ("Drawer", 0, "shouldShow") => "shouldShow(): Boolean" case ("DropDownMenu", 0, "getInputNode") => "getInputNode(): js.Any" case ("DropDownMenu", 0, "setWidth") => "setWidth(): Unit" case ("GridTile", 0, "ensureImageCover") => "ensureImageCover(): Unit" case ("IconButton", 0, "hideTooltip") => "hideTooltip(): Unit" case ("IconButton", 0, "setKeyboardFocus") => "setKeyboardFocus(): Unit" case ("IconButton", 0, "showTooltip") => "showTooltip(): Unit" case ("IconMenu", 2, "close") => "close(): Unit" case ("IconMenu", 0, "isOpen") => "isOpen(): Boolean" case ("IconMenu", 2, "open") => "open(reason: String, event: js.Any): Unit" case ("LinearProgress", 5, "barUpdate") => "barUpdate(id: String, step: Integer, barElement: String, stepValues: Array[Array[Int]], timeToNextStep: Long): Unit" case ("ListItem", 1, "applyFocusState") => "applyFocusState(focusState: MuiFocusedState): Unit /*One of none, focused, keyboardfocused*/" case ("ListItem", 3, "createDisabledElement") => "createDisabledElement(styles: CssProperties, contentChildren: Array[CtorType.ChildArg], additionalProps: js.Any): Unit" case ("ListItem", 3, "createLabelElement") => "createLabelElement(styles: CssProperties, contentChildren: Array[CtorType.ChildArg], additionalProps: js.Any): Unit" case ("ListItem", 3, "createTextElement") => "createTextElement(styles: CssProperties, data: js.Any, key: String): Unit" case ("ListItem", 4, "pushElement") => "pushElement(children: Array[CtorType.ChildArg], element: js.Any, baseStyles: CssProperties, additionalProps: js.Any): Unit" case ("Menu", 1, "cancelScrollEvent") => "cancelScrollEvent(event: js.Any): Unit" case ("Menu", 4, "cloneMenuItem") => "cloneMenuItem(child: js.Any, childIndex: Int, styles: CssProperties, index: Int): Unit" case ("Menu", 1, "decrementKeyboardFocusIndex") => "decrementKeyboardFocusIndex(event: js.Any): Unit" case ("Menu", 1, "getFilteredChildren") => "getFilteredChildren(): Array[js.Any]" case ("Menu", 2, "getLastSelectedIndex") => "getLastSelectedIndex(props: js.Any, filteredChildren: Array[CtorType.ChildArg]): Unit" case ("Menu", 1, "getMenuItemCount") => "getMenuItemCount(): Int" case ("Menu", 1, "getValueLink") => "getValueLink(): Unit" //Deprecated case ("Menu", 2, "incrementKeyboardFocusIndex") => "incrementKeyboardFocusIndex(event: js.Any, filteredChildren: Array[CtorType.ChildArg]): Unit" case ("Menu", 2, "isChildSelected") => "isChildSelected(child: js.Any, props: js.Any): Boolean" case ("Menu", 3, "setFocusIndex") => "setFocusIndex(event: js.Any, newIndex: Int, isKeyboardFocused: Boolean): Unit" case ("Menu", 2, "setFocusIndexStartsWith") => "setFocusIndexStartsWith(event: js.Any, keys: String): Unit" case ("Menu", 1, "setKeyboardFocused") => "setKeyboardFocused(value: Boolean): Unit" case ("Menu", 0, "setScollPosition") => "setScollPosition(): Unit" case ("Menu", 0, "setWidth") => "setWidth(): Unit" case ("Menu", 3, "setFocusIndexStartsWith") => "setFocusIndexStartsWith(event: js.Any, keys: js.Any, filteredChildren: js.Any): Unit" case ("MenuItem", 0, "applyFocusState") => "applyFocusState(): Unit" case ("MuiThemeProvider", 0, "getChildContext") => "getChildContext(): MuiTheme" case ("Popover", 5, "applyAutoPositionIfNeeded") => "applyAutoPositionIfNeeded(anchor: js.Any, target: js.Any, targetOrigin: js.Any, anchorOrigin: js.Any, targetPosition: js.Any): Unit" case ("Popover", 1, "autoCloseWhenOffScreen") => "autoCloseWhenOffScreen(anchorPosition: js.Any): Unit" case ("Popover", 1, "getAnchorPosition") => "getAnchorPosition(): Position" case ("Popover", 3, "getOverlapMode") => "getOverlapMode(anchor: js.Any, target: js.Any, median: js.Any): Unit" case ("Popover", 2, "getPositions") => "getPositions(anchor: js.Any, target: js.Any): Unit" case ("Popover", 1, "getTargetPosition") => "getTargetPosition(): Position" case ("Popover", 1, "requestClose") => "requestClose(reason: String): Unit" //clickaway or offScren case ("RadioButton", 0, "getValue") => "getValue(): js.Any" case ("RadioButton", 0, "isChecked") => "isChecked(): Boolean" case ("RadioButton", 1, "setChecked") => "setChecked(value: Boolean): Unit" case ("RadioButtonGroup", 1, "hasCheckAttribute") => "hasCheckAttribute(radioButton: js.Any): Boolean" case ("RadioButtonGroup", 1, "updateRadioButtons") => "updateRadioButtons(newSelection: js.Any): Unit" case ("RefreshIndicator", 0, "getArcDeg") => "getArcDeg(): Double" case ("RefreshIndicator", 0, "getCircleAttr") => "getCircleAttr(): Double" case ("RefreshIndicator", 0, "getCircleStyle") => "getCircleStyle(): CssProperties" case ("RefreshIndicator", 0, "getFactor") => "getFactor(): Double" case ("RefreshIndicator", 0, "getPaddingSize") => "getPaddingSize(): Double" case ("RefreshIndicator", 0, "getPaperSize") => "getPaperSize(): Double" case ("RefreshIndicator", 0, "getPolygonStyle") => "getPolygonStyle(): CssProperties" case ("RefreshIndicator", 0, "getTheme") => "getTheme(): MuiTheme" case ("RefreshIndicator", 0, "renderChildren") => "renderChildren(): Unit" case ("RefreshIndicator", 1, "rotateWrapper") => "rotateWrapper(wrapper: js.Any): Unit" case ("RefreshIndicator", 2, "scalePath") => "scalePath(path: js.Any, step: Int): Unit" case ("Slider", 0, "clearValue") => "clearValue(): Unit" case ("Slider", 0, "getTrackOffset") => "getTrackOffset(): Unit" //TODO case ("Slider", 0, "getValue") => "getValue(): Unit" //TODO case ("Slider", 1, "onDragStart") => "onDragStart(): Unit" //TODO case ("Slider", 1, "onDragStop") => "onDragStop(): Unit" //TODO case ("Slider", 2, "setValueFromPosition") => "setValueFromPosition(): Unit" //TODO case ("Snackbar", 0, "setAutoHideTimer") => "setAutoHideTimer(): Unit" //TODO case ("Snackbar", 0, "setTransitionTimer") => "setTransitionTimer(): Unit" //TODO case ("Stepper", 0, "getChildContext") => "getChildContext(): Unit" //TODO case ("Table", 1, "createTableBody") => "createTableBody(): Unit" //TODO case ("Table", 1, "createTableFooter") => "createTableFooter(): Unit" //TODO case ("Table", 1, "createTableHeader") => "createTableHeader(): Unit" //TODO case ("Table", 0, "isScrollbarVisible") => "isScrollbarVisible(): Boolean" case ("TableBody", 1, "createRowCheckboxColumn") => "createRowCheckboxColumn(): Unit" //TODO case ("TableBody", 0, "createRows") => "createRows(): Unit" case ("TableBody", 1, "flattenRanges") => "flattenRanges(): Unit" //TODO case ("TableBody", 2, "genRangeOfValues") => "genRangeOfValues(): Unit" //TODO case ("TableBody", 1, "getColumnId") => "getColumnId(): Unit" //TODO case ("TableBody", 1, "getSelectedRows") => "getSelectedRows(): Unit" //TODO case ("TableBody", 1, "isRowSelected") => "isRowSelected(): Unit" //TODO case ("TableBody", 2, "isValueInRange") => "isValueInRange(): Unit" //TODO case ("TableBody", 2, "processRowSelection") => "processRowSelection(): Unit" //TODO case ("TableBody", 2, "splitRange") => "splitRange(): Unit" //TODO case ("TableHeader", 0, "createBaseHeaderRow") => "createBaseHeaderRow(): Unit" //TODO case ("TableHeader", 2, "createSuperHeaderRow") => "createSuperHeaderRow(): Unit" //TODO case ("TableHeader", 0, "createSuperHeaderRows") => "createSuperHeaderRows(): Unit" //TODO case ("TableHeader", 1, "getCheckboxPlaceholder") => "getCheckboxPlaceholder(): Unit" //TODO case ("TableHeader", 1, "getSelectAllCheckboxColumn") => "getSelectAllCheckboxColumn(): Unit" //TODO case ("TableRow", 1, "onRowClick") => "onRowClick(): Unit" //TODO case ("TableRow", 1, "onRowHover") => "onRowHover(): Unit" //TODO case ("TableRow", 1, "onRowHoverExit") => "onRowHoverExit(): Unit" //TODO case ("Tabs", 2, "getSelected") => "getSelected(): Unit" //TODO case ("Tabs", 1, "getSelectedIndex") => "getSelectedIndex(): Int" case ("Tabs", 0, "getTabCount") => "getTabCount(): Int" case ("Tabs", 0, "getTabs") => "getTabs(): Unit" //TODO case ("Tabs", 1, "getValueLink") => "getValueLink(): Unit" //TODO case ("TextField", 0, "getInputNode") => "getInputNode(): Unit" //TODO case ("TextField", 0, "select") => "select(): Unit" case ("TimePicker", 0, "getControlledTime") => "getControlledTime(): js.Date" case ("TimePicker", 0, "isControlled") => "isControlled(): Boolean" case other ⇒ println("missing types for method: " + other) m + args.map(sanitize(_) + ": js.Any").mkString("(", ", ", ")") + ": js.Dynamic" } def sanitize(s: String) = if (s == "val") "`val`" else s } ================================================ FILE: gen/src/main/scala/com/olvind/package.scala ================================================ package com import java.io.File import ammonite.ops.Path package object olvind { private[olvind] def panic(s: String): Nothing = throw new RuntimeException(s) def padTo(s: String)(n: Int): String = s + (" " * (n - s.length)) def indent(n: Int): String = " " * n def add(_p: Path, frags: String): Path = frags.split("/").filterNot(_.isEmpty).foldLeft(_p) { case (p, ".") ⇒ p case (p, "..") ⇒ p.copy(segments = p.segments.dropRight(1)) case (p, frag) ⇒ p / frag } def exists(path: Path): Boolean = new File(path.toString).exists def printToFile(f: Path)(op: java.io.PrintWriter => Unit): Unit = { val p = new java.io.PrintWriter(f.toIO, "UTF-8") try { op(p) } finally { p.close() } } } ================================================ FILE: gen/src/main/scala/com/olvind/printers.scala ================================================ package com.olvind sealed trait OutFile case class PrimaryOutFile(filename: CompName, content: String, secondaries: Seq[SecondaryOutFile]) extends OutFile case class SecondaryOutFile(filename: String, content: String) extends OutFile object Printer { case class FieldStats(maxFieldNameLen: Int, maxTypeNameLen: Int) def apply(prefix: String, comp: ParsedComponent): (PrimaryOutFile, Seq[SecondaryOutFile]) = { val fs: FieldStats = FieldStats( maxFieldNameLen = comp.fields.map(_.name.value.length).max, maxTypeNameLen = comp.fields.map(_.typeName.length).max ) val p = PrimaryOutFile( comp.name, Seq( s"\ncase class ${comp.nameDef(prefix, withBounds = true)}(", comp.fields .filterNot(_.name == PropName("children")) .map( p => outProp(p, fs) ) .mkString("", ",\n", ")") + bodyChildren(prefix, comp) ) mkString "\n", comp.methodClassOpt.toSeq map outMethodClass ) (p, comp.enumClases map outEnumClass) } def hack(comp: ParsedComponent): String = comp.genericParams .map { p ⇒ s"""implicit def ev${p.name}(${p.name.toLowerCase}: ${p.name}): js.Any = ${p.name.toLowerCase}.asInstanceOf[js.Any] implicit def ev2${p.name}(${p.name.toLowerCase}: ${p.name} | js.Array[${p.name}]): js.Any = ${p.name.toLowerCase}.asInstanceOf[js.Any]""" } .mkString(";") def bodyChildren(prefix: String, comp: ParsedComponent): String = (comp.childrenOpt, comp.definition.multipleChildren) match { case (None, _) => s"""{ | |${indent(1)}def apply() = { |${indent(2)}${hack(comp)} |${indent(2)}val props = JSMacro[${comp.nameDef(prefix)}](this) |${indent(2)}val f = JsComponent[js.Object, Children.None, Null]($prefix.${comp.name.value}) |${indent(2)}f(props) |${indent(1)}} |} """.stripMargin case (Some(childrenProp), true) => s"""{ | |${outChildrenComment(childrenProp.commentOpt)} |${indent(1)}def apply(children: ${childrenProp.baseType.name}*) = { |${indent(2)}${hack(comp)} |${indent(2)}val props = JSMacro[${comp.nameDef(prefix)}](this) |${indent(2)}val f = JsComponent[js.Object, Children.Varargs, Null]($prefix.${comp.name.value}) |${indent(2)}f(props)(children: _*) |${indent(1)}} |}""".stripMargin case (Some(childrenProp), false) => s"""{ | |${outChildrenComment(childrenProp.commentOpt)} |${indent(1)}def apply(child: ${childrenProp.typeName} = js.undefined) = { |${indent(2)}${if (!childrenProp.isRequired) "import js.UndefOr._"} |${indent(2)}${hack(comp)} |${indent(2)}val props = JSMacro[${comp.nameDef(prefix)}](this) |${indent(2)}val f = JsComponent[js.Object, Children.Varargs, Null]($prefix.${comp.name.value}) |${indent(2)}${if (childrenProp.isRequired) "f(props)(child)" else "child.fold(f(props)())(ch => f(props)(ch))"} |${indent(1)}} |}""".stripMargin } def outChildrenComment(oc: Option[PropComment]): String = oc.flatMap(_.value) match { case Some(c) => c.split("\n") .mkString( s"${indent(1)}/**\n ${indent(1)} * @param children ", "\n" + indent(2), s"\n${indent(1)} */" ) case None => "" } def outComment(_commentOpt: Option[PropComment], inheritedFrom: Option[CompName]): String = { val inheritedLine: Option[String] = inheritedFrom.map(i => s"(Passed on to $i)") val lines: Seq[String] = _commentOpt match { case None => inheritedLine.toSeq case Some(comment) => val anns: Seq[String] = comment.anns.collect { case Param(value) => s"@param $value" } comment.value.toSeq ++ inheritedLine ++ (if (anns.isEmpty) Nil else Seq("\n")) ++ anns } if (lines.isEmpty) "" else lines.flatMap(_.split("\n")).mkString(s"${indent(1)}/** ", s"\n${indent(2)} ", " */\n") } def safeName(name: String): String = { val safeSubstitutions = Map( ("super" -> "`super`"), ("type" -> "`type`") ) safeSubstitutions.get(name).getOrElse(name) } def outProp(p: ParsedProp, fs: FieldStats): String = { val comment = outComment(p.commentOpt, p.inheritedFrom) val intro: String = { val fixedName: String = safeName(p.name.value) val deprecation: String = (p.deprecatedMsg, p.commentOpt.exists(_.anns.contains(Ignore))) match { case (Some(msg), _) => s"""${indent(1)}@deprecated("$msg", "")\n""" case (None, true) => "" //s"""${indent(1)}@deprecated("Internal API", "")\n""" case _ => "" } s"$comment$deprecation${indent(1)}${padTo(fixedName + ": ")(fs.maxFieldNameLen + 2)}" } p.isRequired match { case true => intro + p.typeName case false => intro + padTo(p.typeName)(fs.maxTypeNameLen) + " = js.undefined" } } def outEnumClass(c: ParsedEnumClass): SecondaryOutFile = SecondaryOutFile( c.name, s""" |class ${c.name}(val value: String) extends AnyVal |object ${c.name} { |${c.identifiers .map { case (ident, original) => s"""${indent(1)}val ${safeName(ident.value)} = new ${c.name}("$original")""" } .mkString("\n")} |${indent(1)}val values = ${c.identifiers.map(_._1.value).map(safeName).toList} |}""".stripMargin ) def outMethodClass(c: ParsedMethodClass): SecondaryOutFile = SecondaryOutFile( c.className, s""" |@js.native |trait ${c.className} extends js.Object { |${c.methods .map { m => val deprecated: String = if (m.toString.toLowerCase.contains("deprecated")) s"""${indent(1)}@deprecated("", "")\n""" else "" val comment = outComment(m.commentOpt, None) s"$comment$deprecated${indent(1)}def ${m.definition} = js.native" } .mkString("\n\n")} |}""".stripMargin ) } ================================================ FILE: gen/src/main/scala/com/olvind/props.scala ================================================ package com.olvind final case class ParsedComponent( definition: ComponentDef, fields: Seq[ParsedProp], methodClassOpt: Option[ParsedMethodClass] ) { val name = definition.name val childrenOpt: Option[ParsedProp] = { val field = fields.find(_.name.value == "children") if (field.isEmpty && definition.forceChildren) { Some( ParsedProp( name = PropName("chidren"), isRequired = true, baseType = Normal("VdomNode"), commentOpt = None, deprecatedMsg = None, inheritedFrom = None )) } else { field } } val genericParams: Seq[ParsedGeneric] = fields .foldLeft(Map.empty[String, Boolean]) { case (m, ParsedProp(_, _, Normal(_, Some(Generic(name, jsObject))), _, _, _)) ⇒ m.updated(name, m.getOrElse(name, jsObject) || jsObject) case (m, other) ⇒ m } .map(ParsedGeneric.tupled) .toSeq val enumClases: Seq[ParsedEnumClass] = fields.map(_.baseType).collect { case o: Enum => o.enumClass } def nameDef(prefix: String, withBounds: Boolean = false): String = { val tpeParam = if (genericParams.isEmpty) "" else genericParams .map { p ⇒ val bounds: String = (p.jsObject, withBounds) match { case (_, false) ⇒ "" case (true, true) ⇒ "" //" <% js.Any" //todo: revisit case (false, true) ⇒ "" // <% js.Any" } s"${p.name}$bounds" } .mkString("[", ", ", "]") s"$prefix$name$tpeParam" } } final case class ParsedMethodClass( className: String, methods: Seq[ParsedMethod] ) final case class ParsedEnumClass( name: String, identifiers: Seq[(Identifier, String)] ) sealed trait Annotation case class Deprecated(reason: String) extends Annotation case class Param(value: String) extends Annotation case object Ignore extends Annotation final case class ParsedProp( name: PropName, isRequired: Boolean = false, baseType: Type = Normal("js.Any"), commentOpt: Option[PropComment] = None, deprecatedMsg: Option[String] = None, inheritedFrom: Option[CompName] = None ) { val typeName: String = if (isRequired) baseType.name else s"js.UndefOr[${baseType.name}]" } final case class ParsedGeneric(name: String, jsObject: Boolean) sealed trait Type { def name: String } case class Generic(name: String, jsObject: Boolean = false) case class Normal(name: String, genericOpt: Option[Generic] = None) extends Type { def generic(name: String) = copy(genericOpt = Some(Generic(name))) def genericJs(name: String) = copy(genericOpt = Some(Generic(name, jsObject = true))) } case class Enum(component: CompName, ss: Seq[String], specialName: String = "") extends Type { val fixedNames: Seq[(Identifier, String)] = ss.map { m => (Identifier.safe(m), m) } override val name: String = if (specialName.isEmpty()) fixedNames.map(_._1.value.capitalize).mkString("") else specialName def enumClass: ParsedEnumClass = ParsedEnumClass(name, fixedNames) } final case class ParsedMethod(definition: String, commentOpt: Option[PropComment]) { require(!definition.contains("=")) require(!definition.startsWith("def ")) } final case class PropUnparsed( fromComp: CompName, unparsed: PropTypeUnparsed, commentOpt: Option[PropComment] ) final case class PropTypeUnparsed(value: String) extends Wrapper[String] ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/JsParser.scala ================================================ package com.olvind package requiresjs import ammonite.ops.{Path, read} import jdk.nashorn.internal.parser.Parser import jdk.nashorn.internal.runtime.options.Options import jdk.nashorn.internal.runtime.{Context, ErrorManager, Source} object JsParser { val options = new Options("nashorn") options.set("anon.functions", true) options.set("parse.only", true) options.set("scripting", true) options.set("optimistic.types", true) def cleanupLine(str: String) = str.replaceAll("//.*$", "") //remove end line (//) comments here, they break stuff, particularly in the middle of a declaration. def apply(jsFile: Path): ParsedFile = { val content = read.lines(jsFile).map(cleanupLine).toList.mkString("\n") /* setup */ val errors = new ErrorManager() val context = new Context(options, errors, Thread.currentThread().getContextClassLoader) val source = Source.sourceFor(jsFile.toString, content) val parser = new Parser(context.getEnv, source, errors) val parsed = parser.parse() ParsedFile(jsFile, content, parsed) } } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/Lazy.scala ================================================ package com.olvind.requiresjs // semi-solves circular dependencies final class Lazy[+T](_t: => T) { lazy val run: T = _t def map[U](f: T => U): Lazy[U] = new Lazy(f(_t)) def flatMap[U](f: T => Lazy[U]) = new Lazy(f(_t).run) } object Lazy { def apply[T](_t: => T) = new Lazy(_t) } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/Require.scala ================================================ package com.olvind package requiresjs import ammonite.ops._ import jdk.nashorn.internal.ir.{FunctionNode, Node, ObjectNode} import scala.language.postfixOps object Require { def apply(p: Path, indexNames: Set[String]): Required = { val ctx = new ScanCtx def recurse(requiredPath: Path, ctx: ScanCtx): Lazy[Required] = ctx.required(requiredPath, doRecurse(requiredPath)) def doRecurse(requiredPath: Path)(ctx: ScanCtx): Lazy[Required] = { val ResolvedPath(filePath: Path, folderPath: Path) = ResolvePath(requiredPath, indexNames) ctx.parsedFile(filePath) match { case ParsedFile(_, fileStr: String, fileParsed: FunctionNode) => val imports: Seq[Import] = VisitorImports(fileParsed, folderPath).value val components: Map[CompName, ObjectNode] = VisitorComponents(fileParsed).value val memberMethods : Map[CompName, Set[MemberMethod]] = VisitorComponentMembers(fileParsed).value val exports: Seq[Node] = VisitorExports(fileParsed).value //todo: split require/react parsing! def component(compName: CompName, o: ObjectNode) = Single( compName, FoundComponent( name = compName, file = filePath, jsContent = fileStr.substring(o.getStart, o.getFinish), props = VisitorPropType(compName, o, fileStr, imports).value, methods = memberMethods.get(compName) ) ) components.toList.distinct match { case Nil ⇒ /* todo: Parse exports! */ val modules: Seq[Lazy[Required]] = imports.collect { case Import(varName, Left(innerPath: Path)) => recurse(innerPath, ctx) }.distinct Required(requiredPath, modules) case (compName, o) :: Nil ⇒ Lazy(component(compName, o)) case many ⇒ Required(filePath, many map { case (name, obj) => Lazy(component(name, obj)) }) } case other => println(other) Required(requiredPath, Nil) } } recurse(p, ctx).run } } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/ResolvePath.scala ================================================ package com.olvind package requiresjs import ammonite.ops.{Path, exists} case class ResolvedPath(file: Path, folder: Path) object ResolvePath { def apply(p: Path, indexNames: Set[String]): ResolvedPath = if (exists(p)) { if (p.isDir) { val file = indexNames.find { name => (p / name).toIO.exists } ResolvedPath(p / file.get, p) } else { panic("handle this when it happens") } } else { val withExtension: Path = p.copy(segments = p.segments.dropRight(1) :+ p.segments.last + ".js") if (exists(withExtension)) { ResolvedPath(withExtension, p.copy(segments = p.segments.dropRight(1))) } else { panic(s"Could not resolve path: $p") } } } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/ScanCtx.scala ================================================ package com.olvind.requiresjs import ammonite.ops.Path import com.olvind.CompName import scala.collection.mutable class ScanCtx { private val parsedFiles = mutable.Map.empty[Path, ParsedFile] private val requiredFiles = mutable.Map.empty[Path, Lazy[Required]] private val comps = mutable.Map.empty[CompName, FoundComponent] def parsedFile(p: Path): ParsedFile = parsedFiles.getOrElseUpdate(p, JsParser(p)) def required(p: Path, require: ScanCtx ⇒ Lazy[Required]): Lazy[Required] = requiredFiles.getOrElseUpdate(p, new Lazy(this).flatMap(require)) } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorComponentMembers.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir._ import scala.collection.JavaConverters._ import scala.collection.mutable case class VisitorComponentMembers(n: FunctionNode) extends VisitorHelper[FunctionNode, Map[CompName, Set[MemberMethod]]](n) { private val ret: mutable.Map[CompName, Set[MemberMethod]] = mutable.Map.empty[CompName, Set[MemberMethod]] /* dig out all member methods from a class variant */ override def enterCallNode(n: CallNode): Boolean = matcher((n.getFunction, n.getArgs.asScala.toList)) { case (createClassName, (compName: IdentNode) :: (members: LiteralNode.ArrayLiteralNode) :: Nil) if createClassName.toString.contains("createClass") ⇒ members.getValue.collect { case member: ObjectNode ⇒ matcher(member.getElements.asScala.toList) { case (name: PropertyNode) :: (value: PropertyNode) :: Nil ⇒ matcher((name.getValue, value.getValue)) { case (fi: LiteralNode[_], f: FunctionNode) ⇒ val m = MemberMethod(fi.getString, f.getParameters.asScala.map(_.getName)) val compName_ = CompName(compName.getName) ret.get(compName_) match { case Some(existing) ⇒ ret(compName_) = existing + m case None ⇒ ret(compName_) = Set(m) } } name.getKeyName } } } override protected def fetchValue(): Map[CompName, Set[MemberMethod]] = ret.toMap } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorComponents.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir._ import jdk.nashorn.internal.parser.TokenType import scala.collection.JavaConverters._ import scala.collection.mutable case class VisitorComponents(n: FunctionNode) extends VisitorHelperNameStack[FunctionNode, Map[CompName, ObjectNode]](n) { private val ret: mutable.Map[CompName, ObjectNode] = mutable.Map.empty[CompName, ObjectNode] override def enterBinaryNode(bn: BinaryNode): Boolean = { bn.lhs match { case a: AccessNode if a.getProperty == "exports" => bn.rhs match { case right: CallNode => right.getArgs.asScala.collect { case o: ObjectNode => o.getElements.asScala.collect { case a: PropertyNode if a.getKeyName == "displayName" => val name = a.getValue.asInstanceOf[LiteralNode[String]].getValue nameStack = VarName(name) :: nameStack // ret(CompName(name)) = o } } case right => println(right) } case a: AccessNode if a.getProperty == "propTypes" ⇒ bn.rhs match { /* inline object*/ case o: ObjectNode ⇒ ret(CompName(a.getBase.asInstanceOf[IdentNode].getName)) = o /* referencing variable in scope, so search upwards */ case i: IdentNode ⇒ val founds = lc.getBlocks.asScala.toList.flatMap { block ⇒ block.getStatements.asScala.collect { case v: VarNode if v.getName.getName == i.getName ⇒ v.getInit } } val foundOpt = founds collectFirst { case o: ObjectNode ⇒ o } foundOpt.foreach(found ⇒ ret(CompName(a.getBase.asInstanceOf[IdentNode].getName)) = found) /* Similar to the above, but we have a ternary node*/ case ternary: TernaryNode => ternary.getTest match { case testNode: BinaryNode => testNode.rhs match { case test: LiteralNode[String] => if ((test.getValue == "production" && testNode.tokenType() == TokenType.NE_STRICT) || (test.getValue == "development" && testNode.tokenType() == TokenType.EQ_STRICT)) { //Use the true Expression ternary.getTrueExpression.getExpression match { case o: ObjectNode ⇒ ret(CompName(a.getBase.asInstanceOf[IdentNode].getName)) = o } } else { //Use the false Expression ternary.getFalseExpression.getExpression match { case o: ObjectNode ⇒ ret(CompName(a.getBase.asInstanceOf[IdentNode].getName)) = o } } } } } case other => () } true } /* old style createClass way of creating react components. We dig out `propTypes` out of the structure */ override def enterCallNode(n: CallNode): Boolean = matcher((n.getFunction, n.getArgs.asScala.toList)) { case (a: AccessNode, List(o: ObjectNode)) if a.getProperty == "createClass" => o.getElements.asScala .collect { case p: PropertyNode ⇒ (p.getKey, p.getValue) } .collectFirst { case (i: IdentNode, o: ObjectNode) if i.getName == "propTypes" => nameStack.headOption match { case Some(name) => ret(CompName(name.value)) = o case None => () } } } override protected def fetchValue(): Map[CompName, ObjectNode] = ret.toMap } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorExports.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir._ import scala.collection.mutable case class VisitorExports(n: FunctionNode) extends VisitorHelper[FunctionNode, Seq[Node]](n) { // Left if something is exported at `exported.default` for now private var ret: Either[Node, mutable.ArrayBuffer[Node]] = Right(mutable.ArrayBuffer.empty) def filterNode(rhs: Node): Option[Node] = rhs match { case a: AccessNode if a.getProperty == "default" ⇒ Some(a.getBase.asInstanceOf[Node]) case _: FunctionNode | _: ObjectNode | _: IdentNode ⇒ Some(rhs) case other ⇒ None } override def enterBinaryNode(bn: BinaryNode): Boolean = { matcher(bn.lhs) { case a: AccessNode ⇒ matcher(a.getBase) { case base: IdentNode if base.getName == "exports" ⇒ (ret, filterNode(bn.rhs), a.getProperty == "default") match { case (_, None, _) ⇒ () case (_, Some(node), true) ⇒ ret = Left(node) case (Right(existing), Some(node), false) ⇒ existing += node case other ⇒ ??? } } } } override protected def fetchValue(): Seq[Node] = ret.fold(Seq(_), _.toSeq) } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorHelper.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir.visitor.NodeVisitor import jdk.nashorn.internal.ir.{BlockLexicalContext, Node} abstract class VisitorHelper[N <: Node, Out](n: N) extends NodeVisitor(new BlockLexicalContext) { protected def matcher[M](m: M)(f: PartialFunction[M, Unit]): Boolean = if (f.isDefinedAt(m)) { f(m) true } else true protected def assertions(): Unit = () protected def fetchValue(): Out lazy val value: Out = { n accept this // assertions() fetchValue() } } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorHelperNameStack.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir._ abstract class VisitorHelperNameStack[N <: Node, Out](n: N) extends VisitorHelper[N, Out](n) { protected var nameStack: List[VarName] = Nil override def enterPropertyNode(n: PropertyNode): Boolean = matcher(n.getKey) { case (i: IdentNode) => nameStack = VarName(i.getName) :: nameStack } override def leavePropertyNode(n: PropertyNode): Node = { (nameStack.headOption, n.getKey) match { case (Some(n1), n2: IdentNode) if n1.value == n2.getName => nameStack = nameStack drop 1 case _ => () } n } override def enterVarNode(n: VarNode): Boolean = matcher(n.getName) { case name => nameStack = VarName(name.getName) :: nameStack } override def leaveVarNode(n: VarNode): Node = { (nameStack.headOption, n.getName) match { case (Some(n1), n2) if n1.value == n2.getName => nameStack = nameStack drop 1 case _ => () } n } override protected def assertions(): Unit = require(nameStack.isEmpty) } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorImports.scala ================================================ package com.olvind package requiresjs import ammonite.ops.Path import jdk.nashorn.internal.ir._ import scala.collection.JavaConverters._ import scala.collection.mutable case class VisitorImports(n: FunctionNode, currentPath: Path) extends VisitorHelperNameStack[FunctionNode, Seq[Import]](n) { private val ret: mutable.Map[VarName, Import] = mutable.Map.empty[VarName, Import] override def enterCallNode(n: CallNode): Boolean = matcher((n.getFunction, n.getArgs.asScala.toList)) { case (i: IdentNode, List(o: LiteralNode[_])) if i.getName == "require" => val target = if (o.getString.startsWith(".")) Left(add(currentPath, o.getString)) else Right(o.getString) val name = nameStack.headOption.getOrElse(VarName(o.getString)) ret(name) = Import(name, target) case (i: IdentNode, List(arg: IdentNode)) if i.getName.contains("interopRequireDefault") => ret(VarName(arg.getName)) = ret(VarName(arg.getName)).copy(varName = nameStack.head) } override protected def fetchValue(): Seq[Import] = { ret.values.toSeq } } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/VisitorPropType.scala ================================================ package com.olvind package requiresjs import jdk.nashorn.internal.ir._ import scala.collection.JavaConverters._ case class VisitorPropType( n: CompName, o: ObjectNode, jsContent: String, is: Seq[Import] ) extends VisitorHelper[ObjectNode, Map[PropName, PropUnparsed]](o) { private var ret: Option[Map[PropName, PropUnparsed]] = None def mapPropType( start: Int, ps: List[PropertyNode] ): List[(PropName, PropUnparsed)] = { ps match { case Nil => Nil case p :: pt => val commentOS: Option[PropComment] = Some(jsContent.substring(start, p.getStart).trim) .filterNot(_.isEmpty) map PropComment.clean val typeS: PropTypeUnparsed = PropTypeUnparsed(jsContent.substring(p.getValue.getStart, p.getValue.getFinish)) (PropName(p.getKeyName) -> PropUnparsed(n, typeS, commentOS)) +: mapPropType( p.getValue.getFinish + 1, pt) } } override def enterObjectNode(o: ObjectNode): Boolean = { ret = Some( mapPropType(o.getStart + 1, o.getElements.asScala.toList).toMap ) false } override protected def fetchValue(): Map[PropName, PropUnparsed] = ret.getOrElse(panic(s"Count not find $n")) } ================================================ FILE: gen/src/main/scala/com/olvind/requiresjs/types.scala ================================================ package com.olvind package requiresjs import ammonite.ops.Path import jdk.nashorn.internal.ir.FunctionNode case class ParsedFile(path: Path, content: String, result: FunctionNode) object Required { def apply(path: Path, rs: Seq[Lazy[Required]]): Lazy[Required] = rs.size match { case 0 ⇒ Lazy(NotFound(path)) case 1 ⇒ rs.head case n ⇒ Lazy(Multiple(path, rs)) } } sealed trait Required case class Multiple(path: Path, rs: Seq[Lazy[Required]]) extends Required case class Single(compName: CompName, c: FoundComponent) extends Required case class NotFound(path: Path) extends Required case class FoundComponent( name: CompName, file: Path, jsContent: String, props: Map[PropName, PropUnparsed], methods: Option[Set[MemberMethod]] ) ================================================ FILE: gen/src/main/scala/com/olvind/sui/SuiLibrary.scala ================================================ package com.olvind package sui import ammonite.ops._ import scala.language.implicitConversions case class SuiLibrary(base: Path) extends Library { /* todo: make requiresjs clever enough to figure this out by itself */ override val locations = Seq( base ) override val prefixOpt = Some("Sui") override val name = "semanticui" override val typeMapper = SuiTypeMapper override val memberMapper = SuiTypeMemberMethodMapper override val indexNames = Set("index.js") override val packageName = "chandu0101.scalajs.react.components.semanticui" val icon = ComponentDef(CompName("Icon")) val components: Seq[ComponentDef] = Seq( // ComponentDef(CompName("AutoControlledComponent")), // ComponentDef(CompName("Embed")), //has weird enum for screen res // ComponentDef(CompName("keyboardKey")), // ComponentDef(CompName("leven")), // ComponentDef(CompName("Select")), // ComponentDef(CompName("Accordion")), // ComponentDef(CompName("AccordionContent")), // ComponentDef(CompName("AccordionTitle")), // ComponentDef(CompName("Advertisement")), // ComponentDef(CompName("Breadcrumb")), // ComponentDef(CompName("BreadcrumbDivider")), // ComponentDef(CompName("BreadcrumbSection")), ComponentDef(CompName("Button"), domeTypeOpt = Some(DomInput)), // ComponentDef(CompName("ButtonContent")), // ComponentDef(CompName("ButtonGroup")), // ComponentDef(CompName("ButtonOr")), // ComponentDef(CompName("Card")), // ComponentDef(CompName("CardContent")), // ComponentDef(CompName("CardDescription")), // ComponentDef(CompName("CardGroup")), // ComponentDef(CompName("CardHeader")), // ComponentDef(CompName("CardMeta")), // ComponentDef(CompName("Checkbox")), // ComponentDef(CompName("Comment")), // ComponentDef(CompName("CommentAction")), // ComponentDef(CompName("CommentActions")), // ComponentDef(CompName("CommentAuthor")), // ComponentDef(CompName("CommentAvatar")), // ComponentDef(CompName("CommentContent")), // ComponentDef(CompName("CommentGroup")), // ComponentDef(CompName("CommentMetadata")), // ComponentDef(CompName("CommentText")), // ComponentDef(CompName("Confirm")), ComponentDef(CompName("Container")), // ComponentDef(CompName("Dimmer")), // ComponentDef(CompName("DimmerDimmable")), ComponentDef(CompName("Divider")), // ComponentDef(CompName("Dropdown")), // ComponentDef(CompName("DropdownDivider")), // ComponentDef(CompName("DropdownHeader")), // ComponentDef(CompName("DropdownItem")), // ComponentDef(CompName("DropdownMenu")), // ComponentDef(CompName("Feed")), // ComponentDef(CompName("FeedContent")), // ComponentDef(CompName("FeedDate")), // ComponentDef(CompName("FeedEvent")), // ComponentDef(CompName("FeedExtra")), // ComponentDef(CompName("FeedLabel")), // ComponentDef(CompName("FeedLike")), // ComponentDef(CompName("FeedMeta")), // ComponentDef(CompName("FeedSummary")), // ComponentDef(CompName("FeedUser")), ComponentDef(CompName("Flag")), // ComponentDef(CompName("Form")), // ComponentDef(CompName("FormButton")), // ComponentDef(CompName("FormCheckbox")), // ComponentDef(CompName("FormDropdown")), // ComponentDef(CompName("FormField")), // ComponentDef(CompName("FormGroup")), // ComponentDef(CompName("FormInput")), // ComponentDef(CompName("FormRadio")), // ComponentDef(CompName("FormSelect")), // ComponentDef(CompName("FormTextArea")), ComponentDef(CompName("Grid")), ComponentDef(CompName("GridColumn")), // ComponentDef(CompName("GridRow")), ComponentDef(CompName("Header")), // ComponentDef(CompName("HeaderContent")), // ComponentDef(CompName("HeaderSubheader")), icon, ComponentDef(CompName("IconGroup")), ComponentDef(CompName("Image")), // ComponentDef(CompName("ImageGroup")), ComponentDef(CompName("Input"), domeTypeOpt = Some(DomInput)), // ComponentDef(CompName("Item")), // ComponentDef(CompName("ItemContent")), // ComponentDef(CompName("ItemDescription")), // ComponentDef(CompName("ItemExtra")), // ComponentDef(CompName("ItemGroup")), // ComponentDef(CompName("ItemHeader")), // ComponentDef(CompName("ItemImage")), // ComponentDef(CompName("ItemMeta")), // ComponentDef(CompName("Label")), // ComponentDef(CompName("LabelDetail")), // ComponentDef(CompName("LabelGroup")), ComponentDef(CompName("List")), ComponentDef(CompName("ListContent")), // ComponentDef(CompName("ListDescription")), // ComponentDef(CompName("ListHeader")), ComponentDef(CompName("ListIcon"), shared = Some(icon)), ComponentDef(CompName("ListItem")), // ComponentDef(CompName("ListList")), // ComponentDef(CompName("Loader")), ComponentDef(CompName("Menu")), ComponentDef(CompName("MenuHeader")), ComponentDef(CompName("MenuItem")), ComponentDef(CompName("MenuMenu")), // ComponentDef(CompName("Message")), // ComponentDef(CompName("MessageContent")), // ComponentDef(CompName("MessageHeader")), // ComponentDef(CompName("MessageItem")), // ComponentDef(CompName("MessageList")), // ComponentDef(CompName("Modal")), // ComponentDef(CompName("ModalActions")), // ComponentDef(CompName("ModalContent")), // ComponentDef(CompName("ModalDescription")), // ComponentDef(CompName("ModalHeader")), // ComponentDef(CompName("Popup")), // ComponentDef(CompName("PopupContent")), // ComponentDef(CompName("PopupHeader")), // ComponentDef(CompName("Portal")), // ComponentDef(CompName("Progress")), // ComponentDef(CompName("Radio")), // ComponentDef(CompName("Rail")), // ComponentDef(CompName("Rating")), // ComponentDef(CompName("RatingIcon")), // ComponentDef(CompName("Reveal")), // ComponentDef(CompName("RevealContent")), // ComponentDef(CompName("Search")), // ComponentDef(CompName("SearchCategory")), // ComponentDef(CompName("SearchResult")), // ComponentDef(CompName("SearchResults")), ComponentDef(CompName("Segment")), // ComponentDef(CompName("SegmentGroup")), // ComponentDef(CompName("Sidebar")), // ComponentDef(CompName("SidebarPushable")), // ComponentDef(CompName("SidebarPusher")), // ComponentDef(CompName("Statistic")), // ComponentDef(CompName("StatisticGroup")), // ComponentDef(CompName("StatisticLabel")), // ComponentDef(CompName("StatisticValue")), // ComponentDef(CompName("Step")), // ComponentDef(CompName("StepContent")), // ComponentDef(CompName("StepDescription")), // ComponentDef(CompName("StepGroup")), // ComponentDef(CompName("StepTitle")), // ComponentDef(CompName("Table")), // ComponentDef(CompName("TableBody")), // ComponentDef(CompName("TableCell")), // ComponentDef(CompName("TableFooter")), // ComponentDef(CompName("TableHeader")), // ComponentDef(CompName("TableHeaderCell")), // ComponentDef(CompName("TableRow")), ComponentDef(CompName("TextArea")) // ComponentDef(CompName("Visibility")) ) } ================================================ FILE: gen/src/main/scala/com/olvind/sui/SuiRunner.scala ================================================ package com.olvind package sui import ammonite.ops.Path object SuiRunner extends App { args.toList match { case OutputFolder(buildFolder) :: OutputFolder(outputFolder) :: Nil => val outs: Seq[Path] = Runner(SuiLibrary(buildFolder), outputFolder) case _ => System.err.println("Syntax: SuiRunner ") System.exit(1) } } ================================================ FILE: gen/src/main/scala/com/olvind/sui/SuiTypeMapper.scala ================================================ package com.olvind package sui object SuiTypeMapper extends TypeMapper { val typeT = Normal("T").generic("T") val typeTJs = Normal("T").genericJs("T") def apply(compName: CompName, fieldName: PropName, typeString: String): Type = { def is(s: String) = fieldName.value.toLowerCase contains s.toLowerCase def split(drop: Int, s: String) = s.split("[\'\"\\(\\)\\[\\],\\s]").map(_.trim).filterNot(_.isEmpty).drop(drop) (compName.value, fieldName.value, typeString) match { case ("Input", "icon", _) => Normal("SuiIconType") case ("Flag", "name", _) => Normal("String | SuiCountry") case ("Header", "as", _) => Normal("String | js.Function") case ("Header", "image", _) => Normal("String | ReactElement") case ("Header", "icon", _) => Normal("String | js.Object | ReactElement") case ("Button", "children", _) => Normal("VdomNode") case ("Button", "animated", _) => Normal("Boolean | ButtonAnimatedType") case ("Icon", "name", "_lib.customsuggest(_lib.SUI.ALL_ICONS_IN_ALL_CONTEXTS)") => Normal("SuiIconType") case (_, "textAlign", _) => Enum(compName, Seq("left", "center", "right", "justified"), "SuiTextAlignment") case (_, "size", _) => Enum(compName, Seq("mini", "tiny", "small", "medium", "large", "big", "huge", "massive"), "SuiSize") case ("IconGroup", "name", "_lib.customsuggest(_lib.SUI.ALL_ICONS_IN_ALL_CONTEXTS)") => Normal("SuiIconType") case (_, _, e) if e.contains("oneOfType") || e.contains("some(") => { val splitted = split(1, e) Normal(splitted.map(t => apply(compName, fieldName, t)) map (_.name) mkString " | ") } case (_, _, "Mui.oneOf(_lib.SUI.WIDTHS)") => Normal("Double") case (_, _, "Mui.oneOf(_lib.SUI.COLORS)") => Enum(compName, Seq("red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "black"), "SuiColor") case (_, _, "Mui.oneOf(_lib.SUI.FLOATS)") => Enum(compName, Seq("left", "right"), "SuiFloat") case (_, _, "Mui.oneOf(_lib.SUI.SIZES)") => Enum(compName, Seq("mini", "tiny", "small", "medium", "large", "big", "huge", "massive"), "SuiSize") case (_, _, "Mui.oneOf(_lib.SUI.TEXT_ALIGNMENTS)") => Enum(compName, Seq("left", "center", "right", "justified"), "SuiTextAlignment") case (_, _, "Mui.oneOf(_lib.SUI.VERTICAL_ALIGNMENTS)") => Enum(compName, Seq("bottom", "middle", "top"), "SuiVerticalAlignment") case (a, b, enum) if enum.contains("oneOf(") && enum.contains(']') => val found = "(\\[.*?\\])".r.findAllIn(enum).toList val array = found.last.replaceAll("\\[|\\]", "").split(", ").map(_.replace("'", "").replace(" ", "")) Enum(compName, array) case (a, b, enum) if enum.contains("oneOf(") && !enum.contains(']') => Enum(compName, split(1, enum)) case (_, _, "_lib.customas") => Normal("js.Any") //TODO: what to do with this? /* general */ case (_, "valueLink", "object") => Normal("js.Any") case (_, _, "string") => Normal("String") case (_, _, "bool") => Normal("Boolean") case (_, "children", "element") => Normal("VdomElement") case (_, _, "element") => Normal("ReactElement") case (_, "children", "node") => Normal("VdomNode") case (_, _, "node") => Normal("ReactNode") case (_, _, "number") => Normal("Double") case (_, "children", "arrayOf(element)") => Normal("js.Array[ReactElement]") case (_, _, "Mui.arrayOf") => Normal("js.Array[js.Any]") case (_, "valueLink", "Mui.object") => Normal("js.Any") case (_, _, "Mui.string") => Normal("String") case (_, _, "Mui.bool") => Normal("Boolean") case (_, "children", "Mui.element") => Normal("VdomElement") case (_, _, "Mui.element") => Normal("ReactElement") case (_, "children", "Mui.node") => Normal("VdomNode") case (_, _, "Mui.node") => Normal("ReactNode") case (_, _, "Mui.object") => Normal("js.Object") case (_, _, "Mui.number") => Normal("Double") case (_, "children", "Mui.arrayOf(Mui.element)") => Normal("js.Array[ReactElement]") case ("AutoComplete", "popoverProps", "object") => Normal("js.Any") case ("RadioButtonGroup", "defaultSelected", "any") => Normal("js.Any") case ("RadioButtonGroup", "valueSelected", "any") => Normal("js.Any") case ("Stepper", "children", "arrayOf(node)") => Normal("js.Any") /*Added by roberto@leibman.net*/ case ("DatePicker", "utils", "object") => Normal("DatePickerUtils") //TODO ??? case ("SelectField", "dropDownMenuProps", "object") => Normal("DropDownMenuProps") //TODO ??? case (_, _, "Mui.func") => Normal(SuiTypeMapperFunction(compName, fieldName)) case (_, _, "func") => Normal(SuiTypeMapperFunction(compName, fieldName)) case (a, b, c) => println(s"""case ("$a","$b","$c") => Normal("") //TODO write this Missing in TypeMapper""") Normal("js.Any /*//TODO: fix this in the TypeMapper*/") } } } ================================================ FILE: gen/src/main/scala/com/olvind/sui/SuiTypeMapperFunction.scala ================================================ package com.olvind package sui object SuiTypeMapperFunction { val Callback = "Callback" def apply(compName: CompName, name: PropName): String = (compName.value, name.value) match { case (_, "onClick") => "ReactMouseEventFromInput => Callback" case (_, "onChange") => "ReactEventFromInput => Callback" case _ => throw new Error( s"""case ("${compName.value}", "${name.value}") => Callback //TODO: Add function type mapping in ${getClass().getName}""") } } ================================================ FILE: gen/src/main/scala/com/olvind/sui/SuiTypeMemberMethodMapper.scala ================================================ package com.olvind package sui object SuiTypeMemberMethodMapper extends MemberMapper { override def apply(compName: CompName)(memberMethod: MemberMethod): ParsedMethod = ParsedMethod( apply(compName, memberMethod.paramNames, memberMethod.name), None ) private def apply(c: CompName, args: Seq[String], m: String) = (c.value, args.size, m) match { case ("DatePicker", 0, "getDate") => "getDate(): js.Date" case other ⇒ println("missing types for method: " + other) m + args.map(sanitize(_) + ": js.Any").mkString("(", ", ", ")") + ": js.Dynamic" } def sanitize(s: String) = if (s == "val") "`val`" else s } ================================================ FILE: gen/src/main/scala/com/olvind/types.scala ================================================ package com.olvind import ammonite.ops.Path trait Wrapper[A] { def value: A override def toString = value.toString } case class MemberMethod(name: String, paramNames: Seq[String]) final case class CompName(value: String) extends Wrapper[String] { def map(f: String => String) = CompName(f(value)) } final case class PropName(value: String) extends AnyVal { def clean: PropName = PropName(value.replaceAll("Deprecated:", "").replaceAll("or children", "").trim) } final case class PropComment(value: Option[String], anns: Seq[Annotation] = Seq.empty) object PropComment { def clean(s: String): PropComment = { val cleanLines = s.split("\n") .map( _.trim .replaceAll("(^/\\*\\*?|^//|\\*?\\*/$|^\\*)", "") .trim) .filterNot(_.isEmpty) val (_ans: List[Annotation], _lines: List[String]) = cleanLines.foldLeft[(List[Annotation], List[String])]((Nil, Nil)) { case ((as, lines), line) if line.toLowerCase.startsWith("@ignore") => (Ignore :: as, lines) case ((as, lines), line) if line.toLowerCase.startsWith("@param") => (Param(line.drop("@param".length).trim) :: as, lines) case ((Param(value) :: as, lines), line) => (Param(value + "\n" + line) :: as, lines) case ((as, lines), line) => (as, lines :+ line) } PropComment(if (_lines.nonEmpty) Some(_lines.mkString("\n")) else None, _ans.reverse) } def apply(str: String) = new PropComment(Some(str), Seq.empty) } final case class VarName(value: String) extends Wrapper[String] final case class Import( varName: VarName, target: Either[Path, String] ) case class Identifier private (value: String) extends Wrapper[String] object Identifier { def safe(m: String): Identifier = { val memberName = if (m.head.isDigit) "_" + m else m Identifier(memberName.replaceAll("[-/]", "_")) } } ================================================ FILE: gen/src/test/resources/mui15/Paper/Paper.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _simpleAssign = require('simple-assign'); var _simpleAssign2 = _interopRequireDefault(_simpleAssign); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('../utils/propTypes'); var _propTypes2 = _interopRequireDefault(_propTypes); var _transitions = require('../styles/transitions'); var _transitions2 = _interopRequireDefault(_transitions); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } function getStyles(props, context) { var circle = props.circle; var rounded = props.rounded; var transitionEnabled = props.transitionEnabled; var zDepth = props.zDepth; var _context$muiTheme = context.muiTheme; var baseTheme = _context$muiTheme.baseTheme; var paper = _context$muiTheme.paper; return { root: { color: paper.color, backgroundColor: paper.backgroundColor, transition: transitionEnabled && _transitions2.default.easeOut(), boxSizing: 'border-box', fontFamily: baseTheme.fontFamily, WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers borderRadius: circle ? '50%' : rounded ? '2px' : '0px' } }; } var Paper = function (_Component) { _inherits(Paper, _Component); function Paper() { _classCallCheck(this, Paper); return _possibleConstructorReturn(this, Object.getPrototypeOf(Paper).apply(this, arguments)); } _createClass(Paper, [{ key: 'render', value: function render() { var _props = this.props; var children = _props.children; var style = _props.style; var other = _objectWithoutProperties(_props, ['children', 'style']); var prepareStyles = this.context.muiTheme.prepareStyles; var styles = getStyles(this.props, this.context); return _react2.default.createElement( 'div', _extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), children ); } }]); return Paper; }(_react.Component); Paper.propTypes = { /** * Children passed into the paper element. */ children: _react.PropTypes.node, /** * Set to true to generate a circlular paper container. */ circle: _react.PropTypes.bool, /** * By default, the paper container will have a border radius. * Set this to false to generate a container with sharp corners. */ rounded: _react.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: _react.PropTypes.object, /** * Set to false to disable CSS transitions for the paper element. */ transitionEnabled: _react.PropTypes.bool, /** * This number represents the zDepth of the paper shadow. */ zDepth: _propTypes2.default.zDepth }; Paper.defaultProps = { circle: false, rounded: true, transitionEnabled: true, zDepth: 1 }; Paper.contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; exports.default = Paper; ================================================ FILE: gen/src/test/resources/mui15/Paper/index.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = undefined; var _Paper = require('./Paper'); var _Paper2 = _interopRequireDefault(_Paper); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } exports.default = _Paper2.default; ================================================ FILE: gen/src/test/resources/mui15/comps/Divider.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _simpleAssign = require('simple-assign'); var _simpleAssign2 = _interopRequireDefault(_simpleAssign); var _react = require('react'); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } var propTypes = { /** * The css class name of the root element. */ className: _react.PropTypes.string, /** * If true, the `Divider` will be indented `72px`. */ inset: _react.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: _react.PropTypes.object }; var defaultProps = { inset: false }; var contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; var Divider = function Divider(props, context) { var inset = props.inset; var style = props.style; var other = _objectWithoutProperties(props, ['inset', 'style']); var muiTheme = context.muiTheme; var prepareStyles = muiTheme.prepareStyles; var styles = { root: { margin: 0, marginTop: -1, marginLeft: inset ? 72 : 0, height: 1, border: 'none', backgroundColor: muiTheme.baseTheme.palette.borderColor } }; return _react2.default.createElement('hr', _extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) })); }; Divider.muiName = 'Divider'; Divider.propTypes = propTypes; Divider.defaultProps = defaultProps; Divider.contextTypes = contextTypes; exports.default = Divider; ================================================ FILE: gen/src/test/resources/mui15/comps/Drawer.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _simpleAssign = require('simple-assign'); var _simpleAssign2 = _interopRequireDefault(_simpleAssign); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _reactEventListener = require('react-event-listener'); var _reactEventListener2 = _interopRequireDefault(_reactEventListener); var _keycode = require('keycode'); var _keycode2 = _interopRequireDefault(_keycode); var _autoPrefix = require('../utils/autoPrefix'); var _autoPrefix2 = _interopRequireDefault(_autoPrefix); var _transitions = require('../styles/transitions'); var _transitions2 = _interopRequireDefault(_transitions); var _Overlay = require('../internal/Overlay'); var _Overlay2 = _interopRequireDefault(_Overlay); var _Paper = require('../Paper'); var _Paper2 = _interopRequireDefault(_Paper); var _propTypes = require('../utils/propTypes'); var _propTypes2 = _interopRequireDefault(_propTypes); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var openNavEventHandler = null; var Drawer = function (_Component) { _inherits(Drawer, _Component); function Drawer() { var _Object$getPrototypeO; var _temp, _this, _ret; _classCallCheck(this, Drawer); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Drawer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTapOverlay = function (event) { event.preventDefault(); _this.close('clickaway'); }, _this.handleKeyUp = function (event) { if (_this.state.open && !_this.props.docked && (0, _keycode2.default)(event) === 'esc') { _this.close('escape'); } }, _this.onBodyTouchStart = function (event) { var swipeAreaWidth = _this.props.swipeAreaWidth; var touchStartX = event.touches[0].pageX; var touchStartY = event.touches[0].pageY; // Open only if swiping from far left (or right) while closed if (swipeAreaWidth !== null && !_this.state.open) { if (_this.props.openSecondary) { // If openSecondary is true calculate from the far right if (touchStartX < document.body.offsetWidth - swipeAreaWidth) return; } else { // If openSecondary is false calculate from the far left if (touchStartX > swipeAreaWidth) return; } } if (!_this.state.open && (openNavEventHandler !== _this.onBodyTouchStart || _this.props.disableSwipeToOpen)) { return; } _this.maybeSwiping = true; _this.touchStartX = touchStartX; _this.touchStartY = touchStartY; document.body.addEventListener('touchmove', _this.onBodyTouchMove); document.body.addEventListener('touchend', _this.onBodyTouchEnd); document.body.addEventListener('touchcancel', _this.onBodyTouchEnd); }, _this.onBodyTouchMove = function (event) { var currentX = event.touches[0].pageX; var currentY = event.touches[0].pageY; if (_this.state.swiping) { event.preventDefault(); _this.setPosition(_this.getTranslateX(currentX)); } else if (_this.maybeSwiping) { var dXAbs = Math.abs(currentX - _this.touchStartX); var dYAbs = Math.abs(currentY - _this.touchStartY); // If the user has moved his thumb ten pixels in either direction, // we can safely make an assumption about whether he was intending // to swipe or scroll. var threshold = 10; if (dXAbs > threshold && dYAbs <= threshold) { _this.swipeStartX = currentX; _this.setState({ swiping: _this.state.open ? 'closing' : 'opening' }); _this.setPosition(_this.getTranslateX(currentX)); } else if (dXAbs <= threshold && dYAbs > threshold) { _this.onBodyTouchEnd(); } } }, _this.onBodyTouchEnd = function (event) { if (_this.state.swiping) { var currentX = event.changedTouches[0].pageX; var translateRatio = _this.getTranslateX(currentX) / _this.getMaxTranslateX(); _this.maybeSwiping = false; var swiping = _this.state.swiping; _this.setState({ swiping: null }); // We have to open or close after setting swiping to null, // because only then CSS transition is enabled. if (translateRatio > 0.5) { if (swiping === 'opening') { _this.setPosition(_this.getMaxTranslateX()); } else { _this.close('swipe'); } } else { if (swiping === 'opening') { _this.open('swipe'); } else { _this.setPosition(0); } } } else { _this.maybeSwiping = false; } document.body.removeEventListener('touchmove', _this.onBodyTouchMove); document.body.removeEventListener('touchend', _this.onBodyTouchEnd); document.body.removeEventListener('touchcancel', _this.onBodyTouchEnd); }, _temp), _possibleConstructorReturn(_this, _ret); } _createClass(Drawer, [{ key: 'componentWillMount', value: function componentWillMount() { this.maybeSwiping = false; this.touchStartX = null; this.touchStartY = null; this.swipeStartX = null; this.setState({ open: this.props.open !== null ? this.props.open : this.props.docked, swiping: null }); } }, { key: 'componentDidMount', value: function componentDidMount() { this.enableSwipeHandling(); } }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { // If controlled then the open prop takes precedence. if (nextProps.open !== null) { this.setState({ open: nextProps.open }); // Otherwise, if docked is changed, change the open state for when uncontrolled. } else if (this.props.docked !== nextProps.docked) { this.setState({ open: nextProps.docked }); } } }, { key: 'componentDidUpdate', value: function componentDidUpdate() { this.enableSwipeHandling(); } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this.disableSwipeHandling(); } }, { key: 'getStyles', value: function getStyles() { var muiTheme = this.context.muiTheme; var theme = muiTheme.navDrawer; var x = this.getTranslateMultiplier() * (this.state.open ? 0 : this.getMaxTranslateX()); var styles = { root: { height: '100%', width: this.props.width || theme.width, position: 'fixed', zIndex: muiTheme.zIndex.navDrawer, left: 0, top: 0, transform: 'translate3d(' + x + 'px, 0, 0)', transition: !this.state.swiping && _transitions2.default.easeOut(null, 'transform', null), backgroundColor: theme.color, overflow: 'auto', WebkitOverflowScrolling: 'touch' }, // iOS momentum scrolling overlay: { zIndex: muiTheme.zIndex.drawerOverlay, pointerEvents: this.state.open ? 'auto' : 'none' }, // Bypass mouse events when left nav is closing. rootWhenOpenRight: { left: 'auto', right: 0 } }; return styles; } }, { key: 'shouldShow', value: function shouldShow() { return this.state.open || !!this.state.swiping; // component is swiping } }, { key: 'close', value: function close(reason) { if (this.props.open === null) this.setState({ open: false }); if (this.props.onRequestChange) this.props.onRequestChange(false, reason); return this; } }, { key: 'open', value: function open(reason) { if (this.props.open === null) this.setState({ open: true }); if (this.props.onRequestChange) this.props.onRequestChange(true, reason); return this; } }, { key: 'getMaxTranslateX', value: function getMaxTranslateX() { var width = this.props.width || this.context.muiTheme.navDrawer.width; return width + 10; } }, { key: 'getTranslateMultiplier', value: function getTranslateMultiplier() { return this.props.openSecondary ? 1 : -1; } }, { key: 'enableSwipeHandling', value: function enableSwipeHandling() { if (!this.props.docked) { document.body.addEventListener('touchstart', this.onBodyTouchStart); if (!openNavEventHandler) { openNavEventHandler = this.onBodyTouchStart; } } else { this.disableSwipeHandling(); } } }, { key: 'disableSwipeHandling', value: function disableSwipeHandling() { document.body.removeEventListener('touchstart', this.onBodyTouchStart); if (openNavEventHandler === this.onBodyTouchStart) { openNavEventHandler = null; } } }, { key: 'setPosition', value: function setPosition(translateX) { var drawer = _reactDom2.default.findDOMNode(this.refs.clickAwayableElement); var transformCSS = 'translate3d(' + this.getTranslateMultiplier() * translateX + 'px, 0, 0)'; this.refs.overlay.setOpacity(1 - translateX / this.getMaxTranslateX()); _autoPrefix2.default.set(drawer.style, 'transform', transformCSS); } }, { key: 'getTranslateX', value: function getTranslateX(currentX) { return Math.min(Math.max(this.state.swiping === 'closing' ? this.getTranslateMultiplier() * (currentX - this.swipeStartX) : this.getMaxTranslateX() - this.getTranslateMultiplier() * (this.swipeStartX - currentX), 0), this.getMaxTranslateX()); } }, { key: 'render', value: function render() { var _props = this.props; var children = _props.children; var className = _props.className; var containerClassName = _props.containerClassName; var containerStyle = _props.containerStyle; var docked = _props.docked; var openSecondary = _props.openSecondary; var overlayClassName = _props.overlayClassName; var overlayStyle = _props.overlayStyle; var style = _props.style; var zDepth = _props.zDepth; var styles = this.getStyles(); var overlay = void 0; if (!docked) { overlay = _react2.default.createElement(_Overlay2.default, { ref: 'overlay', show: this.shouldShow(), className: overlayClassName, style: (0, _simpleAssign2.default)(styles.overlay, overlayStyle), transitionEnabled: !this.state.swiping, onTouchTap: this.handleTouchTapOverlay }); } return _react2.default.createElement( 'div', { className: className, style: style }, _react2.default.createElement(_reactEventListener2.default, { elementName: 'window', onKeyUp: this.handleKeyUp }), overlay, _react2.default.createElement( _Paper2.default, { ref: 'clickAwayableElement', zDepth: zDepth, rounded: false, transitionEnabled: !this.state.swiping, className: containerClassName, style: (0, _simpleAssign2.default)(styles.root, openSecondary && styles.rootWhenOpenRight, containerStyle) }, children ) ); } }]); return Drawer; }(_react.Component); Drawer.propTypes = { /** * The contents of the `Drawer` */ children: _react.PropTypes.node, /** * The CSS class name of the root element. */ className: _react.PropTypes.string, /** * The CSS class name of the container element. */ containerClassName: _react.PropTypes.string, /** * Override the inline-styles of the container element. */ containerStyle: _react.PropTypes.object, /** * If true, swiping sideways when the `Drawer` is closed will not open it. */ disableSwipeToOpen: _react.PropTypes.bool, /** * If true, the `Drawer` will be docked. In this state, the overlay won't show and * clicking on a menu item will not close the `Drawer`. */ docked: _react.PropTypes.bool, /** * Callback function fired when the `open` state of the `Drawer` is requested to be changed. * * @param {boolean} open If true, the `Drawer` was requested to be opened. * @param {string} reason The reason for the open or close request. Possible values are * 'swipe' for open requests; 'clickaway' (on overlay clicks), * 'escape' (on escape key press), and 'swipe' for close requests. */ onRequestChange: _react.PropTypes.func, /** * If true, the `Drawer` is opened. Providing a value will turn the `Drawer` * into a controlled component. */ open: _react.PropTypes.bool, /** * If true, the `Drawer` is positioned to open from the opposite side. */ openSecondary: _react.PropTypes.bool, /** * The CSS class name to add to the `Overlay` component that is rendered behind the `Drawer`. */ overlayClassName: _react.PropTypes.string, /** * Override the inline-styles of the `Overlay` component that is rendered behind the `Drawer`. */ overlayStyle: _react.PropTypes.object, /** * Override the inline-styles of the root element. */ style: _react.PropTypes.object, /** * The width of the left most (or right most) area in pixels where the `Drawer` can be * swiped open from. Setting this to `null` spans that area to the entire page * (**CAUTION!** Setting this property to `null` might cause issues with sliders and * swipeable `Tabs`: use at your own risk). */ swipeAreaWidth: _react.PropTypes.number, /** * The width of the `Drawer` in pixels. Defaults to using the values from theme. */ width: _react.PropTypes.number, /** * The zDepth of the `Drawer`. */ zDepth: _propTypes2.default.zDepth }; Drawer.defaultProps = { disableSwipeToOpen: false, docked: true, open: null, openSecondary: false, swipeAreaWidth: 30, width: null, zDepth: 2 }; Drawer.contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; exports.default = Drawer; ================================================ FILE: gen/src/test/resources/mui15/internal/AutoLockScrolling.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _react = require('react'); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var originalBodyOverflow = null; var lockingCounter = 0; var AutoLockScrolling = function (_Component) { _inherits(AutoLockScrolling, _Component); function AutoLockScrolling() { var _Object$getPrototypeO; var _temp, _this, _ret; _classCallCheck(this, AutoLockScrolling); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AutoLockScrolling)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.locked = false, _temp), _possibleConstructorReturn(_this, _ret); } _createClass(AutoLockScrolling, [{ key: 'componentDidMount', value: function componentDidMount() { if (this.props.lock === true) this.preventScrolling(); } }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if (this.props.lock !== nextProps.lock) { if (nextProps.lock) { this.preventScrolling(); } else { this.allowScrolling(); } } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this.allowScrolling(); } // force to only lock/unlock once }, { key: 'preventScrolling', value: function preventScrolling() { if (this.locked === true) return; lockingCounter = lockingCounter + 1; this.locked = true; // only lock the first time the component is mounted. if (lockingCounter === 1) { var body = document.getElementsByTagName('body')[0]; originalBodyOverflow = body.style.overflow; body.style.overflow = 'hidden'; } } }, { key: 'allowScrolling', value: function allowScrolling() { if (this.locked === true) { lockingCounter = lockingCounter - 1; this.locked = false; } if (lockingCounter === 0 && originalBodyOverflow !== null) { var body = document.getElementsByTagName('body')[0]; body.style.overflow = originalBodyOverflow || ''; originalBodyOverflow = null; } } }, { key: 'render', value: function render() { return null; } }]); return AutoLockScrolling; }(_react.Component); AutoLockScrolling.propTypes = { lock: _react.PropTypes.bool.isRequired }; exports.default = AutoLockScrolling; ================================================ FILE: gen/src/test/resources/mui15/internal/Overlay.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _simpleAssign = require('simple-assign'); var _simpleAssign2 = _interopRequireDefault(_simpleAssign); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _transitions = require('../styles/transitions'); var _transitions2 = _interopRequireDefault(_transitions); var _AutoLockScrolling = require('./AutoLockScrolling'); var _AutoLockScrolling2 = _interopRequireDefault(_AutoLockScrolling); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } function getStyles(props, context) { var overlay = context.muiTheme.overlay; var style = { root: { position: 'fixed', height: '100%', width: '100%', top: 0, left: '-100%', opacity: 0, backgroundColor: overlay.backgroundColor, WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', // Remove mobile color flashing (deprecated) // Two ways to promote overlay to its own render layer willChange: 'opacity', transform: 'translateZ(0)', transition: props.transitionEnabled && _transitions2.default.easeOut('0ms', 'left', '400ms') + ', ' + _transitions2.default.easeOut('400ms', 'opacity') } }; if (props.show) { (0, _simpleAssign2.default)(style.root, { left: 0, opacity: 1, transition: _transitions2.default.easeOut('0ms', 'left') + ', ' + _transitions2.default.easeOut('400ms', 'opacity') }); } return style; } var Overlay = function (_Component) { _inherits(Overlay, _Component); function Overlay() { _classCallCheck(this, Overlay); return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments)); } _createClass(Overlay, [{ key: 'setOpacity', value: function setOpacity(opacity) { this.refs.overlay.style.opacity = opacity; } }, { key: 'render', value: function render() { var _props = this.props; var autoLockScrolling = _props.autoLockScrolling; var show = _props.show; var style = _props.style; var other = _objectWithoutProperties(_props, ['autoLockScrolling', 'show', 'style']); var prepareStyles = this.context.muiTheme.prepareStyles; var styles = getStyles(this.props, this.context); return _react2.default.createElement( 'div', _extends({}, other, { ref: 'overlay', style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), autoLockScrolling && _react2.default.createElement(_AutoLockScrolling2.default, { lock: show }) ); } }]); return Overlay; }(_react.Component); Overlay.propTypes = { autoLockScrolling: _react.PropTypes.bool, show: _react.PropTypes.bool.isRequired, /** * Override the inline-styles of the root element. */ style: _react.PropTypes.object, transitionEnabled: _react.PropTypes.bool }; Overlay.defaultProps = { autoLockScrolling: true, transitionEnabled: true, style: {} }; Overlay.contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; exports.default = Overlay; ================================================ FILE: gen/src/test/resources/mui15/styles/transitions.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = { easeOutFunction: 'cubic-bezier(0.23, 1, 0.32, 1)', easeInOutFunction: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)', easeOut: function easeOut(duration, property, delay, easeFunction) { easeFunction = easeFunction || this.easeOutFunction; if (property && Object.prototype.toString.call(property) === '[object Array]') { var transitions = ''; for (var i = 0; i < property.length; i++) { if (transitions) transitions += ','; transitions += this.create(duration, property[i], delay, easeFunction); } return transitions; } else { return this.create(duration, property, delay, easeFunction); } }, create: function create(duration, property, delay, easeFunction) { duration = duration || '450ms'; property = property || 'all'; delay = delay || '0ms'; easeFunction = easeFunction || 'linear'; return property + ' ' + duration + ' ' + easeFunction + ' ' + delay; } }; ================================================ FILE: gen/src/test/resources/mui15/utils/autoPrefix.js ================================================ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = { set: function set(style, key, value) { style[key] = value; } }; ================================================ FILE: gen/src/test/resources/mui15/utils/propTypes.js ================================================ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require('react'); var horizontal = _react.PropTypes.oneOf(['left', 'middle', 'right']); var vertical = _react.PropTypes.oneOf(['top', 'center', 'bottom']); exports.default = { corners: _react.PropTypes.oneOf(['bottom-left', 'bottom-right', 'top-left', 'top-right']), horizontal: horizontal, vertical: vertical, origin: _react.PropTypes.shape({ horizontal: horizontal, vertical: vertical }), cornersAndCenter: _react.PropTypes.oneOf(['bottom-center', 'bottom-left', 'bottom-right', 'top-center', 'top-left', 'top-right']), stringOrNumber: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), zDepth: _react.PropTypes.oneOf([0, 1, 2, 3, 4, 5]) }; ================================================ FILE: gen/src/test/scala/com/olvind/JsParserTest.scala ================================================ package com.olvind import ammonite.ops._ import com.olvind.requiresjs._ class JsParserTest extends org.scalatest.FunSuite with org.scalatest.Matchers { private val mui15 = cwd / "src" / "test" / "resources" / "mui15" / "comps" test("Divider.propTypes = propTypes;") { val result = Require(mui15 / "Divider.js", Set("index.js")) println(result) } // test("Drawer.propTypes = {...}") { // val result: Required = Require(mui15 / "Drawer.js") // println(result) // } } ================================================ FILE: gen/src/test/scala/com/olvind/PropCommentTest.scala ================================================ package com.olvind class PropCommentTest extends org.scalatest.FunSuite with org.scalatest.Matchers { test("comment 0") { val inputs: Seq[String] = Seq( """//arne""", """/*arne*/""", """/**arne*/""", """ /** arne */""", """ /** arne **/""" ) inputs map PropComment.clean map (_ should equal(PropComment(Some("arne"), Seq.empty))) } test("comment 1") { val input = """ /** | * @ignore | * The material-ui theme applied to this component. | */ |""".stripMargin PropComment.clean(input) should equal( PropComment(Some("The material-ui theme applied to this component."), Seq(Ignore))) } test("comment 2") { val input = """ /** | * Callback function that is fired when the header of step is touched. | * | * @param {number} stepIndex - The index of step is being touched. | * @param {node} Step component which is being touched | */ |""".stripMargin PropComment.clean(input) should equal( PropComment( Some("Callback function that is fired when the header of step is touched."), Seq( Param("{number} stepIndex - The index of step is being touched."), Param("{node} Step component which is being touched") ) )) } test("comment 3") { val input = """ /** | * Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the | * `autoHideDuration` timer expires. | * | * Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar` | * `open` prop. | * | * The `reason` parameter can optionally be used to control the response to `onRequestClose`, | * for example ignoring `clickaway`. | * | * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` | */""".stripMargin val expected = PropComment( Some( """Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the |`autoHideDuration` timer expires. |Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar` |`open` prop. |The `reason` parameter can optionally be used to control the response to `onRequestClose`, |for example ignoring `clickaway`.""".stripMargin), Seq( Param( """{string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`""")) ) val actual = PropComment.clean(input) expected.value should equal(actual.value) expected.anns should equal(actual.anns) } test("comment 4") { val input = """ /** | * @param 1 | * 2 | * @param 3 | * 4 | */ |""".stripMargin PropComment.clean(input).anns should equal(Seq(Param("1\n2"), Param("3\n4"))) } test("comment 5") { val input = """ /** | * @ignore | */ |""".stripMargin PropComment.clean(input) should equal(PropComment(None, Seq(Ignore))) } } ================================================ FILE: macros/src/main/scala/chandu0101/macros/tojs/GhPagesMacros.scala ================================================ package chandu0101.macros.tojs import java.util.regex.Pattern import scala.reflect.macros.blackbox.Context import scala.language.experimental.macros /** * Shamelessly stolen from https://github.com/japgolly/scalajs-react/blob/master/gh-pages-macros/src/main/scala/ghpages/GhPagesMacros.scala */ object GhPagesMacros { def exampleSource: String = macro GhPagesMacroImpls.exampleSource } object GhPagesMacroImpls { val trimRight = "\\s+$".r def blankLine(s: String) = s.trim.isEmpty @annotation.tailrec def trimLeftAll(ls: Stream[String]): Stream[String] = if (ls.nonEmpty && ls.forall(_.headOption forall Character.isWhitespace)) trimLeftAll(ls.map(s => if (s.isEmpty) s else s.tail)) else ls val exampleStart = "EXAMPLE:START" val exampleEnd = "EXAMPLE:END" } class GhPagesMacroImpls(val c: Context) extends ReactMacroUtils { import GhPagesMacroImpls._ import c.universe._ def splitOnce(marker: String)(s: String): (String, String) = { val r = s"""\n[ \t]*//[ \t]*${Pattern quote marker}[ \t]*""".r val x = r.split(s) if (x.length < 2) fail(s"Marker not found: // $marker") else if (x.length > 2) fail(s"Duplicate marker found: // $marker") (x(0), x(1)) } def betweenMarkers(s: String, a: String, b: String): String = { val tmp = splitOnce(a)(s)._2 splitOnce(b)(tmp)._1 } def exampleSource: c.Expr[String] = { val fileContent = String valueOf c.enclosingPosition.source.content val egContent = betweenMarkers(fileContent, exampleStart, exampleEnd) val lines = egContent .split('\n') .toStream .map(trimRight.replaceFirstIn(_, "")) .dropWhile(blankLine) .reverse .dropWhile(blankLine) .reverse val output = trimLeftAll(lines) mkString "\n" c.Expr[String](Literal(Constant(output))) } } ================================================ FILE: macros/src/main/scala/chandu0101/macros/tojs/JSMacro.scala ================================================ package chandu0101.macros.tojs import japgolly.scalajs.react.CallbackTo import japgolly.scalajs.react.vdom.{TagOf, VdomElement, VdomNode} import scala.collection.{GenMap, GenTraversableOnce} import scala.language.experimental.macros import scala.reflect.macros.blackbox import scala.scalajs.js /** * modified version of https://github.com/wav/scala-macros/blob/master/src/main/scala/wav/common/scalajs/macros/Macros.scala * via https://github.com/chandu0101/macros/blob/master/src/main/scala/chandu0101/macros/tojs/JSMacro.scala */ object JSMacro { type TOJS = { val toJS: js.Object } def apply[T]: T => js.Object = macro applyImpl[T] def applyImpl[T: c.WeakTypeTag](c: blackbox.Context): c.Tree = { import c.universe._ def isOptional(tpe: Type): Boolean = tpe <:< typeOf[Option[_]] || tpe <:< typeOf[js.UndefOr[_]] def isNotPrimitiveAnyVal(tpe: Type) = !tpe.typeSymbol.fullName.startsWith("scala.") def flattenUnion(tpe: Type): List[Type] = if (tpe <:< typeOf[js.|[_, _]]) flattenUnion(tpe.typeArgs(0)) ++ flattenUnion(tpe.typeArgs(1)) else List(tpe) def getJSValueTree(target: Tree, rt: Type): Tree = { if (rt <:< typeOf[TOJS]) q"""if ($target != null) $target.toJS else null""" /* scala collections */ else if (rt <:< typeOf[GenMap[String, _]]) if (rt.typeArgs(1) <:< typeOf[TOJS]) q"""$target.map{ case (k, o) => k -> (if(o == null) null else o.toJS)}.toJSDictionary""" else q"""$target.toJSDictionary""" else if (rt <:< typeOf[GenTraversableOnce[_]] || (rt <:< typeOf[Array[_]])) if (rt.typeArgs.head <:< typeOf[TOJS]) q"""$target.map(o => if(o == null) null else o.toJS).toJSArray""" else q"""$target.toJSArray""" /* javascript collections. Only need to rewrite if type parameter is <:< TOJS */ else if (rt <:< typeOf[js.Dictionary[_]] && rt.typeArgs.head <:< typeOf[TOJS]) q"""$target.map{case(k, o) => (k, if(o == null) null else o.toJS)}.toJSDictionary""" else if (rt <:< typeOf[js.Array[_]] && rt.typeArgs.head <:< typeOf[TOJS]) q"""$target.map(o => if(o == null) null else o.toJS)""" /* rewrite functions returning a Callback so that javascript land can call them */ else if (rt <:< typeOf[CallbackTo[_]]) q"""$target.toJsFn""" else if (rt <:< typeOf[Function0[CallbackTo[_]]]) q"""$target().toJsFn""" else if (rt <:< typeOf[Function1[_, CallbackTo[_]]]) q"""js.Any.fromFunction1(((t0: ${rt.typeArgs(0)}) => $target(t0).runNow()))""" else if (rt <:< typeOf[Function2[_, _, CallbackTo[_]]]) q"""js.Any.fromFunction2(((t0: ${rt.typeArgs(0)}, t1: ${rt.typeArgs(1)}) => $target(t0, t1).runNow()))""" else if (rt <:< typeOf[Function3[_, _, _, CallbackTo[_]]]) q"""js.Any.fromFunction3(((t0: ${rt.typeArgs(0)}, t1: ${rt.typeArgs(1)}, t2: ${rt.typeArgs(2)}) => $target(t0, t1, t2).runNow()))""" else if (rt <:< typeOf[Function0[_]]) q"""js.Any.fromFunction0($target)""" else if (rt <:< typeOf[Function1[_, _]]) q"""js.Any.fromFunction1($target)""" else if (rt <:< typeOf[Function2[_, _, _]]) q"""js.Any.fromFunction2($target)""" else if (rt <:< typeOf[Function3[_, _, _, _]]) q"""js.Any.fromFunction3($target)""" /* other scalajs-react things we need to rewrite */ else if (rt <:< typeOf[VdomElement]) q"""$target.rawElement.asInstanceOf[js.Any]""" else if (rt <:< typeOf[VdomNode]) q"""$target.rawNode.asInstanceOf[js.Any]""" else if (rt <:< typeOf[TagOf[_]]) q"""$target.render.rawElement.asInstanceOf[js.Any]""" /* Other values. Keep AnyVal below at least CallbackTo */ else if (rt <:< typeOf[AnyVal] && isNotPrimitiveAnyVal(rt)) q"""$target.value.asInstanceOf[js.Any]""" else if (rt <:< typeOf[AnyVal] || rt <:< typeOf[String] || rt <:< typeOf[js.Any]) q"""$target.asInstanceOf[js.Any]""" else if (rt <:< typeOf[Enumeration#Value]) q"""$target.toString.asInstanceOf[js.Any]""" else if (rt <:< typeOf[js.|[_, _]]) { val (jsTypes, scalaTypes) = flattenUnion(rt).distinct.partition(_ <:< typeOf[js.Any]) val scalaCases = scalaTypes.map( tpe => cq"""x: $tpe => ${getJSValueTree(q"x", tpe)}""" ) if (jsTypes.size > 1) { c.warning(target.pos, s"Cannot differentiate ${jsTypes.mkString(", ")}") } val jsCase = jsTypes.take(1).map(tpe => cq"""x => x.asInstanceOf[js.Any]""") q"""($target: scala.Any) match { case ..$scalaCases case ..$jsCase }""" } else { val conversion = c.inferImplicitView(target, rt, typeOf[js.Any], silent = false) q"""$conversion($target)""" } } val tpe = c.weakTypeOf[T] val target = c.freshName[TermName](TermName("t")) val props = c.freshName[TermName](TermName("p")) val fieldSymbols: List[Symbol] = tpe.decls .collectFirst { case m: MethodSymbol if m.isPrimaryConstructor => m } .get .paramLists .head val fieldUpdates = fieldSymbols.map { f => val name = f.asTerm.name val decoded = name.decodedName.toString val res = if (isOptional(f.typeSignature)) { val valueTree = getJSValueTree(q"v", f.typeSignature.typeArgs.head) q"""$target.$name.foreach(v => $props.updateDynamic($decoded)($valueTree))""" } else { val valueTree = getJSValueTree(q"$target.$name", f.typeSignature) q"""$props.updateDynamic($decoded)($valueTree)""" } res } q""" ($target: $tpe) => { val $props = scala.scalajs.js.Dynamic.literal() ..$fieldUpdates $props }""" } } ================================================ FILE: macros/src/main/scala/chandu0101/macros/tojs/ReactMacroUtils.scala ================================================ package chandu0101.macros.tojs import scala.reflect.macros.blackbox.Context /** * Shamelessly stolen from https://github.com/japgolly/scalajs-react/blob/master/gh-pages-macros/src/main/scala/ghpages/ReactMacroUtils.scala */ abstract class ReactMacroUtils { val c: Context import c.universe._ final def fail(msg: String): Nothing = c.abort(c.enclosingPosition, msg) final def warn(msg: String): Unit = c.warning(c.enclosingPosition, msg) final def concreteWeakTypeOf[T: c.WeakTypeTag]: Type = { val t = weakTypeOf[T] ensureConcrete(t) t } final def ensureConcrete(t: Type): Unit = { val sym = t.typeSymbol.asClass if (sym.isAbstract) fail(s"${sym.name} is abstract which is not allowed.") if (sym.isTrait) fail(s"${sym.name} is a trait which is not allowed.") if (sym.isSynthetic) fail(s"${sym.name} is synthetic which is not allowed.") } final def caseClassType[T: c.WeakTypeTag]: Type = { val t = concreteWeakTypeOf[T] ensureCaseClass(t) t } final def ensureCaseClass(t: Type): Unit = { val sym = t.typeSymbol.asClass if (!sym.isCaseClass) fail(s"${sym.name} is not a case class.") } final def primaryConstructorParams(t: Type): List[Symbol] = t.decls .collectFirst { case m: MethodSymbol if m.isPrimaryConstructor => m } .getOrElse(fail("Unable to discern primary constructor.")) .paramLists .headOption .getOrElse(fail("Primary constructor missing paramList.")) final def nameAndType(T: Type, s: Symbol): (TermName, Type) = { def paramType(name: TermName): Type = T.decl(name).typeSignatureIn(T) match { case NullaryMethodType(t) => t case t => t } val a = s.asTerm.name val A = paramType(a) (a, A) } /** * Create code for a function that will call .apply() on a given type's type companion object. */ final def tcApplyFn(t: Type): Select = { val sym = t.typeSymbol val tc = sym.companion if (tc == NoSymbol) fail(s"Companion object not found for $sym") val pre = t match { case TypeRef(p, _, _) => p case x => fail(s"Don't know how to extract `pre` from ${showRaw(x)}") } pre match { // Path dependent, eg. `t.Literal` case SingleType(NoPrefix, path) => Select(Ident(path), tc.asTerm.name) // Assume type companion .apply exists case _ => Select(Ident(tc), TermName("apply")) } } final def tryInferImplicit(t: Type): Option[Tree] = c.inferImplicitValue(t, silent = true) match { case EmptyTree => None case i => Some(i) } final def needInferImplicit(t: Type): Tree = tryInferImplicit(t) getOrElse fail(s"Implicit not found: $t") final def replaceMacroMethod(newMethod: String) = c.macroApplication match { case TypeApply(Select(r, _), _) => Select(r, TermName(newMethod)) case Select(r, _) => Select(r, TermName(newMethod)) case x => fail(s"Don't know how to parse macroApplication: ${showRaw(x)}") } } ================================================ FILE: macros/src/test/scala/chandu0101/macros/tojs/JSMacroTest.scala ================================================ package chandu0101.macros.tojs import japgolly.scalajs.react.{Callback, CallbackTo} import org.scalatest.FunSuite import scala.scalajs.js import scala.scalajs.js.Dynamic.{literal => json} import scala.scalajs.js.JSON import scala.scalajs.js.JSConverters._ case class Address(country: String) { val toJS: js.Object = JSMacro[Address](this) } case class Person(name: String, address: js.UndefOr[Address] = js.undefined) class SeedType(val value: String) extends AnyVal object SeedType { val RICE = new SeedType("rice") } case class AnyValTest(st: SeedType = SeedType.RICE) case class Plain(name: String, category: String, peracre: js.UndefOr[Int] = js.undefined, address: Address = null) case class SeqTest(s: Seq[String] = Seq("dude"), as: Seq[Address] = Seq(Address("India"), null)) case class SeqUndefTest(s: js.UndefOr[Seq[String]] = Seq("dude"), as: js.UndefOr[Seq[Address]] = Seq(Address("India"), null)) case class SetTest(s: Set[String] = Set("dude"), as: js.UndefOr[Set[Address]] = Set(Address("India"), null)) case class ArrayTest(s: Array[String] = Array("dude"), as: js.UndefOr[Array[Address]] = Array(Address("India"), null)) case class MapTest(m: Map[String, String] = Map("key" -> "0"), ma: js.UndefOr[Map[String, Address]] = Map("address" -> Address("India"), "address2" -> null)) case class JSDictTest(m: js.Dictionary[String] = js.Dictionary("key" -> "0"), ma: js.UndefOr[js.Dictionary[Address]] = js.Dictionary("address" -> Address("India"), "address2" -> null)) case class FunctionTest(fn0: () => Int = () => 5, fn1: js.UndefOr[Double => String] = (d: Double) => s"$d x") class SeedType2 private (val value: String) extends AnyVal object SeedType2 { val RICE = new SeedType2("rice") } trait SelectOption { val toJS: js.Object } case class SampleOption(value: String = "gel", label: String = "kel") extends SelectOption { override val toJS: js.Object = json(value = value, label = label) } case class TPTest[T <: SelectOption](o: js.UndefOr[js.Array[T]]) case class AnyValTest2(st: SeedType2 = SeedType2.RICE) import scala.scalajs.js.UndefOr.{any2undefOrA => u} case class CallbackTest( // f0: CallbackTo[Int] = CallbackTo(0), fu: () => CallbackTo[Int] = () => CallbackTo(0), f1: Int => CallbackTo[Int] = i1 => CallbackTo(i1), f2: (Int, Int) => CallbackTo[Int] = (i1, i2) => CallbackTo(i1 + i2), f3: (Int, Int, Int) => CallbackTo[Int] = (i1, i2, i3) => CallbackTo(i1 + i2 + i3), f0c: Callback = Callback(()), fuc: () => Callback = () => Callback(()), f1c: Int => Callback = i1 => Callback(()), f2c: (Int, Int) => Callback = (i1, i2) => Callback(()), f3c: (Int, Int, Int) => Callback = (i1, i2, i3) => Callback(()), f0u: js.UndefOr[CallbackTo[Int]] = u(CallbackTo(0)), fuu: js.UndefOr[() => CallbackTo[Int]] = u(() => CallbackTo(0)), f1u: js.UndefOr[Int => CallbackTo[Int]] = u(i1 => CallbackTo(i1)), f2u: js.UndefOr[(Int, Int) => CallbackTo[Int]] = u((i1, i2) => CallbackTo(i1 + i2)), f3u: js.UndefOr[(Int, Int, Int) => CallbackTo[Int]] = u( (i1, i2, i3) => CallbackTo(i1 + i2 + i3))) class JSMacroTest[T <: SelectOption] extends FunSuite { def printResult(result: js.Any) = { println(s"Result is : ${JSON.stringify(result)}") } test("simple fields test") { val plain = JSMacro[Plain](Plain("bpt", "rice")).asInstanceOf[js.Dynamic] assert(plain.name.toString == "bpt") assert(plain.category.toString == "rice") assert(!plain.asInstanceOf[js.Object].hasOwnProperty("peracre")) } test("callbacks") { val c = CallbackTest() val out = JSMacro[CallbackTest](c).asInstanceOf[js.Dynamic] assert(0 == out.f0.apply().asInstanceOf[Int]) assert(0 == out.fu.apply(()).asInstanceOf[Int]) assert(1 == out.f1.apply(1).asInstanceOf[Int]) assert(2 == out.f2.apply(1, 1).asInstanceOf[Int]) assert(3 == out.f3.apply(1, 1, 1).asInstanceOf[Int]) assert(0 == out.f0u.apply().asInstanceOf[Int]) assert(0 == out.fuu.apply(()).asInstanceOf[Int]) assert(1 == out.f1u.apply(1).asInstanceOf[Int]) assert(2 == out.f2u.apply(1, 1).asInstanceOf[Int]) assert(3 == out.f3u.apply(1, 1, 1).asInstanceOf[Int]) assert(out.f0c.apply().isInstanceOf[Unit]) assert(out.fuc.apply(()).isInstanceOf[Unit]) assert(out.f1c.apply(1).isInstanceOf[Unit]) assert(out.f2c.apply(1, 1).isInstanceOf[Unit]) assert(out.f3c.apply(1, 1, 1).isInstanceOf[Unit]) } test("should handle seq") { val result = JSMacro[SeqTest](SeqTest()).asInstanceOf[js.Dynamic] println(s"result array ${JSON.stringify(result)}") assert(result.s.asInstanceOf[js.Array[String]].head == "dude") assert( result.as .asInstanceOf[js.Array[js.Dictionary[String]]] .head("country") == "India") val result2 = JSMacro[SeqUndefTest](SeqUndefTest()).asInstanceOf[js.Dynamic] println(s"result2 array ${JSON.stringify(result2)}") assert(result2.s.asInstanceOf[js.Array[String]].head == "dude") assert( result2.as .asInstanceOf[js.Array[js.Dictionary[String]]] .head("country") == "India") } test("should handle sets") { val result = JSMacro[SetTest](SetTest()).asInstanceOf[js.Dynamic] assert(result.s.asInstanceOf[js.Array[String]].head == "dude") assert( result.as .asInstanceOf[js.Array[js.Dictionary[String]]] .head("country") == "India") } test("should handle arrays") { val result = JSMacro[ArrayTest](ArrayTest()).asInstanceOf[js.Dynamic] assert(result.s.asInstanceOf[js.Array[String]].head == "dude") assert( result.as .asInstanceOf[js.Array[js.Dictionary[String]]] .head("country") == "India") } test("should handle maps") { val result = JSMacro[MapTest](MapTest()).asInstanceOf[js.Dynamic] assert(result.m.asInstanceOf[js.Dictionary[String]].get("key").get == "0") assert( result.ma .asInstanceOf[js.Dictionary[js.Dynamic]] .get("address") .get .country .toString == "India") } test("should handle js.Dictionary") { val result = JSMacro[JSDictTest](JSDictTest()).asInstanceOf[js.Dynamic] assert(result.m.asInstanceOf[js.Dictionary[String]].get("key").get == "0") assert( result.ma .asInstanceOf[js.Dictionary[js.Dynamic]] .get("address") .get .country .toString == "India") } test("should handle functions") { val result = JSMacro[FunctionTest](FunctionTest()).asInstanceOf[js.Dynamic] assert(result.fn0.asInstanceOf[js.Function0[Int]]() == 5) assert(result.fn1.asInstanceOf[js.Function1[Double, String]](1.2) == "1.2 x") } test("should handle any vals") { val result = JSMacro[AnyValTest2](AnyValTest2()).asInstanceOf[js.Dynamic] assert(result.st.toString == "rice") } test("should work with custom traits") { val result = JSMacro[TPTest[SampleOption]](TPTest(js.Array(SampleOption()))) printResult(result) } } ================================================ FILE: project/build.properties ================================================ sbt.version=1.1.1 ================================================ FILE: project/plugins.sbt ================================================ addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.22") addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.11.0")