@dktunited-techoff/techoff-suite-ui 1.14.0 → 1.14.1

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 (14) hide show
  1. package/esm/components/TsModal/TsModal.d.ts +1 -1
  2. package/esm/components/TsModal/TsModal.js +4 -3
  3. package/esm/components/TsModal/TsModal.js.map +1 -1
  4. package/esm/components/TsModal/TsModal.types.d.ts +2 -0
  5. package/esm/components/TsModal/__stories__/TsModal.stories.mdx +12 -0
  6. package/lib/components/TsModal/TsModal.d.ts +1 -1
  7. package/lib/components/TsModal/TsModal.js +4 -3
  8. package/lib/components/TsModal/TsModal.js.map +1 -1
  9. package/lib/components/TsModal/TsModal.types.d.ts +2 -0
  10. package/lib/components/TsModal/__stories__/TsModal.stories.mdx +12 -0
  11. package/package.json +1 -1
  12. package/src/components/TsModal/TsModal.tsx +24 -7
  13. package/src/components/TsModal/TsModal.types.ts +2 -0
  14. package/src/components/TsModal/__stories__/TsModal.stories.mdx +12 -0
package/esm/components/TsModal/TsModal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsModalProps } from './TsModal.types';
3
3
  import './TsModal.css';
4
- export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;
4
+ export declare const TsModal: ({ children, actionDisabled, actionLabel, actionLoading, actionIcon, style, title, onAction, onClose, }: TsModalProps) => React.JSX.Element;
package/esm/components/TsModal/TsModal.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { TsButton } from '../TsButton/TsButton';
3
3
  import './TsModal.css';
4
- export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
4
+ import { TsLoader } from '../TsLoader/TsLoader';
5
+ export const TsModal = ({ children, actionDisabled, actionLabel, actionLoading, actionIcon, style, title, onAction, onClose, }) => {
5
6
  // Rendering
6
7
  return (React.createElement("div", { className: "ts-modal-container" },
7
8
  React.createElement("div", { className: "ts-modal-blur" }),
@@ -10,8 +11,8 @@ export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAct
10
11
  React.createElement("div", { className: "ts-modal-title" }, title),
11
12
  React.createElement(TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
12
13
  React.createElement("div", { className: "ts-modal-content" }, children),
13
- React.createElement("div", { className: "ts-modal-footer" },
14
+ React.createElement("div", { className: "ts-modal-footer" }, !actionLoading ? (React.createElement(React.Fragment, null,
14
15
  React.createElement(TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
15
- React.createElement(TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
16
+ React.createElement(TsButton, { icon: actionIcon, variant: "primary", disabled: actionDisabled, onClick: onAction }, actionLabel))) : (React.createElement(TsLoader, null))))));
16
17
  };
17
18
  //# sourceMappingURL=TsModal.js.map
package/esm/components/TsModal/TsModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,QAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,GACM,EAAE,EAAE;IACjB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,CAAC,aAAa,CAAC,CAAC,CAAC,CAChB;gBACE,oBAAC,QAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,IACtF,WAAW,CACH,CACV,CACJ,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,OAAG,CACb,CACG,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsModal/TsModal.types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { CSSProperties, PropsWithChildren } from 'react';
2
2
  export type TsModalProps = {
3
+ actionDisabled?: boolean;
3
4
  actionLabel: string;
5
+ actionLoading?: boolean;
4
6
  actionIcon?: string;
5
7
  style?: CSSProperties;
6
8
  title: string;
package/esm/components/TsModal/__stories__/TsModal.stories.mdx CHANGED
@@ -6,6 +6,11 @@ import { icons } from '../../TsIcon/icons';
6
6
  <Meta title="Components/Modal" />
7
7
 
8
8
  export const modalArgTypes = {
9
+ actionDisabled: {
10
+ control: 'boolean',
11
+ description: 'Define if the action button is disabled',
12
+ table: { defaultValue: { summary: 'false' } },
13
+ },
9
14
  actionIcon: {
10
15
  control: 'select',
11
16
  options: Object.keys(icons),
@@ -15,6 +20,11 @@ export const modalArgTypes = {
15
20
  control: 'text',
16
21
  description: 'Label of the modal action button.',
17
22
  },
23
+ actionLoading: {
24
+ control: 'boolean',
25
+ description: 'Define if the action button is loading',
26
+ table: { defaultValue: { summary: 'false' } },
27
+ },
18
28
  title: {
19
29
  control: 'text',
20
30
  description: 'Title of the modal.',
@@ -40,8 +50,10 @@ The Modal Component is the main Component of the Overlay pattern and is used to
40
50
  name="Overview"
41
51
  args={{
42
52
  title: 'New modal',
53
+ actionDisabled: false,
43
54
  actionIcon: 'add',
44
55
  actionLabel: 'Create',
56
+ actionLoading: false,
45
57
  onAction: () => console.log('Action !'),
46
58
  onClose: () => console.log('Close !'),
47
59
  }}
package/lib/components/TsModal/TsModal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsModalProps } from './TsModal.types';
3
3
  import './TsModal.css';
4
- export declare const TsModal: ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => React.JSX.Element;
4
+ export declare const TsModal: ({ children, actionDisabled, actionLabel, actionLoading, actionIcon, style, title, onAction, onClose, }: TsModalProps) => React.JSX.Element;
package/lib/components/TsModal/TsModal.js CHANGED
@@ -4,7 +4,8 @@ exports.TsModal = void 0;
4
4
  const React = require("react");
5
5
  const TsButton_1 = require("../TsButton/TsButton");
6
6
  require("./TsModal.css");
7
- const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }) => {
7
+ const TsLoader_1 = require("../TsLoader/TsLoader");
8
+ const TsModal = ({ children, actionDisabled, actionLabel, actionLoading, actionIcon, style, title, onAction, onClose, }) => {
8
9
  // Rendering
9
10
  return (React.createElement("div", { className: "ts-modal-container" },
10
11
  React.createElement("div", { className: "ts-modal-blur" }),
@@ -13,9 +14,9 @@ const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, on
13
14
  React.createElement("div", { className: "ts-modal-title" }, title),
14
15
  React.createElement(TsButton_1.TsButton, { icon: "close", variant: "ghost", rounded: true, onClick: onClose })),
15
16
  React.createElement("div", { className: "ts-modal-content" }, children),
16
- React.createElement("div", { className: "ts-modal-footer" },
17
+ React.createElement("div", { className: "ts-modal-footer" }, !actionLoading ? (React.createElement(React.Fragment, null,
17
18
  React.createElement(TsButton_1.TsButton, { variant: "secondary", onClick: onClose }, "Cancel"),
18
- React.createElement(TsButton_1.TsButton, { icon: actionIcon, variant: "primary", onClick: onAction }, actionLabel)))));
19
+ React.createElement(TsButton_1.TsButton, { icon: actionIcon, variant: "primary", disabled: actionDisabled, onClick: onAction }, actionLabel))) : (React.createElement(TsLoader_1.TsLoader, null))))));
19
20
  };
