formik#FieldInputProps TypeScript Examples
The following examples show how to use
formik#FieldInputProps.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Login.tsx From krmanga with MIT License | 5 votes |
|
Login = ({ navigation, dispatch, isLogin, loading }: IProps) => {
const [disabled, setDisabled] = useState<boolean>(false);
useEffect(() => {
if (isLogin) {
setTimeout(() => {
navigation.goBack();
}, 100);
}
}, [isLogin]);
const onSubmit = (values: Values) => {
if (disabled || loading) {
return;
}
setDisabled(true);
dispatch({
type: "user/login",
payload: values,
callback: () => {
setDisabled(false);
}
});
};
const cancel = (form: FormikProps<string>, field: FieldInputProps<string>) => {
if (field.name === "account") {
form.setFieldValue("account", "");
} else if (field.name === "password") {
form.setFieldValue("password", "");
}
};
return (
<ScrollView keyboardShouldPersistTaps="handled" style={styles.container}>
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={customerValidation}>
{({ handleSubmit }) => (
<View>
<Field
name="account"
placeholder="请输入用户名"
component={Input}
iconName={"icon-Account"}
cancel={cancel}
/>
<Field
name="password"
placeholder="请输入密码"
component={Input}
iconName={"icon-mima"}
secureTextEntry
cancel={cancel}
/>
<View style={styles.jumpView}>
<Text style={styles.jumpTitle}>忘记密码?</Text>
<Touchable onPress={() => navigation.navigate("Register")}>
<Text style={styles.jumpTitle}>注册账号</Text>
</Touchable>
</View>
<Touchable disabled={disabled} onPress={handleSubmit} style={styles.login}>
<Text style={styles.loginText}>登录</Text>
</Touchable>
</View>
)}
</Formik>
</ScrollView>
);
}
Example #2
| Source File: index.tsx From material-table-formik with MIT License | 4 votes |
|
function FormikDialog<RowData extends IData>({
children,
onEditingCanceled,
validate,
onEditingApproved,
validationSchema,
mode,
editField: EditCell,
displayField: DisplayCell,
dialogLocalization,
dateTimePickerLocalization,
...props
}: IFormikDialogProps<RowData>) {
const { localization, data, columns } = props;
const mounted = useRef(false);
useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
const initialValues = React.useMemo(
() => (data ? { ...data } : ({} as RowData)),
[data]
);
const closeDialog = () => {
onEditingCanceled(mode, data);
};
let title;
switch (mode) {
case 'add':
title = dialogLocalization.addTooltip;
break;
case 'update':
title = dialogLocalization.editTooltip;
break;
case 'delete':
title = dialogLocalization.deleteHeader;
break;
}
const getEditCell = (
column: IColumn<RowData>,
field: FieldInputProps<RowData>,
meta: FieldMetaProps<RowData>,
setValues: (rowData: RowData) => void
) => {
if (!canEdit(column, mode, data)) {
if (column.render && data) {
return column.render(data, 'row');
} else {
return <div>{field.value}</div>;
}
}
const onChange = (newValue: string | number | boolean) =>
field.onChange({
target: {
value: newValue,
checked: newValue,
name: field.name,
},
});
const onRowDataChange = (newRowData: Partial<RowData>) => {
if (data) {
setValues({
...data,
...newRowData,
});
}
};
const errorProps: {
helperText?: string;
error: boolean;
} = {
helperText: meta.touched ? meta.error : '',
error: Boolean(meta.touched && meta.error !== undefined),
};
if (column.editComponent) {
return column.editComponent({
rowData: data || ({} as RowData),
value: field.value,
onChange,
onRowDataChange,
columnDef: (column as any) as EditCellColumnDef,
...errorProps,
});
} else {
return (
<EditCell
variant="standard"
{...field}
{...errorProps}
locale={dateTimePickerLocalization}
fullWidth={true}
id={column.field}
columnDef={column}
onChange={onChange}
rowData={data}
/>
);
}
};
return (
<>
<Dialog onClose={closeDialog} open={true} fullWidth={true}>
<DialogTitle id="simple-dialog-title">{title}</DialogTitle>
<Formik
validationSchema={validationSchema}
initialValues={initialValues}
validate={validate}
onSubmit={async (values, { setSubmitting }) => {
setSubmitting(true);
delete values.tableData;
await onEditingApproved(mode, values, data);
if (mounted && mounted.current) {
setSubmitting(false);
}
}}
>
{({ isSubmitting, handleSubmit, setValues }) => (
<form onSubmit={handleSubmit}>
<DialogContent>
<Grid container={true}>
{mode !== 'delete' &&
columns
.filter(column => isColumnVisible(column, mode))
.map(column => (
<Field key={column.field} name={column.field}>
{({ field, meta }: FieldAttributes<any>) => {
return (
<Grid
item={true}
xs={12}
{...column.gridProps}
sx={{ p: 1, ...(column.gridProps?.sx ?? {}) }}
>
<label htmlFor={column.field as string}>
{column.title}
</label>
<br />
{getEditCell(column, field, meta, setValues)}
</Grid>
);
}}
</Field>
))}
</Grid>
{mode === 'delete' && (
<DialogContentText>
{localization.deleteText}
</DialogContentText>
)}
<DialogActions>
{isSubmitting ? (
<CircularProgress size={25} />
) : (
<>
<Button onClick={closeDialog} color="primary">
{localization.cancelTooltip}
</Button>
<Button
color="primary"
autoFocus={true}
type="submit"
disabled={isSubmitting}
>
{mode !== 'delete'
? localization.saveTooltip
: dialogLocalization.deleteAction}
</Button>
</>
)}
</DialogActions>
</DialogContent>
</form>
)}
</Formik>
</Dialog>
{data && (
<MTableBodyRow {...props} onToggleDetailPanel={() => {}}>
{children}
</MTableBodyRow>
)}
</>
);
}
Example #3
| Source File: Register.tsx From krmanga with MIT License | 4 votes |
|
function Register({ navigation, dispatch, isLogin, loading }: IProps) {
const [disabled, setDisabled] = useState<boolean>(false);
useEffect(() => {
if (isLogin) {
setTimeout(() => {
navigation.goBack();
}, 100);
}
}, [isLogin]);
const onSubmit = (values: Values) => {
if (disabled || loading) {
return;
}
setDisabled(true);
dispatch({
type: "user/register",
payload: values,
callback: () => {
setDisabled(false);
}
});
};
const cancel = (form: FormikProps<string>, field: FieldInputProps<string>) => {
if (field.name === "account") {
form.setFieldValue("account", "");
} else if (field.name === "password") {
form.setFieldValue("password", "");
} else if (field.name === "repeat_password") {
form.setFieldValue("repeat_password", "");
} else if (field.name === "phone") {
form.setFieldValue("phone", "");
}
};
return (
<ScrollView keyboardShouldPersistTaps="handled" style={styles.container}>
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={customerValidation}>
{({ handleSubmit }) => (
<View>
<Field
name="account"
placeholder="请输入用户名"
component={Input}
iconName={"icon-Account"}
cancel={cancel}
/>
<Field
name="password"
placeholder="请输入密码"
component={Input}
iconName={"icon-mima"}
secureTextEntry
cancel={cancel}
/>
<Field
name="repeat_password"
placeholder="请再输入密码"
component={Input}
iconName={"icon-mima"}
secureTextEntry
cancel={cancel}
/>
<Field
name="phone"
placeholder="请输入手机号(选填)"
component={Input}
iconName={"icon-mobile-phone"}
cancel={cancel}
/>
<View style={styles.jumpView}>
<Text style={styles.jumpTitle}>忘记密码?</Text>
<Touchable onPress={() => navigation.navigate("Login")}>
<Text style={styles.jumpTitle}>立即登录</Text>
</Touchable>
</View>
<Touchable disabled={disabled} onPress={handleSubmit} style={styles.login}>
<Text style={styles.loginText}>注册</Text>
</Touchable>
</View>
)}
</Formik>
</ScrollView>
);
}
