raxjs/rax-components

Rax base components

rax-components

Docs

Develop

Install deps:

$ cd rax-components/
$ npm install

Develop package

$ cd packages/rax-text
$ npm install
$ npm start

$ npm run build

Build packages

$ npm run build # build all packages
$ npm run build -- --packages=rax-text,rax-view

Run test

$ npm run test
$ npm run test -- packages/rax-countdown

Run lint

npm run lint

rax-components's Issues

[Bug] rax-modal layout confused

rax-modal组件1.5.6版本中在一个页面中使用多个modal组件时存在一个坑：
例如以下场景：游戏互动类中弹窗肯能存在链式弹出，A弹窗中的事件唤起B弹窗同时关闭A自身
B会被顶到屏幕外，导致的的现象就像A唤起失败，虽然可以搭配x-if或给modal根节点给定位来解决这个问题，但是对于新手来说这个意外情况会让人摸不着头脑

[Feature]ScrollView: set disable scroll

In miniapp or wechat miniprogram, we need to disable ScrollView scroll in some case. So do we need an attribute -- disableScroll that can disable ScrollView scroll to the highest priority.

低端webview报错

function updateSwiper(swiper, slides, passedParams, changedParams) {
changedParams.includes('thumbs'); // changedParams.includes undefined
}

Why rax-picture no longer supported. Use @ali/rax-picture instead?

Why not support? I want to know the reason.

Rax ScrollView Web component scroll bars issue

[WIP] rax-scrollview 各端都需要提供 resetScroll 方式来控制 onEndReached 事件触发

微信小程序存在比较麻烦的设计，只要在 onEndReachedThreshold 到底部之间的区域滚动，滚动过程中，都会触发 onEndReached。结合 Web 和 Weex 端已有的 resetScroll 方法，在下周 rax-scrollview break change 的时候，多端保持一致性，统一提供 resetScroll 方法。
每次 onEndReached 只会触发一次，只有业务手动调用 resetSroll 之后，才能触发下一次的 onEndReached。

rax-text组件设置ref无效

复现过程

首先利用forwardRef转发ref

const Tag = forwardRef((props, ref) => {
  ...other code
  return icon ? <View className="icon-tag" ref={ref}  style={style}></View> : text ? <Text className="text-tag" ref={ref} style={style}>{text}</Text> : '';
});
export default Tag;

创建ref

export default function (props) {
  const { itemData={}, last } = props;
  const { pictureUrl, title } = itemData;
  const iconTag = createRef();
  window.iconTag = iconTag;
  return (
    <View className="one-row-one-column" style={{marginBottom: last ? 0 : 18}}>
      {/*商品图片*/}
      <Avatar uri={pictureUrl} width={defaultWidthFor1_1ItemAvatar} height={defaultHeightFor1_1ItemAvatar}/>
      <View className="item-detail">
        {/*标题*/}
        <ItemTitle className="title-row" title={title} width={defaultTitleWidthFor1_1Item} tag={iconTag}><Tag ref={iconTag} type={"E_COUPON"}/></ItemTitle>
        {/*特点描述*/}
        <Feature className="feature-row" type={"HOT"} text={"这个当季最好"}/>
        {/*文本标*/}
        <View className="tag-row"><Tag text={"满3件减10元"}/></View>
      </View>
    </View>
  );
}

打印window.iconTag

{current: null}

但是将Tag的实现由Text转向View后，再复现上述过程，是可以的，View设置ref有效

{current: div}

rax-textinput 受控模式下输入， 光标会移动到最后

rax 代码: 光标输入会自动移到文本末尾

/* @jsx createElement */
import { createElement, useState } from 'rax';
import TextInput from 'rax-textinput';

export default function Demo() {
  const [value, setValue] = useState('init');

  const handleInput = (e) => {
  	setValue(e.value );
  }

  return (
    <TextInput value={value} onInput={handleInput} />
  );
}

react 代码， 无此问题：

import React from "react";

const { useState } = React;

export default () => {
  const [value, setValue] = useState("init");

  const handleInput = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleInput} />
    </div>
  );
};

