@homefile/components-v2 2.40.13 → 2.40.15
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/folderPanel/fileDetails/FileDetailsTab.js +1 -1
- package/dist/components/homeBoard/DetailsTab.js +1 -1
- package/dist/components/householdItems/ItemNameHeader.d.ts +1 -1
- package/dist/components/householdItems/ItemNameHeader.js +2 -2
- package/dist/components/inputs/ControlledInput.js +4 -2
- package/dist/components/inputs/PasswordInput.d.ts +1 -1
- package/dist/components/inputs/PasswordInput.js +8 -7
- package/dist/components/inputs/TextInput.js +1 -1
- package/dist/components/myProfile/PaymentMethod.js +1 -1
- package/dist/components/sharedHomePanel/ShareHomeForm.js +1 -1
- package/dist/interfaces/inputs/UncontrolledInput.interface.d.ts +1 -0
- package/package.json +1 -1
|
@@ -23,5 +23,5 @@ export const FileDetailsTab = ({ addedBy, handleEdit, file, editing, }) => {
|
|
|
23
23
|
const updateFile = Object.assign(Object.assign({}, file), { title: fileName, description: fileDescription });
|
|
24
24
|
handleEdit(updateFile);
|
|
25
25
|
};
|
|
26
|
-
return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align:
|
|
26
|
+
return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align: fileName ? 'flex-end' : 'flex-start', children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "auto", h: "3rem", alt: t('folderSharing.altIcon') }), _jsx(TextInput, { handleChange: handleChangeName, id: file._id, placeholder: t('folderSharing.details.placeholder'), value: fileName, hasError: !fileName, errorMessage: `${t('folderSharing.details.name')} ${t('forms.required')}` }), fileName && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileName && handleEditFile(), children: t('createDocument.buttons.save') }))] }), _jsxs(Box, { children: [formattedUpdateAt && (_jsxs(Flex, { borderY: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.added') }), _jsx(Text, { variant: "info", flex: "0.8", children: formattedUpdateAt === null || formattedUpdateAt === void 0 ? void 0 : formattedUpdateAt.replace(' ', ' @ ') })] })), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.addedBy') }), _jsx(Text, { variant: "info", color: "blue.3", flex: "0.8", children: addedBy })] }), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", pl: "2", align: "flex-end", gap: "base", children: [_jsx(TextInput, { handleChange: handleChangeDescription, id: file._id, placeholder: t('addMedia.description'), value: fileDescription || '' }), fileDescription && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileDescription && handleEditFile(), children: t('createDocument.buttons.save') }))] })] })] }));
|
|
27
27
|
};
|
|
@@ -7,5 +7,5 @@ import { DocIcon } from '../../assets/images';
|
|
|
7
7
|
import { useDetailsTab } from '../../hooks';
|
|
8
8
|
export const DetailsTab = ({ handleEditDescription, handleEditFileName, }) => {
|
|
9
9
|
const { addedAt, addedBy, description, editing, fileName, handleChangeDescription, handleChangeName, icon, _id, name, } = useDetailsTab();
|
|
10
|
-
return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align:
|
|
10
|
+
return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align: fileName ? 'flex-end' : 'flex-start', children: [_jsx(Image, { src: icon || DocIcon, w: "auto", h: "3rem", alt: t('folderSharing.altIcon') }), _jsx(TextInput, { handleChange: handleChangeName, id: _id, placeholder: t('folderSharing.details.placeholder'), value: fileName, hasError: !fileName, errorMessage: `${t('folderSharing.details.name')} ${t('forms.required')}` }), fileName && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileName && handleEditFileName(_id), children: t('createDocument.buttons.save') }))] }), _jsxs(Box, { children: [addedAt && (_jsxs(Flex, { borderY: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.added') }), _jsx(Text, { variant: "info", flex: "0.8", children: addedAt })] })), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", w: "fit-content", children: t('folderSharing.details.addedBy') }), _jsx(Text, { variant: "info", color: "blue.3", w: "fit-content", children: addedBy })] }), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", pl: "2", align: "flex-end", gap: "base", children: [_jsx(TextInput, { handleChange: handleChangeDescription, id: name || _id, placeholder: t('addMedia.description'), value: description || '' }), description && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => description && handleEditDescription(_id), children: t('createDocument.buttons.save') }))] })] })] }));
|
|
11
11
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ItemNameHeaderI } from '../../interfaces';
|
|
2
|
-
export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, showSaveButton, placeholder }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, showSaveButton, placeholder, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,7 +4,7 @@ import { Box, Flex, Button } from '@chakra-ui/react';
|
|
|
4
4
|
import { TextInput } from '../../components';
|
|
5
5
|
import { isEmptyField } from '../../utils';
|
|
6
6
|
import { useState, useEffect } from 'react';
|
|
7
|
-
export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, showSaveButton = true, placeholder }) => {
|
|
7
|
+
export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, showSaveButton = true, placeholder, }) => {
|
|
8
8
|
const [name, setName] = useState(value);
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
setName(value);
|
|
@@ -13,5 +13,5 @@ export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, pad
|
|
|
13
13
|
setName(e.target.value);
|
|
14
14
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
|
|
15
15
|
};
|
|
16
|
-
return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "
|
|
16
|
+
return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "flex-end", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: placeholder || t('householdItems.headers.placeholder'), value: name }), name && showSaveButton && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
|
|
17
17
|
};
|
|
@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { FormControl, Input, Text } from '@chakra-ui/react';
|
|
14
|
+
import { LabeledField } from '../../components';
|
|
14
15
|
export const ControlledInput = (_a) => {
|
|
15
|
-
var { errorMessage, hasError, value } = _a, props = __rest(_a, ["errorMessage", "hasError", "value"]);
|
|
16
|
+
var { errorMessage, hasError, value, showLabel = true } = _a, props = __rest(_a, ["errorMessage", "hasError", "value", "showLabel"]);
|
|
16
17
|
const error = hasError && !props.isDisabled;
|
|
17
|
-
|
|
18
|
+
const isFilled = String(value).trim().length > 0 && showLabel;
|
|
19
|
+
return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: props.placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { value: value })) }), error && (_jsx(Text, { variant: "error", mb: "0.5", children: errorMessage }))] }));
|
|
18
20
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { InputI } from '../../interfaces';
|
|
2
|
-
export declare const PasswordInput: ({ errorMessage, id, handleChange, hasError, placeholder, value, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const PasswordInput: ({ errorMessage, id, handleChange, hasError, placeholder, value, showLabel, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,15 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useState } from 'react';
|
|
14
14
|
import { InputGroup, Input, InputRightElement, IconButton, FormControl, Text, } from '@chakra-ui/react';
|
|
15
|
-
import { Eye, EyeOff } from '../../components';
|
|
15
|
+
import { Eye, EyeOff, LabeledField } from '../../components';
|
|
16
16
|
export const PasswordInput = (_a) => {
|
|
17
|
-
var { errorMessage, id, handleChange, hasError, placeholder, value = '' } = _a, props = __rest(_a, ["errorMessage", "id", "handleChange", "hasError", "placeholder", "value"]);
|
|
17
|
+
var { errorMessage, id, handleChange, hasError, placeholder, value = '', showLabel = true } = _a, props = __rest(_a, ["errorMessage", "id", "handleChange", "hasError", "placeholder", "value", "showLabel"]);
|
|
18
18
|
const [show, setShow] = useState(false);
|
|
19
19
|
const handleClick = () => setShow(!show);
|
|
20
20
|
const ViewIcon = show ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 });
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
const isFilled = String(value).trim().length > 0 && showLabel;
|
|
22
|
+
return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsx(LabeledField, { label: placeholder, isFilled: isFilled, children: _jsxs(InputGroup, { children: [_jsx(Input, Object.assign({ autoCapitalize: "none", autoCorrect: "off", id: id, placeholder: placeholder, type: show ? 'text' : 'password', value: value, onChange: handleChange }, props)), _jsx(InputRightElement, { width: "3rem", children: _jsx(IconButton, { variant: "icon", "aria-label": "Enter password", icon: ViewIcon, onClick: handleClick, _hover: {
|
|
23
|
+
svg: {
|
|
24
|
+
fill: 'blue.3',
|
|
25
|
+
},
|
|
26
|
+
}, children: show ? 'Hide' : 'Show' }) })] }) }), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
|
|
26
27
|
};
|
|
@@ -18,5 +18,5 @@ export const TextInput = (_a) => {
|
|
|
18
18
|
const error = hasError && !isDisabled;
|
|
19
19
|
const isFilled = String(value).trim().length > 0 && showLabel;
|
|
20
20
|
const placeholderToUse = isFilled ? '' : (_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : '';
|
|
21
|
-
return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
|
|
21
|
+
return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && (_jsx(Text, { variant: "error", mb: "0.5", children: errorMessage }))] }));
|
|
22
22
|
};
|
|
@@ -9,7 +9,7 @@ import { usePaymentMethod } from '../../hooks';
|
|
|
9
9
|
export const PaymentMethod = () => {
|
|
10
10
|
const { validations } = useSnapshot(paymentMethodProxy);
|
|
11
11
|
const { handleCardHolderValidation, handleCardNumber, handleCardNumberValidation, handleInputChange, maskedCardNumber, handleCvvValidation, handleErrorMessage, handleMonthValidation, handleYearValidation, maxCardLength, } = usePaymentMethod(() => { });
|
|
12
|
-
return (_jsx(PaymentItemContainer, { icon: CreditCard, title: t('myProfile.payment.methodTitle'), bg: "lightBlue.2", children: _jsxs(Stack, { spacing: "base", children: [_jsx(UncontrolledInput, { errorMessage: handleErrorMessage('cardHolder'), hasError: !validations.isCardHolderValid, id: "cardHolder", placeholder: t('myProfile.placeholders.cardHolder'), type: "text", onChange: (event) => handleInputChange(event, 'cardHolder'), onBlurCapture: handleCardHolderValidation }), _jsx(ControlledInput, { errorMessage: handleErrorMessage('cardNumber'), hasError: !validations.isCardNumberValid, id: "cardNumber", placeholder: t('myProfile.placeholders.cardNumber'), type: "tel", maxLength: maxCardLength, value: maskedCardNumber, onChange: handleCardNumber, onBlurCapture: handleCardNumberValidation }), _jsxs(Flex, { justify: "space-between", direction: ['column', 'row'], gap: [
|
|
12
|
+
return (_jsx(PaymentItemContainer, { icon: CreditCard, title: t('myProfile.payment.methodTitle'), bg: "lightBlue.2", children: _jsxs(Stack, { spacing: "base", children: [_jsx(UncontrolledInput, { errorMessage: handleErrorMessage('cardHolder'), hasError: !validations.isCardHolderValid, id: "cardHolder", placeholder: t('myProfile.placeholders.cardHolder'), type: "text", onChange: (event) => handleInputChange(event, 'cardHolder'), onBlurCapture: handleCardHolderValidation }), _jsx(ControlledInput, { errorMessage: handleErrorMessage('cardNumber'), hasError: !validations.isCardNumberValid, id: "cardNumber", placeholder: t('myProfile.placeholders.cardNumber'), type: "tel", maxLength: maxCardLength, value: maskedCardNumber, onChange: handleCardNumber, onBlurCapture: handleCardNumberValidation }), _jsxs(Flex, { justify: "space-between", direction: ['column', 'row'], gap: ['base', '0'], children: [_jsxs(Flex, { gap: "base", children: [_jsx(CardDetail, { children: t('myProfile.payment.expiration') }), _jsx(UncontrolledInput, { errorMessage: handleErrorMessage('expirationMonth'), hasError: !validations.isExpirationMonthValid, w: "76px", id: "month", placeholder: "00", type: "tel", maxLength: 2, onChange: (event) => handleInputChange(event, 'expirationMonth'), onBlurCapture: handleMonthValidation }), _jsx(CardDetail, { children: "/" }), _jsx(UncontrolledInput, { errorMessage: handleErrorMessage('expirationYear'), hasError: !validations.isExpirationYearValid, w: "76px", id: "year", placeholder: "00", type: "tel", maxLength: 2, onChange: (event) => handleInputChange(event, 'expirationYear'), onBlurCapture: handleYearValidation })] }), _jsxs(Flex, { gap: "base", children: [_jsx(CardDetail, { children: "CVV" }), _jsx(UncontrolledInput, { errorMessage: handleErrorMessage('cvv'), hasError: !validations.isCvvValid, id: "cvv", onChange: (event) => handleInputChange(event, 'cvv'), placeholder: "", type: "tel", maxLength: 4, w: "93px", onBlurCapture: handleCvvValidation })] })] })] }) }));
|
|
13
13
|
};
|
|
14
14
|
const CardDetail = ({ children }) => {
|
|
15
15
|
return (_jsx(Text, { variant: "info", pt: "0.8rem", children: children }));
|
|
@@ -6,7 +6,7 @@ import { useShareHomeForm } from '../../hooks';
|
|
|
6
6
|
import { ShareHomeContactList } from './ShareHomeContactList';
|
|
7
7
|
export const ShareHomeForm = ({ contacts, loading, onAdd, onEmailSave, }) => {
|
|
8
8
|
const { accountTypes, contact, handleChange, handleInputSelect, handleOpen, handleSelectContact, handleSubmit, hasError, open, types, } = useShareHomeForm(onAdd);
|
|
9
|
-
return (_jsx(Box, { p: "base", w: "100%", children: _jsxs(Flex, { w: "100%", gap: "base", children: [_jsxs(Flex, { position: "relative", flex: 1, children: [_jsx(ShareWithButton, { "data-testid": "share-with-button", marginRight: "-1px", onClick: handleOpen }), _jsx(TextInput, { "data-testid": "share-home-form-email", autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('shareHome.placeholder'), value: contact.email, noOfLines: 1 }), open && (_jsx(ShareHomeContactList, { contacts: contacts, onClick: handleSelectContact, onDone: handleOpen, onChange: handleChange, onSave: (contact) => {
|
|
9
|
+
return (_jsx(Box, { p: "base", w: "100%", children: _jsxs(Flex, { w: "100%", gap: "base", children: [_jsxs(Flex, { position: "relative", flex: 1, children: [_jsx(ShareWithButton, { "data-testid": "share-with-button", marginRight: "-1px", onClick: handleOpen }), _jsx(TextInput, { "data-testid": "share-home-form-email", autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.errorEmail'), handleChange: handleChange, hasError: hasError, id: "email", placeholder: t('shareHome.placeholder'), value: contact.email, noOfLines: 1, showLabel: false }), open && (_jsx(ShareHomeContactList, { contacts: contacts, onClick: handleSelectContact, onDone: handleOpen, onChange: handleChange, onSave: (contact) => {
|
|
10
10
|
onEmailSave(contact);
|
|
11
11
|
handleOpen();
|
|
12
12
|
}, selectedContact: contact }))] }), _jsx(SelectInputWithBadge, { handleClick: handleInputSelect, initialValue: accountTypes[0], items: types, width: "70px", height: "md" }), _jsx(Button, { "data-testid": "share-home-form-submit", variant: "tertiary", onClick: handleSubmit, disabled: !contact.email, isLoading: loading, h: "48px", children: t('shareHome.btInvite') })] }) }));
|