Skip to content

Commit

Permalink
Merge branch 'spreadsheet-vizual-fixes'
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrb24
mrb24 committed Oct 6, 2020
2 parents 0e1c862 + 001ef4d commit 0c817e6
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 54 deletions.
1 change: 0 additions & 1 deletion src/core/components/ResourcePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,6 @@ class ResourcePage extends Component {
branch,
content,
contentCss,
isActive,
notebook,
onCreateBranch,
onDeleteBranch,
Expand Down
38 changes: 27 additions & 11 deletions src/core/components/modals/EditResourceNameModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ class EditResourceNameModal extends React.Component {
onCancel: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
value: PropTypes.string
value: PropTypes.string,
inputComponent: PropTypes.object
}
/**
* Keep the new resource name in the local state.
Expand Down Expand Up @@ -78,7 +79,10 @@ class EditResourceNameModal extends React.Component {
*/
handleSubmit = (event) => {
const { isValid, onSubmit } = this.props;
const { value } = this.state
let { value } = this.state
if(!value && this.props.value){
value = this.props.value
}
// Return without submit if invalid value is given.
if (isValid != null) {
if (!isValid(value)) {
Expand All @@ -91,29 +95,40 @@ class EditResourceNameModal extends React.Component {
* Show simple modal with input text box.
*/
render() {
const { isValid, prompt, open, title } = this.props;
const { value } = this.state;
const { isValid, prompt, open, title, inputComponent } = this.props;
let { value } = this.state;
let message = null;
if(!value && this.props.value){
value = this.props.value
}
if (prompt != null) {
message = (<p>{prompt}</p>);
}
let validName = true;
if (isValid != null) {
validName = isValid(value);
}
let Tag = 'Input'
let inputProps = Object.assign({},
<Input
autoFocus
className="resource-name-input"
value={value}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
/>.props);
if (inputComponent) {
Tag = inputComponent.type;
inputProps = Object.assign(inputProps, inputComponent.props);
delete this.props.inputComponent;
}
return (
<Modal open={open} size={'small'}>
<Modal.Header>{title}</Modal.Header>
<Modal.Content>
<div className="resource-name">
{message}
<Input
autoFocus
className="resource-name-input"
value={value}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
/>
<Tag {...inputProps} />
</div>
</Modal.Content>
<Modal.Actions>
Expand All @@ -132,4 +147,5 @@ class EditResourceNameModal extends React.Component {
}
}


export default EditResourceNameModal;
8 changes: 4 additions & 4 deletions src/core/components/project/DatasetReason.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import React from 'react';
import PropTypes from 'prop-types';
import DatasetRepair from './DatasetRepair';
//import DatasetRepair from './DatasetRepair';
import { Icon } from 'semantic-ui-react';
import '../../../css/DatasetCaveat.css'

Expand Down Expand Up @@ -70,9 +70,9 @@ class DatasetReason extends React.Component {
*
*/
render() {
const { reason, onRepairError } = this.props;
const { reason/*, onRepairError*/ } = this.props;
const { key, family, message, confirmed } = reason;
const { expanded } = this.state;
//const { expanded } = this.state;
const reasonElements = [];//this.buildReasonElement('reason',value);
reasonElements.unshift(<div className='dataset-reason-element'><td className='dataset-reason-key'><h4>family: </h4></td><td>{family}</td></div>)
reasonElements.unshift(<div className='dataset-reason-element'><td className='dataset-reason-key'><h4>key: </h4></td><td>{key}</td></div>)
Expand All @@ -90,7 +90,7 @@ class DatasetReason extends React.Component {
}*/

let gotoErrorIcon = null
if(key && Array.isArray(key) && key.length != 0 ){
if(key && Array.isArray(key) && key.length !== 0 ){
gotoErrorIcon = (<Icon name='external alternate' size='small' />)
}
let errorIcon = (<Icon name='warning sign' size='large' color='yellow' />)
Expand Down
52 changes: 30 additions & 22 deletions src/core/components/spreadsheet/grid/HeaderCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ import styled from 'styled-components';
import { Loader, Label } from 'semantic-ui-react'
import { Draggable, Droppable } from 'react-drag-and-drop'
import { Icon } from 'semantic-ui-react';
import {
VIZUAL
} from '../../../util/Vizual';

import {
CartesianGrid,
Expand Down Expand Up @@ -57,7 +60,8 @@ class HeaderCell extends React.Component {
onClick: PropTypes.func,
onMove: PropTypes.func,
onUpdate: PropTypes.func,
isEditing: PropTypes.bool
isEditing: PropTypes.bool,
onMoveAction: PropTypes.func
}
/**
* Submit changes to the cell value if a onUpdate handler is given.
Expand Down Expand Up @@ -93,13 +97,15 @@ class HeaderCell extends React.Component {
}
}
}
handleMoveDropBefore = (dropData) => {
const { onMove } = this.props;
onMove(MOVE.LEFT);
handleMoveDropBefore = (dropData, dropTargetData) => {
const { onMoveAction } = this.props;
const dropTargetDataValue = dropTargetData.currentTarget.attributes.data.value;
onMoveAction(VIZUAL.MOVE_COLUMN, parseInt(dropData['header-cell'], 10), parseInt(dropTargetDataValue, 10));
}
handleMoveDropAfter = (dropData) => {
const { onMove } = this.props;
onMove(MOVE.RIGHT);
handleMoveDropAfter = (dropData, dropTargetData) => {
const { onMoveAction } = this.props;
const dropTargetDataValue = dropTargetData.currentTarget.attributes.data.value;
onMoveAction(VIZUAL.MOVE_COLUMN, parseInt(dropData['header-cell'], 10), parseInt(dropTargetDataValue, 10));
}
/**
* Render grid column cell as Html table header cell.
Expand Down Expand Up @@ -163,7 +169,8 @@ class HeaderCell extends React.Component {
dropTargetBefore = (
<Droppable
types={[dropTargetType]}
onDrop={this.handleMoveDropBefore}>
data={columnIndex}
onDrop={this.handleMoveDropBefore}>
<div className="drop-before" ><Icon
className='icon-button header-drop-target'
title='<- Move Colum Drop'
Expand All @@ -174,8 +181,9 @@ class HeaderCell extends React.Component {
dropTargetAfter = (
<Droppable
types={[dropTargetType]}
onDrop={this.handleMoveDropAfter}>
<div className="drop-after" ><Icon
data={columnIndex}
onDrop={this.handleMoveDropAfter}>
<div className="drop-after" ><Icon
className='icon-button header-drop-target'
title='Move Column Drop ->'
name='bullseye'
Expand All @@ -186,9 +194,7 @@ class HeaderCell extends React.Component {
cellValue = (
<div >

<Draggable type="header-cell" data={columnIndex} >

<span className='header-value'>
<span className='header-value'>
{columnName}
</span>
<Label size='mini'>
Expand Down Expand Up @@ -234,20 +240,22 @@ class HeaderCell extends React.Component {

</div>

</Draggable>

</div>
);
}
return (

<th className={cellCss} onClick={this.handleClick}>
{dropTargetBefore}
{dropTargetAfter}
{cellValue}
{dropdown}
</th>

<Draggable
type="header-cell"
data={columnIndex}
wrapperComponent={<th></th>}
className={cellCss}
onClick={this.handleClick}>
{dropTargetBefore}
{dropTargetAfter}
{cellValue}
{dropdown}
</Draggable>
);
}
}
Expand Down
60 changes: 57 additions & 3 deletions src/core/components/spreadsheet/grid/RowIndexCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import React from 'react'
import PropTypes from 'prop-types'
import RowDropDown from '../menu/RowDropDown';
import '../../../../css/Spreadsheet.css';

import { Droppable } from 'react-drag-and-drop'
import { Icon } from 'semantic-ui-react';
import { MOVE } from '../../../util/App';
import {
VIZUAL
} from '../../../util/Vizual';

/**
* Left-hand column in the grid that contains the row index and context menu.
Expand All @@ -36,7 +41,19 @@ class RowIndexCell extends React.Component {
PropTypes.number
]),
onAction: PropTypes.func,
onClick: PropTypes.func
onClick: PropTypes.func,
onMoveAction: PropTypes.func
}

handleMoveDropBefore = (dropData, dropTargetData) => {
const { onMoveAction } = this.props;
const dropTargetDataValue = dropTargetData.currentTarget.attributes.data.value;
onMoveAction(VIZUAL.MOVE_ROW, parseInt(dropData['row-index-cell'], 10), parseInt(dropTargetDataValue, 10));
}
handleMoveDropAfter = (dropData, dropTargetData) => {
const { onMoveAction } = this.props;
const dropTargetDataValue = dropTargetData.currentTarget.attributes.data.value;
onMoveAction(VIZUAL.MOVE_ROW, parseInt(dropData['row-index-cell'], 10), parseInt(dropTargetDataValue, 10));
}
/**
* Render grod column as Html table header cell.
Expand All @@ -45,6 +62,10 @@ class RowIndexCell extends React.Component {
const { disabled, rowIndex, rowId, value, onAction, onClick } = this.props;
// Show a dropdown menu if onAction method is provided
let dropdown = null;
let dropTargetType = 'none';
let dropTargetBefore = null;
let dropTargetAfter = null;

if (onAction != null) {
dropdown = (
<RowDropDown
Expand All @@ -56,10 +77,43 @@ class RowIndexCell extends React.Component {
/>
);
}
if (rowIndex !== -1 ){
dropTargetType = 'row-index-cell';
dropTargetBefore = (
<Droppable
types={[dropTargetType]}
data={rowIndex}
onDrop={this.handleMoveDropBefore}>
<div className="row-drop-before" ><Icon
className='icon-button row-index-drop-target'
title='<- Move Row Drop'
name='bullseye'
/></div>
</Droppable>
)
dropTargetAfter = (
<Droppable
types={[dropTargetType]}
data={rowIndex}
onDrop={this.handleMoveDropAfter}>
<div className="row-drop-after" ><Icon
className='icon-button row-index-drop-target'
title='Move Row Drop ->'
name='bullseye'
/></div>
</Droppable>
)
}
return (
<td className='grid-row-index' onClick={onClick}>
{ value }
<div >
{dropTargetBefore}
<div className="row-index-content" >
{ value }
</div>
{ dropdown }
{dropTargetAfter}
</div>
</td>
);
}
Expand Down

0 comments on commit 0c817e6

Please sign in to comment.