diff --git a/index.json b/index.json
index fe5e0a6..00bd1ef 100644
--- a/index.json
+++ b/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,
diff --git a/src/setting/index.ts b/src/setting/index.ts
index 0f19856..c80d1d2 100644
--- a/src/setting/index.ts
+++ b/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,9 +468,9 @@ export class LunaSettingNumber extends LunaSettingItem {
${input}
`
)
- 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', () => {
@@ -471,13 +478,22 @@ export class LunaSettingNumber extends LunaSettingItem {
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', '')
diff --git a/src/setting/package.json b/src/setting/package.json
index 3b56148..4f78639 100644
--- a/src/setting/package.json
+++ b/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"
diff --git a/src/setting/react.tsx b/src/setting/react.tsx
index 8b5f9f2..af02ce2 100644
--- a/src/setting/react.tsx
+++ b/src/setting/react.tsx
@@ -204,6 +204,12 @@ export const LunaSettingNumber: FC = (props) => {
[props.disabled]
)
+ useEffect(() => {
+ if (settingNumber.current) {
+ settingNumber.current.setValue(props.value)
+ }
+ }, [props.value])
+
return null
}