@maif/react-forms 1.1.3 → 1.2.1

package/README.md

@@ -88,9 +88,9 @@ export const Example = () => {
   ```
 - **isMulti**: if `select` format is choosen, `isMulti` property is to render a multiselect component
 - **defaultKeyValue**: if `object` format is choosen, this default key/value is set for all added entries
-- **visible**: a boolean option to hide/display form field. It can be an object with `ref` property to get a value by reference an a key `test` as a function to test it. if there is no `test` key, it's base just on boolean value of the reference.
-- **disabled**: A boolean option to enable/disable form field
-- **label**: The label of form field (you can pass `null` to not render a label)
+- **visible**: a boolean or [functional boolean](#functional-properties) option to hide/display form field.
+- **disabled**: A boolean or [functional boolean](#functional-properties) option to enable/disable form field
+- **label**: A string or [functional string](#functional-properties) to labelize of form field (you can pass `null` to not render a label)
 - **placeholder**: the placeholder of form field
 - **defaultValue**: A default value to fill field by default
 - **help**: the text display hover a help button
@@ -114,11 +114,11 @@ export const Example = () => {
   - entry [string] is the updated entry of schema
   - value [any] is the actual value of your entry
   - previousValue [any] is the previous value of your entry
-  - rawValues [any] is the actual value of antire form
+  - rawValues [any] is the actual value of entire form
   - getValue [function] is a function to get value of a form entry
   - setValue [function] is a function to set value of a form entry
   - onSave [function] is a function to update actual entry
-  - informations [Information] is an object to get information about the actual entry (path, index and parent informations)
+  - informations [Information] is an object to get informations about the actual entry (path, index and parent informations)
 
 - **render**: a function to completely custom the rendering of form field 
   ```javascript
@@ -189,6 +189,14 @@ export const Example = () => {
   ```
 - **constraints**: a JSON array of constraints. see [constraints section](#constraints)
 
+### Functional properties
+Some schema properties can be basic value or function which return basic value. This function has an object as param with these following properties :
+- **rawValues**: the actual value of antire form
+- **value**: the actual value of the actual entry
+- **error**: the error of the entry (undefined if there is no error)
+- **informations**: an object to get informations about the actual entry (path, index and parent informations)
+- **getValue**: a function to get value of a form entry
+
 
 ## Form properties
 - **schema** (required): the form schema
@@ -229,15 +237,19 @@ httpClient = {(url, method) => fetch(url, {
 - **actions**: an object to parameter footer buttons key. By default just `submit` button is displayed.
 ```javascript
 <Form 
-  actions={
-    reset: {
-      display: false (value by default)
-      label: 'reset' (value by default)
-    },
-    submit: {
-      display: true (value by default)
-      label: "save" (value by default)
-    }
+  options={
+    autosubmit: true,
+    showErrorsOnStart: true,
+    actions={
+        reset: {
+          display: false (value by default)
+          label: 'reset' (value by default)
+        },
+        submit: {
+          display: true (value by default)
+          label: "save" (value by default)
+        }
+      }
   }
 />
 ```

package/lib/index.css

@@ -294,6 +294,10 @@
   margin-left: 5px;
 }
 
+.mrf-content_switch {
+  appearance: none;
+}
+
 .mrf-content_switch_button_on {
   width: 35px;
   height: 22px;
@@ -305,6 +309,16 @@
   justify-content: flex-end;
 }
 
+.mrf-content_switch_button_on::before {
+  content: "";
+  cursor: pointer;
+  width: 21px;
+  height: 21px;
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+}
+
 .mrf-content_switch_button_off {
   width: 35px;
   height: 22px;
@@ -316,6 +330,16 @@
   justify-content: flex-start;
 }
 
+.mrf-content_switch_button_off::before {
+  content: "";
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  cursor: pointer;
+  width: 21px;
+  height: 21px;
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+}
+
 .mrf-content_switch_button_null {
   width: 35px;
   height: 22px;
@@ -327,34 +351,12 @@
   justify-content: flex-start;
 }
 
-.mrf-switch_button_on {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  border: 1px solid var(--success-hover-color, #1e7e34);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_off {
+.mrf-content_switch_button_null::before {
+  content: "";
   background-color: var(--form-bg-color, #fff);
   border-radius: 20px;
   cursor: pointer;
-  width: 20px;
-  height: 20px;
-  border: 1px solid var(--error-hover-color, #bd2130);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_null {
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  cursor: pointer;
-  width: 22px;
-  height: 22px;
-  margin-top: -1px;
-  margin-left: -1px;
-  border: 1px solid var(--neutral-hover-color, #5c636a);
+  width: 21px;
+  height: 21px;
   box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
 }

package/lib/index.d.ts

@@ -31,8 +31,10 @@ declare const format: {
     readonly form: "form";
     readonly buttonsSelect: "buttons";
     readonly singleLineCode: "singleLineCode";
+    readonly datetime: "datetime-local";
+    readonly time: "time";
 };
-declare let formatValues: ("markdown" | "email" | "array" | "select" | "code" | "textarea" | "password" | "hidden" | "form" | "buttons" | "singleLineCode")[];
+declare let formatValues: ("markdown" | "email" | "array" | "select" | "code" | "textarea" | "password" | "hidden" | "form" | "buttons" | "singleLineCode" | "datetime-local" | "time")[];
 declare type Format = typeof formatValues[number];
 
 declare type Constraint = (resolver: any, key: string, dependencies: any[]) => AnySchema;
@@ -118,8 +120,10 @@ interface PropType {
     onChange?: (v: boolean) => void;
     value?: boolean;
     readOnly?: boolean;
+    className?: string;
+    errorDisplayed?: boolean;
 }
-declare const BooleanInput: React.ForwardRefExoticComponent<PropType & React.RefAttributes<HTMLInputElement>>;
+declare const BooleanInput: ({ onChange, value, readOnly, className, errorDisplayed }: PropType) => JSX.Element;
 
 declare const Collapse: (props: {
     initCollapsed?: boolean;
@@ -184,7 +188,7 @@ declare const ObjectInput: (props: {
 
 declare type LanguageMode = "javascript" | "css" | "json" | "html" | "markdown";
 
-declare function CodeInput({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle, setRef }: {
+declare function CodeInput({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle, className, setRef }: {
     onChange?: (v: string) => void;
     value?: string;
     mode?: LanguageMode;
@@ -200,6 +204,7 @@ declare function CodeInput({ onChange, value, mode, tabSize, readOnly, showLines
         minWidth: string;
         maxWidth: string;
     };
+    className?: string;
     setRef?: (editor: any) => void;
 }): JSX.Element;
 
@@ -248,13 +253,14 @@ interface Option {
 interface Schema {
     [key: string]: SchemaEntry;
 }
-declare type SchemaRenderType = ({ rawValues, value, onChange, error, setValue, parent }: {
+declare type SchemaRenderType = ({ rawValues, value, onChange, error, setValue, getValue, informations }: {
     rawValues?: any;
     value?: any;
     onChange?: (param: object) => void;
     error?: boolean;
-    parent?: string;
-    setValue?: (data: any) => void;
+    getValue: (entry: string) => any;
+    informations?: Informations;
+    setValue?: (key: string, data: any) => void;
 }) => JSX.Element;
 interface ConditionnalSchemaElement {
     default?: boolean;
@@ -280,21 +286,26 @@ interface SchemaEntry {
     onCreateOption?: (option: string) => any;
     isMulti?: boolean;
     defaultKeyValue?: object;
-    visible?: boolean | {
-        ref: string;
-        test: (b: any, idx?: number) => boolean;
-    };
+    visible?: boolean | ((prop: {
+        rawValues: {
+            [x: string]: any;
+        };
+        value: any;
+        informations?: Informations;
+    }) => boolean);
     disabled?: boolean | ((prop: {
         rawValues: {
             [x: string]: any;
         };
         value: any;
+        informations?: Informations;
     }) => boolean);
     label?: React.ReactNode | ((prop: {
         rawValues: {
             [x: string]: any;
         };
         value: any;
+        informations?: Informations;
     }) => React.ReactNode);
     placeholder?: string;
     defaultValue?: any;
@@ -352,7 +363,9 @@ declare const Form: React.ForwardRefExoticComponent<{
     flow: Array<string | FlowObject>;
     value?: object | undefined;
     inputWrapper?: ((props: object) => JSX.Element) | undefined;
-    onSubmit: (obj: object) => void;
+    onSubmit: (obj: {
+        [x: string]: any;
+    }) => void;
     onError?: (() => void) | undefined;
     footer?: ((props: {
         reset: () => void;
@@ -364,4 +377,4 @@ declare const Form: React.ForwardRefExoticComponent<{
     nostyle: boolean;
 } & React.RefAttributes<unknown>>;
 
-export { BooleanInput, CodeInput, Collapse, ConditionnalSchema, Flow, Form, Format, MarkdownInput, ObjectInput, Schema, SchemaEntry, SelectInput, SelectOption, SingleLineCode, Type, constraints_d as constraints, format, type, validate };
+export { BooleanInput, CodeInput, Collapse, ConditionnalSchema, Flow, Form, Format, Informations, MarkdownInput, ObjectInput, Schema, SchemaEntry, SchemaRenderType, SelectInput, SelectOption, SingleLineCode, Type, constraints_d as constraints, format, type, validate };