How to use @webiny/app-i18n - 6 common examples

// See https://reactjs.org/docs/events.html#event-pooling.
            e.persist();
            validate();
        }
    };

    return (
        <div>
            <label>
                
            </label>
            <input> onChange(e.target.value)}
                value={value}
                placeholder={I18NValue(props.field.placeholderText)}
                type={props.type}
                name={props.field.fieldId}
                id={props.field.fieldId}
                className="webiny-pb-form-field__input"
            /&gt;
            }
            /&gt;
        </div>
    );
};

insertField,
        updateField,
        deleteField,
        data,
        moveField,
        moveRow,
        getFieldPlugin
    } = useFormEditor();
    const [editingField, setEditingField] = useState(null);
    const [dropTarget, setDropTarget]: [FieldLayoutPositionType, Function] = useState(null);

    const editField = useCallback(field => {
        setEditingField(cloneDeep(field));
    });

    const i18n = useI18N();

    const handleDropField = useCallback((source, dropTarget) => {
        const { pos, name, ui } = source;

        if (name === "custom") {
            editField({});
            setDropTarget(dropTarget);
            return;
        }

        if (ui === "row") {
            // Reorder rows.
            // Reorder logic is different depending on the source and target position.
            return moveRow(pos.row, dropTarget.row);
        }

return async value => {
                            let isInvalid = true;
                            try {
                                const result = await validatorPlugin.validator.validate(
                                    value,
                                    item
                                );
                                isInvalid = result === false;
                            } catch (e) {
                                isInvalid = true;
                            }

                            if (isInvalid) {
                                throw new Error(
                                    I18NValue({ value: item.message }) || "Invalid value."
                                );
                            }
                        };
                    })

const getFieldValueLabel = (field, value) => {
    if (field.options.length > 0) {
        const selectedOption = field.options.find(option => option.value === value);
        if (selectedOption) {
            return I18NValue(selectedOption.label);
        }
    }

    return value;
};

const EditFieldDialog = ({ field, onSubmit, ...props }: Props) => {
    const [current, setCurrent] = useState(null);
    const [isNewField, setIsNewField] = useState(false);
    const [screen, setScreen] = useState();

    const { getFieldPlugin } = useFormEditor();
    const i18n = useI18N();

    useEffect(() => {
        setCurrent(cloneDeep(field));
        if (field) {
            setIsNewField(!field._id);
            setScreen(field.type ? "fieldOptions" : "fieldType");
        }
    }, [field]);

    const onClose = useCallback(() => {
        setCurrent(null);
        props.onClose();
    });

    let render = null;
    let headerTitle = t`Field Settings`;

const ValidatorsTab = props => {
    const i18n = useI18N();
    const { getFieldPlugin } = useFormEditor();
    const {
        field,
        form: { Bind }
    } = props;

    const fieldType = getFieldPlugin({ name: field.name });

    const validators = useMemo(() => {
        return getPlugins("form-editor-field-validator")
            .map(plugin => plugin.validator)
            .map(validator => {
                if (fieldType.field.validators.includes(validator.name)) {
                    return { optional: true, validator: validator };
                } else if (fieldType.field.validators.includes(`!${validator.name}`)) {
                    return { optional: false, validator: validator };