# test-wang-react

> GSP Cloud移动端公共组件。

Latest version **1.0.1** (published 2018-05-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install test-wang-react
pnpm add test-wang-react
yarn add test-wang-react
bun add test-wang-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-05-10 |
| First published | 2018-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 120 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wang-xh |
| Maintainers | wang-xh |

## Links

- npm: https://www.npmjs.com/package/test-wang-react
- npm.io page: https://npm.io/package/test-wang-react

## Dependencies (3)

- [moment](https://npm.io/package/moment.md) ^2.22.1
- [antd-mobile](https://npm.io/package/antd-mobile.md) ^2.1.2
- [gsp-react-framework](https://npm.io/package/gsp-react-framework.md) 0.0.8

## Recent versions

- 1.0.1 (latest) — 2018-05-10

## README

@farris/react  基于react和gsp-react-framework 开发框架提供GSP Cloud移动端公共组件。 



[TOC]

### 安装组件包

```
npm install @farris/react --save
```



### 周日历组件

#### 效果图



![](https://ws1.sinaimg.cn/large/006tKfTcly1fr54xtf54uj30d104gweg.jpg)





![](https://ws2.sinaimg.cn/large/006tKfTcly1fr54xt9o82j30cy0msq3a.jpg)







#### 引入组件

```
import {Weekcalendar} from '@farris/react'
```



#### 使用组件

```
<WeekCalendar selectedDate="20180510"

                    onWeekDateChange={this.viewModel.onWeekDateChange}

                    beforeGoNextWeek={this.viewModel.beforeGoNextWeek}

                    afterGoLastWeek={this.viewModel.afterGoLastWeek}

                    afterGoNextWeek={this.viewModel.afterGoNextWeek}

                    afterCalendarSelect={this.viewModel.afterCalendarSelect}

                ></WeekCalendar>

```



```
    onWeekDateChange(selectedDate){
        console.log(selectedDate);
    }
    afterGoLastWeek(selectedDate){
        console.log(selectedDate);
    }
    beforeGoNextWeek(){
        return true;
    }
    afterGoNextWeek(selectedDate){
        console.log(selectedDate);
    }
    afterCalendarSelect(selectedDate){
        console.log(selectedDate);
    }
```



#### 组件属性 

| 属性                | 描述                                                     | 类型                    | 默认值     | 必选  |
| ------------------- | -------------------------------------------------------- | ----------------------- | ---------- | ----- |
| enterDirection      | 入场方向 vertical: 垂直 horizontal: 水平                 | 'horizontal'/'vertical' | horizontal | false |
| selectedDate        | 初始化日期(格式：YYYYMMDD)                               | string                  | today      | false |
| disable             | 日历是否可用                                             | boolean                 | false      | false |
| hideArrowLeft       | 是否隐藏左箭头                                           | boolean                 | false      | false |
| hideArrowRight      | 是否隐藏右箭头                                           | boolean                 | false      | false |
| minDate             | 最小日期                                                 | Date                    |            | false |
| maxDate             | 最大日期                                                 | Date                    |            | false |
| rowSize             | 行大小                                                   | 'normal' \| 'xl'        | 'normal'   | false |
| initalMonths        | 初始化月个数                                             | number                  | 2          | false |
| onWeekDateChange    | 切换周日期时回调                                         | (dateStr) => void       |            | false |
| beforeGoLastWeek    | 切换上一周前回调  ，返回true则继续切换上一周，否则不切换 | () => boolean           |            | false |
| afterGoLastWeek     | 切换上一周后回调                                         | (dateStr) => void       |            | false |
| beforeGoNextWeek    | 切换下一周前回调，返回true则继续切换下一周，否则不切换   | () => boolean           |            | false |
| afterGoNextWeek     | 切换下一周后回调                                         | (dateStr) => void       |            | false |
| beforeShowCalendar  | 打开日历前回调，返回true则继续打开日历，否则不打开日历   | (dateStr) => boolean    |            | false |
| afterCalendarSelect | 选中日历日期后回调                                       | (dateStr) => void       |            | false |





### 帮助组件

#### 效果图

![](https://ws2.sinaimg.cn/large/006tNc79ly1fr5d7bpxuvj30cx01j3ya.jpg)



![](https://ws3.sinaimg.cn/large/006tNc79ly1fr5d7b82exj30d20gwmx8.jpg)





![](https://ws3.sinaimg.cn/large/006tNc79ly1fr5d7auic4j30d10cqq2y.jpg)





#### 引入组件

```
import { HelpComponent } from '@farris/react'
```



#### 使用组件

```
   <HelpComponent label="项目名称" inputValue={state.inputValue}
                   required={true} editable={false} readOnly={false} headerTitle="请选择项目名称"
                   helpType="hot" hotName="Project_Name_Hot" hotTextField="Project_Name"
                   helpValueField="ID" helpTextFieldArray={["Project_Name"]}
                   loadData={this.viewModel.loadProjectData}
                   afterSelectItem={this.viewModel.afterSelectProject_Name}>
    </HelpComponent>
                        
                        
                        
    loadProjectData(layer = 0, itemId, searchingText = "", pageIndex, pageSize) {
        let observable = Observable.create(function (observer) {
            setTimeout(() => {
                observer.next(projectMockData);
            }, 5000)

        });
        return observable;
    }


    afterSelectProject_Name(selectedProject) {
        this.setState({
            inputValue: selectedProject.Project_Name
        });
    }

```





#### 组件属性

| 属性            | 描述                                                         | 类型    | 默认值   | 必选  |
| --------------- | ------------------------------------------------------------ | ------- | -------- | ----- |
| label           | input标签                                                    | string  |          | false |
| placeholder     | placeholder                                                  | string  |          | false |
| inputValue      | input值（受控）                                              | string  |          | true  |
| required        | input是否必填                                                | boolean | false    | false |
| editable        | input是否可编辑                                              | boolean | false    | false |
| readOnly        | 是否可以选择帮助                                             | boolean | false    | false |
| headerTitle     | 帮助页标题                                                   | string  | "请选择" | false |
| helpValueField  | 帮助数据标识字段                                             | string  | ‘ID’     | true  |
| helpTextField   | 帮助展示字段数组（例：["ID","Name"]）                        | array   |          | true  |
| helpType        | 帮助类型（常用：'hot' ，收藏： 'favor'）                     | string  |          | false |
| hotLimit        | 常用项最大个数                                               | number  | 4        | false |
| hotName         | 常用项标识（helpType为hot时必填）                            | string  |          | true  |
| hotTextField    | 常用项展示字段（helpType为hot时必填）                        | string  |          | true  |
| isTree          | 是否树类型                                                   | boolean | false    | false |
| favorName       | 收藏项标识（helpType为favor时必填）                          | string  |          | true  |
| showMessage     | 是否显示校验提示                                             | boolean | false    | false |
| message         | 校验提示信息（showMessge为true时展示）                       | string  |          | false |
| onInputChange   | 输入框change事件回调   (value)=>void                         |         |          | false |
| afterSelectItem | 选中帮助项后的回调 (selectedItem)=>void                      |         |          | false |
| loadData        | 加载帮助数据的回调，返回值必须为Observable类型(layer,itemId,searchingText,pageIndex,pageSize) =>Observable |         |          | true  |

---
_Source: https://npm.io/package/test-wang-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._