Feature add react uwp example (#2375)

* feat: Add react-uwp examples * fix: remove log from ThemeWrapper * feat: Add README.md * fix: Fixed right version * fix: Use JavaScript Standard Style * fix: Fixed wrong next version
2024-01-19 02:48:18 +00:00 · 2017-06-28 03:10:26 +08:00 · 2017-06-28 03:10:26 +08:00 · 9da6524d30
parent 4eb86dc5f8
commit 9da6524d30
5 changed files with 139 additions and 0 deletions
--- a/examples/with-react-uwp/README.md
+++ b/examples/with-react-uwp/README.md
@ -0,0 +1,29 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-uwp)
+# React-UWP example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-uwp
+cd with-react-uwp
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example features how you use [react-uwp](https://github.com/myxvisual/react-uwp) (React Components that Implement Microsoft's UWP Design & Fluent Design.) with Next.js.
+
--- a/examples/with-react-uwp/components/ThemeWrapper.js
+++ b/examples/with-react-uwp/components/ThemeWrapper.js
@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import Theme from 'react-uwp/Theme'
+
+export class ThemeWrapper extends Component {
+  render () {
+    const { children, style, ...props } = this.props
+    return (
+      <Theme {...props} style={(props && props.theme) ? props.theme.prepareStyles(style) : void 0}>
+        {children}
+      </Theme>
+    )
+  }
+}
+
+export default ThemeWrapper
--- a/examples/with-react-uwp/package.json
+++ b/examples/with-react-uwp/package.json
@ -0,0 +1,16 @@
+{
+  "name": "with-react-uwp",
+  "version": "1.0.0",
+  "dependencies": {
+    "babel-core": "^6.25.0",
+    "next": "latest",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-uwp": "^1.0.9"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  }
+}
--- a/examples/with-react-uwp/pages/_document.js
+++ b/examples/with-react-uwp/pages/_document.js
@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  static async getInitialProps ({ req }) {
+    return req
+      ? { userAgent: req.headers['user-agent'] }
+      : { userAgent: navigator.userAgent }
+  }
+  static contextTypes = { theme: PropTypes.object };
+
+  render () {
+    return (
+      <html lang='en'>
+        <Head>
+          <title>My page</title>
+          <meta charSet='utf-8' />
+          <meta name='viewport' content='user-scalable=0, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height' />
+          <meta name='theme-color' content='yellowgreen' />
+          <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
--- a/examples/with-react-uwp/pages/index.js
+++ b/examples/with-react-uwp/pages/index.js
@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import ThemeWrapper from '../components/ThemeWrapper'
+import getTheme from 'react-uwp/styles/getTheme'
+
+import {
+  Button,
+  ColorPicker,
+  DatePicker,
+  ProgressRing
+} from 'react-uwp'
+
+class Index extends Component {
+  static getInitialProps ({ req }) {
+    let userAgent
+    if (process.browser) {
+      userAgent = navigator.userAgent
+    } else {
+      userAgent = req.headers['user-agent']
+    }
+
+    return { userAgent }
+  }
+  static contextTypes = { theme: PropTypes.object }
+
+  render () {
+    return (
+      <ThemeWrapper
+        style={{
+          padding: '20px 0',
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'space-around'
+        }}
+        theme={getTheme({ userAgent: this.props.userAgent })}
+      >
+        <Button>Test Button</Button>
+        <DatePicker />
+        <ColorPicker />
+        <ProgressRing size={50} />
+      </ThemeWrapper>
+    )
+  }
+}
+
+export default Index