annasearl / annar

优雅、简洁的 Remax 组件库

Annar

优雅、简洁的 Remax 组件库

💫 特性

• 基于 Remax 开发 UI 组件
• 支持微信 支付宝 钉钉 小程序多端适配运行
• 支持 Web 开发
• 支持按需引入
• 支持 TypeScript

📦 安装

npm install annar

yarn add annar

🎀 使用

import { Button } from 'annar';

const App = () => (
  <>
    <Button>Click Annar</Button>
  </>
);

在 app.js 中引入样式：

import 'annar/dist/annar.css';

Web

注意：使用 Web 组件开发需要依赖 @remax/one

npm install @remax/one

🥡 按需加载

annar 的 JS 部分默认支持 tree shaking。

小程序

CSS 部分需要在 app.js 中手动引入

import 'annar/esm/button/style/css';

// 如果你使用 sass，也可以这样引入
import 'annar/esm/button/style';

Web

通过配置 babel-plugin-import 进行 CSS 的按需加载

🧑🏻‍💻 本地开发

$ git clone [email protected]:AnnaSearl/annar.git
$ cd annar
$ npm install
$ npm start

🤝 参与共建

如果你有任何问题，可以提交 issue 给我们，我们也非常欢迎你加入 Annar 的建设，向我们提交 PR。

Annar 维护 master 和 feature 两个分支，如果您是修复 bug，请提交到 master；如果您要添加新的功能，请提交到 feature。

Pull Request 规范

1. 我们建议保持你的 PR 足够小。保证一个 PR 只解决一个问题或只添加一个功能
2. 在 PR 中请添加合适的描述，并关联相关的 Issue
3. 在 Pull Request 前，请同步主仓库的最新代码

常用命令

1. npm start 在本地运行 Annar 的网站
2. npm run lint 检查代码风格
3. npm run build 编译 TypeScript 代码到 esm、web 以及 dist 目录

🌰 示例

Examples for Annar

🍭 体验

🚦 体验小程序上的组件版本较低，若想查看 Annar 的最新组件及特性，请前往 官方文档

🍻 钉钉交流群

annar's Issues

新增Skeleton，ActionSheet组件，notification，toast方法

新增Skeleton，ActionSheet两个反馈组件，notification，toast两个方法

button点击后颜色不恢复。需要点击别处才会恢复

button点击后颜色不恢复。需要点击别处才会恢复

希望引入swiper这个组件，方便开发者开发

swiper组件

Checkbox 不能多选，只能单选

在钉钉已经提出了这问题。可以考虑修补。谢谢。

v1.8.15 已经修补

使用方式
const [option1, setOption1] = React.useState([]);
<Checkbox.Group value={option1} onChange={(c, v) => setOption1(c)}>
<Checkbox value={'0'}>Timeliness issue</Checkbox>
<Checkbox value={'1'}>Price question</Checkbox>
<Checkbox value={'2'}>Others</Checkbox>
</Checkbox.Group>

SwipeAction属性open没有作用

SwipeAction属性open无法控制显示隐藏，typescript下报属性错误。

使用dumi作为文档构建工具，完善所有组件文档

need date picker

有没有日历,日期,时间选择器.
手写,计算日期都算疯了,日历格子排版老不对.

run build之后，项目里每个wxss都会有一段重复的样式

只在app.js 引入 import "anna-remax-ui/esm/popup/style/css";
然后打包后查看每个页面的wxss都会有重复样式。
ui版本是1.8.1。

form表单 如何做联动

不能给表单元素绑定value和onchange的话，那有木有什么好办法可以做到联动呢

🤔️

请问下怎么查看支持哪些icon?

icon的type是string类型，请问下有哪些图标可以使用？

Tabs 组件下标位置不对

问题描述

点击 tab 时光标不会滚动

版本信息

platform: 微信小程序
version: 2.0.7
remax: 2.9.4

2.0几时能出来呢？

不得不说，还挺好的，期待2.0发布后用到项目中，感谢！

tabs 组件功能需求

如上tab形式，期望增强的功能：

• tab内容支持非动态渲染（只渲染一次）
• tab内容支持滑动切换，切换时调用适当的css动画效果

css 微信小程序无法编译通过

tabs eslint error

