honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css playing

This commit is contained in:
petkir 2020-06-18 23:05:45 +02:00
parent 563f39a100
commit 5b2c16affc
7 changed files with 146 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-kanban-board/package-lock.json generated
View File

@ -4199,6 +4199,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",

1
samples/react-kanban-board/package.json
View File

@ -25,6 +25,7 @@
"@types/react": "16.7.22",
"@types/react-dom": "16.8.0",
"@types/webpack-env": "1.13.1",
"classnames": "^2.2.6",
"jqwidgets-scripts": "^8.1.2",
"office-ui-fabric-react": "^6.143.0",
"react": "16.7.0",

7
samples/react-kanban-board/src/kanban/KanbanBucket.module.scss
View File

@ -19,4 +19,11 @@
right: 0px;
}
}
&.dragover{
background-color: lightgray;
}
.placeholder{
background-color: rgb(180, 180, 180);
}
}

58
samples/react-kanban-board/src/kanban/KanbanBucket.tsx
View File

@ -7,6 +7,7 @@ import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions';
import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
import { ActionButton } from 'office-ui-fabric-react';
import KanbanTask from './KanbanTask';
import classNames from 'classnames';
import * as strings from 'KanbanBoardStrings';
export interface IKanbanBucketProps extends IKanbanBucket {
@ -14,6 +15,15 @@ export interface IKanbanBucketProps extends IKanbanBucket {
tasksettings: IKanbanBoardTaskSettings;
taskactions: IKanbanBoardTaskActions;
onDragStart: (event, taskId: string | number, bucket: string) => void;
onDragOver: (event, targetbucket: string) => void;
onDragLeave: (event, targetbucket: string) => void;
onDrop: (event, targetbucket: string) => void;
leavingTaskId?: number | string;
leavingBucket?: string;
overBucket?: string;
openDetails?: (taskId: number | string) => void;
}
@ -27,6 +37,7 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
this.state = {
};
}
/*
nice to use a object merge
@ -35,11 +46,16 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
hope this will be translated
*/
public render(): React.ReactElement<IKanbanBucketProps> {
const { bucketheadline, color, buckettasks, tasksettings, taskactions, percentageComplete, allowAddTask } = this.props;
const { bucket, bucketheadline, color, buckettasks,
tasksettings, taskactions, percentageComplete,
allowAddTask, overBucket,leavingTaskId,leavingBucket } = this.props;
return (
<div className={styles.bucket}
onDragOver={(event) => this.onDragOver(event)}
onDrop={this.onDrop.bind(this)}
<div className={classNames({[styles.bucket]: true, [styles.dragover]: (overBucket && overBucket === bucket)})}
onDragOver={(event) => this.props.onDragOver(event, bucket)}
onDragLeave={(event) => this.props.onDragLeave(event, bucket)}
onDrop={(event) => this.props.onDragLeave(event, bucket)}
>
<div className={styles.headline}>
<span>{bucketheadline}</span>
@ -56,11 +72,17 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
{
buckettasks.map((t) => {
const merge = { ...t, ...tasksettings, ...taskactions };
return (
<KanbanTask
const isMoving= (t.taskId === leavingTaskId && t.bucket === leavingBucket);
return (<div className={isMoving&&styles.placeholder} >
<KanbanTask
key={t.taskId}
{...merge}
isMoving={isMoving}
openDetails={this.props.openDetails}
/>
onDragStart={(event) => this.props.onDragStart(event, t.taskId, t.bucket)}
/></div>
);
})
}
@ -69,27 +91,5 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
}
private onDragOver(event): void {
event.preventDefault();
}
private onDrop(event): void {
// this.props.name
// let taskName = event.dataTransfer.getData("taskName");
/*
let tasks = this.state.tasks.filter((task) => {
if (task.taskName == taskName) {
task.type = cat;
}
return task;
});
this.setState({
...this.state,
tasks
});
*/
}
}

103
samples/react-kanban-board/src/kanban/KanbanComponent.tsx
View File

@ -20,20 +20,27 @@ export interface IKanbanComponentProps {
*/
}
export interface IKanbanComponentState { }
export interface IKanbanComponentState {
leavingTaskId?: number | string;
leavingBucket?: string;
overBucket?: string;
}
export default class KanbanComponent extends React.Component<IKanbanComponentProps, IKanbanComponentState> {
private dragelement?: IKanbanTask;
constructor(props: IKanbanComponentProps) {
super(props);
this.state = {
leavingTaskId: null,
leavingBucket: null,
overBucket: null
};
}
public render(): React.ReactElement<IKanbanComponentProps> {
const { buckets, tasks, tasksettings, taskactions, showCommandbar } = this.props;
const { leavingBucket, leavingTaskId, overBucket } = this.state
return (
<div>
{showCommandbar && <CommandBar
@ -43,21 +50,93 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
ariaLabel={'Use left and right arrow keys to navigate between commands'}
/>}
<div className={styles.kanbanBoard}>
{buckets.map((b) =>
(<KanbanBucket
{...b}
buckettasks={tasks.filter((x) => x.bucket == b.bucket)}
tasksettings={tasksettings}
taskactions={taskactions}
openDetails={(x) => alert(x)}
/>)
{
)}
buckets.map((b) => {
const merge = { ...b, ...this.state }
return (<KanbanBucket
key={b.bucket}
{...merge}
buckettasks={tasks.filter((x) => x.bucket == b.bucket)}
tasksettings={tasksettings}
taskactions={taskactions}
openDetails={(x) => alert(x)}
onDrop={this.onDrop.bind(this)}
onDragLeave={this.onDragLeave.bind(this)}
onDragOver={this.onDragOver.bind(this)}
onDragStart={this.onDragStart.bind(this)}
/>)
}
)}
</div>
</div>
);
}
private onDragLeave(event): void {
console.log('onDragLeave');
/* if (this.bucketRef.current.classList.contains(styles.dragover)) {
this.bucketRef.current.classList.remove(styles.dragover)
}*/
}
private onDragStart(event, taskId: string | number, bucket: string): void {
console.log('onDragStart');
const taskitem = this.props.tasks.filter(p => p.taskId == taskId);
if (taskitem.length === 1) {
event.dataTransfer.setData("taskId", taskId);
event.dataTransfer.setData("sourcebucket", bucket);
//set element because event.dataTransfer is empty by DragOver
console.log('set dragelement');
this.dragelement = taskitem[0];
this.setState({
leavingTaskId: taskId,
leavingBucket: bucket,
});
} else {
// Error not consitent
}
}
private onDragOver(event, targetbucket: string): void {
event.preventDefault();
console.log('onDragOver');
console.log(event.dataTransfer.getData("sourcebucket"));
if (this.dragelement.bucket !== targetbucket) {
/* if (!this.bucketRef.current.classList.contains(styles.dragover)) {
this.bucketRef.current.classList.add(styles.dragover)
}*/
} else {
}
}
private onDrop(event, targetbucket: string): void {
console.log(`onDrop sourcebucket ${event.dataTransfer.getData("sourcebucket")} taskid: ${event.dataTransfer.getData("taskId")}`);
/* if (this.bucketRef.current.classList.contains(styles.dragover)) {
this.bucketRef.current.classList.remove(styles.dragover)
}*/
if (event.dataTransfer.getData("sourcebucket") !== targetbucket) {
// other cases no Bucketchange
}
this.dragelement = null;
this.setState({
leavingTaskId: null,
leavingBucket: null,
overBucket: null,
});
}
private getItems = () => {
return [
{

5
samples/react-kanban-board/src/kanban/KanbanTask.module.scss
View File

@ -1,5 +1,6 @@
.taskcard {
display: block;
background-color: initial;
.titlerow {
.title{
display: inline;
@ -12,4 +13,8 @@
display: inline;
}
}
}
.moving{
background-color: rgb(180, 100, 100) !important;
}

16
samples/react-kanban-board/src/kanban/KanbanTask.tsx
View File

@ -5,12 +5,14 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
import {IKanbanTask} from './IKanbanTask';
import {IKanbanBoardTaskSettings} from './IKanbanBoardTaskSettings';
import {IKanbanBoardTaskActions} from './IKanbanBoardTaskActions';
import classNames from 'classnames';
export interface IKanbanTaskProps extends IKanbanTask,IKanbanBoardTaskSettings,IKanbanBoardTaskActions {
openDetails?: (taskId: number | string) => void;
onDragStart:(event) => void;
isMoving:boolean;
}
export interface IKanbanTaskState { }
@ -22,12 +24,13 @@ export default class KanbanTask extends React.Component<IKanbanTaskProps, IKanba
}
public render(): React.ReactElement<IKanbanTaskProps> {
const { title, showLabels, showPriority, showAssignedTo, isCompleted } = this.props;
const { title, showLabels, showPriority, showAssignedTo, isCompleted,isMoving } = this.props;
const showCompleted = !!this.props.toggleCompleted;
const iconCompleted = { iconName: isCompleted ? 'RadioBtnOn' : 'RadioBtnOff' };
return (
<div className={styles.taskcard}
onDragStart = {(event) => this.onDragStart(event)}
<div className={classNames({[styles.taskcard]: true, [styles.moving]: isMoving}) }
onDragStart = {this.props.onDragStart}
draggable
>
<div className={styles.titlerow}>
{showCompleted && (
@ -55,8 +58,5 @@ export default class KanbanTask extends React.Component<IKanbanTaskProps, IKanba
}
}
private onDragStart(event): void {
console.log('dragstart on div: ', this.props.taskId);
event.dataTransfer.setData("taskId", this.props.taskId);
}
}