Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TS types #101

Open
MangoMarcus opened this issue Apr 4, 2024 · 0 comments
Open

TS types #101

MangoMarcus opened this issue Apr 4, 2024 · 0 comments

Comments

@MangoMarcus
Copy link

The types I wrote for Pristine, in case they're useful to anyone else

// pristinejs.d.ts

declare module 'pristinejs' {
  interface PristineCongig {
    classTo?: 'string';
    errorClass?: 'string';
    successClass?: 'string';
    errorTextParent?: 'string';
    errorTextTag?: 'string';
    errorTextClass?: 'string';
  }

  /**
   * The function that validates the field. Value of the input field gets passed as the
   * first parameter, and the attribute value (split using comma) as the subsequent parameters.
   * For example, for `<input data-pristine-my-validator="10,20,dhaka" value="myValue"/>`,
   * validator function get called like `fn("myValue", 10, 20, "dhaka")`. Inside the function
   * `this` refers to the input element
   */
  type PristineValidator = (this: HTMLElement, value: string, ...params: string[]) => boolean;

  class Pristine {
    /**
     * @param form The form element
     * @param config The config object
     * @param live Whether pristine should validate as you type
     */
    constructor(form: HTMLFormElement, config?: PristineCongig, live?: boolean);

    /**
     * Add a global custom validator
     *
     * @param name A string, the name of the validator, you can then use `data-pristine-<NAME>` attribute in form fields to apply this validator
     * @param fn The validator function
     * @param msg The message to show when the validation fails. It supports simple templating. `${0}` for the input's value, `${1}` and so on are for the attribute values. For the above example, `${0}` will get replaced by `myValue`, `${1}` by `10`, `${2}` by `20`, `${3}` by `dhaka`. It can also be a function which should return the error string. The values and inputs are available as function arguments
     * @param priority Priority of the validator function. The higher the value, the earlier it gets called when there are multiple validators on one field.
     * @param halt Whether to halt validation on the current field after this validation. When true after validating the current validator, rest of the validators are ignored on the current field.
     */
    static addValidator(
      elem: HTMLElement,
      fn: PristineValidator,
      msg: string | ((value: string, ...params: string[]) => string),
      priority: number,
      halt: boolean,
    ): void;

    /**
     * Set the current locale globally
     *
     * @param locale Error messages on new Pristine forms will be displayed according to this locale
     */
    static setLocale(locale: string): void;

    /**
     * @param locale The corresponding locale
     * @param messages Object containing validator names as keys and error texts as values
     */
    static addMessages(locale: string, messages: Record<string, string>): void;

    /**
     * Checks whether the form/input elements are valid
     *
     * @param input Input element(s) or a jquery selector, null for full form validation
     * @param silent Do not show error messages, just return true/false
     * @returns Return true when valid false otherwise
     */
    validate(input: NodeList, silent?: boolean): boolean;

    /**
     * Add a custom validator
     *
     * @param elem The dom element where validator is applied to.
     * @param fn The validator function
     * @param msg The message to show when the validation fails. It supports simple templating.
     * `${0}` for the input's value, `${1}` and so on are for the attribute values. For the above
     * example, `${0}` will get replaced by `myValue`, `${1}` by `10`, `${2}` by `20`, `${3}` by
     * `dhaka`. It can also be a function which should return the error string. The values and
     * inputs are available as function arguments
     * @param priority Priority of the validator function. The higher the value, the earlier it gets
     * called when there are multiple validators on one field.
     * @param halt Whether to halt validation on the current field after this validation. When true
     * after validating the current validator, rest of the validators are ignored on the current
     * field.
     */
    addValidator(
      elem: HTMLElement,
      fn: (this: HTMLElement, value: string, ...params: string[]) => boolean,
      msg: string | ((value: string, ...params: string[]) => string),
      priority: number,
      halt: boolean,
    ): void;

    /**
     * Get the errors of the form or a specific field
     *
     * When input is given, it returns the errors of that input element, otherwise returns all
     * errors of the form as an object, using input element as key and corresponding errors as
     * value. validate() must be called before expecting this method to return correctly.
     */
    getErrors(input: HTMLElement): string[];
    getErrors(): { input: HTMLElement; errors: string[] }[];

    /**
     * Adds error to a specific field
     *
     * @param input The input element to which the error should be given
     * @param error The error string
     */
    addError(input: HTMLElement, error: string): void;

    /**
     * Set the default configuration globally to use in all forms.
     *
     * @param config The config object
     */
    setGlobalConfig(config: PristineCongig): void;

    /**
     * Reset the errors in the form
     */
    reset(): void;

    /**
     * Destroy the pristine object
     */
    destroy(): void;

    /** Not a part of public API */
    form: HTMLFormElement;

    /** Not a part of public API */
    config: PristineCongig;

    /** Not a part of public API */
    live: boolean;

    /** Not a part of public API */
    fields: (HTMLElement & {
      pristine: {
        input: HTMLElement;
        validators: PristineValidator[];
        params: string[];
        messages: string[];
        self: Pristine;
      };
    })[];
  }

  export default Pristine;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant