-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
💄 front: WIP Implementation of the design for the share link portion (#…
…50)
- Loading branch information
1 parent
e0fa40f
commit 3a0e0a9
Showing
11 changed files
with
561 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
189 changes: 189 additions & 0 deletions
189
tdrive/frontend/src/app/views/client/body/drive/modals/public-link/expiry-editor-row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| import moment from 'moment'; | ||
| import 'moment/min/locales'; | ||
|
|
||
| import { useEffect, useRef, useState } from 'react'; | ||
| import { uniqueId } from 'lodash'; | ||
|
|
||
| import Languages from 'features/global/services/languages-service'; | ||
|
|
||
| import BaseBlock from '@molecules/grouped-rows/base'; | ||
| import { Base, Info } from '@atoms/text'; | ||
| import { Input } from 'app/atoms/input/input-text'; | ||
| import { CheckboxSlider } from 'app/atoms/input/input-checkbox-slider'; | ||
| import { Button } from 'app/atoms/button/button'; | ||
| import { ShieldExclamationIcon, CalendarIcon, PencilAltIcon } from '@heroicons/react/outline'; | ||
| import { Modal, ModalContent } from 'app/atoms/modal'; | ||
|
|
||
| import Styles from './styles'; | ||
|
|
||
| export const ExpiryEditorRow = (props: { | ||
| disabled?: boolean; | ||
| value: number; | ||
| isLinkPasswordProtected: boolean; | ||
| onChange: (value: number) => Promise<void>; | ||
| }) => { | ||
| const [isEditing, setIsEditing] = useState(false); | ||
| const [currentEditedValue, setCurrentEditedValue] = useState(0); | ||
| const [isWaitingForSave, setIsWaitingForSave] = useState(false); | ||
| const [isConfirmingExpiryRemoval, setIsConfirmingExpiryRemoval] = useState(false); | ||
|
|
||
| const inputRef = useRef<HTMLInputElement>(null); | ||
| const [chkExpiryId] = useState(uniqueId("chk")); | ||
|
|
||
| const disabled = props.disabled || isWaitingForSave; | ||
|
|
||
| useEffect(() => { | ||
| if (!isEditing || !inputRef.current) return; | ||
| let timeout: NodeJS.Timeout | null = setTimeout(() => { | ||
| timeout = null; | ||
| inputRef.current?.focus(); | ||
| }, 10); | ||
| return () => { | ||
| if (timeout) clearTimeout(timeout); | ||
| timeout = null; | ||
| } | ||
| }, [ isEditing ]) | ||
|
|
||
| function saveValue(value: number) { | ||
| setIsWaitingForSave(true); | ||
| props. | ||
| onChange(value). | ||
| then( | ||
| () => { | ||
| setIsWaitingForSave(false); | ||
| setIsEditing(false); | ||
| }, | ||
| (e: unknown) => { | ||
| console.error("Error while saving expiry date:", e); | ||
| setIsWaitingForSave(false); | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| function confirmSaveExpiry(expiry: number) { | ||
| if (expiry === props.value) { | ||
| setIsEditing(false); | ||
| return; | ||
| } | ||
| if (expiry == 0 && (props.value > 0 && props.value < Date.now())) | ||
| setIsConfirmingExpiryRemoval(true); | ||
| else | ||
| saveValue(expiry); | ||
| } | ||
|
|
||
| function expirationDate(exp: moment.MomentInput) { | ||
| moment.locale(Languages.getLanguage()); | ||
| return moment(exp).fromNow(true).toLocaleString(); | ||
| } | ||
|
|
||
| return <> | ||
| <BaseBlock | ||
| className={"m-4" + (disabled ? Styles.Disabled.Yes : "")} | ||
| disabled={disabled} | ||
| avatar={<CalendarIcon className={Styles.SmallIconClasses} />} | ||
| title={ | ||
| <Base> | ||
| <label htmlFor={chkExpiryId}>{Languages.t('components.public-link-security_expiration_title')}</label> | ||
| {!!props.value && !isEditing && | ||
| <> | ||
| <a | ||
| className={disabled ? Styles.Disabled.Yes : ""} | ||
| onClick={() => { | ||
| if (!disabled) { | ||
| setCurrentEditedValue(props.value); | ||
| setIsEditing(true); | ||
| } | ||
| return false; | ||
| }} | ||
| > | ||
| <PencilAltIcon className={Styles.SmallIconClasses + "ml-1 inline align-bottom"} /> | ||
| </a> | ||
|
|
||
| {(currentEditedValue || props.value) <= Date.now() | ||
| ? <Info className="ml-2 !text-red-500"> | ||
| ({Languages.t('components.public-link-security_expired')}) | ||
| </Info> | ||
| : <Info className="ml-2">({expirationDate(currentEditedValue || props.value)})</Info> | ||
| }{' '} | ||
| </> | ||
| } | ||
| </Base> | ||
| } | ||
| subtitle={''} | ||
| suffix={isEditing | ||
| ? <> | ||
| <Input | ||
| inputRef={inputRef} | ||
| disabled={disabled} | ||
| className="max-w-xs mr-4 mt-1" | ||
| type="date" | ||
| size='sm' | ||
| min={moment().add(1, 'days').toISOString().split('T')[0]} | ||
| value={new Date(currentEditedValue).toISOString().split('T')[0]} | ||
| onChange={e => e.target.value && setCurrentEditedValue(new Date(e.target.value).getTime())} | ||
| onKeyUp={e => { | ||
| if (e.key == 'Escape') | ||
| setIsEditing(false); | ||
| else if (e.key == 'Enter') | ||
| confirmSaveExpiry(currentEditedValue); | ||
| }} | ||
| /> | ||
| <Button | ||
| disabled={disabled} | ||
| theme="default" | ||
| size="sm" | ||
| className="max-w-xs mr-2 mt-1" | ||
| onClick={() => confirmSaveExpiry(currentEditedValue)} | ||
| > | ||
| {Languages.t('components.public-link-security_field_confirm_edit')} | ||
| </Button> | ||
| </> | ||
| : <CheckboxSlider | ||
| id={chkExpiryId} | ||
| checked={!!props.value} | ||
| disabled={disabled} | ||
| onChange={({target: { checked }}) => { | ||
| if (checked) { | ||
| setIsEditing(checked); | ||
| if (checked && !currentEditedValue) | ||
| setCurrentEditedValue(props.value || moment().add(7, 'days').unix() * 1000); | ||
| } else | ||
| confirmSaveExpiry(0); | ||
| }} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Modal open={isConfirmingExpiryRemoval} onClose={() => setIsConfirmingExpiryRemoval(false)}> | ||
| <ModalContent | ||
| title={Languages.t("components.public-link-security_expiration_removal_title")} | ||
| text={props.isLinkPasswordProtected | ||
| ? Languages.t("components.public-link-security_expiration_removal_but_password") | ||
| : Languages.t("components.public-link-security_expiration_removal_no_password") | ||
| } | ||
| theme="danger" | ||
| icon={ShieldExclamationIcon} | ||
| buttons={ | ||
| <> | ||
| <Button | ||
| className="ml-2" | ||
| theme='default' | ||
| onClick={() => setIsConfirmingExpiryRemoval(false)} | ||
| > | ||
| {Languages.t("general.cancel")} | ||
| </Button> | ||
| <Button | ||
| theme="danger" | ||
| onClick={() => { | ||
| setIsConfirmingExpiryRemoval(false) | ||
| saveValue(0); | ||
| }} | ||
| > | ||
| {Languages.t("components.public-link-security_expiration_removal_confirm")} | ||
| </Button> | ||
| </> | ||
| } | ||
| /> | ||
| </Modal> | ||
| </>; | ||
| } |
Oops, something went wrong.