declare const Tabs: {
    (props: TabProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
    TabContent: React.FC<{}>;
};

React.FC<{}> 导致 eslint 报错 Property 'tab' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

Tabs 组件 activeKey 参数 初始化没有作用

bug 描述
Tabs 组件 activeKey 参数 初始化没有作用，可能是内部在初始化外部props的时候，没有同步state

复现步骤
activeKey的初始化参数，tabs组件使用正常显示对应的tab Key

版本信息
anna-remax-ui 版本: 1.7.0
remax: 2.3.0

swiper报错

swiper在小程序里手动华滑动的时候会报错，handleTouchEnd函数里e.changedTouches[0]找不到
报错信息:
MiniProgramError
Cannot read property 'pageX' of undefined
TypeError: Cannot read property 'pageX' of undefined

解决方法：
将 var touch = e.changedTouches[0]; 改为
var touch = e.changedTouches[0] || e.nativeEvent.changedTouches[0];

去除sass的限制，生成通用的css文件

谁在使用

如果你的项目中使用了Anna Remax UI ，请在这里分享出来～

格式：
[项目名称]
[项目二维码图片地址]

Ling

阿玲

期待走马灯和时间

Anna 2.0

1.规范组件的API
1.1唯一标志从 key 改为 value
1.2去除默认margin，如Card的margin-bottom
1.3规范API命名
1.4一些类型为string的API支持number
2.重做Input组件
3.新增Form组件
4.优化Cascade，去除parentKey
5.更名为annar
6.新增date-picker
7.重做picker
8.新增Progress组件
9.新增轮播图
10.新增Ling

发布日期：2020年10月13日

tabs组件使用异常

[相关依赖版本]
"anna-remax-ui": "^1.6.9",
"remax": "^2.3.0"
[代码]

import * as React from 'react';
import { View } from 'remax/ali';
import {Tabs,Card} from 'anna-remax-ui'
import styles from './index.less';

const { TabContent } = Tabs;

const tabs = [{
  key: '0',
  title: 'All',
}, {
  key: "1",
  title: "Missed",
}]

const tabs1 = [{
  key: '0',
  title: 'All',
}, {
  key: "1",
  title: "Missed",
}]

const tabs2 = [{
  key: '0',
  title: '全部',
}, {
  key: "1",
  title: "待处理",
}, {
  key: "2",
  title: "询价中",
}, {
  key: "3",
  title: "待报价",
}, {
  key: "4",
  title: "报价中",
}]

const tabs3 = [{
  key: '0',
  title: '精选',
}, {
  key: "1",
  title: "关注",
}, {
  key: "2",
  title: "广场",
}]

const tabs4 = [{
  key: '0',
  title: 'All',
}, {
  key: "1",
  title: "Read",
}, {
  key: "2",
  title: "Missed",
}]

export default () => {

  const [stateKey, setStateKey] = React.useState('0');
  const [stateKey1, setStateKey1] = React.useState('0');
  const [stateKey2, setStateKey2] = React.useState('0');
  const [stateKey3, setStateKey3] = React.useState('0');
  const [stateKey4, setStateKey4] = React.useState('0');

  return (
      <View className={styles.app}>
        <View className={styles.group}>
          <View className={styles.title}>Basic</View>
          <View className={styles.content}>
            <Tabs
                tabs={tabs}
                onTabClick={({ key }) => setStateKey(key)}
                activeTab={stateKey}
            >
              {
                tabs.map((tab) => (
                    <TabContent
                        key={tab.key}
                        tabId={tab.key}
                        activeTab={stateKey}
                    >
                      <Card>
                        <View className={styles.tabContent}>
                          {`${tab.title} content`}
                        </View>
                      </Card>
                    </TabContent>
                ))
              }
            </Tabs>
          </View>
        </View>
        <View className={styles.group}>
          <View className={styles.title}>TabTitleSquare</View>
          <View className={styles.content}>
            <Tabs
                tabs={tabs}
                onTabClick={({ key }) => setStateKey1(key)}
                activeTab={stateKey1}
                tabTitleSquare
            >
              {
                tabs1.map((tab) => (
                    <TabContent
                        key={tab.key}
                        tabId={tab.key}
                        activeTab={stateKey1}
                    >
                      <Card>
                        <View className={styles.tabContent}>
                          {`${tab.title} content`}
                        </View>
                      </Card>
                    </TabContent>
                ))
              }
            </Tabs>
          </View>
        </View>
        <View className={styles.group}>
          <View className={styles.title}>Type</View>
          <View className={styles.subTitle}>plain</View>
          <View className={styles.content}>
            <Tabs
                type="plain"
                tabs={tabs2}
                onTabClick={({ key }) => setStateKey2(key)}
                activeTab={stateKey2}
                tabTitleSquare
            >
              {
                tabs2.map((tab) => (
                    <TabContent
                        key={tab.key}
                        tabId={tab.key}
                        activeTab={stateKey2}
                    >
                      <Card>
                        <View className={styles.tabContent}>
                          {`${tab.title} content`}
                        </View>
                      </Card>
                    </TabContent>
                ))
              }
            </Tabs>
          </View>
          <View className={styles.subTitle}>card</View>
          <View className={styles.content}>
            <Tabs
                type="card"
                tabs={tabs3}
                onTabClick={({ key }) => setStateKey3(key)}
                activeTab={stateKey3}
                tabTitleSquare
            >
              {
                tabs3.map((tab) => (
                    <TabContent
                        key={tab.key}
                        tabId={tab.key}
                        activeTab={stateKey3}
                    >
                      <Card>
                        <View className={styles.tabContent}>
                          {`${tab.title} content`}
                        </View>
                      </Card>
                    </TabContent>
                ))
              }
            </Tabs>
          </View>
        </View>
        <View className={styles.group}>
          <View className={styles.title}>Fixed</View>
          <View className={styles.subTitle}>使用fixed属性可以使Tabs固定在页面顶部</View>
          <View className={styles.content}>
            <Tabs
                // fixed
                tabs={tabs4}
                onTabClick={({ key }) => setStateKey4(key)}
                activeTab={stateKey4}
            >
              {
                tabs4.map((tab) => (
                    <TabContent
                        key={tab.key}
                        tabId={tab.key}
                        activeTab={stateKey4}
                    >
                      <Card>
                        <View className={styles.tabContent}>
                          {`${tab.title} content`}
                        </View>
                      </Card>
                    </TabContent>
                ))
              }
            </Tabs>
          </View>
        </View>
      </View>
  );
};

[运行效果]

Tabs 组件 activeKey 参数，组件初始化没有作用

bug 描述
Tabs 组件 activeKey 参数 初始化没有作用，可能是内部在初始化外部props的时候，没有同步state

复现步骤
activeKey的初始化参数，tabs组件使用正常显示对应的tab Key

版本信息
anna-remax-ui 版本: 1.7.0
remax: 2.3.0

button的实现方式

anna-remax-ui 之中，Button的实现方式并没有依赖 remax/one 的button组件，这是作为何种考虑呢？

tabs数据量过多时,光标会

能否增加tabbar组件？

SearchBar组件BUG

由于组件构成是input外覆盖了一层div
导致如果用户直接选中文字是不会把输入框展示出来的

百分百复现:
双击文字即可

最后感谢大佬的无私奉献,hhh

去除对 lodash-es 的依赖

Cell 组件样式 bug

多个 Cell 放一起的时候，中间的几个边框会消失。没有设置 border=false

效果

代码

版本

• [email protected]
• [email protected]

Cell添加cover属性

是否可以给cell添加一个cover属性，用于展示图片在cell的左侧或者右侧？

集成测试

searchBar组件，使用postcss进行样式处理，在将px转成rpx后 search icon的尺寸没有发生改变

picker 于 wechat 中无法使用

• 报错截图
  

• package.json

{
  "name": "uitest",
  "private": true,
  "version": "1.0.0",
  "description": "Remax Project",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "remax build -w -t",
    "build": "cross-env NODE_ENV=production remax build -t"
  },
  "dependencies": {
    "@remax/plugin-sass": "^1.0.0",
    "anna-remax-ui": "^1.5.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "remax": "^2.1.1"
  },
  "devDependencies": {
    "cross-env": "^7.0.2"
  }
}

