TypeScript cycle-ui.Button函數代碼示例

export function Counter3(sources: any) {
  const { DOM } = sources;

  const decrement: any = Button(sources,
    { isolate: true, className: 'decrement', label: 'Decrement' });
  const increment = Button(sources,
    { isolate: true, className: 'increment', label: 'Increment' });

  const action$ = $.merge(
    DOM.select('.counter').select('.decrement').events('click').map( (ev: any) => -1),
    DOM.select('.counter').select('.increment').events('click').map( (ev: any) => +1)
  );

  //const action$ = decrement.click$.merge(increment.click$);
  const count$ = action$.startWith(0).scan((x: any, y: any) => x + y);

  const view$ = count$.combineLatest(decrement.DOM, increment.DOM,
    (count: any, dec: any, inc: any) => div('.counter', {}, [
      dec,
      inc,
      p({}, `Counter: ${count}`)
    ])
  );

  return {
    DOM: view$
  };
}

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 ButtonsView(sources: any) {
  return (
    DemoCardView(sources, 'Buttons', [
      CardActions(sources, null, [
        Button(sources, {
          label: 'Button',
        }).DOM,
        Button(sources, {
          label: 'Button Raised',
          raised: true,
        }).DOM,
      ]).DOM
    ])
  );
}

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

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

 DOM: count$.map(count =>
     div([
       Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
       Button(sources, { className: 'increment', label: 'Increment' }).DOM,
       p('Counter: ' + count)
     ])