Add Number field to custom edit panels #1496 [skip-ci]

CHANGELOG.md

@@ -36,6 +36,7 @@ Sjekk ut [release notes](./releasenotes/1.9.0.md) for høydepunkter og mer detal
 - Standard forhåndsvisning for migrerte tiltak (Tiltakshåndtering) er nå satt til 'Ingen forhåndsvisning' [#1480](https://github.com/Puzzlepart/prosjektportalen365/issues/1480)
 - Mulighet for å skru på/av informasjonsmelding for dynamisk hjemmeside, standard av [#1484](https://github.com/Puzzlepart/prosjektportalen365/issues/1484)
 - Tidslinjeliste baserer seg nå på område-id for å hente tidslinjeelementer, dette for å sikre at elementene hentes og vises riktig [#1477](https://github.com/Puzzlepart/prosjektportalen365/issues/1477)
+- Støtte for tallfelt i redigeringspaneler for prosjektstatus, prosjektinformasjon og tidslinje-liste [#1496](https://github.com/Puzzlepart/prosjektportalen365/issues/1496)
 
 ---
 

SharePointFramework/shared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Number.tsx

@@ -0,0 +1,25 @@
+import { Input } from '@fluentui/react-components'
+import strings from 'SharedLibraryStrings'
+import React from 'react'
+import { FieldContainer } from '../../../FieldContainer'
+import { useCustomEditPanelContext } from '../../context'
+import { FieldElementComponent } from './types'
+
+export const Number: FieldElementComponent = ({ field }) => {
+  const context = useCustomEditPanelContext()
+  return (
+    <FieldContainer
+      iconName='TextNumberFormat'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
+      <Input
+        type='number'
+        defaultValue={context.model.get<string>(field)}
+        onChange={(_, data) => context.model.set(field, data.value)}
+        placeholder={strings.Placeholder.NumberField}
+      />
+    </FieldContainer>
+  )
+}

SharePointFramework/shared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/useFieldElements.tsx

@@ -13,6 +13,7 @@ import { URL } from './URL'
 import { User } from './User'
 import { UserMulti } from './UserMulti'
 import { Currency } from './Currency'
+import { Number } from './Number'
 
 /**
  * Hook for field elements of `CustomEditPanel` component. This hook is used to render field elements
@@ -31,6 +32,7 @@ import { Currency } from './Currency'
  * - `TaxonomyFieldTypeMulti`
  * - `Lookup`
  * - `Currency`
+ * - `Number`
  */
 export function useFieldElements() {
   const fieldElements: Record<string, (field: EditableSPField) => JSX.Element> = {
@@ -46,7 +48,8 @@ export function useFieldElements() {
     TaxonomyFieldType: (field) => <TaxonomyFieldType field={field} />,
     TaxonomyFieldTypeMulti: (field) => <TaxonomyFieldTypeMulti field={field} />,
     Lookup: (field) => <Lookup field={field} />,
-    Currency: (field) => <Currency field={field} />
+    Currency: (field) => <Currency field={field} />,
+    Number: (field) => <Number field={field} />
   }
 
   /**