fix: convert to Typescript

BREAKING CHANGE: remove render prop from Liform and LiformApi

Author: ph-fritsche

src/DefaultTheme/Array/ArrayWidget.jsx renamed to src/DefaultTheme/Array/ArrayWidget.tsx

@@ -1,20 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types'
+import React, { ComponentProps } from 'react'
 import { FieldArray as FinalFieldArray } from 'react-final-form-arrays'
 import { Lifield, finalizeName, liformizeName } from '../..'
-import { Errors } from '../shared';
-import { SchemaProp } from '../../schema';
-import { LiformContextProp } from '../../form';
+import { Errors } from '../shared'
+import { LifieldWidgetProps } from '../../types'
 
-export const ArrayWidget = props => {
-    const {
+export function ArrayWidget(
+    {
         liform,
         name,
-        schema = true,
+        schema: schemaProp = true,
         ...others
-    } = props
-
+    }: ComponentProps<typeof Lifield> & LifieldWidgetProps,
+): React.ReactElement {
     const finalName = finalizeName(name)
+    const schema = typeof schemaProp === 'object' ? schemaProp : {}
 
     return <FinalFieldArray name={finalName} render={({fields, meta}) => (
         <fieldset className="liform-field liform-array">
@@ -35,15 +34,9 @@ export const ArrayWidget = props => {
                     }
                 </div>
             )) }
-            { (schema.allowAdd || fields.length < (Array.isArray(meta.initial) ? meta.initial.length : 0))
-                && <button type="button" onClick={() => fields.push()}><span role="img" aria-label="add collection element">➕</span></button>
+            { (schema.allowAdd || (fields.length ?? 0) < (Array.isArray(meta.initial) ? meta.initial.length : 0))
+                && <button type="button" onClick={() => fields.push(undefined)}><span role="img" aria-label="add collection element">➕</span></button>
             }
         </fieldset>
     )}/>
 }
-
-ArrayWidget.propTypes = {
-    liform: LiformContextProp,
-    schema: SchemaProp,
-    name: PropTypes.string,
-}

src/DefaultTheme/Button/ButtonWidget.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { LifieldWidgetProps } from '../../types'
+
+export function ButtonWidget(
+    {
+        name,
+        schema: schemaProp,
+    }: LifieldWidgetProps,
+): React.ReactElement {
+
+    const types = ['submit', 'reset', 'button'] as const
+    const schema = typeof schemaProp === 'object' ? schemaProp : {}
+    const widget = typeof schema === 'object' ? schema.widget : undefined
+
+    let type
+    if (typeof(widget) === 'string') {
+        type = types.find(v => v === schema.widget)
+    } else if (Array.isArray(schema.widget)) {
+        type = types.filter(t => schema.widget?.includes(t))[0]
+    }
+
+    return <button name={name} type={type || 'button'} className="liform-field liform-button">{schema.title}</button>
+}

