@synerise/ds-popconfirm 0.9.13 → 0.10.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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +29 -28
  3. package/dist/Popconfirm.js +4 -2
  4. package/dist/Popconfirm.styles.d.ts +3 -1
  5. package/dist/Popconfirm.styles.js +4 -1
  6. package/dist/Popconfirm.types.d.ts +3 -1
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popconfirm@0.9.13...@synerise/ds-popconfirm@0.10.0) (2022-09-08)
7
+
8
+
9
+ ### Features
10
+
11
+ * **popconfirm:** add buttonsAlign prop ([d4f14af](https://github.com/Synerise/synerise-design/commit/d4f14af7e6410394ad4ab440384ee973cea080e1))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.9.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popconfirm@0.9.12...@synerise/ds-popconfirm@0.9.13) (2022-08-31)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-popconfirm
package/README.md CHANGED
@@ -29,30 +29,31 @@ import Popconfirm from '@synerise/ds-popconfirm';
29
29
 
30
30
  ## API
31
31
 
32
- | Property | Description | Type | Default |
33
- | ------------------- | -------------------------------------- | ------------------------ | ------------------------------------ |
34
- | cancelText | Text of the Cancel button | string | `Cancel` |
35
- | okText | Text of the Confirm button | string | `OK` |
36
- | okType | Button type of the Confirm button | string | `primary` |
37
- | title | Title of the confirmation box | string / React.ReactNode | - |
38
- | description | Description of the confirmation box | string / React.ReactNode | - |
39
- | images | Urls of images displayed as a carousel | string[] | `[]` |
40
- | imagesAutoplay | Whether to autoplay images | boolean | `false` |
41
- | imagesAutoplaySpeed | Speed of autoplay [ms] | number | `5000` |
42
- | onCancel | Callback of cancel | (e: Event) => void | - |
43
- | onConfirm | Callback of confirmation | (e: Event) => void | - |
44
- | icon | Customize icon of confirmation | React.ReactNode | `<Icon type="exclamation-circle" />` |
45
- | disabled | Whether component is disabled | boolean | `false` |
46
- | withLink | Text with highlited text | React.ReactNode | - |
47
- | closeIcon | Icon to close popconfirm | React.ReactNode | - |
48
- | hideButtons | prop to hide buttons | React.ReactNode | - |
49
- | titlePadding | prop to set padding | boolean | `false` |
32
+ | Property | Description | Type | Default |
33
+ | ------------------- | -------------------------------------- | ---------------------------- | ------------------------------------ |
34
+ | cancelText | Text of the Cancel button | string | `Cancel` |
35
+ | okText | Text of the Confirm button | string | `OK` |
36
+ | okType | Button type of the Confirm button | string | `primary` |
37
+ | title | Title of the confirmation box | string / React.ReactNode | - |
38
+ | description | Description of the confirmation box | string / React.ReactNode | - |
39
+ | images | Urls of images displayed as a carousel | string[] | `[]` |
40
+ | imagesAutoplay | Whether to autoplay images | boolean | `false` |
41
+ | imagesAutoplaySpeed | Speed of autoplay [ms] | number | `5000` |
42
+ | onCancel | Callback of cancel | (e: Event) => void | - |
43
+ | onConfirm | Callback of confirmation | (e: Event) => void | - |
44
+ | icon | Customize icon of confirmation | React.ReactNode | `<Icon type="exclamation-circle" />` |
45
+ | disabled | Whether component is disabled | boolean | `false` |
46
+ | withLink | Text with highlited text | React.ReactNode | - |
47
+ | closeIcon | Icon to close popconfirm | React.ReactNode | - |
48
+ | hideButtons | prop to hide buttons | React.ReactNode | - |
49
+ | titlePadding | prop to set padding | boolean | `false` |
50
+ | buttonsAlign | Sets footer buttons align | 'right' / 'left' / undefined | `'right'` |
50
51
 
51
52
  # Popcofirm.ConfirmMessage
52
53
 
53
54
  ## Usage
54
55
 
55
- ````javascript
56
+ ```javascript
56
57
  import Popconfirm from '@synerise/ds-popconfirm';
57
58
 
58
59
  <Popconfirm.ConfirmMessage
@@ -68,7 +69,8 @@ import Popconfirm from '@synerise/ds-popconfirm';
68
69
  <Button>
69
70
  Click
70
71
  </Button>
71
- </Popconfirm.ConfirmMessage>```
72
+ </Popconfirm.ConfirmMessage>
73
+ ```
72
74
 
73
75
  ## Demo
74
76
 
@@ -76,11 +78,10 @@ import Popconfirm from '@synerise/ds-popconfirm';
76
78
 
77
79
  ## API
78
80
 
79
- | Property | Description | Type | Default |
80
- | ------------ | ------------------------------------------------ | --------------------- | -------- |
81
- | title | text confirm message | string | - |
82
- | icon | icon component | React.ReactNode | - |
83
- | displayDuration | confirm message display time in ms | number | 5000 |
84
- | placement | position of confirm message `left`, `top`, `right`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `leftTop`, `leftBottom,`, `rightTop`, `rightBottom` | string | `topLeft`|
85
- | onClick | method which returns a showConfirmMessage callback | (showConfirmMessage: () => void) => void | - |
86
- ````
81
+ | Property | Description | Type | Default |
82
+ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------- |
83
+ | title | text confirm message | string | - |
84
+ | icon | icon component | React.ReactNode | - |
85
+ | displayDuration | confirm message display time in ms | number | 5000 |
86
+ | placement | position of confirm message `left`, `top`, `right`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `leftTop`, `leftBottom,`, `rightTop`, `rightBottom` | string | `topLeft` |
87
+ | onClick | method which returns a showConfirmMessage callback | (showConfirmMessage: () => void) => void | - |
package/dist/Popconfirm.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["icon", "title", "description", "images", "imagesAutoplay", "imagesAutoplaySpeed", "withLink", "closeIcon", "titlePadding", "onCancel", "cancelButtonProps", "onConfirm", "okButtonProps", "okType", "hideButtons", "cancelText", "okText"];
1
+ var _excluded = ["icon", "title", "description", "images", "imagesAutoplay", "imagesAutoplaySpeed", "withLink", "closeIcon", "titlePadding", "onCancel", "cancelButtonProps", "onConfirm", "okButtonProps", "okType", "hideButtons", "cancelText", "okText", "buttonsAlign"];
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
 
@@ -32,6 +32,7 @@ var Popconfirm = function Popconfirm(_ref) {
32
32
  hideButtons = _ref.hideButtons,
33
33
  cancelText = _ref.cancelText,
34
34
  okText = _ref.okText,
35
+ buttonsAlign = _ref.buttonsAlign,
35
36
  antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
36
37
 
37
38
  var renderImageCarousel = React.useMemo(function () {
@@ -70,7 +71,8 @@ var Popconfirm = function Popconfirm(_ref) {
70
71
  }
71
72
  },
72
73
  title: /*#__PURE__*/React.createElement(S.PopconfirmContent, {
73
- ref: popupRef
74
+ ref: popupRef,
75
+ buttonsAlign: buttonsAlign
74
76
  }, /*#__PURE__*/React.createElement(S.PopconfirmWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmContentWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmHeaderWrapper, null, icon && /*#__PURE__*/React.createElement(S.PopconfirmIcon, null, icon), /*#__PURE__*/React.createElement(S.PopconfirmTitle, null, title)), /*#__PURE__*/React.createElement(S.PopconfirmTextWrapper, null, description && /*#__PURE__*/React.createElement(S.PopconfirmDescription, {
75
77
  titlePadding: !titlePadding
76
78
  }, description), withLink && /*#__PURE__*/React.createElement(S.LinkWrapper, null, withLink))), closeIcon && /*#__PURE__*/React.createElement(S.PopconfirmCloseIcon, {
package/dist/Popconfirm.styles.d.ts CHANGED
@@ -2,7 +2,9 @@
2
2
  import { Props as ButtonProps } from '@synerise/ds-button/dist/Button.types';
3
3
  import Button from '@synerise/ds-button';
4
4
  export declare const AntdPopconfirm: import("styled-components").StyledComponent<({ ...rest }: any) => JSX.Element, any, {}, never>;
5
- export declare const PopconfirmContent: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const PopconfirmContent: import("styled-components").StyledComponent<"div", any, {
6
+ buttonsAlign?: "left" | "right" | undefined;
7
+ }, never>;
6
8
  export declare const PopconfirmTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
7
9
  export declare const PopconfirmButton: import("styled-components").StyledComponent<typeof Button, any, ButtonProps, never>;
8
10
  export declare const PopconfirmButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Popconfirm.styles.js CHANGED
@@ -15,7 +15,10 @@ export var AntdPopconfirm = styled(function (_ref) {
15
15
  export var PopconfirmContent = styled.div.withConfig({
16
16
  displayName: "Popconfirmstyles__PopconfirmContent",
17
17
  componentId: "sc-19dzptq-1"
18
- })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:0px;.ant-carousel{position:relative;width:100%;margin-top:24px;.slick-track{width:100%;}.slick-dots-bottom{position:relative;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:24px 0 0;margin:0;li{width:8px;height:8px;border-radius:50%;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center;button{box-sizing:content-box;background-color:", ";border:2px solid ", ";height:4px;width:4px;border-radius:50%;opacity:1;}}li.slick-active{button{border:2px solid ", ";background-color:", ";}}}}"], function (props) {
18
+ })(["display:flex;flex-direction:column;align-items:", ";justify-content:flex-start;margin:0px;.ant-carousel{position:relative;width:100%;margin-top:24px;.slick-track{width:100%;}.slick-dots-bottom{position:relative;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:24px 0 0;margin:0;li{width:8px;height:8px;border-radius:50%;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center;button{box-sizing:content-box;background-color:", ";border:2px solid ", ";height:4px;width:4px;border-radius:50%;opacity:1;}}li.slick-active{button{border:2px solid ", ";background-color:", ";}}}}"], function (_ref2) {
19
+ var buttonsAlign = _ref2.buttonsAlign;
20
+ return buttonsAlign === 'left' ? 'flex-start' : 'flex-end';
21
+ }, function (props) {
19
22
  return props.theme.palette['grey-600'];
20
23
  }, function (props) {
21
24
  return props.theme.palette.white;
package/dist/Popconfirm.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { PopconfirmProps } from 'antd/lib/popconfirm';
3
3
  import { ConfirmMessageProps } from './ConfirmMessage/ConfirmMessage.types';
4
- export declare type PopconfirmType = React.FC<PopconfirmProps & {
4
+ export declare type PopconfirmType = React.FC<Omit<PopconfirmProps, 'okType'> & {
5
5
  description?: string | React.ReactNode;
6
6
  images?: string[];
7
7
  imagesAutoplay?: boolean;
@@ -11,6 +11,8 @@ export declare type PopconfirmType = React.FC<PopconfirmProps & {
11
11
  closeIcon?: React.ReactNode;
12
12
  titlePadding?: boolean;
13
13
  hideButtons?: React.ReactNode;
14
+ buttonsAlign?: 'left' | 'right';
15
+ okType?: PopconfirmProps['okType'] | string;
14
16
  }> & {
15
17
  ConfirmMessage: React.FC<ConfirmMessageProps>;
16
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-popconfirm",
3
- "version": "0.9.13",
3
+ "version": "0.10.0",
4
4
  "description": "Popconfirm UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
45
45
  "devDependencies": {
46
46
  "@synerise/ds-utils": "^0.11.5"
47
47
  },
48
- "gitHead": "ef480757296035e4ba2928cd169a98458477b8d1"
48
+ "gitHead": "fa548181a583df5c724b9ed0ebcd3141efe6e512"
49
49
  }