diff --git a/packages/international-phone-input/src/components/base-international-phone-input/Component.tsx b/packages/international-phone-input/src/components/base-international-phone-input/Component.tsx
index 8b9a14c696..207c07c261 100644
--- a/packages/international-phone-input/src/components/base-international-phone-input/Component.tsx
+++ b/packages/international-phone-input/src/components/base-international-phone-input/Component.tsx
@@ -38,6 +38,7 @@ export const BaseInternationalPhoneInput = forwardRef<
(
{
clearableCountryCode: clearableCountryCodeFromProps = true,
+ hideCountryFlag = false,
value,
country: countryProp,
filterFn,
@@ -235,13 +236,15 @@ export const BaseInternationalPhoneInput = forwardRef<
...inputProps,
onClear: handleClear,
onInput: handleInput,
- leftAddons: renderCountrySelect(view === 'mobile'),
+ leftAddons: hideCountryFlag ? null : renderCountrySelect(view === 'mobile'),
}}
fieldProps={{
...(restProps.fieldProps as AnyObject),
className: inputProps.className,
addonsClassName: inputProps.addonsClassName,
- ...(view === 'mobile' ? { leftAddons: renderCountrySelect() } : null),
+ ...(view === 'mobile'
+ ? { leftAddons: hideCountryFlag ? null : renderCountrySelect() }
+ : null),
}}
/>
) : (
@@ -249,7 +252,7 @@ export const BaseInternationalPhoneInput = forwardRef<
{...restProps}
{...inputProps}
onClear={inputProps.clear ? handleClear : undefined}
- leftAddons={renderCountrySelect()}
+ leftAddons={hideCountryFlag ? null : renderCountrySelect()}
size={size}
onInput={handleInput}
value={value}
diff --git a/packages/international-phone-input/src/docs/Component.stories.tsx b/packages/international-phone-input/src/docs/Component.stories.tsx
index 425641f623..62c2442d1f 100644
--- a/packages/international-phone-input/src/docs/Component.stories.tsx
+++ b/packages/international-phone-input/src/docs/Component.stories.tsx
@@ -48,6 +48,7 @@ export const international_phone_input: Story = {
)}
clear={boolean('clear', false)}
success={boolean('success', false)}
+ hideCountryFlag={boolean('options', true)}
/>
);
diff --git a/packages/international-phone-input/src/docs/description.mdx b/packages/international-phone-input/src/docs/description.mdx
index ab30104934..881a5ae531 100644
--- a/packages/international-phone-input/src/docs/description.mdx
+++ b/packages/international-phone-input/src/docs/description.mdx
@@ -64,12 +64,13 @@ render(() => {
## Инпут без пикера страны
-При необходимости можно отключить возможность явно выбирать код страны через селект. Инпут сам определит страну после ввода её кода.
+При необходимости можно отключить возможность явно выбирать код страны через селект, или спрятать элемент флажка. Инпут сам определит страну после ввода её кода.
```jsx live mobileHeight={640}
render(() => {
const [value, setValue] = React.useState('');
const [selectedCountry, setSelectedCountry] = React.useState();
+ const [hideCountryFlag, setHideCountryFlag] = React.useState(false);
const handleChange = (phone) => setValue(phone);
@@ -84,11 +85,20 @@ render(() => {
onCountryChange={setSelectedCountry}
block={true}
countrySelectProps={{ hideCountrySelect: true }}
+ hideCountryFlag={hideCountryFlag}
/>
Код выбранной страны: {selectedCountry && selectedCountry.iso2}
+
+ {
+ setHideCountryFlag((prevState) => !prevState);
+ }}
+ />
);
});
diff --git a/packages/international-phone-input/src/types.ts b/packages/international-phone-input/src/types.ts
index 59e1e64df5..b5f7c1611b 100644
--- a/packages/international-phone-input/src/types.ts
+++ b/packages/international-phone-input/src/types.ts
@@ -47,6 +47,12 @@ export type CommonPhoneInputProps = {
*/
clearableCountryCode?: boolean | 'preserve';
+ /**
+ * Скрывает компонент селекта
+ * @default false
+ */
+ hideCountryFlag?: boolean;
+
/**
* Свойства селекта выбора стран
*/