diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js index a9dfc1e1a5..8d6c10276f 100644 --- a/frontend/src/metadata/hooks/metadata.js +++ b/frontend/src/metadata/hooks/metadata.js @@ -126,7 +126,6 @@ export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, se const selectView = useCallback((view, isSelected) => { if (isSelected) return; - const isFaceRecognitionView = view.type === PRIVATE_FILE_TYPE.FACE_RECOGNITION; const node = { children: [], path: '/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/' + view._id, @@ -135,9 +134,8 @@ export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, se isPreload: true, object: { file_tags: [], - id: isFaceRecognitionView ? PRIVATE_FILE_TYPE.FACE_RECOGNITION : PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES, - name: isFaceRecognitionView ? gettext('Photos - classfied by people') : gettext('File extended properties'), - type: isFaceRecognitionView ? PRIVATE_FILE_TYPE.FACE_RECOGNITION : PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES, + id: view._id, + type: PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES, isDir: () => false, }, parentNode: {}, diff --git a/frontend/src/metadata/views/face-recognition/peoples/people/index.css b/frontend/src/metadata/views/face-recognition/peoples/people/index.css index a6050c98d2..8feaf66670 100644 --- a/frontend/src/metadata/views/face-recognition/peoples/people/index.css +++ b/frontend/src/metadata/views/face-recognition/peoples/people/index.css @@ -3,6 +3,7 @@ width: 48%; flex-shrink: 0; overflow: visible; + border-radius: 3px; } .sf-metadata-peoples-container .sf-metadata-people-info:hover { @@ -28,7 +29,6 @@ flex-direction: column; justify-content: space-between; padding: 6px 0; - overflow: hidden; } .sf-metadata-peoples-container .sf-metadata-people-info .sf-metadata-people-info-name { @@ -43,7 +43,7 @@ white-space: nowrap; } -.sf-metadata-peoples-container .sf-metadata-people-info .sf-metadata-people-info-renaming { +.sf-metadata-peoples-container .sf-metadata-people-info .rename-container input { box-sizing: border-box; padding: 2px 3px; width: 20rem; @@ -56,7 +56,7 @@ border: 1px solid #ccc; } -.sf-metadata-peoples-container .sf-metadata-people-info .sf-metadata-people-info-renaming:focus { +.sf-metadata-peoples-container .sf-metadata-people-info .rename-container input { border-color: #1991eb; } diff --git a/frontend/src/metadata/views/face-recognition/peoples/people/index.js b/frontend/src/metadata/views/face-recognition/peoples/people/index.js index 6b3d921940..87ddbe4e9c 100644 --- a/frontend/src/metadata/views/face-recognition/peoples/people/index.js +++ b/frontend/src/metadata/views/face-recognition/peoples/people/index.js @@ -1,13 +1,11 @@ import React, { useCallback, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Input } from 'reactstrap'; import classNames from 'classnames'; -import isHotkey from 'is-hotkey'; import { gettext, siteRoot, thumbnailDefaultSize } from '../../../../../utils/constants'; import OpMenu from './op-menu'; -import { isEnter } from '../../../../utils/hotkey'; import { Utils } from '../../../../../utils/utils'; import { getFileNameFromRecord, getParentDirFromRecord } from '../../../../utils/cell'; +import Rename from '../../../../../components/rename'; import './index.css'; @@ -27,7 +25,8 @@ const People = ({ haveFreezed, people, onOpenPeople, onRename, onFreezed, onUnFr return Array.isArray(people._photo_links) ? people._photo_links.length : 0; }, [people._photo_links]); - const [name, setName] = useState(people._name || gettext('Person image')); + const name = useMemo(() => people._name || gettext('Person image'), [people._name]); + const [renaming, setRenaming] = useState(false); const [active, setActive] = useState(false); const readonly = !window.sfMetadataContext.canModify(); @@ -47,37 +46,29 @@ const People = ({ haveFreezed, people, onOpenPeople, onRename, onFreezed, onUnFr setRenaming(true); }, [onFreezed]); - const onBlur = useCallback(() => { - if (!name) return; - setRenaming(false); - if (name !== (people._name || gettext('Person image'))) { + const onRenameConfirm = useCallback((newName) => { + if (newName !== name) { onUnFreezed(); - onRename(people._id, name, people._name); + onRename(people._id, newName, name); } + setRenaming(false); }, [people, name, onRename, onUnFreezed]); - const onChange = useCallback((event) => { - const value = event.target.value; - if (value === name) return; - setName(value); - }, [name]); - - const onKeyDown = useCallback((event) => { - if (isEnter(event)) { - onBlur(); - return; - } else if (isHotkey('esc', event)) { - setName(people.name); - setRenaming(false); - return; - } - }, [people, onBlur]); - - const _onUnFreezed = useCallback(() => { + const onRenameCancel = useCallback(() => { onUnFreezed(); - setActive(false); + setRenaming(false); }, [onUnFreezed]); + const handelUnFreezed = useCallback((keepActive) => { + onUnFreezed(); + !keepActive && setActive(false); + }, [onUnFreezed]); + + const handelClick = useCallback(() => { + if (renaming) return; + setTimeout(() => onOpenPeople(people), 1); + }, [renaming, people, onOpenPeople]); + return (
{} : () => onOpenPeople(people)} + onClick={handelClick} >
{name}
-
+
{renaming ? ( - + ) : (
{name}
)} @@ -104,8 +95,8 @@ const People = ({ haveFreezed, people, onOpenPeople, onRename, onFreezed, onUnFr
{!readonly && people._is_someone && (
- {active && ( - + {active && !renaming && ( + )}
)} diff --git a/frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js b/frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js index f7728bf7d1..62aa761f4e 100644 --- a/frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js +++ b/frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js @@ -7,27 +7,20 @@ const OpMenu = ({ onRename, onFreezed, onUnFreezed }) => { let [isShow, setShow] = useState(false); const toggle = useCallback((event) => { - const dataset = event.target ? event.target.dataset : null; - if (dataset && dataset.toggle && dataset.toggle === 'rename') { - onRename(); - setShow(!isShow); - return; - } + event.stopPropagation(); if (isShow) { - onUnFreezed(); + const isClickToggleBtn = event.target.className?.includes('face-recognition-more-operations-toggle'); + onUnFreezed(isClickToggleBtn); } else { onFreezed(); } setShow(!isShow); - }, [isShow, onRename, onFreezed, onUnFreezed, setShow]); + }, [isShow, onFreezed, onUnFreezed, setShow]); - const onClick = useCallback((event) => { - toggle(event); - }, [toggle]); - - const onItemClick = useCallback((event) => { - toggle(event); - }, [toggle]); + const handleRename = useCallback(() => { + onRename(); + setShow(false); + }, [onRename, setShow]); useEffect(() => { return () => { @@ -42,14 +35,13 @@ const OpMenu = ({ onRename, onFreezed, onUnFreezed }) => { tag="i" role="button" tabIndex="0" - className="sf-dropdown-toggle sf3-font-more sf3-font" + className="sf-dropdown-toggle sf3-font-more sf3-font face-recognition-more-operations-toggle" title={gettext('More operations')} aria-label={gettext('More operations')} - onClick={onClick} data-toggle="dropdown" /> - {gettext('Rename')} + {gettext('Rename')} );