OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 DialogChannels.ts	659 bytes	02/20/2020 06:39:09 AM	rw-r--r--
📄 SilverDialog.ts	2.28 KB	02/20/2020 06:39:11 AM	rw-r--r--
📄 SilverDialogBody.ts	3.49 KB	02/20/2020 06:39:10 AM	rw-r--r--
📄 SilverDialogCommon.ts	5.04 KB	02/20/2020 06:39:11 AM	rw-r--r--
📄 SilverDialogEvents.ts	4.24 KB	02/20/2020 06:39:12 AM	rw-r--r--
📄 SilverDialogFooter.ts	3.33 KB	02/20/2020 06:39:12 AM	rw-r--r--
📄 SilverDialogHeader.ts	3.64 KB	02/20/2020 06:39:13 AM	rw-r--r--
📄 SilverDialogInstanceApi.ts	4.83 KB	02/20/2020 06:39:13 AM	rw-r--r--
📄 SilverInlineDialog.ts	4.17 KB	02/20/2020 06:39:14 AM	rw-r--r--
📄 SilverUrlDialog.ts	5.45 KB	02/20/2020 06:39:15 AM	rw-r--r--
📄 SilverUrlDialogInstanceApi.ts	1.52 KB	02/20/2020 06:39:15 AM	rw-r--r--

Editing: SilverDialogFooter.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 {
  Behaviour,
  Container,
  DomFactory,
  Memento,
  MementoRecord,
  ModalDialog,
  Reflecting,
  SketchSpec,
  AlloyComponent,
} from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { Arr, Option } from '@ephox/katamari';

import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
import { renderFooterButton } from '../general/Button';
import { footerChannel } from './DialogChannels';

// FIX spelling and import location
export interface DialogMemButton {
  name: Types.Dialog.DialogButton['name'];
  align: Types.Dialog.DialogButton['align'];
  memento: MementoRecord;
}

export interface WindowFooterFoo {
  buttons: Types.Dialog.DialogButton[];
}

const makeButton = (button: Types.Dialog.DialogButton, providersBackstage: UiFactoryBackstageProviders) => {
  return renderFooterButton(button, button.type, providersBackstage);
};

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

const renderFooter = (initFoo: WindowFooterFoo, providersBackstage: UiFactoryBackstageProviders) => {
  const updateState = (_comp, data: WindowFooterFoo) => {
    const footerButtons: DialogMemButton[] = Arr.map(data.buttons, (button) => {
      const memButton = Memento.record(makeButton(button, providersBackstage));
      return {
        name: button.name,
        align: button.align,
        memento: memButton
      };
    });

const lookupByName = (
      compInSystem: AlloyComponent,
      buttonName: string
    ) => lookup(compInSystem, footerButtons, buttonName);

return Option.some({
      lookupByName,
      footerButtons
    });
  };

return {
    dom: DomFactory.fromHtml(`<div class="tox-dialog__footer"></div>`),
    components: [ ],
    behaviours: Behaviour.derive([
      Reflecting.config({
        channel: footerChannel,
        initialData: initFoo,
        updateState,
        renderComponents
      })
    ])
  };
};

const renderInlineFooter = (initFoo: WindowFooterFoo, providersBackstage: UiFactoryBackstageProviders) => {
  return renderFooter(initFoo, providersBackstage);
};

const renderModalFooter = (initFoo: WindowFooterFoo, providersBackstage: UiFactoryBackstageProviders) => {
  return ModalDialog.parts().footer(
    renderFooter(initFoo, providersBackstage)
  );
};

export {
  renderInlineFooter,
  renderModalFooter
};