@tecsinapse/react-web-kit 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.15.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.14.0...@tecsinapse/react-web-kit@1.15.0) (2022-02-14)
+
+
+### Bug Fixes
+
+* formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
+
+
+
+
+
 # [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.13.0...@tecsinapse/react-web-kit@1.14.0) (2022-02-09)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.13.0",
+    "@tecsinapse/react-core": "^1.14.0",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
@@ -33,5 +33,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "d5d2193bf8716615751e28b7009da59520e8080c"
+  "gitHead": "fb1d3b3bfa028174ef30ee2c9387a04c81699c3f"
 }

package/src/components/atoms/Input/Input.stories.tsx

@@ -2,6 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react';
 import React, { useState } from 'react';
 import Input, { InputWebProps } from './Input';
+import { Masks } from '@tecsinapse/react-core/src';
+import { CurrencyOptions } from '@tecsinapse/react-core/src/components/atoms/Input/hooks/useNumberMask';
 
 export default {
   title: 'Hybrid/Input',
@@ -37,3 +39,72 @@ Base.args = {
   disabled: false,
   label: 'Login',
 };
+
+const TemplateStringMask: Story<InputWebProps> = args => {
+  const [value, setValue] = useState<string>('');
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  return (
+    <Input
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={Masks.COMBINED_PHONE}
+    />
+  );
+};
+
+export const StringMask = TemplateStringMask.bind({});
+
+StringMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type your phone',
+  disabled: false,
+  label: 'Phone',
+};
+
+const TemplateNumberMask: Story<InputWebProps> = args => {
+  const [value, setValue] = useState<number>(1200.2);
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  const numberMaskExample: CurrencyOptions = {
+    symbol: 'R$ ',
+    separator: '.',
+    decimal: ',',
+    precision: 2,
+  };
+
+  return (
+    <Input
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={numberMaskExample}
+    />
+  );
+};
+
+export const NumberMask = TemplateNumberMask.bind({});
+
+NumberMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type the price in R$',
+  disabled: false,
+  label: 'Price',
+};