Custom form fields

Custom form field that can be used with ItsyForm or in FormSchema.


Usage

import { ItsyForm } from '@itsy-ui/form';

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
  }

  getControlSchemaProperties() {
		const registry = getDefaultRegistry();
		const { definitions } = registry;
		const schema = retrieveSchema(this.props.schema, definitions);
		return schema;
	}

render() {
 const controlProps = this.getControlSchemaProperties();
	const { fieldSchema } = controlProps;
    return (
        <label>
          {fieldSchema.displayName}
          <input type="text" value={controlProps.value} 
            onBlur={(v) => {
			controlProps.handleBlur &&
			controlProps.handleBlur(v, v.target.value);
			}}
			onChange={e => controlProps.handleChange && 
			controlProps.handleChange(e, e.target.value)} />
        </label>
    );
  }
}

CustomTextInput['displayName'] = 'CustomTextInput';

WidgetsFactory.instance.registerFactory(CustomTextInput);
WidgetsFactory.instance.registerControls({
	custom_text: "CustomTextInput"
});


const formSchema = {
	"id": "sample-form",
	"displayName": "Sample form",
	"typeId": "form",
	"propertyDefinitions": {
		"name": {
			"id": "name",
			"displayName": "Name",
			"placeholderText": "Enter name",
			"propertyType": "string",
			"ui:widget": "custom_text"
		}
	}
};

const schema = {
  typeId: "sample_form",
  formSchema: formSchema
};

<ItsyForm className="form" schema={schema} />


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions