Introduced sorting, column visibility and column resizing
Summary: Add support for resizable columns, column sorting, and hiding / showing columns Moved some utilities from Flipper to flipper-plugin, such as Interactive and LowPassFilter Split DataTable into two components; DataSourceRenderer which takes care of purely rendering the virtualization, and DataTable that has the Chrome around that, such as column headers, search bar, etc. Reviewed By: nikoant Differential Revision: D26321105 fbshipit-source-id: 32b8fc03b4fb97b3af52b23e273c3e5b8cbc4498
This commit is contained in:
Michel Weststrate
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
86ad413669
commit
44bb5b1beb
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import invariant from 'invariant';
|
||||
|
||||
export default class LowPassFilter {
|
||||
constructor(smoothing: number = 0.9) {
|
||||
this.smoothing = smoothing;
|
||||
this.buffer = [];
|
||||
this.bufferMaxSize = 5;
|
||||
}
|
||||
|
||||
bufferMaxSize: number;
|
||||
smoothing: number;
|
||||
buffer: Array<number>;
|
||||
|
||||
hasFullBuffer(): boolean {
|
||||
return this.buffer.length === this.bufferMaxSize;
|
||||
}
|
||||
|
||||
push(value: number): number {
|
||||
let removed: number = 0;
|
||||
|
||||
if (this.hasFullBuffer()) {
|
||||
const tmp: number | undefined = this.buffer.shift();
|
||||
invariant(
|
||||
tmp !== undefined,
|
||||
'Invariant violation: Buffer reported full but shift returned nothing.',
|
||||
);
|
||||
removed = tmp;
|
||||
}
|
||||
|
||||
this.buffer.push(value);
|
||||
|
||||
return removed;
|
||||
}
|
||||
|
||||
next(nextValue: number): number {
|
||||
// push new value to the end, and remove oldest one
|
||||
const removed = this.push(nextValue);
|
||||
|
||||
// smooth value using all values from buffer
|
||||
const result = this.buffer.reduce(this._nextReduce, removed);
|
||||
|
||||
// replace smoothed value
|
||||
this.buffer[this.buffer.length - 1] = result;
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
_nextReduce = (last: number, current: number): number => {
|
||||
return this.smoothing * current + (1 - this.smoothing) * last;
|
||||
};
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import LowPassFilter from '../LowPassFilter';
|
||||
|
||||
test('hasFullBuffer', () => {
|
||||
const lpf = new LowPassFilter();
|
||||
expect(lpf.hasFullBuffer()).toBeFalsy();
|
||||
|
||||
lpf.push(1);
|
||||
lpf.push(2);
|
||||
lpf.push(3);
|
||||
lpf.push(4);
|
||||
lpf.push(5);
|
||||
|
||||
expect(lpf.hasFullBuffer()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('push on full buffer returns shifted value', () => {
|
||||
const lpf = new LowPassFilter();
|
||||
expect(lpf.push(1)).toBe(0);
|
||||
expect(lpf.push(2)).toBe(0);
|
||||
expect(lpf.push(3)).toBe(0);
|
||||
expect(lpf.push(4)).toBe(0);
|
||||
expect(lpf.push(5)).toBe(0);
|
||||
expect(lpf.push(6)).toBe(1);
|
||||
expect(lpf.push(7)).toBe(2);
|
||||
});
|
||||
|
||||
test('next returns smoothed value', () => {
|
||||
const lpf = new LowPassFilter();
|
||||
expect(lpf.next(1)).toBe(0.9);
|
||||
expect(lpf.next(2)).toBe(1.881);
|
||||
});
|
||||
|
||||
test('next returns smoothed value with custom smoothing', () => {
|
||||
const lpf = new LowPassFilter(0.5);
|
||||
expect(lpf.next(1)).toBe(0.5);
|
||||
expect(lpf.next(2)).toBe(1.125);
|
||||
});
|
||||
@@ -1,160 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {Rect} from './geometry';
|
||||
|
||||
export const SNAP_SIZE = 16;
|
||||
|
||||
export function snapGrid(val: number): number {
|
||||
return val - (val % SNAP_SIZE);
|
||||
}
|
||||
|
||||
export function getPossibleSnappedPosition(
|
||||
windows: Array<Rect>,
|
||||
{
|
||||
getGap,
|
||||
getNew,
|
||||
}: {
|
||||
getNew: (win: Rect) => number;
|
||||
getGap: (win: Rect) => number;
|
||||
},
|
||||
): number | undefined {
|
||||
for (const win of windows) {
|
||||
const gap = Math.abs(getGap(win));
|
||||
if (gap >= 0 && gap < SNAP_SIZE) {
|
||||
return getNew(win);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function getDistanceTo(props: Rect, win: Rect): number {
|
||||
const x1 = win.left;
|
||||
const y1 = win.top;
|
||||
const x1b = win.left + win.width;
|
||||
const y1b = win.top + win.height;
|
||||
|
||||
const x2 = props.left;
|
||||
const y2 = props.top;
|
||||
const x2b = props.left + props.width;
|
||||
const y2b = props.top + props.height;
|
||||
|
||||
const left = x2b < x1;
|
||||
const right = x1b < x2;
|
||||
const bottom = y2b < y1;
|
||||
const top = y1b < y2;
|
||||
|
||||
if (top && left) {
|
||||
return distance(x1, y1b, x2b, y2);
|
||||
} else if (left && bottom) {
|
||||
return distance(x1, y1, x2b, y2b);
|
||||
} else if (bottom && right) {
|
||||
return distance(x1b, y1, x2, y2b);
|
||||
} else if (right && top) {
|
||||
return distance(x1b, y1b, x2, y2);
|
||||
} else if (left) {
|
||||
return x1 - x2b;
|
||||
} else if (right) {
|
||||
return x2 - x1b;
|
||||
} else if (bottom) {
|
||||
return y1 - y2b;
|
||||
} else if (top) {
|
||||
return y2 - y1b;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
export function distance(
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
): number {
|
||||
return Math.abs(x1 - x2) + Math.abs(y1 - y2);
|
||||
}
|
||||
|
||||
export function maybeSnapLeft(
|
||||
props: Rect,
|
||||
windows: Array<Rect>,
|
||||
left: number,
|
||||
): number {
|
||||
// snap right side to left
|
||||
// ┌─┬─┐
|
||||
// │A│B│
|
||||
// └─┴─┘
|
||||
const snapRight = getPossibleSnappedPosition(windows, {
|
||||
getGap: (win) => win.left - (props.width + left),
|
||||
getNew: (win) => win.left - props.width,
|
||||
});
|
||||
if (snapRight != null) {
|
||||
return snapRight;
|
||||
}
|
||||
|
||||
// snap left side to right
|
||||
// ┌─┬─┐
|
||||
// │B│A│
|
||||
// └─┴─┘
|
||||
const snapLeft = getPossibleSnappedPosition(windows, {
|
||||
getGap: (win) => left - (win.left + win.width),
|
||||
getNew: (win) => win.left + win.width,
|
||||
});
|
||||
if (snapLeft != null) {
|
||||
return snapLeft;
|
||||
}
|
||||
|
||||
return snapGrid(left);
|
||||
}
|
||||
|
||||
export function maybeSnapTop(
|
||||
_props: Rect,
|
||||
windows: Array<Rect>,
|
||||
top: number,
|
||||
): number {
|
||||
// snap bottom to bottom
|
||||
// ┌─┐
|
||||
// │A├─┐
|
||||
// │ │B│
|
||||
// └─┴─┘
|
||||
const snapBottom2 = getPossibleSnappedPosition(windows, {
|
||||
getGap: (win) => top - win.top - win.height,
|
||||
getNew: (win) => win.top + win.height,
|
||||
});
|
||||
if (snapBottom2 != null) {
|
||||
return snapBottom2;
|
||||
}
|
||||
|
||||
// snap top to bottom
|
||||
// ┌─┐
|
||||
// │B│
|
||||
// ├─┤
|
||||
// │A│
|
||||
// └─┘
|
||||
const snapBottom = getPossibleSnappedPosition(windows, {
|
||||
getGap: (win) => top - win.top - win.height,
|
||||
getNew: (win) => win.top + win.height,
|
||||
});
|
||||
if (snapBottom != null) {
|
||||
return snapBottom;
|
||||
}
|
||||
|
||||
// snap top to top
|
||||
// ┌─┬─┐
|
||||
// │A│B│
|
||||
// │ ├─┘
|
||||
// └─┘
|
||||
const snapTop = getPossibleSnappedPosition(windows, {
|
||||
getGap: (win) => top - win.top,
|
||||
getNew: (win) => win.top,
|
||||
});
|
||||
if (snapTop != null) {
|
||||
return snapTop;
|
||||
}
|
||||
|
||||
return snapGrid(top);
|
||||
}
|
||||
Reference in New Issue
Block a user