Update users screens
This commit is contained in:
parent
d27bda1c74
commit
f3586056f4
15 changed files with 155 additions and 121 deletions
|
@ -1,14 +1,15 @@
|
|||
import React from 'react';
|
||||
import { Field, FieldProps } from 'formik';
|
||||
import Input from '@/components/elements/Input';
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
|
||||
type OmitFields = 'ref' | 'name' | 'value' | 'type' | 'checked' | 'onClick' | 'onChange';
|
||||
|
||||
type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
|
||||
type InputProps = Omit<JSX.IntrinsicElements['input'], OmitFields>;
|
||||
|
||||
const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
|
||||
<Field name={name}>
|
||||
|
@ -20,7 +21,7 @@ const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
|
|||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
<Input
|
||||
{...field}
|
||||
{...props}
|
||||
type={'checkbox'}
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
|
@ -55,29 +56,25 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
|
|||
|
||||
return () => {
|
||||
document.removeEventListener('click', windowListener);
|
||||
}
|
||||
};
|
||||
}, [ visible ]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderToggle(onClickHandler)}
|
||||
<CSSTransition
|
||||
timeout={250}
|
||||
in={visible}
|
||||
unmountOnExit={true}
|
||||
classNames={'fade'}
|
||||
>
|
||||
<Fade timeout={250} in={visible} unmountOnExit>
|
||||
<div
|
||||
ref={menu}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
setVisible(false);
|
||||
}}
|
||||
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
|
||||
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
|
||||
style={{ minWidth: '12rem' }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</Fade>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -16,6 +16,25 @@ const light = css<Props>`
|
|||
}
|
||||
`;
|
||||
|
||||
const checkboxStyle = css<Props>`
|
||||
${tw`cursor-pointer appearance-none inline-block align-middle select-none flex-shrink-0 w-4 h-4 text-primary-400 border border-neutral-300 rounded-sm`};
|
||||
color-adjust: exact;
|
||||
background-origin: border-box;
|
||||
transition: all 75ms linear, box-shadow 25ms linear;
|
||||
|
||||
&:checked {
|
||||
${tw`border-transparent bg-no-repeat bg-center`};
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
|
||||
background-color: currentColor;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
${tw`outline-none border-primary-300`};
|
||||
box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
|
||||
}
|
||||
`;
|
||||
|
||||
const inputStyle = css<Props>`
|
||||
// Reset to normal styling.
|
||||
${tw`appearance-none w-full min-w-0`};
|
||||
|
@ -43,7 +62,19 @@ const inputStyle = css<Props>`
|
|||
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
|
||||
`;
|
||||
|
||||
const Input = styled.input<Props>`${inputStyle}`;
|
||||
const Input = styled.input<Props>`
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
${inputStyle};
|
||||
}
|
||||
|
||||
&[type="checkbox"], &[type="radio"] {
|
||||
${checkboxStyle};
|
||||
|
||||
&[type="radio"] {
|
||||
${tw`rounded-full`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
const Textarea = styled.textarea<Props>`${inputStyle}`;
|
||||
|
||||
export { Textarea };
|
||||
|
|
|
@ -27,6 +27,7 @@ const ModalMask = styled.div`
|
|||
|
||||
const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
||||
${tw`relative flex flex-col w-full m-auto`};
|
||||
max-height: calc(100vh - 8rem);
|
||||
max-width: 50%;
|
||||
// @todo max-w-screen-lg perhaps?
|
||||
${props => props.alignTop && 'margin-top: 10%'};
|
||||
|
|
Reference in a new issue