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; + /** * Свойства селекта выбора стран */