UI-Schema Custom Validator Scribble

README.md

• Docs on how to create (schema-driven/hook usage) plugins:
  • https://ui-schema.bemit.codes/en/docs/widget-plugins#creating-plugins
• Docs on how add a plugin:
  • https://ui-schema.bemit.codes/en/docs/widgets#adding--overwriting-widgets

CustomValidator.js

import {NextPluginRenderer} from "@ui-schema/ui-schema/EditorPluginStack";

// this is a normal plugin, as we need to access the hook and this is not possible from wihin validatorPlugins
const CustomValidator = ({errors, valid, ...props}) => {
    let {storeKeys} = props;
    const {store} = useSchemaStore();
    
    // should the internals store be used/compatible for this, maybe the internals store needs another structure
    const errorForWidget = store.getInternals() ? store.getInternals().getIn(storeKeys.push('server-validation')) : null;
    if(errorForWidget) {
        errors.push(errorForWidget);// is the error a single string or also a list?
        valid = false;
    }

    return <NextPluginRenderer {...props} errors={errors} valid={valid}/>;
};

Demo.jsx

import {createMap, updateInternalValue} from "@ui-schema/ui-schema";

const OnSubmitHandler = ({setStore, setShowValidity})=>{
    return <Button onClick={() => {
            // map the custom validation to the internal store of the widget
            setStore(updateInternalValue(List(['info']), createMap({'server-validation': 'username-exists'})))
            
            setShowValidity(true)
        }}>validity</Button>
}