dd3121e91c
* Add username to onboarding * Add margin to profile form error alert * Update user controller for onboarding Co-authored-by: Michael Kohl <me@citizen428.net>
65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
/**
|
|
* A text field with a label that reacts to an onFieldChange event.
|
|
*
|
|
* @example
|
|
* field = {
|
|
* "id": 140,
|
|
* "attribute_name": "website_url",
|
|
* "description": null,
|
|
* "input_type": "text_input",
|
|
* "label": "Webiste URL",
|
|
* "placeholder_text": ""
|
|
*}
|
|
*
|
|
* <TextInput
|
|
key={field.id}
|
|
field={field}
|
|
onFieldChange={this.handleFieldChange} />
|
|
|
|
* Note:
|
|
* field is an json object that will contain the following attributes: attribute_name, placeholder_text, description, label.
|
|
*/
|
|
|
|
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { FormField } from '@crayons';
|
|
|
|
export function TextInput(props) {
|
|
const { onFieldChange, field } = props;
|
|
const {
|
|
attribute_name,
|
|
placeholder_text,
|
|
default_value,
|
|
description,
|
|
label,
|
|
required,
|
|
} = field;
|
|
|
|
return (
|
|
<FormField>
|
|
<label class="crayons-field__label" htmlFor={attribute_name}>
|
|
{label}
|
|
</label>
|
|
<input
|
|
class="crayons-textfield"
|
|
placeholder={placeholder_text}
|
|
defaultValue={default_value}
|
|
name={attribute_name}
|
|
id={attribute_name}
|
|
onChange={onFieldChange}
|
|
required={required ? 'required' : ''}
|
|
/>
|
|
{description && <p class="crayons-field__description">{description}</p>}
|
|
</FormField>
|
|
);
|
|
}
|
|
|
|
TextInput.propTypes = {
|
|
field: PropTypes.shape({
|
|
attribute_name: PropTypes.string.isRequired,
|
|
placeholder_text: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired,
|
|
input_type: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
};
|