TypeScript Option.map方法代码示例

const renderCommonStructure = (icon: Option<string>, text: Option<string>, tooltip: Option<string>, receiver: Option<string>, behaviours: Option<Behaviour.NamedConfiguredBehaviour<Behaviour.BehaviourConfigSpec, Behaviour.BehaviourConfigDetail>[]>, providersBackstage: UiFactoryBackstageProviders) => {

  // If RTL and icon is in whitelist, add RTL icon class for icons that don't have a `-rtl` icon available.
  // Use `-rtl` icon suffix for icons that do.

  const getIconName = (iconName: string): string => {
    return I18n.isRtl() && Arr.contains(rtlIcon, iconName) ? iconName + '-rtl' : iconName;
  };
  const needsRtlClass = I18n.isRtl() && icon.exists((name) => Arr.contains(rtlTransform, name));

  return {
    dom: {
      tag: 'button',
      classes: [ ToolbarButtonClasses.Button ].concat(text.isSome() ? [ ToolbarButtonClasses.MatchWidth ] : []).concat(needsRtlClass ? [ ToolbarButtonClasses.IconRtl ] : []),
      attributes: getTooltipAttributes(tooltip, providersBackstage)
    },
    components: componentRenderPipeline([
      icon.map((iconName) => renderIconFromPack(getIconName(iconName), providersBackstage.icons)),
      text.map((text) => renderLabel(text, ToolbarButtonClasses.Button, providersBackstage))
    ]),

    eventOrder: {
      [NativeEvents.mousedown()]: [
        'focusing',
        'alloy.base.behaviour',
        'common-button-display-events'
      ]
    },

    buttonBehaviours: Behaviour.derive(
      [
        AddEventsBehaviour.config('common-button-display-events', [
          AlloyEvents.run(NativeEvents.mousedown(), (button, se) => {
            se.event().prevent();
            AlloyTriggers.emit(button, focusButtonEvent);
          })
        ])
      ].concat(
        receiver.map((r) => {
          return Reflecting.config({
            channel: r,
            initialData: { icon, text },
            renderComponents: (data, _state) => {
              return componentRenderPipeline([
                data.icon.map((iconName) => renderIconFromPack(getIconName(iconName), providersBackstage.icons)),
                data.text.map((text) => renderLabel(text, ToolbarButtonClasses.Button, providersBackstage))
              ]);
            }
          });
        }).toArray()
      ).concat(behaviours.getOr([ ]))
    )
  };
};

      const structureItem = (optText: Option<string>, optIcon: Option<string>) => (s, str, arr) => {
        return s.element('div', {
          classes: [ arr.has('tox-collection__item') ],
          children: Options.cat([
            optIcon.map((icon) => s.element('div', {
              classes: [ arr.has('tox-collection__item-icon') ],
              html: str.is(icon)
            })),

            optText.map((text) => s.element('div', {
              classes: [ arr.has('tox-collection__item-label') ],
              html: str.is(text)
            }))
          ])
        });
      };

 const launchContext = (toolbarApi: Toolbar.ContextToolbar | Toolbar.ContextForm, elem: Option<DomElement>) => {
   clearTimer();
   const toolbarSpec = buildToolbar(toolbarApi);
   const sElem = elem.map(Element.fromDom);
   const anchor = getAnchor(toolbarApi.position, sElem);
   lastAnchor.set(Option.some((anchor)));
   lastElement.set(elem);
   InlineView.showWithin(contextbar, anchor, wrapInPopDialog(toolbarSpec), getBoxElement());
   Css.remove(contextbar.element(), 'display');
 };

const renderBody = (foo: WindowBodyFoo, id: Option<string>, backstage: UiFactoryBackstage, ariaAttrs: boolean): AlloySpec => {
  const renderComponents = (incoming: WindowBodyFoo) => {
    switch (incoming.body.type) {
      case 'tabpanel': {
        return [
          renderTabPanel({
            tabs: incoming.body.tabs
          }, backstage)
        ];
      }

      default: {
        return [
          renderBodyPanel({
            items: incoming.body.items
          }, backstage)
        ];
      }
    }
  };

  const updateState = (_comp, incoming: WindowBodyFoo) => {
    return Option.some({
      isTabPanel: () => incoming.body.type === 'tabpanel'
    });
  };

  const ariaAttributes = {
    'aria-live': 'polite'
  };

  return {
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog__content-js' ],
      attributes: {
        ...id.map((x): {id?: string} => ({id: x})).getOr({}),
        ...ariaAttrs ? ariaAttributes : {}
      }
    },
    components: [ ],
    behaviours: Behaviour.derive([
      ComposingConfigs.childAt(0),
      Reflecting.config({
        channel: bodyChannel,
        updateState,
        renderComponents,
        initialData: foo
      })
    ])
  };
};

  const getDom = () => {
    const common = ItemClasses.colorClass;
    const icon = iconSvg.getOr('');
    const title = itemText.map((text) => ` title="${providerBackstage.translate(text)}"`).getOr('');

    if (itemValue === colorPickerCommand) {
      return DomFactory.fromHtml(`<button class="${common} tox-swatches__picker-btn"${title}>${icon}</button>`);
    } else if (itemValue === removeColorCommand) {
      return DomFactory.fromHtml(`<div class="${common} tox-swatch--remove"${title}>${icon}</div>`);
    } else {
      return DomFactory.fromHtml(`<div class="${common}" style="background-color: ${itemValue}" data-mce-color="${itemValue}"${title}></div>`);
    }
  };

const withComp = <D>(optInitialValue: Option<D>, getter: (c: AlloyComponent) => D, setter: (c: AlloyComponent, v: D) => void) => {
  return Representing.config(
    Merger.deepMerge(
      {
        store: {
          mode: 'manual',
          getValue: getter,
          setValue: setter
        }
      },
      optInitialValue.map((initialValue) => {
        return {
          store: {
            initialValue
          }
        };
      }).getOr({ } as any)
    )
  );
};

const renderTitle = (foo: WindowHeaderFoo, id: Option<string>, providersBackstage: UiFactoryBackstageProviders): AlloySpec => {
  const renderComponents = (data: WindowHeaderFoo) => [ GuiFactory.text(providersBackstage.translate(data.title)) ];

  return {
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog__title' ],
      attributes: {
        ...id.map((x) => ({id: x}) as {id?: string}).getOr({})
      }
    },
    components: renderComponents(foo),
    behaviours: Behaviour.derive([
      Reflecting.config({
        channel: titleChannel,
        renderComponents
      })
    ])
  };
};

 const getIconName = (iconName: Option<string>): Option<string> => {
   return iconName.map((name) => I18n.isRtl() && Arr.contains(rtlIcon, name) ? name + '-rtl' : name);
 };

 return Chain.mapper(function (bookmark: Option<any>) {
   return bookmark
     .map(function (bm) {
       return Selection.range(bm.start(), bm.soffset() + startPad, bm.finish(), bm.foffset() + finishPad);
     });
 });

const getTooltipAttributes = (tooltip: Option<string>, providersBackstage: UiFactoryBackstageProviders) => {
  return tooltip.map<{}>((tooltip) => ({
    'aria-label': providersBackstage.translate(tooltip),
    'title': providersBackstage.translate(tooltip)
  })).getOr({});
};