react-dialogger 1.1.19 → 1.1.21

package/components/Dependencies/Body.d.ts

@@ -0,0 +1,8 @@
+import { TDialogCallbackNodeFn } from "../../types/DialogTypes";
+import * as React from "react";
+import { IDialogDef } from "react-dialogger/types";
+declare const Body: ({ body, apiRef }: {
+    body: TDialogCallbackNodeFn;
+    apiRef?: IDialogDef;
+}) => React.JSX.Element;
+export default Body;

package/components/Dependencies/Body.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var Body = function (_a) {
+    var body = _a.body, apiRef = _a.apiRef;
+    if (body instanceof Function) {
+        return React.createElement("div", { ref: apiRef._dialogBodyRef, className: 'dialog-body', style: { height: '100%' } },
+            apiRef.Placeholder(apiRef._holder),
+            body(apiRef));
+    }
+    return React.createElement("div", { style: { height: '100%', padding: 10 } }, apiRef._holder ?
+        apiRef.Placeholder(apiRef._holder)
+        :
+            //@ts-ignore
+            body);
+};
+exports.default = Body;

package/components/Dependencies/DialogBody.d.ts

@@ -0,0 +1,8 @@
+import { TDialogCallbackNodeFn } from "../../types/DialogTypes";
+import * as React from "react";
+import DialogBase from "../DialogBase";
+declare const DialogBody: ({ body, apiRef }: {
+    body: TDialogCallbackNodeFn;
+    apiRef?: DialogBase;
+}) => React.JSX.Element;
+export default DialogBody;

package/components/Dependencies/DialogBody.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var DialogBody = function (_a) {
+    var body = _a.body, apiRef = _a.apiRef;
+    if (body instanceof Function) {
+        return React.createElement("div", { ref: apiRef.dialogBodyRef, className: 'dialog-body', style: { height: '100%' } },
+            apiRef.Placeholder(apiRef.holder),
+            body(apiRef));
+    }
+    return React.createElement("div", { style: { height: '100%', padding: 10 } }, apiRef.holder ?
+        apiRef.Placeholder(apiRef.holder)
+        :
+            //@ts-ignore
+            body);
+};
+exports.default = DialogBody;

package/components/DialogBase.d.ts

@@ -41,6 +41,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     protected _shInterval: number;
     protected _onClose: TDialogCallbackVoidFn;
     private _inProcess;
+    private _footeRef;
     /**
      * @deprecated
      * @see dialogOptions.snackbar.anchorOrigin */

package/components/DialogBase.js

