bj-web-components 0.2.27 → 0.2.28

package/dist/web/InputNumber/BInputNumber.js

@@ -1 +1,311 @@
-"use strict";const l=require("react/jsx-runtime"),s=require("react");;/* empty css                   */const Me=require("./hooks/useCursor.js"),Ue=require("./hooks/useFrame.js"),ke=require("./StepHandler.js"),u=require("./utils/decimal.js");function ae(N){if(N==null)return null;const i=u.getDecimal(N);return i.isInvalidate()?null:i}const Ke=s.forwardRef(function({value:i,defaultValue:Z,onChange:C,min:E,max:F,step:a=1,precision:D,disabled:M=!1,readOnly:U=!1,placeholder:fe,autoFocus:me,size:z="middle",status:B,bordered:be=!0,controls:k=!0,keyboard:de=!0,changeOnWheel:pe=!1,changeOnBlur:ge=!0,addonBefore:f,addonAfter:m,prefix:I,suffix:v,formatter:R,parser:V,decimalSeparator:b,onStep:K,onPressEnter:S,onFocus:$,onBlur:P,id:je,name:Ne,className:O,style:A},q){const H=s.useRef(null),[W,T]=s.useState(!1),c=s.useRef(!1),j=s.useRef(!1),x=s.useRef(!1),Y=s.useRef(""),[r,ee]=s.useState(()=>u.getDecimal(i??Z)),De=e=>{i===void 0&&ee(e)},G=s.useCallback((e,t)=>{if(!t)return D!==void 0&&D>=0?D:Math.max(u.getNumberPrecision(e),u.getNumberPrecision(a))},[D,a]),J=s.useCallback(e=>{if(V)return V(e);let t=e;return b&&(t=t.replace(b,".")),t.replace(/[^\w.-]+/g,"")},[V,b]),te=s.useCallback((e,t)=>{if(R)return R(e,{userTyping:!!t,input:Y.current});let n=e;if(!t){const o=G(n,t);u.validateNumber(n)&&(b||(o??-1)>=0)&&(n=u.toFixed(n,b||".",o))}return n},[R,G,b]),[_,ne]=s.useState(()=>{const e=Z??i;return r.isInvalidate()&&["string","number"].includes(typeof e)?e==null||Number.isNaN(e)?"":String(e):te(r.toString(),!1)});Y.current=_;const h=(e,t)=>{ne(te(e.isInvalidate()?e.toString(!1):e.toString(!t),t))},d=s.useMemo(()=>ae(F),[F]),p=s.useMemo(()=>ae(E),[E]),re=s.useMemo(()=>!d||r.isInvalidate()?!1:d.lessEquals(r),[d,r]),ue=s.useMemo(()=>!p||r.isInvalidate()?!1:r.lessEquals(p),[p,r]),[Ie]=Me(H.current,W),se=e=>d&&!e.lessEquals(d)?d:p&&!p.lessEquals(e)?p:null,L=e=>!se(e),w=(e,t)=>{let n=e,o=L(n)||n.isEmpty();if(!n.isEmpty()&&!t&&(n=se(n)||n,o=!0),!U&&!M&&o){const g=n.toString(),y=G(g,t);return y!==void 0&&y>=0&&(n=u.getDecimal(u.toFixed(g,".",y)),L(n)||(n=u.getDecimal(u.toFixed(g,".",y,!0)))),n.equals(r)||(De(n),C==null||C(n.isEmpty()?null:n.toNumber()),i===void 0&&h(n,t)),n}return r},ve=Ue(),Q=e=>{if(Ie(),Y.current=e,ne(e),!j.current){const t=J(e),n=u.getDecimal(t);n.isNaN()||w(n,!0)}ve(()=>{const t=V?e:e.replace(/。/g,".");t!==e&&Q(t)})},Re=()=>{j.current=!0},Ve=e=>{j.current=!1,Q(e.target.value)},qe=e=>Q(e.target.value),X=e=>{var g;if(e&&re||!e&&ue)return;c.current=!1;let t=u.getDecimal(x.current?u.getDecupleSteps(a):a);e||(t=t.negate());const n=(r.isInvalidate()?u.getDecimal(0):r).add(t.toString()),o=w(n,!1);K==null||K(o.toNumber(),{offset:x.current?u.getDecupleSteps(a):a,type:e?"up":"down"}),(g=H.current)==null||g.focus()},ie=e=>{const t=u.getDecimal(J(_));let n;t.isNaN()?n=w(r,e):n=w(t,e),i!==void 0?h(r,!1):n.isNaN()||h(n,!1)},xe=e=>{const{key:t,shiftKey:n}=e;c.current=!0,x.current=n,t==="Enter"&&(j.current||(c.current=!1),ie(!1),S==null||S(e)),de&&!j.current&&(t==="ArrowUp"||t==="ArrowDown")&&(X(t==="ArrowUp"),e.preventDefault())},_e=()=>{c.current=!1,x.current=!1},he=e=>{T(!0),$==null||$(e)},we=e=>{ge&&ie(!1),T(!1),c.current=!1,P==null||P(e)},le=s.useRef(i);if(le.current!==i){le.current=i;const e=u.getDecimal(i);if(!e.equals(r)){ee(e);const t=u.getDecimal(J(_));(!e.equals(t)||!c.current||R)&&h(e,c.current)}}const ye=e=>{H.current=e,typeof q=="function"?q(e):q&&(q.current=e)},ce=!!k,Ce=typeof k=="object"?k.icon:void 0,Ee=!r.isInvalidate()&&!L(r),Fe=["bj-input-number",`bj-input-number--${z}`,W&&"bj-input-number--focused",M&&"bj-input-number--disabled",U&&"bj-input-number--readonly",!be&&"bj-input-number--borderless",B&&`bj-input-number--${B}`,Ee&&"bj-input-number--out-of-range",ce&&"bj-input-number--with-controls",f&&"bj-input-number--group-left",m&&"bj-input-number--group-right"].filter(Boolean).join(" "),oe=l.jsxs("div",{className:[Fe,!(f||m||I||v)&&O].filter(Boolean).join(" "),style:f||m||I||v?void 0:A,onKeyDown:xe,onKeyUp:_e,children:[I&&l.jsx("span",{className:"bj-input-number__prefix",children:I}),l.jsx("div",{className:"bj-input-number__input-wrap",children:l.jsx("input",{ref:ye,id:je,name:Ne,className:"bj-input-number__input",autoComplete:"off",role:"spinbutton","aria-valuemin":E,"aria-valuemax":F,"aria-valuenow":r.isInvalidate()?void 0:r.toNumber(),value:_,placeholder:fe,disabled:M,readOnly:U,autoFocus:me,onChange:qe,onFocus:he,onBlur:we,onCompositionStart:Re,onCompositionEnd:Ve,onWheel:pe?e=>{W&&X(e.deltaY<0)}:void 0})}),v&&l.jsx("span",{className:"bj-input-number__suffix",children:v}),ce&&l.jsx(ke,{icon:Ce,upDisabled:re,downDisabled:ue,onStep:X})]});return!f&&!m?oe:l.jsxs("div",{className:["bj-input-number-group",`bj-input-number-group--${z}`,O].filter(Boolean).join(" "),style:A,children:[f&&l.jsx("div",{className:"bj-input-number-group__addon",children:f}),oe,m&&l.jsx("div",{className:"bj-input-number-group__addon",children:m})]})});module.exports=Ke;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css                   */
+const useCursor = require("./hooks/useCursor.js");
+const useFrame = require("./hooks/useFrame.js");
+const StepHandler = require("./StepHandler.js");
+const decimal = require("./utils/decimal.js");
+function getDecimalIfValid(value) {
+  if (value === void 0 || value === null) return null;
+  const decimal$1 = decimal.getDecimal(value);
+  return decimal$1.isInvalidate() ? null : decimal$1;
+}
+const BInputNumber = react.forwardRef(function BInputNumber2({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  disabled = false,
+  readOnly = false,
+  placeholder,
+  autoFocus,
+  size = "middle",
+  status,
+  bordered = true,
+  controls = true,
+  keyboard = true,
+  changeOnWheel = false,
+  changeOnBlur = true,
+  addonBefore,
+  addonAfter,
+  prefix,
+  suffix,
+  formatter,
+  parser,
+  decimalSeparator,
+  onStep,
+  onPressEnter,
+  onFocus,
+  onBlur,
+  id,
+  name,
+  className,
+  style
+}, ref) {
+  const inputRef = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  const userTypingRef = react.useRef(false);
+  const compositionRef = react.useRef(false);
+  const shiftKeyRef = react.useRef(false);
+  const inputValueRef = react.useRef("");
+  const [decimalValue, setDecimalValue] = react.useState(() => decimal.getDecimal(value ?? defaultValue));
+  const setUncontrolledDecimalValue = (next) => {
+    if (value === void 0) setDecimalValue(next);
+  };
+  const getPrecision = react.useCallback(
+    (numStr, userTyping) => {
+      if (userTyping) return void 0;
+      if (precision !== void 0 && precision >= 0) return precision;
+      return Math.max(decimal.getNumberPrecision(numStr), decimal.getNumberPrecision(step));
+    },
+    [precision, step]
+  );
+  const mergedParser = react.useCallback(
+    (num) => {
+      if (parser) return parser(num);
+      let parsedStr = num;
+      if (decimalSeparator) parsedStr = parsedStr.replace(decimalSeparator, ".");
+      return parsedStr.replace(/[^\w.-]+/g, "");
+    },
+    [parser, decimalSeparator]
+  );
+  const mergedFormatter = react.useCallback(
+    (number, userTyping) => {
+      if (formatter) return formatter(number, { userTyping: !!userTyping, input: inputValueRef.current });
+      let str = number;
+      if (!userTyping) {
+        const mergedPrecision = getPrecision(str, userTyping);
+        if (decimal.validateNumber(str) && (decimalSeparator || (mergedPrecision ?? -1) >= 0)) {
+          str = decimal.toFixed(str, decimalSeparator || ".", mergedPrecision);
+        }
+      }
+      return str;
+    },
+    [formatter, getPrecision, decimalSeparator]
+  );
+  const [inputValue, setInternalInputValue] = react.useState(() => {
+    const initValue = defaultValue ?? value;
+    if (decimalValue.isInvalidate() && ["string", "number"].includes(typeof initValue)) {
+      return initValue === void 0 || initValue === null || Number.isNaN(initValue) ? "" : String(initValue);
+    }
+    return mergedFormatter(decimalValue.toString(), false);
+  });
+  inputValueRef.current = inputValue;
+  const setInputValue = (newValue, userTyping) => {
+    setInternalInputValue(
+      mergedFormatter(newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping), userTyping)
+    );
+  };
+  const maxDecimal = react.useMemo(() => getDecimalIfValid(max), [max]);
+  const minDecimal = react.useMemo(() => getDecimalIfValid(min), [min]);
+  const upDisabled = react.useMemo(() => {
+    if (!maxDecimal || decimalValue.isInvalidate()) return false;
+    return maxDecimal.lessEquals(decimalValue);
+  }, [maxDecimal, decimalValue]);
+  const downDisabled = react.useMemo(() => {
+    if (!minDecimal || decimalValue.isInvalidate()) return false;
+    return decimalValue.lessEquals(minDecimal);
+  }, [minDecimal, decimalValue]);
+  const [recordCursor] = useCursor(inputRef.current, focused);
+  const getRangeValue = (target) => {
+    if (maxDecimal && !target.lessEquals(maxDecimal)) return maxDecimal;
+    if (minDecimal && !minDecimal.lessEquals(target)) return minDecimal;
+    return null;
+  };
+  const isInRange = (target) => !getRangeValue(target);
+  const triggerValueUpdate = (newValue, userTyping) => {
+    let updateValue = newValue;
+    let isRangeValidate = isInRange(updateValue) || updateValue.isEmpty();
+    if (!updateValue.isEmpty() && !userTyping) {
+      updateValue = getRangeValue(updateValue) || updateValue;
+      isRangeValidate = true;
+    }
+    if (!readOnly && !disabled && isRangeValidate) {
+      const numStr = updateValue.toString();
+      const mergedPrecision = getPrecision(numStr, userTyping);
+      if (mergedPrecision !== void 0 && mergedPrecision >= 0) {
+        updateValue = decimal.getDecimal(decimal.toFixed(numStr, ".", mergedPrecision));
+        if (!isInRange(updateValue)) {
+          updateValue = decimal.getDecimal(decimal.toFixed(numStr, ".", mergedPrecision, true));
+        }
+      }
+      if (!updateValue.equals(decimalValue)) {
+        setUncontrolledDecimalValue(updateValue);
+        onChange == null ? void 0 : onChange(updateValue.isEmpty() ? null : updateValue.toNumber());
+        if (value === void 0) setInputValue(updateValue, userTyping);
+      }
+      return updateValue;
+    }
+    return decimalValue;
+  };
+  const onNextFrame = useFrame();
+  const collectInputValue = (inputStr) => {
+    recordCursor();
+    inputValueRef.current = inputStr;
+    setInternalInputValue(inputStr);
+    if (!compositionRef.current) {
+      const finalValue = mergedParser(inputStr);
+      const finalDecimal = decimal.getDecimal(finalValue);
+      if (!finalDecimal.isNaN()) triggerValueUpdate(finalDecimal, true);
+    }
+    onNextFrame(() => {
+      const nextInputStr = parser ? inputStr : inputStr.replace(/。/g, ".");
+      if (nextInputStr !== inputStr) collectInputValue(nextInputStr);
+    });
+  };
+  const onCompositionStart = () => {
+    compositionRef.current = true;
+  };
+  const onCompositionEnd = (e) => {
+    compositionRef.current = false;
+    collectInputValue(e.target.value);
+  };
+  const onInternalInput = (e) => collectInputValue(e.target.value);
+  const onInternalStep = (up) => {
+    var _a;
+    if (up && upDisabled || !up && downDisabled) return;
+    userTypingRef.current = false;
+    let stepDecimal = decimal.getDecimal(shiftKeyRef.current ? decimal.getDecupleSteps(step) : step);
+    if (!up) stepDecimal = stepDecimal.negate();
+    const target = (decimalValue.isInvalidate() ? decimal.getDecimal(0) : decimalValue).add(stepDecimal.toString());
+    const updatedValue = triggerValueUpdate(target, false);
+    onStep == null ? void 0 : onStep(updatedValue.toNumber(), { offset: shiftKeyRef.current ? decimal.getDecupleSteps(step) : step, type: up ? "up" : "down" });
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const flushInputValue = (userTyping) => {
+    const parsedValue = decimal.getDecimal(mergedParser(inputValue));
+    let formatValue;
+    if (!parsedValue.isNaN()) {
+      formatValue = triggerValueUpdate(parsedValue, userTyping);
+    } else {
+      formatValue = triggerValueUpdate(decimalValue, userTyping);
+    }
+    if (value !== void 0) {
+      setInputValue(decimalValue, false);
+    } else if (!formatValue.isNaN()) {
+      setInputValue(formatValue, false);
+    }
+  };
+  const onKeyDown = (event) => {
+    const { key, shiftKey } = event;
+    userTypingRef.current = true;
+    shiftKeyRef.current = shiftKey;
+    if (key === "Enter") {
+      if (!compositionRef.current) userTypingRef.current = false;
+      flushInputValue(false);
+      onPressEnter == null ? void 0 : onPressEnter(event);
+    }
+    if (!keyboard) return;
+    if (!compositionRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+      onInternalStep(key === "ArrowUp");
+      event.preventDefault();
+    }
+  };
+  const onKeyUp = () => {
+    userTypingRef.current = false;
+    shiftKeyRef.current = false;
+  };
+  const onInternalFocus = (e) => {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(e);
+  };
+  const onInternalBlur = (e) => {
+    if (changeOnBlur) flushInputValue(false);
+    setFocused(false);
+    userTypingRef.current = false;
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const prevValueRef = react.useRef(value);
+  if (prevValueRef.current !== value) {
+    prevValueRef.current = value;
+    const newValue = decimal.getDecimal(value);
+    if (!newValue.equals(decimalValue)) {
+      setDecimalValue(newValue);
+      const currentParsedValue = decimal.getDecimal(mergedParser(inputValue));
+      if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {
+        setInputValue(newValue, userTypingRef.current);
+      }
+    }
+  }
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const controlsEnabled = !!controls;
+  const controlsIcon = typeof controls === "object" ? controls.icon : void 0;
+  const outOfRange = !decimalValue.isInvalidate() && !isInRange(decimalValue);
+  const rootCls = [
+    "bj-input-number",
+    `bj-input-number--${size}`,
+    focused && "bj-input-number--focused",
+    disabled && "bj-input-number--disabled",
+    readOnly && "bj-input-number--readonly",
+    !bordered && "bj-input-number--borderless",
+    status && `bj-input-number--${status}`,
+    outOfRange && "bj-input-number--out-of-range",
+    controlsEnabled && "bj-input-number--with-controls",
+    addonBefore && "bj-input-number--group-left",
+    addonAfter && "bj-input-number--group-right"
+  ].filter(Boolean).join(" ");
+  const numberBox = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [rootCls, !(addonBefore || addonAfter || prefix || suffix) && className].filter(Boolean).join(" "),
+      style: !(addonBefore || addonAfter || prefix || suffix) ? style : void 0,
+      onKeyDown,
+      onKeyUp,
+      children: [
+        prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bj-input-number__prefix", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bj-input-number__input-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: setRefs,
+            id,
+            name,
+            className: "bj-input-number__input",
+            autoComplete: "off",
+            role: "spinbutton",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": decimalValue.isInvalidate() ? void 0 : decimalValue.toNumber(),
+            value: inputValue,
+            placeholder,
+            disabled,
+            readOnly,
+            autoFocus,
+            onChange: onInternalInput,
+            onFocus: onInternalFocus,
+            onBlur: onInternalBlur,
+            onCompositionStart,
+            onCompositionEnd,
+            onWheel: changeOnWheel ? (e) => {
+              if (!focused) return;
+              onInternalStep(e.deltaY < 0);
+            } : void 0
+          }
+        ) }),
+        suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bj-input-number__suffix", children: suffix }),
+        controlsEnabled && /* @__PURE__ */ jsxRuntime.jsx(StepHandler, { icon: controlsIcon, upDisabled, downDisabled, onStep: onInternalStep })
+      ]
+    }
+  );
+  if (!addonBefore && !addonAfter) return numberBox;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["bj-input-number-group", `bj-input-number-group--${size}`, className].filter(Boolean).join(" "),
+      style,
+      children: [
+        addonBefore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bj-input-number-group__addon", children: addonBefore }),
+        numberBox,
+        addonAfter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bj-input-number-group__addon", children: addonAfter })
+      ]
+    }
+  );
+});
+module.exports = BInputNumber;