Skip to content

Commit

Permalink
Implement an enableArrow option (GH-100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtyomVancyan
ArtyomVancyan authored Jul 2, 2024
2 parents 32c7e2d + cddf0dd commit b9a34ec
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 22 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Apart from the phone-specific properties described below, all [Input](https://an
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
Expand Down
2 changes: 1 addition & 1 deletion examples/antd4.x/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"antd": "^4.24.8",
"antd-phone-input": "^0.3.8",
"antd-phone-input": "^0.3.9",
"craco-less": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
28 changes: 19 additions & 9 deletions examples/antd4.x/src/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import CheckOutlined from "@ant-design/icons/CheckOutlined";
const Demo = () => {
const [form] = useForm();
const [value, setValue] = useState(null);
const [arrow, setArrow] = useState(false);
const [strict, setStrict] = useState(false);
const [search, setSearch] = useState(false);
const [copied, setCopied] = useState(false);
Expand All @@ -34,13 +35,14 @@ const Demo = () => {
const code = useMemo(() => {
let code = "<PhoneInput\n";
if (disabled) code += " disabled\n";
if (arrow) code += " enableArrow\n";
if (search && dropdown) code += " enableSearch\n";
if (!dropdown) code += " disableDropdown\n";
if (!parentheses) code += " disableParentheses\n";
if (code === "<PhoneInput\n") code = "<PhoneInput />";
else code += "/>";
return code;
}, [disabled, search, dropdown, parentheses])
}, [disabled, arrow, search, dropdown, parentheses])

const changeTheme = () => {
const pathname = window.location.pathname.replace(/\/$/, '');
Expand Down Expand Up @@ -97,30 +99,37 @@ const Demo = () => {
</Form.Item>
</div>
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
<Form.Item label="Search">
<Form.Item label="Dropdown">
<Switch
disabled={!dropdown}
defaultChecked
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setSearch(!search)}
onChange={() => setDropdown(!dropdown)}
/>
</Form.Item>
<Form.Item label="Dropdown">
<Form.Item label="Parentheses">
<Switch
defaultChecked
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setDropdown(!dropdown)}
onChange={() => setParentheses(!parentheses)}
/>
</Form.Item>
</div>
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
<Form.Item label="Parentheses" style={{margin: 0}}>
<Form.Item label="Search" style={{margin: 0}}>
<Switch
defaultChecked
disabled={!dropdown}
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setParentheses(!parentheses)}
onChange={() => setSearch(!search)}
/>
</Form.Item>
<Form.Item label="Arrow" style={{margin: 0}}>
<Switch
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setArrow(!arrow)}
/>
</Form.Item>
</div>
Expand Down Expand Up @@ -150,6 +159,7 @@ const Demo = () => {
<FormItem name="phone" rules={[{validator}]}>
<PhoneInput
disabled={disabled}
enableArrow={arrow}
enableSearch={search}
disableDropdown={!dropdown}
disableParentheses={!parentheses}
Expand Down
2 changes: 1 addition & 1 deletion examples/antd5.x/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"antd": "^5.8.3",
"antd-phone-input": "^0.3.8",
"antd-phone-input": "^0.3.9",
"copy-to-clipboard": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
28 changes: 19 additions & 9 deletions examples/antd5.x/src/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import "antd/dist/reset.css";
const Demo = () => {
const [form] = useForm();
const [value, setValue] = useState(null);
const [arrow, setArrow] = useState(false);
const [strict, setStrict] = useState(false);
const [search, setSearch] = useState(false);
const [copied, setCopied] = useState(false);
Expand All @@ -39,13 +40,14 @@ const Demo = () => {
const code = useMemo(() => {
let code = "<PhoneInput\n";
if (disabled) code += " disabled\n";
if (arrow) code += " enableArrow\n";
if (search && dropdown) code += " enableSearch\n";
if (!dropdown) code += " disableDropdown\n";
if (!parentheses) code += " disableParentheses\n";
if (code === "<PhoneInput\n") code = "<PhoneInput />";
else code += "/>";
return code;
}, [disabled, search, dropdown, parentheses])
}, [disabled, arrow, search, dropdown, parentheses])

const changeTheme = () => {
if (algorithm === "defaultAlgorithm") {
Expand Down Expand Up @@ -102,30 +104,37 @@ const Demo = () => {
</Form.Item>
</div>
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
<Form.Item label="Search">
<Form.Item label="Dropdown">
<Switch
disabled={!dropdown}
defaultChecked
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setSearch(!search)}
onChange={() => setDropdown(!dropdown)}
/>
</Form.Item>
<Form.Item label="Dropdown">
<Form.Item label="Parentheses">
<Switch
defaultChecked
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setDropdown(!dropdown)}
onChange={() => setParentheses(!parentheses)}
/>
</Form.Item>
</div>
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
<Form.Item label="Parentheses" style={{margin: 0}}>
<Form.Item label="Search" style={{margin: 0}}>
<Switch
disabled={!dropdown}
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setSearch(!search)}
/>
</Form.Item>
<Form.Item label="Arrow" style={{margin: 0}}>
<Switch
defaultChecked
checkedChildren="enabled"
unCheckedChildren="disabled"
onChange={() => setParentheses(!parentheses)}
onChange={() => setArrow(!arrow)}
/>
</Form.Item>
</div>
Expand Down Expand Up @@ -155,6 +164,7 @@ const Demo = () => {
<FormItem name="phone" rules={[{validator}]}>
<PhoneInput
disabled={disabled}
enableArrow={arrow}
enableSearch={search}
disableDropdown={!dropdown}
disableParentheses={!parentheses}
Expand Down
16 changes: 14 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const PhoneInput = forwardRef(({
value: initialValue = "",
country = getDefaultISO2Code(),
disabled = false,
enableArrow = false,
enableSearch = false,
disableDropdown = false,
disableParentheses = false,
Expand Down Expand Up @@ -227,7 +228,18 @@ const PhoneInput = forwardRef(({
<Select.Option
value={iso + dial}
key={`${iso}_${mask}`}
label={<div className={`flag ${iso}`}/>}
label={<>
<div className={`flag ${iso}`}/>
{enableArrow && (
<span role="img" className="anticon" style={{paddingLeft: 8}}>
<svg className="icon" viewBox="0 0 1024 1024"
focusable="false" fill="currentColor" width="16" height="18">
<path
d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
</svg>
</span>
)}
</>}
children={<div className={`${prefixCls}-phone-input-select-item`}>
<div className={`flag ${iso}`}/>
{countries[name]}&nbsp;{displayFormat(mask)}
Expand All @@ -236,7 +248,7 @@ const PhoneInput = forwardRef(({
)
})}
</Select>
), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])

return (
<div className={`${prefixCls}-phone-input-wrapper`}
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">

country?: string;

enableArrow?: boolean;

enableSearch?: boolean;

searchNotFound?: string;
Expand Down

0 comments on commit b9a34ec

Please sign in to comment.