Update base components deps

• rax-countdown @chenjun1011
• rax-modal @cryzzchen
• rax-link @fyangstudio
• rax-waterfall @ChrisCindy
• universal-transition @SoloJiang

rax-countdown 的 css class 命名太随意

现象：支付宝小程序中，使用qrcode组件，设置styles的width，height时，安卓高分辨率机型有兼容问题，二维码宽高异常。

现象：支付宝小程序中，使用qrcode组件，设置styles的width，height时，安卓高分辨率机型有兼容问题，二维码宽高异常。
原因：my.getSystemInfoSync().screenWidth !== my.getSystemInfoSync().windowWidth ，screenWidth = 1080，windowWidth=360
code：<QRCode className="qrcode" style={{ width: '400rpx', height: '400rpx' }} data={'123456789'} />

Originally posted by @Tanelmer in #166 (comment)

rax-pwa 从 rax 仓库中抽离

目前 rax-pwa 作为组件放在 rax 仓库下不合适，建议拆出 rax-tabbar 和 rax-navigation 组件到 rax-components 或者 rax-ui 下，需要看下这两个算不算基础组件。

Slider 不能自适应高度（小程序中）

问题

Slider 不能自适应高度（小程序中），好像是小程序 Swiper 内置组件就不支持，希望能支持一下。

备注

而且看了源码，Number(height) 应该不合理，应该写成 Number(height) || auto

QRCode 组件的样式宽度和高度应该接受 px/rpx 为单位

https://github.com/raxjs/rax-components/blob/master/packages/rax-qrcode/src/index.tsx#L41

默认 README 里面的数字, 看起来是 rpx 为标准的, 但是又会生成一个 width/height 的属性给 canvas

<QRCode style={{ width: 400, height: 400 }} />

->

<canvas width="400" height="400" style="width: 53.3333vw; height: 53.3333vw" />

这里两个尺寸是冲突的

TextInput props 的 value 数据变化后，没有更新view

TextInput props 的 value 数据变化后，没有更新view

ScrollView的scrollTo方法在支付宝/淘宝小程序中失效

rax-modal 内的所有事件都被拦截了无法触发

这个 pr #80 导致所有事件都被拦截
modal 内无法触发 click，ScrollView 无法滚动
maskCanBeClick 属性也无效了...

[Feature] rax-recyclerview 运行时小程序和 h5 支持虚拟列表

这里的虚拟列表指：按需渲染视口和缓冲区内的元素，回收视口和缓冲区外元素。通过减少页面元素，已达到优化页面性能的目的。示意图如下：

在目前版本中，组件的属性，诸如 onEndReachedThreshold，itemSize，方法 scrollTo 的入参类型均为 number，在小程序下，单位为 px，在web下，scrollTo 的单位为rpx，其他单位为 px。两端不一致，且 web 单位混乱。

考虑到兼容，在新版中，在类型为 number 时，单位保持不变，即 web scrollTo 为 rpx， 其他为 px； 小程序下为 px。但新增 string 类型，用户可直接传入 10rpx 等属性来指定尺寸单位。

在新版本发布后，文档中写明推荐使用 string 格式来传参。

相关修改如下：

属性	类型	默认值	必填	描述
onEndReachedThreshold	number/string	500px	false	设置加载更多的偏移
itemSize	function/number/string	-	false	返回每个 cell 的高度(节点回收时需要)

方法：

scroll({x: number | string, y: number | string})

属性	类型	默认值	必填	描述
x	number/string	-	false	横向的偏移量
y	number/string	-	false	纵向的偏移量

本次新增 string 类型涉及的组件有：rax-scrollView, rax-recyclerview.

Icon 组件在支付宝小程序下自定义 style 无效

<Icon style={{fontSize: '20rpx'}} />

在使用 Icon 组件时，自定义 style 在支付宝小程序下将被丢失

https://github.com/raxjs/rax-components/blob/master/packages/rax-icon/src/miniapp/index.ts#L51

这里的 style 应该是个 string

