pixuireactcomponents 1.2.0 → 1.2.2

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

@@ -1,72 +0,0 @@
-// @flow
-
-let size: number = -1;
-
-// This utility copied from "dom-helpers" package.
-export function getScrollbarSize(recalculate?: boolean = false): number {
-  if (size === -1 || recalculate) {
-    const div = document.createElement('div');
-    const style = div.style;
-    style.width = '50px';
-    style.height = '50px';
-    style.overflow = 'scroll';
-
-    ((document.body: any): HTMLBodyElement).appendChild(div);
-
-    size = div.offsetWidth - div.clientWidth;
-
-    ((document.body: any): HTMLBodyElement).removeChild(div);
-  }
-
-  return size;
-}
-
-export type RTLOffsetType =
-  | 'negative'
-  | 'positive-descending'
-  | 'positive-ascending';
-
-let cachedRTLResult: RTLOffsetType | null = null;
-
-// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
-  if (cachedRTLResult === null || recalculate) {
-    const outerDiv = document.createElement('div');
-    const outerStyle = outerDiv.style;
-    outerStyle.width = '50px';
-    outerStyle.height = '50px';
-    outerStyle.overflow = 'scroll';
-    outerStyle.direction = 'rtl';
-
-    const innerDiv = document.createElement('div');
-    const innerStyle = innerDiv.style;
-    innerStyle.width = '100px';
-    innerStyle.height = '100px';
-
-    outerDiv.appendChild(innerDiv);
-
-    ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
-
-    if (outerDiv.scrollLeft > 0) {
-      cachedRTLResult = 'positive-descending';
-    } else {
-      outerDiv.scrollLeft = 1;
-      if (outerDiv.scrollLeft === 0) {
-        cachedRTLResult = 'negative';
-      } else {
-        cachedRTLResult = 'positive-ascending';
-      }
-    }
-
-    ((document.body: any): HTMLBodyElement).removeChild(outerDiv);
-
-    return cachedRTLResult;
-  }
-
-  return cachedRTLResult;
-}

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

@@ -1,9 +0,0 @@
-// @flow
-
-export { default as VariableSizeGrid } from './VariableSizeGrid';
-export { default as VariableSizeList } from './VariableSizeList';
-export { default as FixedSizeGrid } from './FixedSizeGrid';
-export { default as FixedSizeList } from './FixedSizeList';
-
-export { default as areEqual } from './areEqual';
-export { default as shouldComponentUpdate } from './shouldComponentUpdate';

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

@@ -1,17 +0,0 @@
-// @flow
-
-// Pulled from react-compat
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
-export default function shallowDiffers(prev: Object, next: Object): boolean {
-  for (let attribute in prev) {
-    if (!(attribute in next)) {
-      return true;
-    }
-  }
-  for (let attribute in next) {
-    if (prev[attribute] !== next[attribute]) {
-      return true;
-    }
-  }
-  return false;
-}

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

@@ -1,16 +0,0 @@
-// @flow
-
-import areEqual from './areEqual';
-import shallowDiffers from './shallowDiffers';
-
-// Custom shouldComponentUpdate for class components.
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
-export default function shouldComponentUpdate(
-  nextProps: Object,
-  nextState: Object
-): boolean {
-  return (
-    !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)
-  );
-}

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

@@ -1,382 +0,0 @@
-// @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

@@ -1,36 +0,0 @@
-// @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/src/app/demopage.tsx

