@homefile/components-v2 2.7.32 → 2.7.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/forms/dynamicForm/DynamicForm.js +29 -17
- package/dist/components/forms/dynamicForm/fields/GridField.js +9 -9
- package/dist/components/forms/dynamicForm/fields/SingleFields.js +14 -14
- package/dist/components/forms/dynamicForm/fields/TextAreaField.d.ts +1 -1
- package/dist/components/forms/dynamicForm/fields/TextAreaField.js +2 -2
- package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js +6 -7
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -1
- package/src/components/forms/dynamicForm/DynamicForm.tsx +20 -22
- package/src/components/forms/dynamicForm/fields/GridField.tsx +8 -8
- package/src/components/forms/dynamicForm/fields/SingleFields.tsx +23 -19
- package/src/components/forms/dynamicForm/fields/TextAreaField.tsx +2 -2
- package/src/components/forms/readOnly/ReadOnlyDynamicForm.tsx +29 -7
- package/src/index.ts +2 -1
|
@@ -20,50 +20,62 @@ import { fieldIcons } from '../../../helpers';
|
|
|
20
20
|
export const DynamicForm = (_a) => {
|
|
21
21
|
var { callback, displayImages, form: fields, menuItems, onRemoveImage, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onRemoveImage", "onUpload", "showTitle", "title", "uploadingFieldId"]);
|
|
22
22
|
const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
|
|
23
|
-
return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
|
|
23
|
+
return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
|
|
24
24
|
const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
|
|
25
25
|
const baseProps = {
|
|
26
26
|
id,
|
|
27
27
|
value,
|
|
28
28
|
icon: icon ? fieldIcons[icon] : undefined,
|
|
29
|
-
placeholder: name
|
|
29
|
+
placeholder: name !== null && name !== void 0 ? name : description,
|
|
30
30
|
};
|
|
31
31
|
const fieldWithDeleteBaseProps = {
|
|
32
|
-
key: id,
|
|
33
32
|
id,
|
|
34
33
|
onRemove: handleRemove,
|
|
35
34
|
canBeHidden,
|
|
36
35
|
};
|
|
37
36
|
switch (type) {
|
|
38
37
|
case 'date':
|
|
39
|
-
return (
|
|
38
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
39
|
+
_jsx(DateField, Object.assign({}, baseProps, { name: name }))));
|
|
40
40
|
case 'email':
|
|
41
|
-
return (
|
|
41
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
42
|
+
_jsx(TextField, Object.assign({}, baseProps, { type: "email" }))));
|
|
42
43
|
case 'number':
|
|
43
|
-
return (
|
|
44
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
45
|
+
_jsx(NumberField, Object.assign({}, baseProps))));
|
|
44
46
|
case 'currency':
|
|
45
|
-
return (
|
|
47
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
48
|
+
_jsx(CurrencyField, Object.assign({}, baseProps))));
|
|
46
49
|
case 'telephone':
|
|
47
|
-
return (
|
|
50
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
51
|
+
_jsx(TextField, Object.assign({}, baseProps, { type: "tel" }))));
|
|
48
52
|
case 'text':
|
|
49
53
|
case 'string':
|
|
50
|
-
return (
|
|
54
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
55
|
+
_jsx(TextField, Object.assign({}, baseProps))));
|
|
51
56
|
case 'textarea':
|
|
52
|
-
return (
|
|
57
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
58
|
+
_jsx(TextAreaField, Object.assign({}, baseProps))));
|
|
53
59
|
case 'select':
|
|
54
|
-
return (
|
|
60
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
61
|
+
_jsx(SelectField, Object.assign({}, baseProps, { options: options }))));
|
|
55
62
|
case 'rating':
|
|
56
|
-
return (
|
|
63
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
64
|
+
_jsx(RatingField, Object.assign({}, baseProps))));
|
|
57
65
|
case 'grid':
|
|
58
|
-
return (
|
|
66
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
67
|
+
_jsx(GridField, Object.assign({}, baseProps, { children: children }))));
|
|
59
68
|
case 'switch':
|
|
60
|
-
return (
|
|
69
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
70
|
+
_jsx(SwitchField, Object.assign({}, baseProps, { description: description }))));
|
|
61
71
|
case 'file':
|
|
62
|
-
return (
|
|
72
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
73
|
+
_jsx(FileField, { icon: baseProps.icon, description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages })));
|
|
63
74
|
case 'group':
|
|
64
75
|
return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
|
|
65
76
|
case 'checkbox-group':
|
|
66
|
-
return (
|
|
77
|
+
return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
|
|
78
|
+
_jsx(CheckboxGroupField, { id: id, description: description, icon: baseProps.icon, children: children }, id)));
|
|
67
79
|
case 'checkbox-agreement':
|
|
68
80
|
return (_jsx(CheckboxAgreement, { id: id, name: name, value: value, description: description }, id));
|
|
69
81
|
case 'tile-body':
|
|
@@ -71,5 +83,5 @@ export const DynamicForm = (_a) => {
|
|
|
71
83
|
default:
|
|
72
84
|
return null;
|
|
73
85
|
}
|
|
74
|
-
}) }) })), hiddenFields.length && (_jsx(HiddenFieldSection, { fields: hiddenFields, onAddAll: handleAddAll, onClick: handleAdd }))] }));
|
|
86
|
+
}) }) })), !!hiddenFields.length && (_jsx(HiddenFieldSection, { fields: hiddenFields, onAddAll: handleAddAll, onClick: handleAdd }))] }));
|
|
75
87
|
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
2
3
|
import { Flex } from '@chakra-ui/react';
|
|
3
4
|
import { DateField, NumberField, TextField, SelectField, CurrencyField, } from '../../..';
|
|
4
5
|
import { fieldIcons } from '../../../../helpers';
|
|
5
6
|
export const GridField = ({ children }) => {
|
|
6
7
|
return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, name, value, type, options = [], icon }) => {
|
|
7
8
|
const baseProps = {
|
|
8
|
-
key: id,
|
|
9
9
|
id,
|
|
10
10
|
value,
|
|
11
|
-
placeholder: name
|
|
11
|
+
placeholder: name !== null && name !== void 0 ? name : description,
|
|
12
12
|
icon: icon ? fieldIcons[icon] : undefined,
|
|
13
13
|
};
|
|
14
14
|
switch (type) {
|
|
15
15
|
case 'date':
|
|
16
|
-
return (
|
|
16
|
+
return (_createElement(DateField, Object.assign({}, baseProps, { key: id, name: "", width: "230px", showCalendarIcon: false })));
|
|
17
17
|
case 'email':
|
|
18
|
-
return
|
|
18
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id, type: "email" }));
|
|
19
19
|
case 'number':
|
|
20
|
-
return
|
|
20
|
+
return _createElement(NumberField, Object.assign({}, baseProps, { key: id }));
|
|
21
21
|
case 'currency':
|
|
22
|
-
return
|
|
22
|
+
return _createElement(CurrencyField, Object.assign({}, baseProps, { key: id }));
|
|
23
23
|
case 'text':
|
|
24
24
|
case 'string':
|
|
25
|
-
return
|
|
25
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id }));
|
|
26
26
|
case 'select':
|
|
27
|
-
return
|
|
27
|
+
return _createElement(SelectField, Object.assign({}, baseProps, { key: id, options: options }));
|
|
28
28
|
case 'telephone':
|
|
29
|
-
return
|
|
29
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id, type: "tel" }));
|
|
30
30
|
default:
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
2
3
|
import { fieldIcons } from '../../../../helpers';
|
|
3
4
|
import { GridField, RatingField, TextAreaField, TextField, SelectField, SwitchField, NumberField, DateField, CurrencyField, TileBodyHeader, TileBodyLogo, VerticalIcon, TileBodySectionGrid, TileBodyAction, TileCta, } from '../../..';
|
|
4
5
|
export const SingleFields = ({ callback, fields, menuItems }) => {
|
|
5
6
|
return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, name, type, value, icon, link, options = [], }) => {
|
|
6
7
|
const baseProps = {
|
|
7
|
-
key: id,
|
|
8
8
|
id,
|
|
9
9
|
icon: icon ? fieldIcons[icon] : undefined,
|
|
10
10
|
placeholder: name,
|
|
@@ -12,34 +12,34 @@ export const SingleFields = ({ callback, fields, menuItems }) => {
|
|
|
12
12
|
};
|
|
13
13
|
switch (type) {
|
|
14
14
|
case 'date':
|
|
15
|
-
return
|
|
15
|
+
return _createElement(DateField, Object.assign({}, baseProps, { key: id, name: name }));
|
|
16
16
|
case 'email':
|
|
17
|
-
return
|
|
17
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id, type: "email" }));
|
|
18
18
|
case 'grid':
|
|
19
|
-
return
|
|
19
|
+
return (_createElement(GridField, Object.assign({}, baseProps, { key: id }), children));
|
|
20
20
|
case 'number':
|
|
21
|
-
return
|
|
21
|
+
return _createElement(NumberField, Object.assign({}, baseProps, { key: id }));
|
|
22
22
|
case 'currency':
|
|
23
|
-
return
|
|
23
|
+
return _createElement(CurrencyField, Object.assign({}, baseProps, { key: id }));
|
|
24
24
|
case 'rating':
|
|
25
|
-
return
|
|
25
|
+
return _createElement(RatingField, Object.assign({}, baseProps, { key: id }));
|
|
26
26
|
case 'text':
|
|
27
27
|
case 'string':
|
|
28
|
-
return
|
|
28
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id }));
|
|
29
29
|
case 'select':
|
|
30
|
-
return
|
|
30
|
+
return _createElement(SelectField, Object.assign({}, baseProps, { key: id, options: options }));
|
|
31
31
|
case 'switch':
|
|
32
|
-
return
|
|
32
|
+
return (_createElement(SwitchField, Object.assign({}, baseProps, { key: id, description: description })));
|
|
33
33
|
case 'telephone':
|
|
34
|
-
return
|
|
34
|
+
return _createElement(TextField, Object.assign({}, baseProps, { key: id, type: "tel" }));
|
|
35
35
|
case 'textarea':
|
|
36
|
-
return
|
|
36
|
+
return _createElement(TextAreaField, Object.assign({}, baseProps, { key: id }));
|
|
37
37
|
case 'tile-body-section-grid':
|
|
38
38
|
return _jsx(TileBodySectionGrid, { fields: children }, id);
|
|
39
39
|
case 'tile-body-header':
|
|
40
|
-
return
|
|
40
|
+
return _jsx(TileBodyHeader, { value: String(baseProps.value) }, id);
|
|
41
41
|
case 'tile-body-logo':
|
|
42
|
-
return (_jsx(TileBodyLogo, { name: name, value: String(baseProps.value), menuItems: menuItems },
|
|
42
|
+
return (_jsx(TileBodyLogo, { name: name, value: String(baseProps.value), menuItems: menuItems }, id));
|
|
43
43
|
case 'vertical-icon':
|
|
44
44
|
return (_jsx(VerticalIcon, { icon: baseProps.icon, value: String(baseProps.value) }, id));
|
|
45
45
|
case 'tile-body-action':
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TextAreaFieldI } from '../../../../interfaces';
|
|
2
|
-
import 'react-quill/dist/quill.snow.css';
|
|
2
|
+
import 'react-quill-new/dist/quill.snow.css';
|
|
3
3
|
import '../../../../styles/quill.css';
|
|
4
4
|
export declare const TextAreaField: ({ id, icon, placeholder, value, }: TextAreaFieldI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
3
3
|
import { Flex, Image, Tooltip } from '@chakra-ui/react';
|
|
4
|
-
import QuillEditor from 'react-quill';
|
|
5
|
-
import 'react-quill/dist/quill.snow.css';
|
|
4
|
+
import QuillEditor from 'react-quill-new';
|
|
5
|
+
import 'react-quill-new/dist/quill.snow.css';
|
|
6
6
|
import '../../../../styles/quill.css';
|
|
7
7
|
export const TextAreaField = ({ id, icon, placeholder = '', value, }) => {
|
|
8
8
|
const { control } = useFormContext();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createElement as _createElement } from "react";
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
3
3
|
import { Box } from '@chakra-ui/react';
|
|
4
4
|
import { ReadOnlyAppliances, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyNotes, ReadOnlyRating, ReadOnlyTextArea, } from '../..';
|
|
5
5
|
import { fieldIcons } from '../../../helpers';
|
|
@@ -7,7 +7,6 @@ export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit = () => { },
|
|
|
7
7
|
return (_jsx(Box, { bg: "lightBlue.1", overflow: "scroll", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
|
|
8
8
|
const { children = [], icon, id, name, type, value } = field;
|
|
9
9
|
const baseProps = {
|
|
10
|
-
key: `${id}-${name}-${value}-${type}`,
|
|
11
10
|
id,
|
|
12
11
|
value,
|
|
13
12
|
icon: icon ? fieldIcons[icon] : undefined,
|
|
@@ -21,15 +20,15 @@ export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit = () => { },
|
|
|
21
20
|
case 'select':
|
|
22
21
|
case 'string':
|
|
23
22
|
case 'currency':
|
|
24
|
-
return
|
|
23
|
+
return (_createElement(ReadOnlyInput, Object.assign({}, baseProps, { key: `${id}-${name}-${value}-${type}` })));
|
|
25
24
|
case 'date':
|
|
26
|
-
return
|
|
25
|
+
return (_createElement(ReadOnlyDate, Object.assign({}, baseProps, { key: `${id}-${name}-${value}-${type}`, name: name })));
|
|
27
26
|
case 'rating':
|
|
28
|
-
return
|
|
27
|
+
return (_createElement(ReadOnlyRating, Object.assign({}, baseProps, { key: `${id}-${name}-${value}-${type}` })));
|
|
29
28
|
case 'textarea':
|
|
30
|
-
return
|
|
29
|
+
return (_createElement(ReadOnlyTextArea, Object.assign({}, baseProps, { key: `${id}-${name}-${value}-${type}` })));
|
|
31
30
|
case 'grid':
|
|
32
|
-
return (_jsx(ReadOnlyGrid, {
|
|
31
|
+
return (_jsx(ReadOnlyGrid, { onClick: onClick, children: children }, id));
|
|
33
32
|
case 'group':
|
|
34
33
|
return _jsx(ReadOnlyGroup, { children: children }, id);
|
|
35
34
|
case 'appliances':
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast } from './hooks';
|
|
3
3
|
export { randomColor } from './utils';
|
|
4
|
-
export { MagnifyingGlassReport, Message, Register, Receipts } from './assets/images';
|
|
4
|
+
export { MagnifyingGlassReport, Message, Register, Receipts, Price } from './assets/images';
|
|
5
5
|
export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
|
|
6
6
|
import theme from './theme';
|
|
7
7
|
export { theme };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
|
|
2
2
|
export { useCustomToast } from './hooks';
|
|
3
3
|
export { randomColor } from './utils';
|
|
4
|
-
export { MagnifyingGlassReport, Message, Register, Receipts } from './assets/images';
|
|
4
|
+
export { MagnifyingGlassReport, Message, Register, Receipts, Price } from './assets/images';
|
|
5
5
|
export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';
|
|
6
6
|
import theme from './theme';
|
|
7
7
|
export { theme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homefile/components-v2",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.34",
|
|
4
4
|
"author": "Homefile",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
"react-icons": "^5.4.0",
|
|
77
77
|
"react-modern-calendar-datepicker": "^3.1.6",
|
|
78
78
|
"react-quill": "^2.0.0",
|
|
79
|
+
"react-quill-new": "^3.3.3",
|
|
79
80
|
"react-spinners": "^0.15.0",
|
|
80
81
|
"recharts": "^2.15.0",
|
|
81
82
|
"valtio": "^2.1.3",
|
|
@@ -55,9 +55,7 @@ export const DynamicForm = ({
|
|
|
55
55
|
borderBottom="1px dashed"
|
|
56
56
|
borderColor="lightBlue.6"
|
|
57
57
|
>
|
|
58
|
-
<Text fontFamily="secondary">
|
|
59
|
-
{title ? title : t('forms.itemDetails')}
|
|
60
|
-
</Text>
|
|
58
|
+
<Text fontFamily="secondary">{title ?? t('forms.itemDetails')}</Text>
|
|
61
59
|
</Box>
|
|
62
60
|
)}
|
|
63
61
|
<FormProvider {...form}>
|
|
@@ -79,10 +77,9 @@ export const DynamicForm = ({
|
|
|
79
77
|
id,
|
|
80
78
|
value,
|
|
81
79
|
icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
|
|
82
|
-
placeholder: name
|
|
80
|
+
placeholder: name ?? description,
|
|
83
81
|
}
|
|
84
82
|
const fieldWithDeleteBaseProps = {
|
|
85
|
-
key: id,
|
|
86
83
|
id,
|
|
87
84
|
onRemove: handleRemove,
|
|
88
85
|
canBeHidden,
|
|
@@ -90,74 +87,74 @@ export const DynamicForm = ({
|
|
|
90
87
|
switch (type) {
|
|
91
88
|
case 'date':
|
|
92
89
|
return (
|
|
93
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
90
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
94
91
|
<DateField {...baseProps} name={name} />
|
|
95
92
|
</FieldWithDelete>
|
|
96
93
|
)
|
|
97
94
|
case 'email':
|
|
98
95
|
return (
|
|
99
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
96
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
100
97
|
<TextField {...baseProps} type="email" />
|
|
101
98
|
</FieldWithDelete>
|
|
102
99
|
)
|
|
103
100
|
case 'number':
|
|
104
101
|
return (
|
|
105
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
102
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
106
103
|
<NumberField {...baseProps} />
|
|
107
104
|
</FieldWithDelete>
|
|
108
105
|
)
|
|
109
106
|
case 'currency':
|
|
110
107
|
return (
|
|
111
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
108
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
112
109
|
<CurrencyField {...baseProps} />
|
|
113
110
|
</FieldWithDelete>
|
|
114
111
|
)
|
|
115
112
|
case 'telephone':
|
|
116
113
|
return (
|
|
117
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
114
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
118
115
|
<TextField {...baseProps} type="tel" />
|
|
119
116
|
</FieldWithDelete>
|
|
120
117
|
)
|
|
121
118
|
case 'text':
|
|
122
119
|
case 'string':
|
|
123
120
|
return (
|
|
124
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
121
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
125
122
|
<TextField {...baseProps} />
|
|
126
123
|
</FieldWithDelete>
|
|
127
124
|
)
|
|
128
125
|
case 'textarea':
|
|
129
126
|
return (
|
|
130
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
127
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
131
128
|
<TextAreaField {...baseProps} />
|
|
132
129
|
</FieldWithDelete>
|
|
133
130
|
)
|
|
134
131
|
case 'select':
|
|
135
132
|
return (
|
|
136
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
133
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
137
134
|
<SelectField {...baseProps} options={options} />
|
|
138
135
|
</FieldWithDelete>
|
|
139
136
|
)
|
|
140
137
|
case 'rating':
|
|
141
138
|
return (
|
|
142
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
139
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
143
140
|
<RatingField {...baseProps} />
|
|
144
141
|
</FieldWithDelete>
|
|
145
142
|
)
|
|
146
143
|
case 'grid':
|
|
147
144
|
return (
|
|
148
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
149
|
-
<GridField {...baseProps}
|
|
145
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
146
|
+
<GridField {...baseProps}>{children}</GridField>
|
|
150
147
|
</FieldWithDelete>
|
|
151
148
|
)
|
|
152
149
|
case 'switch':
|
|
153
150
|
return (
|
|
154
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
151
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
155
152
|
<SwitchField {...baseProps} description={description} />
|
|
156
153
|
</FieldWithDelete>
|
|
157
154
|
)
|
|
158
155
|
case 'file':
|
|
159
156
|
return (
|
|
160
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
157
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
161
158
|
<FileField
|
|
162
159
|
icon={baseProps.icon}
|
|
163
160
|
description={description}
|
|
@@ -180,14 +177,15 @@ export const DynamicForm = ({
|
|
|
180
177
|
)
|
|
181
178
|
case 'checkbox-group':
|
|
182
179
|
return (
|
|
183
|
-
<FieldWithDelete {...fieldWithDeleteBaseProps}>
|
|
180
|
+
<FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
|
|
184
181
|
<CheckboxGroupField
|
|
185
182
|
key={id}
|
|
186
183
|
id={id}
|
|
187
|
-
children={children}
|
|
188
184
|
description={description}
|
|
189
185
|
icon={baseProps.icon}
|
|
190
|
-
|
|
186
|
+
>
|
|
187
|
+
{children}
|
|
188
|
+
</CheckboxGroupField>
|
|
191
189
|
</FieldWithDelete>
|
|
192
190
|
)
|
|
193
191
|
case 'checkbox-agreement':
|
|
@@ -216,7 +214,7 @@ export const DynamicForm = ({
|
|
|
216
214
|
})}
|
|
217
215
|
</>
|
|
218
216
|
</FormProvider>
|
|
219
|
-
{hiddenFields.length && (
|
|
217
|
+
{!!hiddenFields.length && (
|
|
220
218
|
<HiddenFieldSection
|
|
221
219
|
fields={hiddenFields}
|
|
222
220
|
onAddAll={handleAddAll}
|
|
@@ -15,10 +15,9 @@ export const GridField = ({ children }: Pick<ReportI, 'children'>) => {
|
|
|
15
15
|
{children?.map(
|
|
16
16
|
({ id, description, name, value, type, options = [], icon }) => {
|
|
17
17
|
const baseProps = {
|
|
18
|
-
key: id,
|
|
19
18
|
id,
|
|
20
19
|
value,
|
|
21
|
-
placeholder: name
|
|
20
|
+
placeholder: name ?? description,
|
|
22
21
|
icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
|
|
23
22
|
}
|
|
24
23
|
|
|
@@ -27,24 +26,25 @@ export const GridField = ({ children }: Pick<ReportI, 'children'>) => {
|
|
|
27
26
|
return (
|
|
28
27
|
<DateField
|
|
29
28
|
{...baseProps}
|
|
29
|
+
key={id}
|
|
30
30
|
name=""
|
|
31
31
|
width="230px"
|
|
32
32
|
showCalendarIcon={false}
|
|
33
33
|
/>
|
|
34
34
|
)
|
|
35
35
|
case 'email':
|
|
36
|
-
return <TextField {...baseProps} type="email" />
|
|
36
|
+
return <TextField {...baseProps} key={id} type="email" />
|
|
37
37
|
case 'number':
|
|
38
|
-
return <NumberField {...baseProps} />
|
|
38
|
+
return <NumberField {...baseProps} key={id} />
|
|
39
39
|
case 'currency':
|
|
40
|
-
return <CurrencyField {...baseProps} />
|
|
40
|
+
return <CurrencyField {...baseProps} key={id} />
|
|
41
41
|
case 'text':
|
|
42
42
|
case 'string':
|
|
43
|
-
return <TextField {...baseProps} />
|
|
43
|
+
return <TextField {...baseProps} key={id} />
|
|
44
44
|
case 'select':
|
|
45
|
-
return <SelectField {...baseProps} options={options} />
|
|
45
|
+
return <SelectField {...baseProps} key={id} options={options} />
|
|
46
46
|
case 'telephone':
|
|
47
|
-
return <TextField {...baseProps} type="tel" />
|
|
47
|
+
return <TextField {...baseProps} key={id} type="tel" />
|
|
48
48
|
default:
|
|
49
49
|
return null
|
|
50
50
|
}
|
|
@@ -34,7 +34,6 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
|
|
|
34
34
|
options = [],
|
|
35
35
|
}) => {
|
|
36
36
|
const baseProps = {
|
|
37
|
-
key: id,
|
|
38
37
|
id,
|
|
39
38
|
icon: icon ? fieldIcons[icon] : undefined,
|
|
40
39
|
placeholder: name,
|
|
@@ -42,42 +41,47 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
|
|
|
42
41
|
}
|
|
43
42
|
switch (type) {
|
|
44
43
|
case 'date':
|
|
45
|
-
return <DateField {...baseProps} name={name} />
|
|
44
|
+
return <DateField {...baseProps} key={id} name={name} />
|
|
46
45
|
case 'email':
|
|
47
|
-
return <TextField {...baseProps} type="email" />
|
|
46
|
+
return <TextField {...baseProps} key={id} type="email" />
|
|
48
47
|
case 'grid':
|
|
49
|
-
return
|
|
48
|
+
return (
|
|
49
|
+
<GridField {...baseProps} key={id}>
|
|
50
|
+
{children}
|
|
51
|
+
</GridField>
|
|
52
|
+
)
|
|
50
53
|
case 'number':
|
|
51
|
-
return <NumberField {...baseProps} />
|
|
54
|
+
return <NumberField {...baseProps} key={id} />
|
|
52
55
|
case 'currency':
|
|
53
|
-
return <CurrencyField {...baseProps} />
|
|
56
|
+
return <CurrencyField {...baseProps} key={id} />
|
|
54
57
|
case 'rating':
|
|
55
|
-
return <RatingField {...baseProps} />
|
|
58
|
+
return <RatingField {...baseProps} key={id} />
|
|
56
59
|
case 'text':
|
|
57
60
|
case 'string':
|
|
58
|
-
return <TextField {...baseProps} />
|
|
61
|
+
return <TextField {...baseProps} key={id} />
|
|
59
62
|
case 'select':
|
|
60
|
-
return <SelectField {...baseProps} options={options} />
|
|
63
|
+
return <SelectField {...baseProps} key={id} options={options} />
|
|
61
64
|
case 'switch':
|
|
62
|
-
return
|
|
65
|
+
return (
|
|
66
|
+
<SwitchField
|
|
67
|
+
{...baseProps}
|
|
68
|
+
key={id}
|
|
69
|
+
description={description}
|
|
70
|
+
/>
|
|
71
|
+
)
|
|
63
72
|
case 'telephone':
|
|
64
|
-
return <TextField {...baseProps} type="tel" />
|
|
73
|
+
return <TextField {...baseProps} key={id} type="tel" />
|
|
65
74
|
case 'textarea':
|
|
66
|
-
return <TextAreaField {...baseProps} />
|
|
75
|
+
return <TextAreaField {...baseProps} key={id} />
|
|
67
76
|
|
|
68
77
|
case 'tile-body-section-grid':
|
|
69
78
|
return <TileBodySectionGrid key={id} fields={children} />
|
|
70
79
|
case 'tile-body-header':
|
|
71
|
-
return (
|
|
72
|
-
<TileBodyHeader
|
|
73
|
-
key={baseProps.key}
|
|
74
|
-
value={String(baseProps.value)}
|
|
75
|
-
/>
|
|
76
|
-
)
|
|
80
|
+
return <TileBodyHeader key={id} value={String(baseProps.value)} />
|
|
77
81
|
case 'tile-body-logo':
|
|
78
82
|
return (
|
|
79
83
|
<TileBodyLogo
|
|
80
|
-
key={
|
|
84
|
+
key={id}
|
|
81
85
|
name={name}
|
|
82
86
|
value={String(baseProps.value)}
|
|
83
87
|
menuItems={menuItems}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useFormContext, Controller } from 'react-hook-form'
|
|
2
2
|
import { Flex, Image, Tooltip } from '@chakra-ui/react'
|
|
3
|
-
import QuillEditor from 'react-quill'
|
|
3
|
+
import QuillEditor from 'react-quill-new'
|
|
4
4
|
import { TextAreaFieldI } from '@/interfaces'
|
|
5
|
-
import 'react-quill/dist/quill.snow.css'
|
|
5
|
+
import 'react-quill-new/dist/quill.snow.css'
|
|
6
6
|
import '@/styles/quill.css'
|
|
7
7
|
|
|
8
8
|
export const TextAreaField = ({
|
|
@@ -22,7 +22,6 @@ export const ReadOnlyDynamicForm = ({
|
|
|
22
22
|
{fields?.map((field) => {
|
|
23
23
|
const { children = [], icon, id, name, type, value } = field
|
|
24
24
|
const baseProps = {
|
|
25
|
-
key: `${id}-${name}-${value}-${type}`,
|
|
26
25
|
id,
|
|
27
26
|
value,
|
|
28
27
|
icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
|
|
@@ -37,19 +36,42 @@ export const ReadOnlyDynamicForm = ({
|
|
|
37
36
|
case 'select':
|
|
38
37
|
case 'string':
|
|
39
38
|
case 'currency':
|
|
40
|
-
return
|
|
39
|
+
return (
|
|
40
|
+
<ReadOnlyInput
|
|
41
|
+
{...baseProps}
|
|
42
|
+
key={`${id}-${name}-${value}-${type}`}
|
|
43
|
+
/>
|
|
44
|
+
)
|
|
41
45
|
case 'date':
|
|
42
|
-
return
|
|
46
|
+
return (
|
|
47
|
+
<ReadOnlyDate
|
|
48
|
+
{...baseProps}
|
|
49
|
+
key={`${id}-${name}-${value}-${type}`}
|
|
50
|
+
name={name}
|
|
51
|
+
/>
|
|
52
|
+
)
|
|
43
53
|
case 'rating':
|
|
44
|
-
return
|
|
54
|
+
return (
|
|
55
|
+
<ReadOnlyRating
|
|
56
|
+
{...baseProps}
|
|
57
|
+
key={`${id}-${name}-${value}-${type}`}
|
|
58
|
+
/>
|
|
59
|
+
)
|
|
45
60
|
case 'textarea':
|
|
46
|
-
return
|
|
61
|
+
return (
|
|
62
|
+
<ReadOnlyTextArea
|
|
63
|
+
{...baseProps}
|
|
64
|
+
key={`${id}-${name}-${value}-${type}`}
|
|
65
|
+
/>
|
|
66
|
+
)
|
|
47
67
|
case 'grid':
|
|
48
68
|
return (
|
|
49
|
-
<ReadOnlyGrid key={id}
|
|
69
|
+
<ReadOnlyGrid key={id} onClick={onClick}>
|
|
70
|
+
{children}
|
|
71
|
+
</ReadOnlyGrid>
|
|
50
72
|
)
|
|
51
73
|
case 'group':
|
|
52
|
-
return <ReadOnlyGroup key={id}
|
|
74
|
+
return <ReadOnlyGroup key={id}>{children}</ReadOnlyGroup>
|
|
53
75
|
case 'appliances':
|
|
54
76
|
return <ReadOnlyAppliances {...field} key={id} onEdit={onEdit} />
|
|
55
77
|
case 'notes':
|