radh-ui/dist/cjs/radh-input.cjs.entry.js

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-710e648a.js');

//export type Validator<A> = (x: A) => boolean;
const defaultValidator = {
    validate: (_x) => true
};
function combineValidators(v1, v2) {
    let combined;
    combined = {
        validate: (x) => {
            const res1 = v1.validate(x);
            const res2 = v2.validate(x);
            if (!res1) {
                combined.errorMessage = v1.errorMessage;
            }
            else if (!res2) {
                combined.errorMessage = v2.errorMessage;
            }
            return res1 && res2;
        },
    };
    return combined;
}

const FruitValidator = {
    validate: (value) => {
        let fruits = ['banana', 'apple', 'cherry'];
        return fruits.find(a => a === value) ? true : false;
    },
    errorMessage: 'You must enter a valid fruit name'
};

function getLengthValidator(min, max) {
    return {
        validate: (value) => {
            value = value || '';
            if (min && max) {
                return min <= value.length && value.length <= max;
            }
            if (min) {
                return min <= value.length;
            }
            if (max) {
                return value.length <= max;
            }
            return true;
        },
        errorMessage: min && max ? `You must enter between ${min} and ${max} characters`
            : min ? `You must enter at least ${min} characters`
                : max ? `You must enter less than ${max} characters` : ''
    };
}

var ValidatorsName;
(function (ValidatorsName) {
    ValidatorsName["fruit"] = "fruit";
    ValidatorsName["length"] = "length";
})(ValidatorsName || (ValidatorsName = {}));
function getValidator(list) {
    return (list || []).map(v => {
        if (typeof v === 'string') {
            return validatorFactory(v, null);
        }
        else if (v && v.name) {
            v = v;
            return validatorFactory(v.name, v.options);
        }
        else {
            return v;
        }
    }).reduce(combineValidators, defaultValidator);
}
function validatorFactory(name, options) {
    options = options || {};
    switch (name) {
        case (ValidatorsName.fruit):
            return FruitValidator;
        case (ValidatorsName.length):
            return getLengthValidator(options.min, options.max);
        default:
            return defaultValidator;
    }
}

const radhInputCss = ".input-container{padding:0.5rem;border-radius:1rem;border:1px solid grey}input{outline:none !important;border:none;width:100%;font-size:0.8rem}.validation-error{font-size:0.8rem;color:red}";

class RadhInput {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this._validator = defaultValidator;
        this.changed = index.createEvent(this, "changed", 7);
    }
    componentWillLoad() {
        this._validator = getValidator(this.validator);
    }
    componentWillUpdate() {
        this._validator = getValidator(this.validator);
    }
    handleChange(ev) {
        this.value = ev.target ? ev.target.value : null;
        this.changed.emit(this.value);
    }
    render() {
        console.log(this._validator, this._validator.validate(this.value));
        return (index.h("div", null, index.h("div", { class: "input-container" }, index.h("input", { value: this.value, onInput: (ev) => this.handleChange(ev) })), !this._validator.validate(this.value) ?
            index.h("span", { class: "validation-error" }, this._validator.errorMessage)
            : null));
    }
}
RadhInput.style = radhInputCss;

exports.radh_input = RadhInput;