pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/waterfallcomponent/WaterfallComponent.jsx

@@ -1,687 +0,0 @@
-import { Component } from "preact";
-import {WaterfallComponentLess} from "./less/WaterfallComponent.less"
-
-const PROPS_KEY_MAP = {
-  vertical: {
-    size: "clientHeight",
-    scrollSize: "scrollHeight",
-    fromTop: "scrollTop",
-    sizeDir: "height",
-    dragDir: "clientY",
-    marginTop: "marginTop",
-    marginBottom: "marginBottom",
-  },
-
-  horizontal: {
-    size: "clientWidth",
-    scrollSize: "scrollWidth",
-    fromTop: "scrollLeft",
-    sizeDir: "width",
-    dragDir: "clientX",
-    marginTop: "marginLeft",
-    marginBottom: "marginRight",
-  },
-};
-
-/*
-瀑布流组件
-example:
-  <WaterfallComponent
-    itemCount={100}
-    onBottom={() => {
-      console.log("on bottom")
-    }}
-    onTop={() => {
-      console.log("on top")
-    }}
-    onFillItem={(index) => {
-      console.log(`Item index:${index}`);
-      return <div>{index}</div>;
-    }}
-    refObj={this.listRef}
-  >
-  </WaterfallComponent>
-
-  itemCount:item个数
-  onTop:碰到顶部触发
-  onBottom:碰到底部触发
-  onFillItem:当瀑布流需要创建新item时调用，传入当前需要展示第index个元素，需返回要展示的item
-             由外部自己填充item的样式和数据
-  refObj:可选属性，传入一个object，瀑布流把this赋值给current，方便给外部调用瀑布流的方法
-*/
-
-export class WaterfallComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      refreshTag: false,
-    };
-
-    // 每次生成的item个数
-    this.GENERATE_COUNT = props.GENERATE_COUNT ? props.GENERATE_COUNT : 3;
-    this.OVERFLOW_THRESHOLD = 100;
-    this.SCROLL_TO_BOTTOM_THRESHOLD = 100;
-
-    this.scroll_type = props.scroll_type == 1? props.scroll_type:0;
-    this.scroll_bar_display = this.props.scroll_bar_display? this.props.scroll_bar_display:0
-    this.initFillCount = props.initFillCount ? props.initFillCount : 10;
-    this.scrollDir = props.scrollDir ? (props.scrollDir == 1 ? true : false) : true;
-    this.enableLog = props.enableLog || false;
-    this.itemCount = 0;
-    this.startIndex = 0;
-    this.endIndex = 0;
-    this.lastTopSize = 0;
-    this.recycleBottomHeight = props.recycleBottomHeight? (props.recycleBottomHeight>200? props.recycleBottomHeight:200):200
-    this.recycleTopHeight = props.recycleTopHeight? (props.recycleTopHeight>200? props.recycleTopHeight:200):200
-    this.generateBottomHeight = props.generateBottomHeight? (props.generateBottomHeight>200? props.generateBottomHeight:200):200
-    this.generateTopHeight = props.generateTopHeight? (props.generateTopHeight>200? props.generateTopHeight:200):200
-    this._dragData = {};
-    this.items = [];
-    this._nextFrameCall = [];
-    this._nextFrameCallHandle = undefined;
-    this.styleCache = [];
-    this.isRecycleBottomLastFrame = false;
-    this.isRecycleTopLastFrame = false;
-    this.scrollOffset = 0;
-    this.re = 1;
-    this.onScroll = props.onScroll;
-    this.refreshForBackward = false;
-    this.refreshForJumpTo = false;
-    this.backwardCache = [];
-    this.bottomHeight = this.props.bottomHeight? this.props.bottomHeight : 10;
-    this.topHeight = this.props.topHeight? this.props.topHeight : 10;
-    if (props.refObj) {
-      props.refObj.current = this;
-    }
-    this.idx = 0;
-    this.enableScroll = true;
-  }
-
-
-  // 方便不想要log的时候屏蔽掉
-  log(...args) {
-    if (this.enableLog) console.log(args);
-  }
-
-
-  refresh(scrollOffset, callback = undefined) {
-    this.setState(
-      {
-        refreshTag: !this.state.refreshTag,
-      },
-      () => {
-        this.overflowDetect();
-        if (callback) { callback(); }
-        if (scrollOffset) {
-          this.enableScroll = false;
-          this.scrollView[this.propKeyMap.fromTop] = scrollOffset;
-        }
-        else if (!this.scrollDir) {
-          this.scrollView[this.propKeyMap.fromTop] = 0
-        }
-
-      }
-    );
-
-    this.dirty = false;
-  }
-
-  reduceOnscroll(ev, fn, wait, _this) {
-    if (this.re++ > 1) { return; }
-    else {
-      fn.call(_this, ev);
-      setTimeout(() => {
-        this.re = 1;
-      }, wait);
-    }
-  }
-
-  // 挂载后
-  componentDidMount() {
-    this.log(`waterfall did mount:${this.itemCount}`);
-    this.fill()
-  }
-
-  //计算一个dom的size
-  _calcDomSize(dom) {
-    let size = dom[this.propKeyMap.size];
-    let marginTop = parseInt(dom.style[this.propKeyMap.marginTop]);
-    if (marginTop > 0) {
-      size += marginTop;
-    }
-
-    let marginBottom = parseInt(dom.style[this.propKeyMap.marginBottom]);
-    if (marginBottom > 0) {
-      size += marginBottom;
-    }
-
-    return size;
-  }
-
-
-  //自己计算size，避免pix获取scrollHeight不正确的问题
-  _calcContentSize(includePlaceHolder) {
-    let size = 0;
-    for (let i = 0; i < this.content.childNodes.length; ++i) {
-      const dom = this.content.childNodes[i];
-      if (!includePlaceHolder) {
-        if (dom && i < this.items.length) {
-          size += this._calcDomSize(dom);
-        }
-      }
-      else {
-        if (dom) {
-          size += this._calcDomSize(dom);
-        }
-      }
-    }
-
-    return size;
-  }
-
-  //计算第index个元素的底部位置
-  _calcIBottomAtIndex(index) {
-    let size = 0;
-    let tmpItems = [];
-    for (let i = 0; i < this.items.length; ++i) {
-      if (this.items[i]) {
-        tmpItems.push(this.items[i]);
-      }
-    }
-    for (let i = 0; i < this.content.childNodes.length; ++i) {
-      const dom = this.content.childNodes[i];
-      const item = tmpItems[i];
-
-      if (dom && item && item.__waterfallIndex <= index && i < this.items.length) {
-        size += this._calcDomSize(dom);
-        let marginTop = parseInt(dom.style[this.propKeyMap.marginTop]);
-        if (marginTop > 0) {
-          size += marginTop;
-        }
-
-        let marginBottom = parseInt(dom.style[this.propKeyMap.marginBottom]);
-        if (marginBottom > 0) {
-          size += marginBottom;
-        }
-        // this.log("_calcIBottomAtIndex ", item.__waterfallIndex, dom[this.propKeyMap.size], size);
-      }
-    }
-
-    return size;
-  }
-
-  //overflow才能滚动，如果长度不够的话在后面填充一个空白的div
-  overflowDetect() {
-
-    setTimeout(() => {
-      const clientSize = this.scrollView[this.propKeyMap.size];
-      const scrollSize = this._calcContentSize(true);
-      const realScrollSize = this._calcContentSize();
-
-      if (clientSize >= realScrollSize && realScrollSize >= scrollSize) {
-        let sizeDir = (clientSize - scrollSize + 10) + "px";
-        let style = { width: "10px", height: "10px" };//, backgroundColor:"white"};
-        style[this.propKeyMap.sizeDir] = sizeDir;
-        this.log("overflowDetect ", clientSize, scrollSize, sizeDir);
-
-        this.placeHolderItem = <div id="placeholder" style={style}></div>;
-
-        this.refresh();
-      }
-
-    }, this.OVERFLOW_THRESHOLD);
-  }
-
-  // 组件即将销毁
-  componentWillUnmount() { }
-
-  componentDidUpdate() {
-    if (this.scrollDir) return;
-    if (this.refreshForBackward) {
-      this.refreshForBackward = false;
-      for (let i = 0; i < this.GENERATE_COUNT; i++) {
-        this.scrollOffset += this.props.messageMap.get(this.startIndex + i)
-        console.log("this length is ", this.props.messageMap.get(this.startIndex + i))
-      }
-      this.refresh(this.scrollOffset)
-    }
-    else if (this.refreshForJumpTo) {
-      console.log("didupate")
-      this.refreshForJumpTo = false;
-      this.scrollOffset = Math.max(0, this.scrollView[this.propKeyMap.scrollSize] - this.scrollView[this.propKeyMap.size])
-      this.refresh(this.scrollOffset)
-    }
-  }
-
-  render(props, state) {
-    console.log("type is",this.scroll_type)
-    this.itemCount = props.itemCount ? props.itemCount : 0;
-    this.scrollTriggerTopButton = props.scrollTriggerTopButton || false;
-    this.onFillItem = props.onFillItem;
-    this.onMesureItem = props.onMesureItem;
-    this.onBottom = props.onBottom;
-    this.onTop = props.onTop;
-    this.horizontal = props.direction == "horizontal" ? true : false;
-    this.scrollbarColor = props.scrollbarColor ? props.scrollbarColor  : "#00000000";
-    this.propKeyMap = PROPS_KEY_MAP[props.direction];
-    let items = this.items;
-    if (this.placeHolderItem){
-      items = this.items.concat(this.placeHolderItem);
-      this.placeHolderItem = undefined;
-    }
-
-    return (
-      <div className = {this.scroll_bar_display == 0? "":WaterfallComponentLess.scrollbar_css}
-        id={props.id ? props.id : "waterfall"}
-        inertia = "true"
-        style={{
-          width: "100%",
-          height: "100%",
-          flexDirection: this.horizontal ? "row" : "column",
-          scrollbarColor: this.scrollbarColor,
-          overflow: this.scroll_type == 0? "hidden":"scroll",
-        }}
-        ref={(div) => {
-          this.scrollView = div;
-          this.content = div;
-        }}
-        onScroll={(ev) => this.reduceOnscroll(ev, this._onScroll, 40, this)}
-        // onDragStart={this.__onDragStart}
-        // onDrag={this.__onDrag}
-      >
-          {items}
-        
-      </div>
-    );
-  }
-
-  /*
-  drag事件暂时无法实现
-    1：要额外解决drag与scroll互斥
-    2：无overflow情况下无法修改scrollTop之类的属性，也就是无法模拟滚动
-  */
-    __onDragStart = (event) => {
-      // this.log("onDragStart " + event.clientX, event.clientY);
-      this._dragData.clientX = event.clientX;
-      this._dragData.clientY = event.clientY;
-    }
-  
-    __onDrag = (event) => {
-      const clientSize = event.currentTarget[this.propKeyMap.size];
-      const scrollSize = event.currentTarget[this.propKeyMap.scrollSize];
-      const fromTop = event.currentTarget[this.propKeyMap.fromTop];
-      // this.log("_onDrag ", clientSize, scrollSize, fromTop);
-      if (clientSize < scrollSize) {
-        this._onScroll(event);
-        return;
-      }
-  
-      let delta = event[this.propKeyMap.dragDir] - this._dragData[this.propKeyMap.dragDir];
-      if (delta != 0) {
-        this.scrollView[this.propKeyMap.fromTop] = 100;
-        event.currentTarget[this.propKeyMap.fromTop] = 100;
-        this.log("_onDrag ", delta, this.scrollView[this.propKeyMap.fromTop]);
-        this._onScroll(event);
-      }
-  
-    }
-  
-    //通过index获取size
-    _getSizeByIndex(index) {
-      if (this.styleCache[index]) {
-        return this.styleCache[index].size;
-      }
-      else if (this.onMesureItem) {
-        let size = this.onMesureItem(index);
-        return size;
-      }
-      else {
-        const dom = this.content.childNodes[0];
-        let firstSize = undefined;
-        if (dom) {
-          firstSize = this._calcDomSize(dom)
-        }
-  
-        return firstSize || 40;
-      }
-    }
-  
-    // 滚动事件, 内部函数
-    _onScroll(event) {
-  
-      if (this.onScroll) this.onScroll()
-  
-      let currentTarget = event.currentTarget;
-  
-      const clientSize = currentTarget[this.propKeyMap.size];
-      const scrollSize = currentTarget[this.propKeyMap.scrollSize];
-      const fromTop = currentTarget[this.propKeyMap.fromTop];
-  
-      let nowTopSize = fromTop;
-  
-      if (this.startIndex == 0 && fromTop < -this.topHeight) {
-        this._onTop(fromTop);
-  
-        return;
-      }
-  
-      if (
-        this.endIndex >= this.itemCount &&
-        scrollSize - fromTop - this.bottomHeight < clientSize
-      ) {
-        this._onBottom(clientSize - (scrollSize - fromTop));
-  
-        return;
-      }
-      this.idx++;
-  
-      if (scrollSize - fromTop - clientSize < this.generateBottomHeight && nowTopSize > this.lastTopSize) {
-        if (this.isRecycleBottomLastFrame) {
-          this.isRecycleBottomLastFrame = false;
-        }
-        else {
-          this.forward();
-        }
-      }
-      else if (this.scrollDir && fromTop < this.generateTopHeight && nowTopSize < this.lastTopSize) {
-        if (this.isRecycleTopLastFrame) {
-          this.isRecycleTopLastFrame = false;
-        }
-        else {
-          this.backward();
-        }
-      }
-      this.lastTopSize = nowTopSize;
-      // this.enableScroll = true;
-      // this.log('the startIndex now is ',this.startIndex) 
-    };
-  
-    // 顶部触发，内部函数
-    _onTop = (fromTop) => {
-      if (this.onTop) this.onTop(fromTop);
-    };
-  
-    // 底部触发，内部函数
-    _onBottom = (fromBottom) => {
-      if (this.onBottom) this.onBottom(fromBottom);
-    };
-  
-    // 往下填充
-    fill() {
-      this.log(
-        `startIndex:${this.startIndex}, endIndex:${this.endIndex}, itemCount:${this.itemCount}`
-      );
-      if (!this.scrollView) return;
-      this.forward();
-    }
-  
-    // 清除瀑布流内容
-    clear(callback = undefined) {
-      this.itemCount = 0;
-      this.startIndex = 0;
-      this.endIndex = 0;
-      this.items = [];
-      this.styleCache = [];
-      this.scrollView.scrollTop = 0;
-      this.refresh(() => {
-        // pixui要下一帧拿到的scrollHeight才正确
-        setTimeout(callback(), 1);
-      });
-    }
-  
-    // 回收顶端移出view的元素
-    recycleTop() {
-  
-      let clientSize = this.scrollView[this.propKeyMap.size];
-      let scrollSize = this.scrollView[this.propKeyMap.scrollSize];
-      let fromTop = this.scrollView[this.propKeyMap.fromTop];
-      let accTop = fromTop;
-      let accRecycleHeight = 0;
-      if (
-        this.content &&
-        this.content.childNodes &&
-        this.content.childNodes.length > 1
-      ) {
-  
-        for (let i = 0; i < this.items.length - 1; ++i) {
-          const dom = this.content.childNodes[i];
-          if (!dom) break;
-  
-          let domSize = this._calcDomSize(dom);
-  
-          if (
-            accTop > domSize && scrollSize - accRecycleHeight - domSize >= scrollSize-fromTop + this.recycleTopHeight
-          ) {
-  
-            accTop -= domSize;
-            accRecycleHeight += domSize;
-            // this.dirty = true;
-  
-            const remItem = this.items.shift();
-            this.isRecycleTopLastFrame = true;
-            this.log(
-              `removed:${remItem.key} index:${remItem.__waterfallIndex} clientSize:${domSize
-              }, accTop:${accTop}`
-            );
-            if (!this.styleCache[remItem.__waterfallIndex]) {
-              this.styleCache[remItem.__waterfallIndex] = {
-                size: domSize,
-              };
-            }
-            ++this.startIndex;
-          } else {
-            break;
-          }
-        }
-      }
-  
-      scrollSize -= accRecycleHeight;
-      this.scrollOffset = Math.max(0, Math.min(accTop, scrollSize - clientSize));
-      this.lastScrollTop = this.scrollOffset;
-    }
-  
-    // 往前生成item
-    forward() {
-      if (this.endIndex >= this.itemCount) return;
-      this.recycleTop();
-      const clientSize = this.scrollView[this.propKeyMap.size];
-      const scrollSize = this._calcContentSize()
-      const fromTop = this.scrollView[this.propKeyMap.fromTop];
-  
-      if (scrollSize - fromTop - clientSize < this.generateBottomHeight) {
-        const genCount =
-          this.items.length < 1 ? this.initFillCount : this.GENERATE_COUNT;
-        for (let i = 0; i < genCount && this.endIndex < this.itemCount; ++i) {
-          const item = this.onFillItem(this.endIndex, this.props.itemPorps);
-          item.__waterfallIndex = this.endIndex;
-          this.items.push(item);
-          ++this.endIndex;
-        }
-  
-        this.dirty = true;
-      }
-  
-  
-      if (this.dirty) {
-        this.refresh(this.scrollOffset);
-      }
-  
-    }
-  
-    // 回收底部端移出view的元素
-    recycleBottom() {
-      const clientSize = this.scrollView[this.propKeyMap.size];
-      let accHeight = 0;
-      const outOfViewHeight = clientSize + this.recycleBottomHeight;
-  
-      if (
-        this.content &&
-        this.content.childNodes &&
-        this.content.childNodes.length > 1
-      ) {
-        for (let i = 0; i < this.content.childNodes.length - 1; ++i) {
-          const dom = this.content.childNodes[i];
-          if (!dom) break;
-          let domSize = this._calcDomSize(dom);
-          accHeight += domSize;
-          if (
-            accHeight >= outOfViewHeight &&
-            accHeight - domSize >= clientSize
-          ) {
-  
-            accHeight -= domSize;
-            const item = this.items.pop();
-            this.isRecycleBottomLastFrame = true;
-            if (item) {
-              this.styleCache[item.__waterfallIndex] = {
-                size: domSize,
-              };
-              --this.endIndex;
-              this.dirty = true;
-            }
-          }
-        }
-      }
-    }
-  
-    // 顶部填充元素
-    backward(scrollOffset = undefined) {
-      if (this.startIndex <= 0) {
-        return
-      };
-      // this.enableScroll = false;
-  
-      this.recycleBottom();
-  
-      let fromTop = scrollOffset ? scrollOffset : this.scrollView[this.propKeyMap.fromTop];
-  
-      this.scrollOffset = fromTop;
-  
-      if (this.scrollDir && fromTop < this.generateTopHeight || !this.scrollDir && fromTop == 0) {
-        for (let i = 0; i < this.GENERATE_COUNT && this.startIndex > 0; ++i) {
-  
-          const item = this.onFillItem(this.startIndex - 1, this.props.itemPorps);
-          item.__waterfallIndex = this.startIndex - 1;
-          this.items.unshift(item);
-  
-          if(this.scrollDir) this.scrollOffset += this._getSizeByIndex(item.__waterfallIndex);
-  
-          --this.startIndex;
-        }
-        this.dirty = true;
-      }
-  
-      if (this.dirty) {
-        if(!this.scrollDir) this.refreshForBackward = true;
-        this.refresh(this.scrollOffset);
-      }
-    }
-  
-    //更新某个元素
-    updateItemAtIndex(idx) {
-      for (let i = 0; i < this.items.length; ++i) {
-        let item = this.items[i];
-        if (item && idx === item.__waterfallIndex) {
-          const item = this.onFillItem(idx, this.props.itemPorps);
-          if (item == undefined) {
-            this.items.pop();
-            this.refresh();
-            break;
-          }
-          item.__waterfallIndex = idx;
-          this.items.splice(i, 1, item);
-          this.refresh();
-          break;
-        }
-      }
-    }
-    //更新全部元素
-    updateAllItem() {
-      // console.log("updateAllItem")
-      let top_waterfallIndex = this.items[0].__waterfallIndex;
-      let bottom_waterfallIndex = top_waterfallIndex + this.items.length;
-      for (let i = top_waterfallIndex; i < bottom_waterfallIndex; ++i) {
-        this.updateItemAtIndex(i)
-      }
-    }
-  
-    stopScrollToItemBottom() {
-      if (this._toBottomHandler) {
-        clearInterval(this._toBottomHandler);
-        this._toBottomHandler = undefined;
-        this.log("clearInterval _toBottomHandler");
-      }
-  
-      if (this._jumpToEndCallback) {
-        let cb = this._jumpToEndCallback;
-        this._jumpToEndCallback = undefined;
-        cb();
-      }
-    }
-  
-  
-    scrollToItemBottom(index) {
-      this.stopScrollToItemBottom();
-  
-      this._toBottomHandler = setInterval(() => {
-        let itemPos = this._calcIBottomAtIndex(index);
-        let delta = this.scrollView[this.propKeyMap.size] + this.scrollView[this.propKeyMap.fromTop] - itemPos;
-        // this.log(delta, this.scrollView[this.propKeyMap.size], this.scrollView[this.propKeyMap.fromTop], itemPos);
-        // if (itemPos > 0 && Math.abs(delta) > 10) {
-        //   this.scrollView[this.propKeyMap.fromTop] -= delta;
-        //   if (this.scrollView[this.propKeyMap.fromTop] < 10) {
-        //     this.backward();
-        //   }
-        // }
-        if (itemPos > 0 && Math.abs(delta) > 10) {
-          this.scrollOffset -= delta;
-          if (this.scrollOffset < 10) {
-            this.backward(this.scrollOffset);
-          }
-        }
-        else {
-          this.stopScrollToItemBottom();
-        }
-      }, this.SCROLL_TO_BOTTOM_THRESHOLD);
-    }
-  
-    jumpTo(index, predefineGenCount, onEndCallback = undefined) {
-      this.log("jump to here")
-      this.log("jumpTo index:", index);
-      if (index >= this.itemCount) return;
-  
-      let dir = index > this.startIndex ? 0 : 1;
-  
-      const genCount = predefineGenCount || 10;
-      this.startIndex = index - genCount + 1;
-      this.startIndex = Math.max(this.startIndex, 0);
-  
-      this.endIndex = this.startIndex;
-      this._jumpToEndCallback = onEndCallback;
-  
-      this.log(
-        "jump to:" +
-        this.startIndex +
-        ", " +
-        this.endIndex +
-        ", itemCount:" +
-        this.itemCount
-      );
-  
-      this.items = [];
-  
-      //提前对齐避免偶发的滑动
-      this.scrollView[this.propKeyMap.fromTop] = 0;
-      for (let i = 0; i < genCount && this.endIndex < this.itemCount; ++i) {
-        const item = this.onFillItem(this.endIndex, this.props.itemPorps);
-        item.__waterfallIndex = this.endIndex;
-        this.items.push(item);
-        ++this.endIndex;
-      }
-      // this.refresh(() => {
-      //   this.scrollToItemBottom(index);
-      // });
-      this.refreshForJumpTo = true
-      this.refresh();
-    }
-  }

package/ui/components/waterfallcomponent/less/WaterfallComponent.less

@@ -1,13 +0,0 @@
-.frame {
-    /* border: 2px solid #990000; */
-    display: flex;
-    flex-direction: column;
-    /* flex-basis: content; */
-    /*justify-content: space-evenly;*/
-    width: 100%;
-    height: 100%;
-}
-.scrollbar_css{
-    scrollbar-width:"0px";
-    scrollbar-height:"0px";
-}