20
21
  exports.TsModal = TsModal;
21
22
  //# sourceMappingURL=TsModal.js.map
package/lib/components/TsModal/TsModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,mDAAgD;AAChD,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC9G,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,mBAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,mBAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,IAC5D,WAAW,CACH,CACP,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,OAAO,WA0BlB"}
1
+ {"version":3,"file":"TsModal.js","sourceRoot":"","sources":["../../../src/components/TsModal/TsModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,mDAAgD;AAChD,yBAAuB;AACvB,mDAAgD;AAEzC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,GACM,EAAE,EAAE;IACjB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,6BAAK,SAAS,EAAC,eAAe,GAAG;QAEjC,6BAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YACpC,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;gBAE7C,oBAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,CAC/D;YAEN,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;YAElD,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,CAAC,aAAa,CAAC,CAAC,CAAC,CAChB;gBACE,oBAAC,mBAAQ,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,aAEnC;gBACX,oBAAC,mBAAQ,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,IACtF,WAAW,CACH,CACV,CACJ,CAAC,CAAC,CAAC,CACF,oBAAC,mBAAQ,OAAG,CACb,CACG,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,OAAO,WA0ClB"}
package/lib/components/TsModal/TsModal.types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { CSSProperties, PropsWithChildren } from 'react';
2
2
  export type TsModalProps = {
3
+ actionDisabled?: boolean;
3
4
  actionLabel: string;
5
+ actionLoading?: boolean;
4
6
  actionIcon?: string;
5
7
  style?: CSSProperties;
6
8
  title: string;
package/lib/components/TsModal/__stories__/TsModal.stories.mdx CHANGED
@@ -6,6 +6,11 @@ import { icons } from '../../TsIcon/icons';
6
6
  <Meta title="Components/Modal" />
7
7
 
8
8
  export const modalArgTypes = {
9
+ actionDisabled: {
10
+ control: 'boolean',
11
+ description: 'Define if the action button is disabled',
12
+ table: { defaultValue: { summary: 'false' } },
13
+ },
9
14
  actionIcon: {
10
15
  control: 'select',
11
16
  options: Object.keys(icons),
@@ -15,6 +20,11 @@ export const modalArgTypes = {
15
20
  control: 'text',
16
21
  description: 'Label of the modal action button.',
17
22
  },
23
+ actionLoading: {
24
+ control: 'boolean',
25
+ description: 'Define if the action button is loading',
26
+ table: { defaultValue: { summary: 'false' } },
27
+ },
18
28
  title: {
19
29
  control: 'text',
20
30
  description: 'Title of the modal.',
@@ -40,8 +50,10 @@ The Modal Component is the main Component of the Overlay pattern and is used to
40
50
  name="Overview"
41
51
  args={{
42
52
  title: 'New modal',
53
+ actionDisabled: false,
43
54
  actionIcon: 'add',
44
55
  actionLabel: 'Create',
56
+ actionLoading: false,
45
57
  onAction: () => console.log('Action !'),
46
58
  onClose: () => console.log('Close !'),
47
59
  }}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.14.0",
3
+ "version": "1.14.1",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsModal/TsModal.tsx CHANGED
@@ -2,8 +2,19 @@ import * as React from 'react';
2
2
  import { TsModalProps } from './TsModal.types';
3
3
  import { TsButton } from '../TsButton/TsButton';
4
4
  import './TsModal.css';
5
+ import { TsLoader } from '../TsLoader/TsLoader';
5
6
 
6
- export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAction, onClose }: TsModalProps) => {
7
+ export const TsModal = ({
8
+ children,
9
+ actionDisabled,
10
+ actionLabel,
11
+ actionLoading,
12
+ actionIcon,
13
+ style,
14
+ title,
15
+ onAction,
16
+ onClose,
17
+ }: TsModalProps) => {
7
18
  // Rendering
8
19
  return (
9
20
  <div className="ts-modal-container">
@@ -19,12 +30,18 @@ export const TsModal = ({ children, actionLabel, actionIcon, style, title, onAct
19
30
  <div className="ts-modal-content">{children}</div>
20
31
 
21
32
  <div className="ts-modal-footer">
22
- <TsButton variant="secondary" onClick={onClose}>
23
- Cancel
24
- </TsButton>
25
- <TsButton icon={actionIcon} variant="primary" onClick={onAction}>
26
- {actionLabel}
27
- </TsButton>
33
+ {!actionLoading ? (
34
+ <>
35
+ <TsButton variant="secondary" onClick={onClose}>
36
+ Cancel
37
+ </TsButton>
38
+ <TsButton icon={actionIcon} variant="primary" disabled={actionDisabled} onClick={onAction}>
39
+ {actionLabel}
40
+ </TsButton>
41
+ </>
42
+ ) : (
43
+ <TsLoader />
44
+ )}
28
45
  </div>
29
46
  </div>
30
47
  </div>
package/src/components/TsModal/TsModal.types.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { CSSProperties, PropsWithChildren } from 'react';
2
2
 
3
3
  export type TsModalProps = {
4
+ actionDisabled?: boolean;
4
5
  actionLabel: string;
6
+ actionLoading?: boolean;
5
7
  actionIcon?: string;
6
8
  style?: CSSProperties;
7
9
  title: string;
package/src/components/TsModal/__stories__/TsModal.stories.mdx CHANGED
@@ -6,6 +6,11 @@ import { icons } from '../../TsIcon/icons';
6
6
  <Meta title="Components/Modal" />
7
7
 
8
8
  export const modalArgTypes = {
9
+ actionDisabled: {
10
+ control: 'boolean',
11
+ description: 'Define if the action button is disabled',
12
+ table: { defaultValue: { summary: 'false' } },
13
+ },
9
14
  actionIcon: {
10
15
  control: 'select',
11
16
  options: Object.keys(icons),
@@ -15,6 +20,11 @@ export const modalArgTypes = {
15
20
  control: 'text',
16
21
  description: 'Label of the modal action button.',
17
22
  },
23
+ actionLoading: {
24
+ control: 'boolean',
25
+ description: 'Define if the action button is loading',
26
+ table: { defaultValue: { summary: 'false' } },
27
+ },
18
28
  title: {
19
29
  control: 'text',
20
30
  description: 'Title of the modal.',
@@ -40,8 +50,10 @@ The Modal Component is the main Component of the Overlay pattern and is used to
40
50
  name="Overview"
41
51
  args={{
42
52
  title: 'New modal',
53
+ actionDisabled: false,
43
54
  actionIcon: 'add',
44
55
  actionLabel: 'Create',
56
+ actionLoading: false,
45
57
  onAction: () => console.log('Action !'),
46
58
  onClose: () => console.log('Close !'),
47
59
  }}