TypeScript NativeEvents.input方法代碼示例

const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};

 Form.getField(rgbForm, 'hex').each((hexField) => {
   AlloyTriggers.emit(hexField, NativeEvents.input());
 });

 Step.sync(() => {
   AlloyTriggers.emit(input, NativeEvents.input());
 }),

    (doc, body, gui, component, store) => {

      const sTriggerInput = DomSteps.sTriggerEventOnFocused('input("input")', component, NativeEvents.input());

      const sSetDimensions = (width, height) => RepresentingSteps.sSetValue('dimensions', component, { width, height });

      const sAssertDimensions = (width, height) => RepresentingSteps.sAssertValue('dimensions', { width, height }, component);

      const sAssertLocked = (locked) =>
        Chain.asStep(component.element(), [
          UiFinder.cFindIn('.tox-lock'),
          Chain.op((lock) => {
            Assertions.assertStructure(
              'Checking lock has toggled',
              ApproxStructure.build((s, str, arr) => {
                return s.element('button', {
                  classes: [
                    arr.has('tox-lock'),
                    arr.has('tox-button'),
                    (locked ? arr.has : arr.not)('tox-locked')]
                });
              }),
              lock
            );
          })
        ]);

      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [arr.has('tox-form__group')],
              children: [
                s.element('div', {
                  classes: [arr.has('tox-form__controls-h-stack')],
                  children: [
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is('Width')
                        }),
                        s.element('input', {
                          classes: [arr.has('tox-textfield')],
                          attrs: {
                            'data-alloy-tabstop': str.is('true')
                          }
                        })
                      ]
                    }),
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is('Height')
                        }),
                        s.element('input', {
                          classes: [arr.has('tox-textfield')],
                          attrs: {
                            'data-alloy-tabstop': str.is('true')
                          }
                        })
                      ]
                    }),
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is(' ')
                        }),
                        s.element('button', {
                          classes: [arr.has('tox-lock'), arr.has('tox-button'), arr.has('tox-locked')]
                        })
                      ]
                    })
                  ]
                })
              ]
            });
          }),
          component.element()
        ),
        sAssertLocked(true),
        sSetDimensions('100px', '200px'),
        FocusTools.sSetFocus('Focusing the first field', component.element(), 'input:first'),
        FocusTools.sSetActiveValue(doc, '50'),
        sTriggerInput,
        sAssertDimensions('50', '100px'),
        // toggle off the lock
        Mouse.sClickOn(component.element(), 'button.tox-lock'),
        sAssertLocked(false),
        // now when we update the first field it will not update the second field
        FocusTools.sSetFocus('Focusing the first field', component.element(), 'input:first'),
        FocusTools.sSetActiveValue(doc, '300px'),
        sTriggerInput,
        sAssertDimensions('300px', '100px')
//.........這裏部分代碼省略.........

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

  const baseInputBehaviours = [
    Keying.config({
      mode: 'execution',
      useEnter: spec.multiline !== true,
      useControlEnter: spec.multiline === true,
      execute: (comp) => {
        AlloyTriggers.emit(comp, formSubmitEvent);
        return Option.some(true);
      },
    }),
    AddEventsBehaviour.config('textfield-change', [
      AlloyEvents.run(NativeEvents.input(), (component, _) => {
        AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
      }),
      AlloyEvents.run(SystemEvents.postPaste(), (component, _) => {
        AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
      })
    ]),
    Tabstopping.config({})
  ];

  const validatingBehaviours = spec.validation.map((vl) => {
    return Invalidating.config({
      getRoot(input) {
        return Traverse.parent(input.element());
      },
      invalidClass: 'tox-invalid',
      validator: {
        validate(input) {
          const v = Representing.getValue(input);
          const result = vl.validator(v);
          return Future.pure(result === true ? Result.value(v) : Result.error(result));
        },
        validateOnLoad: vl.validateOnLoad
      }
    });
  }).toArray();

  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 const renderUrlInput = (spec: Types.UrlInput.UrlInput, backstage: UiFactoryBackstage, urlBackstage: UiFactoryBackstageForUrlInput): SketchSpec => {
  const providersBackstage = backstage.shared.providers;

  const updateHistory = (component: AlloyComponent): void => {
    const urlEntry = Representing.getValue(component);
    urlBackstage.addToHistory(urlEntry.value, spec.filetype);
  };

  // TODO: Make alloy's typeahead only swallow enter and escape if menu is open
  const pField = AlloyFormField.parts().field({
    factory: AlloyTypeahead,
    dismissOnBlur: true,
    inputClasses: ['tox-textfield'],
    sandboxClasses: ['tox-dialog__popups'],
    inputAttributes: {
      'aria-errormessage': errorId
    },
    minChars: 0,
    responseTime: 0,
    fetch: (input: AlloyComponent) => {
      const items = getItems(spec.filetype, input, urlBackstage);
      const tdata = NestedMenus.build(items, ItemResponse.BUBBLE_TO_SANDBOX, backstage);
      return Future.pure(tdata);
    },

    getHotspot: (comp) => memUrlBox.getOpt(comp),
    onSetValue: (comp, newValue) => {
      if (comp.hasConfigured(Invalidating)) {
        Invalidating.run(comp).get(Fun.noop);
      }
    },

    typeaheadBehaviours: Behaviour.derive(Arr.flatten([
      urlBackstage.getValidationHandler().map(
        (handler) => Invalidating.config({
          getRoot: (comp) => Traverse.parent(comp.element()),
          invalidClass: 'tox-control-wrap--status-invalid',
          notify: {
            onInvalid: (comp: AlloyComponent, err: string) => {
              memInvalidIcon.getOpt(comp).each((invalidComp) => {
                Attr.set(invalidComp.element(), 'title', providersBackstage.translate(err));
              });
            }
          },
          validator: {
            validate: (input) => {
              const urlEntry = Representing.getValue(input);
              return FutureResult.nu((completer) => {
                handler({ type: spec.filetype, url: urlEntry.value }, (validation) => {
                  completer((validation.status === 'invalid' ? Result.error : Result.value)(validation.message));
                });
              });
            },
            validateOnLoad: false
          }
        })
      ).toArray(),
      [
        Tabstopping.config({}),
        AddEventsBehaviour.config('urlinput-events', Arr.flatten([
          // We want to get fast feedback for the link dialog, but not sure about others
          spec.filetype === 'file' ? [
            AlloyEvents.run(NativeEvents.input(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
            })
          ] : [ ],
          [
            AlloyEvents.run(NativeEvents.change(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
              updateHistory(comp);
            }),
            AlloyEvents.run(SystemEvents.postPaste(), (comp) => {
              AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
              updateHistory(comp);
            })
          ]
        ]))
      ]
    ])),

    eventOrder: {
      [NativeEvents.input()]: [ 'streaming', 'urlinput-events', 'invalidating' ]
    },

    model: {
      getDisplayText: (itemData) => {
        return itemData.value;
      },
      selectsOver: false,
      populateFromBrowse: false
    },

    markers: {
      // FIX:
      openClass: 'dog'
    },

    lazySink: backstage.shared.getSink,

    parts: {
//.........這裏部分代碼省略.........