@farris/react

@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