@chief-editor/ui/es/components/input-number/InputNumberContent.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,s=arguments.length;n<s;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var n={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(n[s[r]]=e[s[r]])}return n};import{Down,Up}from"@byte-design/icons";import{AxisType,useDownStep,usePrecisionValue,useUpStep}from"@rc-hooks/region";import{useRefCallback,useRefGetter}from"@rc-hooks/use";import{classnames,pick}from"@co-hooks/util";import React,{useCallback,useImperativeHandle,useRef,useState}from"react";import{useInputAddOn}from"../input/Input";import{usePrefixCls}from"../../hooks";import{INPUT_COMMON_ATTRS}from"../input-wrapper/const";function preventDefault(e){e.preventDefault()}export function InputNumberContent(e){var t=e.className,n=e.style,s=e.disabled,r=void 0!==s&&s,u=e.hideButton,o=void 0===u||u,a=e.format,i=e.parse,l=e.prefix,c=e.suffix,p=e.onFocus,f=e.onBlur,d=e.needGrouped,m=void 0===d||d,b=e.forwardRef,C=__rest(e,["className","style","disabled","hideButton","format","parse","prefix","suffix","onFocus","onBlur","needGrouped","forwardRef"]),O=usePrecisionValue("end",AxisType.HORIZONTAL,a,i),y=O[0],x=O[1],v=O[2],R=useState(!1),k=R[0],_=R[1],h=useUpStep("end",AxisType.HORIZONTAL),g=h[0],w=h[1],N=useDownStep("end",AxisType.HORIZONTAL),P=N[0],I=N[1],T=useRefGetter(r),A=useRefCallback(f),D=useRefCallback(p),S=useRef(null);useImperativeHandle(b,(function(){var e=S.current;return{focus:function(){return e.focus()},blur:function(){return e.blur()},dom:e}}));var E=useCallback((function(){T()||w()}),[]),j=useCallback((function(){T()||I()}),[]),M=useCallback((function(e){T()||(38===e.keyCode?w():40===e.keyCode&&I())}),[]),U=useCallback((function(e){_(!0),D(e)}),[]),B=useCallback((function(e){v(),_(!1),A(e)}),[]),H=useCallback((function(e){return x(e.target.value)}),[]),G=useInputAddOn("input-prefix",l),F=useInputAddOn("input-suffix",c),L=usePrefixCls("can-input-grouped",{focus:k}),Z=classnames(usePrefixCls("input-number",{focus:k,disabled:r,"add-prefix":!!l,"add-suffix":!!c}),t,m?L:""),V=usePrefixCls("input-number-input"),K=usePrefixCls("input-number-controls",{hide:o}),q=usePrefixCls("input-number-controls-btn",{up:!0,disabled:g}),z=usePrefixCls("input-number-controls-btn",{down:!0,disabled:P}),J=pick(C,INPUT_COMMON_ATTRS),Q=J[0],W=J[1];return React.createElement("div",__assign({className:Z,style:n},W,{onKeyDown:M}),G,React.createElement("input",__assign({},Q,{type:"text",className:V,disabled:r,value:y,onBlur:B,onFocus:U,onChange:H,ref:S})),React.createElement("div",{className:K},React.createElement("span",{className:q,onClick:E,onMouseDown:preventDefault},React.createElement(Up,null)),React.createElement("span",{className:z,onClick:j,onMouseDown:preventDefault},React.createElement(Down,null))),F)}