diff --git a/package.json b/package.json index cf8ad7cc..4684a07e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.8.4", + "version": "0.8.5", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue index 5badf370..e15ac5c5 100644 --- a/src/components/Input/SFloatInput.vue +++ b/src/components/Input/SFloatInput.vue @@ -3,7 +3,6 @@ v-float :placeholder="placeholder" :value="value" - :maxlength="maxlength" v-bind="$attrs" v-on="{ ...$listeners, @@ -25,6 +24,8 @@ const isNumberLikeValue = (value: any): boolean => { return Number.isFinite(Number(value)) } +const decimalsValidator = x => x === undefined || x >= 0 + @Component({ components: { SInput @@ -35,20 +36,16 @@ const isNumberLikeValue = (value: any): boolean => { }) export default class SFloatInput extends Vue { @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string - @Prop({ default: '0.0', type: String }) readonly placeholder!: string - @Prop({ - type: Number, - default: undefined, - validator: x => x === undefined || x >= 0 - }) readonly decimals!: number - - get maxlength (): any { - return this.valueMaxLength(this.value, this.decimals) - } + @Prop({ type: String, default: '0.0' }) readonly placeholder!: string + @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number + @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number handleInput (value: string): void { - const formatted = this.formatNumberField(value, this.decimals) - const newValue = isNumberLikeValue(formatted) ? formatted : DEFAULT_VALUE + const newValue = [ + (v) => this.formatNumberField(v, this.decimals), + (v) => isNumberLikeValue(v) ? v : DEFAULT_VALUE, + (v) => this.checkValueForExtremum(v) + ].reduce((buffer, rule) => rule(buffer), value) this.onInput(newValue) } @@ -111,5 +108,12 @@ export default class SFloatInput extends Vue { return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined } + + private checkValueForExtremum (value: string): string { + if (!value) return value + if (this.max && (+value > +this.max)) return String(this.max) + + return value + } } diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts index f091cfdb..72454425 100644 --- a/src/stories/SFloatInput.stories.ts +++ b/src/stories/SFloatInput.stories.ts @@ -1,4 +1,4 @@ -import { number, withKnobs } from '@storybook/addon-knobs' +import { number, text, withKnobs } from '@storybook/addon-knobs' import { SFloatInput, SRow } from '../components' @@ -14,6 +14,7 @@ export const configurable = () => ({ `, data: () => ({ @@ -22,6 +23,9 @@ export const configurable = () => ({ props: { decimals: { default: number('Decimals', 18) + }, + max: { + default: text('Max', '10000') } } })