fix(striker-ui): export input id and include previous value in AddUpsInputGroup

main
Tsu-ba-me 2 years ago
parent 9878281270
commit ca3d84a12c
  1. 32
      striker-ui/components/ManageUps/AddUpsInputGroup.tsx
  2. 1
      striker-ui/types/AddUpsInputGroup.d.ts

@ -6,13 +6,19 @@ import SelectWithLabel from '../SelectWithLabel';
import Spinner from '../Spinner'; import Spinner from '../Spinner';
import { BodyText } from '../Text'; import { BodyText } from '../Text';
const INPUT_ID_UPS_TYPE_ID = 'add-ups-select-ups-type-id';
const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
loading: isExternalLoading, loading: isExternalLoading,
previous = {},
upsTemplate, upsTemplate,
}) => { }) => {
const [inputUpsAgentValue, setInputUpsAgentValue] = useState<string>(''); const { upsTypeId: previousUpsTypeId = '' } = previous;
const [inputUpsTypeIdValue, setInputUpsTypeIdValue] =
useState<string>(previousUpsTypeId);
const upsAgentOptions = useMemo<SelectItem[]>( const upsTypeOptions = useMemo<SelectItem[]>(
() => () =>
upsTemplate upsTemplate
? Object.entries(upsTemplate).map<SelectItem>( ? Object.entries(upsTemplate).map<SelectItem>(
@ -30,22 +36,22 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
[upsTemplate], [upsTemplate],
); );
const pickUpsAgentElement = useMemo( const pickUpsTypeElement = useMemo(
() => () =>
upsTemplate && ( upsTemplate && (
<SelectWithLabel <SelectWithLabel
formControlProps={{ sx: { marginTop: '.3em' } }} formControlProps={{ sx: { marginTop: '.3em' } }}
id="add-ups-select-agent" id={INPUT_ID_UPS_TYPE_ID}
label="UPS type" label="UPS type"
onChange={({ target: { value: rawNewValue } }) => { onChange={({ target: { value: rawNewValue } }) => {
const newValue = String(rawNewValue); const newValue = String(rawNewValue);
setInputUpsAgentValue(newValue); setInputUpsTypeIdValue(newValue);
}} }}
selectItems={upsAgentOptions} selectItems={upsTypeOptions}
selectProps={{ selectProps={{
onClearIndicatorClick: () => { onClearIndicatorClick: () => {
setInputUpsAgentValue(''); setInputUpsTypeIdValue('');
}, },
renderValue: (rawValue) => { renderValue: (rawValue) => {
const upsTypeId = String(rawValue); const upsTypeId = String(rawValue);
@ -54,10 +60,10 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
return brand; return brand;
}, },
}} }}
value={inputUpsAgentValue} value={inputUpsTypeIdValue}
/> />
), ),
[inputUpsAgentValue, upsAgentOptions, upsTemplate], [inputUpsTypeIdValue, upsTypeOptions, upsTemplate],
); );
const content = useMemo<ReactElement>( const content = useMemo<ReactElement>(
() => () =>
@ -65,14 +71,16 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
<Spinner /> <Spinner />
) : ( ) : (
<FlexBox> <FlexBox>
{pickUpsAgentElement} {pickUpsTypeElement}
{inputUpsAgentValue && <CommonUpsInputGroup />} {inputUpsTypeIdValue && <CommonUpsInputGroup previous={previous} />}
</FlexBox> </FlexBox>
), ),
[inputUpsAgentValue, isExternalLoading, pickUpsAgentElement], [inputUpsTypeIdValue, isExternalLoading, pickUpsTypeElement, previous],
); );
return content; return content;
}; };
export { INPUT_ID_UPS_TYPE_ID };
export default AddUpsInputGroup; export default AddUpsInputGroup;

@ -1,5 +1,6 @@
type AddUpsInputGroupOptionalProps = { type AddUpsInputGroupOptionalProps = {
loading?: boolean; loading?: boolean;
previous?: CommonUpsInputGroupProps['previous'] & { upsTypeId?: string };
upsTemplate?: APIUpsTemplate; upsTemplate?: APIUpsTemplate;
}; };

Loading…
Cancel
Save