How to use the text-mask-addons/dist/createNumberMask function in text-mask-addons

To help you get started, we’ve selected a few text-mask-addons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github redgeoff / mson-react / src / mson / fields / number-field.js View on Github external
_createMask(props) {
    const maskOpts = {
      prefix: '', // override default of '$'
      allowDecimal: true,
      decimalLimit: null,
      allowNegative: true
    };

    MASK_PROPS.forEach(name => {
      if (props[name] !== undefined) {
        maskOpts[name] = props[name];
      }
    });

    this.set({ mask: createNumberMask(maskOpts) });
  }
github OasisDEX / oasis-react / src / components / MaskedTokenAmountInput.jsx View on Github external
render() {
    const newProps = {...this.props.input};

    newProps.disabled = this.props.disabled;
    newProps.onChange = this.forwardEvent(this.props.input.onChange);
    newProps.onBlur = this.forwardEvent(this.props.input.onBlur);

    return (
        
    );
  }
}
github GetTerminus / terminus-ui / terminus-ui / input / src / input.component.ts View on Github external
private createMaskCollection(allowDecimal: boolean): TsMaskCollection {
    return {
      phone: {
        mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
        unmaskRegex: NUMBER_ONLY_REGEX,
      },
      currency: {
        mask: createNumberMask({ allowDecimal }),
        unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
      },
      number: {
        mask: createNumberMask({
          prefix: '',
          suffix: '',
          allowDecimal,
          allowLeadingZeroes: true,
        }),
        unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
      },
      percentage: {
        mask: createNumberMask({
          prefix: '',
          suffix: '%',
          allowDecimal,
github i-novus-llc / n2o-framework / frontend / n2o-framework / src / components / controls / InputMask / InputMask.jsx View on Github external
preset(preset) {
    const { presetConfig } = this.props;
    switch (preset) {
      case 'phone':
        return this._mapToArray('+9 (999)-999-99-99');
      case 'post-code':
        return this._mapToArray('999999');
      case 'date':
        return this._mapToArray('99.99.9999');
      case 'money':
        return createNumberMask(presetConfig);
      case 'percentage':
        return createNumberMask({ prefix: '', suffix: '%' });
      case 'card':
        return this._mapToArray('9999 9999 9999 9999');
    }
  }
  /**
github sumup-oss / circuit-ui / src / components / CurrencyInput / components / SimpleCurrencyInput / SimpleCurrencyInput.story.js View on Github external
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import { GROUPS } from '../../../../../.storybook/hierarchySeparators';

import withTests from '../../../../util/withTests';
import SimpleCurrencyInput from './SimpleCurrencyInput';
import { CURRENCY_SYMBOLS } from '../../../../util/currency';

const numberMask = createNumberMask({
  prefix: '',
  suffix: '',
  thousandsSeparatorSymbol: ',',
  allowDecimal: true,
  decimalLimit: 2,
  decimalSymbol: '.'
});

storiesOf(`${GROUPS.FORMS}|CurrencyInput/SimpleCurrencyInput`, module)
  .addDecorator(withTests('SimpleCurrencyInput'))
  .add(
    'Default SimpleCurrencyInput',
    withInfo()(() => (
github ManifoldScholar / manifold / client / src / backend / components / form / MaskedTextInput.js View on Github external
currencyMask() {
    return createNumberMask({
      prefix: "$",
      allowDecimal: true
    });
  }
github GetTerminus / terminus-ui / terminus-ui / input / src / input.component.ts View on Github external
},
      currency: {
        mask: createNumberMask({ allowDecimal }),
        unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
      },
      number: {
        mask: createNumberMask({
          prefix: '',
          suffix: '',
          allowDecimal,
          allowLeadingZeroes: true,
        }),
        unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
      },
      percentage: {
        mask: createNumberMask({
          prefix: '',
          suffix: '%',
          allowDecimal,
        }),
        unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
      },
      postal: { mask: this.determinePostalMask },
      date: {
        mask: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
        pipe: createAutoCorrectedDatePipe(this.defaultDateFormat),
        keepCharPositions: false,
      },
      default: { mask: false },
    };
  }