@synerise/ds-input-number 0.6.28 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +23 -21
  3. package/dist/InputNumber.js +34 -4
  4. package/dist/InputNumber.styles.d.ts +1 -0
  5. package/dist/InputNumber.styles.js +16 -10
  6. package/dist/InputNumber.types.d.ts +6 -1
  7. package/dist/constants/inputNumber.constants.d.ts +3 -0
  8. package/dist/constants/inputNumber.constants.js +2 -0
  9. package/dist/utils/inputNumber.utils.d.ts +4 -0
  10. package/dist/utils/inputNumber.utils.js +61 -0
  11. package/package.json +5 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,35 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.7.0...@synerise/ds-input-number@0.8.0) (2023-03-08)
7
+
8
+
9
+ ### Features
10
+
11
+ * **data-format:** using data format tools in ds components ([ee52cba](https://github.com/Synerise/synerise-design/commit/ee52cbac5e798e048722aefb2e47a7058e0f4c9c))
12
+
13
+
14
+
15
+
16
+
17
+ # [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.6.28...@synerise/ds-input-number@0.7.0) (2023-03-06)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **input-number:** fixes styles ([f1ea06f](https://github.com/Synerise/synerise-design/commit/f1ea06f25f76ca0a3a0ee7b7fc3012e78e721c53))
23
+
24
+
25
+ ### Features
26
+
27
+ * **input-number:** adds tooltip next to input label ([bba90b6](https://github.com/Synerise/synerise-design/commit/bba90b60db71b49d994c7432c48d92668ec93937))
28
+ * **input-number:** adds wrapper element for number input ([29f6f12](https://github.com/Synerise/synerise-design/commit/29f6f121777f68f4dbd04c9566166dc1c0c4392b))
29
+ * **input-number:** updates path to importing types ([069650f](https://github.com/Synerise/synerise-design/commit/069650febbbcda6d8ca4ac58ca57296dddbae73f))
30
+
31
+
32
+
33
+
34
+
6
35
  ## [0.6.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.6.27...@synerise/ds-input-number@0.6.28) (2023-02-28)
7
36
 
8
37
  **Note:** Version bump only for package @synerise/ds-input-number
package/README.md CHANGED
@@ -13,27 +13,29 @@ Input-Number UI Component
13
13
 
14
14
  ### Props
15
15
 
16
- | Property | Description | Type | Default |
17
- | ---------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------- | --------- |
18
- | autoFocus | Get focus when component mounted | boolean | `false` |
19
- | decimalSeparator | Decimal separator | string | - |
20
- | defaultValue | Initial value | number |
21
- | description | Input description | string | - |
22
- | disabled | Disable the input | boolean | `false` |
23
- | errorText | Error message, if provided input will be set in error state | string | - |
24
- | formatter | Specifies the format of the value presented | (value: number / string) => string | - |
25
- | label | Input label | string | - |
26
- | max | Max value | number | Infinity |
27
- | min | Min value | number | -Infinity |
28
- | onChange | The callback triggered when the value is changed. | (value: number / string) => void |
29
- | onPressEnter | The callback function that is triggered when Enter key is pressed. | (e:Event) => void |
30
- | parser | Specifies the value extracted from formatter | (val: number / string) => string | - |
31
- | precision | Precision of input value | number | - |
32
- | size | Height of input box | string | - |
33
- | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number / string | 1 |
34
- | value | Current value | number | - |
35
- | prefixel | String or ReactNode to set prefix | string / ReactNode | - |
36
- | suffixel | String or ReactNode to set suffix | string / ReactNode | - |
16
+ | Property | Description | Type | Default |
17
+ | ---------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------- |
18
+ | autoFocus | Get focus when component mounted | boolean | `false` |
19
+ | decimalSeparator | Decimal separator | string | - |
20
+ | defaultValue | Initial value | number |
21
+ | description | Input description | string | - |
22
+ | disabled | Disable the input | boolean | `false` |
23
+ | errorText | Error message, if provided input will be set in error state | string | - |
24
+ | formatter | Specifies the format of the value presented | (value: number / string) => string | - |
25
+ | label | Input label | string | - |
26
+ | max | Max value | number | Infinity |
27
+ | min | Min value | number | -Infinity |
28
+ | onChange | The callback triggered when the value is changed. | (value: number / string) => void |
29
+ | onPressEnter | The callback function that is triggered when Enter key is pressed. | (e:Event) => void |
30
+ | parser | Specifies the value extracted from formatter | (val: number / string) => string | - |
31
+ | precision | Precision of input value | number | - |
32
+ | size | Height of input box | string | - |
33
+ | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number / string | 1 |
34
+ | value | Current value | number | - |
35
+ | prefixel | String or ReactNode to set prefix | string / ReactNode | - |
36
+ | suffixel | String or ReactNode to set suffix | string / ReactNode | - |
37
+ | tooltip | Tooltip content | ReactNode | - |
38
+ | tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
37
39
 
38
40
  ### Methods
39
41
 
package/dist/InputNumber.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style"];
1
+ var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "valueFormatOptions"];
2
2
 
3
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
@@ -7,8 +7,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
7
7
  import * as React from 'react';
8
8
  import { v4 as uuid } from 'uuid';
9
9
  import '@synerise/ds-core/dist/js/style';
10
+ import Tooltip from '@synerise/ds-tooltip';
11
+ import Icon, { InfoFillS } from '@synerise/ds-icon';
12
+ import { useDataFormat } from '@synerise/ds-data-format';
10
13
  import "./style/index.css";
11
14
  import * as S from './InputNumber.styles';
15
+ import { formatNumber, parseFormattedNumber } from './utils/inputNumber.utils';
12
16
 
13
17
  var InputNumber = function InputNumber(_ref) {
14
18
  var label = _ref.label,
@@ -19,15 +23,38 @@ var InputNumber = function InputNumber(_ref) {
19
23
  prefixel = _ref.prefixel,
20
24
  suffixel = _ref.suffixel,
21
25
  style = _ref.style,
26
+ tooltip = _ref.tooltip,
27
+ tooltipConfig = _ref.tooltipConfig,
28
+ valueFormatOptions = _ref.valueFormatOptions,
22
29
  antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
23
30
 
31
+ var _useDataFormat = useDataFormat(),
32
+ formatValue = _useDataFormat.formatValue,
33
+ thousandDelimiter = _useDataFormat.thousandDelimiter,
34
+ decimalDelimiter = _useDataFormat.decimalDelimiter;
35
+
36
+ formatValue(new Date(), {});
24
37
  var id = React.useMemo(function () {
25
38
  return uuid();
26
39
  }, []);
27
40
  var showError = Boolean(error || errorText);
28
- return /*#__PURE__*/React.createElement(React.Fragment, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
41
+ var formatter = React.useCallback(function (value) {
42
+ return formatNumber(value, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
43
+ }, [formatValue, valueFormatOptions, thousandDelimiter, decimalDelimiter]);
44
+ var parser = React.useCallback(function (value) {
45
+ return parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter);
46
+ }, [formatValue, thousandDelimiter, decimalDelimiter]);
47
+ return /*#__PURE__*/React.createElement(S.InputNumberContainer, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
29
48
  htmlFor: id
30
- }, label)), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
49
+ }, label, (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
50
+ title: tooltip,
51
+ placement: "top",
52
+ trigger: "hover",
53
+ transitionName: "zoom-big-fast"
54
+ }, tooltipConfig), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
55
+ size: 24,
56
+ component: /*#__PURE__*/React.createElement(InfoFillS, null)
57
+ }))))), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
31
58
  prefixel: !!prefixel,
