diff --git a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap index f68e20bc..d448ac93 100644 --- a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap +++ b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap @@ -5,11 +5,13 @@ exports[`SearchBox renders 1`] = ` ariaLabel="" disableAnimation={false} disabled={false} + height={-1} iconName="" onChanged={[Function]} placeholderText="" themeJSON="" underLined={false} + width={-1} /> `; @@ -17,6 +19,9 @@ exports[`SearchBox theme 1`] = `
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 | 1x +1x +1x + + + + + + + +1x + + + + +1x + +1x +1x +1x + + + + + + +1x + + + + + + + + + + + +1x + | import * as React from 'react'; +import { memo } from "react"; +import { + SearchBox, + createTheme, + IPartialTheme, + ThemeProvider +} from '@fluentui/react'; +import { ISearchBoxComponentProps } from './Component.types'; + +const SearchBoxBase = ((props: ISearchBoxComponentProps) => { + const { + onChanged, + themeJSON, + ariaLabel + } = props; + + const theme = React.useMemo(() => { + try { + return themeJSON ? createTheme(JSON.parse(themeJSON) as IPartialTheme) : undefined; + } catch (ex) { + /* istanbul ignore next */ + console.error('Cannot parse theme', ex); + } + }, [themeJSON]); + + return ( + <ThemeProvider theme={theme}> + <SearchBox + placeholder="Search" + onChange={newValue => onChanged(newValue?.target.value)} + ariaLabel={ariaLabel} + /> + </ThemeProvider> + ); +}); + +/** Component that can render `<searchbox>` */ +export const SearchBoxComponent = memo(SearchBoxBase); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
---|---|---|---|---|---|---|---|---|---|
SearchBox.tsx | +
+
+ |
+ 90.9% | +10/11 | +16.66% | +1/6 | +66.66% | +2/3 | +90.9% | +10/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
---|---|---|---|---|---|---|---|---|---|
index.ts | +
+
+ |
+ 70% | +7/10 | +56.25% | +9/16 | +50% | +3/6 | +70% | +7/10 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | 1x + +1x + + +1x + + + + + + + + + + + + + + +2x + + + + + + + + +2x + + + + + +2x + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + | import * as React from "react"; +import { IInputs, IOutputs } from "./generated/ManifestTypes"; +import { SearchBoxComponent } from "./components/SearchBox"; +import { ISearchBoxComponentProps } from "./components/Component.types"; + +export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutputs> { + context: ComponentFramework.Context<IInputs>; + notifyOutputChanged: () => void; + searchTextValue: string | null; + + constructor() { } + + /** + * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here. + * Data-set values are not initialized here, use updateView. + * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions. + * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface. + * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content. + */ + public init( context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void { + this.notifyOutputChanged = notifyOutputChanged; + } + + /** + * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc. + * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions + */ + public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { + + const props: ISearchBoxComponentProps = { + onChanged: this.onChange, + themeJSON: context.parameters.Theme.raw ?? '', + ariaLabel: context.parameters?.AccessibilityLabel.raw ?? '' + }; + + return React.createElement(SearchBoxComponent, + props); + } + + /** + * Called when a change is detected from the control. Updates the searchTextValue variable that is assigned to the output SearchText. + * @param newValue a string returned as the input search text + */ + private onChange = (newValue: string | undefined): void => { + this.searchTextValue = newValue ?? null; + this.notifyOutputChanged(); + } + + /** + * It is called by the framework prior to a control receiving new data. + * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output” + */ + public getOutputs(): IOutputs { + return { + SearchText: this.searchTextValue + } as IOutputs; + } + + /** + * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup. + * i.e. cancelling any pending remote calls, removing listeners, etc. + */ + public destroy(): void {} +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
---|---|---|---|---|---|---|---|---|---|
SearchBox | +
+
+ |
+ 70% | +7/10 | +56.25% | +9/16 | +50% | +3/6 | +70% | +7/10 | +
SearchBox/components | +
+
+ |
+ 90.9% | +10/11 | +16.66% | +1/6 | +66.66% | +2/3 | +90.9% | +10/11 | +