feat: pure react usage

boyuai · Oct 29, 2021 · 68b6085 · 68b6085
1 parent 4b4e64f
commit 68b6085
Show file tree

Hide file tree

Showing 21 changed files with 615 additions and 123 deletions.
diff --git a/dumi/docs/demos/lite-version.md b/dumi/docs/demos/lite-version.md
@@ -0,0 +1,6 @@
+---
+title: Lite Version(without antd)
+order: 6
+---
+
+<code defaultShowCode src="../../../example/src/demos/lite-version.tsx"></code>
diff --git a/example/craco.config.js b/example/craco.config.js
@@ -0,0 +1,9 @@
+const CracoLessPlugin = require('craco-less');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+    },
+  ],
+};
diff --git a/example/package.json b/example/package.json
@@ -4,28 +4,31 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
   },
   "dependencies": {
+    "antd-country-phone-input": "link:..",
+    "flagpack": "^1.0.5",
+    "rc-select": "^12.1.13",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "world_countries_lists": "^2.1.0"
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.4.0",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
     "@testing-library/react": "link:../node_modules/@testing-library/react",
     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
     "@types/jest": "link:../node_modules/@types/jest",
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "antd-country-phone-input": "link:..",
-    "flagpack": "^1.0.5",
-    "react": "link:../node_modules/react",
-    "react-dom": "link:../node_modules/react-dom",
+    "craco-less": "^1.20.0",
     "react-scripts": "~4.0.1",
-    "typescript": "link:../node_modules/typescript",
-    "world_countries_lists": "^2.1.0"
+    "typescript": "link:../node_modules/typescript"
   },
-  "devDependencies": {},
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,7 @@
 import { Card } from 'antd';
 
 import BasicUsage from './demos/basic-usage';
+import LiteVersion from './demos/lite-version';
 import InlineStyle from './demos/inline-style';
 import CustomArea from './demos/custom-area';
 import CustomFlag from './demos/custom-flag';
@@ -26,6 +27,9 @@ const App = () => {
       <Card type="inner" title="Custom Flag" style={cardStyle}>
         <CustomFlag />
       </Card>
+      <Card type="inner" title="Lite Version(without antd)" style={cardStyle}>
+        <LiteVersion />
+      </Card>
     </>
   );
 };

diff --git a/example/src/demos/antd-form.tsx b/example/src/demos/antd-form.tsx
@@ -15,24 +15,20 @@ const App = () => {
 
   return (
     <ConfigProvider locale={en}>
-      <Form
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        initialValues={{
-          lowerCase: {
+      <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
+        <Form.Item
+          name="lowerCase"
+          initialValue={{
             short: 'us',
-          },
-          undefined: undefined,
-        }}
-      >
-        <Form.Item name="lowerCase">
+          }}
+        >
           <CountryPhoneInput />
         </Form.Item>
-        <Form.Item name="undefined">
-          <CountryPhoneInput />
+        <Form.Item name="undefined" initialValue={undefined}>
+          <CountryPhoneInput placeholder="initialValue is undefined" />
         </Form.Item>
         <Form.Item name="ignored">
-          <CountryPhoneInput />
+          <CountryPhoneInput placeholder="initialValue is ignored" />
         </Form.Item>
         <Button type="primary" htmlType="submit">
           Submit

diff --git a/example/src/demos/basic-usage.tsx b/example/src/demos/basic-usage.tsx
@@ -18,7 +18,7 @@ const App = () => {
         onChange={(v) => {
           setValue(v);
         }}
-        className="my-custom-class"
+        className="your-custom-class"
       />
     </ConfigProvider>
   );

diff --git a/example/src/demos/lite-version.tsx b/example/src/demos/lite-version.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import {
+  ConfigProvider,
+  CountryPhoneInputValue,
+  CountryPhoneInput,
+} from 'antd-country-phone-input/dist/lite';
+import en from 'world_countries_lists/data/en/world.json';
+// If you're writing styles with less, this could be a starter for you.
+import 'rc-select/assets/index.less';
+
+const App = () => {
+  const [value, setValue] = useState<CountryPhoneInputValue>({ short: 'US' });
+
+  return (
+    <ConfigProvider locale={en}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <CountryPhoneInput
+          style={{ height: 24 }}
+          selectProps={{ style: { height: 24 } }}
+          value={value}
+          onChange={(v) => {
+            setValue(v);
+          }}
+        />
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default App;
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -23,8 +23,8 @@
     "strictNullChecks": true,
     // Linter Checks
     "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     // Advanced
     "skipLibCheck": true,