@ankjs/react-ui 1.0.16 → 1.0.17
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/constants/colors.d.ts +20 -0
- package/dist/index.cjs +12 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +13 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/types/buttonTypes.d.ts +18 -0
- package/dist/types/colorType.d.ts +5 -0
- package/package.json +1 -1
- package/src/components/button/Button.tsx +63 -6
- package/src/constants/colors.ts +10 -0
- package/src/providers/AnkThemeProvider.tsx +0 -1
- package/src/providers/MainUiView.tsx +0 -3
- package/src/types/buttonTypes.ts +19 -3
- package/src/types/colorType.ts +5 -0
|
@@ -1,39 +1,59 @@
|
|
|
1
1
|
export declare const light: {
|
|
2
2
|
primary: string;
|
|
3
|
+
primaryDeep: string;
|
|
3
4
|
primaryColor: string;
|
|
4
5
|
pageBg: string;
|
|
5
6
|
mainBgColor: string;
|
|
6
7
|
backgroundColor: string;
|
|
7
8
|
secondryBgColor: string;
|
|
8
9
|
color: string;
|
|
10
|
+
buttonBgActive: string;
|
|
11
|
+
buttonColorActive: string;
|
|
12
|
+
buttonBgDeactivate: string;
|
|
13
|
+
buttonColorDeactivate: string;
|
|
9
14
|
};
|
|
10
15
|
export declare const dark: {
|
|
11
16
|
primary: string;
|
|
17
|
+
primaryDeep: string;
|
|
12
18
|
primaryColor: string;
|
|
13
19
|
mainBgColor: string;
|
|
14
20
|
pageBg: string;
|
|
15
21
|
backgroundColor: string;
|
|
16
22
|
secondryBgColor: string;
|
|
17
23
|
color: string;
|
|
24
|
+
buttonBgActive: string;
|
|
25
|
+
buttonColorActive: string;
|
|
26
|
+
buttonBgDeactivate: string;
|
|
27
|
+
buttonColorDeactivate: string;
|
|
18
28
|
};
|
|
19
29
|
declare const colors: {
|
|
20
30
|
light: {
|
|
21
31
|
primary: string;
|
|
32
|
+
primaryDeep: string;
|
|
22
33
|
primaryColor: string;
|
|
23
34
|
pageBg: string;
|
|
24
35
|
mainBgColor: string;
|
|
25
36
|
backgroundColor: string;
|
|
26
37
|
secondryBgColor: string;
|
|
27
38
|
color: string;
|
|
39
|
+
buttonBgActive: string;
|
|
40
|
+
buttonColorActive: string;
|
|
41
|
+
buttonBgDeactivate: string;
|
|
42
|
+
buttonColorDeactivate: string;
|
|
28
43
|
};
|
|
29
44
|
dark: {
|
|
30
45
|
primary: string;
|
|
46
|
+
primaryDeep: string;
|
|
31
47
|
primaryColor: string;
|
|
32
48
|
mainBgColor: string;
|
|
33
49
|
pageBg: string;
|
|
34
50
|
backgroundColor: string;
|
|
35
51
|
secondryBgColor: string;
|
|
36
52
|
color: string;
|
|
53
|
+
buttonBgActive: string;
|
|
54
|
+
buttonColorActive: string;
|
|
55
|
+
buttonBgDeactivate: string;
|
|
56
|
+
buttonColorDeactivate: string;
|
|
37
57
|
};
|
|
38
58
|
};
|
|
39
59
|
export default colors;
|
package/dist/index.cjs
CHANGED
|
@@ -30,21 +30,31 @@ const useSystemTheme = () => {
|
|
|
30
30
|
|
|
31
31
|
const light = {
|
|
32
32
|
primary: 'red',
|
|
33
|
+
primaryDeep: "#8404043b",
|
|
33
34
|
primaryColor: 'red',
|
|
34
35
|
pageBg: '#8d8d8d',
|
|
35
36
|
mainBgColor: '#fff',
|
|
36
37
|
backgroundColor: '#f0f0f0',
|
|
37
38
|
secondryBgColor: '#808080',
|
|
38
39
|
color: '#000',
|
|
40
|
+
buttonBgActive: "red",
|
|
41
|
+
buttonColorActive: "#fdfdfd3b",
|
|
42
|
+
buttonBgDeactivate: "#8404043b",
|
|
43
|
+
buttonColorDeactivate: "#5d13133b"
|
|
39
44
|
};
|
|
40
45
|
const dark = {
|
|
41
46
|
primary: 'red',
|
|
47
|
+
primaryDeep: "#8404043b",
|
|
42
48
|
primaryColor: 'red',
|
|
43
49
|
mainBgColor: '#000',
|
|
44
50
|
pageBg: '#333',
|
|
45
51
|
backgroundColor: '#444',
|
|
46
52
|
secondryBgColor: '808080',
|
|
47
53
|
color: '#eee',
|
|
54
|
+
buttonBgActive: "red",
|
|
55
|
+
buttonColorActive: "#fdfdfd3b",
|
|
56
|
+
buttonBgDeactivate: "#8404043b",
|
|
57
|
+
buttonColorDeactivate: "#5d13133b"
|
|
48
58
|
};
|
|
49
59
|
|
|
50
60
|
const defaultColorsObject = {
|
|
@@ -94,7 +104,7 @@ const useThemeColors = (props) => {
|
|
|
94
104
|
|
|
95
105
|
const MainUiView = (props) => {
|
|
96
106
|
const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
|
|
97
|
-
|
|
107
|
+
useThemeColors();
|
|
98
108
|
const { mainBgColor, color } = useThemeColors();
|
|
99
109
|
const bg = autoApply ? mainBgColor : backgroundColor;
|
|
100
110
|
const text = autoApply ? color : fontolor;
|
|
@@ -106,7 +116,7 @@ const MainUiView = (props) => {
|
|
|
106
116
|
overflow,
|
|
107
117
|
...style
|
|
108
118
|
};
|
|
109
|
-
return (jsxRuntime.
|
|
119
|
+
return (jsxRuntime.jsx("div", { style: styleContener, children: children }));
|
|
110
120
|
};
|
|
111
121
|
|
|
112
122
|
const AnkThemeProvider = (props) => {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["createContext","useState","useEffect","defaultLight","defaultDark","useContext","light","dark","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["createContext","useState","useEffect","defaultLight","defaultDark","useContext","light","dark","_jsx","useCallback","useMemo"],"mappings":"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"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useState, useEffect, useContext, useCallback, useMemo } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -26,21 +26,31 @@ const useSystemTheme = () => {
|
|
|
26
26
|
|
|
27
27
|
const light = {
|
|
28
28
|
primary: 'red',
|
|
29
|
+
primaryDeep: "#8404043b",
|
|
29
30
|
primaryColor: 'red',
|
|
30
31
|
pageBg: '#8d8d8d',
|
|
31
32
|
mainBgColor: '#fff',
|
|
32
33
|
backgroundColor: '#f0f0f0',
|
|
33
34
|
secondryBgColor: '#808080',
|
|
34
35
|
color: '#000',
|
|
36
|
+
buttonBgActive: "red",
|
|
37
|
+
buttonColorActive: "#fdfdfd3b",
|
|
38
|
+
buttonBgDeactivate: "#8404043b",
|
|
39
|
+
buttonColorDeactivate: "#5d13133b"
|
|
35
40
|
};
|
|
36
41
|
const dark = {
|
|
37
42
|
primary: 'red',
|
|
43
|
+
primaryDeep: "#8404043b",
|
|
38
44
|
primaryColor: 'red',
|
|
39
45
|
mainBgColor: '#000',
|
|
40
46
|
pageBg: '#333',
|
|
41
47
|
backgroundColor: '#444',
|
|
42
48
|
secondryBgColor: '808080',
|
|
43
49
|
color: '#eee',
|
|
50
|
+
buttonBgActive: "red",
|
|
51
|
+
buttonColorActive: "#fdfdfd3b",
|
|
52
|
+
buttonBgDeactivate: "#8404043b",
|
|
53
|
+
buttonColorDeactivate: "#5d13133b"
|
|
44
54
|
};
|
|
45
55
|
|
|
46
56
|
const defaultColorsObject = {
|
|
@@ -90,7 +100,7 @@ const useThemeColors = (props) => {
|
|
|
90
100
|
|
|
91
101
|
const MainUiView = (props) => {
|
|
92
102
|
const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
|
|
93
|
-
|
|
103
|
+
useThemeColors();
|
|
94
104
|
const { mainBgColor, color } = useThemeColors();
|
|
95
105
|
const bg = autoApply ? mainBgColor : backgroundColor;
|
|
96
106
|
const text = autoApply ? color : fontolor;
|
|
@@ -102,7 +112,7 @@ const MainUiView = (props) => {
|
|
|
102
112
|
overflow,
|
|
103
113
|
...style
|
|
104
114
|
};
|
|
105
|
-
return (
|
|
115
|
+
return (jsx("div", { style: styleContener, children: children }));
|
|
106
116
|
};
|
|
107
117
|
|
|
108
118
|
const AnkThemeProvider = (props) => {
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["defaultLight","defaultDark","light","dark","
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["defaultLight","defaultDark","light","dark","_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,22 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
1
2
|
export interface ButtonProps {
|
|
3
|
+
name?: string;
|
|
2
4
|
label?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
width?: CSSProperties['width'];
|
|
7
|
+
height?: CSSProperties['height'];
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
borderWidth?: CSSProperties['borderWidth'];
|
|
10
|
+
borderColor?: CSSProperties['borderColor'];
|
|
11
|
+
outline?: CSSProperties['outline'];
|
|
12
|
+
color?: CSSProperties['color'];
|
|
13
|
+
borderStyle?: CSSProperties['borderStyle'];
|
|
14
|
+
fontSize?: CSSProperties['fontSize'];
|
|
15
|
+
fontWeight?: CSSProperties['fontWeight'];
|
|
16
|
+
borderRadius?: CSSProperties['fontWeight'];
|
|
17
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
18
|
+
cursor?: CSSProperties['cursor'];
|
|
19
|
+
style?: CSSProperties;
|
|
3
20
|
onClick?: () => void;
|
|
21
|
+
onSubmit?: () => void;
|
|
4
22
|
}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
export interface ColorPalette {
|
|
2
2
|
primary: string;
|
|
3
|
+
primaryDeep: string;
|
|
3
4
|
primaryColor: string;
|
|
4
5
|
mainBgColor: string;
|
|
5
6
|
backgroundColor: string;
|
|
6
7
|
secondryBgColor: string;
|
|
7
8
|
pageBg: string;
|
|
8
9
|
color: string;
|
|
10
|
+
buttonBgActive: string;
|
|
11
|
+
buttonBgDeactivate: string;
|
|
12
|
+
buttonColorActive: string;
|
|
13
|
+
buttonColorDeactivate: string;
|
|
9
14
|
}
|
package/package.json
CHANGED
|
@@ -1,20 +1,77 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ButtonProps } from '../../types/buttonTypes';
|
|
3
|
-
|
|
3
|
+
import useThemeColors from '../../hook/useThemeColors'
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
const Button = (props: ButtonProps) => {
|
|
7
|
+
|
|
7
8
|
const {
|
|
9
|
+
children,
|
|
10
|
+
name = "",
|
|
8
11
|
label = "",
|
|
9
|
-
onClick,
|
|
12
|
+
onClick = () => { },
|
|
13
|
+
onSubmit = () => { },
|
|
14
|
+
disabled = false,
|
|
15
|
+
width = "100%",
|
|
16
|
+
height = "40px",
|
|
17
|
+
borderWidth = "1px",
|
|
18
|
+
cursor = "pointer",
|
|
19
|
+
borderColor,
|
|
20
|
+
outline = "none",
|
|
21
|
+
borderStyle = "solid",
|
|
22
|
+
color,
|
|
23
|
+
fontSize = 16,
|
|
24
|
+
fontWeight = 'bold',
|
|
25
|
+
borderRadius = 5,
|
|
26
|
+
backgroundColor = "",
|
|
27
|
+
style = {}
|
|
10
28
|
} = props;
|
|
29
|
+
const btnName = name ? name : label;
|
|
30
|
+
|
|
31
|
+
const {
|
|
32
|
+
buttonBgActive,
|
|
33
|
+
buttonBgDeactivate,
|
|
34
|
+
buttonColorActive,
|
|
35
|
+
buttonColorDeactivate
|
|
36
|
+
} = useThemeColors();
|
|
37
|
+
|
|
38
|
+
const defColor = disabled ? buttonColorDeactivate : buttonColorActive;
|
|
39
|
+
const defBrColor = disabled ? buttonColorDeactivate : buttonColorActive;
|
|
40
|
+
const defBgColot = disabled ? buttonBgDeactivate : buttonBgActive;
|
|
41
|
+
|
|
42
|
+
const styleContener = {
|
|
43
|
+
width,
|
|
44
|
+
height,
|
|
45
|
+
borderWidth,
|
|
46
|
+
borderStyle,
|
|
47
|
+
outline,
|
|
48
|
+
fontSize,
|
|
49
|
+
fontWeight,
|
|
50
|
+
borderRadius,
|
|
51
|
+
cursor: disabled ? "none" : cursor,
|
|
52
|
+
color: color ? color : defColor,
|
|
53
|
+
borderColor: borderColor ? borderColor : defBrColor,
|
|
54
|
+
backgroundColpr: backgroundColor ? backgroundColor : defBgColot,
|
|
55
|
+
...style
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
11
60
|
return (
|
|
12
61
|
<button
|
|
13
|
-
|
|
14
|
-
|
|
62
|
+
style={styleContener}
|
|
63
|
+
onClick={() => {
|
|
64
|
+
if (disabled) return;
|
|
65
|
+
onClick()
|
|
66
|
+
}}
|
|
67
|
+
onSubmit={() => {
|
|
68
|
+
if (disabled) return;
|
|
69
|
+
onSubmit();
|
|
70
|
+
}}
|
|
71
|
+
disabled={disabled}
|
|
15
72
|
>
|
|
16
|
-
{
|
|
17
|
-
</button>
|
|
73
|
+
{btnName ? btnName : children}
|
|
74
|
+
</button >
|
|
18
75
|
);
|
|
19
76
|
};
|
|
20
77
|
export default Button;
|
package/src/constants/colors.ts
CHANGED
|
@@ -3,22 +3,32 @@
|
|
|
3
3
|
|
|
4
4
|
export const light = {
|
|
5
5
|
primary: 'red',
|
|
6
|
+
primaryDeep: "#8404043b",
|
|
6
7
|
primaryColor: 'red',
|
|
7
8
|
pageBg: '#8d8d8d',
|
|
8
9
|
mainBgColor: '#fff',
|
|
9
10
|
backgroundColor: '#f0f0f0',
|
|
10
11
|
secondryBgColor: '#808080',
|
|
11
12
|
color: '#000',
|
|
13
|
+
buttonBgActive: "red",
|
|
14
|
+
buttonColorActive: "#fdfdfd3b",
|
|
15
|
+
buttonBgDeactivate: "#8404043b",
|
|
16
|
+
buttonColorDeactivate: "#5d13133b"
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
export const dark = {
|
|
15
20
|
primary: 'red',
|
|
21
|
+
primaryDeep: "#8404043b",
|
|
16
22
|
primaryColor: 'red',
|
|
17
23
|
mainBgColor: '#000',
|
|
18
24
|
pageBg: '#333',
|
|
19
25
|
backgroundColor: '#444',
|
|
20
26
|
secondryBgColor: '808080',
|
|
21
27
|
color: '#eee',
|
|
28
|
+
buttonBgActive: "red",
|
|
29
|
+
buttonColorActive: "#fdfdfd3b",
|
|
30
|
+
buttonBgDeactivate: "#8404043b",
|
|
31
|
+
buttonColorDeactivate: "#5d13133b"
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
const colors = { light, dark }
|
package/src/types/buttonTypes.ts
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
5
4
|
|
|
6
5
|
export interface ButtonProps {
|
|
6
|
+
name?: string;
|
|
7
7
|
label?: string;
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
width?: CSSProperties['width'];
|
|
10
|
+
height?: CSSProperties['height'];
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
borderWidth?: CSSProperties['borderWidth'];
|
|
13
|
+
borderColor?: CSSProperties['borderColor'];
|
|
14
|
+
outline?: CSSProperties['outline'];
|
|
15
|
+
color?: CSSProperties['color'];
|
|
16
|
+
borderStyle?: CSSProperties['borderStyle'];
|
|
17
|
+
fontSize?: CSSProperties['fontSize'];
|
|
18
|
+
fontWeight?: CSSProperties['fontWeight'];
|
|
19
|
+
borderRadius?: CSSProperties['fontWeight'];
|
|
20
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
21
|
+
cursor?: CSSProperties['cursor'];
|
|
22
|
+
style?: CSSProperties;
|
|
8
23
|
onClick?: () => void;
|
|
9
|
-
|
|
24
|
+
onSubmit?: () => void;
|
|
25
|
+
};
|
package/src/types/colorType.ts
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
export interface ColorPalette {
|
|
2
2
|
primary: string
|
|
3
|
+
primaryDeep: string
|
|
3
4
|
primaryColor: string
|
|
4
5
|
mainBgColor: string
|
|
5
6
|
backgroundColor: string
|
|
6
7
|
secondryBgColor: string
|
|
7
8
|
pageBg: string
|
|
8
9
|
color: string
|
|
10
|
+
buttonBgActive: string
|
|
11
|
+
buttonBgDeactivate: string
|
|
12
|
+
buttonColorActive: string
|
|
13
|
+
buttonColorDeactivate: string
|
|
9
14
|
};
|