tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 22:47:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor form input fields

Browse Source
This commit is contained in:
Thomas Ruoff
2020-09-02 00:01:18 +02:00
committed by Thomas Ruoff
parent 0ed66962ba
commit b92ff0e3d8
5 changed files with 149 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
components/wizard/dateSelect.tsx
View File

@@ -7,7 +7,7 @@ import useSWR from 'swr'
import { getNextBigger, getNextSmaller } from '../../helpers/array'
import { dateFormatBackend } from '../../helpers/date'
import { WizardContext } from './context/wizardStore'
import Required from './required'
import InputWrapper from './inputWrapper'
const fetcher = (path: string) => fetch(path).then((r) => r.json())
@@ -70,65 +70,60 @@ export default function DateSelect() {
}
return (
<div className="fsw">
<div className="fs">
<label className="flabel">
Datum <Required />
</label>
<DayPickerInput
ref={fromRef}
inputProps={{ className: 'input-text', required: true }}
value={from}
placeholder="Von"
formatDate={MomentLocaleUtils.formatDate}
parseDate={MomentLocaleUtils.parseDate}
dayPickerProps={{
locale: 'de',
localeUtils: MomentLocaleUtils,
className: 'datepicker',
disabledDays,
modifiers,
numberOfMonths: 1,
}}
onDayChange={(from) => setRange({ ...range, from })}
/>
{' - '}
<DayPickerInput
ref={toRef}
inputProps={{
className: 'input-text',
disabled: !from,
required: true,
}}
value={to}
placeholder="Bis"
formatDate={MomentLocaleUtils.formatDate}
parseDate={MomentLocaleUtils.parseDate}
dayPickerProps={{
locale: 'de',
localeUtils: MomentLocaleUtils,
className: 'datepicker',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
month: from,
fromMonth: from,
}}
onDayChange={(to) => setRange({ ...range, to })}
/>
<button
onClick={() => setRange({ from: undefined, to: undefined })}
className="ibtn"
>
<svg className="w-full" viewBox="0 0 352 512">
<path
fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
></path>
</svg>
</button>
</div>
</div>
<InputWrapper label="Datum" required>
<DayPickerInput
ref={fromRef}
inputProps={{ className: 'input-text', required: true }}
value={from}
placeholder="Von"
formatDate={MomentLocaleUtils.formatDate}
parseDate={MomentLocaleUtils.parseDate}
dayPickerProps={{
locale: 'de',
localeUtils: MomentLocaleUtils,
className: 'datepicker',
disabledDays,
modifiers,
numberOfMonths: 1,
}}
onDayChange={(from) => setRange({ ...range, from })}
/>
{' - '}
<DayPickerInput
ref={toRef}
inputProps={{
className: 'input-text',
disabled: !from,
required: true,
}}
value={to}
placeholder="Bis"
formatDate={MomentLocaleUtils.formatDate}
parseDate={MomentLocaleUtils.parseDate}
dayPickerProps={{
locale: 'de',
localeUtils: MomentLocaleUtils,
className: 'datepicker',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
month: from,
fromMonth: from,
}}
onDayChange={(to) => setRange({ ...range, to })}
/>
<button
onClick={() => setRange({ from: undefined, to: undefined })}
className="ibtn"
>
<svg className="w-full" viewBox="0 0 352 512">
<path
fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
></path>
</svg>
</button>
</InputWrapper>
)
}