fix(striker-ui): isolate EditFenceDeviceInputGroup

main
Tsu-ba-me 2 years ago committed by digimer
parent 0c966aa7b6
commit 3399920557
  1. 137
      striker-ui/components/AddFenceDeviceForm.tsx
  2. 124
      striker-ui/components/EditFenceDeviceInputGroup.tsx
  3. 17
      striker-ui/types/EditFenceDeviceInputGroup.d.ts

@ -1,15 +1,12 @@
import { Box, Switch } from '@mui/material'; import { Box } from '@mui/material';
import { FC, ReactElement, ReactNode, useMemo, useState } from 'react'; import { FC, useMemo, useState } from 'react';
import api from '../lib/api'; import api from '../lib/api';
import Autocomplete from './Autocomplete'; import Autocomplete from './Autocomplete';
import ContainedButton from './ContainedButton'; import ContainedButton from './ContainedButton';
import EditFenceDeviceInputGroup from './EditFenceDeviceInputGroup';
import FlexBox from './FlexBox'; import FlexBox from './FlexBox';
import handleAPIError from '../lib/handleAPIError'; import handleAPIError from '../lib/handleAPIError';
import InputWithRef from './InputWithRef';
import OutlinedInputWithLabel from './OutlinedInputWithLabel';
import { ExpandablePanel } from './Panels';
import SelectWithLabel from './SelectWithLabel';
import Spinner from './Spinner'; import Spinner from './Spinner';
import { BodyText } from './Text'; import { BodyText } from './Text';
import useIsFirstRender from '../hooks/useIsFirstRender'; import useIsFirstRender from '../hooks/useIsFirstRender';
@ -21,48 +18,7 @@ type FenceDeviceAutocompleteOption = {
label: string; label: string;
}; };
type FenceParameterInputBuilder = (args: { const AddFenceDeviceForm: FC = () => {
id: string;
isChecked?: boolean;
isRequired?: boolean;
label?: string;
selectOptions?: string[];
value?: string;
}) => ReactElement;
const MAP_TO_INPUT_BUILDER: Partial<
Record<Exclude<FenceParameterType, 'string'>, FenceParameterInputBuilder>
> & { string: FenceParameterInputBuilder } = {
boolean: ({ id, isChecked = false, label }) => (
<FlexBox key={`${id}-wrapper`} row>
<BodyText flexGrow={1}>{label}</BodyText>
<Switch checked={isChecked} edge="end" id={id} />
</FlexBox>
),
select: ({ id, isRequired, label, selectOptions = [], value = '' }) => (
<InputWithRef
key={`${id}-wrapper`}
input={
<SelectWithLabel
id={id}
label={label}
selectItems={selectOptions}
selectProps={{ value }}
/>
}
required={isRequired}
/>
),
string: ({ id, isRequired, label = '', value }) => (
<InputWithRef
key={`${id}-wrapper`}
input={<OutlinedInputWithLabel id={id} label={label} value={value} />}
required={isRequired}
/>
),
};
const AddFenceDeivceForm: FC = () => {
const isFirstRender = useIsFirstRender(); const isFirstRender = useIsFirstRender();
const [fenceDeviceTemplate, setFenceDeviceTemplate] = useProtectedState< const [fenceDeviceTemplate, setFenceDeviceTemplate] = useProtectedState<
@ -141,80 +97,15 @@ const AddFenceDeivceForm: FC = () => {
), ),
[fenceDeviceTypeOptions, fenceDeviceTypeValue], [fenceDeviceTypeOptions, fenceDeviceTypeValue],
); );
const fenceParameterElements = useMemo(() => { const fenceParameterElements = useMemo(
let result: ReactNode; () => (
<EditFenceDeviceInputGroup
if (fenceDeviceTemplate && fenceDeviceTypeValue) { fenceDeviceId={fenceDeviceTypeValue?.fenceDeviceId}
const { fenceDeviceId } = fenceDeviceTypeValue; fenceDeviceTemplate={fenceDeviceTemplate}
const { parameters: fenceDeviceParameters } = />
fenceDeviceTemplate[fenceDeviceId]; ),
[fenceDeviceTemplate, fenceDeviceTypeValue],
const { optional: optionalInputs, required: requiredInputs } = );
Object.entries(fenceDeviceParameters).reduce<{
optional: ReactElement[];
required: ReactElement[];
}>(
(
previous,
[
parameterId,
{
content_type: contentType,
default: parameterDefault,
options: parameterSelectOptions,
required: isRequired,
},
],
) => {
const { optional, required } = previous;
const buildInput =
MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
const fenceJoinParameterId = `${fenceDeviceId}-${parameterId}`;
const parameterIsRequired = isRequired === '1';
const parameterInput = buildInput({
id: fenceJoinParameterId,
isChecked: parameterDefault === '1',
isRequired: parameterIsRequired,
label: parameterId,
selectOptions: parameterSelectOptions,
value: parameterDefault,
});
if (parameterIsRequired) {
required.push(parameterInput);
} else {
optional.push(parameterInput);
}
return previous;
},
{
optional: [],
required: [
MAP_TO_INPUT_BUILDER.string({
id: `${fenceDeviceId}-name`,
isRequired: true,
label: 'Fence device name',
}),
],
},
);
result = (
<>
<ExpandablePanel expandInitially header="Required parameters">
<FlexBox margin=".4em 0">{requiredInputs}</FlexBox>
</ExpandablePanel>
<ExpandablePanel header="Optional parameters">
<FlexBox margin=".4em 0">{optionalInputs}</FlexBox>
</ExpandablePanel>
</>
);
}
return result;
}, [fenceDeviceTemplate, fenceDeviceTypeValue]);
const formContent = useMemo( const formContent = useMemo(
() => () =>
@ -255,4 +146,4 @@ const AddFenceDeivceForm: FC = () => {
return <>{formContent}</>; return <>{formContent}</>;
}; };
export default AddFenceDeivceForm; export default AddFenceDeviceForm;

@ -0,0 +1,124 @@
import { FC, ReactElement, ReactNode, useMemo } from 'react';
import FlexBox from './FlexBox';
import InputWithRef from './InputWithRef';
import OutlinedInputWithLabel from './OutlinedInputWithLabel';
import { ExpandablePanel } from './Panels';
import SelectWithLabel from './SelectWithLabel';
import SwitchWithLabel from './SwitchWithLabel';
const CHECKED_STATES: Array<string | undefined> = ['1', 'on'];
const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
boolean: ({ id, isChecked = false, label }) => (
<InputWithRef
key={`${id}-wrapper`}
input={<SwitchWithLabel id={id} label={label} checked={isChecked} />}
valueType="boolean"
/>
),
select: ({ id, isRequired, label, selectOptions = [], value = '' }) => (
<InputWithRef
key={`${id}-wrapper`}
input={
<SelectWithLabel
id={id}
label={label}
selectItems={selectOptions}
value={value}
/>
}
required={isRequired}
/>
),
string: ({ id, isRequired, label = '', value }) => (
<InputWithRef
key={`${id}-wrapper`}
input={<OutlinedInputWithLabel id={id} label={label} value={value} />}
required={isRequired}
/>
),
};
const EditFenceDeviceInputGroup: FC<EditFenceDeviceInputGroupProps> = ({
fenceDeviceId,
fenceDeviceTemplate,
}) => {
const fenceParameterElements = useMemo(() => {
let result: ReactNode;
if (fenceDeviceTemplate && fenceDeviceId) {
const { parameters: fenceDeviceParameters } =
fenceDeviceTemplate[fenceDeviceId];
const { optional: optionalInputs, required: requiredInputs } =
Object.entries(fenceDeviceParameters).reduce<{
optional: ReactElement[];
required: ReactElement[];
}>(
(
previous,
[
parameterId,
{
content_type: contentType,
default: parameterDefault,
options: parameterSelectOptions,
required: isRequired,
},
],
) => {
const { optional, required } = previous;
const buildInput =
MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
const fenceJoinParameterId = `${fenceDeviceId}-${parameterId}`;
const parameterIsRequired = isRequired === '1';
const parameterInput = buildInput({
id: fenceJoinParameterId,
isChecked: CHECKED_STATES.includes(parameterDefault),
isRequired: parameterIsRequired,
label: parameterId,
selectOptions: parameterSelectOptions,
value: parameterDefault,
});
if (parameterIsRequired) {
required.push(parameterInput);
} else {
optional.push(parameterInput);
}
return previous;
},
{
optional: [],
required: [
MAP_TO_INPUT_BUILDER.string({
id: `${fenceDeviceId}-name`,
isRequired: true,
label: 'Fence device name',
}),
],
},
);
result = (
<>
<ExpandablePanel expandInitially header="Required parameters">
<FlexBox margin=".4em 0">{requiredInputs}</FlexBox>
</ExpandablePanel>
<ExpandablePanel header="Optional parameters">
<FlexBox margin=".4em 0">{optionalInputs}</FlexBox>
</ExpandablePanel>
</>
);
}
return result;
}, [fenceDeviceId, fenceDeviceTemplate]);
return <>{fenceParameterElements}</>;
};
export default EditFenceDeviceInputGroup;

@ -0,0 +1,17 @@
type FenceParameterInputBuilder = (args: {
id: string;
isChecked?: boolean;
isRequired?: boolean;
label?: string;
selectOptions?: string[];
value?: string;
}) => ReactElement;
type MapToInputBuilder = Partial<
Record<Exclude<FenceParameterType, 'string'>, FenceParameterInputBuilder>
> & { string: FenceParameterInputBuilder };
type EditFenceDeviceInputGroupProps = {
fenceDeviceId?: string;
fenceDeviceTemplate?: APIFenceTemplate;
};
Loading…
Cancel
Save