其次 picker 组件并不支持头条，在 one/base/picker.tsx 中可改为

import * as React from 'react';
import { Picker as AliPicker } from 'remax/ali';
import { Picker as WechatPicker } from 'remax/wechat';
import { Picker as ToutiaoPicker } from 'remax/toutiao';

type Props = any;

export default function OnePicker(props: Props) {
    switch (process.env.REMAX_PLATFORM) {
        case 'ali':
            return <AliPicker {...props} />;
        case 'wechat':
            return <WechatPicker {...props} />;
        case 'toutiao':
            return <ToutiaoPicker {...props} />;
        default:
            return <WechatPicker {...props} />;
    }
}

Tabs组件的标题消失

tabs组件的TabContent的tab属性设置无法生效，效果图表现为丢失标题

怎么修改原样式

在微信小程序中，难免遇到大小不适合的样式

🎨 添加自定义主题功能

后期是否会增加选择日期的组件

增加Web端的适配，使用Webpack作为构建工具

Input缺少maxLength属性

Input缺少maxLength属性

似乎这个库目前无法正常使用?

目前这个row,grid之类的布局组件是完全无法使用啊.
尝试去掉外层的view也无法正常显示诶?
有没有什么解决方案?

就看官方的DEMO似乎也没有用到row跟grid,而是封装了一个叫做Frame与block的组件.
所以我要使用这个库该如何操作?除了组件样式外布局完全自己编码吗?

