Beta (#232)

* feat: searchbox-defaultvalue-set-option (#230) * feat: searchbox-defaultvalue-set-option * fixes calendar language support (#231)
microsoft · Apr 13, 2023 · f8088b0 · f8088b0
1 parent be35cf6
commit f8088b0
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 21 deletions.
diff --git a/Calendar/Calendar/loc/Readme.md b/Calendar/Calendar/loc/Readme.md
@@ -6,7 +6,6 @@ All the translation files are borrowed from contributions(Link at the bottom) an
  - Galician(gl-ES)
  - Hindi (hi-IN)
  - Croatian(hr-HR)
- - Hungarian(hu-HU)
  - Indonesian(id-ID)
  - Latvian(lv-LV)
  - Korean(ko-KR)
@@ -23,4 +22,6 @@ Inorder to include the above mentioned language file(s), headover to [loc folder
 
 Note: Only languages which are supported by [Language function](https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-language) in PowerApps are considered, i.e. [IETF BCP-47 language tag](https://tools.ietf.org/html/bcp47) format.
 
-Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc 
+Important : Please submit a Pull Reuqest pointing to beta branch.
+
+Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc
diff --git a/Calendar/Calendar/loc/da-dk.ts b/Calendar/Calendar/loc/da-dk.ts
@@ -3,33 +3,33 @@ define([], () => {
         DatePickerMonthLongJanuary: 'Januar',
         DatePickerMonthShortJanuary: 'Jan',
         DatePickerMonthLongFebruary: 'Februar',
-        DatePickerMonthShortFebruary: 'Februar',
+        DatePickerMonthShortFebruary: 'Feb',
         DatePickerMonthLongMarch: 'Marts',
         DatePickerMonthShortMarch: 'Mar',
         DatePickerMonthLongApril: 'April',
         DatePickerMonthShortApril: 'Apr',
-        DatePickerMonthLongMay: 'Kan',
-        DatePickerMonthShortMay: 'Kan',
+        DatePickerMonthLongMay: 'Maj',
+        DatePickerMonthShortMay: 'Maj',
         DatePickerMonthLongJune: 'Juni',
-        DatePickerMonthShortJune: 'Juni',
+        DatePickerMonthShortJune: 'Jun',
         DatePickerMonthLongJuly: 'Juli',
         DatePickerMonthShortJuly: 'Jul',
         DatePickerMonthLongAugust: 'August',
-        DatePickerMonthShortAugust: 'August',
+        DatePickerMonthShortAugust: 'Aug',
         DatePickerMonthLongSeptember: 'September',
-        DatePickerMonthShortSeptember: 'Syv',
+        DatePickerMonthShortSeptember: 'Sep',
         DatePickerMonthLongOctober: 'Oktober',
-        DatePickerMonthShortOctober: 'Oktober',
+        DatePickerMonthShortOctober: 'Okt',
         DatePickerMonthLongNovember: 'November',
-        DatePickerMonthShortNovember: 'November',
+        DatePickerMonthShortNovember: 'Nov',
         DatePickerMonthLongDecember: 'December',
-        DatePickerMonthShortDecember: 'December',
+        DatePickerMonthShortDecember: 'Dec',
         DatePickerDayLongSunday: 'Søndag',
-        DatePickerDayShortSunday: 'Sun',
+        DatePickerDayShortSunday: 'Søn',
         DatePickerDayLongMonday: 'Mandag',
-        DatePickerDayShortMonday: 'Min',
+        DatePickerDayShortMonday: 'Man',
         DatePickerDayLongTuesday: 'Tirsdag',
-        DatePickerDayShortTuesday: 'Tue',
+        DatePickerDayShortTuesday: 'Tir',
         DatePickerDayLongWednesday: 'Onsdag',
         DatePickerDayShortWednesday: 'Ons',
         DatePickerDayLongThursday: 'Torsdag',

diff --git a/Calendar/Calendar/loc/hu-hu.ts b/Calendar/Calendar/loc/hu-hu.ts
@@ -0,0 +1,53 @@
+define([], () => {
+    return {
+        DatePickerMonthLongJanuary: 'Január',
+        DatePickerMonthShortJanuary: 'Jan',
+        DatePickerMonthLongFebruary: 'Február',
+        DatePickerMonthShortFebruary: 'Feb',
+        DatePickerMonthLongMarch: 'Március',
+        DatePickerMonthShortMarch: 'Már',
+        DatePickerMonthLongApril: 'Április',
+        DatePickerMonthShortApril: 'Ápr',
+        DatePickerMonthLongMay: 'Május',
+        DatePickerMonthShortMay: 'Máj',
+        DatePickerMonthLongJune: 'Június',
+        DatePickerMonthShortJune: 'Jún',
+        DatePickerMonthLongJuly: 'Július',
+        DatePickerMonthShortJuly: 'Júl',
+        DatePickerMonthLongAugust: 'Augusztus',
+        DatePickerMonthShortAugust: 'Aug',
+        DatePickerMonthLongSeptember: 'Szeptember',
+        DatePickerMonthShortSeptember: 'Szept',
+        DatePickerMonthLongOctober: 'Október',
+        DatePickerMonthShortOctober: 'Okt',
+        DatePickerMonthLongNovember: 'November',
+        DatePickerMonthShortNovember: 'Nov',
+        DatePickerMonthLongDecember: 'December',
+        DatePickerMonthShortDecember: 'Dec',
+        DatePickerDayLongSunday: 'Vasárnap',
+        DatePickerDayShortSunday: 'Vas',
+        DatePickerDayLongMonday: 'Hétfő',
+        DatePickerDayShortMonday: 'Hé',
+        DatePickerDayLongTuesday: 'Kedd',
+        DatePickerDayShortTuesday: 'Ke',
+        DatePickerDayLongWednesday: 'Szerda',
+        DatePickerDayShortWednesday: 'Sze',
+        DatePickerDayLongThursday: 'Csütörtök',
+        DatePickerDayShortThursday: 'Csü',
+        DatePickerDayLongFriday: 'Péntek',
+        DatePickerDayShortFriday: 'Pé',
+        DatePickerDayLongSaturday: 'Szombat',
+        DatePickerDayShortSaturday: 'Szo',
+        DatePickerGoToToday: 'Ma',
+        DatePickerIsRequiredErrorMessage: '',
+        DatePickerInvalidInputErrorMessage: '',
+        DatePickerIsOutOfBoundsErrorMessage: '',
+        DateTimePickerDate: 'Dátum',
+        DateTimePickerTime: 'Idő',
+        DateTimePickerTimeSeparator: ':',
+        DateTimePickerHourValueInvalid: 'Helytelen óra érték',
+        DateTimePickerMinuteValueInvalid: 'Helytelen perc érték',
+        DateTimePickerSecondValueInvalid: 'Helytelen másodperc érték',
+        DateTimePickerTextErrorMessage: 'Helyes dátum értéket adjon meg',
+    };
+});
diff --git a/SearchBox/README.md b/SearchBox/README.md
@@ -8,7 +8,7 @@ This code component provides a wrapper around the [Fluent UI SearchBox](https://
 
 ## Properties
 
-- **Search Text** - The action items to render. The first item is considered the root item.
+- **Search Text** - Use this property to get or set value for the control.
 
 - **Icon Name** - Name of the Fluent UI icon (see [Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)).
 

diff --git a/SearchBox/SearchBox/ControlManifest.Input.xml b/SearchBox/SearchBox/ControlManifest.Input.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
   <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox_desc" control-type="virtual">
-    <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="output" hidden="true" />
+    <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="bound"/>
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
     <property name="IconName" display-name-key="IconName" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />

diff --git a/SearchBox/SearchBox/__mocks__/mock-parameters.ts b/SearchBox/SearchBox/__mocks__/mock-parameters.ts
@@ -13,5 +13,6 @@ export function getMockParameters(): IInputs {
         DisableAnimation: new MockTwoOptionsProperty(),
         InputEvent: new MockStringProperty(),
         DelayOutput: new MockTwoOptionsProperty(),
+        SearchText: new MockStringProperty(),
     };
 }
diff --git a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
@@ -12,6 +12,7 @@ exports[`SearchBox renders 1`] = `
   setFocus=""
   themeJSON=""
   underLined={false}
+  value=""
   width={-1}
 />
 `;
@@ -155,7 +156,7 @@ exports[`SearchBox theme 1`] = `
             display: none;
           }
       disabled={false}
-      id="SearchBox6"
+      id="SearchBox3"
       onBlur={[Function]}
       onChange={[Function]}
       onInput={[Function]}

diff --git a/SearchBox/SearchBox/components/Component.types.ts b/SearchBox/SearchBox/components/Component.types.ts
@@ -10,4 +10,5 @@ export interface ISearchBoxComponentProps {
     disabled?: boolean;
     disableAnimation?: boolean;
     setFocus?: string;
+    value?: string;
 }
diff --git a/SearchBox/SearchBox/components/SearchBox.tsx b/SearchBox/SearchBox/components/SearchBox.tsx
@@ -3,8 +3,17 @@ 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 } =
-        props;
+    const {
+        onChanged,
+        themeJSON,
+        ariaLabel,
+        placeholderText,
+        underLined,
+        disabled,
+        disableAnimation,
+        setFocus,
+        value,
+    } = props;
     const filterIcon: IIconProps = { iconName: props.iconName };
     const rootRef = React.useRef<HTMLDivElement>(null);
     const theme = React.useMemo(() => {
@@ -44,6 +53,7 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
                 disableAnimation={disableAnimation}
                 className={wrapperClass}
                 ref={rootRef}
+                value={value}
             />
         </ThemeProvider>
     );

diff --git a/SearchBox/SearchBox/index.ts b/SearchBox/SearchBox/index.ts
@@ -46,11 +46,10 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
         this.delayOutput = context.parameters.DelayOutput.raw;
         const inputEvent = this.context.parameters.InputEvent.raw;
         const eventChanged = inputEvent && this.setFocus !== inputEvent;
-
+        this.searchTextValue = context.parameters.SearchText.raw ?? '';
         if (eventChanged && inputEvent.startsWith(InputEvents.SetFocus)) {
             this.setFocus = inputEvent;
         }
-
         const props: ISearchBoxComponentProps = {
             onChanged: this.onChange,
             themeJSON: context.parameters.Theme.raw ?? '',
@@ -63,6 +62,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
             width: allocatedWidth,
             height: allocatedHeight,
             setFocus: this.setFocus,
+            value: this.searchTextValue,
         };
 
         return React.createElement(SearchBoxComponent, props);

diff --git a/SearchBox/SearchBox/strings/SearchBox.1033.resx b/SearchBox/SearchBox/strings/SearchBox.1033.resx
@@ -148,4 +148,10 @@
     <data name="SearchBox_desc" xml:space="preserve">
         <value>A component to get search text as input</value>
     </data>
+    <data name="SearchBox_SearchText" xml:space="preserve">
+        <value>Search text</value>
+    </data>
+    <data name="SearchBox_SearchText_Desc" xml:space="preserve">
+        <value>Represents the default as well as the current value of search box</value>
+    </data>
 </root>