|
| 1 | +import{useState,useEffect}from"react"; |
| 2 | +import{ |
| 3 | +NameConfig, |
| 4 | +NameConfigPlaceHolder, |
| 5 | +NameConfigRequired, |
| 6 | +withExposingConfigs, |
| 7 | +}from"comps/generators/withExposing"; |
| 8 | +import{Section,sectionNames}from"lowcoder-design"; |
| 9 | +import{BoolControl}from"../../controls/boolControl"; |
| 10 | +import{AutoHeightControl}from"../../controls/autoHeightControl"; |
| 11 | +import{UICompBuilder}from"../../generators"; |
| 12 | +import{FormDataPropertyView}from"../formComp/formDataConstants"; |
| 13 | +import{ |
| 14 | +checkMentionListData, |
| 15 | +textInputChildren, |
| 16 | +}from"./textInputConstants"; |
| 17 | +import{ |
| 18 | +withMethodExposing, |
| 19 | +refMethods, |
| 20 | +}from"../../generators/withMethodExposing"; |
| 21 | +import{styleControl}from"comps/controls/styleControl"; |
| 22 | +importstyledfrom"styled-components"; |
| 23 | +import{ |
| 24 | +InputLikeStyle, |
| 25 | +InputLikeStyleType, |
| 26 | +}from"comps/controls/styleControlConstants"; |
| 27 | +import{ |
| 28 | +disabledPropertyView, |
| 29 | +hiddenPropertyView, |
| 30 | +maxLengthPropertyView, |
| 31 | +minLengthPropertyView, |
| 32 | +readOnlyPropertyView, |
| 33 | +requiredPropertyView, |
| 34 | +}from"comps/utils/propertyUtils"; |
| 35 | +import{booleanExposingStateControl}from"comps/controls/codeStateControl"; |
| 36 | +import{trans}from"i18n"; |
| 37 | +import{RefControl}from"comps/controls/refControl"; |
| 38 | +import{TextAreaRef}from"antd/lib/input/TextArea"; |
| 39 | +import{Mentions,ConfigProvider}from"antd"; |
| 40 | +import{blurMethod,focusWithOptions}from"comps/utils/methodUtils"; |
| 41 | +importtype{MentionsOptionProps}from"antd/es/mentions"; |
| 42 | +import{ |
| 43 | +textInputValidate, |
| 44 | +}from"../textInputComp/textInputConstants"; |
| 45 | +import{jsonControl}from"@lowcoder-ee/comps/controls/codeControl"; |
| 46 | +// 事件控制 |
| 47 | +import{ |
| 48 | +submitEvent, |
| 49 | +eventHandlerControl, |
| 50 | +mentionEvent, |
| 51 | +focusEvent, |
| 52 | +blurEvent, |
| 53 | +changeEvent |
| 54 | +}from"comps/controls/eventHandlerControl"; |
| 55 | + |
| 56 | +constWrapper=styled.div<{ |
| 57 | +$style:InputLikeStyleType; |
| 58 | +}>` |
| 59 | + height: 100%; |
| 60 | +
|
| 61 | + .ant-input-clear-icon { |
| 62 | + opacity: 0.45; |
| 63 | + color:${(props)=>props.$style.text}; |
| 64 | + top: 10px; |
| 65 | +
|
| 66 | + &:hover { |
| 67 | + opacity: 0.65; |
| 68 | + color:${(props)=>props.$style.text}; |
| 69 | + } |
| 70 | + } |
| 71 | +`; |
| 72 | + |
| 73 | +constEventOptions=[ |
| 74 | +focusEvent, |
| 75 | +blurEvent, |
| 76 | +changeEvent, |
| 77 | +mentionEvent, |
| 78 | +submitEvent, |
| 79 | +]asconst; |
| 80 | + |
| 81 | +letMentionTmpComp=(function(){ |
| 82 | +constchildrenMap={ |
| 83 | + ...textInputChildren, |
| 84 | +viewRef:RefControl<TextAreaRef>, |
| 85 | +allowClear:BoolControl, |
| 86 | +autoHeight:AutoHeightControl, |
| 87 | +style:styleControl(InputLikeStyle), |
| 88 | +mentionList:jsonControl(checkMentionListData,{ |
| 89 | +"@":["Li Lei","Han Meimei"], |
| 90 | +"#":["123","456","789"], |
| 91 | +}), |
| 92 | +onEvent:eventHandlerControl(EventOptions), |
| 93 | +invalid:booleanExposingStateControl("invalid"), |
| 94 | +}; |
| 95 | + |
| 96 | +returnnewUICompBuilder(childrenMap,(props)=>{ |
| 97 | +const{ mentionList}=props; |
| 98 | +const[validateState,setvalidateState]=useState({}); |
| 99 | +const[activationFlag,setActivationFlag]=useState(false); |
| 100 | +const[prefix,setPrefix]=useState<PrefixType>("@"); |
| 101 | +typePrefixType="@"|keyoftypeofmentionList; |
| 102 | + |
| 103 | +// 获取提及搜索关键字 |
| 104 | +constonSearch=(_:string,newPrefix:PrefixType)=>{ |
| 105 | +setPrefix(newPrefix); |
| 106 | +}; |
| 107 | +constonChange=(value:string)=>{ |
| 108 | +props.value.onChange(value); |
| 109 | +props.onEvent("change"); |
| 110 | +}; |
| 111 | + |
| 112 | +constonPressEnter=(e:any)=>{ |
| 113 | +if(e.shiftKey){ |
| 114 | +e.preventDefault(); |
| 115 | +props.onEvent("submit"); |
| 116 | +} |
| 117 | +}; |
| 118 | + |
| 119 | +constonSelect=(option:MentionsOptionProps)=>{ |
| 120 | +props.onEvent("mention"); |
| 121 | +}; |
| 122 | +constgetValidate=(value:any):""|"warning"|"error"|undefined=>{ |
| 123 | +if( |
| 124 | +value.hasOwnProperty("validateStatus")&& |
| 125 | +value["validateStatus"]==="error" |
| 126 | +) |
| 127 | +return"error"; |
| 128 | +return""; |
| 129 | +}; |
| 130 | + |
| 131 | +constgetTextInputValidate=()=>{ |
| 132 | +return{ |
| 133 | +value:{value:props.value.value}, |
| 134 | +required:props.required, |
| 135 | +minLength:props?.minLength??0, |
| 136 | +maxLength:props?.maxLength??0, |
| 137 | +validationType:props.validationType, |
| 138 | +regex:props.regex, |
| 139 | +customRule:props.customRule, |
| 140 | +}; |
| 141 | +}; |
| 142 | + |
| 143 | +useEffect(()=>{ |
| 144 | +if(activationFlag){ |
| 145 | +consttemp=textInputValidate(getTextInputValidate()); |
| 146 | +setvalidateState(temp); |
| 147 | +props.invalid.onChange(temp.validateStatus!==""); |
| 148 | +} |
| 149 | +},[ |
| 150 | +props.value.value, |
| 151 | +props.required, |
| 152 | +props?.minLength, |
| 153 | +props?.maxLength, |
| 154 | +props.validationType, |
| 155 | +props.regex, |
| 156 | +props.customRule, |
| 157 | +]); |
| 158 | +returnprops.label({ |
| 159 | +required:props.required, |
| 160 | +children:( |
| 161 | +<Wrapper$style={props.style}> |
| 162 | +<ConfigProvider |
| 163 | +theme={{ |
| 164 | +token:{ |
| 165 | +colorBgContainer:props.style.background, |
| 166 | +colorBorder:props.style.border, |
| 167 | +borderRadius:parseInt(props.style.radius), |
| 168 | +colorText:props.style.text, |
| 169 | +colorPrimary:props.style.accent, |
| 170 | +}, |
| 171 | +}} |
| 172 | +> |
| 173 | +<Mentions |
| 174 | +prefix={Object.keys(mentionList)} |
| 175 | +onFocus={()=>{ |
| 176 | +setActivationFlag(true); |
| 177 | +props.onEvent("focus"); |
| 178 | +}} |
| 179 | +onBlur={()=>props.onEvent("blur")} |
| 180 | +onPressEnter={onPressEnter} |
| 181 | +onSearch={onSearch} |
| 182 | +onChange={onChange} |
| 183 | +onSelect={onSelect} |
| 184 | +placeholder={props.placeholder} |
| 185 | +value={props.value.value} |
| 186 | +disabled={props.disabled} |
| 187 | +status={getValidate(validateState)} |
| 188 | +options={(mentionList[prefix]||[]).map((value:string)=>({ |
| 189 | +key:value, |
| 190 | + value, |
| 191 | +label:value, |
| 192 | +}))} |
| 193 | +autoSize={props.autoHeight} |
| 194 | +style={{height:"100%",maxHeight:"100%",resize:"none",padding:props.style.padding}} |
| 195 | +readOnly={props.readOnly} |
| 196 | +/> |
| 197 | +</ConfigProvider> |
| 198 | +</Wrapper> |
| 199 | +), |
| 200 | +style:props.style, |
| 201 | + ...validateState, |
| 202 | +}); |
| 203 | +}) |
| 204 | +.setPropertyViewFn((children)=>( |
| 205 | +<> |
| 206 | +<Sectionname={sectionNames.basic}> |
| 207 | +{children.mentionList.propertyView({ |
| 208 | +label:trans("mention.mentionList"), |
| 209 | +})} |
| 210 | +{children.value.propertyView({label:trans("prop.defaultValue")})} |
| 211 | +{children.placeholder.propertyView({ |
| 212 | +label:trans("prop.placeholder"), |
| 213 | +})} |
| 214 | +</Section> |
| 215 | +<FormDataPropertyView{...children}/> |
| 216 | +{children.label.getPropertyView()} |
| 217 | + |
| 218 | +<Sectionname={sectionNames.interaction}> |
| 219 | +{children.onEvent.getPropertyView()} |
| 220 | +{disabledPropertyView(children)} |
| 221 | +</Section> |
| 222 | + |
| 223 | +<Sectionname={sectionNames.advanced}> |
| 224 | +{readOnlyPropertyView(children)} |
| 225 | +</Section> |
| 226 | + |
| 227 | +<Sectionname={sectionNames.validation}> |
| 228 | +{requiredPropertyView(children)} |
| 229 | +{children.validationType.propertyView({ |
| 230 | +label:trans("prop.textType"), |
| 231 | +})} |
| 232 | +{minLengthPropertyView(children)} |
| 233 | +{maxLengthPropertyView(children)} |
| 234 | +{children.customRule.propertyView({})} |
| 235 | +</Section> |
| 236 | + |
| 237 | +<Sectionname={sectionNames.layout}> |
| 238 | +{children.autoHeight.getPropertyView()} |
| 239 | +{hiddenPropertyView(children)} |
| 240 | +</Section> |
| 241 | + |
| 242 | +<Sectionname={sectionNames.style}> |
| 243 | +{children.style.getPropertyView()} |
| 244 | +</Section> |
| 245 | +</> |
| 246 | +)) |
| 247 | +.build(); |
| 248 | +})(); |
| 249 | + |
| 250 | +MentionTmpComp=classextendsMentionTmpComp{ |
| 251 | +overrideautoHeight():boolean{ |
| 252 | +returnthis.children.autoHeight.getView(); |
| 253 | +} |
| 254 | +}; |
| 255 | + |
| 256 | +constTextareaTmp2Comp=withMethodExposing( |
| 257 | +MentionTmpComp, |
| 258 | +refMethods([focusWithOptions,blurMethod]) |
| 259 | +); |
| 260 | + |
| 261 | +exportconstMentionComp=withExposingConfigs(TextareaTmp2Comp,[ |
| 262 | +newNameConfig("value",trans("export.inputValueDesc")), |
| 263 | +NameConfigPlaceHolder, |
| 264 | +NameConfigRequired, |
| 265 | +newNameConfig("invalid",trans("export.invalidDesc")), |
| 266 | +newNameConfig("hidden",trans("export.hiddenDesc")), |
| 267 | +newNameConfig("disabled",trans("export.disabledDesc")), |
| 268 | +]); |