umami/components/layout/FormLayout.js

33 lines
1.0 KiB
JavaScript
Raw Normal View History

2020-08-07 07:03:02 +02:00
import React from 'react';
import { useSpring, animated } from 'react-spring';
2020-08-07 07:03:02 +02:00
import classNames from 'classnames';
import { ErrorMessage } from 'formik';
import styles from './FormLayout.module.css';
export default function FormLayout({ className, children }) {
return <div className={classNames(styles.form, className)}>{children}</div>;
}
export const FormButtons = ({ className, children }) => (
<div className={classNames(styles.buttons, className)}>{children}</div>
);
export const FormError = ({ name }) => {
return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
};
const ErrorTag = ({ msg }) => {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return (
<animated.div className={styles.error} style={props}>
2020-08-09 11:03:37 +02:00
<div className={styles.msg}>{msg}</div>
</animated.div>
);
};
2020-08-07 07:03:02 +02:00
export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
2020-08-07 09:24:01 +02:00
export const FormMessage = ({ children }) =>
children ? <div className={styles.message}>{children}</div> : null;