@synerise/ds-input-number 0.6.28 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
  }