react-input-material 0.0.403 → 0.0.406

package/components/GenericInput.tsx

@@ -32,6 +32,7 @@ import {
     MouseEvent as ReactMouseEvent,
     MutableRefObject,
     ReactElement,
+    ReactNode,
     Suspense,
     useEffect,
     useImperativeHandle,
@@ -123,6 +124,7 @@ import {
     InputState as State,
     InputModel as Model,
     NativeInputType,
+    NormalizedSelection,
     Renderable,
     GenericInputComponent,
     InputTablePosition as TablePosition,
@@ -782,7 +784,7 @@ export const GenericInputInner = function<Type = unknown>(
         const keysSorted:Array<keyof typeof indicator> =
             ['start', 'end']
 
-        let value:string = properties.representation
+        let value:string = properties.representation as string
         for (const type of keysSorted)
             value = (
                 value.substring(0, cursor[type]) +
@@ -887,9 +889,13 @@ export const GenericInputInner = function<Type = unknown>(
                 (event as unknown as KeyboardEvent)?.key?.length === 1 ?
                     1 :
                     (event as unknown as KeyboardEvent)?.key === 'Backspace' &&
-                    properties.representation.length > selectionStart ?
+                    (
+                        (properties.representation as string).length >
+                        selectionStart
+                    ) ?
                         -1 :
                         0
+
             setCursor({end: selectionEnd + add, start: selectionStart + add})
         }
     }
@@ -1102,7 +1108,7 @@ export const GenericInputInner = function<Type = unknown>(
 
         if (!useSuggestions || properties.suggestSelection) {
             const candidate:null|Type = getValueFromSelection<Type>(
-                properties.representation, normalizedSelection
+                properties.representation, normalizedSelection!
             )
             if (candidate === null) {
                 properties.value = parseValue<Type>(
@@ -1422,7 +1428,7 @@ export const GenericInputInner = function<Type = unknown>(
 
                 if (selectedIndex === -1) {
                     const result:null|Type = getValueFromSelection<Type>(
-                        properties.representation, normalizeSelection(results)
+                        properties.representation, normalizeSelection(results)!
                     )
 
                     if (result !== null || properties.searchSelection)
@@ -1447,7 +1453,7 @@ export const GenericInputInner = function<Type = unknown>(
             ) = properties.suggestionCreator({
                 abortController,
                 properties,
-                query: properties.representation
+                query: properties.representation as string
             })
 
             if ((result as Promise<Properties['selection']>)?.then) {
@@ -1489,7 +1495,7 @@ export const GenericInputInner = function<Type = unknown>(
                     consolidation.
                 */
                 const result:null|Type = getValueFromSelection<Type>(
-                    properties.representation, normalizedSelection
+                    properties.representation, normalizedSelection!
                 )
 
                 if (result !== null || properties.searchSelection)
@@ -1721,11 +1727,10 @@ export const GenericInputInner = function<Type = unknown>(
         selection =
             givenProperties.selection || givenProperties.model?.selection
 
-    const normalizedSelection:(
-        SelectProps['options']|Array<{label?:string;value:unknown}>|undefined
-    ) = selection instanceof AbortController ?
-        [] :
-        normalizeSelection(selection, givenProperties.labels)
+    const normalizedSelection:NormalizedSelection|undefined =
+        selection instanceof AbortController ?
+            [] :
+            normalizeSelection(selection, givenProperties.labels)
     const [suggestionLabels, suggestionValues] =
         selection instanceof AbortController ?
             [[], []] :
@@ -1924,7 +1929,7 @@ export const GenericInputInner = function<Type = unknown>(
     )
 
     const currentRenderableSuggestions:Array<ReactElement> = []
-    const currentSuggestionLabels:Array<string> = []
+    const currentSuggestionLabels:Array<ReactNode|string> = []
     const currentSuggestionValues:Array<unknown> = []
     const useSuggestions = Boolean(
         properties.suggestionCreator ||
@@ -1940,9 +1945,9 @@ export const GenericInputInner = function<Type = unknown>(
             if (Tools.isFunction(properties.children)) {
                 const result:null|ReactElement = properties.children({
                     index,
-                    normalizedSelection,
+                    normalizedSelection: normalizedSelection!,
                     properties,
-                    query: properties.representation,
+                    query: properties.representation as string,
                     suggestion,
                     value: suggestionValues[index] as Type
                 })
@@ -1964,7 +1969,9 @@ export const GenericInputInner = function<Type = unknown>(
             } else if (
                 !properties.representation ||
                 properties.suggestionCreator ||
-                suggestionMatches(suggestion, properties.representation)
+                suggestionMatches(
+                    suggestion as string, properties.representation as string
+                )
             ) {
                 currentRenderableSuggestions.push(
                     <MenuItem
@@ -1975,7 +1982,9 @@ export const GenericInputInner = function<Type = unknown>(
                     >
                         {(Tools.stringMark(
                             suggestion,
-                            properties.representation?.split(' ') || '',
+                            (
+                                properties.representation as string
+                            )?.split(' ') || '',
                             (value:unknown):string =>
                                 `${value as string}`.toLowerCase(),
                             (foundWord:string):ReactElement =>
@@ -2004,6 +2013,47 @@ export const GenericInputInner = function<Type = unknown>(
         (Boolean(normalizedSelection) || Boolean(properties.labels)) &&
         !useSuggestions
     /// endregion
+    /// region determine type specific constraints
+    const constraints:Mapping<unknown> = {}
+    if (properties.type === 'number') {
+        constraints.step = properties.step
+
+        if (properties.maximum !== Infinity)
+            constraints.max = properties.maximum
+        if (properties.minimum !== -Infinity)
+            constraints.min = properties.minimum
+    } else if (properties.type === 'string') {
+        if (
+            properties.maximumLength >= 0 &&
+            properties.maximumLength !== Infinity
+        )
+            constraints.maxLength = properties.maximumLength
+        if (properties.minimumLength > 0)
+            constraints.minLength = properties.minimumLength
+
+        if (properties.editor !== 'plain')
+            constraints.rows = properties.rows
+    } else if (['date', 'datetime-local', 'time'].includes(properties.type)) {
+        constraints.step = properties.step
+
+        if (properties.maximum !== Infinity)
+            constraints.max = formatValue<Type>(
+                properties,
+                properties.maximum as
+                    unknown as
+                    Type,
+                transformer
+            )
+        if (properties.minimum !== -Infinity)
+            constraints.min = formatValue<Type>(
+                properties,
+                properties.minimum as
+                    unknown as
+                    Type,
+                transformer
+            )
+    }
+    /// endregion
     /// region main markup
     return <WrapConfigurations
         strict={GenericInput.strict}
@@ -2131,7 +2181,10 @@ export const GenericInputInner = function<Type = unknown>(
                                                 useWorker: false
                                             }}
                                             theme="github"
-                                            value={properties.representation}
+                                            value={
+                                                properties.representation as
+                                                    string
+                                            }
                                             {...properties.inputProperties as
                                                 CodeEditorProps
                                             }
@@ -2160,12 +2213,16 @@ export const GenericInputInner = function<Type = unknown>(
                                         ref={setRichTextEditorReference}
                                         textareaName={properties.name}
                                         tinymceScriptSrc={
-                                            (TINYMCE_DEFAULT_OPTIONS.base_url as
-                                                string
+                                            (
+                                                TINYMCE_DEFAULT_OPTIONS
+                                                    .base_url as
+                                                        string
                                             ) +
                                             'tinymce.min.js'
                                         }
-                                        value={properties.representation}
+                                        value={
+                                            properties.representation as string
+                                        }
                                         {...properties.inputProperties as
                                             RichTextEditorProps
                                         }
@@ -2268,47 +2325,7 @@ export const GenericInputInner = function<Type = unknown>(
                     <TextField
                         {...genericProperties as TextFieldProps}
                         {...materialProperties as TextFieldProps}
-                        {...(properties.type === 'number' ?
-                            {
-                                max: properties.maximum,
-                                min: properties.minimum,
-                                step: properties.step
-                            } :
-                            properties.type === 'string' ?
-                                {
-                                    maxLength: properties.maximumLength >= 0 ?
-                                        properties.maximumLength :
-                                        Infinity,
-                                    minLength: properties.minimumLength >= 0 ?
-                                        properties.minimumLength :
-                                        0,
-                                    ...(properties.editor === 'plain' ?
-                                        {} :
-                                        {rows: properties.rows}
-                                    )
-                                } :
-                                ['date', 'datetime-local', 'time'].includes(
-                                    properties.type
-                                ) ?
-                                    {
-                                        max: formatValue<Type>(
-                                            properties,
-                                            properties.maximum as
-                                                unknown as
-                                                Type,
-                                            transformer
-                                        ),
-                                        min: formatValue<Type>(
-                                            properties,
-                                            properties.minimum as
-                                                unknown as
-                                                Type,
-                                            transformer
-                                        ),
-                                        step: properties.step
-                                    } :
-                                    {}
-                        )}
+                        {...constraints}
                         align={properties.align}
                         characterCount={
                             typeof properties.maximumLength === 'number' &&
@@ -2338,7 +2355,7 @@ export const GenericInputInner = function<Type = unknown>(
                             properties.trailingIcon
                         ))}
                         type={determineNativeType(properties)}
-                        value={properties.representation}
+                        value={properties.representation as string}
                         {...properties.inputProperties as TextFieldProps}
                     />
                 </div>,
@@ -2454,34 +2471,21 @@ GenericInput.transformer = {
         type: 'text'
     },
     date: {
-        format: {
-            final: {transform: (value:number):string => {
-                value = typeof value === 'number' ? value : parseFloat(value)
-
-                if (value === Infinity)
-                    return 'infinitely far in the future'
-                if (value === -Infinity)
-                    return 'infinitely early in the past'
-                if (!isFinite(value))
-                    return ''
+        format: {final: {transform: (value:number):string => {
+            value = typeof value === 'number' ? value : parseFloat(value)
+
+            if (value === Infinity)
+                return 'Infinitely far in the future'
+            if (value === -Infinity)
+                return 'Infinitely early in the past'
+            if (!isFinite(value))
+                return ''
 
-                const formattedValue:string =
-                    (new Date(Math.round(value * 1000))).toISOString()
+            const formattedValue:string =
+                (new Date(Math.round(value * 1000))).toISOString()
 
-                return formattedValue.substring(0, formattedValue.indexOf('T'))
-            }},
-            intermediate: {transform: (
-                value:number,
-                configuration:DefaultProperties<number>,
-                transformer:InputDataTransformation
-            ):string =>
-                transformer.date.format?.final.transform ?
-                    transformer.date.format.final.transform(
-                        value, configuration, transformer
-                    ) :
-                    `${value}`
-            }
-        },
+            return formattedValue.substring(0, formattedValue.indexOf('T'))
+        }}},
         parse: (value:Date|number|string):number =>
             typeof value === 'number' ?
                 value :
@@ -2493,34 +2497,21 @@ GenericInput.transformer = {
     },
     // TODO respect local to utc conversion.
     'datetime-local': {
-        format: {
-            final: {transform: (value:number):string => {
-                value = typeof value === 'number' ? value : parseFloat(value)
-
-                if (value === Infinity)
-                    return 'infinitely far in the future'
-                if (value === -Infinity)
-                    return 'infinitely early in the past'
-                if (!isFinite(value))
-                    return ''
+        format: {final: {transform: (value:number):string => {
+            value = typeof value === 'number' ? value : parseFloat(value)
+
+            if (value === Infinity)
+                return 'Infinitely far in the future'
+            if (value === -Infinity)
+                return 'Infinitely early in the past'
+            if (!isFinite(value))
+                return ''
 
-                const formattedValue:string =
-                    (new Date(Math.round(value * 1000))).toISOString()
+            const formattedValue:string =
+                (new Date(Math.round(value * 1000))).toISOString()
 
-                return formattedValue.substring(0, formattedValue.length - 1)
-            }},
-            intermediate: {transform: (
-                value:number,
-                configuration:DefaultProperties<number>,
-                transformer:InputDataTransformation
-            ):string =>
-                transformer['datetime-local'].format?.final.transform ?
-                    transformer['datetime-local'].format.final.transform(
-                        value, configuration, transformer
-                    ) :
-                    `${value}`
-            }
-        },
+            return formattedValue.substring(0, formattedValue.length - 1)
+        }}},
         parse: (
             value:number|string,
             configuration:DefaultProperties<number>,
@@ -2531,49 +2522,57 @@ GenericInput.transformer = {
                 Date.parse(value as string) / 1000
     },
     time: {
-        format: {
-            final: {transform: (value:number):string => {
-                value = typeof value === 'number' ? value : parseFloat(value)
+        format: {final: {transform: (
+            value:number, configuration:DefaultProperties<number>
+        ):string => {
+            value = typeof value === 'number' ? value : parseFloat(value)
+
+            if (value === Infinity)
+                return 'Infinitely far in the future'
+            if (value === -Infinity)
+                return 'Infinitely early in the past'
+            if (!isFinite(value))
+                return ''
 
-                if (value === Infinity)
-                    return 'infinitely far in the future'
-                if (value === -Infinity)
-                    return 'infinitely early in the past'
-                if (!isFinite(value))
-                    return ''
+            let formattedValue:string =
+                (new Date(Math.round(value * 1000))).toISOString()
 
-                const formattedValue:string =
-                    (new Date(Math.round(value * 1000))).toISOString()
+            formattedValue = formattedValue.substring(
+                formattedValue.indexOf('T') + 1, formattedValue.length - 1
+            )
 
+            if (
+                configuration.step &&
+                configuration.step >= 60 &&
+                (configuration.step % 60) === 0
+            )
                 return formattedValue.substring(
-                    formattedValue.indexOf('T') + 1, formattedValue.length - 1
+                    0, formattedValue.lastIndexOf(':')
                 )
-            }},
-            intermediate: {transform: (
-                value:number,
-                configuration:DefaultProperties<number>,
-                transformer:InputDataTransformation
-            ):string =>
-                transformer.time.format?.final.transform ?
-                    transformer.time.format.final.transform(
-                        value, configuration, transformer
-                    ) :
-                    `${value}`
-            }
-        },
+
+            return formattedValue
+        }}},
         parse: (value:Date|number|string):number =>
             typeof value === 'number' ?
                 value :
                 value instanceof Date ?
                     value.getTime() / 1000 :
-                    parseInt(value.replace(
-                        /^([0-9]{2}):([0-9]{2})$/,
-                        (_:string, hour:string, minute:string):string =>
+                    parseFloat(value.replace(
+                        /^([0-9]{2}):([0-9]{2})(:([0-9]{2}(\.[0-9]+)?))?$/,
+                        (
+                            _match:string,
+                            hour:string,
+                            minute:string,
+                            secondsSuffix?:string,
+                            seconds?:string,
+                            _millisecondsSuffix?:string
+                        ):string =>
                             String(
                                 parseInt(hour) *
                                 60 ** 2 +
                                 parseInt(minute) *
-                                60
+                                60 +
+                                (secondsSuffix ? parseFloat(seconds!) : 0)
                             )
                     ))
     },