OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertDialog.ts	1.7 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Autocomplete.ts	1.78 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Bar.ts	689 bytes	02/20/2020 06:38:16 AM	rw-r--r--
📄 BodyPanel.ts	2.11 KB	02/20/2020 06:38:16 AM	rw-r--r--
📄 Collection.ts	5.65 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorInput.ts	5.81 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorPicker.ts	4.06 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 ConfirmDialog.ts	2.13 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 CustomEditor.ts	2.04 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dialogs.ts	3.91 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dropzone.ts	4.89 KB	02/20/2020 06:38:21 AM	rw-r--r--
📄 Grid.ts	735 bytes	02/20/2020 06:38:21 AM	rw-r--r--
📄 IFrame.ts	3.3 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 Label.ts	1.29 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 SelectBox.ts	2.37 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 SizeInput.ts	4.96 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 TabPanel.ts	5.41 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 Table.ts	1.52 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 TextField.ts	4.24 KB	02/20/2020 06:38:25 AM	rw-r--r--
📄 TypeAheadInput.ts	1.31 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 UrlInput.ts	9.25 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 WindowManager.ts	6.3 KB	02/20/2020 06:38:27 AM	rw-r--r--
📁 imagetools	-	02/20/2020 06:42:42 AM	rwxr-xr-x

Editing: TextField.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import {
  AddEventsBehaviour,
  AlloyEvents,
  AlloyTriggers,
  Behaviour,
  FormField as AlloyFormField,
  Input as AlloyInput,
  Invalidating,
  Keying,
  NativeEvents,
  Representing,
  SketchSpec,
  Tabstopping,
  SystemEvents,
} from '@ephox/alloy';
import { Arr, Future, Option, Result } from '@ephox/katamari';
import { Traverse } from '@ephox/sugar';
import { renderFormFieldWith, renderLabel } from 'tinymce/themes/silver/ui/alien/FieldLabeller';

import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
import { formChangeEvent, formSubmitEvent } from '../general/FormEvents';

const renderTextField = function (spec: TextFieldFoo, providersBackstage: UiFactoryBackstageProviders) {
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

const pField = AlloyFormField.parts().field({
    tag: spec.multiline === true ? 'textarea' : 'input',
    inputAttributes: spec.placeholder.fold(
      () => {},
      (placeholder) => ({ placeholder: providersBackstage.translate(placeholder) })
    ),
    inputClasses: [spec.classname],
    inputBehaviours: Behaviour.derive(
      Arr.flatten<Behaviour.NamedConfiguredBehaviour<Behaviour.BehaviourConfigSpec, Behaviour.BehaviourConfigDetail>>([
        baseInputBehaviours,
        validatingBehaviours
      ])
    ),
    selectOnFocus: false,
    factory: AlloyInput
  });

const extraClasses = spec.flex ? ['tox-form__group--stretched'] : [];

return renderFormFieldWith(pLabel, pField, extraClasses);
};

export type Validator = (v: string) => true | string;

export interface TextFieldFoo extends BaseTextFieldFoo {
  multiline: boolean;
  name: string;
  classname: string;
  flex: boolean;
}

export interface BaseTextFieldFoo {
  name: string;
  label: Option<string>;
  placeholder: Option<string>;
  validation: Option<{
    validator: Validator;
    validateOnLoad?: boolean
  }>;
}

// tslint:disable-next-line:no-empty-interface
export interface InputFoo extends BaseTextFieldFoo {
  name: string;
}

// tslint:disable-next-line:no-empty-interface
export interface TextareaFoo extends BaseTextFieldFoo {
  name: string;
}

const renderInput = (spec: InputFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  return renderTextField({
    name: spec.name,
    multiline: false,
    label: spec.label,
    placeholder: spec.placeholder,
    flex: false,
    classname: 'tox-textfield',
    validation: Option.none()
  }, providersBackstage);
};

const renderTextarea = (spec: TextareaFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  return renderTextField({
    name: spec.name,
    multiline: true,
    label: spec.label,
    placeholder: spec.placeholder,
    flex: true,
    classname: 'tox-textarea',
    validation: Option.none(),
  }, providersBackstage);
};

export {
  renderInput,
  renderTextarea
};