|
| 1 | +import{defaultasTimePicker}from"antd/es/time-picker"; |
| 2 | +import{ |
| 3 | +ColumnTypeCompBuilder, |
| 4 | +ColumnTypeViewFn, |
| 5 | +}from"comps/comps/tableComp/column/columnTypeCompBuilder"; |
| 6 | +import{ColumnValueTooltip}from"comps/comps/tableComp/column/simpleColumnTypeComps"; |
| 7 | +import{StringControl}from"comps/controls/codeControl"; |
| 8 | +import{withDefault}from"comps/generators"; |
| 9 | +import{formatPropertyView}from"comps/utils/propertyUtils"; |
| 10 | +import{trans}from"i18n"; |
| 11 | +importdayjsfrom"dayjs"; |
| 12 | +import{useEffect,useRef,useState}from"react"; |
| 13 | +importstyledfrom"styled-components"; |
| 14 | +import{TIME_FORMAT}from"util/dateTimeUtils"; |
| 15 | +import{hasIcon}from"comps/utils"; |
| 16 | +import{IconControl}from"comps/controls/iconControl"; |
| 17 | + |
| 18 | + |
| 19 | +constTimePickerStyled=styled(TimePicker)<{$open:boolean}>` |
| 20 | + width: 100%; |
| 21 | + height: 100%; |
| 22 | + position: absolute; |
| 23 | + top: 0; |
| 24 | + padding: 0; |
| 25 | + padding-left: 11px; |
| 26 | + .ant-picker-input { |
| 27 | + height: 100%; |
| 28 | + } |
| 29 | + input { |
| 30 | + padding-right: 18px; |
| 31 | + cursor: pointer; |
| 32 | + } |
| 33 | + &.ant-picker-focused .ant-picker-suffix svg g { |
| 34 | + stroke:${(props)=>props.$open&&"#315EFB"}; |
| 35 | + } |
| 36 | + .ant-picker-suffix { |
| 37 | + height: calc(100% - 1px); |
| 38 | + position: absolute; |
| 39 | + right: 0; |
| 40 | + top: 0.5px; |
| 41 | + display: flex; |
| 42 | + align-items: center; |
| 43 | + padding: 0 3px; |
| 44 | + } |
| 45 | +`; |
| 46 | + |
| 47 | +constWrapper=styled.div` |
| 48 | + background: transparent !important; |
| 49 | +`; |
| 50 | + |
| 51 | +exportfunctionformatTime(time:string,format:string){ |
| 52 | +constparsedTime=dayjs(time,TIME_FORMAT); |
| 53 | +returnparsedTime.isValid() ?parsedTime.format(format) :""; |
| 54 | +} |
| 55 | + |
| 56 | +constchildrenMap={ |
| 57 | +text:StringControl, |
| 58 | +prefixIcon:IconControl, |
| 59 | +suffixIcon:IconControl, |
| 60 | +format:withDefault(StringControl,TIME_FORMAT), |
| 61 | +inputFormat:withDefault(StringControl,TIME_FORMAT), |
| 62 | +}; |
| 63 | + |
| 64 | +letinputFormat=TIME_FORMAT; |
| 65 | + |
| 66 | +constgetBaseValue:ColumnTypeViewFn<typeofchildrenMap,string,string>=(props)=>props.text; |
| 67 | + |
| 68 | +typeTimeEditProps={ |
| 69 | +value:string; |
| 70 | +onChange:(value:string)=>void; |
| 71 | +onChangeEnd:()=>void; |
| 72 | +inputFormat:string; |
| 73 | +}; |
| 74 | + |
| 75 | +exportconstTimeEdit=(props:TimeEditProps)=>{ |
| 76 | +constpickerRef=useRef<any>(); |
| 77 | +const[panelOpen,setPanelOpen]=useState(true); |
| 78 | +letvalue=dayjs(props.value,TIME_FORMAT); |
| 79 | +if(!value.isValid()){ |
| 80 | +value=dayjs("00:00:00",TIME_FORMAT); |
| 81 | +} |
| 82 | + |
| 83 | +const[tempValue,setTempValue]=useState<dayjs.Dayjs|null>(value); |
| 84 | + |
| 85 | +useEffect(()=>{ |
| 86 | +constvalue=props.value ?dayjs(props.value,TIME_FORMAT) :null; |
| 87 | +setTempValue(value); |
| 88 | +},[props.value]); |
| 89 | + |
| 90 | +return( |
| 91 | +<Wrapper |
| 92 | +onKeyDown={(e)=>{ |
| 93 | +if(e.key==="Enter"&&!panelOpen){ |
| 94 | +props.onChangeEnd(); |
| 95 | +} |
| 96 | +}} |
| 97 | +onMouseDown={(e)=>{ |
| 98 | +e.stopPropagation(); |
| 99 | +e.preventDefault(); |
| 100 | +}} |
| 101 | +> |
| 102 | +<TimePickerStyled |
| 103 | +ref={pickerRef} |
| 104 | +$open={panelOpen} |
| 105 | +format={props.inputFormat} |
| 106 | +allowClear={true} |
| 107 | +autoFocus |
| 108 | +value={tempValue} |
| 109 | +defaultOpen={true} |
| 110 | +onOpenChange={(open)=>setPanelOpen(open)} |
| 111 | +onChange={(value,timeString)=>{ |
| 112 | +props.onChange(timeStringasstring); |
| 113 | +}} |
| 114 | +onBlur={()=>props.onChangeEnd()} |
| 115 | +/> |
| 116 | +</Wrapper> |
| 117 | +); |
| 118 | +}; |
| 119 | + |
| 120 | +exportconstTimeComp=(function(){ |
| 121 | +returnnewColumnTypeCompBuilder( |
| 122 | +childrenMap, |
| 123 | +(props,dispatch)=>{ |
| 124 | +inputFormat=props.inputFormat; |
| 125 | +constvalue=props.changeValue??getBaseValue(props,dispatch); |
| 126 | +return( |
| 127 | +<> |
| 128 | +{hasIcon(props.prefixIcon)&&( |
| 129 | +<span>{props.prefixIcon}</span> |
| 130 | +)} |
| 131 | +<span>{value}</span> |
| 132 | +{hasIcon(props.suffixIcon)&&( |
| 133 | +<span>{props.suffixIcon}</span> |
| 134 | +)} |
| 135 | +</> |
| 136 | +); |
| 137 | + |
| 138 | +}, |
| 139 | +(nodeValue)=>formatTime(nodeValue.text.value,nodeValue.format.value), |
| 140 | +getBaseValue |
| 141 | +) |
| 142 | +.setEditViewFn((props)=>( |
| 143 | +<TimeEdit |
| 144 | +value={props.value} |
| 145 | +onChange={props.onChange} |
| 146 | +onChangeEnd={props.onChangeEnd} |
| 147 | +inputFormat={inputFormat} |
| 148 | +/> |
| 149 | +)) |
| 150 | +.setPropertyViewFn((children)=>( |
| 151 | +<> |
| 152 | +{children.text.propertyView({ |
| 153 | +label:trans("table.columnValue"), |
| 154 | +tooltip:ColumnValueTooltip, |
| 155 | +})} |
| 156 | +{children.prefixIcon.propertyView({ |
| 157 | +label:trans("button.prefixIcon"), |
| 158 | +})} |
| 159 | +{children.suffixIcon.propertyView({ |
| 160 | +label:trans("button.suffixIcon"), |
| 161 | +})} |
| 162 | +{formatPropertyView({ children,placeholder:TIME_FORMAT})} |
| 163 | +</> |
| 164 | +)) |
| 165 | +.build(); |
| 166 | +})(); |