32
59
  suffixel: !!suffixel,
33
60
  style: style
@@ -35,7 +62,10 @@ var InputNumber = function InputNumber(_ref) {
35
62
  id: id,
36
63
  error: showError,
37
64
  className: showError ? 'error' : undefined,
38
- autoComplete: "off"
65
+ autoComplete: "off",
66
+ formatter: formatter,
67
+ parser: parser,
68
+ decimalSeparator: decimalDelimiter
39
69
  })), !!suffixel && /*#__PURE__*/React.createElement(S.Suffixel, null, suffixel)), (showError || description) && !raw && /*#__PURE__*/React.createElement(S.ContentBelow, null, showError && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, null, description)));
40
70
  };
41
71
 
package/dist/InputNumber.styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ThemeProps } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
3
+ export declare const InputNumberContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const AntdInputNumber: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/input-number").InputNumberProps & import("react").RefAttributes<unknown>>, any, {
4
5
  error: boolean;
5
6
  } & ThemeProps, never>;
package/dist/InputNumber.styles.js CHANGED
@@ -1,8 +1,12 @@
1
1
  import styled from 'styled-components';
2
2
  import BaseAntInputNumber from 'antd/lib/input-number';
3
+ export var InputNumberContainer = styled.div.withConfig({
4
+ displayName: "InputNumberstyles__InputNumberContainer",
5
+ componentId: "sc-17jwffw-0"
6
+ })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;"]);
3
7
  export var AntdInputNumber = styled(BaseAntInputNumber).withConfig({
4
8
  displayName: "InputNumberstyles__AntdInputNumber",
5
- componentId: "sc-17jwffw-0"
9
+ componentId: "sc-17jwffw-1"
6
10
  })(["color:", ";input,input:focus{", ";}"], function (props) {
7
11
  return props.theme.palette['grey-700'];
8
12
  }, function (props) {
@@ -10,45 +14,47 @@ export var AntdInputNumber = styled(BaseAntInputNumber).withConfig({
10
14
  });
11
15
  export var ContentAbove = styled.div.withConfig({
12
16
  displayName: "InputNumberstyles__ContentAbove",
13
- componentId: "sc-17jwffw-1"
17
+ componentId: "sc-17jwffw-2"
14
18
  })(["display:flex;justify-content:space-between;margin-bottom:8px;"]);
15
19
  export var Label = styled.label.withConfig({
16
20
  displayName: "InputNumberstyles__Label",
17
- componentId: "sc-17jwffw-2"
18
- })(["color:", ";font-weight:500;display:block;white-space:nowrap;"], function (props) {
21
+ componentId: "sc-17jwffw-3"
22
+ })(["color:", ";font-weight:500;display:block;white-space:nowrap;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;cursor:pointer;.ds-icon > svg{margin-top:-1px;fill:", ";}"], function (props) {
19
23
  return props.theme.palette['grey-800'];
24
+ }, function (props) {
25
+ return props.theme.palette['grey-400'];
20
26
  });
21
27
  export var Description = styled.div.withConfig({
22
28
  displayName: "InputNumberstyles__Description",
23
- componentId: "sc-17jwffw-3"
29
+ componentId: "sc-17jwffw-4"
24
30
  })(["color:", ";"], function (props) {
25
31
  return props.theme.palette['grey-600'];
26
32
  });
27
33
  export var ContentBelow = styled.div.withConfig({
28
34
  displayName: "InputNumberstyles__ContentBelow",
29
- componentId: "sc-17jwffw-4"
35
+ componentId: "sc-17jwffw-5"
30
36
  })(["margin-top:8px;"]);
31
37
  export var ErrorText = styled.div.withConfig({
32
38
  displayName: "InputNumberstyles__ErrorText",
33
- componentId: "sc-17jwffw-5"
39
+ componentId: "sc-17jwffw-6"
34
40
  })(["color:", ";margin-bottom:4px;"], function (props) {
35
41
  return props.theme.palette['red-600'];
36
42
  });
37
43
  export var Prefixel = styled.div.withConfig({
38
44
  displayName: "InputNumberstyles__Prefixel",
39
- componentId: "sc-17jwffw-6"
45
+ componentId: "sc-17jwffw-7"
40
46
  })(["border:1px solid ", ";border-radius:3px 0 0 3px;border-right-width:0;"], function (props) {
41
47
  return props.theme.palette['grey-300'];
42
48
  });
43
49
  export var Suffixel = styled.div.withConfig({
44
50
  displayName: "InputNumberstyles__Suffixel",
45
- componentId: "sc-17jwffw-7"
51
+ componentId: "sc-17jwffw-8"
46
52
  })(["border:1px solid ", ";border-radius:0 3px 3px 0;border-left-width:0;"], function (props) {
47
53
  return props.theme.palette['grey-300'];
48
54
  });
49
55
  export var InputNumberWrapper = styled.div.withConfig({
50
56
  displayName: "InputNumberstyles__InputNumberWrapper",
51
- componentId: "sc-17jwffw-8"
57
+ componentId: "sc-17jwffw-9"
52
58
  })(["display:flex;align-items:center;", ",", "{background:", ";display:flex;align-items:center;align-self:stretch;padding:0 12px;}", " ", ""], Prefixel, Suffixel, function (props) {
53
59
  return props.theme.palette['grey-050'];
54
60
  }, function (props) {
package/dist/InputNumber.types.d.ts CHANGED
@@ -1,5 +1,7 @@
1
- import { InputNumberProps } from 'antd/lib/input-number';
2
1
  import * as React from 'react';
2
+ import { InputNumberProps } from 'antd/lib/input-number';
3
+ import type { TooltipProps } from '@synerise/ds-tooltip';
4
+ import { NumberToFormatOptions } from '@synerise/ds-data-format';
3
5
  export interface Props extends InputNumberProps {
4
6
  errorText?: React.ReactNode | string;
5
7
  label?: React.ReactNode | string;
@@ -8,4 +10,7 @@ export interface Props extends InputNumberProps {
8
10
  prefixel?: React.ReactNode | string;
9
11
  suffixel?: React.ReactNode | string;
10
12
  raw?: boolean;
13
+ tooltip?: string;
14
+ tooltipConfig?: TooltipProps;
15
+ valueFormatOptions?: NumberToFormatOptions;
11
16
  }
package/dist/constants/inputNumber.constants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { Delimiter } from '@synerise/ds-data-format';
2
+ export declare const MAXIMUM_FRACTION_DIGITS = 20;
3
+ export declare const NUMBER_DELIMITER: Delimiter;
package/dist/constants/inputNumber.constants.js ADDED
@@ -0,0 +1,2 @@
1
+ export var MAXIMUM_FRACTION_DIGITS = 20;
2
+ export var NUMBER_DELIMITER = '.';
package/dist/utils/inputNumber.utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ReactText } from 'react';
2
+ import { NumberToFormatOptions, Delimiter } from '@synerise/ds-data-format';
3
+ export declare const formatNumber: (value: string | number | undefined, formatValue: (value: number, options: NumberToFormatOptions) => string, thousandDelimiter: Delimiter, decimalDelimiter: Delimiter, valueFormatOptions?: NumberToFormatOptions | undefined) => string;
4
+ export declare const parseFormattedNumber: (value: string | undefined, formatValue: (value: number, options: NumberToFormatOptions) => string, thousandDelimiter: Delimiter, decimalDelimiter: Delimiter) => ReactText;
package/dist/utils/inputNumber.utils.js ADDED
@@ -0,0 +1,61 @@
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2
+
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
4
+
5
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+
7
+ import { MAXIMUM_FRACTION_DIGITS, NUMBER_DELIMITER } from '../constants/inputNumber.constants'; // input 1: not formatted number string (on input change)
8
+ // input 2: not formatted number (on blur)
9
+ // output: formatted number string with decimal char
10
+
11
+ export var formatNumber = function formatNumber(value, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions) {
12
+ if (value === undefined || value === '') return '';
13
+
14
+ var formatOptions = _objectSpread({
15
+ maximumFractionDigits: MAXIMUM_FRACTION_DIGITS
16
+ }, valueFormatOptions);
17
+
18
+ var notationDecimalChar = '';
19
+ var result = '';
20
+
21
+ if (typeof value === 'number') {
22
+ result = formatValue(value, formatOptions);
23
+ } else {
24
+ var lastChar = value == null ? void 0 : value.slice(-1);
25
+
26
+ if (lastChar === NUMBER_DELIMITER) {
27
+ notationDecimalChar = decimalDelimiter;
28
+ }
29
+
30
+ var numberResult = Number(value);
31
+
32
+ if (Number.isNaN(numberResult)) {
33
+ return '';
34
+ }
35
+
36
+ result = formatValue(numberResult, formatOptions);
37
+ result = "" + result + notationDecimalChar;
38
+ }
39
+
40
+ return result;
41
+ }; // input: formatted number string
42
+ // output: not formatted number string with decimal char
43
+
44
+ export var parseFormattedNumber = function parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter) {
45
+ if (value === undefined || value === '') {
46
+ return '';
47
+ }
48
+
49
+ var result = value.split(thousandDelimiter).join('');
50
+
51
+ if (decimalDelimiter !== NUMBER_DELIMITER) {
52
+ result = result.replace(decimalDelimiter, NUMBER_DELIMITER);
53
+ }
54
+
55
+ if ((result.match(new RegExp("\\" + NUMBER_DELIMITER, 'g')) || []).length > 1) {
56
+ var lastDecimalDelimiterIndex = result.lastIndexOf(NUMBER_DELIMITER);
57
+ result = result.slice(0, lastDecimalDelimiterIndex);
58
+ }
59
+
60
+ return result;
61
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-input-number",
3
- "version": "0.6.28",
3
+ "version": "0.8.0",
4
4
  "description": "Input-Number UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,7 +32,9 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-utils": "^0.24.1",
35
+ "@synerise/ds-icon": "^0.53.0",
36
+ "@synerise/ds-tooltip": "^0.13.0",
37
+ "@synerise/ds-utils": "^0.24.2",
36
38
  "uuid": "^7.0.2"
37
39
  },
38
40
  "peerDependencies": {
@@ -43,5 +45,5 @@
43
45
  "devDependencies": {
44
46
  "@types/uuid": "7.0.0"
45
47
  },
46
- "gitHead": "c0b5a65f7c3a9783c31d2344ccda68303cbcf08d"
48
+ "gitHead": "55d4a4dfa9230bea883b887e4457ca86f8509d83"
47
49
  }