@rolster/react-components 18.21.19 → 18.21.20
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/dist/cjs/assets/{index-KtbnpnSR.css → index-CiASINsv.css} +18 -5
- package/dist/cjs/index.js +11 -10
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-KtbnpnSR.css → index-CiASINsv.css} +18 -5
- package/dist/es/index.js +11 -10
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.css +16 -1
- package/dist/esm/components/atoms/Button/Button.d.ts +1 -1
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/organisms/Confirmation/Confirmation.d.ts +5 -0
- package/dist/esm/components/organisms/Confirmation/Confirmation.js +11 -10
- package/dist/esm/components/organisms/Confirmation/Confirmation.js.map +1 -1
- package/dist/esm/components/organisms/Snackbar/Snackbar.css +2 -4
- package/package.json +2 -2
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
--pvt-button-content-animation: none;
|
|
6
6
|
--pvt-button-content-visibility: hidden;
|
|
7
7
|
--pvt-button-ripple-background: var(--rls-theme-color-700);
|
|
8
|
+
--pvt-classic-background: var(--rls-app-color-200);
|
|
9
|
+
--pvt-classic-font-color: var(--rls-app-color-500);
|
|
10
|
+
--pvt-classic-border: none;
|
|
8
11
|
--pvt-raised-background: var(--rls-theme-color-500);
|
|
9
12
|
--pvt-raised-font-color: var(--rls-theme-font-500);
|
|
10
13
|
--pvt-raised-border: none;
|
|
@@ -37,11 +40,14 @@
|
|
|
37
40
|
--pvt-button-content-visibility: visible;
|
|
38
41
|
}
|
|
39
42
|
.rls-button:not(:disabled):hover {
|
|
43
|
+
--pvt-classic-background: var(--rls-theme-color-200);
|
|
44
|
+
--pvt-classic-font-color: var(--rls-theme-color-600);
|
|
45
|
+
--pvt-classic-border: none;
|
|
40
46
|
--pvt-raised-background: var(--rls-theme-color-700);
|
|
41
47
|
--pvt-raised-font-color: var(--rls-theme-font-900);
|
|
42
48
|
--pvt-raised-border: none;
|
|
43
49
|
--pvt-flat-background: var(--rls-theme-color-600);
|
|
44
|
-
--pvt-flat-font-color: var(--rls-theme-
|
|
50
|
+
--pvt-flat-font-color: var(--rls-theme-color-050);
|
|
45
51
|
--pvt-flat-border: none;
|
|
46
52
|
--pvt-stroked-background: var(--rls-theme-color-100);
|
|
47
53
|
--pvt-stroked-font-color: var(--rls-theme-color-700);
|
|
@@ -57,6 +63,9 @@
|
|
|
57
63
|
--pvt-gradient-border: none;
|
|
58
64
|
}
|
|
59
65
|
.rls-button:disabled {
|
|
66
|
+
--pvt-classic-background: var(--rls-app-color-100);
|
|
67
|
+
--pvt-classic-font-color: var(--rls-app-color-400);
|
|
68
|
+
--pvt-classic-border: none;
|
|
60
69
|
--pvt-raised-background: var(--rls-theme-color-200);
|
|
61
70
|
--pvt-raised-font-color: var(--rls-theme-color-400);
|
|
62
71
|
--pvt-raised-border: none;
|
|
@@ -109,6 +118,12 @@
|
|
|
109
118
|
animation: var(--pvt-button-content-animation);
|
|
110
119
|
visibility: var(--pvt-button-content-visibility);
|
|
111
120
|
}
|
|
121
|
+
.rls-button__content--classic {
|
|
122
|
+
--pvt-button-content-background: var(--pvt-classic-background);
|
|
123
|
+
--pvt-button-content-font-color: var(--pvt-classic-font-color);
|
|
124
|
+
--pvt-button-content-border: var(--pvt-classic-border);
|
|
125
|
+
--pvt-button-ripple-background: var(--rls-theme-font-900);
|
|
126
|
+
}
|
|
112
127
|
.rls-button__content--raised {
|
|
113
128
|
--pvt-button-content-background: var(--pvt-raised-background);
|
|
114
129
|
--pvt-button-content-font-color: var(--pvt-raised-font-color);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MouseEventHandler } from 'react';
|
|
2
2
|
import { RlsComponent } from '../../definitions';
|
|
3
3
|
import './Button.css';
|
|
4
|
-
export type RlsButtonType = 'raised' | 'flat' | 'stroked' | 'outline' | 'ghost' | 'gradient';
|
|
4
|
+
export type RlsButtonType = 'classic' | 'raised' | 'flat' | 'stroked' | 'outline' | 'ghost' | 'gradient';
|
|
5
5
|
interface ButtonProps extends RlsComponent {
|
|
6
6
|
type: RlsButtonType;
|
|
7
7
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,cAAc,CAAC;AAmBtB,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACK;IACZ,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,iBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,OAAO,eACL,QAAQ,EACnB,QAAQ,EAAE,QAAQ,YAElB,eAAK,SAAS,EAAE,SAAS,aACtB,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,EAC5C,QAAQ,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,EAC/D,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,IACzC,GACC,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { PartialSealed } from '@rolster/commons';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
+
import { RlsButtonType } from '../../atoms/Button/Button';
|
|
3
4
|
import { RlsTheme } from '../../definitions';
|
|
4
5
|
import './Confirmation.css';
|
|
5
6
|
export declare class ConfirmationResult extends PartialSealed<void, void, {
|
|
@@ -13,7 +14,9 @@ type Result = Promise<ConfirmationResult>;
|
|
|
13
14
|
interface ConfirmationButton {
|
|
14
15
|
label: string;
|
|
15
16
|
onClick: () => void;
|
|
17
|
+
type: RlsButtonType;
|
|
16
18
|
identifier?: string;
|
|
19
|
+
rlsTheme?: RlsTheme;
|
|
17
20
|
}
|
|
18
21
|
interface ConfirmationBasic {
|
|
19
22
|
content?: ReactNode;
|
|
@@ -29,6 +32,8 @@ interface ConfirmationProps extends ConfirmationBasic {
|
|
|
29
32
|
interface ConfirmationAction {
|
|
30
33
|
label: string;
|
|
31
34
|
identifier?: string;
|
|
35
|
+
rlsTheme?: RlsTheme;
|
|
36
|
+
type?: RlsButtonType;
|
|
32
37
|
}
|
|
33
38
|
interface ConfirmationOptions extends ConfirmationBasic {
|
|
34
39
|
approved?: ConfirmationAction;
|
|
@@ -18,27 +18,26 @@ export function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle,
|
|
|
18
18
|
const className = useMemo(() => {
|
|
19
19
|
return renderClassStatus('rls-confirmation', { visible });
|
|
20
20
|
}, [visible]);
|
|
21
|
-
return (_jsxs("div", { className: className, "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-confirmation__component", children: [_jsxs("div", { className: "rls-confirmation__header", children: [title && _jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (_jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), _jsx("div", { className: "rls-confirmation__body", children: content && (_jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (_jsx("div", { className: "rls-confirmation__footer", children: _jsxs("div", { className: "rls-confirmation__actions", children: [approved && (_jsx(RlsButton, { identifier: approved.identifier, type:
|
|
21
|
+
return (_jsxs("div", { className: className, "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-confirmation__component", children: [_jsxs("div", { className: "rls-confirmation__header", children: [title && _jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (_jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), _jsx("div", { className: "rls-confirmation__body", children: content && (_jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (_jsx("div", { className: "rls-confirmation__footer", children: _jsxs("div", { className: "rls-confirmation__actions", children: [approved && (_jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (_jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), _jsx("div", { className: "rls-confirmation__backdrop" })] }));
|
|
22
22
|
}
|
|
23
23
|
export function useConfirmation() {
|
|
24
24
|
const [config, setConfig] = useState({});
|
|
25
25
|
const [visible, setVisible] = useState(false);
|
|
26
|
-
const
|
|
26
|
+
const component = ReactDOM.createPortal(_jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
|
|
27
27
|
const confirmation = useCallback((options) => {
|
|
28
28
|
return new Promise((resolve) => {
|
|
29
|
-
const {
|
|
29
|
+
const { approved, reject } = options;
|
|
30
30
|
setConfig({
|
|
31
|
-
|
|
32
|
-
rlsTheme,
|
|
33
|
-
subtitle,
|
|
34
|
-
title,
|
|
31
|
+
...options,
|
|
35
32
|
approved: {
|
|
36
33
|
label: approved?.label ?? reactI18n('confirmationActionApproved'),
|
|
37
34
|
onClick: () => {
|
|
38
35
|
setVisible(false);
|
|
39
36
|
resolve(ConfirmationResult.approved());
|
|
40
37
|
},
|
|
41
|
-
identifier: approved?.identifier
|
|
38
|
+
identifier: approved?.identifier,
|
|
39
|
+
rlsTheme: approved?.rlsTheme,
|
|
40
|
+
type: approved?.type ?? 'raised'
|
|
42
41
|
},
|
|
43
42
|
reject: reject
|
|
44
43
|
? {
|
|
@@ -47,7 +46,9 @@ export function useConfirmation() {
|
|
|
47
46
|
setVisible(false);
|
|
48
47
|
resolve(ConfirmationResult.reject());
|
|
49
48
|
},
|
|
50
|
-
identifier: reject.identifier
|
|
49
|
+
identifier: reject.identifier,
|
|
50
|
+
rlsTheme: reject.rlsTheme,
|
|
51
|
+
type: reject?.type ?? 'classic'
|
|
51
52
|
}
|
|
52
53
|
: undefined
|
|
53
54
|
});
|
|
@@ -55,7 +56,7 @@ export function useConfirmation() {
|
|
|
55
56
|
});
|
|
56
57
|
}, []);
|
|
57
58
|
return {
|
|
58
|
-
RlsConfirmation:
|
|
59
|
+
RlsConfirmation: component,
|
|
59
60
|
confirmation
|
|
60
61
|
};
|
|
61
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAa,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Confirmation/Confirmation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,9 +11,7 @@
|
|
|
11
11
|
padding: var(--rls-sizing-x6);
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
border-radius: var(--rls-sizing-x4);
|
|
14
|
-
background: var(--rls-
|
|
15
|
-
box-shadow: var(--rls-light-shadow-bottom-4);
|
|
16
|
-
border: var(--rls-theme-border-1-300);
|
|
14
|
+
background: var(--rls-theme-color-100);
|
|
17
15
|
transform: translate(-50%, 100%);
|
|
18
16
|
transition: transform 160ms 0ms var(--rls-standard-curve);
|
|
19
17
|
}
|
|
@@ -21,7 +19,7 @@
|
|
|
21
19
|
transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
|
|
22
20
|
}
|
|
23
21
|
.rls-snackbar__avatar {
|
|
24
|
-
--rlc-icon-color: var(--rls-
|
|
22
|
+
--rlc-icon-color: var(--rls-theme-color-050);
|
|
25
23
|
display: flex;
|
|
26
24
|
justify-content: center;
|
|
27
25
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "18.21.
|
|
3
|
+
"version": "18.21.20",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
50
50
|
"@rollup/plugin-typescript": "^11.1.3",
|
|
51
51
|
"@rolster/rollup": "^1.0.6",
|
|
52
|
-
"@rolster/styles-foundations": "^2.4.
|
|
52
|
+
"@rolster/styles-foundations": "^2.4.16",
|
|
53
53
|
"@rolster/types": "^1.1.0",
|
|
54
54
|
"@types/node-sass": "^4.11.4",
|
|
55
55
|
"@types/react": "^18.0.28",
|