@@ -95,6 +95,7 @@ var DialogBase = /** @class */ (function (_super) {
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
         _this._inProcess = { inProcess: false };
+        _this._footeRef = React.createRef();
         // Initialize a ref for each action dynamically
         _this.initializeActionRef = function (key) {
             if (!_this._actionRefs.hasOwnProperty(key)) {
@@ -170,7 +171,7 @@ var DialogBase = /** @class */ (function (_super) {
             return _this;
         };
         _this.setInProcess = function (process, message, holder) {
-            var _a, _b;
+            var _a, _b, _c;
             _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
             // this.setState( prevState => ({
             //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
@@ -212,7 +213,9 @@ var DialogBase = /** @class */ (function (_super) {
             if (!process) {
                 _this.snackbar.close("kInProcess");
             }
-            _this.forceUpdate();
+            // @ts-ignore
+            (_c = _this._footeRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
+            // this.forceUpdate();
             return _this;
         };
         _this.isInProcess = function () {
@@ -401,9 +404,63 @@ var DialogBase = /** @class */ (function (_super) {
                     //@ts-ignore
                     body);
         };
-        _this.Footer = function (actions) {
-            var _a, _b, _c;
-            var CustomFooter = (_a = _this._dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.footer;
+        // private Footer = (actions?: DialogAction[]) => {
+        //
+        //     const CustomFooter = this._dialogOptions.slot?.footer;
+        //
+        //
+        //     const staticProps: BaseDialogSlotProps = {
+        //         dialogValues: this.state.values,
+        //         dialogOptions: this._dialogOptions,
+        //         // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
+        //         // apiRef: { current: this as IDialogRef }
+        //         dialog: this as IDialogDef
+        //     };
+        //
+        //     let footerProps = {};
+        //
+        //     if( this._dialogOptions.slotProps.footer ){
+        //         footerProps = this._dialogOptions.slotProps.footer({
+        //             dialogValues: this.state.values,
+        //             dialogOptions: this._dialogOptions,
+        //             inProcess: this.isInProcess()
+        //         })
+        //     }
+        //
+        //
+        //     console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
+        //
+        //     return <div className={'dialog-footer'} style={this._dialogOptions.base?.footer?.style}>
+        //         <div>
+        //             <WithHeaderFooterContext {...staticProps} dialog={this}>
+        //                 {
+        //                     this._dialogOptions.slot.footer ?
+        //                         /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
+        //                         <CustomFooter {...staticProps} {...footerProps} />
+        //                         :
+        //                         <DialogProcessing />
+        //                     /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
+        //                 }
+        //             </WithHeaderFooterContext>
+        //
+        //
+        //         </div>
+        //         { this.Actions(actions)}
+        //     </div>
+        //
+        // };
+        _this.Footer = React.forwardRef(function (_a, ref) {
+            var _b, _c, _d;
+            var actions = _a.actions;
+            var CustomFooter = (_b = _this._dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.footer;
+            // Imperative handle
+            var _e = React.useState(false), inProcess = _e[0], setInProcess = _e[1];
+            var setProcessing = function (inProcess) {
+                setInProcess(inProcess);
+            };
+            React.useImperativeHandle(ref, function () { return ({
+                setProcessing: setProcessing
+            }); });
             var staticProps = {
                 dialogValues: _this.state.values,
                 dialogOptions: _this._dialogOptions,
@@ -419,8 +476,8 @@ var DialogBase = /** @class */ (function (_super) {
                     inProcess: _this.isInProcess()
                 });
             }
-            console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik');
-            return React.createElement("div", { className: 'dialog-footer', style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.footer) === null || _c === void 0 ? void 0 : _c.style },
+            console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
+            return React.createElement("div", { className: 'dialog-footer', style: (_d = (_c = _this._dialogOptions.base) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.style },
                 React.createElement("div", null,
                     React.createElement(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this }), _this._dialogOptions.slot.footer ?
                         /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
@@ -430,7 +487,7 @@ var DialogBase = /** @class */ (function (_super) {
                     /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
                     )),
                 _this.Actions(actions));
-        };
+        });
         _this.Actions = function (actions) {
             return React.createElement("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } }, actions.map(function (action, index) {
                 // const ref = this.slotActionsRef[index];
@@ -493,7 +550,7 @@ var DialogBase = /** @class */ (function (_super) {
                     React.createElement(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack },
                         (_this._header || _this._dialogOptions.slot.header) && _this.Header(header),
                         _this.Body(body),
-                        _this.Footer(actions)),
+                        React.createElement(_this.Footer, { ref: _this._footeRef, actions: actions })),
                     (_this._dialogOptions.base.resizeable) &&
                         React.createElement(React.Fragment, null,
                             React.createElement("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown },
@@ -882,7 +939,14 @@ var DialogBase = /** @class */ (function (_super) {
         this._dom = document.createElement('div');
         this._dom.setAttribute('role', 'presentation');
         this._dom.classList.add('appinsource-dialog-root');
-        document.body.appendChild(this._dom);
+        // Find root element
+        var rootElement = document.getElementById('root');
+        if (rootElement) {
+            rootElement.appendChild(this._dom);
+        }
+        else {
+            document.body.appendChild(this._dom);
+        }
         var root = (0, client_1.createRoot)(this._dom);
         var props = {
             ref: this._innerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/types/FormikProps.d.ts

@@ -0,0 +1,302 @@
+import * as React from 'react';
+import {JSX} from "react";
+
+export interface FieldProps<V = any, FormValues = any> {
+    field: FieldInputProps<V>;
+    form: FormikProps<FormValues>;
+    meta: FieldMetaProps<V>;
+}
+interface FieldConfig<V = any> {
+    /**
+     * Field component to render. Can either be a string like 'select' or a component.
+     */
+    component?: string | React.ComponentType<FieldProps<V>> | React.ComponentType | React.ForwardRefExoticComponent<any>;
+    /**
+     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+     */
+    as?: React.ComponentType<FieldProps<V>['field']> | string | React.ComponentType | React.ForwardRefExoticComponent<any>;
+    /**
+     * Render prop (works like React router's <Route render={props =>} />)
+     * @deprecated
+     */
+    render?: (props: FieldProps<V>) => React.ReactNode;
+    /**
+     * Children render function <Field name>{props => ...}</Field>)
+     */
+    children?: ((props: FieldProps<V>) => React.ReactNode) | React.ReactNode;
+    /**
+     * Validate a single field value independently
+     */
+    validate?: FieldValidator;
+    /**
+     * Used for 'select' and related input types.
+     */
+    multiple?: boolean;
+    /**
+     * Field name
+     */
+    name: string;
+    /** HTML input type */
+    type?: string;
+    /** Field value */
+    value?: any;
+    /** Inner ref */
+    innerRef?: (instance: any) => void;
+}
+export type FieldAttributes<T> = {
+    className?: string;
+} & GenericFieldHTMLAttributes & FieldConfig<T> & T & {
+    name: string;
+};
+export type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;
+export declare function useField<Val = any>(propsOrFieldName: string | FieldHookConfig<Val>): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>];
+export declare function Field({ validate, name, render, children, as: is, // `as` is reserved in typescript lol
+                                  component, className, ...props }: FieldAttributes<any>): any;
+
+
+/**
+ * Values of fields in the form
+ */
+interface FormikValues {
+    [field: string]: any;
+}
+/**
+ * An object containing error messages whose keys correspond to FormikValues.
+ * Should always be an object of strings, but any is allowed to support i18n libraries.
+ */
+type FormikErrors<Values> = {
+    [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikErrors<Values[K][number]>[] | string | string[] : string | string[] : Values[K] extends object ? FormikErrors<Values[K]> : string;
+};
+/**
+ * An object containing touched state of the form whose keys correspond to FormikValues.
+ */
+type FormikTouched<Values> = {
+    [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikTouched<Values[K][number]>[] : boolean : Values[K] extends object ? FormikTouched<Values[K]> : boolean;
+};
+/**
+ * Formik state tree
+ */
+interface FormikState<Values> {
+    /** Form values */
+    values: Values;
+    /** map of field names to specific error for that field */
+    errors: FormikErrors<Values>;
+    /** map of field names to whether the field has been touched */
+    touched: FormikTouched<Values>;
+    /** whether the form is currently submitting */
+    isSubmitting: boolean;
+    /** whether the form is currently validating (prior to submission) */
+    isValidating: boolean;
+    /** Top level status state, in case you need it */
+    status?: any;
+    /** Number of times user tried to submit the form */
+    submitCount: number;
+}
+/**
+ * Formik computed properties. These are read-only.
+ */
+interface FormikComputedProps<Values> {
+    /** True if any input has been touched. False otherwise. */
+    readonly dirty: boolean;
+    /** True if state.errors is empty */
+    readonly isValid: boolean;
+    /** The initial values of the form */
+    readonly initialValues: Values;
+    /** The initial errors of the form */
+    readonly initialErrors: FormikErrors<Values>;
+    /** The initial visited fields of the form */
+    readonly initialTouched: FormikTouched<Values>;
+    /** The initial status of the form */
+    readonly initialStatus?: any;
+}
+/**
+ * Formik state helpers
+ */
+interface FormikHelpers<Values> {
+    /** Manually set top level status. */
+    setStatus: (status?: any) => void;
+    /** Manually set errors object */
+    setErrors: (errors: FormikErrors<Values>) => void;
+    /** Manually set isSubmitting */
+    setSubmitting: (isSubmitting: boolean) => void;
+    /** Manually set touched object */
+    setTouched: (touched: FormikTouched<Values>, shouldValidate?: boolean) => Promise<void | FormikErrors<Values>>;
+    /** Manually set values object  */
+    setValues: (values: React.SetStateAction<Values>, shouldValidate?: boolean) => Promise<void | FormikErrors<Values>>;
+    /** Set value of form field directly */
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors<Values>>;
+    /** Set error message of a form field directly */
+    setFieldError: (field: string, message: string | undefined) => void;
+    /** Set whether field has been touched directly */
+    setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => Promise<void | FormikErrors<Values>>;
+    /** Validate form values */
+    validateForm: (values?: any) => Promise<FormikErrors<Values>>|void;
+    /** Validate field value */
+    validateField: (field: string) => Promise<void> | Promise<string | undefined>;
+    /** Reset form */
+    resetForm: (nextState?: Partial<FormikState<Values>>) => void;
+    /** Submit the form imperatively */
+    submitForm: () => void; // Promise<void>;
+    /** Set Formik state, careful! */
+    setFormikState: (f: FormikState<Values> | ((prevState: FormikState<Values>) => FormikState<Values>), cb?: () => void) => void;
+}
+/**
+ * Formik form event handlers
+ */
+interface FormikHandlers {
+    /** Form submit handler */
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
+    /** Reset form event handler  */
+    handleReset: (e?: React.SyntheticEvent<any>) => void;
+    handleBlur: {
+        /** Classic React blur handler, keyed by input name */
+        (e: React.FocusEvent<any>): void;
+        /** Preact-like linkState. Will return a handleBlur function. */
+            <T = string | any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    handleChange: {
+        /** Classic React change handler, keyed by input name */
+        (e: React.ChangeEvent<any>): void;
+        /** Preact-like linkState. Will return a handleChange function.  */
+            <T = string | React.ChangeEvent<any>>(field: T): T extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
+    };
+    getFieldProps: <Value = any>(props: string | FieldConfig<Value>) => FieldInputProps<Value>;
+    getFieldMeta: <Value>(name: string) => FieldMetaProps<Value>;
+    getFieldHelpers: <Value = any>(name: string) => FieldHelperProps<Value>;
+}
+/**
+ * Base formik configuration/props shared between the HoC and Component.
+ */
+interface FormikSharedConfig<Props = {}> {
+    /** Tells Formik to validate the form on each input's onChange event */
+    validateOnChange?: boolean;
+    /** Tells Formik to validate the form on each input's onBlur event */
+    validateOnBlur?: boolean;
+    /** Tells Formik to validate upon mount */
+    validateOnMount?: boolean;
+    /** Tell Formik if initial form values are valid or not on first render */
+    isInitialValid?: boolean | ((props: Props) => boolean);
+    /** Should Formik reset the form when new initialValues change */
+    enableReinitialize?: boolean;
+}
+/**
+ * <Formik /> props
+ */
+interface FormikConfig<Values> extends FormikSharedConfig {
+    /**
+     * Form component to render
+     */
+    component?: React.ComponentType<FormikProps<Values>>;
+    /**
+     * Render prop (works like React router's <Route render={props =>} />)
+     * @deprecated
+     */
+    render?: (props: FormikProps<Values>) => React.ReactNode;
+    /**
+     * React children or child render callback
+     */
+    children?: ((props: FormikProps<Values>) => React.ReactNode) | React.ReactNode;
+    /**
+     * Initial values of the form
+     */
+    initialValues: Values;
+    /**
+     * Initial status
+     */
+    initialStatus?: any;
+    /** Initial object map of field names to specific error for that field */
+    initialErrors?: FormikErrors<Values>;
+    /** Initial object map of field names to whether the field has been touched */
+    initialTouched?: FormikTouched<Values>;
+    /**
+     * Reset handler
+     */
+    onReset?: (values: Values, formikHelpers: FormikHelpers<Values>) => void;
+    /**
+     * Submission handler
+     */
+    onSubmit: (values: Values, formikHelpers: FormikHelpers<Values>) => void | Promise<any>;
+    /**
+     * A Yup Schema or a function that returns a Yup schema
+     */
+    validationSchema?: any | (() => any);
+    /**
+     * Validation function. Must return an error object or promise that
+     * throws an error object where that object keys map to corresponding value.
+     */
+    validate?: (values: Values) => void | object | Promise<FormikErrors<Values>>;
+    /** Inner ref */
+    innerRef?: React.Ref<FormikProps<Values>>;
+
+}
+/**
+ * State, handlers, and helpers made available to form component or render prop
+ * of <Formik/>.
+ */
+export type FormikProps<Values> = FormikSharedConfig & FormikState<Values> & FormikHelpers<Values> & FormikHandlers & FormikComputedProps<Values> & FormikRegistration
+/** Internal Formik registration methods that get passed down as props */
+interface FormikRegistration {
+    registerField: (name: string, fns: {
+        validate?: FieldValidator;
+    }) => void;
+    unregisterField: (name: string) => void;
+}
+/**
+ * State, handlers, and helpers made available to Formik's primitive components through context.
+ */
+type FormikContextType<Values> = FormikProps<Values> & Pick<FormikConfig<Values>, 'validate' | 'validationSchema'>;
+interface SharedRenderProps<T> {
+    /**
+     * Field component to render. Can either be a string like 'select' or a component.
+     */
+    component?: keyof JSX.IntrinsicElements | React.ComponentType<T | void>;
+    /**
+     * Render prop (works like React router's <Route render={props =>} />)
+     */
+    render?: (props: T) => React.ReactNode;
+    /**
+     * Children render function <Field name>{props => ...}</Field>)
+     */
+    children?: (props: T) => React.ReactNode;
+}
+type GenericFieldHTMLAttributes = JSX.IntrinsicElements['input'] | JSX.IntrinsicElements['select'] | JSX.IntrinsicElements['textarea'];
+/** Field metadata */
+interface FieldMetaProps<Value> {
+    /** Value of the field */
+    value: Value;
+    /** Error message of the field */
+    error?: string;
+    /** Has the field been visited? */
+    touched: boolean;
+    /** Initial value of the field */
+    initialValue?: Value;
+    /** Initial touched state of the field */
+    initialTouched: boolean;
+    /** Initial error message of the field */
+    initialError?: string;
+}
+/** Imperative handles to change a field's value, error and touched */
+interface FieldHelperProps<Value> {
+    /** Set the field's value */
+    setValue: (value: Value, shouldValidate?: boolean) => Promise<void | FormikErrors<Value>>;
+    /** Set the field's touched value */
+    setTouched: (value: boolean, shouldValidate?: boolean) => Promise<void | FormikErrors<Value>>;
+    /** Set the field's error value */
+    setError: (value: string | undefined) => void;
+}
+/** Field input value, name, and event handlers */
+interface FieldInputProps<Value> {
+    /** Value of the field */
+    value: Value;
+    /** Name of the field */
+    name: string;
+    /** Multiple select? */
+    multiple?: boolean;
+    /** Is the field checked? */
+    checked?: boolean;
+    /** Change event handler */
+    onChange: FormikHandlers['handleChange'];
+    /** Blur event handler */
+    onBlur: FormikHandlers['handleBlur'];
+}
+type FieldValidator = (value: any) => string | void | Promise<string | void>;