feat/MCH-5073 (internationa-phone-input): hideCountryFlag prop

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,21 +236,23 @@ 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),
                 }}
             />
         ) : (
             <Input
                 {...restProps}
                 {...inputProps}
                 onClear={inputProps.clear ? handleClear : undefined}
-                leftAddons={renderCountrySelect()}
+                leftAddons={hideCountryFlag ? null : renderCountrySelect()}
                 size={size}
                 onInput={handleInput}
                 value={value}

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)}
                 />
             </div>
         );

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}
             />
             <Gap size='m' />
             <Typography.Text color='secondary'>
                 Код выбранной страны: {selectedCountry && selectedCountry.iso2}
             </Typography.Text>
+            <Gap size='m' />
+            <Switch
+                checked={hideCountryFlag}
+                label='Спрятать флажок'
+                onChange={() => {
+                    setHideCountryFlag((prevState) => !prevState);
+                }}
+            />
         </div>
     );
 });

packages/international-phone-input/src/types.ts

@@ -47,6 +47,12 @@ export type CommonPhoneInputProps = {
      */
     clearableCountryCode?: boolean | 'preserve';
 
+    /**
+     * Скрывает компонент селекта
+     * @default false
+     */
+    hideCountryFlag?: boolean;
+
     /**
      *  Свойства селекта выбора стран
      */