@ledvance/base 1.1.73 → 1.1.74

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.1.73",
+  "version": "1.1.74",
   "scripts": {},
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",

package/src/components/Stepper.tsx

@@ -0,0 +1,121 @@
+import { exchangeNumber, localeNumber } from "@ledvance/base/src/utils/common";
+import res from "@res";
+import { useReactive } from "ahooks";
+import React, { memo, useCallback } from "react";
+import { TouchableOpacity, View, Image, TextInput, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import { Utils } from "tuya-panel-kit";
+
+const { add, subtract, inMaxMin} = Utils.NumberUtils
+
+const { convertX: cx } = Utils.RatioUtils
+
+export interface StepperProps {
+  value: number | string
+  stepValue?: number  // 1
+  min?: number  // 0
+  max?: number // 99
+  editable?: boolean
+  selectionColor?: string
+  onValueChange?: ((value: number) => void)
+  disabled?: boolean
+  style?: StyleProp<ViewStyle>
+  buttonStyle?: StyleProp<ViewStyle>
+  inputStyle?: StyleProp<ViewStyle>
+}
+
+const Stepper = (props: StepperProps) => {
+  const state = useReactive({
+    value: localeNumber(Number(props.value), 1) ?? 0,
+    stepValue: props.stepValue ?? 1,
+    min: props.min ?? 0,
+    max: props.max ?? 99
+  })
+
+  const handlePress = useCallback((isAdd: boolean) => {
+    const v = inMaxMin(state.min, state.max, isAdd ? add(Number(exchangeNumber(state.value)), state.stepValue) : subtract(Number(exchangeNumber(state.value)), state.stepValue))
+    state.value = localeNumber(v, 1)
+    props.onValueChange && props.onValueChange(v)
+  }, [])
+
+
+  const handleChangeText = useCallback((v: string) =>{
+    const newValue = exchangeNumber(v)
+    const idx = newValue.indexOf('.')
+    if(newValue[0] === '.' || 
+    (newValue.length === 2 && newValue[0] === '0' && newValue[1] !== '.') || 
+    newValue.split('').filter(item => item === '.').length > 1 ||
+    Number(newValue) > state.max || Number(newValue) < state.min || 
+    (idx !== -1 && newValue.length > idx + 2)){
+      return
+    }
+    state.value = v
+  }, [])
+
+  const handleEndText = useCallback(() =>{
+    if (typeof state.value === 'string' && !state.value.length) {
+      props.onValueChange && props.onValueChange(state.min)
+      state.value = state.min.toString()
+    }else{
+      props.onValueChange && props.onValueChange(Number(exchangeNumber(state.value)))
+    }
+    
+  }, [])
+
+  return (
+    <View style={[styles.stepperContainer, props.style]}>
+      <TouchableOpacity
+        style={[styles.stepperButton, props.buttonStyle]}
+        onPress={() => handlePress(false)}
+      >
+        <Image width={cx(16)} height={cx(16)} source={res.ic_minus} />
+      </TouchableOpacity>
+      <TextInput
+        style={[styles.stepperInput, props.inputStyle]}
+        value={state.value.toString()}
+        keyboardType="numeric"
+        onChangeText={handleChangeText}
+        maxLength={4}
+        enablesReturnKeyAutomatically={true}
+        onEndEditing={handleEndText}
+        editable={props.editable || props.disabled}
+      />
+      <TouchableOpacity
+        style={[styles.stepperButton, props.buttonStyle]}
+        onPress={() => handlePress(true)}
+      >
+        <Image style={{ width: cx(20), height: cx(20) }} source={res.ic_plus} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  stepperContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    padding: cx(2),
+    borderRadius: cx(12),
+    width: cx(150),
+  },
+  stepperButton: {
+    width: cx(52),
+    height: cx(28),
+    backgroundColor: '#fff',
+    borderRadius: cx(10),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepperInput: {
+    width: cx(42),
+    height: cx(22),
+    color: '#333',
+    fontSize: cx(16),
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+  }
+})
+
+export default memo(Stepper)

package/src/res/index.ts

@@ -61,5 +61,7 @@ export default {
   ic_colorize: require('./ic_colorize.png'),
   ic_mood_del: require('./ic_mood_del.png'),
   ic_paint_bucket: require('./ic_paint_bucket.png'),
-  ic_text_field_input_error: require('./ic_text_field_input_error.png')
+  ic_text_field_input_error: require('./ic_text_field_input_error.png'),
+  ic_minus: require('./ic_minus.png'),
+  ic_plus: require('./ic_plus.png')
 }