TypeScript Observable.map方法代碼示例

export function ButtonFactory(sources: any, props$: Observable<ButtonProps>,
    children: Array<CycleComponent>): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const element = props.href ? 'a' : 'button';
    const level = props.primary ? 'primary' : props.accent ? 'accent' : 'neutral';
    const shape = props.flat ? 'flat' : props.raised ? 'raised' : props.floating ?
      'floating' : 'flat';

    const className = classNames([style[shape]], {
      [style[level]]: props.neutral,
      [style.mini]: props.mini,
      [style.inverse]: props.inverse
    }, props.className);

    return (
      h(element, { props: { className }, attrs: { 'data-cycle-ui': 'button' } }, [
        //icon ? <FontIcon className={style.icon} value={icon}/> : null,
        //label: props.label
      // ,
        props.label &&
          span(props.label),
        children
      ])
    );
  });

  return {
    DOM: vtree$,
  };
};

function RadioGroupFactory(sources: any, props$: Observable<RadioGroupProps>,
                        children: Array<RadioButton>): CycleDomComponent {
  const childrenDOMs: any[] = [];
  const childrenValues: Observable<any>[] = [];
  //TODO: allow other kinds of children?
  for (let childRadio of children) {
    // TODO: maybe remove RadioButton interface if I can make value$ compile using CycleDomComponent
    // interface
    childrenValues.push(childRadio.value$);
    childrenDOMs.push(childRadio.DOM);
  }

  const itemMouseClick$ = Observable.just('RadioFirst');
  const vtree$ = props$.map( (props) => {

    const $radioGroupSelectedValue = Observable.combineLatest(childrenValues, (...values) => {
      return { itemMouseClick$ };
    }).startWith(props.value)
      .do(x => console.log('radioGroupSelectedValue ' + x));

    const className = classNames('radioGroup', props.className);

    return (
      div( { props: { className }, attrs: { 'data-cycle-ui': 'radio-group' } },
        childrenDOMs
      )
    );
  });

  return {
    DOM: vtree$,
  };

}

export function OverlayFactory(props$: $<OverlayProps>,
    children?: any[]): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const className = classNames(style.root, {
      [style.active]: props.active,
      [style.invisible]: props.invisible
    }, props.className);

    return div( { props: { className } }, [
      div( { props: { className: style.overlay } },
        children
      )
    ]);
    // return (
    //   h('dialog', {hook: {insert}, props: { className } }, [
    //    div( { props: { className } }, [
    //   div( { props: { className: style.overlay } },
    //     children
    //   )
    // ]);

  });

  return {
    DOM: vtree$,
  };
}

export function CardTitleFactory(sources: any, props$: Observable<CardTitleProps>,
                       children: string | Array<CycleComponent> | CycleComponent):
                       CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    //TODO: do Avatars at some point

    //let avatarComponent;

    // if (typeof avatar === 'string') {
    //   avatarComponent = <Avatar image={avatar} />;
    // } else {
    //   avatarComponent = avatar;
    // }

    const className = classNames(style.cardTitle, {
      // [style.small]: props.avatar,
      // [style.large]: !props.avatar
    }, props.className);
    const titleDOM = props.title &&
      h5(`.${style.title}`, props.title);

    const childrenAsStringDOM = children && typeof children === 'string' &&
      h5(`.${style.title}`,
        children
      );

    const subtitleDOM = props.subtitle &&
      p(`.${style.subtitle}`, props.subtitle);

    const childrenAsArray = children && typeof children !== 'string' &&
      children;

    return (
      div( { props: { className } }, [
        div(concat([],
          titleDOM,
          childrenAsStringDOM,
          subtitleDOM,
          childrenAsArray
        )),
      ]
      // [
      //   //TODO: Avatars
      //   // {avatarComponent && (
      //   //   <div className={style.avatar}>
      //   //     {avatarComponent}
      //   //   </div>
      //   // )}
      // ]
      )
    );
  });

  return {
    DOM: vtree$,
  };
};

