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

UI Component for chief editor

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