react-input-material 0.0.402 → 0.0.405

package/components/GenericInput.tsx

@@ -1270,9 +1270,25 @@ export const GenericInputInner = function<Type = unknown>(
                 (eventOrValue as GenericEvent).target as HTMLInputElement ||
                 (eventOrValue as GenericEvent).detail as HTMLInputElement
             if (target)
-                properties.value = typeof target.value === 'undefined' ?
-                    null :
-                    target.value as unknown as Type
+                /*
+                    NOTE: Enhanced select fields (menus) do not provide the
+                    selected value but index.
+                */
+                if (typeof (
+                    target as unknown as {index:number}
+                ).index === 'number') {
+                    const index:number = (
+                        target as unknown as {index:number}
+                    ).index - (properties.placeholder ? 1 : 0)
+                    properties.value =
+                        index >= 0 &&
+                        index < suggestionValues.length ?
+                            suggestionValues[index] as Type :
+                            null
+                } else
+                    properties.value = typeof target.value === 'undefined' ?
+                        null :
+                        target.value as unknown as Type
             else
                 properties.value = eventOrValue as null|Type
         } else
@@ -1957,7 +1973,7 @@ export const GenericInputInner = function<Type = unknown>(
                         ]}
                         key={index}
                     >
-                        {Tools.stringMark(
+                        {(Tools.stringMark(
                             suggestion,
                             properties.representation?.split(' ') || '',
                             (value:unknown):string =>
@@ -1970,7 +1986,11 @@ export const GenericInputInner = function<Type = unknown>(
                                     {foundWord}
                                 </span>,
                             null
-                        ) as Array<ReactElement>|string}
+                        ) as Array<ReactElement|string>).map((
+                            item:ReactElement|string, index:number
+                        ):ReactElement =>
+                            <span key={index}>{item}</span>
+                        )}
                     </MenuItem>
                 )
                 currentSuggestionLabels.push(suggestion)
@@ -1984,6 +2004,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}
@@ -2248,47 +2309,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' &&
@@ -2434,34 +2455,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 :
@@ -2473,34 +2481,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>,
@@ -2511,49 +2506,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)
                             )
                     ))
     },