wip: more components

src/guillo-gmi/components/input/index.js

@@ -5,9 +5,9 @@ export { default as checkbox } from './checkbox.js'
 export { default as email } from './email.js'
 export { default as form } from './form.js'
 export { default as form_builder } from './form_builder.js'
-export { default as input } from './input.js'
-export { default as password } from './password.js'
+export { default as input } from './input.tsx'
+export { default as password } from './password.tsx'
 export { default as select } from './select.js'
 export { default as select_vocabulary } from './select_vocabulary.js'
 export { default as search_input } from './search_input.js'
-export { default as input_list } from './input_list.js'
+export { default as input_list } from './input_list.tsx'

src/guillo-gmi/components/input/input.js → src/guillo-gmi/components/input/input.tsx

@@ -1,15 +1,32 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
+import { InputHTMLAttributes, forwardRef, useRef, useState } from 'react'
 import { classnames, generateUID } from '../../lib/helpers'
 import ErrorZone from '../error_zone'
 import useInput from '../../hooks/useInput'
 import { notEmpty } from '../../lib/validators'
 import { useEffect } from 'react'
 
 const noop = () => true
+interface Props {
+  icon?: JSX.Element
+  iconPosition?: 'has-icons-left' | 'has-icons-right'
+  error?: string
+  errorZoneClassName?: string
+  autoComplete?: string
+  className?: string
+  widget?: string
+  loading?: boolean
+  validator?: ((value: string) => boolean) | ((value: string) => boolean)[]
+  errorMessage?: string
+  dataTest?: string
+  autofocus?: boolean
+  onChange?: (value: string) => void
+}
 
 /** @type any */
-export const Input = React.forwardRef(
+export const Input = forwardRef<
+  HTMLInputElement,
+  Props & InputHTMLAttributes<HTMLInputElement>
+>(
   (
     {
       icon,
@@ -20,8 +37,6 @@ export const Input = React.forwardRef(
       className = '',
       widget = 'input',
       type = 'text',
-      onPressEnter,
-      isSubmitted,
       loading = false,
       required = false,
       id,
@@ -32,28 +47,30 @@ export const Input = React.forwardRef(
       validator = noop,
       errorMessage,
       dataTest = 'testInput',
-      ...rest
+      disabled,
+      onKeyUp,
     },
     ref
   ) => {
+    let validatorFn = null
     if (required) {
-      validator = Array.isArray(validator)
+      validatorFn = Array.isArray(validator)
         ? validator.push(notEmpty)
         : [validator, notEmpty]
     }
 
-    const { state, ...handlers } = useInput(onChange, value ?? '', validator)
+    const { state, ...handlers } = useInput(onChange, value ?? '', validatorFn)
     const [uid] = useState(generateUID('input'))
     const [mounted, setMounted] = useState(false)
     // eslint-disable-next-line
-    ref = ref || React.useRef()
+    ref = ref || useRef()
 
     useEffect(() => {
       setMounted(true)
     }, [])
 
     useEffect(() => {
-      if (autofocus && !error) {
+      if (autofocus && !error && ref != null && typeof ref !== 'function') {
         ref.current.focus()
       }
     }, [mounted, autofocus, ref, error])
@@ -73,19 +90,18 @@ export const Input = React.forwardRef(
         <div className={classnames(cssControl())}>
           <input
             className={classnames([widget, className, statusClasses])}
-            aria-invalid={theError}
             aria-describedby={uid}
             id={id}
             ref={ref}
             type={type}
             value={state.value}
             placeholder={placeholder}
             autoComplete={autoComplete}
-            disabled={loading || rest.disabled}
+            disabled={loading || disabled}
             required={required}
             data-test={dataTest}
+            onKeyUp={onKeyUp}
             {...handlers}
-            {...rest}
           />
           {icon && icon}
         </div>
@@ -96,33 +112,3 @@ export const Input = React.forwardRef(
     )
   }
 )
-
-Input.propTypes = {
-  icon: PropTypes.node,
-  iconPosition: PropTypes.arrayOf(
-    PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])
-  ),
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  autoComplete: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onPressEnter: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-  ]),
-}

src/guillo-gmi/components/input/input_list.tsx

@@ -0,0 +1,59 @@
+import { InputHTMLAttributes, forwardRef, useState } from 'react'
+import { Input } from './input'
+import { useIntl } from 'react-intl'
+
+interface Props {
+  value: string[]
+  onChange: (value: string[]) => void
+  dataTest?: string
+}
+export const InputList = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement> & Props
+>(({ value, onChange, dataTest }, ref) => {
+  const intl = useIntl()
+  const [inputValue, setInputValue] = useState('')
+  const addTags = (event) => {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      onChange([...value, event.target.value])
+      setInputValue('')
+    }
+  }
+
+  return (
+    <div className="control">
+      <div className="tags">
+        {value.map((tag, index) => (
+          <div
+            key={`input_list_${tag}_${index}`}
+            className="tag is-info is-medium"
+          >
+            {tag}
+            <button
+              className="delete is-small"
+              onClick={() =>
+                onChange([
+                  ...value.filter((tag) => value.indexOf(tag) !== index),
+                ])
+              }
+            ></button>
+          </div>
+        ))}
+      </div>
+      <Input
+        type="text"
+        placeholder={intl.formatMessage({
+          id: 'press_enter_to_add_value',
+          defaultMessage: 'Press enter to add value',
+        })}
+        onKeyUp={(event) => addTags(event)}
+        value={inputValue}
+        ref={ref}
+        dataTest={dataTest}
+        onChange={(value) => {
+          setInputValue(value)
+        }}
+      />
+    </div>
+  )
+})

