# ninjagoat-dialogs

> A module to display different kinds of dialogs inside a ninjagoat application, with the ability to supply custom templates to customize it even more.

Latest version **5.1.0** (published 2020-11-18) · 0 weekly downloads

## Install

```sh
npm install ninjagoat-dialogs
pnpm add ninjagoat-dialogs
yarn add ninjagoat-dialogs
bun add ninjagoat-dialogs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2020-11-18 |
| First published | 2016-05-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 29.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tierratelematics |

## Links

- npm: https://www.npmjs.com/package/ninjagoat-dialogs
- npm.io page: https://npm.io/package/ninjagoat-dialogs

## Dependencies (9)

- [rx](https://npm.io/package/rx.md) ~4.1.0
- [react](https://npm.io/package/react.md) ^16.9.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [inversify](https://npm.io/package/inversify.md) ^4.3.0
- [ninjagoat](https://npm.io/package/ninjagoat.md) ^4.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ~0.1.3
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.4.3
- [@material-ui/styles](https://npm.io/package/@material-ui/styles.md) ^4.4.3

## Recent versions

- 5.1.0 (latest) — 2020-11-18
- 6.0.0-rc.0 (next) — 2021-07-13
- 5.0.1 — 2019-10-01
- 5.0.0 — 2019-09-26
- 2.2.1 — 2019-04-15
- 4.0.2 — 2018-05-22
- 4.0.1 — 2018-04-05
- 4.0.0 — 2018-03-05
- 3.0.2 — 2018-02-26
- 3.0.1 — 2018-02-26
- 3.0.0 — 2018-02-23
- 2.2.0 — 2018-01-18
- 2.1.0 — 2017-10-31
- 2.0.1 — 2017-08-29
- 2.0.0 — 2017-07-17
- … 17 more at https://npm.io/package/ninjagoat-dialogs/versions

## README

# Ninjagoat-dialogs

A module to display different kinds of dialogs inside a ninjagoat application, with the ability to supply custom templates to customize it even more.

## Installation

`
$ npm install ninjagoat-dialogs
`

Add this code to the bootstrapper.ts file:

```typescript
import {DialogsModule} from "ninjagoat-dialogs"

application.register(new DialogsModule());
```

Add a ninjagoat dialog to the Master view.

```typescript
import {NinjagoatDialog} from "ninjagoat-dialogs"

class MasterView extends View<MasterViewModel> {
    
    render() {
        <div>
            {this.props.children}
            <NinjagoatDialog />
        </div>
    }
}
```

## Usage

To use a confirm dialog you can just do something like this.

```typescript
import {IDialogService, DialogStatus} from "ninjagoat-dialogs";

let dialogService:IDialogService; //Inject it in a class

let status = await dialogService.confirm("Are you sure you want to do this?");
if (status === DialogStatus.Confirmed) {
    //Do the action
}
```

### Custom dialogs

To supply a custom dialog to the component write a class that extends CustomDialog.

```typescript
import {CustomDialog} from "ninjagoat-dialogs";
import {Modal} from "react-bootstrap";

class MyDialog extends CustomDialog<MyDialogModel> {

    render() {
        let status = this.props.status;
        let dialog = this.props.dialog;
        return (
            <Modal show={dialog.open} onHide={status.cancel.bind(this.props.status)}>
              //Build your UI here
            </Modal>
        );
    }
}
```

Register it in your module.

```typescript
this.container.bind<interfaces.Newable<CustomDialog<any>>>("DialogTemplate").toConstructor(MyDialog).whenTargetNamed("myDialog")
```

And use it!

```typescript
import {IDialogService, DialogStatus} from "ninjagoat-dialogs";

let dialogService:IDialogService; //Inject it in a class

let status = await dialogService.display("myDialog", customData, "Title");
if (status === DialogStatus.Confirmed) {
    //Do the action
}
```

## ViewModel Dialogs
If your dialog has some interaction that requires changes to be reflected on both the model and the UI you can use the ModelDialog class, which binds to a special kind of ViewModel named DialogViewModel.
In order to use it declare your model as a class extending from DialogViewModel, and use it as a standard ViewModel by applying the @Refresh decorator on it.

```typescript
class MyDialogViewModel extends DialogViewModel {
    public updates: number = 0;
     
    @Refresh
    public increment() {
        this.updates++;
    }
}
```
once defined your ViewModel you can use the ModelDialog class in order to implement your own Dialog view

```typescript
class MyDialog extends ModelDialog<MyDialogViewModel> {

    render() {
        let status = this.props.status;
        let dialog = this.props.dialog;
        return (
            <Modal show={dialog.open} onHide={status.cancel.bind(this.props.status)}>
              <div>{this.viewmodel.updates}</div>
              <button onClick={() => this.viewmodel.increment()}>Increment</button>
            </Modal>
        );
    }
}
```

## License

Copyright 2016 Tierra SpA

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

---
_Source: https://npm.io/package/ninjagoat-dialogs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._