From 4cb967f0468f386dfdd70e99165cae27d8553b52 Mon Sep 17 00:00:00 2001 From: Ramakrishnan Raman Date: Mon, 17 Apr 2023 18:07:15 +0530 Subject: [PATCH] fixes searchtext bound property (#234) * fixes searchtext bound property * updated testsnap --- SearchBox/SearchBox/ControlManifest.Input.xml | 6 ++++ SearchBox/SearchBox/ManifestConstants.ts | 2 +- .../searchbox-lifecycle.test.ts.snap | 4 +-- .../SearchBox/components/Component.types.ts | 2 +- SearchBox/SearchBox/components/SearchBox.tsx | 30 ++++++++--------- SearchBox/SearchBox/index.ts | 32 +++++++++++++------ .../SearchBox/strings/SearchBox.1033.resx | 6 ++++ SearchBox/featureconfig.json | 3 ++ 8 files changed, 55 insertions(+), 30 deletions(-) create mode 100644 SearchBox/featureconfig.json diff --git a/SearchBox/SearchBox/ControlManifest.Input.xml b/SearchBox/SearchBox/ControlManifest.Input.xml index 0b4a5d32..79eef71c 100644 --- a/SearchBox/SearchBox/ControlManifest.Input.xml +++ b/SearchBox/SearchBox/ControlManifest.Input.xml @@ -1,6 +1,7 @@ + @@ -10,6 +11,11 @@ + + + + + diff --git a/SearchBox/SearchBox/ManifestConstants.ts b/SearchBox/SearchBox/ManifestConstants.ts index 90a1ba3c..e4d849e1 100644 --- a/SearchBox/SearchBox/ManifestConstants.ts +++ b/SearchBox/SearchBox/ManifestConstants.ts @@ -4,5 +4,5 @@ export const enum InputEvents { export const enum InputProperties { InputEvent = 'InputEvent', - SelectedKey = 'SelectedKey', + SearchText = 'SearchText', } diff --git a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap index 2edb7904..57d5b3b1 100644 --- a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap +++ b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap @@ -7,7 +7,7 @@ exports[`SearchBox renders 1`] = ` disabled={false} height={-1} iconName="" - onChanged={[Function]} + onChange={[Function]} placeholderText="" setFocus="" themeJSON="" @@ -156,7 +156,7 @@ exports[`SearchBox theme 1`] = ` display: none; } disabled={false} - id="SearchBox3" + id="SearchBox6" onBlur={[Function]} onChange={[Function]} onInput={[Function]} diff --git a/SearchBox/SearchBox/components/Component.types.ts b/SearchBox/SearchBox/components/Component.types.ts index d637307c..5016ab20 100644 --- a/SearchBox/SearchBox/components/Component.types.ts +++ b/SearchBox/SearchBox/components/Component.types.ts @@ -1,7 +1,7 @@ export interface ISearchBoxComponentProps { width?: number; height?: number; - onChanged: (newValue: string | undefined) => void; + onChange: (event?: React.ChangeEvent, newValue?: string) => void; themeJSON?: string; ariaLabel?: string; underLined?: boolean; diff --git a/SearchBox/SearchBox/components/SearchBox.tsx b/SearchBox/SearchBox/components/SearchBox.tsx index 1029cba3..12ce0975 100644 --- a/SearchBox/SearchBox/components/SearchBox.tsx +++ b/SearchBox/SearchBox/components/SearchBox.tsx @@ -3,18 +3,10 @@ import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, merge import { ISearchBoxComponentProps } from './Component.types'; export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) => { - const { - onChanged, - themeJSON, - ariaLabel, - placeholderText, - underLined, - disabled, - disableAnimation, - setFocus, - value, - } = props; + const { onChange, themeJSON, ariaLabel, placeholderText, underLined, disabled, disableAnimation, setFocus, value } = + props; const filterIcon: IIconProps = { iconName: props.iconName }; + const [searchText, setSearchText] = React.useState(value); const rootRef = React.useRef(null); const theme = React.useMemo(() => { try { @@ -25,9 +17,15 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) = } }, [themeJSON]); - const onChange = (event?: React.ChangeEvent, newValue?: string): void => { - onChanged(newValue); - }; + React.useEffect(() => { + value !== searchText && setSearchText(value); + }, [value, searchText]); + + function onChangeEvent(ev?: React.ChangeEvent, newValue?: string) { + setSearchText(newValue); + onChange(ev, newValue); + } + const wrapperClass = mergeStyles({ width: props.width, }); @@ -45,7 +43,7 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) = ); diff --git a/SearchBox/SearchBox/index.ts b/SearchBox/SearchBox/index.ts index 712925a4..ca35409f 100644 --- a/SearchBox/SearchBox/index.ts +++ b/SearchBox/SearchBox/index.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { IInputs, IOutputs } from './generated/ManifestTypes'; import { SearchBoxComponent } from './components/SearchBox'; import { ISearchBoxComponentProps } from './components/Component.types'; -import { InputEvents } from './ManifestConstants'; +import { InputEvents, InputProperties } from './ManifestConstants'; import { Async } from '@fluentui/react'; export class SearchBox implements ComponentFramework.ReactControl { @@ -10,13 +10,14 @@ export class SearchBox implements ComponentFramework.ReactControl; notifyOutputChanged: ((debounce?: boolean) => void) | null; searchTextValue: string; + defaultValue: string; setFocus = ''; asyncFluent: Async; debouncedOutputChanged: (debounce?: boolean) => void; delayOutput: boolean; constructor() { - this.onChange = this.onChange.bind(this); + this.onChanged = this.onChanged.bind(this); this.asyncFluent = new Async(); } @@ -46,12 +47,20 @@ export class SearchBox implements ComponentFramework.ReactControl -1; + if (valueChanged) { + const value = context.parameters.SearchText.raw; + // If the default value is different from searchText value + if (value && this.searchTextValue !== value) { + this.searchTextValue = value; + this.notifyOutputChanged; + } + } if (eventChanged && inputEvent.startsWith(InputEvents.SetFocus)) { this.setFocus = inputEvent; } const props: ISearchBoxComponentProps = { - onChanged: this.onChange, + onChange: this.onChanged, themeJSON: context.parameters.Theme.raw ?? '', ariaLabel: context.parameters?.AccessibilityLabel.raw ?? '', underLined: context.parameters.Underlined.raw ?? false, @@ -62,7 +71,7 @@ export class SearchBox implements ComponentFramework.ReactControl { - this.searchTextValue = newValue || ''; - this.delayOutput - ? this.debouncedOutputChanged && this.debouncedOutputChanged() - : this.notifyOutputChanged && this.notifyOutputChanged(); + private onChanged = (event?: React.ChangeEvent, newValue?: string): void => { + // If the new Value is different from searchTextValue + if (this.searchTextValue !== newValue) { + this.searchTextValue = newValue ?? ''; + this.delayOutput + ? this.debouncedOutputChanged && this.debouncedOutputChanged() + : this.notifyOutputChanged && this.notifyOutputChanged(); + } }; /** diff --git a/SearchBox/SearchBox/strings/SearchBox.1033.resx b/SearchBox/SearchBox/strings/SearchBox.1033.resx index e7952d58..33ab3a5d 100644 --- a/SearchBox/SearchBox/strings/SearchBox.1033.resx +++ b/SearchBox/SearchBox/strings/SearchBox.1033.resx @@ -154,4 +154,10 @@ Represents the default as well as the current value of search box + + Default value + + + Default value to set for the search box. This can be used only once + \ No newline at end of file diff --git a/SearchBox/featureconfig.json b/SearchBox/featureconfig.json new file mode 100644 index 00000000..22f809f7 --- /dev/null +++ b/SearchBox/featureconfig.json @@ -0,0 +1,3 @@ +{ + "pcfAllowEvents": "on" +}