当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript alloy.Composing类代码示例

本文整理汇总了TypeScript中@ephox/alloy.Composing的典型用法代码示例。如果您正苦于以下问题:TypeScript Composing类的具体用法?TypeScript Composing怎么用?TypeScript Composing使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。


在下文中一共展示了Composing类的9个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: function

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);
          })
        ])
      ])
    })
  };
};
开发者ID:danielpunkass,项目名称:tinymce,代码行数:60,代码来源:Inputs.ts

示例2: withRoot

 withRoot((_) => {
   const body = access.getBody();
   const bodyState = Reflecting.getState(body);
   if (bodyState.get().exists((b) => b.isTabPanel())) {
     Composing.getCurrent(body).each((tabSection) => {
       TabSection.showTab(tabSection, title);
     });
   }
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:SilverDialogInstanceApi.ts

示例3:

const childAt = (index: number) => {
  return Composing.config({
    find: (comp: AlloyComponent) => {
      return Traverse.child(comp.element(), index).bind((element) => {
        return comp.getSystem().getByDom(element).toOption();
      });
    }
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:ComposingConfigs.ts

示例4:

 getValue: (comp) => {
   const picker = memPicker.get(comp);
   const optRgbForm = Composing.getCurrent(picker);
   const optHex = optRgbForm.bind((rgbForm) => {
     const formValues = Representing.getValue(rgbForm);
     return formValues.hex as Option<string>;
   }) ;
   return optHex.map((hex) => '#' + hex).getOr('');
 },
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:ColorPicker.ts

示例5:

 Step.sync(() => {
   const zone = Composing.getCurrent(component).getOrDie(
     'Failed trying to get the zone from the container'
   );
   const filesValue = Representing.getValue(zone);
   Assertions.assertEq('Checking value of dropzone', [
     { name: 'image1.png' },
     { name: 'image3.jpg' }
   ], filesValue);
 })
开发者ID:tinymce,项目名称:tinymce,代码行数:10,代码来源:DropzoneTest.ts

示例6: picker

 const openUrlPicker = (comp: AlloyComponent) => {
   Composing.getCurrent(comp).each((field) => {
     const urlData = Representing.getValue(field);
     optUrlPicker.each((picker) => {
       picker(urlData).get((chosenData) => {
         Representing.setValue(field, chosenData);
         AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
       });
     });
   });
 };
开发者ID:tinymce,项目名称:tinymce,代码行数:11,代码来源:UrlInput.ts

示例7: sAssertInitialIframeStructure

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

      const frame = Composing.getCurrent(component).getOrDie(
        'Could not find internal frame field'
      );

      // TODO: Make a webdriver test re: keyboard navigation.
      return [
        sAssertInitialIframeStructure(component),
        RepresentingSteps.sSetValue('Setting to a paragraph', frame, '<p><span class="me">Me</span></p>'),
        platformNeedsSandboxing ? sAssertSandboxedIframeContent(frame) : sAssertStandardIframeContent(frame)
      ];
    },
开发者ID:tinymce,项目名称:tinymce,代码行数:13,代码来源:IframeTest.ts

示例8:

 return optSlider.bind((slider) => {
   const sidebarOpen = Sliding.isGrowing(slider) || Sliding.hasGrown(slider);
   if (sidebarOpen) {
     const optSlotContainer = Composing.getCurrent(slider);
     return optSlotContainer.bind((slotContainer) =>
       Arr.find(SlotContainer.getSlotNames(slotContainer), (name) =>
         SlotContainer.isShowing(slotContainer, name)
       )
     );
   } else {
     return Option.none();
   }
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:13,代码来源:Sidebar.ts

示例9:

const getCompByName = (access: DialogAccess<any>, name: string): Option<AlloyComponent> => {
  // TODO: Add API to alloy to find the inner most component of a Composing chain.
  const root = access.getRoot();
  // This is just to avoid throwing errors if the dialog closes before this. We should take it out
  // while developing (probably), and put it back in for the real thing.
  if (root.getSystem().isConnected()) {
    const form = Composing.getCurrent(access.getFormWrapper()).getOr(access.getFormWrapper());
    return Form.getField(form, name).fold(() => {
      const footer = access.getFooter();
      const footerState = Reflecting.getState(footer);
      return footerState.get().bind((f) => f.lookupByName(form, name));
    }, (comp) => {
      return Option.some(comp);
    });
  } else {
    return Option.none();
  }
};
开发者ID:tinymce,项目名称:tinymce,代码行数:18,代码来源:SilverDialogInstanceApi.ts


注:本文中的@ephox/alloy.Composing类示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。