网站无法刷新

一刷新就 404 了。

需要配置 exportStatic https://github.com/remaxjs/remax/blob/master/website/.umirc.ts#L34

钉钉交流群二维码似乎无法扫描

Cascade value 指定当前选中的条目 时，下面的列表显示错误

<Cascade value={selectedValue} changeOnSelect key={'branSelect' + updateStatus} name="品类" options={listData} onChange={handleBasicChange} />

1、 下面的列表还是从头开始的。
onchang 获得 的value值 最多只能到三个
2、options 通过set 列表不刷新 ，只有改变key 值时才会刷新。

类似Input 没有表单验证, (类似antd的Form: {getFieldDecorator, validateFields})

reg验证失败的反馈都要自己写, 有点头大.

似乎组件没有按需加载

我引用一个button ，文件就已经500kb+了，看打包出来的文件，把其它没有引用的组件也打包进来了

小程序中，Filter.Item 被 fixed 在页面上，我 scroll up & down 的时候跟着跑

截图

 <Frame grayBg style={{ overflow: 'hidden' }}>
            <Block title={state.pages.homepage.categoryGroup.group.title}>
              <Filter style={{ zIndex: 5, position: 'relative' }}>
                <Filter.Item
                  title='品类'
                  value={value}
                  options={options}
                  // onChange={e => setValue(e.value)}
                />
              </Filter>
            </Block>
          </Frame>

源头是因为

  .anna-filter-content {
    z-index: 1;
    position: fixed;
    top: unset;
    bottom: unset;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: height 0.3s ease; }

📱 组件库支持 react-native

可以提供DEMO嘛？

Swiper组件中Swiper.Item组件位置异常

测试Swiper组件时，Sipwe.Item的位置位于屏幕之外

js:

import * as React from "react";
import {Image, View} from 'remax/wechat';
import styles from './clubs.css';
import {Swiper as AnnarSwiper} from "annar";


export default class ClubsPage extends React.Component {
    render(){
        return(
            <View className={styles.clubsPage}>
                <AnnarSwiper autoplay = 'true' autoplayInterval = '3000'
                             height='300px'
                             size = 'middle'
                             showIndicators='true'
                             shape = 'sharp'
                >
                    <AnnarSwiper.Item className={styles.SwiperItem}>
                        <Image style = 'height:100%;width:100%'src ="/images/test.png"/>
                    </AnnarSwiper.Item>
                    <AnnarSwiper.Item >
                        <Image style = 'height:100%;width:100%' src ="/images/test.png"/>
                    </AnnarSwiper.Item>
                </AnnarSwiper>
            </View>
        )
    }
}

css:

.clubsPage{
    background-color: #8FCAF7;
}

.SwiperItem{
    height: 100px;
    width:300px;
}

渲染后只有外框:

观察页面wxmal排错时发现Swiper.Item位于屏幕之外:

将异常的属性强行改成100px后Swiper.Item回到屏幕内部，但是排列仍有异常，不符合横向轮播的排列