src/guillo-gmi/components/input/password.tsx

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes } from 'react'
+import { Input } from './input'
+
+interface Props {
+  value: string
+  dataTest: string
+  onChange: (value: string) => void
+}
+
+export const PasswordInput = ({
+  value,
+  dataTest,
+  onChange,
+}: Props & InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <Input
+      value={value}
+      type="password"
+      dataTest={dataTest}
+      onChange={onChange}
+    />
+  )
+}

src/guillo-gmi/components/input/upload.js → src/guillo-gmi/components/input/upload.tsx

@@ -1,8 +1,16 @@
-import React from 'react'
+import { InputHTMLAttributes } from 'react'
 import { lightFileReader } from '../../lib/client'
 import { useIntl } from 'react-intl'
 
-export function FileUpload({ label, onChange, ...props }) {
+interface Props {
+  label?: string
+  dataTest?: string
+}
+export function FileUpload({
+  label,
+  onChange,
+  dataTest,
+}: Props & InputHTMLAttributes<HTMLInputElement>) {
   const intl = useIntl()
   const changed = async (event) => {
     const file = await lightFileReader(event.target.files[0])
@@ -14,10 +22,10 @@ export function FileUpload({ label, onChange, ...props }) {
       <label className="file-label">
         <input
           className="file-input"
-          {...props}
           type="file"
           name="file"
           onChange={changed}
+          data-test={dataTest}
         />
         <span className="file-cta">
           <span className="file-icon">

src/guillo-gmi/components/panel/actions.js → src/guillo-gmi/components/panel/actions.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { getActionsObject } from '../../lib/helpers'
+import { Fragment } from 'react'
 
 export function PanelActions() {
   const traversal = useTraversal()
@@ -19,7 +19,7 @@ export function PanelActions() {
   }
 
   return (
-    <React.Fragment>
+    <Fragment>
       {Object.keys(ACTIONS_OBJECT).map((actionKey) => {
         if (hasPerm(ACTIONS_OBJECT[actionKey].perms)) {
           return (
@@ -35,6 +35,6 @@ export function PanelActions() {
           )
         }
       })}
-    </React.Fragment>
+    </Fragment>
   )
 }