react-another-dialog documentation

Build upon (https://github.com/yogaboll/react-npm-component-starter)

Modal dialog component aiming for API simplicity but still covering common more complex use cases.

• package name: react-another-dialog
• main: lib/AnotherDialog.js
• version: 0.1.41
• date: 2018/06/18 15:33:45
• license: MIT
• author: tapsaman

*** WORK IN PROGRESS *** undefined

In file AnotherDialog.jsx

class AnotherDialog

React-component for building your dialog element in.

Properties

Name | Type | Default | Description -----|------|---------|------------ title | string | n/a | Shown title (optional). subtitle | string | n/a | Shown subtitle. Included HTML will be rendered (optional). query | Array | n/a | Array of properties to render AnotherDialogInput-objects with OR ready-made input components (extending AnotherDialogInput) verification | bool/string | false | If true, verificate response before onSuccess, after onPostValidation. Give a string to define the verification question (default: "Are you sure to proceed?"). animateIn | function | n/a | Function to animate in the dialog the way you wish.Run as animateIn(formElement, maskElement) animateOut | function | n/a | Function to animate out the dialog the way you wish.Run as animateOut(formElement, maskElement, after)Note: Run the 'after'-function when done! onSuccess onCancel onFinish onPostValidate | function | n/a | Run with parameters dialogOutput and afterPostValidate callback.Response object: { pass: _bool_, message: _string_ }Must either return the response object or run afterPostValidate with it as the first parameter. options | array | [{ type:"submit", value:"OK" },{ type:"cancel", value:"Cancel" }] | Customize the main buttons. Additionals can be included:{type: "button", value: "Example", onClick: function() {...}} closeOnMaskClick | bool | true | If true, cancel dialog on click outside the form (on .a-dialog-mask) noMask | bool | false | floating | bool | true | If true, float form in the screen center

Given React-children are rendered after title, before subtitle and query.

onPostValidate response properties

Common for inputs and form. Name | Type | Default | Description -----|------|---------|------------ message | string | - | Output as main message, pass | bool | - | True if validation passes, false if fails. Undefined if no change (e.g. with a "Loading..." message).

Only for forms. Name | Type | Default | Description -----|------|---------|------------ verificate | bool | - | If true, verificate response with OK / Cancel (verification message is given as message). afterVerificate | function | - | If defined, run after verification. Otherwise runs onSuccess.

undefined

In file AnotherDialogInput.jsx

class AnotherDialogInput

Base class for AnotherDialog-input React-components.

Properties

Name | Type | Default | Description -----|------|---------|------------ title | string | n/a | Question header (optional). name | string | n/a | Name of output value type | string | "hidden" | "text"/"password"/"check"/"number"/"radio"/"select"/"date"/"daterange"/"group"/"addable"/"hidden" kind | string | "hidden" | alias of type init | string/number | n/a | initial value or child amount for "addable" max | number | n/a | max value for "num", length for "text"/"password" or child amount for "addable" min | number | n/a | min value for "num", length for "text"/"password" or child amount for "addable" minDiff | number | 0 | minimum start/end date difference for "daterange" titles | array | ["Start date", "End date"] | titles of each date input for "daterange" range | string | n/a | range string, overrides min/max (e.g. "0-5") test | function | n/a | test "text"/"password" value with opt | array | n/a | option values for "radio"/"select" (use null for disabled options / option headers) optTitles | array | n/a | option titles for "radio"/"select" children | array | n/a | inputs for "addable"/"group"