LJN Reclame Architecture - Gist 10

Focusable.js

import PropTypes from '@ljn/prop-types'

import Disableable from 'interfaces/Disableable'
import feature from 'core/feature'

/**
 * Allows focusing a target element.
 * @param   {object} params The Reclame parameters of the instance during init.
 * @returns {object} The following feature state:
 * <ul>
 * <li>props.target: a function to compute props for the focus target</li>
 * </ul>.
 */
const useFocusable = (params) => {
	return {
		props: {
			target: (runtimeParams) => {
				const { features, props } = runtimeParams
				return {
					onFocus: props.onFocus || undefined,
					onBlur: props.onBlur || undefined,
					tabIndex: 0,
					...features.disableable.props.target(runtimeParams),
				}
			},
		},
	}
}

const Focusable = feature({
	id: 'focusable',
	modifiers: ({ props }) => ({ isDisabled: props.isDisabled }),
	hook: useFocusable,
	mixes: [Disableable],
	propTypes: {
		onFocus: PropTypes.func,
		onBlur: PropTypes.func,
	},
	propDescriptions: {
		// ...
	},
	defaultProps: {
		onFocus: null,
		onBlur: null,
	},
})

export default Focusable