fix capitalize of inputs

This commit is contained in:
Gustavo Emanuel Farias Rosa 2022-03-21 10:53:12 -03:00
parent d86f9b7a68
commit 8f6f537220
2 changed files with 136 additions and 90 deletions

View File

@ -1,22 +1,42 @@
import React from 'react'
import { LabelInput, WrapperInputText } from './styles';
import React from 'react';
import {LabelInput, WrapperInputText} from './styles';
type IInputText = {
children?: object;
placeholder: string;
label: string;
onChangeText?: any,
value?: any
autoCapitalize?: "none"
}
export const InputText = (props: IInputText)=>{
const {children, placeholder, label, onChangeText, value, autoCapitalize} = props
onChangeText?: any;
value?: any;
autoCapitalize?: 'none';
autoCorrect?: false | true;
autoComplete?: 'off';
allowFontScaling?: true | false;
};
export const InputText = (props: IInputText) => {
const {
children,
placeholder,
label,
onChangeText,
value,
autoCapitalize,
autoCorrect,
autoComplete,
allowFontScaling,
} = props;
return (
<>
<LabelInput>{props.label}</LabelInput>
<WrapperInputText autoCapitalize={props.autoCapitalize} value={props.value} onChangeText={props.onChangeText} placeholder={props.placeholder}></WrapperInputText>
<LabelInput>{label}</LabelInput>
<WrapperInputText
allowFontScaling={allowFontScaling}
autoComplete={autoComplete}
autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
/>
</>
)
}
);
};

View File

@ -9,61 +9,63 @@ import { IStore } from './types';
import { initTranslation } from '../../translations/index';
import i18next from 'i18next';
export const StorePortals = ({navigation, modalizeRef}:IStore)=>{
initTranslation()
const {portals, setPortals} = usePortal()
export const StorePortals = ({navigation, modalizeRef}: IStore) => {
initTranslation();
const {portals, setPortals} = usePortal();
const [name, setName] = React.useState('');
const [url, setUrl] = React.useState('');
const [emptyFields, setEmptyFields] = React.useState(false);
const [nameAlreadyUsed, setNameAlreadyUsed] = React.useState(false);
async function newPortal(name:string, url:string){
async function newPortal(name: string, url: string) {
let portalsStorage;
portalsStorage = await AsyncStorage.getItem('portal')
portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null
portalsStorage.push({name, url})
AsyncStorage.setItem('portal', JSON.stringify(portalsStorage))
setPortals(portalsStorage)
portalsStorage = await AsyncStorage.getItem('portal');
portalsStorage = portalsStorage ? JSON.parse(portalsStorage) : null;
portalsStorage.push({name, url});
AsyncStorage.setItem('portal', JSON.stringify(portalsStorage));
setPortals(portalsStorage);
modalizeRef?.current?.close();
navigation.navigate(name)
navigation.navigate(name);
}
async function onPress(){
async function onPress() {
//return false;
if(!name || !url) return setEmptyFields(true)
try{
let portalsFilter = portals.filter((portal: {name: string, url: string})=>{
if(portal.name != name ) return false
return portal
})
if(portalsFilter.length >= 1){
setNameAlreadyUsed(true)
if (!name || !url) return setEmptyFields(true);
try {
let portalsFilter = portals.filter(
(portal: {name: string; url: string}) => {
if (portal.name != name) return false;
return portal;
},
);
if (portalsFilter.length >= 1) {
setNameAlreadyUsed(true);
return false;
}
await newPortal(name, url )
} catch(e){
console.log('error', e)
await AsyncStorage.setItem('portal', JSON.stringify([]))
newPortal(name, url )
return null
}
await newPortal(name, url);
} catch (e) {
console.log('error', e);
await AsyncStorage.setItem('portal', JSON.stringify([]));
newPortal(name, url);
return null;
}
const textEmptyFields = ()=>(
const textEmptyFields = () => (
<>
{
emptyFields ?
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.emptyFilds")}</TextEmptyFileds>
: null
}
{
nameAlreadyUsed ?
<TextEmptyFileds>{i18next.t("mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists")}</TextEmptyFileds>
: null
}
{emptyFields ? (
<TextEmptyFileds>
{i18next.t('mobileApp.portals.addPortalPopup.validation.emptyFilds')}
</TextEmptyFileds>
) : null}
{nameAlreadyUsed ? (
<TextEmptyFileds>
{i18next.t(
'mobileApp.portals.addPortalPopup.validation.portalNameAlreadyExists',
)}
</TextEmptyFileds>
) : null}
</>
)
);
return (
<>
@ -71,16 +73,40 @@ export const StorePortals = ({navigation, modalizeRef}:IStore)=>{
<WrapperStore>
{textEmptyFields()}
<WrapperInput>
<InputText value={name} onChangeText={(e:any)=>setName(e)} placeholder={i18next.t("mobileApp.portals.fields.name.placeholder")} label={i18next.t("mobileApp.portals.fields.name.label")}/>
<InputText
autoCapitalize={'none'}
autoCorrect={false}
value={name}
onChangeText={(e: any) => setName(e)}
placeholder={i18next.t(
'mobileApp.portals.fields.name.placeholder',
)}
label={i18next.t('mobileApp.portals.fields.name.label')}
/>
</WrapperInput>
<WrapperInput>
<InputText autoCapitalize='none' value={url} onChangeText={(e:any)=>setUrl(e)} placeholder={i18next.t("mobileApp.portals.fields.url.placeholder")} label={i18next.t("mobileApp.portals.fields.url.label")}/>
<InputText
autoCapitalize={'none'}
autoCorrect={false}
value={url}
onChangeText={(e: any) => setUrl(e)}
placeholder={i18next.t(
'mobileApp.portals.fields.url.placeholder',
)}
label={i18next.t('mobileApp.portals.fields.url.label')}
/>
</WrapperInput>
<WrapperInput>
<ButtonApp onPress={onPress}><Text>{i18next.t("mobileApp.portals.addPortalPopup.confirm.button.label")}</Text></ButtonApp>
<ButtonApp onPress={onPress}>
<Text>
{i18next.t(
'mobileApp.portals.addPortalPopup.confirm.button.label',
)}
</Text>
</ButtonApp>
</WrapperInput>
</WrapperStore>
</WrapperStoreContainer>
</>
)
);
}