React-another-dialog NPM

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"