@@ -1,77 +0,0 @@
-import { Faas, context } from 'faas-lib/faas-proxy';
-import { Component, CSSProperties, createRef } from 'preact';
-
-import { platformAPI } from '../common/frame/platform-api';
-if (!platformAPI.canUsePlatformAPI()) {
-  context.withLOG = true;
-  context.extraInfoFunction = () => {
-    return {
-      pdr_app_ver: '0.0.0',
-      userinfo: {},
-    };
-  };
-}
-
-const bgStyle: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  backgroundColor: 'green',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'flex-start'
-};
-
-const contentWrapperStyle: CSSProperties = {
-  width: '1334px',
-  height: '750px',
-  backgroundColor: '#FF000066',
-};
-
-export class DemoPage extends Component<any, { content: string }>{
-  private divRef = createRef();
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      content: ''
-    };
-    this.testCallFaas();
-  }
-
-  testCallFaas = async () => {
-    // let resp = await Faas.Demo_sayHello({name: 'harden'});
-    // console.warn('^'.repeat(10), resp);
-    // this.setState({
-    //   content: resp
-    // });
-  };
-
-  async componentWillMount() {
-    console.log('DemoPage componentWillMount');
-    console.log('appId:' + platformAPI.getAppId());
-    console.log('appKey:' + platformAPI.getAppKey());
-
-    window.onclose = () => {
-      console.log('DemoPage onclose');
-    };
-  }
-
-  componentDidMount() {
-    setTimeout(() => {
-      let height = window.getComputedStyle(this.divRef.current, null).getPropertyValue('height');
-
-      console.warn(height, ' height');
-    }, 100);
-    console.warn(' didmount');
-  }
-
-  render() {
-    return (
-      <video src={'http://image.smoba.qq.com/Video/playonline/Nobe_Video.mp4'}
-        autoPlay={true} muted loop={true}
-        ref={this.divRef} style={contentWrapperStyle}>
-      </video>
-    );
-  }
-}

package/src/app/index.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" flex="default"/>
-    <style>
-        body {
-            /*background-color: #0c85d0;*/
-            display: flex;
-            /* flex-direction: column; */
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            overflow: hidden ;
-            margin: 0px;
-            padding: 0px;
-            box-sizing: border-box;
-            position: relative;
-            /* background-color: 'white'; */
-        }
-
-        a{
-            color:aliceblue;
-
-        }
-
-        div{
-            display: flex;
-            /* flex-direction: column; */
-            box-sizing: border-box;
-        }
-
-        .frame {
-            /* border: 2px solid #990000; */
-            display: flex;
-            flex-direction: column;
-            /* flex-basis: content; */
-            /*justify-content: space-evenly;*/
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-  
-</head>
-<body>
-<div id="container" class="frame"></div>
-</body>
-</html>

package/src/app/main.tsx

@@ -1,30 +0,0 @@
-import { renderDom } from 'lib/dom';
-import { VideoPlayerDemo } from 'src/pixUIReactComponents/ui/sample/videoplayer/VideoPlayerDemo';
-import { SliderDemo } from 'src/pixUIReactComponents/ui/sample/slider/SliderDemo';
-import { CarouselDemo } from 'src/pixUIReactComponents/ui/sample/carousel/carouselDemo';
-import { Tabs } from 'src/pixUIReactComponents';
-import { TabDemo } from 'src/pixUIReactComponents/ui/sample/tab/TabDemo';
-import { Checkbox } from 'src/pixUIReactComponents/ui/components/checkBox/CheckBox';
-import { CheckboxDemo } from 'src/pixUIReactComponents/ui/sample/checkBox/checkBoxDemo';
-import { SlapfaceDemo } from 'src/pixUIReactComponents/ui/sample/slapface/SlapfaceDemo';
-import {ButtonDemo} from 'src/pixUIReactComponents/ui/sample/button/ButtonDemo';
-import { WaterfallComponentDemo } from 'src/pixUIReactComponents/ui/sample/waterfallcomponent/WaterfallComponentDemo';
-import { ToggleGroupDemo } from 'src/pixUIReactComponents/ui/sample/togglegroup/ToggleGroupDemo';
-
-window.addEventListener('load', () => {
-});
-
-let render = () => {
-	renderDom(
-		// <SliderDemo/>,
-		// <CarouselDemo/>,
-		<SlapfaceDemo/>,
-		// <TabDemo/>,
-		// <CheckboxDemo />,
-		// <WaterfallComponentDemo />,
-		// <ButtonDemo/>,
-		// <ToggleGroupDemo/>,
-		document.getElementById('container')!);
-};
-
-render();