-
-
Simple dropdown
- setIsOpen(true)}>
- Simple dropdown
-
-
- {
- // eslint-disable-next-line no-console
- console.info('onSelect', args);
- setIsOpen(false);
- }}
- />
-
+
+
Simple dropdown
+ setIsOpen(true)}>
+ Simple dropdown
+
+
+ {
+ // eslint-disable-next-line no-console
+ console.info('onSelect', args);
+ setIsOpen(false);
+ }}
+ />
+
+ );
+}
+
+function DropdownWithRef() {
+ const [isOpen, setIsOpen] = useState();
+ const [filterString, setFilterString] = useState('');
+ const listContainerRef = useRef(null);
+
+ const filter = useCallback(
+ (item) => {
+ const itemValue = JSON.stringify(item.label).toLowerCase();
+ const searchValue = filterString.toLowerCase();
+
+ return itemValue.includes(searchValue);
+ },
+ [filterString]
+ );
+
+ useEffect(() => console.log('listContainerRef?.current: ', listContainerRef?.current), [filterString]);
+
+ return (
+
+
Dropdown with ref
+ setIsOpen(true)}>
+ Dropdown with ref
+
+
+ {
+ // eslint-disable-next-line no-console
+ console.info('onSelect', args);
+ setIsOpen(false);
+ }}
+ listContainerRef={listContainerRef}
+ />
);
}
diff --git a/demo/Form2Examples.jsx b/demo/Form2Examples.jsx
deleted file mode 100644
index 5dc2b07..0000000
--- a/demo/Form2Examples.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable no-console */
-import React, { useEffect, useState } from 'react';
-import { Form2, FormInput2, FormSelect2, FormSwitch2, useFormControl2, useFormEffect } from '../dist/main';
-
-export function Form2Examples() {
- return (
-
- Alternative Form implementation
-
console.log('onSubmit', data)}
- onChange={(data) => console.log('onChange', data)}
- transform={(formData) => {
- console.log('transform', formData);
-
- return {
- __v: formData.__v ? formData.__v + 1 : 1,
- attrB: `${formData.attrB || ''}A`,
- Obj: {
- y: `${formData.Obj.y || ''}X`,
- w: {
- z: formData.__v ? formData.__v * 2 : 1,
- },
- t: formData.__v % 2 ? null : undefined,
- u: new Date(),
- },
- arr: formData.arr.map((v) => parseFloat(v) + 1),
- arrObj: formData.arrObj.map((v) => {
- v.o = parseFloat(v.o) ** 2;
-
- return v;
- }),
- };
- }}
- >
-
-
- Array
-
-
- Array of objects
-
-
- AttrA
-
-
- AttrB
-
-
- AttrC
-
-
- AttrD
-
-
- Version
-
-
-
- Observer
-
- Submit
-
-
- );
-}
-
-function FormVersion() {
- const { getValue } = useFormControl2('__v');
-
- return
{getValue() || ''}
;
-}
-
-function FormArray() {
- const { getValue, setValue, isRegistered } = useFormControl2('arr');
-
- useEffect(() => {
- if (isRegistered()) {
- console.log('initialized value [arr] :>> ', getValue());
- } else {
- console.log('uninitialized value [arr] :>> ', getValue());
- }
- }, [getValue, setValue, isRegistered]);
-
- return (getValue() || []).map((v, index) =>
);
-}
-
-function FormArrayOfObjects() {
- const { getValue } = useFormControl2('arrObj');
-
- return (getValue() || []).map((v, index) =>
);
-}
-
-function FormObserver() {
- const [state, setState] = useState(0);
-
- useFormEffect('Obj', (data) => {
- console.log('FormObserver :>> ', data);
- setState((p) => p + 1);
- });
-
- return
{state}
;
-}
diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 800411f..e460632 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -1,5 +1,5 @@
/* eslint-disable no-console */
-import React from 'react';
+import React, { useMemo, useState } from 'react';
import {
Form,
FormGroupInput,
@@ -9,23 +9,127 @@ import {
FormGroupRadio,
FormGroupTextarea,
FormGroupAutocomplete,
+ FormGroupDropdown,
+ useFormControl,
+ FormGroupAutocompleteTag,
+ Table,
+ FormAutocompleteTag,
+ FormGroupTable,
+ Dialog,
// eslint-disable-next-line import/no-unresolved
} from '../dist/main';
export function FormExamples() {
+ const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false);
+ const [changeCustomValidation, setChangeCustomValidation] = useState(false);
+ const [useCustomActions, setUseCustomActions] = useState(false);
+
+ const validations = useMemo(
+ () => ({
+ numberField: [
+ {
+ message: 'Must be filled if textField is not empty',
+ validate(value, formData) {
+ return !formData.textField || value;
+ },
+ },
+ ],
+ autocompleteField: [
+ {
+ message: 'Must be filled',
+ validate(value) {
+ return value;
+ },
+ },
+ ],
+ selectField: [
+ {
+ message: 'Must be filled if autocompleteField1 is empty',
+ validate(value, formData) {
+ return formData.autocompleteField1 || value;
+ },
+ },
+ ],
+ switchField: [
+ {
+ message: 'Must be filled if selectField is empty',
+ validate(value, formData) {
+ return formData.selectField || value;
+ },
+ },
+ ],
+ checkboxField: [
+ {
+ message: 'Must be filled if switchField is empty',
+ validate(value, formData) {
+ return formData.switchField || value;
+ },
+ },
+ ],
+ radioField: [
+ {
+ message: 'Must be filled if checkboxField is empty',
+ validate(value, formData) {
+ return formData.checkboxField || value;
+ },
+ },
+ ],
+ textareaField: [
+ {
+ message: 'Must be filled if radioField is empty',
+ validate(value, formData) {
+ return formData.radioField || value;
+ },
+ },
+ ],
+ variableCustomValidation: [
+ {
+ message: `Must be filled with "${changeCustomValidation ? 'b' : 'a'}"`,
+ validate(value, formData) {
+ return changeCustomValidation ? value === 'b' : value === 'a';
+ },
+ },
+ ],
+ undefinedMessageField: [
+ {
+ validate(value) {
+ return value;
+ },
+ },
+ ],
+ formTable2: [
+ {
+ message: 'Must have more than 2 itens',
+ validate(value) {
+ return value?.length > 2;
+ },
+ },
+ ],
+ }),
+ [changeCustomValidation]
+ );
+
return (
@@ -257,7 +608,7 @@ export function FormExamples() {
- console.log('TESTE')}
afterChange={console.log.bind(console, 'afterChange checkbox')}
/>
@@ -334,6 +686,8 @@ export function FormExamples() {
/>
+
+
{[0, 1].map((index) => (
@@ -348,6 +702,264 @@ export function FormExamples() {
))}
+
+
console.log('afterChange dropdown')}
+ template={(label, value) => {
+ return value ? (
+
+
{label.title ?? '-'}
+
{label.subtitle ?? '-'}
+
Value one,
+ },
+ {
+ value: '02',
+ label: Value two
,
+ },
+ {
+ value: '03',
+ label: Value three
,
+ },
+ ]}
+ placeholder="Select one value"
+ includeEmptyItem={false}
+ menuClassName="p-4 w-100"
+ />
+
+ FormTable
+
+
+
+
+ Reset form
+
+ );
+};
+
+const ClearForm = () => {
+ const formControl = useFormControl();
+
+ const clear = () => {
+ console.log('clear form - sets empty state');
+
+ formControl.clearFormData();
+ };
+
+ return (
+
+ Clear form
+
+ );
+};
+
+const FormSwitchExample = () => {
+ const autocompleteField1FormControl = useFormControl('autocompleteField1');
+
+ const afterChange = (value) => {
+ console.log('afterChange switch');
+
+ if (value) {
+ autocompleteField1FormControl.setValue({ _id: '3456', name: '3456 name' });
+ } else {
+ autocompleteField1FormControl.setValue(null);
+ }
+ };
+
+ return (
+ console.log('TESTE')}
+ />
+ );
+};
+
+function FormAutocompleteTagsWithCustomLabel() {
+ const autocompleteTag6FormControl = useFormControl('autocompleteTag7');
+ const tags = useMemo(() => autocompleteTag6FormControl.getValue() || []);
+
+ return (
+
+
+
Autocomplete with tags - Custom label:
+
+
+
+
console.log('formTable', args)}
+ tableProps={{
+ actionLabel: 'Actions',
+ columns: [
+ {
+ attribute: 'name',
+ label: 'Name',
+ },
+ {
+ attribute: 'number',
+ label: 'Number',
+ },
+ ],
+ }}
+ getRemoveComponent={(removeItem) => removeItem()}> }
+ getAddItemComponent={(addItem) => removeItem()}> }
+ getAddItemComponent={(addItem) => (
+
+ )}
+ >
+
+ Add item
+
+
+ );
+}
diff --git a/demo/ListGroupExamples.jsx b/demo/ListGroupExamples.jsx
index e95ad5a..0b5f0c8 100644
--- a/demo/ListGroupExamples.jsx
+++ b/demo/ListGroupExamples.jsx
@@ -21,6 +21,34 @@ const items = [
},
];
+const itemsWithBackgrounds = [
+ {
+ title: 'Primary Item',
+ description: 'This is a primary colored list item.',
+ background: 'primary',
+ },
+ {
+ title: 'Success Item',
+ description: 'This is a success colored list item.',
+ background: 'success',
+ },
+ {
+ title: 'Danger Item',
+ description: 'This is a danger colored list item.',
+ background: 'danger',
+ },
+ {
+ title: 'Warning Item',
+ description: 'This is a warning colored list item.',
+ background: 'warning',
+ },
+ {
+ title: 'Info Item',
+ description: 'This is an info colored list item.',
+ background: 'info',
+ },
+];
+
export function ListGroupExamples() {
return (
@@ -95,6 +123,31 @@ export function ListGroupExamples() {
linked={true}
/>
+
+
List group with item backgrounds
+ (
+ <>
+ {item.title}
+
+
Linked list group with backgrounds
+ (
+ <>
+ {item.title}
);
}
diff --git a/demo/TableExamples.jsx b/demo/TableExamples.jsx
index 6ea33c2..941104f 100644
--- a/demo/TableExamples.jsx
+++ b/demo/TableExamples.jsx
@@ -1,7 +1,7 @@
/* eslint-disable no-console */
import React, { useState } from 'react';
// eslint-disable-next-line import/no-unresolved
-import { Table, Form, FormCheckbox } from '../dist/main';
+import { Table, SortableTable, Form, FormCheckbox } from '../dist/main';
import { stopPropagation } from '../src/utils/event-handlers';
export function TableExamples() {
@@ -87,6 +87,7 @@ export function TableExamples() {
{
attribute: 'selected',
label: '#',
+ width: '10%',
format(_, __, index) {
return (
@@ -98,6 +99,7 @@ export function TableExamples() {
{
attribute: 'a',
label: 'A',
+ width: '40%',
format(v) {
return `${v}*`;
},
@@ -105,6 +107,7 @@ export function TableExamples() {
{
attribute: 'b',
label: 'B',
+ width: '30%',
format(v, doc) {
return v + doc.a;
},
@@ -112,6 +115,7 @@ export function TableExamples() {
{
attribute: 'c',
label: 'C',
+ width: '20%',
format(_, __, docIndex) {
return {docIndex + 1} ;
},
@@ -218,6 +222,163 @@ export function TableExamples() {
title: 'Subtract',
content: {doc.b - docIndex}? ,
},
+ (doc, index) => {`${doc.c}-${index}`} ,
+ ]}
+ />
+
+
+
Sortable Table
+
+
+
+
+
+
Sortable Table with Custom Header
+
+
+ column?.isSortable !== false ? (
+ sortBy === attribute ? (
+ sortOrder === 'ASC' ? (
+
+
+
Sortable Table with no default sorting
+
+
+
+
Table with column hideIf
+
+
true,
+ },
+ {
+ attribute: 'b',
+ label: 'B',
+ },
+ {
+ attribute: 'c',
+ label: 'C',
+ },
+ ]}
+ docs={[
+ { a: 'B', b: 'G', c: 'Y' },
+ { a: 'C', b: 'I', c: 'Z' },
+ { a: 'A', b: 'H', c: 'X' },
+ { a: 'D', b: 'L', c: 'T' },
+ ]}
+ />
+
+
+
Table with dataTest setted
+
+
@@ -81,6 +81,22 @@ export function TabsExamples() {
{ title: 'C', content:
+
+
+
+
Hide Tabs
+
+ <>
{header}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iusto dolores voluptatum sunt. Assumenda, vero esse?
Numquam alias repellendus, quaerat beatae expedita inventore recusandae, molestiae earum vel illo provident
ducimus?
-
+
);
}
diff --git a/demo/ToastWithCustomState.jsx b/demo/ToastWithCustomState.jsx
new file mode 100644
index 0000000..84a6ee4
--- /dev/null
+++ b/demo/ToastWithCustomState.jsx
@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { ToastsContainer } from '../dist/main';
+import { ToastsExamples } from './ToastsExamples';
+
+export function ToastWithCustomState() {
+ const [customToasts, setCustomToasts] = useState([]);
+ const [toastId, setToastId] = useState(0);
+
+ const onClose = useCallback((toast) => setCustomToasts((last) => last.filter(({ _id }) => _id !== toast?._id)), []);
+ const addToast = useCallback(
+ (message, shouldAutoRemove = true) => {
+ const newToast = {
+ _id: toastId,
+ message,
+ type: 'info',
+ position: 'TOP_RIGHT',
+ };
+
+ if (!shouldAutoRemove) {
+ newToast.autoClose = false;
+ }
+
+ setCustomToasts((last) => [...last, newToast]);
+
+ if (shouldAutoRemove) {
+ setTimeout(() => {
+ setCustomToasts((last) => last.filter(({ _id }) => _id !== toastId));
+ }, [5000]);
+ }
+
+ setToastId((last) => last + 1);
+ },
+ [toastId]
+ );
+
+ return (
+
+ Toasts with custom state
+
+
+ addToast('toast with custom state')}>
+ Show Toast
+
+ addToast(`Unique toast ${new Date().getTime()}`)}
+ >
+ Show Unique Toast
+
+ addToast(`Unique toast without autoclose ${new Date().getTime()}`, false)}
+ >
+ Show Unique Toast without autoclose
+
+
+
+
+
+
+ Toasts with text prepended
+
+
+
+ );
+}
diff --git a/demo/UncontrolledFormExamples.jsx b/demo/UncontrolledFormExamples.jsx
new file mode 100644
index 0000000..0675b31
--- /dev/null
+++ b/demo/UncontrolledFormExamples.jsx
@@ -0,0 +1,1199 @@
+/* eslint-disable no-console */
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+ UncontrolledForm,
+ UncontrolledFormGroupCheckbox,
+ UncontrolledFormGroupInput,
+ UncontrolledFormGroupInputMask,
+ UncontrolledFormGroupSelect,
+ UncontrolledFormGroupSwitch,
+ UncontrolledFormGroupTextarea,
+ UncontrolledFormInput,
+ useUncontrolledFormControl,
+ useUncontrolledFormEffect,
+ UncontrolledFormGroupAutocomplete,
+ UncontrolledFormGroupDropdown,
+ UncontrolledFormGroupRadio,
+ UncontrolledFormGroupTable,
+ Dialog,
+} from '../dist/main';
+
+export function UncontrolledFormExamples() {
+ const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false);
+ const [transform, setTransform] = useState(null);
+
+ const transform2 = useCallback((formData) => {
+ console.log('transform2', formData);
+ }, []);
+
+ return (
+
+
Alternative Form implementation
+
console.log('onSubmit', data)}
+ onChange={(data) => console.log('onChange', data)}
+ transform={
+ transform === 2
+ ? transform2
+ : (formData) => {
+ console.log('transform', formData);
+
+ return {
+ __v: formData.__v ? formData.__v + 1 : 1,
+ attrB: `${formData.attrB || ''}A`,
+ Obj: {
+ y: `${formData.Obj.y || ''}X`,
+ w: {
+ z: formData.__v ? formData.__v * 2 : 1,
+ },
+ t: formData.__v % 2 ? null : undefined,
+ u: new Date(),
+ },
+ arr: formData.arr.map((v) => parseFloat(v) + 1),
+ arrObj: formData.arrObj.map((v) => {
+ v.o = parseFloat(v.o) ** 2;
+
+ return v;
+ }),
+ };
+ }
+ }
+ customValidation={bootstrapFormValidation}
+ validations={{
+ autocomplete2Field2: [
+ {
+ message: 'Must be filled if Autocomplete Object Options is empty',
+ validate(value, formData) {
+ return formData.autocomplete2Field1 || value;
+ },
+ },
+ ],
+ attrB: [
+ {
+ message: 'Must be filled if AttrA is not empty',
+ validate(value, formData) {
+ return !formData.attrA || value;
+ },
+ },
+ ],
+ formTable2: [
+ {
+ message: 'Must have more than 2 itens',
+ validate(value) {
+ return value?.length > 2;
+ },
+ },
+ ],
+ }}
+ >
+ Form configuration:
+ setBootstrapFormValidation(value)}
+ />
+
+ Array
+
+
+ Array of objects
+
+
+
+
+
+
+
+ ({
+ value: index + 1,
+ label: `${index + 1}${index + 2}${index + 3}${index + 4}`,
+ }))}
+ placeholder="Type some numbers"
+ template={(option) => (
+ <>
+ {option} - {option}
+
+ )}
+ required={() => true}
+ />
+
+ {
+ console.log(oldValue, ' changed to :>> ', newValue);
+ }}
+ onClearSearch={() => {
+ console.log('search has been cleared');
+ }}
+ />
+
+ {
+ console.log(oldValue, ' changed to :>> ', newValue);
+ }}
+ onClearSearch={() => {
+ console.log('search has been cleared');
+ }}
+ template={(label, value) => (
+
+
{value?.attribute1}
+
{value?.attribute2}
+
{value?.attribute3}
+
+ Version
+
+
+ {
+ console.log(oldValue, ' changed to :>> ', newValue);
+ }}
+ />
+
+
+ Observer
+
+
+ Observer 2
+
+
+ value,
+ }}
+ inputAttrs={{
+ afterChange(newValue, oldValue) {
+ console.log(oldValue, ' changed to :>> ', newValue);
+
+ console.log('afterChange in decimalMask :>> ', newValue);
+ },
+ }}
+ />
+
+ dateMask(value).maskedValue,
+ }}
+ />
+
+ value,
+ }}
+ />
+
+ value,
+ }}
+ />
+
+ ({ rawValue: v, maskedValue: v }),
+ format: (v) => v,
+ }}
+ />
+
+ {linha}
}
+ />
+ {linha}
}
+ disabled
+ />
+
+ SetValue Test
+
+ (transform === 2 ? setTransform(null) : setTransform(2))}
+ >
+ Toggle transform
+
+
+ FormInput
+
+
+
+ FormAutocomplete
+
+
+
+ FormCheckbox
+
+
+
+ FormDropdown
+
+
+
+ FormInputMask
+
+
+
+ FormRadio
+
+
+
+ FormSelect
+
+
+
+ FormSwitch
+
+
+
+ FormTextarea
+
+
+
+ FormTable
+
+
+
+
{getValue() || ''}
;
+}
+
+function FormArray() {
+ const formArrayState = useState();
+ const { getValue, setValue, isRegistered } = useUncontrolledFormControl('arr', 'array', { state: formArrayState });
+ const [refresh, shouldRefresh] = useState(false);
+
+ useEffect(() => {
+ if (isRegistered()) {
+ console.log('initialized value [arr] :>> ', getValue());
+ } else {
+ console.log('uninitialized value [arr] :>> ', getValue());
+ }
+ }, [getValue, setValue, isRegistered]);
+
+ const remove = useCallback((index) => {
+ const newArray = [...getValue()];
+
+ newArray.splice(index, 1);
+
+ setValue(newArray);
+
+ shouldRefresh(true);
+
+ setTimeout(() => {
+ shouldRefresh(false);
+ }, 100);
+ });
+
+ const newElement = useCallback(() => {
+ setValue((prevValue) => [...prevValue, Math.max(...prevValue) + 1]);
+ }, [setValue]);
+
+ if (refresh) {
+ return <>;
+ }
+
+ return (
+ <>
+ {(getValue() || []).map((v, index) => (
+
+ remove(index)}>
+ Remove
+
+
+ ))}
+
+
+
+ New
+
+
+
+ );
+}
+
+function FormArrayOfObjects() {
+ const formArrayOfObjectsState = useState();
+ const { getValue } = useUncontrolledFormControl('arrObj', 'array', { state: formArrayOfObjectsState });
+
+ return (getValue() || []).map((v, index) => {state}
;
+}
+
+function decimalMask(value) {
+ const number = parseFloat(value);
+ let maskedValue = String(value);
+
+ maskedValue = maskedValue.replace(/\D/g, '');
+ maskedValue = maskedValue.replace(/(\d)(\d{3})$/, '$1.$2');
+
+ return {
+ rawValue: number,
+ maskedValue,
+ };
+}
+
+function dateMask(value) {
+ let maskedValue = String(value);
+
+ maskedValue = maskedValue.replace(/\D/g, '');
+
+ maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1/$2');
+ maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1/$2');
+
+ return {
+ rawValue: maskedValue,
+ maskedValue,
+ };
+}
+
+function hourMask(v) {
+ let maskedValue = v;
+
+ maskedValue = maskedValue.replace(/\D/g, '');
+ maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1:$2');
+
+ return { rawValue: maskedValue, maskedValue };
+}
+
+function currencyMask(v) {
+ const rawValue = parseFloat(v);
+ let maskedValue = v;
+
+ maskedValue = maskedValue.replace(/\D/g, '');
+ maskedValue = maskedValue.replace(/(\d)(\d{2})$/, '$1.$2');
+ maskedValue = maskedValue.replace(/(?=(\d{3})+(\D))\B/g, ',');
+
+ return { maskedValue, rawValue };
+}
+
+function FormObserver2() {
+ const [toggleName, setToggleName] = useState(false);
+
+ return (
+
+
+ setToggleName(v)}
+ />
+
+
+
+
+
{`Input observed "${name}"`}
+
{`Value "${value}"`}
+
+
+
+
+
+
+
+ );
+}
+
+function FormInputSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormAutocompleteSetValueTeste1({}) {
+ const autoComplete2 = useUncontrolledFormControl('autoComplete2');
+ const autoComplete3 = useUncontrolledFormControl('autoComplete3');
+
+ const afterChange = useCallback((v) => {
+ autoComplete2.setValue(v);
+ autoComplete3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormAutocompleteSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormCheckboxSetValueTeste1({}) {
+ const checkbox2 = useUncontrolledFormControl('checkbox2');
+ const checkbox3 = useUncontrolledFormControl('checkbox3');
+
+ const afterChange = useCallback((v) => {
+ checkbox2.setValue(v);
+ checkbox3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormCheckboxSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormDropdownSetValueTeste1({}) {
+ const dropdown2 = useUncontrolledFormControl('dropdown2');
+ const dropdown3 = useUncontrolledFormControl('dropdown3');
+
+ const afterChange = useCallback((v) => {
+ dropdown2.setValue(v);
+ dropdown3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+ {linha} }
+ />
+
+
+ );
+}
+
+function FormDropdownSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormInputMaskSetValueTeste1({}) {
+ const datemask2 = useUncontrolledFormControl('datemask2');
+ const datemask3 = useUncontrolledFormControl('datemask3');
+
+ const afterChange = useCallback((v) => {
+ datemask2.setValue(v);
+ datemask3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+ dateMask(value).maskedValue,
+ }}
+ inputAttrs={{
+ maxLength: '10',
+ afterChange,
+ }}
+ />
+
+
+ dateMask(value).maskedValue,
+ }}
+ inputAttrs={{
+ maxLength: '10',
+ }}
+ />
+
+
+ );
+}
+
+function FormInputMaskSetValueTeste2({}) {
+ return (
+
+ dateMask(value).maskedValue,
+ }}
+ inputAttrs={{
+ maxLength: '10',
+ }}
+ />
+
+ );
+}
+
+function FormRadioSetValueTeste1({}) {
+ const radio2 = useUncontrolledFormControl('radio2');
+ const radio3 = useUncontrolledFormControl('radio3');
+
+ const afterChange = useCallback((v) => {
+ radio2.setValue(v);
+ radio3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormRadioSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormSelectSetValueTeste1({}) {
+ const select2 = useUncontrolledFormControl('select2');
+ const select3 = useUncontrolledFormControl('select3');
+
+ const afterChange = useCallback((v) => {
+ select2.setValue(v);
+ select3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormSelectSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormSwitchSetValueTeste1({}) {
+ const switch2 = useUncontrolledFormControl('switch2');
+ const switch3 = useUncontrolledFormControl('switch3');
+
+ const afterChange = useCallback((v) => {
+ switch2.setValue(v);
+ switch3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormSwitchSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormTextareaSetValueTeste1({}) {
+ const textarea2 = useUncontrolledFormControl('textarea2');
+ const textarea3 = useUncontrolledFormControl('textarea3');
+
+ const afterChange = useCallback((v) => {
+ textarea2.setValue(v);
+ textarea3.setValue(v);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+function FormTextareaSetValueTeste2({}) {
+ return (
+
+
+ );
+}
+
+function FormUncontrolledFormGroupTable1() {
+ return (
+ console.log('formTable', args)}
+ tableProps={{
+ actionLabel: 'Actions',
+ columns: [
+ {
+ attribute: 'name',
+ label: 'Name',
+ },
+ {
+ attribute: 'number',
+ label: 'Number',
+ },
+ ],
+ }}
+ getRemoveComponent={(removeItem) => removeItem()}> }
+ getAddItemComponent={(addItem) => removeItem()}> }
+ getAddItemComponent={(addItem) => (
+ {
+ console.info('submit', data);
+ addItem(data);
+ close();
+ }}
+ onCancel={() => {
+ console.warn('cancel');
+ close();
+ }}
+ >
+
+ )}
+ >
+
+ Add item
+
+
+ );
+}
diff --git a/demo/demo.jsx b/demo/demo.jsx
index 3baac6d..59e071a 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -1,7 +1,7 @@
/* eslint-disable import/max-dependencies */
/* eslint-disable no-console */
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
// eslint-disable-next-line import/no-unresolved
import { StatefulTabs, Pagination, ToastsContainer } from '../dist/main';
@@ -14,9 +14,13 @@ import { ListGroupExamples } from './ListGroupExamples';
import { ToastsExamples } from './ToastsExamples';
import { DropdownExamples } from './DropdownExamples';
import { TreeViewExamples } from './TreeViewExamples';
-import { Form2Examples } from './Form2Examples';
+import { UncontrolledFormExamples } from './UncontrolledFormExamples';
+import { ToastsWithMessageFormatterExamples } from './ToastsWithMessageFormatterExamples';
+import { ToastWithCustomState } from './ToastWithCustomState';
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+
+ ),
},
{
- title: 'Forms2',
- content:
-
),
},
+ {
+ title: 'Toasts with message formatter',
+ content:
-
,
- document.getElementById('root')
+
);
// eslint-disable-next-line no-undef
diff --git a/demo/index.html b/demo/index.html
index 458f8af..e1c19f5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,20 +1,24 @@
+
+ React Bootstrap Utils
+
+ React Bootstrap Utils
-
- React Bootstrap Utils
is not a valid email address\".\n//\n// Here we check to see if the defaultValue has actually changed, avoiding these problems\n// when the user is inputting text\n//\n// https://github.com/facebook/react/issues/7253\n\n\nfunction setDefaultValue(node, type, value) {\n if ( // Focused number inputs synchronize on blur. See ChangeEventPlugin.js\n type !== 'number' || node.ownerDocument.activeElement !== node) {\n if (value == null) {\n node.defaultValue = toString(node._wrapperState.initialValue);\n } else if (node.defaultValue !== toString(value)) {\n node.defaultValue = toString(value);\n }\n }\n}\n\nvar didWarnSelectedSetOnOption = false;\nvar didWarnInvalidChild = false;\n\nfunction flattenChildren(children) {\n var content = ''; // Flatten children. We'll warn if they are invalid\n // during validateProps() which runs for hydration too.\n // Note that this would throw on non-element objects.\n // Elements are stringified (which is normally irrelevant\n // but matters for ).\n\n React.Children.forEach(children, function (child) {\n if (child == null) {\n return;\n }\n\n content += child; // Note: we don't warn about invalid children here.\n // Instead, this is done separately below so that\n // it happens during the hydration codepath too.\n });\n return content;\n}\n/**\n * Implements an host component that warns when `selected` is set.\n */\n\n\nfunction validateProps(element, props) {\n {\n // This mirrors the codepath above, but runs for hydration too.\n // Warn about invalid children here so that client and hydration are consistent.\n // TODO: this seems like it could cause a DEV-only throw for hydration\n // if children contains a non-element object. We should try to avoid that.\n if (typeof props.children === 'object' && props.children !== null) {\n React.Children.forEach(props.children, function (child) {\n if (child == null) {\n return;\n }\n\n if (typeof child === 'string' || typeof child === 'number') {\n return;\n }\n\n if (typeof child.type !== 'string') {\n return;\n }\n\n if (!didWarnInvalidChild) {\n didWarnInvalidChild = true;\n\n error('Only strings and numbers are supported as children.');\n }\n });\n } // TODO: Remove support for `selected` in .\n\n\n if (props.selected != null && !didWarnSelectedSetOnOption) {\n error('Use the `defaultValue` or `value` props on instead of ' + 'setting `selected` on .');\n\n didWarnSelectedSetOnOption = true;\n }\n }\n}\nfunction postMountWrapper$1(element, props) {\n // value=\"\" should make a value attribute (#6219)\n if (props.value != null) {\n element.setAttribute('value', toString(getToStringValue(props.value)));\n }\n}\nfunction getHostProps$1(element, props) {\n var hostProps = _assign({\n children: undefined\n }, props);\n\n var content = flattenChildren(props.children);\n\n if (content) {\n hostProps.children = content;\n }\n\n return hostProps;\n}\n\nvar didWarnValueDefaultValue$1;\n\n{\n didWarnValueDefaultValue$1 = false;\n}\n\nfunction getDeclarationErrorAddendum() {\n var ownerName = getCurrentFiberOwnerNameInDevOrNull();\n\n if (ownerName) {\n return '\\n\\nCheck the render method of `' + ownerName + '`.';\n }\n\n return '';\n}\n\nvar valuePropNames = ['value', 'defaultValue'];\n/**\n * Validation function for `value` and `defaultValue`.\n */\n\nfunction checkSelectPropTypes(props) {\n {\n ReactControlledValuePropTypes.checkPropTypes('select', props);\n\n for (var i = 0; i < valuePropNames.length; i++) {\n var propName = valuePropNames[i];\n\n if (props[propName] == null) {\n continue;\n }\n\n var isArray = Array.isArray(props[propName]);\n\n if (props.multiple && !isArray) {\n error('The `%s` prop supplied to must be an array if ' + '`multiple` is true.%s', propName, getDeclarationErrorAddendum());\n } else if (!props.multiple && isArray) {\n error('The `%s` prop supplied to must be a scalar ' + 'value if `multiple` is false.%s', propName, getDeclarationErrorAddendum());\n }\n }\n }\n}\n\nfunction updateOptions(node, multiple, propValue, setDefaultSelected) {\n var options = node.options;\n\n if (multiple) {\n var selectedValues = propValue;\n var selectedValue = {};\n\n for (var i = 0; i < selectedValues.length; i++) {\n // Prefix to avoid chaos with special keys.\n selectedValue['$' + selectedValues[i]] = true;\n }\n\n for (var _i = 0; _i < options.length; _i++) {\n var selected = selectedValue.hasOwnProperty('$' + options[_i].value);\n\n if (options[_i].selected !== selected) {\n options[_i].selected = selected;\n }\n\n if (selected && setDefaultSelected) {\n options[_i].defaultSelected = true;\n }\n }\n } else {\n // Do not set `select.value` as exact behavior isn't consistent across all\n // browsers for all cases.\n var _selectedValue = toString(getToStringValue(propValue));\n\n var defaultSelected = null;\n\n for (var _i2 = 0; _i2 < options.length; _i2++) {\n if (options[_i2].value === _selectedValue) {\n options[_i2].selected = true;\n\n if (setDefaultSelected) {\n options[_i2].defaultSelected = true;\n }\n\n return;\n }\n\n if (defaultSelected === null && !options[_i2].disabled) {\n defaultSelected = options[_i2];\n }\n }\n\n if (defaultSelected !== null) {\n defaultSelected.selected = true;\n }\n }\n}\n/**\n * Implements a host component that allows optionally setting the\n * props `value` and `defaultValue`. If `multiple` is false, the prop must be a\n * stringable. If `multiple` is true, the prop must be an array of stringables.\n *\n * If `value` is not supplied (or null/undefined), user actions that change the\n * selected option will trigger updates to the rendered options.\n *\n * If it is supplied (and not null/undefined), the rendered options will not\n * update in response to user actions. Instead, the `value` prop must change in\n * order for the rendered options to update.\n *\n * If `defaultValue` is provided, any options with the supplied values will be\n * selected.\n */\n\n\nfunction getHostProps$2(element, props) {\n return _assign({}, props, {\n value: undefined\n });\n}\nfunction initWrapperState$1(element, props) {\n var node = element;\n\n {\n checkSelectPropTypes(props);\n }\n\n node._wrapperState = {\n wasMultiple: !!props.multiple\n };\n\n {\n if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue$1) {\n error('Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components');\n\n didWarnValueDefaultValue$1 = true;\n }\n }\n}\nfunction postMountWrapper$2(element, props) {\n var node = element;\n node.multiple = !!props.multiple;\n var value = props.value;\n\n if (value != null) {\n updateOptions(node, !!props.multiple, value, false);\n } else if (props.defaultValue != null) {\n updateOptions(node, !!props.multiple, props.defaultValue, true);\n }\n}\nfunction postUpdateWrapper(element, props) {\n var node = element;\n var wasMultiple = node._wrapperState.wasMultiple;\n node._wrapperState.wasMultiple = !!props.multiple;\n var value = props.value;\n\n if (value != null) {\n updateOptions(node, !!props.multiple, value, false);\n } else if (wasMultiple !== !!props.multiple) {\n // For simplicity, reapply `defaultValue` if `multiple` is toggled.\n if (props.defaultValue != null) {\n updateOptions(node, !!props.multiple, props.defaultValue, true);\n } else {\n // Revert the select back to its default unselected state.\n updateOptions(node, !!props.multiple, props.multiple ? [] : '', false);\n }\n }\n}\nfunction restoreControlledState$1(element, props) {\n var node = element;\n var value = props.value;\n\n if (value != null) {\n updateOptions(node, !!props.multiple, value, false);\n }\n}\n\nvar didWarnValDefaultVal = false;\n\n/**\n * Implements a