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

[TOC]

安装组件包

npm install @farris/react --save

周日历组件

效果图

引入组件

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 |

帮助组件

效果图

引入组件

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 |