Skip to content

Commit

Permalink
Update typings for forms/etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@ncovercash
ncovercash committed Oct 9, 2023
1 parent 226f11a commit 60a0b03
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 188 deletions.
32 changes: 18 additions & 14 deletions src/components/fields/ExceptionField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,19 @@ export default function ExceptionField({ values }: ExceptionFieldProps) {
values.map((name, index) => ({
name: (
<Field
component={TextField<string>}
ariaLabel={intl.formatMessage({
id: 'ui-calendar.calendarForm.exceptions.column.name',
})}
name={`${name}.name`}
marginBottom0
required
fullWidth
error={getErrorDisplay(fieldState.meta.error, index)}
render={(fieldProps) => (
<TextField<string>
{...fieldProps}
aria-label={intl.formatMessage({
id: 'ui-calendar.calendarForm.exceptions.column.name',
})}
marginBottom0
required
fullWidth
error={getErrorDisplay(fieldState.meta.error, index)}
/>
)}
/>
),
status: (
Expand All @@ -76,10 +80,10 @@ export default function ExceptionField({ values }: ExceptionFieldProps) {
[css.conflictCell]: isInnerRowConflicted(
fieldState.meta.error,
index,
innerIndex
innerIndex,
),
},
cssHiddenErrorField.hiddenErrorFieldWrapper
cssHiddenErrorField.hiddenErrorFieldWrapper,
)}
backendDateStandard="YYYY-MM-DD"
marginBottom0
Expand All @@ -101,7 +105,7 @@ export default function ExceptionField({ values }: ExceptionFieldProps) {
[css.conflictCell]: isInnerRowConflicted(
fieldState.meta.error,
index,
innerIndex
innerIndex,
),
})}
display={values.value[index].type === RowType.Open}
Expand All @@ -123,10 +127,10 @@ export default function ExceptionField({ values }: ExceptionFieldProps) {
[css.conflictCell]: isInnerRowConflicted(
fieldState.meta.error,
index,
innerIndex
innerIndex,
),
},
cssHiddenErrorField.hiddenErrorFieldWrapper
cssHiddenErrorField.hiddenErrorFieldWrapper,
)}
backendDateStandard="YYYY-MM-DD"
marginBottom0
Expand All @@ -148,7 +152,7 @@ export default function ExceptionField({ values }: ExceptionFieldProps) {
[css.conflictCell]: isInnerRowConflicted(
fieldState.meta.error,
index,
innerIndex
innerIndex,
),
})}
display={values.value[index].type === RowType.Open}
Expand Down
46 changes: 25 additions & 21 deletions src/components/fields/OpenClosedSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,32 @@ export default function OpenClosedSelect({ name }: { name: string }) {

return (
<Field
component={Select<RowType>}
name={name}
aria-label={intl.formatMessage({
id: 'ui-calendar.calendarForm.openings.column.status',
})}
required
fullWidth
marginBottom0
dataOptions={[
{
value: RowType.Open,
label: intl.formatMessage({
id: 'ui-calendar.calendarForm.openClosedSelect.open',
}),
},
{
value: RowType.Closed,
label: intl.formatMessage({
id: 'ui-calendar.calendarForm.openClosedSelect.closed',
}),
},
]}
render={(fieldProps) => (
<Select<RowType>
{...fieldProps}
aria-label={intl.formatMessage({
id: 'ui-calendar.calendarForm.openings.column.status',
})}
required
fullWidth
marginBottom0
dataOptions={[
{
value: RowType.Open,
label: intl.formatMessage({
id: 'ui-calendar.calendarForm.openClosedSelect.open',
}),
},
{
value: RowType.Closed,
label: intl.formatMessage({
id: 'ui-calendar.calendarForm.openClosedSelect.closed',
}),
},
]}
/>
)}
/>
);
}
76 changes: 40 additions & 36 deletions src/components/fields/ServicePointAssignmentField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,45 +41,49 @@ const ServicePointAssignmentField: FunctionComponent<
return (
<Field
name="service-points"
component={MultiSelection<ServicePoint>}
label={
<FormattedMessage id="ui-calendar.calendarForm.field.servicePoints" />
}
formatter={formatter}
filter={(filterText: string | undefined, list: ServicePoint[]) => {
if (typeof filterText !== 'string' || filterText === '') {
return { renderedItems: list, exactMatch: false };
}
error={props.error}
render={(fieldProps) => (
<MultiSelection<ServicePoint>
{...fieldProps}
label={
<FormattedMessage id="ui-calendar.calendarForm.field.servicePoints" />
}
formatter={formatter}
filter={(filterText: string | undefined, list: ServicePoint[]) => {
if (typeof filterText !== 'string' || filterText === '') {
return { renderedItems: list, exactMatch: false };
}

// must spread and re-collect into a new array, as the returned array is immutable
const results = [
...fuzzysort.go(filterText, props.servicePoints, { key: 'name' }),
];
// must spread and re-collect into a new array, as the returned array is immutable
const results = [
...fuzzysort.go(filterText, props.servicePoints, { key: 'name' }),
];

// score descending, then name ascending
// fixes "service point 1".."service point 4" etc having undefined order
results.sort((a, b) => {
if (a.score === b.score) {
return a.target.localeCompare(b.target);
}
return -(a.score - b.score);
});
// score descending, then name ascending
// fixes "service point 1".."service point 4" etc having undefined order
results.sort((a, b) => {
if (a.score === b.score) {
return a.target.localeCompare(b.target);
}
return -(a.score - b.score);
});

return {
// retrieve the original service point
renderedItems: results.map((result) => result.obj),
exactMatch: !!list.filter((sp) => sp.name === filterText).length,
};
}}
itemToString={(servicePoint: ServicePoint | undefined) => {
if (servicePoint) {
return servicePoint.name;
} else {
return '';
}
}}
dataOptions={props.servicePoints}
error={props.error}
return {
// retrieve the original service point
renderedItems: results.map((result) => result.obj),
exactMatch: !!list.filter((sp) => sp.name === filterText).length,
};
}}
itemToString={(servicePoint: ServicePoint | undefined) => {
if (servicePoint) {
return servicePoint.name;
} else {
return '';
}
}}
dataOptions={props.servicePoints}
/>
)}
/>
);
};
Expand Down
16 changes: 10 additions & 6 deletions src/components/fields/WeekdayPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,17 @@ export default function WeekdayPicker({
return (
<div className={css.wrapper}>
<Field
component={Select<Weekday | undefined>}
name={name}
aria-label={ariaLabel}
required
fullWidth
marginBottom0
dataOptions={options}
render={(fieldProps) => (
<Select<Weekday | undefined>
{...fieldProps}
aria-label={ariaLabel}
required
fullWidth
marginBottom0
dataOptions={options}
/>
)}
/>
</div>
);
Expand Down
52 changes: 32 additions & 20 deletions src/forms/CalendarForm/CalendarForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,37 +80,49 @@ export const CalendarForm: FunctionComponent<
<Row>
<Col xs={12} md={6}>
<Field
component={TextField<string>}
autoFocus
required
name="name"
label={
<FormattedMessage id="ui-calendar.calendarForm.field.name" />
}
render={(fieldProps) => (
<TextField<string>
{...fieldProps}
autoFocus
required
label={
<FormattedMessage id="ui-calendar.calendarForm.field.name" />
}
/>
)}
/>
</Col>
<Col xs={12} md={3}>
<Field
component={Datepicker}
backendDateStandard="YYYY-MM-DD"
required
usePortal
name="start-date"
label={
<FormattedMessage id="ui-calendar.calendarForm.field.startDate" />
}
render={(fieldProps) => (
<Datepicker
{...fieldProps}
backendDateStandard="YYYY-MM-DD"
required
usePortal
label={
<FormattedMessage id="ui-calendar.calendarForm.field.startDate" />
}
/>
)}
/>
</Col>
<Col xs={12} md={3}>
<Field
component={Datepicker}
backendDateStandard="YYYY-MM-DD"
required
usePortal
name="end-date"
label={
<FormattedMessage id="ui-calendar.calendarForm.field.endDate" />
}
render={(fieldProps) => (
<Datepicker
{...fieldProps}
backendDateStandard="YYYY-MM-DD"
required
usePortal
label={
<FormattedMessage id="ui-calendar.calendarForm.field.endDate" />
}
/>
)}
/>
</Col>
</Row>
Expand Down
68 changes: 38 additions & 30 deletions src/forms/PurgeModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,39 +181,47 @@ export const PurgeModal: FunctionComponent<PurgeModalProps> = (
<form id={FORM_ID} onSubmit={submitter}>
<Field
name="ageCriteria"
component={Select<AgeCriteria | undefined>}
required
label={
<FormattedMessage id="ui-calendar.purgeModal.criteria.age.prompt" />
}
fullWidth
dataOptions={[
{ value: undefined, label: '' },
...Object.entries(AgeCriteriaLabels).map(
([value, label]) => ({
value: value as AgeCriteria,
label: intl.formatMessage({ id: label }),
})
),
]}
render={(fieldProps) => (
<Select<AgeCriteria | undefined>
{...fieldProps}
required
label={
<FormattedMessage id="ui-calendar.purgeModal.criteria.age.prompt" />
}
fullWidth
dataOptions={[
{ value: undefined, label: '' },
...Object.entries(AgeCriteriaLabels).map(
([value, label]) => ({
value: value as AgeCriteria,
label: intl.formatMessage({ id: label }),
}),
),
]}
/>
)}
/>
<Field
name="assignmentCriteria"
component={Select<AssignmentCriteria | undefined>}
required
label={
<FormattedMessage id="ui-calendar.purgeModal.criteria.assignment.prompt" />
}
fullWidth
dataOptions={[
{ value: undefined, label: '' },
...Object.entries(AssignmentCriteriaLabels).map(
([value, label]) => ({
value: value as AssignmentCriteria,
label: intl.formatMessage({ id: label }),
})
),
]}
render={(fieldProps) => (
<Select<AssignmentCriteria | undefined>
{...fieldProps}
required
label={
<FormattedMessage id="ui-calendar.purgeModal.criteria.assignment.prompt" />
}
fullWidth
dataOptions={[
{ value: undefined, label: '' },
...Object.entries(AssignmentCriteriaLabels).map(
([value, label]) => ({
value: value as AssignmentCriteria,
label: intl.formatMessage({ id: label }),
}),
),
]}
/>
)}
/>
<AccordionSet>
<Accordion
Expand Down
8 changes: 0 additions & 8 deletions src/typings.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,3 @@ declare module '*.css' {
const styles: { [className: string]: string };
export = styles;
}

declare module '@folio/stripes/core' {
export = STCOR;
}

declare module '@folio/stripes/smart-components' {
export = STSMACOM;
}
Loading

0 comments on commit 60a0b03

Please sign in to comment.