@pixui-dev/pxw 0.1.16

package/lib/react-window/src/test.js.flow

@@ -0,0 +1,382 @@
+// @flow
+
+import * as React from 'react';
+import {
+  FixedSizeList,
+  VariableSizeList,
+  FixedSizeGrid,
+  VariableSizeGrid,
+} from './';
+
+type ItemData = {|
+  num: number,
+  str: string,
+|};
+
+const assertVoid = (value: void) => {};
+const assertEmpty = (value: empty) => {};
+const assertNumber = (value: number) => {};
+const assertString = (value: string) => {};
+const assertCustomType = (value: ItemData) => {};
+
+/* FixedSizeList */
+
+{
+  const Item = ({ index, style }) => {
+    (index: number);
+    (style: Object);
+    return null;
+  };
+  <FixedSizeList width={0} height={0} itemSize={0} itemCount={0}>
+    {Item}
+  </FixedSizeList>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertNumber(data);
+    // $FlowFixMe number is passed to FixedSizeList
+    assertString(data);
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertNumber(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <FixedSizeList width={0} height={0} itemSize={0} itemCount={0} itemData={1} itemKey={itemKey}>
+    {Item}
+  </FixedSizeList>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertCustomType(data);
+    // $FlowFixMe ItemData is passed to FixedSizeList
+    assertString(data);
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertCustomType(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <FixedSizeList
+    width={0}
+    height={0}
+    itemSize={0}
+    itemCount={0}
+    itemData={{
+      num: 123,
+      str: 'abc',
+    }}
+    itemKey={itemKey}
+  >
+    {Item}
+  </FixedSizeList>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertVoid(data);
+    // $FlowFixMe itemData is undefined by default
+    assertEmpty(data);
+
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertVoid(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <FixedSizeList width={0} height={0} itemSize={0} itemCount={0} itemKey={itemKey}>
+    {Item}
+  </FixedSizeList>;
+}
+
+/* VariableSizeList */
+
+{
+  const Item = ({ data }) => {
+    assertNumber(data);
+    // $FlowFixMe number is passed to VariableSizeList
+    assertString(data);
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertNumber(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <VariableSizeList
+    width={0}
+    height={0}
+    itemSize={0}
+    itemCount={0}
+    itemData={1}
+    itemKey={itemKey}
+  >
+    {Item}
+  </VariableSizeList>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertCustomType(data);
+    // $FlowFixMe ItemData is passed to VariableSizeList
+    assertString(data);
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertCustomType(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <VariableSizeList
+    width={0}
+    height={0}
+    itemSize={0}
+    itemCount={0}
+    itemData={{
+      num: 123,
+      str: 'abc',
+    }}
+    itemKey={itemKey}
+  >
+    {Item}
+  </VariableSizeList>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertVoid(data);
+    // $FlowFixMe itemData is undefined by default
+    assertEmpty(data);
+    return null;
+  };
+  const itemKey = (index, data) => {
+    assertVoid(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <VariableSizeList width={0} height={0} itemSize={0} itemCount={0} itemKey={itemKey}>
+    {Item}
+  </VariableSizeList>;
+}
+
+{
+  class Item extends React.PureComponent<{ data: void }> {
+    render() {
+      const { data } = this.props;
+      assertVoid(data);
+      // $FlowFixMe itemData is undefined by default
+      assertEmpty(data);
+      return null;
+    }
+  }
+  const itemKey = (index, data) => {
+    assertVoid(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return index;
+  };
+  <VariableSizeList width={0} height={0} itemSize={0} itemCount={0} itemKey={itemKey}>
+    {Item}
+  </VariableSizeList>;
+}
+
+/* FixedSizeGrid */
+
+{
+  const Item = ({ columnIndex, rowIndex, style }) => {
+    (columnIndex: number);
+    (rowIndex: number);
+    (style: Object);
+    return null;
+  };
+  <FixedSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+  >
+    {Item}
+  </FixedSizeGrid>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertNumber(data);
+    // $FlowFixMe number is passed to FixedSizeGrid
+    assertString(data);
+    return null;
+  };
+  const itemKey = ({ columnIndex, data, rowIndex }) => {
+    assertNumber(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return `${columnIndex}:${rowIndex}`;
+  };
+  <FixedSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+    itemData={1}
+    itemKey={itemKey}
+  >
+    {Item}
+  </FixedSizeGrid>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertCustomType(data);
+    // $FlowFixMe ItemData is passed to FixedSizeGrid
+    assertString(data);
+    return null;
+  };
+  const itemKey = ({ columnIndex, data, rowIndex }) => {
+    assertCustomType(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return `${columnIndex}:${rowIndex}`;
+  };
+  <FixedSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+    itemData={{
+      num: 123,
+      str: 'abc',
+    }}
+    itemKey={itemKey}
+  >
+    {Item}
+  </FixedSizeGrid>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertVoid(data);
+    // $FlowFixMe itemData is undefined by default
+    assertEmpty(data);
+    return null;
+  };
+  const itemKey = ({ columnIndex, data, rowIndex }) => {
+    assertVoid(data);
+    // $FlowFixMe expected
+    assertString(data);
+    return `${columnIndex}:${rowIndex}`;
+  };
+  <FixedSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+    itemKey={itemKey}
+  >
+    {Item}
+  </FixedSizeGrid>;
+}
+
+/* VariableSizeGrid */
+
+{
+  const Item = ({ data }) => {
+    assertNumber(data);
+    // $FlowFixMe number is passed to VariableSizeGrid
+    assertString(data);
+    return null;
+  };
+  <VariableSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+    itemData={1}
+  >
+    {Item}
+  </VariableSizeGrid>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertCustomType(data);
+    // $FlowFixMe ItemData is passed to VariableSizeGrid
+    assertString(data);
+    return null;
+  };
+  <VariableSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+    itemData={{
+      num: 123,
+      str: 'abc',
+    }}
+  >
+    {Item}
+  </VariableSizeGrid>;
+}
+
+{
+  const Item = ({ data }) => {
+    assertVoid(data);
+    // $FlowFixMe itemData is undefined by default
+    assertEmpty(data);
+    return null;
+  };
+  <VariableSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+  >
+    {Item}
+  </VariableSizeGrid>;
+}
+
+{
+  class Item extends React.PureComponent<{ data: void }> {
+    render() {
+      const { data } = this.props;
+      assertVoid(data);
+      // $FlowFixMe itemData is undefined by default
+      assertEmpty(data);
+      return null;
+    }
+  }
+  <VariableSizeGrid
+    width={0}
+    height={0}
+    rowHeight={0}
+    rowCount={0}
+    columnWidth={0}
+    columnCount={0}
+  >
+    {Item}
+  </VariableSizeGrid>;
+}

package/lib/react-window/src/timer.js

@@ -0,0 +1,36 @@
+// @flow
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+
+const hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+
+const now = hasNativePerformanceNow ? () => performance.now() : () => Date.now();
+
+export type TimeoutID = {|
+	id: AnimationFrameID,
+|};
+
+export function cancelTimeout(timeoutID: TimeoutID) {
+	cancelAnimationFrame(timeoutID.id);
+}
+
+export function requestTimeout(callback: Function, delay: number): TimeoutID {
+	const start = now();
+
+	function tick() {
+		let n = now();
+		// console.log('requestTimeout', n, start, n - start, delay);
+		if (n - start >= delay) {
+			callback.call(null);
+		} else {
+			timeoutID.id = requestAnimationFrame(tick);
+		}
+	}
+
+	const timeoutID: TimeoutID = {
+		id: requestAnimationFrame(tick),
+	};
+
+	return timeoutID;
+}

package/lib/svelte-tab/Tab.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const tab = {};
+	const { registerTab, selectTab, selectedTab } = getContext(TABS);
+
+	registerTab(tab);
+</script>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid white;
+		border-radius: 0;
+		margin: 5px;
+		color: #ccc;
+		font-size: 25px;
+		cursor: pointer;
+	}
+	
+	.selected {
+		/* border-bottom: 2px solid teal; */
+		color: #333;
+	}
+</style>
+
+<button class:selected="{$selectedTab === tab}" on:click="{() => selectTab(tab)}">
+	<slot></slot>
+</button>

package/lib/svelte-tab/TabList.svelte

@@ -0,0 +1,10 @@
+<div class="tab-list">
+	<slot></slot>
+</div>
+
+<style>
+	.tab-list {
+		border-bottom: 1px solid #000000aa;
+		flex-direction: row;
+	}
+</style>

package/lib/svelte-tab/TabPanel.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const panel = {};
+	const { registerPanel, selectedPanel } = getContext(TABS);
+
+	registerPanel(panel);
+</script>
+
+{#if $selectedPanel === panel}
+	<slot></slot>
+{/if}

package/lib/svelte-tab/Tabs.svelte

@@ -0,0 +1,68 @@
+<script context="module">
+	export const TABS = {};
+</script>
+
+<script>
+	import { setContext, onDestroy } from "svelte";
+	import { writable } from "svelte/store";
+
+	const tabs = [];
+	const panels = [];
+	const selectedTab = writable(null);
+	const selectedPanel = writable(null);
+
+	export let onChange = undefined;
+	export let selectedIndex = writable(null);
+
+	setContext(TABS, {
+		registerTab: (tab) => {
+			tabs.push(tab);
+			selectedTab.update((current) => current || tab);
+
+			onDestroy(() => {
+				const i = tabs.indexOf(tab);
+				tabs.splice(i, 1);
+				selectedTab.update((current) =>
+					current === tab ? tabs[i] || tabs[tabs.length - 1] : current
+				);
+			});
+		},
+
+		registerPanel: (panel) => {
+			panels.push(panel);
+			selectedPanel.update((current) => current || panel);
+
+			onDestroy(() => {
+				const i = panels.indexOf(panel);
+				panels.splice(i, 1);
+				selectedPanel.update((current) =>
+					current === panel
+						? panels[i] || panels[panels.length - 1]
+						: current
+				);
+			});
+		},
+
+		selectTab: (tab) => {
+			const i = tabs.indexOf(tab);
+			selectedTab.set(tab);
+			selectedPanel.set(panels[i]);
+			selectedIndex.set(i);
+			if (onChange) onChange(i);
+		},
+
+		selectedTab,
+		selectedPanel,
+	});
+</script>
+
+<div class="tabs">
+	<slot />
+</div>
+
+<style>
+	.tabs {
+		align-self: stretch;
+		/* border: 1px solid black; */
+	}
+</style>

package/lib/svelte-tab/tabs.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { default as Tab } from './Tab.svelte';