diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js index 078624c7d6..219efdcfb4 100644 --- a/frontend/src/components/cur-dir-path/dir-path.js +++ b/frontend/src/components/cur-dir-path/dir-path.js @@ -133,7 +133,7 @@ class DirPath extends React.Component { role={children ? 'button' : null} onClick={children ? this.handleRefresh : () => {}} > - + {viewId && } {children && ( <> diff --git a/frontend/src/metadata/components/data-process-setter/field-display-settings/field-item.js b/frontend/src/metadata/components/data-process-setter/field-display-settings/field-item.js index 44f6d99ce3..e913bc8e51 100644 --- a/frontend/src/metadata/components/data-process-setter/field-display-settings/field-item.js +++ b/frontend/src/metadata/components/data-process-setter/field-display-settings/field-item.js @@ -1,9 +1,10 @@ import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import Switch from '../../../../components/switch'; import Icon from '../../../../components/icon'; -function FieldItem({ field, isCollapsed, onToggleField, onMoveField, fieldIconConfig }) { +function FieldItem({ field, index, isCollapsed, onToggleField, onMoveField, fieldIconConfig, updateDragOverKey, dragOverColumnKey, draggingColumnIndex, updateDraggingKey }) { let enteredCounter = 0; const fieldItemRef = useRef(null); const [isItemDropTipShow, setDropTipShow] = useState(false); @@ -19,15 +20,17 @@ function FieldItem({ field, isCollapsed, onToggleField, onMoveField, fieldIconCo e.stopPropagation(); e.dataTransfer.setDragImage(fieldItemRef.current, 10, 10); e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData('application/sf-metadata-filed-display-setting', field.key); + e.dataTransfer.setData('application/sf-metadata-field-display-setting', field.key); + updateDraggingKey(field.key); }; - const onTableDragEnter = (e) => { + const onDragEnter = (e) => { e.stopPropagation(); enteredCounter++; if (enteredCounter !== 0 && !isItemDropTipShow) { setDropTipShow(true); } + updateDragOverKey(field.key); }; const onDragOver = (e) => { @@ -37,6 +40,7 @@ function FieldItem({ field, isCollapsed, onToggleField, onMoveField, fieldIconCo e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'move'; + updateDragOverKey(field.key); }; const onDragLeave = (e) => { @@ -45,36 +49,45 @@ function FieldItem({ field, isCollapsed, onToggleField, onMoveField, fieldIconCo if (enteredCounter === 0) { setDropTipShow(false); } + updateDragOverKey(null); }; const onDrop = (e) => { e.stopPropagation(); e.preventDefault(); setDropTipShow(false); - const droppedColumnKey = e.dataTransfer.getData('application/sf-metadata-filed-display-setting'); + const droppedColumnKey = e.dataTransfer.getData('application/sf-metadata-field-display-setting'); if (droppedColumnKey === field.key) return; onMoveField(droppedColumnKey, field.key); + updateDragOverKey(null); + updateDraggingKey(null); }; const placeholder = () => { return ( -
+
{field.name}
); }; + const isOver = (dragOverColumnKey === field.key); + return (
= index }, + { 'hide-column-can-drop': isOver && draggingColumnIndex < index }, + )} onDrop={onDrop} - onDragEnter={onTableDragEnter} + onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} > -
+
{ const nodeRef = useRef(null); const [isCollapsed, setCollapsed] = useState(true); + const [dragOverColumnKey, setDragOverCellKey] = useState(null); + const [draggingColumnKey, setDraggingCellKey] = useState(null); + + const updateDragOverKey = useCallback((cellKey) => { + if (cellKey === dragOverColumnKey) return; + setDragOverCellKey(cellKey); + }, [dragOverColumnKey]); + + const updateDraggingKey = useCallback((cellKey) => { + if (cellKey === draggingColumnKey) return; + setDraggingCellKey(cellKey); + }, [draggingColumnKey]); const expandAllFields = () => { setCollapsed(!isCollapsed); @@ -31,39 +43,45 @@ const FieldDisplaySettings = ({ fieldIconConfig, fields, textProperties, onToggl exited: { opacity: 0, height: 0 }, }; const fieldAllShown = fields.every(field => field.shown); + const draggingColumnIndex = draggingColumnKey ? fields.findIndex(f => f.key === draggingColumnKey) : -1; return ( -
+
-
+
{state => ( -
-
+
+
onToggleFieldsVisibility(!fieldAllShown)}> {fieldAllShown ? textProperties.hideValue : textProperties.showValue}
-
+
{fields.map((field, index) => { return ( ); })} diff --git a/frontend/src/metadata/components/metadata-view-name.js b/frontend/src/metadata/components/metadata-view-name.js index b626ee7b4e..211c06d1b4 100644 --- a/frontend/src/metadata/components/metadata-view-name.js +++ b/frontend/src/metadata/components/metadata-view-name.js @@ -4,14 +4,13 @@ import { useMetadata } from '../hooks'; const MetadataViewName = ({ id }) => { const { idViewMap } = useMetadata(); - if (!id) return null; const view = idViewMap[id]; if (!view) return null; return (<>{view.name}); }; MetadataViewName.propTypes = { - id: PropTypes.string, + id: PropTypes.string.isRequired, }; export default MetadataViewName; diff --git a/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/hide-column.js b/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/hide-column.js index 2da3b39470..f9924624b5 100644 --- a/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/hide-column.js +++ b/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/hide-column.js @@ -22,10 +22,10 @@ const HideColumnItem = ({ const ref = useRef(null); const onDragStart = useCallback((event) => { - const dragData = JSON.stringify({ type: 'sf-metadata-filed-display-setting', column_key: column.key }); + const dragData = JSON.stringify({ type: 'sf-metadata-field-display-setting', column_key: column.key }); event.dataTransfer.setDragImage(ref.current, 10, 10); event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('application/drag-sf-metadata-filed-display-setting', dragData); + event.dataTransfer.setData('application/drag-sf-metadata-field-display-setting', dragData); updateDraggingKey(column.key); }, [column, updateDraggingKey]); @@ -48,10 +48,10 @@ const HideColumnItem = ({ const onDrop = useCallback((event) => { event.stopPropagation(); - let dragData = event.dataTransfer.getData('application/drag-sf-metadata-filed-display-setting'); + let dragData = event.dataTransfer.getData('application/drag-sf-metadata-field-display-setting'); if (!dragData) return false; dragData = JSON.parse(dragData); - if (dragData.type !== 'sf-metadata-filed-display-setting' || !dragData.column_key) return false; + if (dragData.type !== 'sf-metadata-field-display-setting' || !dragData.column_key) return false; if (dragData.column_key !== column.key) { onMove && onMove(dragData.column_key, column.key); }