Skip to content

Commit 34fa5b9

Browse files
ArtyomVancyanArtyomVancyan
authored
Add examples for the supoprted Ant Design versions (GH-34)
2 parents ab2d133 + ce343c1 commit 34fa5b9

File tree

17 files changed

+291
-15
lines changed

17 files changed

+291
-15
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@ package-lock.json
99
legacy/
1010
index*
1111

12+
!examples/**/index*
13+
1214
# Tarballs
1315
*.tgz

‎README.md‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
# antd-phone-input
1+
# Antd Phone Input
22

33
[![npm](https://img.shields.io/npm/v/antd-phone-input)](https://www.npmjs.com/package/antd-phone-input)
4-
[![antd](https://img.shields.io/badge/antd-3.x%20%7C%204.x%20%7C%205.x-blue)](https://github.com/ant-design/ant-design)
4+
[![antd](https://img.shields.io/badge/antd-4.x%20%7C%205.x-blue)](https://github.com/ant-design/ant-design)
55
[![types](https://img.shields.io/npm/types/antd-phone-input)](https://www.npmjs.com/package/antd-phone-input)
66
[![License](https://img.shields.io/npm/l/antd-phone-input)](https://github.com/ArtyomVancyan/antd-phone-input/blob/master/LICENSE)
77
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://makeapullrequest.com)
88
[![Tests](https://github.com/ArtyomVancyan/antd-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/ArtyomVancyan/antd-phone-input/actions/workflows/tests.yml)
99

1010
Advanced phone input component for [Ant Design](https://github.com/ant-design/ant-design) that provides support for all
11-
countries and is compatible with [`antd`](https://github.com/ant-design/ant-design) 3 and higher versions. It has
12-
built-in support for area codes and provides validation to ensure that the entered numbers are valid. This open-source
13-
project is designed to simplify the process of collecting phone numbers from users.
11+
countries and is compatible with [`antd`](https://github.com/ant-design/ant-design) 4 and 5 versions. It has built-in
12+
support for area codes and provides validation to ensure that the entered numbers are valid. This open-source project
13+
is designed to simplify the process of collecting phone numbers from users.
1414

1515
## Install
1616

@@ -24,10 +24,8 @@ yarn add antd-phone-input
2424

2525
## Usage
2626

27-
As mentioned above, this component is compatible with `3.x`, `4.x`, and after
28-
the [v0.1.4](https://github.com/ArtyomVancyan/antd-phone-input/releases/tag/v0.1.4) release, `5.x` versions of Ant
29-
Design. The latest one does not require any additional actions for loading the styles as it
30-
uses [`cssinjs`](https://github.com/ant-design/cssinjs) ecosystem.
27+
The latest version does not require any additional actions for loading the styles as it uses
28+
the [`cssinjs`](https://github.com/ant-design/cssinjs) ecosystem.
3129

3230
### Antd 5.x
3331

@@ -47,9 +45,9 @@ const Demo = () => {
4745

4846
![latest](https://user-images.githubusercontent.com/44609997/227775101-72b03e76-52bc-421d-8e75-a03c9d0d6d08.png)
4947

50-
### Antd 4.x and older
48+
### Antd 4.x
5149

52-
For `4.x` and older versions, you should use the `legacy` endpoint.
50+
For `4.x` versions, you should use the `legacy` endpoint.
5351

5452
```javascript
5553
import PhoneInput from "antd-phone-input/legacy";

‎examples/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Examples
2+
3+
antd4.x and antd5.x examples allow you to play with the phone input with different numbers and preview them. They also
4+
allow you to switch between light and dark themes and test them out.
5+
6+
## Running the examples
7+
8+
For running the antd4.x example, please use node v14 or below (npm <= v6).
9+
10+
```bash
11+
cd examples/antd4.x
12+
nvm use 14
13+
npm install
14+
npm start
15+
```
16+
17+
And for running the antd5.x example, please use node v14 or above (npm >= v6).
18+
19+
```bash
20+
cd examples/antd5.x
21+
nvm use 16 # this is optional
22+
npm install
23+
npm start
24+
```

‎examples/antd4.x/craco.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
plugins: [
3+
{
4+
plugin: require("craco-less"),
5+
options: {
6+
lessLoaderOptions: {
7+
lessOptions: {
8+
javascriptEnabled: true,
9+
},
10+
},
11+
},
12+
},
13+
],
14+
};

‎examples/antd4.x/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "sample",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@craco/craco": "^7.0.0",
7+
"antd": "^4.24.8",
8+
"antd-phone-input": "^0.1.5",
9+
"craco-less": "^2.0.0",
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0",
12+
"react-phone-input-2": "^2.15.1",
13+
"react-scripts": "^5.0.1"
14+
},
15+
"scripts": {
16+
"start": "craco start"
17+
},
18+
"eslintConfig": {
19+
"extends": [
20+
"react-app"
21+
]
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎examples/antd4.x/public/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<title>Antd 4.x</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎examples/antd4.x/src/Demo.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, {useState} from "react";
2+
import Form from "antd/es/form";
3+
import Button from "antd/es/button";
4+
import FormItem from "antd/es/form/FormItem";
5+
import PhoneInput from "antd-phone-input/legacy";
6+
7+
const Demo = () => {
8+
const [value, setValue] = useState(null);
9+
10+
const validator = (_, {valid}) => {
11+
if (valid) {
12+
return Promise.resolve();
13+
}
14+
return Promise.reject("Invalid phone number");
15+
}
16+
17+
const changeTheme = () => {
18+
if (window.location.pathname === "/dark") {
19+
window.location.replace("/");
20+
} else {
21+
window.location.replace("/dark");
22+
}
23+
}
24+
25+
const handleFinish = ({phone}) => setValue(phone);
26+
27+
return (
28+
<div style={{margin: 20, maxWidth: 400}}>
29+
{value && (
30+
<pre style={{
31+
background: window.location.pathname === "/dark" ? "#1f1f1f" : "#efefef",
32+
color: window.location.pathname === "/dark" ? "#efefef" : "#1f1f1f",
33+
padding: 10, marginBottom: 24,
34+
}}>
35+
{JSON.stringify(value, null, 2)}
36+
</pre>
37+
)}
38+
<Form
39+
onFinish={handleFinish}
40+
initialValues={{phone: {countryCode: 55, areaCode: 12, phoneNumber: "34567890"}}}
41+
>
42+
<FormItem name="phone" rules={[{validator}]}>
43+
<PhoneInput enableSearch/>
44+
</FormItem>
45+
<div style={{display: "flex", gap: 24}}>
46+
<Button htmlType="submit">Preview Value</Button>
47+
<Button onClick={changeTheme}>Change Theme</Button>
48+
</div>
49+
</Form>
50+
</div>
51+
)
52+
}
53+
54+
export default Demo;

‎examples/antd4.x/src/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, {lazy} from "react";
2+
import ReactDOM from "react-dom/client";
3+
4+
const Light = lazy(() => import("./themes/Light"));
5+
const Dark = lazy(() => import("./themes/Dark"));
6+
7+
const App = () => {
8+
return window.location.pathname === "/dark" ? <Dark/> : <Light/>;
9+
}
10+
11+
const root = ReactDOM.createRoot(document.getElementById("root"));
12+
root.render(<App/>);

‎examples/antd4.x/src/themes/Dark.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import "./dark.less";
2+
import Demo from "../Demo";
3+
4+
export default Demo;

‎examples/antd4.x/src/themes/Light.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import "./light.less";
2+
import Demo from "../Demo";
3+
4+
export default Demo;

0 commit comments

Comments
 (0)