@chief-editor/ui/es/components/util/SelectInputWrapper.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,a=1,n=arguments.length;a<n;a++)for(var r in t=arguments[a])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(a[n[r]]=e[n[r]])}return a};import{CloseOne}from"@byte-design/icons";import{HotKeyContext,useCreateHotKey}from"@rc-hooks/hotkey";import{useRefCallback,useToggle,useUpdate}from"@rc-hooks/use";import{classnames,isKorean}from"@co-hooks/util";import React,{memo,useCallback,useEffect,useRef}from"react";import{useLocale,usePrefixCls}from"../../hooks";import{Tag}from"../tag";import{SelectHotKey}from"./SelectHotKey";var SelectInputWrapperComponent=memo((function(e){var t=useLocale("select.placeholder"),a=e.autoFocusAfterShow,n=void 0===a||a,r=e.className,l=e.icon,o=e.popperInput,s=void 0!==o&&o,c=e.inputSize,i=e.keyword,u=void 0===i?"":i,p=e.placeholder,f=void 0===p?t:p,m=e.datasource,d=void 0===m?[]:m,v=e.show,C=void 0!==v&&v,h=e.multiple,g=void 0!==h&&h,b=e.disabled,y=void 0!==b&&b,R=e.readonly,k=void 0!==R&&R,E=e.writeable,w=void 0!==E&&E,x=e.onCloseItem,O=e.onChange,P=e.forwardedRef,S=e.width,_=e.renderContent,N=e.clearable,H=void 0!==N&&N,I=e.onHide,K=e.onClear,j=e.renderSelectedName,T=e.onValueChange,W=e.hotKeyHandlers,A=__rest(e,["autoFocusAfterShow","className","icon","popperInput","inputSize","keyword","placeholder","datasource","show","multiple","disabled","readonly","writeable","onCloseItem","onChange","forwardedRef","width","renderContent","clearable","onHide","onClear","renderSelectedName","onValueChange","hotKeyHandlers"]),F=useRef(null),L=useRef(null),U=useRefCallback(I),z=useRefCallback(x),M=useRefCallback(K),V=useRef(!1),q=useRefCallback(O),B=useRefCallback(T),D=useUpdate(),G=useRef(u),J=w?F:L,Q=useCreateHotKey(J);V.current||u===G.current||(G.current=u);var X=useCallback((function(e){y||k||z(e)}),[y,k]),Y=useToggle(!1),Z=Y[0],$=Y[1],ee=Y[2],te=useCallback((function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),M()}),[]),ae=function(){var e;y||k||!n||null===(e=J.current)||void 0===e||e.focus()},ne=function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},re=useCallback((function(){s&&U(),ae()}),[s]),le=useCallback((function(e){G.current=e.target.value,V.current?D():(q(e),B(e.target.value))}),[]),oe=useCallback((function(e){var t=e.currentTarget.value;if(G.current=t,"compositionend"===e.type)V.current=!1,q(e),B(t);else{var a=t[t.length-1]||"";V.current=!isKorean(a)}}),[]),se=classnames(usePrefixCls("select-input-wrapper",{"popover-input":s,disabled:y,readonly:k}),r),ce=usePrefixCls("select-input-content-wrapper"),ie=usePrefixCls("select-input-inner",{simple:!g,single:!s&&d.length<=1}),ue=usePrefixCls("select-input"),pe=usePrefixCls("select-input-icon"),fe=usePrefixCls("select-tip"),me=usePrefixCls("select-value");useEffect((function(){w&&(C?ae():function(){var e;n&&(null===(e=J.current)||void 0===e||e.blur())}())}));var de;return React.createElement("div",__assign({},A,{ref:P,className:se,onClick:re,onMouseEnter:$,onMouseLeave:ee,style:{width:null!=S?S:c?c.width+"px":void 0}}),React.createElement(HotKeyContext.Provider,{value:Q},React.createElement(SelectHotKey,{focusableElementRef:J,handlers:W})),React.createElement("div",{className:ue,ref:L,tabIndex:0},!s&&d.length>1&&React.createElement("span",{className:fe},d.length)),React.createElement("div",{className:ce},React.createElement("div",{className:ie},React.createElement("span",{className:pe},!y&&!k&&H&&Z&&(_||d.length||w)?React.createElement(CloseOne,{theme:"filled",onClick:te}):l),_?_(s):w?(de=20+16*(G.current&&G.current.toString().length||0),g?React.createElement(React.Fragment,null,d.map((function(e){return React.createElement(Tag,{onClick:ne,fill:!0,key:e.value,closeable:!(y||k),onClose:function(){return X(e)}},j?j(e):e.label)})),React.createElement("input",{ref:F,key:"multi-input-value",value:u,onChange:O,className:me,readOnly:y||k||!O,style:{width:de+"px",maxWidth:"100%",verticalAlign:"top"}})):React.createElement("input",{ref:F,value:G.current,onChange:le,placeholder:f,className:me,readOnly:y||k||!O,onCompositionStart:oe,onCompositionUpdate:oe,onCompositionEnd:oe})):g&&d.length?d.map((function(e,t){return React.createElement(Tag,{onClick:ne,fill:!0,className:t>1?"new-line":"",key:e.value,closeable:!(y||k),onClose:function(){return X(e)}},React.createElement("span",{className:"tag-content"},j?j(e):e.label))})):React.createElement("input",{placeholder:f,disabled:y,readOnly:!0,className:me,value:d[0]?j?j(d[0]):d[0].label||"":u}))))}));export var SelectInputWrapper=React.forwardRef((function(e,t){return React.createElement(SelectInputWrapperComponent,__assign({},e,{forwardedRef:t}))}));