OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertBanner.ts	2 KB	02/20/2020 06:38:31 AM	rw-r--r--
📄 Button.ts	5.25 KB	02/20/2020 06:38:32 AM	rw-r--r--
📄 Checkbox.ts	3.22 KB	02/20/2020 06:38:33 AM	rw-r--r--
📄 FormEvents.ts	1.8 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 FormValues.ts	2.85 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 HtmlPanel.ts	1.18 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 Listbox.ts	1.39 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 NavigableObject.ts	2.09 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 Notification.ts	6.05 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 OuterContainer.ts	6.77 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 PanelButton.ts	2.52 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 Tooltips.ts	1.23 KB	02/20/2020 06:38:39 AM	rw-r--r--
📄 UiFactory.ts	5.48 KB	02/20/2020 06:38:39 AM	rw-r--r--

Editing: Button.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,
  Button as AlloyButton,
  SketchSpec,
  Tabstopping,
} from '@ephox/alloy';
import { console } from '@ephox/dom-globals';
import { Merger, Option } from '@ephox/katamari';
import { formActionEvent, formCancelEvent, formSubmitEvent } from 'tinymce/themes/silver/ui/general/FormEvents';

import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
import { ComposingConfigs } from '../alien/ComposingConfigs';
import { DisablingConfigs } from '../alien/DisablingConfigs';
import { RepresentingConfigs } from '../alien/RepresentingConfigs';
import { renderIconFromPack } from '../button/ButtonSlices';
import { componentRenderPipeline } from '../menus/item/build/CommonMenuItem';
import { ToolbarButtonClasses } from '../toolbar/button/ButtonClasses';

export interface ButtonFoo {
  name: string;
  text: string;
  disabled?: boolean;
  primary: boolean;
  icon?: Option<string>;
}

export interface IconButtonFoo {
  name: string;
  icon: Option<string>;
  tooltip: Option<string>;
  disabled?: boolean;
}

const renderCommonSpec = (spec, actionOpt, extraBehaviours = [], dom, components) => {
  const action = actionOpt.fold(() => {
    return {};
  }, (action) => {
    return {
      action
    };
  });

const renderCommon = (spec, action, extraBehaviours = [], dom, components): SketchSpec => {
  const specFinal = renderCommonSpec(spec, Option.some(action), extraBehaviours, dom, components);
  return AlloyButton.sketch(specFinal);
};

export const renderIconButtonSpec = (spec: IconButtonFoo, action, providersBackstage: UiFactoryBackstageProviders, extraBehaviours = []) => {
  const tooltipAttributes = spec.tooltip.map<{}>((tooltip) => ({
    'aria-label': providersBackstage.translate(tooltip),
    'title': providersBackstage.translate(tooltip)
  })).getOr({});
  const dom = {
    tag: 'button',
    classes: [ ToolbarButtonClasses.Button ],
    attributes: tooltipAttributes
  };
  const icon = spec.icon.map((iconName) => renderIconFromPack(iconName, providersBackstage.icons));
  const components = componentRenderPipeline([
    icon
  ]);
  return renderCommonSpec(spec, action, extraBehaviours, dom, components);
};

export const renderIconButton = (spec: IconButtonFoo, action, providersBackstage: UiFactoryBackstageProviders, extraBehaviours = []): SketchSpec => {
  const iconButtonSpec = renderIconButtonSpec(spec, Option.some(action), providersBackstage, extraBehaviours);
  return AlloyButton.sketch(iconButtonSpec);
};

// Maybe the list of extraBehaviours is better than doing a Merger.deepMerge that
// we do elsewhere? Not sure.
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);
};

export const renderFooterButton = (spec: ButtonFoo, buttonType: string, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const action = getAction(spec.name, buttonType);
  return renderButton(spec, action, providersBackstage, [ ]);
};

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