index.jsx

/*
 * Copyright (c) 2021, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {Controller} from 'react-hook-form'
import {
    Field as ChakraField,
    IconButton,
    Input,
    InputGroup,
    NativeSelect,
    Checkbox
} from '@chakra-ui/react'
import {VisibilityIcon, VisibilityOffIcon, AlertIcon} from '../icons'
import {useIntl} from 'react-intl'

const Field = ({
    name,
    label,
    formLabel,
    type = 'text',
    options = [],
    rules = {},
    error,
    placeholder,
    inputProps,
    control,
    autoComplete,
    defaultValue,
    helpText,
    children,
    inputRef
}) => {
    const intl = useIntl()
    const [hidePassword, setHidePassword] = useState(true)
    const PasswordIcon = hidePassword ? VisibilityIcon : VisibilityOffIcon
    const passwordIconLabel = hidePassword
        ? intl.formatMessage({
              id: 'field.password.assistive_msg.show_password',
              defaultMessage: 'Show password'
          })
        : intl.formatMessage({
              id: 'field.password.assistive_msg.hide_password',
              defaultMessage: 'Hide password'
          })
    const inputType =
        type === 'password' && hidePassword ? 'password' : type === 'password' ? 'text' : type

    return (
        <Controller
            name={name}
            control={control}
            rules={rules}
            defaultValue={defaultValue}
            render={({field: {onChange, value, ref}}) => {
                const _inputProps =
                    typeof inputProps === 'function' ? inputProps({value, onChange}) : inputProps

                const {endElement, ...restOfInputProps} = _inputProps || {}

                return (
                    <ChakraField.Root id={name} invalid={!!error}>
                        {!['checkbox', 'radio', 'hidden'].includes(type) &&
                            (formLabel || <ChakraField.Label>{label}</ChakraField.Label>)}

                        {['text', 'password', 'email', 'phone', 'tel', 'number'].includes(type) && (
                            <InputGroup
                                endElement={
                                    type === 'password' ? (
                                        <IconButton
                                            variant="ghost"
                                            aria-label={passwordIconLabel}
                                            onClick={() => setHidePassword(!hidePassword)}
                                        >
                                            <PasswordIcon color="gray.500" boxSize={6} />
                                        </IconButton>
                                    ) : (
                                        endElement
                                    )
                                }
                            >
                                <>
                                    <Input
                                        ref={(node) => {
                                            ref(node)
                                            if (inputRef) inputRef.current = node
                                        }}
                                        onChange={onChange}
                                        value={value}
                                        type={inputType}
                                        placeholder={placeholder}
                                        autoComplete={autoComplete}
                                        {...restOfInputProps}
                                    />
                                    {children}
                                </>
                            </InputGroup>
                        )}

                        {type === 'hidden' && (
                            <input
                                ref={ref}
                                onChange={onChange}
                                value={value}
                                type="hidden"
                                {..._inputProps}
                            />
                        )}

                        {type === 'select' && (
                            <>
                                <NativeSelect.Root value={value} {..._inputProps}>
                                    <NativeSelect.Field
                                        ref={ref}
                                        value={value || ''}
                                        onChange={onChange}
                                        placeholder={placeholder}
                                    >
                                        {options.map((opt) => (
                                            <option
                                                key={`${opt.label}-${opt.value}`}
                                                value={opt.value}
                                            >
                                                {opt.label}
                                            </option>
                                        ))}
                                    </NativeSelect.Field>
                                    <NativeSelect.Indicator />
                                </NativeSelect.Root>
                                {children}
                            </>
                        )}

                        {type === 'checkbox' && (
                            <>
                                <Checkbox.Root
                                    checked={value}
                                    onCheckedChange={(details) => onChange(details.checked)}
                                    {..._inputProps}
                                >
                                    <Checkbox.HiddenInput ref={ref} />
                                    <Checkbox.Control />
                                    <Checkbox.Label>{formLabel || label}</Checkbox.Label>
                                </Checkbox.Root>
                                {children}
                            </>
                        )}

                        {error && type !== 'hidden' && (
                            <ChakraField.ErrorText color="red.600">
                                <AlertIcon aria-hidden="true" mr={2} />
                                {error.message}
                            </ChakraField.ErrorText>
                        )}

                        {helpText}
                    </ChakraField.Root>
                )
            }}
        />
    )
}

Field.propTypes = {
    name: PropTypes.string,
    label: PropTypes.string,
    autoComplete: PropTypes.string,
    formLabel: PropTypes.any,
    type: PropTypes.oneOf([
        'text',
        'number',
        'password',
        'email',
        'phone',
        'tel',
        'select',
        'checkbox',
        'hidden'
    ]),
    options: PropTypes.arrayOf(PropTypes.shape({label: PropTypes.string, value: PropTypes.any})),
    rules: PropTypes.object,
    error: PropTypes.shape({message: PropTypes.string}),
    placeholder: PropTypes.string,
    inputProps: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
    control: PropTypes.object,
    defaultValue: PropTypes.any,
    helpText: PropTypes.any,
    children: PropTypes.any,
    inputRef: PropTypes.object
}

export default Field