JustDialog

Traditional dialog framework for react and react-native, without state management, with help of @reactjsf

Create Dialog Container

Create dialog container for manage or dialog actions

import  React  from  'react';
import { JustDialogProvider } from  '@justdialog/core';
import  *  as  components  from  '@justdialog/fabric-ui';
//import  *  as  components  from  '@justdialog/fabric-ui';
//import  *  as  components  from  '@justdialog/antd';
//import  *  as  components  from  '@justdialog/material-ui';
import  ReactJsfForm  from  '@reactjsf/core';
import localizeSchema from '...';
import localizeText from '...';

const  AppPage= () =>
	<JustDialogProvider components={components}
		form={ReactJsfForm}
		okButtonText={localizeText("Ok")}
		cancelButtonText={localizeText("Cancel")}
		closeButtonText={localizeText("Close")}
		schemaCustomizer={schema  =>  localizeSchema({
			...schema,
			"ui:hideTitle":true,
			"ui:hideBorder":true
		})}
	>
	{...}
	</JustDialogProvider>;

Use it as you want

Confirm sample

const  Component({})=> {
	const  justDialog=useContext(JustDialogContext);
	return <>
		<h1>Confirm Sample</h1>
		<button onClick={()=>justDialog.confirm({
			title:"Delete File",
			content:"Do you really want to delete",
			onOk:(onDismiss)=>{
				console.log("deleted");
				onDismiss();
			}
		})}>
			Click To Delete
		</button>
	</>
};

Input Sample

const  Component({defaultValue})=> {
	const  justDialog=useContext(JustDialogContext);
	return <>
		<h1>Confirm Sample</h1>
		<button onClick={()=>justDialog.input({
			title:"Rename File",
			label:"New File Name",
			defaultValue,
			validate:val=>{
				if (val && defaultValue==val)
					return [{
						dataPath:"",
						message:l`Same name is not allowed`,
						custom:true
					}];
				return  null;
			},
			transformErrors:  errors  =>  errors
				.map(i  =>({...i,message:i.message!="Same name is not allowed"
				?"File name is required"
				:i.message
			})),
			onOk:(value,onDismiss)=>{
				console.log("value is",value);
				onDismiss();
			}
		}})}>
			Click To Delete
		</button>
	</>
};

Form Sample

const  Component({defaultValue})=> {
	const  justDialog=useContext(JustDialogContext);
	return <>
		<h1>Confirm Sample</h1>
		<button onClick={()=>justDialog.input({
			title:"Rename File",
			liveValidate:true,
			schema:{
				"type": "object",
				"required": ["firstName","lastName"],
				"properties": {
					"firstName": {
						"type": "string",
						"title": "First name",
						"ui:autofocus": true
					},
					"lastName": {
						"type": "string",
						"title": "Last name"
					},
					"age": {
						"type": "integer",
						"ui:widget": "updown",
						"title": "Age of person",
						"description": "(earthian year)"
					},
					"bio": {
						"type": "string",
						"title": "Bio",
						"ui:widget": "textarea"
					},
					"password": {
						"type": "string",
						"title": "Password",
						"minLength": 3,
						"ui:widget": "password",
						"ui:help": "Hint: Make it strong!"
					},
					"telephone": {
						"type": "string",
						"title": "Telephone",
						"minLength": 10,
						"ui:inputType": "tel"
					}
				}
			},
			onOk:(value,onDismiss)=>{
				console.log("value is",value);
				onDismiss();
			}
		}})}>
			Click To Delete
		</button>
	</>
};

Projects

| Project |Platforms|Type|Definition| |-|-|-|-| |@justdialog/core|react,react-native|Core|| |@justdialog/antd|react|Widget|Ant Design Widget Set| |@justdialog/bootstrap|react|Widget|Bootstrap Widget Set| |@justdialog/fabric-ui|react|Widget|Fabric Ui Widget Set| |@justdialog/material-ui|react|Widget|Material Ui Widget Set|

React-Native Projects

Not implemented yet.

Live Playground

Not implemented yet.

License

MIT