1
0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-23 09:46:43 +01:00
umami/components/layout/FormLayout.js
2020-08-09 02:03:37 -07:00

33 lines
1.0 KiB
JavaScript

import React from 'react';
import { useSpring, animated } from 'react-spring';
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}>
<div className={styles.msg}>{msg}</div>
</animated.div>
);
};
export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
export const FormMessage = ({ children }) =>
children ? <div className={styles.message}>{children}</div> : null;