feat: completed moment to dayjs

Dunqing · Apr 13, 2022 · 743fba8 · 743fba8
1 parent 92d2abe
commit 743fba8
Show file tree

Hide file tree

Showing 12 changed files with 1,046 additions and 22 deletions.
diff --git a/playground/App.tsx b/playground/App.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+import React, { useState } from 'react'
+import { Calendar, ConfigProvider, DatePicker, Select } from 'antd'
+import 'antd/dist/antd.variable.css'
+import enUS from 'antd/es/locale/en_US'
+import zhCN from 'antd/es/locale/zh_CN'
+import 'moment/locale/zh-cn'
+
+const onChange = (value: any) => {
+  console.log('🚀 ~ onChange value: ', value)
+}
+
+const App = () => {
+  const [locale, setLocale] = useState<string>('en_US')
+
+  return <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+  }}>
+    <ConfigProvider locale={locale === 'zh_CN' ? zhCN : enUS}>
+      <Select
+        value={locale}
+        onChange={setLocale}
+        options={[
+          {
+            label: '🇨🇳 中文',
+            value: 'zh_CN',
+          },
+          {
+            label: '🇺🇸 English',
+            value: 'en_US',
+          },
+        ]}>
+
+      </Select>
+      <DatePicker onChange={onChange} />
+      <DatePicker.MonthPicker onChange={onChange} />
+      <DatePicker.QuarterPicker onChange={onChange} />
+      <DatePicker.RangePicker onChange={onChange} />
+      <DatePicker.WeekPicker onChange={onChange} />
+      <DatePicker.YearPicker onChange={onChange} />
+      <Calendar onChange={onChange} ></Calendar>
+    </ConfigProvider>
+  </div>
+}
+
+export default App
diff --git a/playground/index.html b/playground/index.html
@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-  <div id="app"></div>
+  <div id="root"></div>
   <a href="/__inspect/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
-  <script type="module" src="./main.ts"></script>
+  <script type="module" src="./main.tsx"></script>
 </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
diff --git a/playground/main.tsx b/playground/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
diff --git a/playground/package.json b/playground/package.json
@@ -3,7 +3,17 @@
   "scripts": {
     "dev": "nodemon -w '../src/**/*.ts' -e .ts -x 'vite'"
   },
+  "dependencies": {
+    "antd": "^4.19.5",
+    "moment": "latest",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
   "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "dayjs": "^1.11.0",
     "vite": "^2.9.1",
     "vite-plugin-inspect": "^0.4.3"
   }

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,10 +1,12 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
+import react from '@vitejs/plugin-react'
 import Unplugin from '../src/vite'
 
 export default defineConfig({
   plugins: [
     Inspect(),
+    react(),
     Unplugin(),
   ],
 })