Skip to content

Commit 57059e5

Browse files
ArtyomVancyanArtyomVancyan
committed
Add a switch for the distinct option
1 parent 09fe987 commit 57059e5

File tree

4 files changed

+74
-60
lines changed

4 files changed

+74
-60
lines changed

‎examples/antd4.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@types/react": "^18.2.0",
88
"@types/react-dom": "^18.2.0",
99
"antd": "^4.24.8",
10-
"antd-phone-input": "^0.3.9",
10+
"antd-phone-input": "^0.3.13",
1111
"craco-less": "^2.0.0",
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0",

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

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Demo = () => {
2424
const [search, setSearch] = useState(false);
2525
const [copied, setCopied] = useState(false);
2626
const [dropdown, setDropdown] = useState(true);
27+
const [distinct, setDistinct] = useState(false);
2728
const [disabled, setDisabled] = useState(false);
2829
const [parentheses, setParentheses] = useState(true);
2930

@@ -35,14 +36,15 @@ const Demo = () => {
3536
const code = useMemo(() => {
3637
let code = "<PhoneInput\n";
3738
if (disabled) code += " disabled\n";
39+
if (distinct) code += " distinct\n";
3840
if (arrow) code += " enableArrow\n";
3941
if (search && dropdown) code += " enableSearch\n";
4042
if (!dropdown) code += " disableDropdown\n";
4143
if (!parentheses) code += " disableParentheses\n";
4244
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4345
else code += "/>";
4446
return code;
45-
}, [disabled, arrow, search, dropdown, parentheses])
47+
}, [distinct, disabled, arrow, search, dropdown, parentheses])
4648

