@synerise/ds-input-number 0.6.28 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +23 -21
  3. package/dist/InputNumber.js +15 -3
  4. package/dist/InputNumber.styles.d.ts +1 -0
  5. package/dist/InputNumber.styles.js +16 -10
  6. package/dist/InputNumber.types.d.ts +4 -1
  7. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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.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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **input-number:** fixes styles ([f1ea06f](https://github.com/Synerise/synerise-design/commit/f1ea06f25f76ca0a3a0ee7b7fc3012e78e721c53))
12
+
13
+
14
+ ### Features
15
+
16
+ * **input-number:** adds tooltip next to input label ([bba90b6](https://github.com/Synerise/synerise-design/commit/bba90b60db71b49d994c7432c48d92668ec93937))
17
+ * **input-number:** adds wrapper element for number input ([29f6f12](https://github.com/Synerise/synerise-design/commit/29f6f121777f68f4dbd04c9566166dc1c0c4392b))
18
+ * **input-number:** updates path to importing types ([069650f](https://github.com/Synerise/synerise-design/commit/069650febbbcda6d8ca4ac58ca57296dddbae73f))
19
+
20
+
21
+
22
+
23
+
6
24
  ## [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
25
 
8
26
  **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"];
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,6 +7,8 @@ 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';
10
12
  import "./style/index.css";
11
13
  import * as S from './InputNumber.styles';
12
14
 
@@ -19,15 +21,25 @@ var InputNumber = function InputNumber(_ref) {
19
21
  prefixel = _ref.prefixel,
20
22
  suffixel = _ref.suffixel,
21
23
  style = _ref.style,
24
+ tooltip = _ref.tooltip,
25
+ tooltipConfig = _ref.tooltipConfig,
22
26
  antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
23
27
 
24
28
  var id = React.useMemo(function () {
25
29
  return uuid();
26
30
  }, []);
27
31
  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, {
32
+ return /*#__PURE__*/React.createElement(S.InputNumberContainer, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
29
33
  htmlFor: id
30
- }, label)), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
34
+ }, label, (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
35
+ title: tooltip,
36
+ placement: "top",
37
+ trigger: "hover",
38
+ transitionName: "zoom-big-fast"
39
+ }, tooltipConfig), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
40
+ size: 24,
41
+ component: /*#__PURE__*/React.createElement(InfoFillS, null)
42
+ }))))), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
31
43
  prefixel: !!prefixel,
32
44
  suffixel: !!suffixel,
33
45
  style: style
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,6 @@
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';
3
4
  export interface Props extends InputNumberProps {
4
5
  errorText?: React.ReactNode | string;
5
6
  label?: React.ReactNode | string;
@@ -8,4 +9,6 @@ export interface Props extends InputNumberProps {
8
9
  prefixel?: React.ReactNode | string;
9
10
  suffixel?: React.ReactNode | string;
10
11
  raw?: boolean;
12
+ tooltip?: string;
13
+ tooltipConfig?: TooltipProps;
11
14
  }
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.7.0",
4
4
  "description": "Input-Number UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,6 +32,8 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
+ "@synerise/ds-icon": "^0.53.0",
36
+ "@synerise/ds-tooltip": "^0.13.0",
35
37
  "@synerise/ds-utils": "^0.24.1",
36
38
  "uuid": "^7.0.2"
37
39
  },
@@ -43,5 +45,5 @@
43
45
  "devDependencies": {
44
46
  "@types/uuid": "7.0.0"
45
47
  },
46
- "gitHead": "c0b5a65f7c3a9783c31d2344ccda68303cbcf08d"
48
+ "gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
47
49
  }