@rax-ui/filter-helper v1.0.0-beta.15

display: ComponentName

family: other

@rax-ui/filter-helper

@rax-ui/filter 组件的帮助工具，提供滚动吸附功能，滚动到具体位置功能

API

• withSticky：高阶组件，可提供在 RecycleView 组件中滚动吸附，兼容 weex/web 环境，【只支持RecycleView组件中使用】
  • 函数签名：Function(Wrapped: JSX.Element) => Wrapped -Wrapped: JSX.Element：被包裹的组件，目前仅支持RecycleView.Header`
• scrollIntoView：在滚动容器中，滚动到特定节点，滚动容器支持RecycleView、ScrollView
  • 函数签名：Function(node: any, container: any, animated = true, offset = 0) => void -node: 要滚动到的 dom 节点 -container`: 当前滚动容器 dom 节点
  • animated：是否动画
  • offset：滚动到node节点的 offset 距离

Demo

import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import RecycleView from 'rax-recyclerview';
import findDOMNode from 'rax-find-dom-node';
import { withSticky, scrollIntoView } from '@rax-ui/filter-helper';

const StickyHeader = withSticky(RecycleView.Header);

class Demo extends Component {
  handleClick = () => {
    scrollIntoView(findDOMNode(this.refSticky), findDOMNode(this.refRecycleView), false);
  };
  render() {
    return (
      <View style={styles.page}>
        <RecycleView
          style={styles.recycle}
          ref={r => {
            this.refRecycleView = r;
          }}
        >
          {buildData(3).map((val, index) => {
            return (
              <RecycleView.Cell>
                <View key={'1' + index} style={styles.item}>
                  <Text>Top UI</Text>
                </View>
              </RecycleView.Cell>
            );
          })}
          <StickyHeader
            ref={r => {
              this.refSticky = r;
            }}
          >
            <View onClick={this.handleClick} style={styles.stickyItem}>
              <Text>Sticky Item, Click Me</Text>
            </View>
          </StickyHeader>

          {buildData(50).map((val, index) => {
            return (
              <RecycleView.Cell>
                <View key={'2' + index} style={styles.item}>
                  <Text>List Item {index}</Text>
                </View>
              </RecycleView.Cell>
            );
          })}
        </RecycleView>
      </View>
    );
  }
}
function buildData(length, text = '') {
  return new Array(length)
    .join(0)
    .split('')
    .map((item, index) => {
      return {
        text: text + index,
        value: String(index)
      };
    });
}

const styles = {
  page: {
    width: 750,
    height: 1334
  },
  recycle: {
    width: 750,
    height: 1246
  },
  stickyItem: {
    width: 750,
    height: 100,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    width: 750,
    height: 300,
    backgroundColor: '#eaeaea',
    justifyContent: 'center',
    alignItems: 'center'
  }
};

render(<Demo />, null, { driver: DriverUniversal });