4749
const changeTheme = () => {
4850
const pathname = window.location.pathname.replace(/\/$/, '');
@@ -78,26 +80,6 @@ const Demo = () => {
7880
the component behaves. Also, see the code for the component and the value it returns.
7981
</Paragraph>
8082
<Divider orientation="left" plain>Settings</Divider>
81-
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
82-
<Form.Item label="Theme">
83-
<Switch
84-
onChange={changeTheme}
85-
checkedChildren={<MoonOutlined/>}
86-
unCheckedChildren={<SunOutlined/>}
87-
defaultChecked={window.location.pathname.endsWith("/dark")}
88-
/>
89-
</Form.Item>
90-
<Form.Item label="Validation">
91-
<Switch
92-
checkedChildren="strict"
93-
unCheckedChildren="default"
94-
onChange={() => setStrict(!strict)}
95-
/>
96-
</Form.Item>
97-
<Form.Item label="Disabled">
98-
<Switch onChange={() => setDisabled(!disabled)}/>
99-
</Form.Item>
100-
</div>
10183
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
10284
<Form.Item label="Dropdown">
10385
<Switch
@@ -117,22 +99,47 @@ const Demo = () => {
11799
</Form.Item>
118100
</div>
119101
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
120-
<Form.Item label="Search" style={{margin: 0}}>
102+
<Form.Item label="Search">
121103
<Switch
122104
disabled={!dropdown}
123105
checkedChildren="enabled"
124106
unCheckedChildren="disabled"
125107
onChange={() => setSearch(!search)}
126108
/>
127109
</Form.Item>
128-
<Form.Item label="Arrow" style={{margin: 0}}>
110+
<Form.Item label="Arrow">
129111
<Switch
130112
checkedChildren="enabled"
131113
unCheckedChildren="disabled"
132114
onChange={() => setArrow(!arrow)}
133115
/>
134116
</Form.Item>
135117
</div>
118+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
119+
<Form.Item label="Theme">
120+
<Switch
121+
onChange={changeTheme}
122+
checkedChildren={<MoonOutlined/>}
123+
unCheckedChildren={<SunOutlined/>}
124+
defaultChecked={window.location.pathname.endsWith("/dark")}
125+
/>
126+
</Form.Item>
127+
<Form.Item label="Validation">
128+
<Switch
129+
checkedChildren="strict"
130+
unCheckedChildren="default"
131+
onChange={() => setStrict(!strict)}
132+
/>
133+
</Form.Item>
134+
</div>
135+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
136+
<Form.Item label="Disabled" style={{margin: 0}}>
137+
<Switch onChange={() => setDisabled(!disabled)}/>
138+
</Form.Item>
139+
<Form.Item label="Distinct" style={{margin: 0}}>
140+
<Switch onChange={() => setDistinct(!distinct)}/>
141+
</Form.Item>
142+
</div>
136143
<Divider orientation="left" plain>Code</Divider>
137144
<div style={{position: "relative"}}>
138145
<Button

‎examples/antd5.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@types/react": "^18.2.0",
77
"@types/react-dom": "^18.2.0",
88
"antd": "^5.8.3",
9-
"antd-phone-input": "^0.3.9",
9+
"antd-phone-input": "^0.3.13",
1010
"copy-to-clipboard": "^3.3.3",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",

‎examples/antd5.x/src/Demo.tsx‎

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Demo = () => {
2828
const [search, setSearch] = useState(false);
2929
const [copied, setCopied] = useState(false);
3030
const [dropdown, setDropdown] = useState(true);
31+
const [distinct, setDistinct] = useState(false);
3132
const [disabled, setDisabled] = useState(false);
3233
const [parentheses, setParentheses] = useState(true);
3334
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
@@ -40,14 +41,15 @@ const Demo = () => {
4041
const code = useMemo(() => {
4142
let code = "<PhoneInput\n";
4243
if (disabled) code += " disabled\n";
44+
if (distinct) code += " distinct\n";
4345
if (arrow) code += " enableArrow\n";
4446
if (search && dropdown) code += " enableSearch\n";
4547
if (!dropdown) code += " disableDropdown\n";
4648
if (!parentheses) code += " disableParentheses\n";
4749
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4850
else code += "/>";
4951
return code;
50-
}, [disabled, arrow, search, dropdown, parentheses])
52+
}, [distinct, disabled, arrow, search, dropdown, parentheses])
5153

5254
const changeTheme = () => {
5355
if (algorithm === "defaultAlgorithm") {
@@ -85,59 +87,64 @@ const Demo = () => {
8587
</Paragraph>
8688
<Divider orientation="left" plain>Settings</Divider>
8789
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
88-
<Form.Item label="Theme">
90+
<Form.Item label="Dropdown">
8991
<Switch
90-
onChange={changeTheme}
91-
checkedChildren={<MoonOutlined/>}
92-
unCheckedChildren={<SunOutlined/>}
92+
defaultChecked
93+
checkedChildren="enabled"
94+
unCheckedChildren="disabled"
95+
onChange={() => setDropdown(!dropdown)}
9396
/>
9497
</Form.Item>
95-
<Form.Item label="Validation">
98+
<Form.Item label="Parentheses">
9699
<Switch
97-
checkedChildren="strict"
98-
unCheckedChildren="default"
99-
onChange={() => setStrict(!strict)}
100+
defaultChecked
101+
checkedChildren="enabled"
102+
unCheckedChildren="disabled"
103+
onChange={() => setParentheses(!parentheses)}
100104
/>
101105
</Form.Item>
102-
<Form.Item label="Disabled">
103-
<Switch onChange={() => setDisabled(!disabled)}/>
104-
</Form.Item>
105106
</div>
106107
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
107-
<Form.Item label="Dropdown">
108+
<Form.Item label="Search">
108109
<Switch
109-
defaultChecked
110+
disabled={!dropdown}
110111
checkedChildren="enabled"
111112
unCheckedChildren="disabled"
112-
onChange={() => setDropdown(!dropdown)}
113+
onChange={() => setSearch(!search)}
113114
/>
114115
</Form.Item>
115-
<Form.Item label="Parentheses">
116+
<Form.Item label="Arrow">
116117
<Switch
117-
defaultChecked
118118
checkedChildren="enabled"
119119
unCheckedChildren="disabled"
120-
onChange={() => setParentheses(!parentheses)}
120+
onChange={() => setArrow(!arrow)}
121121
/>
122122
</Form.Item>
123123
</div>
124-
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
125-
<Form.Item label="Search" style={{margin: 0}}>
126-
<Switch
127-
disabled={!dropdown}
128-
checkedChildren="enabled"
129-
unCheckedChildren="disabled"
130-
onChange={() => setSearch(!search)}
131-
/>
132-
</Form.Item>
133-
<Form.Item label="Arrow" style={{margin: 0}}>
134-
<Switch
135-
checkedChildren="enabled"
136-
unCheckedChildren="disabled"
137-
onChange={() => setArrow(!arrow)}
138-
/>
139-
</Form.Item>
140-
</div>
124+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
125+
<Form.Item label="Theme">
126+
<Switch
127+
onChange={changeTheme}
128+
checkedChildren={<MoonOutlined/>}
129+
unCheckedChildren={<SunOutlined/>}
130+
/>
131+
</Form.Item>
132+
<Form.Item label="Validation">
133+
<Switch
134+
checkedChildren="strict"
135+
unCheckedChildren="default"
136+
onChange={() => setStrict(!strict)}
137+
/>
138+
</Form.Item>
139+
</div>
140+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
141+
<Form.Item label="Distinct" style={{margin: 0}}>
142+
<Switch onChange={() => setDistinct(!distinct)}/>
143+
</Form.Item>
144+
<Form.Item label="Disabled" style={{margin: 0}}>
145+
<Switch onChange={() => setDisabled(!disabled)}/>
146+
</Form.Item>
147+
</div>
141148
<Divider orientation="left" plain>Code</Divider>
142149
<div style={{position: "relative"}}>
143150
<Button

0 commit comments

Comments
 (0)