TypeScript alloy.SketchSpec类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

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

示例1: renderButton

export const renderDialogButton = (spec: ButtonFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const action = getAction(spec.name, 'custom');
  return renderButton(spec, action, providersBackstage, [
    RepresentingConfigs.memory(''),
    ComposingConfigs.self()
  ]);
};

开发者ID:tinymce，项目名称:tinymce，代码行数:7，代码来源:Button.ts

示例2: renderCommon

export const renderButton = (spec: ButtonFoo, action, providersBackstage: UiFactoryBackstageProviders, extraBehaviours = []): SketchSpec => {
  const translatedText = providersBackstage.translate(spec.text);

  const icon = spec.icon ? spec.icon.map((iconName) => renderIconFromPack(iconName, providersBackstage.icons)) : Option.none();
  const components = icon.isSome() ? componentRenderPipeline([ icon ]) : [];

  const innerHtml = icon.isSome() ? {} : {
    innerHtml: translatedText
  };

  const classes = [
    ...spec.primary ? ['tox-button'] : ['tox-button', 'tox-button--secondary'],
    ...icon.isSome() ? ['tox-button--icon'] : []
  ];

  const dom = {
    tag: 'button',
    classes,
    ...innerHtml,
    attributes: {
      title: translatedText // TODO: tooltips AP-213
    }
  };
  return renderCommon(spec, action, extraBehaviours, dom, components);
};

开发者ID:tinymce，项目名称:tinymce，代码行数:25，代码来源:Button.ts

示例3: makeGroup

const renderComponents = (_data, state) => {
  // default group is 'end'
  const footerButtons = state.map((s) => s.footerButtons).getOr([ ]);
  const buttonGroups = Arr.partition(footerButtons, (button) => button.align === 'start');

  const makeGroup = (edge, buttons): SketchSpec => Container.sketch({
    dom: {
      tag: 'div',
      classes: [ `tox-dialog__footer-${edge}` ]
    },
    components: Arr.map(buttons, (button) => button.memento.asSpec())
  });

  const startButtons = makeGroup('start', buttonGroups.pass);
  const endButtons = makeGroup('end', buttonGroups.fail);
  return [ startButtons, endButtons ];
};

开发者ID:tinymce，项目名称:tinymce，代码行数:17，代码来源:SilverDialogFooter.ts

示例4: renderFormFieldWith

const renderFormField = (pLabel: Option<AlloySpec>, pField: AlloySpec): SketchSpec => {
  return renderFormFieldWith(pLabel, pField, [ ]);
};

开发者ID:tinymce，项目名称:tinymce，代码行数:3，代码来源:FieldLabeller.ts

示例5: setButtonEnabled

const renderSideBar = (providersBackstage: UiFactoryBackstageProviders) => {
  const updateButtonUndoStates = (anyInSystem: AlloyComponent, undoEnabled: boolean, redoEnabled: boolean): void => {
    memUndo.getOpt(anyInSystem).each((undo) => {
      setButtonEnabled(undo, undoEnabled);
    });
    memRedo.getOpt(anyInSystem).each((redo) => {
      setButtonEnabled(redo, redoEnabled);
    });
  };

  const memUndo = Memento.record(
    createButton('Undo', 'undo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.undo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const memRedo = Memento.record(
    createButton('Redo', 'redo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.redo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const container = Container.sketch({
    dom: {
      tag: 'div',
      classes: [ 'tox-image-tools__toolbar', 'tox-image-tools__sidebar']
    },
    components: [
      memUndo.asSpec(),
      memRedo.asSpec(),
      createButton('Zoom in', 'zoom-in', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: 1
        });
      }, providersBackstage),
      createButton('Zoom out', 'zoom-out', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: -1
        });
      }, providersBackstage)
    ]
  });

  return {
    container,
    updateButtonUndoStates
  };
};

开发者ID:tinymce，项目名称:tinymce，代码行数:52，代码来源:SideBar.ts

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