TypeScript Input.sketch方法代碼示例

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);
          })
        ])
      ])
    })
  };
};

const renderContextForm = (ctx: Toolbar.ContextForm, backstage: UiFactoryBackstage) => {
  // Cannot use the FormField.sketch, because the DOM structure doesn't have a wrapping group
  const inputAttributes = ctx.label.fold(
    () => ({ }),
    (label) => ({ 'aria-label': label })
  );

  const memInput = Memento.record(
    Input.sketch({
      inputClasses: [ 'tox-toolbar-textfield', 'tox-toolbar-nav-js' ],
      data: ctx.initValue(),
      inputAttributes,
      selectOnFocus: true,
      inputBehaviours: Behaviour.derive([
        Keying.config({
          mode: 'special',
          onEnter: (input) => {
            return commands.findPrimary(input).map((primary) => {
              AlloyTriggers.emitExecute(primary);
              return true;
            });
          },
          // These two lines need to be tested. They are about left and right bypassing
          // any keyboard handling, and allowing left and right to be processed by the input
          // Maybe this should go in an alloy sketch for Input?
          onLeft: (comp, se) => {
            se.cut();
            return Option.none();
          },
          onRight: (comp, se) => {
            se.cut();
            return Option.none();
          }
        })
      ])
    })
  );

  const commands = generate(memInput, ctx.commands, backstage.shared.providers);

  return renderToolbar({
    uid: Id.generate('context-toolbar'),
    initGroups: [
      {
        title: Option.none(),
        items: [ memInput.asSpec() ]
      },
      {
        title: Option.none(),
        items: commands.asSpecs() as AlloySpec[]
      }
    ],
    onEscape: Option.none,
    cyclicKeying: true,
    backstage,
    getSink: () => Result.error('')
  });
};

//.........這裏部分代碼省略.........
            label: 'check box item 1',
            name: 'one'
          }, sharedBackstage.providers) as any,
          renderCheckbox({
            label: 'check box item 2',
            name: 'two'
          }, sharedBackstage.providers) as any,
          renderInput({
            label: Option.some('Sample input'),
            placeholder: Option.none(),
            name: 'exampleinputfieldname',
            validation: Option.none()
          }, sharedBackstage.providers) as any
        ]
      }, sharedBackstage) as any
    ]
  }, sharedBackstage);

  const listboxSpec = renderListbox({
    name: 'listbox1',
    label: 'Listbox',
    values: [
      { value: 'alpha', text: 'Alpha' },
      { value: 'beta', text: 'Beta' },
      { value: 'gamma', text: 'Gamma' }
    ],
    initialValue: Option.some('beta')
  }, sharedBackstage.providers);

  const gridSpec = renderGrid({
    type: 'grid',
    columns: 5,
    items: [
      AlloyInput.sketch({ inputAttributes: { placeholder: 'Text goes here...' } }) as any,
      renderButton({
        name: 'gridspecbutton',
        text: 'Click Me!',
        primary: false
      }, () => {
        console.log('clicked on the button in the grid');
      }, sharedBackstage.providers) as any
    ]
  }, sharedBackstage);

  const buttonSpec = renderButton({
    name: 'button1',
    text: 'Text',
    primary: false
  }, () => {
    console.log('clicked on the button');
  }, sharedBackstage.providers);

  const checkboxSpec = (() => {
    const memBodyPanel = Memento.record(
      renderBodyPanel({
        items: [
          { type: 'checkbox', name: 'checked', label: 'Checked' },
          { type: 'checkbox', name: 'unchecked', label: 'Unchecked' }
        ]
      }, {
        shared: sharedBackstage
      })
    );

    return {
      dom: {