release(setting): v0.9.2

index.json

@@ -281,7 +281,7 @@
   "setting": {
     "install": true,
     "react": true,
-    "version": "0.9.1",
+    "version": "0.9.2",
     "style": true,
     "icon": false,
     "test": true,

src/setting/index.ts

@@ -339,8 +339,10 @@ export class LunaSettingItem {
     return this.$container.text()
   }
   protected onChange(value: any) {
-    this.setting.emit('change', this.key, value, this.value)
-    this.value = value
+    if (this.value !== value) {
+      this.setting.emit('change', this.key, value, this.value)
+      this.value = value
+    }
   }
 }
 
@@ -413,6 +415,9 @@ export interface INumberOptions {
 
 export class LunaSettingNumber extends LunaSettingItem {
   private $input: $.$
+  private $trackProgress: $.$
+  private $value: $.$
+  private options: INumberOptions
   constructor(
     setting: Setting,
     key: string,
@@ -429,6 +434,8 @@ export class LunaSettingNumber extends LunaSettingItem {
       step: 1,
     })
 
+    this.options = options
+
     const { $container } = this
     const { c } = setting
     const range = !!options.range
@@ -461,23 +468,32 @@ export class LunaSettingNumber extends LunaSettingItem {
       <div class="${c('control')}">${input}</div>`
     )
 
-    const $value = $container.find(c('.value'))
     const $input = $container.find('input')
-    const $trackProgress = $container.find(c('.range-track-progress'))
+    this.$value = $container.find(c('.value'))
+    this.$trackProgress = $container.find(c('.range-track-progress'))
 
     $input.val(toStr(value))
     $input.on('change', () => {
       const val = toNum($input.val())
       this.onChange(val)
     })
     $input.on('input', () => {
-      const val = toNum($input.val())
-      $trackProgress.css('width', progress(val, min, max) + '%')
-      $value.text(toStr(val))
+      this.setValue(toNum($input.val()))
     })
 
     this.$input = $input
   }
+  setValue(value: number) {
+    const { options } = this
+
+    this.$input.val(toStr(value))
+    this.$trackProgress.css(
+      'width',
+      progress(value, options.min!, options.max!) + '%'
+    )
+    this.$value.text(toStr(value))
+    this.value = value
+  }
   disable() {
     super.disable()
     this.$input.attr('disabled', '')

src/setting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "setting",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Settings panel",
   "dependencies": {
     "micromark": "^3.1.0"

src/setting/react.tsx

@@ -204,6 +204,12 @@ export const LunaSettingNumber: FC<ISettingNumberProps> = (props) => {
     [props.disabled]
   )
 
+  useEffect(() => {
+    if (settingNumber.current) {
+      settingNumber.current.setValue(props.value)
+    }
+  }, [props.value])
+
   return null
 }