import React from "react" ; import Immutable from "immutable" ; import schemaFormReact from "fx-schema-form-react" ; import { immutableRenderDecorator } from "react-immutable-render-mixin" ; import { compose , shouldUpdate } from "recompose" ; import { DefaultProps } from "fx-schema-form-react/libs/components" ; import HTML5Backend from "react-dnd-html5-backend" ; import { DropTarget , DragDropContext , DragSource } from "react-dnd" ; import { ArrayHocOutProps } from "fx-schema-form-react/libs/hocs/array" ; import { ArrayComponent , ArrayItemComponent } from "./arrayitem" ; import { NoneComponent } from "../../common/components/none" ; import proxy from "../../modelproxy" ; export const globalOptions = Immutable . fromJS ( { field : { default : { temps : [ "formItem" ] , widgetHocs : [ schemaFormReact . hocFactory . get ( "data" ) ( { data : true , meta : true , metaKeys : [ "isValid" , "showPassword" , "options" ] } ) ] } , array : { temps : [ "card" ] , Root : NoneComponent , ArrayFieldComponent : NoneComponent , formHocs : [ DragDropContext ( HTML5Backend ) , schemaFormReact . hocFactory . get ( "resetKey" ) ( { excludeKeys : [ "formItemData" , "formItemMeta" ] } ) ] , formItemHocs : [ schemaFormReact . hocFactory . get ( "utils" ) ( ) , schemaFormReact . hocFactory . get ( "array" ) ( ) , DropTarget ( "SchemaFormItem" , { canDrop ( props , monitor ) { let monitorItem = monitor . getItem ( ) , arrLev = ( monitorItem . arrayLevel || [ ] ) . concat ( [ ] ) , arrLev1 = ( props . arrayLevel || [ ] ) . concat ( [ ] ) ; arrLev . pop ( ) ; arrLev1 . pop ( ) ; return arrLev . join ( ) === arrLev1 . join ( ) ; } , drop : ( props , monitor ) => { const monitorItem = monitor . getItem ( ) ; const didDrop = monitor . didDrop ( ) ; const { arrayIndex } = props ; if ( ! didDrop && props . uiSchema && props . uiSchema . keys && monitorItem . arrayIndex !== arrayIndex ) { props . moveItem ( props . parentKeys , props . uiSchema . keys , monitorItem . arrayIndex , arrayIndex || 0 ) ; } } } , ( connect , monitor ) => ( { connectDropTarget : connect . dropTarget ( ) , isHover : monitor . isOver ( ) , canDrop : monitor . canDrop ( ) } ) ) , DragSource ( "SchemaFormItem" , { beginDrag : ( props ) => { return props ; } } , ( connect , monitor ) => ( { connectDragSource : connect . dragSource ( ) , isDragging : monitor . isDragging ( ) } ) ) , ( Component ) => { return class Com extends React . PureComponent < DefaultProps & { connectDragSource : any ; isDragging : any ; canDrop : boolean ; isHover : boolean ; index : any ; connectDropTarget : any ; } > { public render ( ) { const { isDragging , canDrop , isHover , index , connectDropTarget , connectDragSource , ... extraProps } = this . props ; const opacity = isDragging ? 0.1 : 1 ; let backgroundColor = "" ; if ( isHover && ! isDragging ) { backgroundColor = "gray" ; } return connectDragSource ( connectDropTarget ( < div style = { { opacity , backgroundColor } } > < Component { ... extraProps } / > < /div>)); } } ; } , ] , fieldHocs : [ schemaFormReact . hocFactory . get ( "data" ) ( { data : true , dataLength : true } ) ] , options : Immutable . fromJS ( { temp : { card : { icon : "apps" } } } ) } , normal : { } , number : { options : Immutable . fromJS ( { widget : { number : { options : { inputProps : { type : "number" } } } } } ) } , object : { temps : [ "card" ] , Root : NoneComponent } , boolean : { widget : "checkbox" , options : Immutable . fromJS ( { temp : { formItem : { showTitle : false } } } ) } } , temp : { card : { tempHocs : [ schemaFormReact . hocFactory . get ( "data" ) ( { meta : true , data : true , dataLength : true , metaKeys : [ "collapsing" , "errorText" , "isValid" ] } ) , immutableRenderDecorator ] , options : { elevation : 0 , raised : false , className : "ml3 mr3" } } , formItem : { tempHocs : [ schemaFormReact . hocFactory . get ( "data" ) ( { meta : true , metaKeys : [ "isLoading" , "errorText" , "isValid" , "dirty" ] } ) , immutableRenderDecorator ] , options : { fullWidth : true , margin : "normal" , className : "ml3 mr3 flex w-auto" } } } , hoc : { data : { rootReducerKey : [ "schemaForm" ] } , array : { ArrayComponent : ArrayComponent , ArrayItemComponent : ArrayItemComponent } , schemaFormDec : { hocIncludeKeys : [ "schemaId" ] } , proxy : { proxy : proxy } } , widget : { text : { options : { autoFocus : false } } , password : { options : { autoFocus : false } } , date : { options : { keyboard : true , clearable : true , format : "YYYY-MM-DD" , invalidLabel : "" } } , datetime : { options : { keyboard : true , clearable : true , format : "YYYY-MM-DD HH:mm:ss" , invalidLabel : "" } } , time : { options : { mask : [ /\d/ , /\d/ , ":" , /\d/ , /\d/ , " " , /a|p/i , "M" ] , keyboard : true , clearable : true , invalidLabel : "" , ampm : true } } } } ) ;