src/DefaultTheme/Button/ButtonWidget.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Field } from '../Field/Field'
+import { PureOption } from './PureOption'
+import { LifieldRenderProps, LiformApi } from '../../types'
+import { arrayOrUndef, objOrUndef } from '../shared'
+
+export function Choice(
+    {
+        schema: schemaProp = true,
+        input: {
+            name,
+            onChange: onChangeProp,
+            ...input
+        },
+        placeholder,
+        meta,
+    }: LifieldRenderProps<
+        string | string[],
+        LiformApi,
+        HTMLInputElement|HTMLSelectElement
+    >,
+): React.ReactElement {
+    const schema = typeof schemaProp === 'object' ? schemaProp : {}
+
+    const inputName = name + (schema.type === 'array' ? '[]' : '')
+
+    const options: {
+        value: string
+        title?: string
+    }[] = (schema.enum || (objOrUndef(schema.items)?.enum ?? [])).map((v, i) => ({
+        value: String(v),
+        title: (schema.enumTitles || objOrUndef(schema.items)?.enumTitles || [])[i],
+    }))
+
+    return schema.choiceExpanded
+        ? (
+            <fieldset className="liform-field liform-choice">
+                <legend>{ schema && schema.title }</legend>
+                <div className="liform-options">
+                    { options.map((o, i) =>
+                        <label key={i}>
+                            <input
+                                type={schema.type === 'array' ? 'checkbox' : 'radio'}
+                                name={inputName}
+                                value={o.value}
+                                checked={
+                                    schema.type === 'array'
+                                        ? arrayOrUndef(input.value)?.includes(o.value)
+                                        : input.value === o.value
+                                }
+                                onChange={e => onChangeProp(
+                                    schema.type === 'array'
+                                        ? (e.target.checked
+                                            ? arrayOrUndef(input.value)?.concat([o.value])
+                                            : arrayOrUndef(input.value)?.filter((v: string) => v !== o.value)
+                                        )
+                                        : (e.target.checked ? o.value : null),
+                                ) }
+                            />
+                            { o.title || o.value }
+                        </label>,
+                    ) }
+                </div>
+                { meta.error?.map(e =>
+                    <div key={e} className="liform-error">{e}</div>,
+                )}
+            </fieldset>
+        )
+        : (
+            <Field className="liform-choice" schema={schema} meta={meta}>
+                <select {...input}
+                    multiple={schema.type === 'array'}
+                    name={inputName}
+                    onChange={e => onChangeProp(extractNativeSelectValue(e))}
+                    onBlur={e => onChangeProp(extractNativeSelectValue(e))}
+                >
+                    { schema.type !== 'array' && placeholder && <option value="">{placeholder}</option> }
+                    { (schema.enum || objOrUndef(schema.items)?.enum) && (
+                        options.map(v => <PureOption key={v.value} value={v.value} title={v.title}/>)
+                    )}
+                </select>
+            </Field>
+        )
+}
+
+function extractNativeSelectValue(
+    event: React.ChangeEvent<HTMLSelectElement> | React.FocusEvent<HTMLSelectElement>,
+) {
+    if (event.target.hasAttribute('multiple')) {
+        const v = []
+        for (let i = 0; i < event.target.selectedOptions.length; i++) {
+            const item = event.target.selectedOptions.item(i)
+            v.push((item as NonNullable<typeof item>).value)
+        }
+        return v
+    }
+
+    return event.target.value
+}

src/DefaultTheme/Choice/Choice.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const PureOption = React.memo(
+    function PureOption(
+        {
+            value,
+            title,
+        }: {
+            value: string
+            title?: string
+        },
+    ): React.ReactElement {
+        return <option value={value}>
+            {title || value}
+        </option>
+    },
+)
+

src/DefaultTheme/Choice/Choice.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren } from 'react'
+import { LifieldRenderProps, LiformSchema } from '../../types'
+import { objOrUndef } from '../shared'
+
+export function Field(
+    {
+        schema,
+        meta: {error},
+        className,
+        children,
+    }: PropsWithChildren<{
+        schema: LiformSchema
+        meta: LifieldRenderProps['meta']
+        className: string
+    }>,
+): React.ReactElement {
+    return (
+        <div
+            className={'liform-field ' + className}
+        >
+            <label>
+                { objOrUndef(schema)?.title }
+                { children }
+            </label>
+            { error?.map(e =>
+                <div key={e} className="liform-error">{e}</div>,
+            )}
+        </div>
+    )
+}

src/DefaultTheme/Choice/PureOption.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { FieldRenderProps } from '../../field';
+import { LifieldRenderProps } from '../../types';
 import { Input } from './Input'
 
-export const ColorInput = props => {
-    const {
+export function ColorInput(
+    {
         input: {
             value,
             ...input
         },
         ...others
-    } = props
-
+    }: LifieldRenderProps,
+): React.ReactElement {
     return <Input
         {...others}
         input={{
@@ -20,5 +20,3 @@ export const ColorInput = props => {
         }}
     />
 }
-
-ColorInput.propTypes = FieldRenderProps