Skip to content

Commit

Permalink
DynamicComboBox sets value to null if not found
Browse files Browse the repository at this point in the history
  • Loading branch information
rezanid committed Jan 3, 2023
1 parent 15f51fc commit fd82e89
Showing 1 changed file with 17 additions and 28 deletions.
45 changes: 17 additions & 28 deletions DynamicDropdown/DynamicComboBox.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
// import * as React from 'react';
// import {
// ComboBox,
// IComboBoxOption,
// IComboBoxStyles,
// } from '@fluentui/react';

import { TextField } from "@fluentui/react";
import { ComboBox, IComboBoxOption, IComboBoxStyles } from "@fluentui/react/lib/ComboBox";
import React, { memo, useCallback, useMemo } from "react";

Expand All @@ -18,28 +10,16 @@ export interface DynamicComboBoxProps {
disabled: boolean;
masked: boolean;
errorMessage: string | undefined;
onChange: (newValue: string | number) => void;
onChange: (newValue: string | number | null, newText: string | null) => void;
getKeyValue: (entity: ComponentFramework.WebApi.Entity, key: string) => string;
getTextValue: (entity: ComponentFramework.WebApi.Entity, text: string) => string;
}

/* Sample:
const options: IComboBoxOption[] =
[
{ key: 'Header1', text: 'First heading', itemType: SelectableOptionMenuItemType.Header },
{ key: 'A', text: 'Option A' },
{ key: 'B', text: 'Option B' },
{ key: 'divider', text: '-', itemType: SelectableOptionMenuItemType.Divider },
{ key: 'Header2', text: 'Second heading', itemType: SelectableOptionMenuItemType.Header },
{ key: 'E', text: 'Option E' },
{ key: 'F', text: 'Option F', disabled: true },
{ key: 'J', text: 'Option J' },
];
*/

const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };

export const DynamicComboBox = memo((props: DynamicComboBoxProps) => {
const { label, value, options, optionKeyField, optionTextField, disabled, masked, errorMessage, onChange } = props;
const { label, value, options, optionKeyField, optionTextField, disabled, masked, errorMessage, onChange, getKeyValue: keyValueExtractor, getTextValue: textValueExtractor } = props;
const valueKey = value != null ? value.toString() : undefined;
let isValueKeyFound = false;

const items = useMemo(() => {
if (errorMessage) {
Expand All @@ -60,21 +40,30 @@ export const DynamicComboBox = memo((props: DynamicComboBoxProps) => {
error: undefined,
choices:
options.map((item) => {
let key = undefined;
if (valueKey && !isValueKeyFound) {
key = keyValueExtractor(item, optionKeyField);
isValueKeyFound = key == valueKey;
}
return {
key: optionKeyField.indexOf('$') > -1 ? optionKeyField.replace(/\${([\w_]+)}/gm, (_,m)=> item[m]) : item[optionKeyField],
text: optionTextField.indexOf('$') > -1 ? optionTextField.replace(/\${([\w_]+)}/gm, (_,m)=> item[m]) : item[optionTextField]
key: key ?? keyValueExtractor(item, optionKeyField),
text: textValueExtractor(item, optionTextField)
} as IComboBoxOption;
})
};
}, [options]);

const onChangeComboBox = useCallback(
(ev?: unknown, option?: IComboBoxOption): void => {
onChange(option ? (option.key) : '')
if (option) {
onChange(option.key, option.text)
}
},
[onChange]
);

if (valueKey && !isValueKeyFound) { onChange(null, null); }

return (
<>
{items.error}
Expand Down

1 comment on commit fd82e89

@rezanid
Copy link
Owner Author

@rezanid rezanid commented on fd82e89 Jan 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

closes #2

Please sign in to comment.