rax-tab-panel 修改了 props 导致报错

rax-components/packages/rax-tab-panel/src/common/SliderView.js

Line 90 in b73440f

this.props.children = [this.props.children];

rax-scrollview scrollIntoView方法无效

在h5和小程序中都无效

rax-icon emmit 'require @weex-module/dom error' in web

fix: detect isWeex before import weex module

[rax-icon] 小程序运行时下， 钉钉容器报错

位置： https://github.com/raxjs/rax-components/blob/master/packages/rax-icon/src/index.tsx#L69

不存在 tabbar 组件么?

不存在 tabbar 组件么?

[BUG] rax-text children accept array

User code:

<Text>{[1, 2, 3]}</Text>

Text component current will render 1, 2, 3, maybe render 123 more correct.

rax-swiper 不支持 inlineStyle

rax-swiper 不支持内联样式

rax-slider 滑动不跟手

rax-slider在微信小程序和支付宝小程序中不起作用

rax-slider在微信小程序中用不了，应该是wxml里面的需要改成支持多个slot插入的方式，同理在支付宝小程序中也是一样，需要将slot改成swiper-item的方式接入
需要将

<slot>

改为

<swiper-item wx:for="{{tabs}}" wx:key="index">
    <slot name="tab-content-{{index}}"></slot>
 </swiper-item>

同时在微信小程序的js文件中需要支持多个slot接入的方式

options: {
    multipleSlots: true
 },

文档写法有问题吗？

npm install rax-swiper --save安装了rax-swiper这个模块
怎么下面还是引入src文件的模块呢，rax的官方文档也是
import {Swiper, SwiperSlide} from '../src/index'; import './index.css';
不应该是
import {Swiper, SwiperSlide} from 'rax-swiper'; import 'rax-swiper/index.css';
那岂不是，安装了rax-swiper，使用的时候还需要把src放在工程项目里面吗
https://rax.js.org/docs/components/swiperrax官方文档下面的实例代码
import {Swiper, SwiperSlide} from '../src/index'; import './index.css';
这index.css和swiper、swiperSlide从哪儿引进来呢

CI 增加 test 和 lint 检测

目前 CI 中 test 和 lint 都是缺失的

TextInput 支持 placeholder color

rax-slider 无法配合 JSX+ 语法

如果用户这样写

<Slider className="slider" width="750" height="500" autoPlay>
  <Slider.Item x-if={false}>
    <Fragment>
      <Image
        source={{
          height: '500rpx',
          width: '750rpx',
          uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',
        }}
      />
    </Fragment>
  </Slider.Item>
  <Slider.Item>
    <Image
      source={{
        height: '500rpx',
        width: '750rpx',
        uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',
      }}
    />
  </Slider.Item>
  <Slider.Item>
    <Image
      source={{
        height: '500rpx',
        width: '750rpx',
        uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png',
      }}
    />
  </Slider.Item>
</Slider>

第一个为空的 Slider.Item 在 Web 上仍然会被渲染出来。

rax-components/packages/rax-slider/src/slider.web.tsx

Lines 194 to 215 in bfffa4d

	private getPages = () => {
	const { children } = this.props;
	return Children.map(children, (child, i) => {
	const ref = createRef<HTMLDivElement>();
	const translateStyle = {
	width: this.width + 'rpx',
	height: this.height + 'rpx',
	left: i * this.width + 'rpx'
	};
	this.childRefs[i] = ref;
	return (
	<View
	ref={ref}
	className={cx('rax-slider-children', 'childWrap' + i)}
	style={translateStyle}
	key={i}
	>
	{child}
	</View>
	);
	});
	};

https://github.com/jsx-plus/babel-runtime-jsx-plus/blob/946973a159c74dd44fccda412ed35f76d2282e70/src/createCondition.js#L25-L33

createCondition 会把条件为假的元素渲染为 null，但是 slider 并没有处理空的 child。

demo 传送门

rax-text don't crop lines for H5

On H5, property "numberOfLines" don't crop lines if >=2 and does not add a tree dots at the end of the line.

