添加 react 示例 (#508)

* 添加 react 示例

* 添加 start script

* 优化样式

* 优化错误提示

* 细节优化

* append

* 添加 footer

* append

* 细节调整

* 使用 esbuild-loading compiled time's 5.53s

* 挪动 loadSetting 到 utils

* 变量重命名

* update package.json

* 根据 review 的意见进行调整

Author: yinxulai

examples/react-typescript/.eslintignore

@@ -0,0 +1 @@
+webpack.config.js

examples/react-typescript/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@qiniu"
+  ]
+}

examples/react-typescript/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+**/node_modules
+dist

examples/react-typescript/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-typescript",
+  "description": "React Typescript",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack serve --mode development --inline --hot --open",
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "lint": "eslint --ext .tsx,.ts src/"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@qiniu/eslint-config": "0.0.6-beta.7",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.5",
+    "@typescript-eslint/eslint-plugin": "~4.10.0",
+    "css-loader": "^5.2.4",
+    "esbuild-loader": "^2.13.1",
+    "eslint": "~7.2.0",
+    "eslint-import-resolver-typescript": "~2.3.0",
+    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-jsx-a11y": "~6.3.0",
+    "eslint-plugin-react": "~7.20.0",
+    "eslint-plugin-react-hooks": "~4.2.0",
+    "eslint-webpack-plugin": "^2.5.4",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "less": "^4.1.1",
+    "less-loader": "^9.0.0",
+    "qiniu": "^7.3.2",
+    "style-loader": "^2.0.0",
+    "typescript": "4.1.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpackbar": "^5.0.0-3"
+  },
+  "dependencies": {
+    "byte-size": "^7.0.1",
+    "qiniu-js": "^3.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

examples/react-typescript/src/components/App/index.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import { Queue } from '../Queue'
+import { Layout } from '../Layout'
+import { Settings } from '../Settings'
+import { SelectFile, UniqueFile } from '../SelectFile'
+
+import settingIcon from '../Settings/assets/setting.svg'
+import classnames from './style.less'
+
+export const App = () => {
+  const [fileList, setFileList] = React.useState<UniqueFile[]>([])
+  const [settingVisible, setSettingVisible] = React.useState(false)
+
+  const selectFile = (file: UniqueFile) => {
+    setFileList(files => [file, ...files])
+  }
+
+  const toggleSettingVisible = () => {
+    setSettingVisible(!settingVisible)
+  }
+
+  const settingsClassName = React.useMemo(() => {
+    const list = [classnames.setting]
+    if (settingVisible) {
+      list.push(classnames.show)
+    } else {
+      list.push(classnames.hidden)
+    }
+    return list.join(' ')
+  }, [settingVisible])
+
+  return (
+    <Layout>
+      <div className={classnames.content}>
+        <SelectFile onFile={selectFile} />
+        <div className={settingsClassName}>
+          <Settings />
+        </div>
+        <img
+          src={settingIcon}
+          className={classnames.settingIcon}
+          onClick={toggleSettingVisible}
+        />
+      </div>
+      <Queue fileList={fileList} />
+    </Layout>
+  )
+}

examples/react-typescript/src/components/App/style.less

@@ -0,0 +1,50 @@
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .setting {
+    z-index: 0;
+    position: relative;
+    margin-left: -300px;
+
+    @width: 400px;
+
+    &.show {
+      animation: show 1s;
+      animation-fill-mode: forwards;
+    }
+
+    &.hidden {
+      animation: hidden 1s;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes show {
+      from { margin-left: -@width;opacity: 0; }
+      to { margin-left: -10px ;opacity: 1; }
+    }
+
+    @keyframes hidden {
+      from { margin-left:  -10px; opacity: 1; }
+      to { margin-left: -@width; opacity: 0; }
+    }
+  }
+}
+
+
+.settingIcon {
+  width: 20px;
+  height: 20px;
+  margin-left: 2rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  background-color: rgba(0, 0, 0, .02);
+  cursor: pointer;
+  transition: .3s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, .1);
+  }
+}

examples/react-typescript/src/components/Input/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import classnames from './style.less'
+
+interface IProps {
+  value: string | undefined
+  onChange(v: string | undefined): void
+
+  placeholder?: string | undefined
+}
+
+export function Input(props: IProps) {
+  return (
+    <input
+      type="text"
+      value={props.value}
+      className={classnames.input}
+      placeholder={props.placeholder}
+      onChange={e => props.onChange(e.target.value)} />
+  )
+}

examples/react-typescript/src/components/Input/style.less

@@ -0,0 +1,19 @@
+.input {
+  padding: 0.4rem 0.6rem;
+
+  font-size: 14px;
+  font-weight: 500;
+
+  border-radius: 4px;
+  border: 2px solid transparent;
+  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, .07) inset;
+
+  &:focus {
+    outline: none;
+    border: 2px solid royalblue;
+  }
+
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.15);
+  }
+}