export function Drawers(sources: any) {
  const DOM = sources.DOM;

  const showDrawerClick$ = DOM.select('.showDrawer').events('click').
    map( (ev: Event) => 'show').
    do((x: any) => console.log('show: ' + x));

  const drawerClose$ = sources.DOM.select('dialog').events('close').
    startWith(false).
    map(() => false).
    do((x: any) => console.log('drawerCloseFromApp: ' + x));

  const isDrawerActive$: $<boolean> = $.merge<boolean>(
    showDrawerClick$.map(true)
    , drawerClose$.map(false)
  ).startWith(false);

  function view(isDrawerActive: boolean) {
    const drawer = (
      Drawer(sources, { isolate: false, className: 'drawer', active: isDrawerActive, type: 'left' }, [
        h5('This is a left drawer'),
        p('A drawer can have multiple children controls'),
        Input(sources, { label: 'Input in a Drawer' }).DOM,
      ])
    );

    // (<any>drawer).closeEvent$.subscribe( (x: any) => {
    //   console.log('close obs event: ' + x);
    // });

    return (
      Card(sources, { isolate: false, className: 'demoDrawers' }, [
        CardTitle(sources, { isolate: false, title: 'Drawers (Work in progress)' }, [
          CardText(sources, { isolate: true }, [
            Button(sources, { isolate: false, className: 'showDrawer', label: 'Show Drawer',
              raised: true }).DOM,
            p('is active: ' + isDrawerActive),
            drawer.DOM,
          ]).DOM
        ]).DOM
      ]).DOM
    );
  }

  const vtree$ = (
  //  $.combineLatest(drawerClose$, isDrawerActive$, (drawerClose: boolean, isDrawerActive: boolean) => {
    isDrawerActive$.map( (isDrawerActive: boolean) => {
      return view(isDrawerActive);
    })
  );

  return {
    DOM: vtree$,
  };
}

function RadioFactory(sources: any, props$: Observable<RadioProps>): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const className = classNames(style[props.checked ? 'radio-checked' : 'radio'], props.className);

    return (
      div( { props: { className }, attrs: { 'data-cycle-ui': 'radio' } } )
    );
  });

  return {
    DOM: vtree$,
  };
};

export function DialogFactory(props$: $<DialogProps>,
    children?: CycleComponent[]): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const actionsDOM = props.actions.map((action) => {
      //const className = ClassNames(style.button, {[action.className]: action.className});
      if (typeof action.DOM === 'undefined') {
        return action;
      }
      return action.DOM;
    });

    const className = classNames([ style.root, style[props.type] ], {
      [style.active]: props.active
    }, props.className);

    const insert = (vnode: any) => {
      const dialog: any = document.querySelector('dialog');
      dialogPolyfill.registerDialog(dialog);
      if (props.active) {
        dialog.showModal();
      } else {
        const overlay: any = document.querySelector('._dialog_overlay');
        if (overlay != null) {
          console.log('removing dialog overlay');
          overlay.parentNode.removeChild(overlay);
        }
      }
    };

    return (
//      Overlay( { active: props.active }, [
        h('dialog', {hook: {insert}, props: { className }, attrs: { 'data-cycle-ui': 'dialog' } }, [
          section( { props: { className: style.body },
            attrs: { role: 'body' } }, concat([],
            props.title && h6( { props: { className: style.title } }, props.title),
            children
          )),
          nav( { props: { role: 'navigation', className: style.navigation } },
            actionsDOM
          )
        ])
//      ]).DOM
    );
  });

  return {
    DOM: vtree$,
  };
}

export function Dialogs(sources: any) {
  const DOM = sources.DOM;

  const cancelClick$ = DOM.select('.cancel').events('click').
    map( (ev: Event) => 'cancel');
  const saveClick$ = DOM.select('.save').events('click').
    map( (ev: Event) => 'save').
    do((x: any) => console.log('save: ' + x));

  const showDialogClick$ = DOM.select('.showDialog').events('click').
    map( (ev: Event) => 'show').
    do((x: any) => console.log('show: ' + x));

  const isDialogActive$: $<boolean> = $.merge<boolean>(
    cancelClick$.map(false),
    saveClick$.map(false),
    showDialogClick$.map(true)
  ).startWith(false);

  const cancelButton = Button(sources, { className: 'cancel', label: 'Cancel' } );
  const saveButton = Button(sources, { className: 'save', label: 'Save' } );

  function view(isDialogActive: boolean) {
    return (
      DemoCardView(sources, 'Dialogs (Work in progress)', [
        CardText(sources, [
          Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
            raised: true }).DOM,
          p('is active: ' + isDialogActive),
          Dialog({ title: 'Test Dialog', active: isDialogActive,
            actions: [cancelButton.DOM, saveButton] }, [
              p('This is a dialog'),
              p('A dialog can have multiple children controls')
            ]
          ).DOM
        ]).DOM
      ])
    );
  }

  const vtree$ = (
    isDialogActive$.map( (isDialogActive) => {
      return view(isDialogActive);
    })
  );

  return {
    DOM: vtree$,
  };
}

export function CardTextFactory(sources: any, props$: Observable<CardTextProps>,
                      children: string | Array<CycleComponent>): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const className = classNames(style.cardText, props.className);
    console.log(children);
    return (
      div( { props: { className } },
        typeof children === 'string' ? p(children) : children
      )
    );
  });

  return {
    DOM: vtree$,
  };
};

export function CardActionsFactory(sources: any, props$: Observable<CardActionsProps>,
                         children: Array<CycleComponent>): CycleDomComponent {
  const vtree$ = props$.map( (props) => {

    const className = classNames(style.cardActions, props.className);

    return (
      div( { props: { className } },
        children
      )
    );
  });

  return {
    DOM: vtree$,
  };
};