Miniapp demo 优化

存在的问题：

1. 目前 demo 代码质量较差，是测试代码，而非给用户的示例代码
2. 在 Rax 中，常规的做法是 Rax 代码经工具转换为小程序，而非直接写原生的小程序代码，因此示例代码也不建议有原生小程序写法的代码

解决方案：

去除现有 demo 中的 miniapp 目录，基于现有的标准 demo 增加小程序预览模式

rax-scrollview for H5, property "showsHorizontalScrollIndicator" not work correctly

Setting property "showsHorizontalScrollIndicator=false" still show scroll bar on h5

rax-view: flexbox bug when containing a rax-scrollview with long text

🐞 bug report

Affected Package

The issue is caused by package `rax-view`

Is this a regression?

No

🔬 Minimal Reproduction

Simplified page structure:

// import
import View from 'rax-view';
import Text from 'rax-text';
import ScrollView from 'rax-scrollview';

// render
<View style={{ maxHeight: "40vh" }}> {/* outer container */}
  <View style={{ flex: 1 }}> {/* content container */}
    {/* some other views: image, text, etc. */}
    <ScrollView>
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. In hac habitasse platea dictumst quisque sagittis purus sit amet. Pulvinar sapien et ligula ullamcorper. Rutrum tellus pellentesque eu tincidunt. Sed euismod nisi porta lorem mollis aliquam ut porttitor. At elementum eu facilisis sed odio morbi quis commodo. Nisi lacus sed viverra tellus in hac habitasse. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Nunc sed velit dignissim sodales ut. Fermentum odio eu feugiat pretium nibh ipsum consequat. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Tempor orci eu lobortis elementum nibh tellus molestie. Quis auctor elit sed vulputate mi. Orci sagittis eu volutpat odio facilisis mauris. Ultrices in iaculis nunc sed. Diam donec adipiscing tristique risus nec feugiat in.</Text> {/* very long text to make sure the ScrollView could scroll */}
    </ScrollView>
  </View>
  {/* some other views -- e.g. a container view containing some buttons */}
</View>

Description

