@synerise/ds-time-picker 0.8.10 → 0.9.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.
- package/CHANGELOG.md +19 -0
- package/dist/TimePicker.js +4 -3
- package/dist/TimePicker.styles.d.ts +5 -1
- package/dist/TimePicker.styles.js +16 -11
- package/dist/types/TimePicker.types.d.ts +4 -3
- package/package.json +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.8.11...@synerise/ds-time-picker@0.9.0) (2023-10-17)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **date-range-picker:** display errors in daily / weekly / monthly scheduler ([1bc8695](https://github.com/Synerise/synerise-design/commit/1bc8695af46628b30492fb247a2ddbe5785711b0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.8.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.8.10...@synerise/ds-time-picker@0.8.11) (2023-10-11)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @synerise/ds-time-picker
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.8.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.8.9...@synerise/ds-time-picker@0.8.10) (2023-10-06)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-time-picker
|
package/dist/TimePicker.js
CHANGED
|
@@ -13,7 +13,6 @@ import { range } from 'lodash';
|
|
|
13
13
|
import dayjs from 'dayjs';
|
|
14
14
|
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
|
|
15
15
|
import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
|
|
16
|
-
import Dropdown from '@synerise/ds-dropdown';
|
|
17
16
|
import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
|
|
18
17
|
import { useDataFormat } from '@synerise/ds-data-format';
|
|
19
18
|
import Unit from './Unit';
|
|
@@ -55,7 +54,8 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
55
54
|
}) : _ref$clearTooltip,
|
|
56
55
|
raw = _ref.raw,
|
|
57
56
|
onClockModeChange = _ref.onClockModeChange,
|
|
58
|
-
intl = _ref.intl
|
|
57
|
+
intl = _ref.intl,
|
|
58
|
+
errorText = _ref.errorText;
|
|
59
59
|
|
|
60
60
|
var _useDataFormat = useDataFormat(),
|
|
61
61
|
formatValue = _useDataFormat.formatValue,
|
|
@@ -223,7 +223,7 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
223
223
|
className: "ds-time-picker " + (className || ''),
|
|
224
224
|
"data-testid": "tp-container",
|
|
225
225
|
style: containerStyle
|
|
226
|
-
}, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
226
|
+
}, /*#__PURE__*/React.createElement(S.Dropdown, _extends({
|
|
227
227
|
trigger: trigger,
|
|
228
228
|
visible: alwaysOpen || open,
|
|
229
229
|
onVisibleChange: onVisibleChange,
|
|
@@ -231,6 +231,7 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
231
231
|
overlay: overlay,
|
|
232
232
|
disabled: disabled
|
|
233
233
|
}, dropdownProps), /*#__PURE__*/React.createElement(S.TimePickerInput, _extends({
|
|
234
|
+
errorText: !open && errorText,
|
|
234
235
|
disabled: disabled,
|
|
235
236
|
className: "" + (alwaysOpen || open ? 'active' : ''),
|
|
236
237
|
"data-testid": "tp-input",
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import DSDropdown from '@synerise/ds-dropdown';
|
|
3
|
+
export declare const Dropdown: import("styled-components").StyledComponent<typeof DSDropdown, any, {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
}, never>;
|
|
2
6
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
7
|
export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
8
|
export declare const Unit: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -2,35 +2,40 @@ import styled, { css } from 'styled-components';
|
|
|
2
2
|
import { Label } from '@synerise/ds-typography';
|
|
3
3
|
import Icon from '@synerise/ds-icon';
|
|
4
4
|
import { Input } from '@synerise/ds-input';
|
|
5
|
+
import DSDropdown from '@synerise/ds-dropdown';
|
|
6
|
+
export var Dropdown = styled(DSDropdown).withConfig({
|
|
7
|
+
displayName: "TimePickerstyles__Dropdown",
|
|
8
|
+
componentId: "yk19n0-0"
|
|
9
|
+
})(["margin:0;"]);
|
|
5
10
|
export var Container = styled.div.withConfig({
|
|
6
11
|
displayName: "TimePickerstyles__Container",
|
|
7
|
-
componentId: "yk19n0-
|
|
8
|
-
})(["min-width:104px;max-width:208px;width:inherit;
|
|
12
|
+
componentId: "yk19n0-1"
|
|
13
|
+
})(["min-width:104px;max-width:208px;width:inherit;position:relative;"]);
|
|
9
14
|
export var OverlayContainer = styled.div.withConfig({
|
|
10
15
|
displayName: "TimePickerstyles__OverlayContainer",
|
|
11
|
-
componentId: "yk19n0-
|
|
16
|
+
componentId: "yk19n0-2"
|
|
12
17
|
})(["background-color:", ";border-radius:3px;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;"], function (props) {
|
|
13
18
|
return props.theme.palette.white;
|
|
14
19
|
});
|
|
15
20
|
export var Unit = styled.div.withConfig({
|
|
16
21
|
displayName: "TimePickerstyles__Unit",
|
|
17
|
-
componentId: "yk19n0-
|
|
22
|
+
componentId: "yk19n0-3"
|
|
18
23
|
})(["display:flex;flex-direction:column;width:100%;overflow:hidden;.scrollbar-container{margin-right:-11px;}"]);
|
|
19
24
|
export var UnitSeperator = styled.div.withConfig({
|
|
20
25
|
displayName: "TimePickerstyles__UnitSeperator",
|
|
21
|
-
componentId: "yk19n0-
|
|
26
|
+
componentId: "yk19n0-4"
|
|
22
27
|
})(["width:1px;height:inherit;display:flex;flex-shrink:0;background-color:", ";"], function (props) {
|
|
23
28
|
return props.theme.palette['grey-200'];
|
|
24
29
|
});
|
|
25
30
|
export var CellText = styled(Label).withConfig({
|
|
26
31
|
displayName: "TimePickerstyles__CellText",
|
|
27
|
-
componentId: "yk19n0-
|
|
32
|
+
componentId: "yk19n0-5"
|
|
28
33
|
})(["&&{width:22px;height:18px;text-align:center;color:", ";transition:color 0.3s;}"], function (props) {
|
|
29
34
|
return props.theme.palette['grey-600'];
|
|
30
35
|
});
|
|
31
36
|
export var Cell = styled.button.withConfig({
|
|
32
37
|
displayName: "TimePickerstyles__Cell",
|
|
33
|
-
componentId: "yk19n0-
|
|
38
|
+
componentId: "yk19n0-6"
|
|
34
39
|
})(["height:32px;width:100%;text-align:center;display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:background-color 0.3s;cursor:pointer;background-color:", ";&&{border:none;padding:0;}&:hover{background-color:", ";", "{color:", ";}}&:disabled{&&{cursor:not-allowed;background-color:", ";}", "{cursor:not-allowed;opacity:0.4;}}", ";"], function (props) {
|
|
35
40
|
return props.theme.palette.white;
|
|
36
41
|
}, function (props) {
|
|
@@ -44,7 +49,7 @@ export var Cell = styled.button.withConfig({
|
|
|
44
49
|
});
|
|
45
50
|
export var ClearIcon = styled(Icon).withConfig({
|
|
46
51
|
displayName: "TimePickerstyles__ClearIcon",
|
|
47
|
-
componentId: "yk19n0-
|
|
52
|
+
componentId: "yk19n0-7"
|
|
48
53
|
})(["&&,&&:hover{svg{color:", ";fill:", ";}}"], function (props) {
|
|
49
54
|
return props.theme.palette['red-600'];
|
|
50
55
|
}, function (props) {
|
|
@@ -52,7 +57,7 @@ export var ClearIcon = styled(Icon).withConfig({
|
|
|
52
57
|
});
|
|
53
58
|
export var TimePickerInput = styled(Input).withConfig({
|
|
54
59
|
displayName: "TimePickerstyles__TimePickerInput",
|
|
55
|
-
componentId: "yk19n0-
|
|
60
|
+
componentId: "yk19n0-8"
|
|
56
61
|
})(["&:not(.active){input{&:focus{box-shadow:none;background-color:", ";border-color:", ";}}}"], function (props) {
|
|
57
62
|
return props.theme.palette.white;
|
|
58
63
|
}, function (props) {
|
|
@@ -60,11 +65,11 @@ export var TimePickerInput = styled(Input).withConfig({
|
|
|
60
65
|
});
|
|
61
66
|
export var PlaceholderWrapper = styled.div.withConfig({
|
|
62
67
|
displayName: "TimePickerstyles__PlaceholderWrapper",
|
|
63
|
-
componentId: "yk19n0-
|
|
68
|
+
componentId: "yk19n0-9"
|
|
64
69
|
})(["width:100%;position:relative;"]);
|
|
65
70
|
export var Placeholder = styled.div.withConfig({
|
|
66
71
|
displayName: "TimePickerstyles__Placeholder",
|
|
67
|
-
componentId: "yk19n0-
|
|
72
|
+
componentId: "yk19n0-10"
|
|
68
73
|
})(["height:", "px;"], function (props) {
|
|
69
74
|
return props.height;
|
|
70
75
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
2
|
import dayjs from 'dayjs';
|
|
3
3
|
import { IntlShape } from 'react-intl';
|
|
4
4
|
import { InputProps } from 'antd/es/input/Input';
|
|
@@ -14,8 +14,8 @@ export type TimePickerDisabledUnits = {
|
|
|
14
14
|
export type TimePickerProps = TimePickerDisabledUnits & {
|
|
15
15
|
alwaysOpen?: boolean;
|
|
16
16
|
className?: string;
|
|
17
|
-
clearTooltip?: string |
|
|
18
|
-
containerStyle?:
|
|
17
|
+
clearTooltip?: string | ReactNode;
|
|
18
|
+
containerStyle?: CSSProperties;
|
|
19
19
|
defaultOpen?: boolean;
|
|
20
20
|
disabled?: boolean;
|
|
21
21
|
dropdownProps?: Partial<DropdownProps>;
|
|
@@ -39,4 +39,5 @@ export type TimePickerProps = TimePickerDisabledUnits & {
|
|
|
39
39
|
use12HourClock?: boolean;
|
|
40
40
|
valueFormatOptions?: DateToFormatOptions;
|
|
41
41
|
value?: Date;
|
|
42
|
+
errorText?: ReactNode;
|
|
42
43
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-time-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "TimePicker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx' --ignore '**/*.spec.ts' --ignore '**/*.spec.tsx' --ignore '**/*.spec.constants.ts' --ignore '**/*.spec.constants.tsx'",
|
|
22
22
|
"build:watch": "npm run build:js -- --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
|
+
"pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
|
|
24
25
|
"prepublish": "npm run build",
|
|
25
26
|
"test": "jest",
|
|
26
27
|
"test:watch": "npm run test -- --watchAll",
|
|
@@ -32,14 +33,14 @@
|
|
|
32
33
|
],
|
|
33
34
|
"types": "dist/index.d.ts",
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-data-format": "^0.4.
|
|
36
|
-
"@synerise/ds-dropdown": "^0.17.
|
|
37
|
-
"@synerise/ds-icon": "^0.58.
|
|
38
|
-
"@synerise/ds-input": "^0.19.
|
|
39
|
-
"@synerise/ds-scrollbar": "^0.6.
|
|
40
|
-
"@synerise/ds-tooltip": "^0.14.
|
|
41
|
-
"@synerise/ds-typography": "^0.13.
|
|
42
|
-
"@synerise/ds-utils": "^0.24.
|
|
36
|
+
"@synerise/ds-data-format": "^0.4.4",
|
|
37
|
+
"@synerise/ds-dropdown": "^0.17.83",
|
|
38
|
+
"@synerise/ds-icon": "^0.58.4",
|
|
39
|
+
"@synerise/ds-input": "^0.19.4",
|
|
40
|
+
"@synerise/ds-scrollbar": "^0.6.9",
|
|
41
|
+
"@synerise/ds-tooltip": "^0.14.6",
|
|
42
|
+
"@synerise/ds-typography": "^0.13.2",
|
|
43
|
+
"@synerise/ds-utils": "^0.24.18",
|
|
43
44
|
"dayjs": "^1.8.19",
|
|
44
45
|
"debounce": "^1.2.0",
|
|
45
46
|
"lodash": "^4.17.19",
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"@testing-library/react": "10.0.1",
|
|
55
56
|
"@types/debounce": "^1.2.1"
|
|
56
57
|
},
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "02f0a1dad6df5acf89b3d3defa6993716ba992fb"
|
|
58
59
|
}
|