Add view for editing the details of a schedule
This commit is contained in:
parent
f180e3ef0b
commit
3820d4e156
11 changed files with 334 additions and 53 deletions
42
resources/scripts/components/elements/Checkbox.tsx
Normal file
42
resources/scripts/components/elements/Checkbox.tsx
Normal 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;
|
31
resources/scripts/components/elements/FormikFieldWrapper.tsx
Normal file
31
resources/scripts/components/elements/FormikFieldWrapper.tsx
Normal 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;
|
27
resources/scripts/components/elements/InputError.tsx
Normal file
27
resources/scripts/components/elements/InputError.tsx
Normal 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;
|
85
resources/scripts/components/elements/Switch.tsx
Normal file
85
resources/scripts/components/elements/Switch.tsx
Normal 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;
|
Reference in a new issue