As the example shows above, the outer container has a maxHeight: 40vh style ('40vh' here is just for simplicity -- it might be other value in production environment -- but this doesn't affect the conclusion).
It also has a content container and some other views (e.g. a container view containing some buttons) as child views.

The content container view has the flex: 1 style to fill the outer container. It might have some other child views(image, text, etc.), but our leading role in this example is a ScrollView with very long text (so that we can "scroll").

Expected Correct Behavior

The very long text should NOT go beyond the outer container's bounds and we can scroll the ScrollView.

Current Bug Behavior

The very long text goes beyond the outer container's bounds and we can't scroll the ScrollView.

🌍 Your Environment

Rax Version:

rax-app 3.1.3
3.1.3

dependencies:

{
    "rax": "^1.1.0",
    "rax-document": "^0.1.0",
    "rax-image": "^2.0.0",
    "rax-link": "^1.0.1",
    "rax-scrollview": "^3.3.4",
    "rax-text": "^2.0.0",
    "rax-view": "^2.0.0"
}

devDependencies:

{
    "@iceworks/spec": "^1.0.0",
    "rax-app": "^3.0.0",
    "eslint": "^6.8.0",
    "prettier": "^2.1.2",
    "stylelint": "^13.7.2"
}

Anything else relevant?

macOS:
bug behavior appears on Google Chrome (v87.0.4280.88)
correct behavior appears on Safari (14.0 (15610.1.28.1.9, 15610))

Solution (or Workaround)

After a long time comparing with react native web, I found this commit.
That is, add a minHeight: 0 style entry in the content container style, so it would be style={{ flex: 1, minHeight: 0 }} now, and it really works!

Suggestion

Could we add 'min-height: 0;' in the file rax-components/packages/rax-view/src/index.css (since there's a 'min-width: 0;' already in that css file) ?

[Bug] [email protected] Unable to set specific width, width is always 100%

const container = {
    width: 180,
    height: 1100,
    backgroundColor: '#f8f8f8',
 }
<RecyclerView style={container}>...</RecyclerView>

rax-countdown 不支持ms

demo中写了ms，但是其实没有支持哦～

rax-picture needs a more robust check for gif

rax-components/packages/rax-picture/src/optimizer/index.ts

Line 52 in 81ba2d3

const notGif = !~path.indexOf('gif') && !~path.indexOf('GIF') || !ignoreGif;

[Feature] rax-video web support objectFit

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

Image 组件 source 改变无法更新显示的图片

<Image source={{uri: this.state.uri}} />

this.setState({
  uri: 'xxxx',
})

rax: 1.1.0
rax-image: 2.0.2
web环境

还有一个问题就是如果不给 source 或者 uri 为空就不渲染 Image 组建了，导致布局出问题

[Enhance] rax-modal 改用 rax-portal 实现

背景

• 弹窗节点插入到 document.body 从结构上来说更加合理
• 避免父层节点样式导致弹窗样式出现问题

Rax ScrollView Web component scroll bars issue

Inner container style of ScrollView for web has "overflow: scroll". So it display scroll bars for all directions.

May be better use "overflow: auto", or for horizontal mode set to "overflow-x: scroll", and for vertical mode - "overflow-y: scroll"

https://github.com/raxjs/rax-components/blob/master/packages/rax-scrollview/src/index.tsx

rax-video 丢失了小程序的object-fit

rax-video 丢失了小程序的object-fit

[BUG] Each call to slideTo, should reset timer.

RT.

rax-waterfall nimiapp 调用死循环

https://github.com/raxjs/rax-components/blob/master/packages/rax-waterfall/src/miniapp/index.ts

didUpdate: function didUpdate() {
this.update();
},

update() {
let columns = this.getColunms(this.props.dataSource, this.props.columnCount);
this.setData({ columns });
},

Bug： rax-tab-panel , tab not align center

Envrionment: Android Weex Playground
Weex SDK version : 0.24.0
Demo Code: rax-tab-panel demo

`

      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
      <TabPanel style={styles.page}>
        <TabPanelView style={{ flex: 1 }}>{1}</TabPanelView>
      </TabPanel>
    </TabController>

`

When you scroll TabController, Tab‘s current Select Index change. But the "block" transition not right. the selected tab not align center. 100% occur. when you scroll ten or more times. Maybe reason is this code.

transition( block, { transform:translateX(${left}rpx), webkitTransform: translateX(${left}rpx), width: ${itemWidth}rpx}, { timingFunction: 'ease-out', delay: 0, duration: 200 }, () => { afterSwitch({ index, type }); } );

RecyclerView在H5下使用虚拟列表报错: Uncaught TypeError: Cannot add property style, object is not extensible

示例代码:

/** @jsx createElement */
import { createElement, useEffect, useState } from 'rax';
import RecyclerView from 'rax-recyclerview'
import Text from 'rax-text';
import View from 'rax-view';
import './index.css';

export default function App() {
  const [list, setList] = useState(() => {
    return new Array(1000).fill(0);
  });

  return (
    <RecyclerView
      style={{
        height: 900
      }}
      itemSize={200}
      totalSize={list.length * 200}
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      className="container">
      {list.map((item, index) => {
        return (
          <RecyclerView.Cell key={index}>
            <View className="test-panel">
              <Text className="test-panel-text">{index}</Text>
            </View>
          </RecyclerView.Cell>
        )
      })}
    </RecyclerView>
  );
}

通过itemSize, totalSize,指定高度进入可回收列表模式，Web下报错：

Uncaught TypeError: Cannot add property style, object is not extensible

初步排查，从React的某个版本后。props使用了freeze()方法，不能直接通过赋值修改属性内容。

rax-scrollview resetScroll导致向上滚动也会触发onEndReached

如果onEndReached异步请求失败，需要重置状态，使得可以再次向下滚动触发onEndReached，resetScroll中直接lastScrollDistance重置为0，导致第一次往上滚动也会触发onEndReached了

Feat update all components use build-script

Change rax-scripts to build-script