@antsoo-lib/components 0.1.2 → 0.1.4

package/src/input-number/src/InputNumber.tsx

@@ -0,0 +1,593 @@
+// base rc-input-number@7.3.4
+import type { HTMLAttributes } from 'vue'
+import { computed, defineComponent, shallowRef, watch } from 'vue'
+
+import type { ChangeEvent, KeyboardEventHandler } from '../../_util/EventInterface'
+import KeyCode from '../../_util/KeyCode'
+import classNames from '../../_util/classNames'
+import { booleanType, functionType, someType, stringType } from '../../_util/type'
+import type { CustomSlotsType } from '../../_util/type'
+import StepHandler from './StepHandler'
+import useCursor from './hooks/useCursor'
+import useFrame from './hooks/useFrame'
+import type { DecimalClass, ValueType } from './utils/MiniDecimal'
+import getMiniDecimal, { toFixed } from './utils/MiniDecimal'
+import { getNumberPrecision, num2str, validateNumber } from './utils/numberUtil'
+
+/**
+ * We support `stringMode` which need handle correct type when user call in onChange
+ * format max or min value
+ * 1. if isInvalid return null
+ * 2. if precision is undefined, return decimal
+ * 3. format with precision
+ *    I. if max > 0, round down with precision. Example: max= 3.5, precision=0  afterFormat: 3
+ *    II. if max < 0, round up with precision. Example: max= -3.5, precision=0  afterFormat: -4
+ *    III. if min > 0, round up with precision. Example: min= 3.5, precision=0  afterFormat: 4
+ *    IV. if min < 0, round down with precision. Example: max= -3.5, precision=0  afterFormat: -3
+ */
+const getDecimalValue = (stringMode: boolean, decimalValue: DecimalClass) => {
+  if (stringMode || decimalValue.isEmpty()) {
+    return decimalValue.toString()
+  }
+
+  return decimalValue.toNumber()
+}
+const getDecimalIfValidate = (value: ValueType) => {
+  const decimal = getMiniDecimal(value)
+  return decimal.isInvalidate() ? null : decimal
+}
+
+export const inputNumberProps = () => ({
+  /** value will show as string */
+  stringMode: booleanType(),
+
+  defaultValue: someType<ValueType>([String, Number]),
+  value: someType<ValueType>([String, Number]),
+
+  prefixCls: stringType<string>(),
+  min: someType<ValueType>([String, Number]),
+  max: someType<ValueType>([String, Number]),
+  step: someType<ValueType>([String, Number], 1),
+  tabindex: Number,
+  controls: booleanType(true),
+  readonly: booleanType(),
+  disabled: booleanType(),
+  autofocus: booleanType(),
+  keyboard: booleanType(true),
+
+  /** Parse display value to validate number */
+  parser: functionType<(displayValue: string | undefined) => ValueType>(),
+  /** Transform `value` to display value show in input */
+  formatter:
+    functionType<
+      (value: ValueType | undefined, info: { userTyping: boolean; input: string }) => string
+    >(),
+  /** Syntactic sugar of `formatter`. Config precision of display. */
+  precision: Number,
+  /** Syntactic sugar of `formatter`. Config decimal separator of display. */
+  decimalSeparator: String,
+
+  onInput: functionType<(text: string) => void>(),
+  onChange: functionType<(value: ValueType) => void>(),
+  onPressEnter: functionType<KeyboardEventHandler>(),
+
+  onStep:
+    functionType<(value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void>(),
+  onBlur: functionType<(e: FocusEvent) => void>(),
+  onFocus: functionType<(e: FocusEvent) => void>(),
+})
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'InnerInputNumber',
+  inheritAttrs: false,
+  props: {
+    ...inputNumberProps(),
+    lazy: Boolean,
+  },
+  slots: Object as CustomSlotsType<{
+    upHandler: any
+    downHandler: any
+    default: any
+  }>,
+  setup(props, { attrs, slots, emit, expose }) {
+    const inputRef = shallowRef<HTMLInputElement>()
+    const focus = shallowRef(false)
+    const userTypingRef = shallowRef(false)
+    const compositionRef = shallowRef(false)
+    const decimalValue = shallowRef(getMiniDecimal(props.value))
+
+    function setUncontrolledDecimalValue(newDecimal: DecimalClass) {
+      if (props.value === undefined) {
+        decimalValue.value = newDecimal
+      }
+    }
+
+    // ====================== Parser & Formatter ======================
+    /**
+     * `precision` is used for formatter & onChange.
+     * It will auto generate by `value` & `step`.
+     * But it will not block user typing.
+     *
+     * Note: Auto generate `precision` is used for legacy logic.
+     * We should remove this since we already support high precision with BigInt.
+     *
+     * @param number  Provide which number should calculate precision
+     * @param userTyping  Change by user typing
+     */
+    const getPrecision = (numStr: string, userTyping: boolean) => {
+      if (userTyping) {
+        return undefined
+      }
+
+      if (props.precision >= 0) {
+        return props.precision
+      }
+
+      return Math.max(getNumberPrecision(numStr), getNumberPrecision(props.step))
+    }
+
+    // >>> Parser
+    const mergedParser = (num: string | number) => {
+      const numStr = String(num)
+
+      if (props.parser) {
+        return props.parser(numStr)
+      }
+
+      let parsedStr = numStr
+      if (props.decimalSeparator) {
+        parsedStr = parsedStr.replace(props.decimalSeparator, '.')
+      }
+
+      // [Legacy] We still support auto convert `$ 123,456` to `123456`
+      return parsedStr.replace(/[^\w.-]+/g, '')
+    }
+
+    // >>> Formatter
+    const inputValue = shallowRef<string | number>('')
+
+    const mergedFormatter = (number: string, userTyping: boolean) => {
+      if (props.formatter) {
+        return props.formatter(number, { userTyping, input: String(inputValue.value) })
+      }
+
+      let str = typeof number === 'number' ? num2str(number) : number
+
+      // User typing will not auto format with precision directly
+      if (!userTyping) {
+        const mergedPrecision = getPrecision(str, userTyping)
+
+        if (validateNumber(str) && (props.decimalSeparator || mergedPrecision >= 0)) {
+          // Separator
+          const separatorStr = props.decimalSeparator || '.'
+
+          str = toFixed(str, separatorStr, mergedPrecision)
+        }
+      }
+
+      return str
+    }
+    // ========================== InputValue ==========================
+    /**
+     * Input text value control
+     *
+     * User can not update input content directly. It update with follow rules by priority:
+     *  1. controlled `value` changed
+     *    [SPECIAL] Typing like `1.` should not immediately convert to `1`
+     *  2. User typing with format (not precision)
+     *  3. Blur or Enter trigger revalidate
+     */
+    const initValue = (() => {
+      const initValue = props.value
+      if (decimalValue.value.isInvalidate() && ['string', 'number'].includes(typeof initValue)) {
+        return Number.isNaN(initValue) ? '' : initValue
+      }
+      return mergedFormatter(decimalValue.value.toString(), false)
+    })()
+    inputValue.value = initValue
+
+    // Should always be string
+    function setInputValue(newValue: DecimalClass, userTyping: boolean) {
+      inputValue.value = mergedFormatter(
+        // Invalidate number is sometime passed by external control, we should let it go
+        // Otherwise is controlled by internal interactive logic which check by userTyping
+        // You can ref 'show limited value when input is not focused' test for more info.
+        newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping),
+        userTyping,
+      )
+    }
+
+    // >>> Max & Min limit
+    const maxDecimal = computed(() => getDecimalIfValidate(props.max))
+    const minDecimal = computed(() => getDecimalIfValidate(props.min))
+
+    const upDisabled = computed(() => {
+      if (!maxDecimal.value || !decimalValue.value || decimalValue.value.isInvalidate()) {
+        return false
+      }
+
+      return maxDecimal.value.lessEquals(decimalValue.value)
+    })
+
+    const downDisabled = computed(() => {
+      if (!minDecimal.value || !decimalValue.value || decimalValue.value.isInvalidate()) {
+        return false
+      }
+
+      return decimalValue.value.lessEquals(minDecimal.value)
+    })
+
+    // Cursor controller
+    const [recordCursor, restoreCursor] = useCursor(inputRef, focus)
+
+    // ============================= Data =============================
+    /**
+     * Find target value closet within range.
+     * e.g. [11, 28]:
+     *    3  => 11
+     *    23 => 23
+     *    99 => 28
+     */
+    const getRangeValue = (target: DecimalClass) => {
+      // target > max
+      if (maxDecimal.value && !target.lessEquals(maxDecimal.value)) {
+        return maxDecimal.value
+      }
+
+      // target < min
+      if (minDecimal.value && !minDecimal.value.lessEquals(target)) {
+        return minDecimal.value
+      }
+
+      return null
+    }
+
+    /**
+     * Check value is in [min, max] range
+     */
+    const isInRange = (target: DecimalClass) => !getRangeValue(target)
+
+    /**
+     * Trigger `onChange` if value validated and not equals of origin.
+     * Return the value that re-align in range.
+     */
+    const triggerValueUpdate = (newValue: DecimalClass, userTyping: boolean): DecimalClass => {
+      let updateValue = newValue
+
+      let isRangeValidate = isInRange(updateValue) || updateValue.isEmpty()
+
+      // Skip align value when trigger value is empty.
+      // We just trigger onChange(null)
+      // This should not block user typing
+      if (!updateValue.isEmpty() && !userTyping) {
+        // Revert value in range if needed
+        updateValue = getRangeValue(updateValue) || updateValue
+        isRangeValidate = true
+      }
+
+      if (!props.readonly && !props.disabled && isRangeValidate) {
+        const numStr = updateValue.toString()
+        const mergedPrecision = getPrecision(numStr, userTyping)
+        if (mergedPrecision >= 0) {
+          updateValue = getMiniDecimal(toFixed(numStr, '.', mergedPrecision))
+        }
+
+        // Trigger event
+        if (!updateValue.equals(decimalValue.value)) {
+          setUncontrolledDecimalValue(updateValue)
+          props.onChange?.(
+            updateValue.isEmpty() ? null : getDecimalValue(props.stringMode, updateValue),
+          )
+
+          // Reformat input if value is not controlled
+          if (props.value === undefined) {
+            setInputValue(updateValue, userTyping)
+          }
+        }
+
+        return updateValue
+      }
+
+      return decimalValue.value
+    }
+
+    // ========================== User Input ==========================
+    const onNextPromise = useFrame()
+
+    // >>> Collect input value
+    const collectInputValue = (inputStr: string) => {
+      recordCursor()
+
+      // Update inputValue incase input can not parse as number
+      inputValue.value = inputStr
+      // Parse number
+      if (!compositionRef.value) {
+        const finalValue = mergedParser(inputStr)
+        const finalDecimal = getMiniDecimal(finalValue)
+        if (!finalDecimal.isNaN()) {
+          triggerValueUpdate(finalDecimal, true)
+        }
+      }
+
+      // Trigger onInput later to let user customize value if they want do handle something after onChange
+      props.onInput?.(inputStr)
+
+      // optimize for chinese input experience
+      // https://github.com/ant-design/ant-design/issues/8196
+      onNextPromise(() => {
+        let nextInputStr = inputStr
+        if (!props.parser) {
+          nextInputStr = inputStr.replace(/。/g, '.')
+        }
+
+        if (nextInputStr !== inputStr) {
+          collectInputValue(nextInputStr)
+        }
+      })
+    }
+
+    // >>> Composition
+    const onCompositionStart = () => {
+      compositionRef.value = true
+    }
+
+    const onCompositionEnd = () => {
+      compositionRef.value = false
+
+      collectInputValue(inputRef.value.value)
+    }
+
+    // >>> Input
+    const onInternalInput = (e: ChangeEvent) => {
+      collectInputValue(e.target.value)
+    }
+
+    // ============================= Step =============================
+    const onInternalStep = (up: boolean) => {
+      // Ignore step since out of range
+      if ((up && upDisabled.value) || (!up && downDisabled.value)) {
+        return
+      }
+
+      // Clear typing status since it may caused by up & down key.
+      // We should sync with input value.
+      userTypingRef.value = false
+
+      let stepDecimal = getMiniDecimal(props.step)
+      if (!up) {
+        stepDecimal = stepDecimal.negate()
+      }
+
+      const target = (decimalValue.value || getMiniDecimal(0)).add(stepDecimal.toString())
+
+      const updatedValue = triggerValueUpdate(target, false)
+
+      props.onStep?.(getDecimalValue(props.stringMode, updatedValue), {
+        offset: props.step,
+        type: up ? 'up' : 'down',
+      })
+
+      inputRef.value?.focus()
+    }
+
+    // ============================ Flush =============================
+    /**
+     * Flush current input content to trigger value change & re-formatter input if needed
+     */
+    const flushInputValue = (userTyping: boolean) => {
+      const parsedValue = getMiniDecimal(mergedParser(inputValue.value))
+      let formatValue: DecimalClass = parsedValue
+
+      if (!parsedValue.isNaN()) {
+        // Only validate value or empty value can be re-fill to inputValue
+        // Reassign the formatValue within ranged of trigger control
+        formatValue = triggerValueUpdate(parsedValue, userTyping)
+      } else {
+        formatValue = decimalValue.value
+      }
+
+      if (props.value !== undefined) {
+        // Reset back with controlled value first
+        setInputValue(decimalValue.value, false)
+      } else if (!formatValue.isNaN()) {
+        // Reset input back since no validate value
+        setInputValue(formatValue, false)
+      }
+    }
+
+    // Solve the issue of the event triggering sequence when entering numbers in chinese input (Safari)
+    const onBeforeInput = () => {
+      userTypingRef.value = true
+    }
+
+    const onKeyDown: KeyboardEventHandler = (event) => {
+      const { which } = event
+      userTypingRef.value = true
+
+      if (which === KeyCode.ENTER) {
+        if (!compositionRef.value) {
+          userTypingRef.value = false
+        }
+        flushInputValue(false)
+        props.onPressEnter?.(event)
+      }
+
+      if (props.keyboard === false) {
+        return
+      }
+
+      // Do step
+      if (!compositionRef.value && [KeyCode.UP, KeyCode.DOWN].includes(which)) {
+        onInternalStep(KeyCode.UP === which)
+        event.preventDefault()
+      }
+    }
+
+    const onKeyUp = () => {
+      userTypingRef.value = false
+    }
+
+    // >>> Focus & Blur
+    const onBlur = (e: FocusEvent) => {
+      flushInputValue(false)
+      focus.value = false
+      userTypingRef.value = false
+      emit('blur', e)
+    }
+
+    // ========================== Controlled ==========================
+    // Input by precision
+    watch(
+      () => props.precision,
+      () => {
+        if (!decimalValue.value.isInvalidate()) {
+          setInputValue(decimalValue.value, false)
+        }
+      },
+      { flush: 'post' },
+    )
+
+    // Input by value
+    watch(
+      () => props.value,
+      () => {
+        const newValue = getMiniDecimal(props.value)
+        decimalValue.value = newValue
+
+        const currentParsedValue = getMiniDecimal(mergedParser(inputValue.value))
+
+        // When user typing from `1.2` to `1.`, we should not convert to `1` immediately.
+        // But let it go if user set `formatter`
+        if (!newValue.equals(currentParsedValue) || !userTypingRef.value || props.formatter) {
+          // Update value as effect
+          setInputValue(newValue, userTypingRef.value)
+        }
+      },
+      { flush: 'post' },
+    )
+
+    // ============================ Cursor ============================
+    watch(
+      inputValue,
+      () => {
+        if (props.formatter) {
+          restoreCursor()
+        }
+      },
+      { flush: 'post' },
+    )
+
+    watch(
+      () => props.disabled,
+      (val) => {
+        if (val) {
+          focus.value = false
+        }
+      },
+    )
+
+    expose({
+      focus: () => {
+        inputRef.value?.focus()
+      },
+      blur: () => {
+        inputRef.value?.blur()
+      },
+    })
+
+    return () => {
+      const {
+        prefixCls = 'rc-input-number',
+        min,
+        max,
+        step = 1,
+        defaultValue,
+        value,
+        disabled,
+        readonly,
+        keyboard,
+        controls = true,
+        autofocus,
+
+        stringMode,
+
+        parser,
+        formatter,
+        precision,
+        decimalSeparator,
+
+        onChange,
+        onInput,
+        onPressEnter,
+        onStep,
+        lazy,
+        class: className,
+        style,
+
+        ...inputProps
+      } = { ...(attrs as HTMLAttributes), ...props }
+      const { upHandler, downHandler } = slots
+      const inputClassName = `${prefixCls}-input`
+      const eventProps = {} as any
+      if (lazy) {
+        eventProps.onChange = onInternalInput
+      } else {
+        eventProps.onInput = onInternalInput
+      }
+      return (
+        <div
+          class={classNames(prefixCls, className, {
+            [`${prefixCls}-focused`]: focus.value,
+            [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-readonly`]: readonly,
+            [`${prefixCls}-not-a-number`]: decimalValue.value.isNaN(),
+            [`${prefixCls}-out-of-range`]:
+              !decimalValue.value.isInvalidate() && !isInRange(decimalValue.value),
+          })}
+          style={style}
+          onKeydown={onKeyDown}
+          onKeyup={onKeyUp}
+        >
+          {controls && (
+            <StepHandler
+              prefixCls={prefixCls}
+              upDisabled={upDisabled.value}
+              downDisabled={downDisabled.value}
+              onStep={onInternalStep}
+              v-slots={{ upNode: upHandler, downNode: downHandler }}
+            />
+          )}
+          <div class={`${inputClassName}-wrap`}>
+            <input
+              autofocus={autofocus}
+              autocomplete="off"
+              role="spinbutton"
+              aria-valuemin={min as any}
+              aria-valuemax={max as any}
+              aria-valuenow={
+                decimalValue.value.isInvalidate() ? null : (decimalValue.value.toString() as any)
+              }
+              step={step}
+              {...inputProps}
+              ref={inputRef}
+              class={inputClassName}
+              value={inputValue.value}
+              disabled={disabled}
+              readonly={readonly}
+              onFocus={(e: FocusEvent) => {
+                focus.value = true
+                emit('focus', e)
+              }}
+              {...eventProps}
+              onBlur={onBlur}
+              onCompositionstart={onCompositionStart}
+              onCompositionend={onCompositionEnd}
+              onBeforeinput={onBeforeInput}
+            />
+          </div>
+        </div>
+      )
+    }
+  },
+})

package/src/input-number/src/StepHandler.tsx

@@ -0,0 +1,110 @@
+import { defineComponent, onBeforeUnmount, ref } from 'vue'
+
+import classNames from '../../_util/classNames'
+import { functionType } from '../../_util/type'
+import type { CustomSlotsType } from '../../_util/type'
+import isMobile from '../../vc-util/isMobile'
+
+/**
+ * When click and hold on a button - the speed of auto changing the value.
+ */
+const STEP_INTERVAL = 200
+
+/**
+ * When click and hold on a button - the delay before auto changing the value.
+ */
+const STEP_DELAY = 600
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'StepHandler',
+  inheritAttrs: false,
+  props: {
+    prefixCls: String,
+    upDisabled: Boolean,
+    downDisabled: Boolean,
+    onStep: functionType<(up: boolean) => void>(),
+  },
+  slots: Object as CustomSlotsType<{
+    upNode?: any
+    downNode?: any
+    default?: any
+  }>,
+  setup(props, { slots, emit }) {
+    const stepTimeoutRef = ref()
+
+    // We will interval update step when hold mouse down
+    const onStepMouseDown = (e: MouseEvent, up: boolean) => {
+      e.preventDefault()
+
+      emit('step', up)
+
+      // Loop step for interval
+      function loopStep() {
+        emit('step', up)
+
+        stepTimeoutRef.value = setTimeout(loopStep, STEP_INTERVAL)
+      }
+
+      // First time press will wait some time to trigger loop step update
+      stepTimeoutRef.value = setTimeout(loopStep, STEP_DELAY)
+    }
+
+    const onStopStep = () => {
+      clearTimeout(stepTimeoutRef.value)
+    }
+
+    onBeforeUnmount(() => {
+      onStopStep()
+    })
+
+    return () => {
+      if (isMobile()) {
+        return null
+      }
+      const { prefixCls, upDisabled, downDisabled } = props
+      const handlerClassName = `${prefixCls}-handler`
+
+      const upClassName = classNames(handlerClassName, `${handlerClassName}-up`, {
+        [`${handlerClassName}-up-disabled`]: upDisabled,
+      })
+      const downClassName = classNames(handlerClassName, `${handlerClassName}-down`, {
+        [`${handlerClassName}-down-disabled`]: downDisabled,
+      })
+
+      const sharedHandlerProps = {
+        unselectable: 'on' as const,
+        role: 'button',
+        onMouseup: onStopStep,
+        onMouseleave: onStopStep,
+      }
+      const { upNode, downNode } = slots
+      return (
+        <div class={`${handlerClassName}-wrap`}>
+          <span
+            {...sharedHandlerProps}
+            onMousedown={(e) => {
+              onStepMouseDown(e, true)
+            }}
+            aria-label="Increase Value"
+            aria-disabled={upDisabled}
+            class={upClassName}
+          >
+            {upNode?.() || <span unselectable="on" class={`${prefixCls}-handler-up-inner`} />}
+          </span>
+          <span
+            {...sharedHandlerProps}
+            onMousedown={(e) => {
+              onStepMouseDown(e, false)
+            }}
+            aria-label="Decrease Value"
+            aria-disabled={downDisabled}
+            class={downClassName}
+          >
+            {downNode?.() || <span unselectable="on" class={`${prefixCls}-handler-down-inner`} />}
+          </span>
+        </div>
+      )
+    }
+  },
+})