react-input-material 0.0.376 → 0.0.379

package/components/GenericInput.tsx

@@ -19,9 +19,8 @@
 // region imports
 import {Ace as CodeEditorNamespace} from 'ace-builds'
 import Tools, {optionalRequire} from 'clientnode'
-import {EvaluationResult} from 'clientnode/type'
+import {EvaluationResult, Mapping} from 'clientnode/type'
 import {
-    ComponentType,
     FocusEvent as ReactFocusEvent,
     forwardRef,
     ForwardedRef,
@@ -39,8 +38,11 @@ import {
 } from 'react'
 import CodeEditorType, {IAceEditorProps as CodeEditorProps} from 'react-ace'
 import {TransitionProps} from 'react-transition-group/Transition'
+import UseAnimationsType from 'react-useanimations'
+import LockAnimation from 'react-useanimations/lib/lock'
+import PlusToXAnimation from 'react-useanimations/lib/plusToX'
 import {
-    Editor as RichTextEditor, RawEditorSettings as RawTinyMCEEditorSettings
+    Editor as RichTextEditor, RawEditorSettings as RawTinyMCEEditorOptions
 } from 'tinymce'
 import {MDCMenuFoundation} from '@material/menu'
 import {MDCSelectFoundation} from '@material/select'
@@ -78,7 +80,7 @@ import {
     genericInputSuggestionsPendingClassName
 } from './GenericInput.module'
  */
-import styles from './GenericInput.module'
+import cssClassNames from './GenericInput.module'
 import WrapConfigurations from './WrapConfigurations'
 import WrapTooltip from './WrapTooltip'
 import {
@@ -126,30 +128,33 @@ import {
 declare const TARGET_TECHNOLOGY:string
 const isBrowser =
     !(TARGET_TECHNOLOGY === 'node' || typeof window === undefined)
-const UseAnimations:any|null =
+const UseAnimations:null|typeof Dummy|typeof UseAnimationsType =
     isBrowser ? optionalRequire('react-useanimations') : null
-const lock:any|null = isBrowser ?
+const lockAnimation:null|typeof LockAnimation = isBrowser ?
     optionalRequire('react-useanimations/lib/lock') :
     null
-const plusToX:any|null = isBrowser ?
+const plusToXAnimation:null|typeof PlusToXAnimation = isBrowser ?
     optionalRequire('react-useanimations/lib/plusToX') :
     null
 // endregion
+const CSS_CLASS_NAMES:Mapping = cssClassNames as Mapping
 // region code editor configuration
 export const ACEEditorOptions = {
     basePath: '/node_modules/ace-builds/src-noconflict/',
     useWorker: false
 }
-const CodeEditor = lazy(async ():Promise<{default:ComponentType<any>}> => {
-    const {config} = await import('ace-builds')
-    for (const [name, value] of Object.entries(ACEEditorOptions))
-        config.set(name, value)
+const CodeEditor = lazy<typeof CodeEditorType>(
+    async ():Promise<{default:typeof CodeEditorType}> => {
+        const {config} = await import('ace-builds')
+        for (const [name, value] of Object.entries(ACEEditorOptions))
+            config.set(name, value)
 
-    return await import('react-ace')
-})
+        return await import('react-ace')
+    }
+)
 // endregion
 // region rich text editor configuration
-export type TinyMCEOptions = RawTinyMCEEditorSettings & {
+export interface TinyMCEOptions extends RawTinyMCEEditorOptions {
     selector?:undefined
     target?:undefined
 }
@@ -315,6 +320,7 @@ export function suggestionMatches(
     return false
 }
 // endregion
+/* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * Generic input wrapper component which automatically determines a useful
  * input field depending on given model specification.
@@ -342,6 +348,7 @@ export function suggestionMatches(
 export const GenericInputInner = function<Type = unknown>(
     props:Props<Type>, reference?:ForwardedRef<Adapter<Type>>
 ):ReactElement {
+/* eslint-enable jsdoc/require-description-complete-sentence */
     // region live-cycle
     /**
      * Is triggered immediate after a re-rendering. Re-stores cursor selection
@@ -358,7 +365,9 @@ export const GenericInputInner = function<Type = unknown>(
                     "editorState.selectionIsUnstable" is set to "true".
                 */
                 if (codeEditorReference.current?.editor?.selection) {
-                    codeEditorReference.current.editor.textInput.focus()
+                    (codeEditorReference.current.editor.textInput as
+                        HTMLInputElement
+                    ).focus()
                     setCodeEditorSelectionState(codeEditorReference.current)
 
                     if (editorState.selectionIsUnstable)
@@ -410,11 +419,14 @@ export const GenericInputInner = function<Type = unknown>(
                     in={!Tools.equals(properties.value, properties.default)}
                 >
                     {(
-                        UseAnimations === null ||
-                        (UseAnimations as typeof Dummy).isDummy
+                        UseAnimations &&
+                        !(UseAnimations as typeof Dummy).isDummy &&
+                        plusToXAnimation
                     ) ?
-                        <IconButton icon="clear"/> :
-                        <UseAnimations animation={plusToX} reverse={true}/>
+                        <UseAnimations
+                            animation={plusToXAnimation} reverse={true}
+                        /> :
+                        <IconButton icon="clear"/>
                     }
                 </GenericAnimate>,
                 onClick: (event:ReactMouseEvent):void => {
@@ -434,14 +446,16 @@ export const GenericInputInner = function<Type = unknown>(
             return useMemorizedValue(
                 {
                     icon: (
-                        UseAnimations === null ||
-                        (UseAnimations as typeof Dummy).isDummy
+                        UseAnimations &&
+                        !(UseAnimations as typeof Dummy).isDummy &&
+                        lockAnimation
                     ) ?
+                        <UseAnimations
+                            animation={lockAnimation}
+                            reverse={!properties.hidden}
+                        /> :
                         <IconButton
                             icon={properties.hidden ? 'lock_open' : 'lock'}
-                        /> :
-                        <UseAnimations
-                            animation={lock} reverse={!properties.hidden}
                         />,
                     onClick: (event:ReactMouseEvent):void => {
                         event.preventDefault()
@@ -450,6 +464,7 @@ export const GenericInputInner = function<Type = unknown>(
                             if (value === undefined)
                                 value = properties.hidden
                             properties.hidden = !value
+
                             onChange(event)
 
                             return properties.hidden
@@ -556,7 +571,7 @@ export const GenericInputInner = function<Type = unknown>(
      *
      * @returns Evaluated template or an empty string if something goes wrong.
      */
-    const renderMessage = (template?:any):string => {
+    const renderMessage = (template?:unknown):string => {
         if (typeof template === 'string') {
             const evaluated:EvaluationResult = Tools.stringEvaluate(
                 `\`${template}\``,
@@ -566,15 +581,19 @@ export const GenericInputInner = function<Type = unknown>(
                     ...properties
                 }
             )
+
             if (evaluated.error) {
                 console.warn(
                     'Given message template could not be proceed:',
                     evaluated.error
                 )
+
                 return ''
             }
+
             return evaluated.result
         }
+
         return ''
     }
     /**
@@ -1015,7 +1034,9 @@ export const GenericInputInner = function<Type = unknown>(
             properties.editorIsActive &&
             editorState.selectionIsUnstable
         ) {
-            codeEditorReference.current.editor.textInput.focus()
+            (codeEditorReference.current.editor.textInput as
+                HTMLInputElement
+            ).focus()
             setCodeEditorSelectionState(codeEditorReference.current)
             setEditorState({...editorState, selectionIsUnstable: false})
         }
@@ -1234,13 +1255,13 @@ export const GenericInputInner = function<Type = unknown>(
 
         let event:GenericEvent|undefined
         if (eventOrValue !== null && typeof eventOrValue === 'object') {
-            const target:any =
-                (eventOrValue as GenericEvent).target ||
-                (eventOrValue as GenericEvent).detail
+            const target:HTMLInputElement|null|undefined =
+                (eventOrValue as GenericEvent).target as HTMLInputElement ||
+                (eventOrValue as GenericEvent).detail as HTMLInputElement
             if (target)
                 properties.value = typeof target.value === 'undefined' ?
                     null :
-                    target.value
+                    target.value as unknown as Type
             else
                 properties.value = eventOrValue as null|Type
         } else
@@ -1340,14 +1361,11 @@ export const GenericInputInner = function<Type = unknown>(
             currentSuggestionLabels[selectedIndex] :
             typeof properties.value === 'string' ?
                 properties.value :
-                formatValue<Type>(
-                    properties, properties.value as null|Type, transformer
-                )
+                formatValue<Type>(properties, properties.value, transformer)
 
         if (!useSuggestions) {
-            properties.value = parseValue<Type>(
-                properties, properties.value as null|Type, transformer
-            )
+            properties.value =
+                parseValue<Type>(properties, properties.value, transformer)
 
             setHelper()
         } else if (properties.suggestionCreator) {
@@ -1905,9 +1923,9 @@ export const GenericInputInner = function<Type = unknown>(
                 if (result) {
                     currentRenderableSuggestions.push(
                         <MenuItem
-                            className={
-                                styles['generic-input__suggestions__suggestion']
-                            }
+                            className={CSS_CLASS_NAMES[
+                                'generic-input__suggestions__suggestion'
+                            ]}
                             key={index}
                         >
                             {result}
@@ -1923,9 +1941,9 @@ export const GenericInputInner = function<Type = unknown>(
             ) {
                 currentRenderableSuggestions.push(
                     <MenuItem
-                        className={
-                            styles['generic-input__suggestions__suggestion']
-                        }
+                        className={CSS_CLASS_NAMES[
+                            'generic-input__suggestions__suggestion'
+                        ]}
                         dangerouslySetInnerHTML={{
                             __html: Tools.stringMark(
                                 suggestion,
@@ -1933,10 +1951,10 @@ export const GenericInputInner = function<Type = unknown>(
                                 (value:unknown):string =>
                                     `${value as string}`.toLowerCase(),
                                 '<span class="' +
-                                (styles[
+                                CSS_CLASS_NAMES[
                                     'generic-input__suggestions__suggestion' +
                                     '__mark'
-                                ] as string) +
+                                ] +
                                 '">{1}</span>'
                             ) as string
                         }}
@@ -1961,9 +1979,11 @@ export const GenericInputInner = function<Type = unknown>(
         tooltip={properties.tooltip}
     >
         <div
-            className={[styles['generic-input']]
+            className={[CSS_CLASS_NAMES['generic-input']]
                 .concat(
-                    isAdvancedEditor ? styles['generic-input--custom'] : [],
+                    isAdvancedEditor ?
+                        CSS_CLASS_NAMES['generic-input--custom'] :
+                        [],
                     properties.className ?? []
                 )
                 .join(' ')
@@ -2010,7 +2030,9 @@ export const GenericInputInner = function<Type = unknown>(
                     >
                         <label>
                             <span className={
-                                [styles['generic-input__editor__label']]
+                                [CSS_CLASS_NAMES[
+                                    'generic-input__editor__label'
+                                ]]
                                     .concat(
                                         'mdc-floating-label',
                                         'mdc-floating-label--float-above'
@@ -2057,7 +2079,13 @@ export const GenericInputInner = function<Type = unknown>(
                                                 'javascript'
                                             }
                                             name={properties.name}
-                                            onChange={onChangeValue}
+                                            onChange={onChangeValue as
+                                                unknown as
+                                                (
+                                                    _value:string,
+                                                    _event?:unknown
+                                                ) => void
+                                            }
                                             onCursorChange={onSelectionChange}
                                             onSelectionChange={
                                                 onSelectionChange
@@ -2142,18 +2170,14 @@ export const GenericInputInner = function<Type = unknown>(
                                 <MenuSurface
                                     anchorCorner="bottomLeft"
                                     className={
-                                        (
-                                            styles[
-                                                'generic-input__suggestions'
-                                            ] as string
-                                        ) +
+                                        CSS_CLASS_NAMES[
+                                            'generic-input__suggestions'
+                                        ] +
                                         ' ' +
-                                        (
-                                            styles[
-                                                'generic-input__suggestions' +
-                                                '--pending'
-                                            ] as string
-                                        )
+                                        CSS_CLASS_NAMES[
+                                            'generic-input__suggestions' +
+                                            '--pending'
+                                        ]
                                     }
                                     open={true}
                                 >
@@ -2165,9 +2189,9 @@ export const GenericInputInner = function<Type = unknown>(
                                         suggestionMenuAPIReference.current =
                                             instance
                                     }}
-                                    className={
-                                        styles['generic-input__suggestions']
-                                    }
+                                    className={CSS_CLASS_NAMES[
+                                        'generic-input__suggestions'
+                                    ]}
                                     focusOnOpen={false}
                                     foundationRef={
                                         suggestionMenuFoundationReference

package/components/Inputs.d.ts

@@ -11,7 +11,7 @@ import { InputProps, InputsAdapter as Adapter, InputsComponent, InputsProperties
  * @returns React elements.
  */
 export declare const InputsInner: {
-    <T = unknown, P extends InputsPropertiesItem<T> = InputProps<T>, State = Mapping<unknown>>(props: InputsProps<T, P>, reference?: ForwardedRef<Adapter<T, P>> | undefined): ReactElement;
+    <T = unknown, P extends InputsPropertiesItem<T, unknown> = InputProps<T>, State = Mapping<unknown>>(props: InputsProps<T, P>, reference?: ForwardedRef<Adapter<T, P>> | undefined): ReactElement;
     displayName: string;
 };
 /**