refactored deviceLimit, linkExpiry and menuItem component
This commit is contained in:
parent
3d3ba6a98a
commit
65dd6ecda2
|
@ -25,48 +25,46 @@ export function ManageDeviceLimit({
|
||||||
deviceLimit: newLimit,
|
deviceLimit: newLimit,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const [shareDeviceLimitModalView, setDeviceLimitModalView] =
|
const [changeDeviceLimitView, setChangeDeviceLimitView] = useState(false);
|
||||||
useState(false);
|
|
||||||
const [shareDeviceLimitValue, setDeviceLimitValue] = useState(
|
|
||||||
publicShareProp.deviceLimit
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
if (shareDeviceLimitModalView) {
|
|
||||||
setDeviceLimitModalView(true);
|
|
||||||
} else setDeviceLimitModalView(false);
|
|
||||||
}, [shareDeviceLimitModalView]);
|
|
||||||
const closeShareExpiryOptionsModalView = () =>
|
const closeShareExpiryOptionsModalView = () =>
|
||||||
setDeviceLimitModalView(false);
|
setChangeDeviceLimitView(false);
|
||||||
const openShareExpiryOptionsModalView = () => setDeviceLimitModalView(true);
|
const openShareExpiryOptionsModalView = () =>
|
||||||
const changeshareExpiryValue = (value: number) => () => {
|
setChangeDeviceLimitView(true);
|
||||||
|
const changeDeviceLimitValue = (value: number) => () => {
|
||||||
updateDeviceLimit(value);
|
updateDeviceLimit(value);
|
||||||
setDeviceLimitValue(value);
|
publicShareProp.deviceLimit = value;
|
||||||
setDeviceLimitModalView(false);
|
setChangeDeviceLimitView(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (changeDeviceLimitView) {
|
||||||
|
setChangeDeviceLimitView(true);
|
||||||
|
} else setChangeDeviceLimitView(false);
|
||||||
|
}, [changeDeviceLimitView]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<EnteMenuItem
|
<EnteMenuItem
|
||||||
onClick={openShareExpiryOptionsModalView}
|
onClick={openShareExpiryOptionsModalView}
|
||||||
endIcon={<ChevronRight />}
|
endIcon={<ChevronRight />}
|
||||||
subText={String(shareDeviceLimitValue)}>
|
subText={String(publicShareProp.deviceLimit)}>
|
||||||
{t('LINK_DEVICE_LIMIT')}
|
{t('LINK_DEVICE_LIMIT')}
|
||||||
</EnteMenuItem>
|
</EnteMenuItem>
|
||||||
<EnteDrawer
|
<EnteDrawer
|
||||||
anchor="right"
|
anchor="right"
|
||||||
open={shareDeviceLimitModalView}
|
open={changeDeviceLimitView}
|
||||||
onClose={closeShareExpiryOptionsModalView}>
|
onClose={closeShareExpiryOptionsModalView}>
|
||||||
<DialogTitleWithCloseButton
|
<DialogTitleWithCloseButton
|
||||||
onClose={closeShareExpiryOptionsModalView}>
|
onClose={closeShareExpiryOptionsModalView}>
|
||||||
{t('LINK_EXPIRY')}
|
{t('LINK_EXPIRY')}
|
||||||
</DialogTitleWithCloseButton>
|
</DialogTitleWithCloseButton>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
{/* <OptionWithDivider data={shareExpiryOptions} /> */}
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{getDeviceLimitOptions().map((item) => (
|
{getDeviceLimitOptions().map((item) => (
|
||||||
<tr key={item.label}>
|
<tr key={item.label}>
|
||||||
<td>
|
<td>
|
||||||
<EnteMenuItem
|
<EnteMenuItem
|
||||||
onClick={changeshareExpiryValue(
|
onClick={changeDeviceLimitValue(
|
||||||
item.value
|
item.value
|
||||||
)}>
|
)}>
|
||||||
{item.label}
|
{item.label}
|
||||||
|
|
|
@ -27,24 +27,25 @@ export function ManageLinkExpiry({
|
||||||
validTill: optionFn,
|
validTill: optionFn,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const [shareExpiryOptionsModalView, setShareExpiryOptionsModalView] =
|
const [shareExpiryOptionsModalView, setShareExpiryOptionsModalView] =
|
||||||
useState(false);
|
useState(false);
|
||||||
|
|
||||||
const [shareExpiryValue, setShareExpiryValue] = useState(0);
|
const [shareExpiryValue, setShareExpiryValue] = useState(0);
|
||||||
|
|
||||||
const [labelText, setLabelText] = useState(
|
const [labelText, setLabelText] = useState(
|
||||||
publicShareProp?.validTill
|
publicShareProp?.validTill
|
||||||
? formatDateTime(publicShareProp?.validTill / 1000)
|
? formatDateTime(publicShareProp?.validTill / 1000)
|
||||||
: 'never'
|
: 'never'
|
||||||
);
|
);
|
||||||
useEffect(() => {
|
|
||||||
if (shareExpiryOptionsModalView) {
|
|
||||||
setShareExpiryOptionsModalView(true);
|
|
||||||
} else setShareExpiryOptionsModalView(false);
|
|
||||||
}, [shareExpiryOptionsModalView]);
|
|
||||||
const closeShareExpiryOptionsModalView = () =>
|
const closeShareExpiryOptionsModalView = () =>
|
||||||
setShareExpiryOptionsModalView(false);
|
setShareExpiryOptionsModalView(false);
|
||||||
|
|
||||||
const openShareExpiryOptionsModalView = () =>
|
const openShareExpiryOptionsModalView = () =>
|
||||||
setShareExpiryOptionsModalView(true);
|
setShareExpiryOptionsModalView(true);
|
||||||
const changeshareExpiryValue = (value: number) => () => {
|
|
||||||
|
const changeShareExpiryValue = (value: number) => () => {
|
||||||
updateDeviceExpiry(value);
|
updateDeviceExpiry(value);
|
||||||
setLabelText(
|
setLabelText(
|
||||||
publicShareProp?.validTill
|
publicShareProp?.validTill
|
||||||
|
@ -55,6 +56,13 @@ export function ManageLinkExpiry({
|
||||||
shareExpiryValue;
|
shareExpiryValue;
|
||||||
setShareExpiryOptionsModalView(false);
|
setShareExpiryOptionsModalView(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (shareExpiryOptionsModalView) {
|
||||||
|
setShareExpiryOptionsModalView(true);
|
||||||
|
} else setShareExpiryOptionsModalView(false);
|
||||||
|
}, [shareExpiryOptionsModalView]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<EnteMenuItem
|
<EnteMenuItem
|
||||||
|
@ -72,13 +80,12 @@ export function ManageLinkExpiry({
|
||||||
{t('LINK_EXPIRY')}
|
{t('LINK_EXPIRY')}
|
||||||
</DialogTitleWithCloseButton>
|
</DialogTitleWithCloseButton>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
{/* <OptionWithDivider data={shareExpiryOptions} /> */}
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{shareExpiryOptions().map((item) => (
|
{shareExpiryOptions().map((item) => (
|
||||||
<tr key={item.label}>
|
<tr key={item.label}>
|
||||||
<td>
|
<td>
|
||||||
<EnteMenuItem
|
<EnteMenuItem
|
||||||
onClick={changeshareExpiryValue(
|
onClick={changeShareExpiryValue(
|
||||||
item.value()
|
item.value()
|
||||||
)}>
|
)}>
|
||||||
{item.label}
|
{item.label}
|
||||||
|
|
|
@ -32,19 +32,11 @@ export function EnteMenuItem({
|
||||||
checked,
|
checked,
|
||||||
}: Iprops) {
|
}: Iprops) {
|
||||||
const menuContext = useContext(OverflowMenuContext);
|
const menuContext = useContext(OverflowMenuContext);
|
||||||
// const [buttonState, setButtonState] = useState<
|
|
||||||
// 'Default' | 'Loading' | 'Success'
|
|
||||||
// >('Default');
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
// setButtonState('Loading');
|
|
||||||
onClick();
|
onClick();
|
||||||
if (!keepOpenAfterClick) {
|
if (!keepOpenAfterClick) {
|
||||||
menuContext.close();
|
menuContext.close();
|
||||||
}
|
}
|
||||||
// setButtonState('Success');
|
|
||||||
// setTimeout(() => {
|
|
||||||
// setButtonState('Default');
|
|
||||||
// }, 2000);
|
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
|
@ -88,7 +80,6 @@ export function EnteMenuItem({
|
||||||
{endIcon && (
|
{endIcon && (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
padding: 0,
|
|
||||||
marginLeft: 1,
|
marginLeft: 1,
|
||||||
}}>
|
}}>
|
||||||
{endIcon}
|
{endIcon}
|
||||||
|
|
Loading…
Reference in a new issue