Method render

src/components/text-input/index.ts:176–266

()

	}

	override render(): string {
		const { type, default: defaultValue, options, attributes } = this.props;
		const text: TextInputType[] = ['text', 'password', 'email', 'url', 'number', 'color', 'file', 'date', 'datetime-local', 'month', 'time', 'week', 'tel', 'range'];
		let input = '';
		let attr = '';

		if (typeof attributes === 'object' && attributes !== null) {
			attr = Object.keys(attributes).map((key) => {
				let value = attributes[key];

				// If it's a string value, we'll do the variable interpolation
				// for it.
				if (typeof value === 'string') {
					value = this.engine.replaceVariables(value);
				}

				return `${key}="${value}"`;
			}).join(' ');
		}

		if (text.indexOf(type) > -1) {
			input = `<input data-content="field" name="field" type="${type}" tabindex="0" ${attr}>`;
		} else if (type === 'textarea') {
			input = `<textarea data-content="field" name="field" tabindex="0" ${attr}></textarea>`;
		} else if (type === 'select') {
			const optionElements = options.map((o) => {
				let selected = '';
				let parsedDefault = defaultValue;

				// If the default value provided is a string, we need to do the variable
				// interpolation for it.
				if (typeof defaultValue === 'string' && defaultValue !== null && defaultValue !== '') {
					parsedDefault = this.engine.replaceVariables(defaultValue);
					// We're doing a == comparison instead of === since the numeric
					// values could be a string.
					if (parsedDefault == this.engine.replaceVariables(String(o.value))) {
						selected = 'selected';
					}
				} else if (typeof defaultValue === 'number') {
					// We're doing a == comparison instead of === since the numeric
					// values could be a string.
					if (parsedDefault == o.value) {
						selected = 'selected';
					}
				}
				return `<option value="${typeof o.value === 'string' ? this.engine.replaceVariables(o.value) : o.value}" ${selected}>${this.engine.replaceVariables(o.label)}</option>`;
			}).join('');

			input = `<select data-content="field" name="field" tabindex="0" ${attr}>${optionElements}</select>`;

		} else if (type === 'radio' || type === 'checkbox') {
			input = options.map((o, index) => {
				let checked = '';
				let parsedDefault = defaultValue;

				// If the default value provided is a string, we need to do the variable
				// interpolation for it.
				if (typeof defaultValue === 'string' && defaultValue !== null && defaultValue !== '') {