Add view for editing the details of a schedule

This commit is contained in:
Dane Everitt 2020-02-22 20:07:56 -08:00
parent f180e3ef0b
commit 3820d4e156
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
11 changed files with 334 additions and 53 deletions

View file

@ -0,0 +1,42 @@
import React from 'react';
import { Field, FieldProps } from 'formik';
interface Props {
name: string;
value: string;
}
type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
<Field name={name}>
{({ field, form }: FieldProps) => {
if (!Array.isArray(field.value)) {
console.error('Attempting to mount a checkbox using a field value that is not an array.');
return null;
}
return (
<input
{...field}
{...props}
type={'checkbox'}
checked={(field.value || []).includes(value)}
onClick={() => form.setFieldTouched(field.name, true)}
onChange={e => {
const set = new Set(field.value);
set.has(value) ? set.delete(value) : set.add(value);
field.onChange(e);
form.setFieldValue(field.name, Array.from(set));
}}
/>
);
}}
</Field>
);
export default Checkbox;

View file

@ -0,0 +1,31 @@
import React from 'react';
import { Field, FieldProps } from 'formik';
import classNames from 'classnames';
import InputError from '@/components/elements/InputError';
interface Props {
name: string;
children: React.ReactNode;
className?: string;
label?: string;
description?: string;
validate?: (value: any) => undefined | string | Promise<any>;
}
const FormikFieldWrapper = ({ name, label, className, description, validate, children }: Props) => (
<Field name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
{label && <label htmlFor={name}>{label}</label>}
{children}
<InputError errors={errors} touched={touched} name={field.name}>
{description ? <p className={'input-help'}>{description}</p> : null}
</InputError>
</div>
)
}
</Field>
);
export default FormikFieldWrapper;

View file

@ -0,0 +1,27 @@
import React from 'react';
import capitalize from 'lodash-es/capitalize';
import { FormikErrors, FormikTouched } from 'formik';
interface Props {
errors: FormikErrors<any>;
touched: FormikTouched<any>;
name: string;
children?: React.ReactNode;
}
const InputError = ({ errors, touched, name, children }: Props) => (
touched[name] && errors[name] ?
<p className={'input-help error'}>
{typeof errors[name] === 'string' ?
capitalize(errors[name] as string)
:
capitalize((errors[name] as unknown as string[])[0])
}
</p>
:
<React.Fragment>
{children}
</React.Fragment>
);
export default InputError;

View file

@ -0,0 +1,85 @@
import React, { useMemo } from 'react';
import styled from 'styled-components';
import v4 from 'uuid/v4';
import classNames from 'classnames';
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
import { Field, FieldProps } from 'formik';
const ToggleContainer = styled.div`
${tw`relative select-none w-12 leading-normal`};
& > input[type="checkbox"] {
${tw`hidden`};
&:checked + label {
${tw`bg-primary-500 border-primary-700 shadow-none`};
}
&:checked + label:before {
right: 0.125rem;
}
}
& > label {
${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
transition: all 75ms linear;
&::before {
${tw`absolute block bg-white border h-5 w-5 rounded-full`};
top: 0.125rem;
right: calc(50% + 0.125rem);
//width: 1.25rem;
//height: 1.25rem;
content: "";
transition: all 75ms ease-in;
}
}
`;
interface Props {
name: string;
description?: string;
label: string;
enabled?: boolean;
}
const Switch = ({ name, label, description }: Props) => {
const uuid = useMemo(() => v4(), []);
return (
<FormikFieldWrapper name={name}>
<div className={'flex items-center'}>
<ToggleContainer className={'mr-4 flex-none'}>
<Field name={name}>
{({ field, form }: FieldProps) => (
<input
id={uuid}
name={name}
type={'checkbox'}
onChange={() => {
form.setFieldTouched(name);
form.setFieldValue(field.name, !field.value);
}}
defaultChecked={field.value}
/>
)}
</Field>
<label htmlFor={uuid}/>
</ToggleContainer>
<div className={'w-full'}>
<label
className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
htmlFor={uuid}
>{label}</label>
{description &&
<p className={'input-help'}>
{description}
</p>
}
</div>
</div>
</FormikFieldWrapper>
);
};
export default Switch;