aldehyde 0.2.514 → 0.2.516
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/lib/controls/direct-file-view/index.d.ts +1 -1
- package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
- package/lib/detail/button/cquery-button-bar.d.ts +1 -1
- package/lib/detail/rightbar/index.d.ts +1 -1
- package/lib/draw-canvas-edit/components/asset-bar/index.js +3 -3
- package/lib/draw-canvas-edit/components/asset-bar/index.js.map +1 -1
- package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
- package/lib/form/field-group-form.d.ts +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/layout/menu/l2menu-message-bar.d.ts +1 -1
- package/lib/layout2/page.d.ts.map +1 -1
- package/lib/layout2/page.js +3 -0
- package/lib/layout2/page.js.map +1 -1
- package/lib/layout3/css/main.less +17 -17
- package/lib/layout4/css/main.less +18 -17
- package/lib/locale/LocaleProvider.d.ts.map +1 -1
- package/lib/locale/LocaleProvider.js +4 -2
- package/lib/locale/LocaleProvider.js.map +1 -1
- package/lib/lowcode-components/base-table/index.less +61 -61
- package/lib/lowcode-components/data-number/index.less +10 -10
- package/lib/lowcode-components/date-time/index.less +4 -4
- package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/lib/lowcode-components/lowcode-view/component/group-layer/index.d.ts +1 -1
- package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/lib/lowcode-components/text-scroller/index.less +28 -28
- package/lib/module/index.less +6 -0
- package/lib/module/ltmpl-table.d.ts +3 -0
- package/lib/module/ltmpl-table.d.ts.map +1 -1
- package/lib/module/ltmpl-table.js +2 -2
- package/lib/module/ltmpl-table.js.map +1 -1
- package/lib/module/ttmpl-table.d.ts +41 -0
- package/lib/module/ttmpl-table.d.ts.map +1 -0
- package/lib/module/ttmpl-table.js +188 -0
- package/lib/module/ttmpl-table.js.map +1 -0
- package/lib/routable/index.less +6 -0
- package/lib/routable/ttmpl-table-route.d.ts +12 -0
- package/lib/routable/ttmpl-table-route.d.ts.map +1 -0
- package/lib/routable/ttmpl-table-route.js +283 -0
- package/lib/routable/ttmpl-table-route.js.map +1 -0
- package/lib/table/act-table.d.ts +11 -3
- package/lib/table/act-table.d.ts.map +1 -1
- package/lib/table/act-table.js +2 -2
- package/lib/table/act-table.js.map +1 -1
- package/lib/table/column/column-builder.d.ts.map +1 -1
- package/lib/table/column/column-builder.js +7 -3
- package/lib/table/column/column-builder.js.map +1 -1
- package/lib/table/index.css +2 -2
- package/lib/table/l2-act-table.d.ts +1 -1
- package/lib/table/page-chart.d.ts +1 -1
- package/lib/table/pagination.d.ts +1 -0
- package/lib/table/pagination.d.ts.map +1 -1
- package/lib/table/pagination.js +5 -4
- package/lib/table/pagination.js.map +1 -1
- package/lib/table/query-table.d.ts +2 -0
- package/lib/table/query-table.d.ts.map +1 -1
- package/lib/table/query-table.js +10 -6
- package/lib/table/query-table.js.map +1 -1
- package/lib/table/relation-table.d.ts +2 -2
- package/lib/tmpl/hc-data-source.d.ts +2 -1
- package/lib/tmpl/hc-data-source.d.ts.map +1 -1
- package/lib/tmpl/hc-data-source.js +12 -0
- package/lib/tmpl/hc-data-source.js.map +1 -1
- package/lib/tmpl/hcservice-v3.d.ts +1 -0
- package/lib/tmpl/hcservice-v3.d.ts.map +1 -1
- package/lib/tmpl/hcservice-v3.js +12 -0
- package/lib/tmpl/hcservice-v3.js.map +1 -1
- package/lib/tmpl/interface.d.ts +16 -1
- package/lib/tmpl/interface.d.ts.map +1 -1
- package/lib/tmpl/interface.js.map +1 -1
- package/lib/welcome/components/page-card.d.ts +1 -1
- package/package.json +4 -2
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +156 -156
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
- package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
- package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
- package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
- package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
- package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
- package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
- package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
- package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
- package/src/aldehyde/index.tsx +3 -1
- package/src/aldehyde/layout2/page.tsx +3 -0
- package/src/aldehyde/layout3/css/main.less +17 -17
- package/src/aldehyde/layout4/css/main.less +18 -17
- package/src/aldehyde/layout4/imgs/user.svg +26 -26
- package/src/aldehyde/locale/LocaleProvider.tsx +4 -2
- package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
- package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
- package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
- package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
- package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +144 -144
- package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
- package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
- package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
- package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
- package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
- package/src/aldehyde/module/index.less +6 -0
- package/src/aldehyde/module/ltmpl-table.tsx +8 -1
- package/src/aldehyde/module/ttmpl-table.tsx +349 -0
- package/src/aldehyde/routable/index.less +6 -0
- package/src/aldehyde/routable/ttmpl-table-route.tsx +390 -0
- package/src/aldehyde/table/act-table.tsx +9 -1
- package/src/aldehyde/table/column/column-builder.tsx +5 -3
- package/src/aldehyde/table/index.css +2 -2
- package/src/aldehyde/table/pagination.tsx +11 -9
- package/src/aldehyde/table/query-table.tsx +13 -4
- package/src/aldehyde/tmpl/hc-data-source.tsx +12 -0
- package/src/aldehyde/tmpl/hcservice-v3.tsx +11 -0
- package/src/aldehyde/tmpl/interface.tsx +14 -2
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface BaseColorBlockComponentStyle {
|
|
4
|
-
borderRadius?: number;
|
|
5
|
-
borderWidth?: number;
|
|
6
|
-
borderColor?: string;
|
|
7
|
-
borderStyle?: string;
|
|
8
|
-
background?: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export interface BaseColorBlockComponentProps {
|
|
12
|
-
style?: BaseColorBlockComponentStyle;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export interface BaseColorBlockComponentRef {
|
|
16
|
-
updateConfig: (newConfig: BaseColorBlockComponentProps) => void;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const BaseColorBlockComponent = forwardRef((props: BaseColorBlockComponentProps, ref: ForwardedRef<BaseColorBlockComponentRef>) => {
|
|
20
|
-
const [config, setConfig] = useState<BaseColorBlockComponentProps>({ ...props });
|
|
21
|
-
|
|
22
|
-
useImperativeHandle(ref, () => ({
|
|
23
|
-
updateConfig: (newConfig) => setConfig({ ...newConfig }),
|
|
24
|
-
}));
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<div style={{ ...{ height: '100%', display: 'flex' }, ...(config?.style || {}) }} />
|
|
29
|
-
);
|
|
30
|
-
});
|
|
31
|
-
|
|
1
|
+
import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface BaseColorBlockComponentStyle {
|
|
4
|
+
borderRadius?: number;
|
|
5
|
+
borderWidth?: number;
|
|
6
|
+
borderColor?: string;
|
|
7
|
+
borderStyle?: string;
|
|
8
|
+
background?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface BaseColorBlockComponentProps {
|
|
12
|
+
style?: BaseColorBlockComponentStyle;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface BaseColorBlockComponentRef {
|
|
16
|
+
updateConfig: (newConfig: BaseColorBlockComponentProps) => void;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const BaseColorBlockComponent = forwardRef((props: BaseColorBlockComponentProps, ref: ForwardedRef<BaseColorBlockComponentRef>) => {
|
|
20
|
+
const [config, setConfig] = useState<BaseColorBlockComponentProps>({ ...props });
|
|
21
|
+
|
|
22
|
+
useImperativeHandle(ref, () => ({
|
|
23
|
+
updateConfig: (newConfig) => setConfig({ ...newConfig }),
|
|
24
|
+
}));
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div style={{ ...{ height: '100%', display: 'flex' }, ...(config?.style || {}) }} />
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
|
|
32
32
|
export default BaseColorBlockComponent;
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
.base-table {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
overflow: hidden;
|
|
5
|
-
|
|
6
|
-
.base-table-empty {
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
display: flex;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
align-items: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
table {
|
|
15
|
-
width: 100%;
|
|
16
|
-
text-align: center;
|
|
17
|
-
table-layout: fixed;
|
|
18
|
-
/* 关键:合并相邻边框,消除双线 */
|
|
19
|
-
border-collapse: collapse;
|
|
20
|
-
margin-top: -2px;
|
|
21
|
-
|
|
22
|
-
thead {
|
|
23
|
-
position: relative;
|
|
24
|
-
z-index: 1;
|
|
25
|
-
|
|
26
|
-
th {
|
|
27
|
-
padding: 0 4px;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
.scroll-body {
|
|
33
|
-
overflow: hidden;
|
|
34
|
-
animation: scroll 10s linear infinite;
|
|
35
|
-
|
|
36
|
-
td {
|
|
37
|
-
padding: 0 4px;
|
|
38
|
-
overflow: hidden;
|
|
39
|
-
white-space: nowrap;
|
|
40
|
-
text-overflow: ellipsis;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
table:hover {
|
|
46
|
-
.scroll-body {
|
|
47
|
-
animation-play-state: paused !important;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
@keyframes scroll {
|
|
55
|
-
0% {
|
|
56
|
-
transform: translateY(0);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
100% {
|
|
60
|
-
transform: translateY(-100%);
|
|
61
|
-
}
|
|
1
|
+
.base-table {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
|
|
6
|
+
.base-table-empty {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
table {
|
|
15
|
+
width: 100%;
|
|
16
|
+
text-align: center;
|
|
17
|
+
table-layout: fixed;
|
|
18
|
+
/* 关键:合并相邻边框,消除双线 */
|
|
19
|
+
border-collapse: collapse;
|
|
20
|
+
margin-top: -2px;
|
|
21
|
+
|
|
22
|
+
thead {
|
|
23
|
+
position: relative;
|
|
24
|
+
z-index: 1;
|
|
25
|
+
|
|
26
|
+
th {
|
|
27
|
+
padding: 0 4px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
.scroll-body {
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
animation: scroll 10s linear infinite;
|
|
35
|
+
|
|
36
|
+
td {
|
|
37
|
+
padding: 0 4px;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
text-overflow: ellipsis;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
table:hover {
|
|
46
|
+
.scroll-body {
|
|
47
|
+
animation-play-state: paused !important;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
@keyframes scroll {
|
|
55
|
+
0% {
|
|
56
|
+
transform: translateY(0);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
100% {
|
|
60
|
+
transform: translateY(-100%);
|
|
61
|
+
}
|
|
62
62
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.data-number-component {
|
|
2
|
-
--stroke-color: #000000;
|
|
3
|
-
--stroke-width: 0;
|
|
4
|
-
|
|
5
|
-
height: 100%;
|
|
6
|
-
display: flex;
|
|
7
|
-
-webkit-text-stroke-color: var(--stroke-color);
|
|
8
|
-
-webkit-text-stroke-width: var(--stroke-width);
|
|
9
|
-
stroke-color: var(--stroke-color);
|
|
10
|
-
stroke-width: var(--stroke-width);
|
|
1
|
+
.data-number-component {
|
|
2
|
+
--stroke-color: #000000;
|
|
3
|
+
--stroke-width: 0;
|
|
4
|
+
|
|
5
|
+
height: 100%;
|
|
6
|
+
display: flex;
|
|
7
|
+
-webkit-text-stroke-color: var(--stroke-color);
|
|
8
|
+
-webkit-text-stroke-width: var(--stroke-width);
|
|
9
|
+
stroke-color: var(--stroke-color);
|
|
10
|
+
stroke-width: var(--stroke-width);
|
|
11
11
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.date-time-component {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
display: flex;
|
|
1
|
+
.date-time-component {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
display: flex;
|
|
5
5
|
}
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
2
|
-
import dayjs from "dayjs";
|
|
3
|
-
import './index.less';
|
|
4
|
-
|
|
5
|
-
export interface DateTimeComponentStyle {
|
|
6
|
-
fontSize?: number;
|
|
7
|
-
color?: string;
|
|
8
|
-
fontFamily?: string;
|
|
9
|
-
fontWeight?: number;
|
|
10
|
-
alignItems?: string;
|
|
11
|
-
justifyContent?: string;
|
|
12
|
-
letterSpacing?: string;
|
|
13
|
-
formatType?: string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export interface DateTimeComponentProps {
|
|
17
|
-
style?: DateTimeComponentStyle;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export interface DateTimeComponentRef {
|
|
21
|
-
updateConfig: (newConfig: DateTimeComponentProps) => void;
|
|
22
|
-
setEventHandler: (eventMap: Record<string, Function>) => void;
|
|
23
|
-
destroy: () => void;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
|
|
27
|
-
|
|
28
|
-
const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
|
|
29
|
-
const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
|
|
30
|
-
const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
|
|
31
|
-
const timeRef = useRef<NodeJS.Timeout | null>(null);
|
|
32
|
-
const eventHandlerMap = useRef<Record<string, Function>>({});
|
|
33
|
-
|
|
34
|
-
const handleClearInterval = () => {
|
|
35
|
-
timeRef.current && clearInterval(timeRef.current);
|
|
36
|
-
timeRef.current = null;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
timeRef.current = setInterval(() => {
|
|
41
|
-
setDateTime(dayjs().format(config.style?.formatType || defFormatType));
|
|
42
|
-
}, 1000);
|
|
43
|
-
return () => {
|
|
44
|
-
handleClearInterval();
|
|
45
|
-
}
|
|
46
|
-
}, []);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
useImperativeHandle(ref, () => ({
|
|
50
|
-
updateConfig: (newConfig) => setConfig({ ...newConfig }),
|
|
51
|
-
setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
|
|
52
|
-
destroy: () => {
|
|
53
|
-
handleClearInterval();
|
|
54
|
-
}
|
|
55
|
-
}));
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<div className="date-time-component" style={{ ...(config?.style || {}) }}>
|
|
60
|
-
{datetime}
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
});
|
|
64
|
-
|
|
1
|
+
import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
2
|
+
import dayjs from "dayjs";
|
|
3
|
+
import './index.less';
|
|
4
|
+
|
|
5
|
+
export interface DateTimeComponentStyle {
|
|
6
|
+
fontSize?: number;
|
|
7
|
+
color?: string;
|
|
8
|
+
fontFamily?: string;
|
|
9
|
+
fontWeight?: number;
|
|
10
|
+
alignItems?: string;
|
|
11
|
+
justifyContent?: string;
|
|
12
|
+
letterSpacing?: string;
|
|
13
|
+
formatType?: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface DateTimeComponentProps {
|
|
17
|
+
style?: DateTimeComponentStyle;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export interface DateTimeComponentRef {
|
|
21
|
+
updateConfig: (newConfig: DateTimeComponentProps) => void;
|
|
22
|
+
setEventHandler: (eventMap: Record<string, Function>) => void;
|
|
23
|
+
destroy: () => void;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
|
|
27
|
+
|
|
28
|
+
const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
|
|
29
|
+
const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
|
|
30
|
+
const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
|
|
31
|
+
const timeRef = useRef<NodeJS.Timeout | null>(null);
|
|
32
|
+
const eventHandlerMap = useRef<Record<string, Function>>({});
|
|
33
|
+
|
|
34
|
+
const handleClearInterval = () => {
|
|
35
|
+
timeRef.current && clearInterval(timeRef.current);
|
|
36
|
+
timeRef.current = null;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
timeRef.current = setInterval(() => {
|
|
41
|
+
setDateTime(dayjs().format(config.style?.formatType || defFormatType));
|
|
42
|
+
}, 1000);
|
|
43
|
+
return () => {
|
|
44
|
+
handleClearInterval();
|
|
45
|
+
}
|
|
46
|
+
}, []);
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
useImperativeHandle(ref, () => ({
|
|
50
|
+
updateConfig: (newConfig) => setConfig({ ...newConfig }),
|
|
51
|
+
setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
|
|
52
|
+
destroy: () => {
|
|
53
|
+
handleClearInterval();
|
|
54
|
+
}
|
|
55
|
+
}));
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<div className="date-time-component" style={{ ...(config?.style || {}) }}>
|
|
60
|
+
{datetime}
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
65
|
export default DateTimeComponent;
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
.four-angle-glow {
|
|
2
|
-
--fagb-color: #00ebff;
|
|
3
|
-
--fagb-width: 2px;
|
|
4
|
-
--fagb-length: 8px;
|
|
5
|
-
--fagb-radius: 3px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
height: 100%;
|
|
8
|
-
position: relative;
|
|
9
|
-
|
|
10
|
-
.angle {
|
|
11
|
-
position: absolute;
|
|
12
|
-
border: var(--fagb-width) solid var(--fagb-color);
|
|
13
|
-
width: var(--fagb-length);
|
|
14
|
-
height: var(--fagb-length);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.angle-tl {
|
|
18
|
-
margin: -1px 0 0 -1px;
|
|
19
|
-
border-right: 0;
|
|
20
|
-
border-bottom: 0;
|
|
21
|
-
border-top-left-radius: var(--fagb-radius);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.angle-tr {
|
|
25
|
-
top: 0;
|
|
26
|
-
right: 0;
|
|
27
|
-
border-left: 0;
|
|
28
|
-
border-bottom: 0;
|
|
29
|
-
margin: -1px -1px 0 0;
|
|
30
|
-
border-top-right-radius: var(--fagb-radius);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.angle-bl {
|
|
34
|
-
bottom: 0;
|
|
35
|
-
left: 0;
|
|
36
|
-
border-top: 0;
|
|
37
|
-
border-right: 0;
|
|
38
|
-
margin: 0 0 -1px -1px;
|
|
39
|
-
border-bottom-left-radius: var(--fagb-radius);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.angle-br {
|
|
43
|
-
bottom: 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
border-left: 0;
|
|
46
|
-
border-top: 0;
|
|
47
|
-
margin: 0 -1px -1px 0;
|
|
48
|
-
border-bottom-right-radius: var(--fagb-radius);
|
|
49
|
-
}
|
|
1
|
+
.four-angle-glow {
|
|
2
|
+
--fagb-color: #00ebff;
|
|
3
|
+
--fagb-width: 2px;
|
|
4
|
+
--fagb-length: 8px;
|
|
5
|
+
--fagb-radius: 3px;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
position: relative;
|
|
9
|
+
|
|
10
|
+
.angle {
|
|
11
|
+
position: absolute;
|
|
12
|
+
border: var(--fagb-width) solid var(--fagb-color);
|
|
13
|
+
width: var(--fagb-length);
|
|
14
|
+
height: var(--fagb-length);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.angle-tl {
|
|
18
|
+
margin: -1px 0 0 -1px;
|
|
19
|
+
border-right: 0;
|
|
20
|
+
border-bottom: 0;
|
|
21
|
+
border-top-left-radius: var(--fagb-radius);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.angle-tr {
|
|
25
|
+
top: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
border-left: 0;
|
|
28
|
+
border-bottom: 0;
|
|
29
|
+
margin: -1px -1px 0 0;
|
|
30
|
+
border-top-right-radius: var(--fagb-radius);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.angle-bl {
|
|
34
|
+
bottom: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
border-top: 0;
|
|
37
|
+
border-right: 0;
|
|
38
|
+
margin: 0 0 -1px -1px;
|
|
39
|
+
border-bottom-left-radius: var(--fagb-radius);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.angle-br {
|
|
43
|
+
bottom: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
border-left: 0;
|
|
46
|
+
border-top: 0;
|
|
47
|
+
margin: 0 -1px -1px 0;
|
|
48
|
+
border-bottom-right-radius: var(--fagb-radius);
|
|
49
|
+
}
|
|
50
50
|
}
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import './index.less';
|
|
2
|
-
import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
3
|
-
|
|
4
|
-
export interface FourAngleGlowBorderStyle {
|
|
5
|
-
width?: number;
|
|
6
|
-
length?: number;
|
|
7
|
-
color?: string;
|
|
8
|
-
radius?: number;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export interface FourAngleGlowProps {
|
|
12
|
-
style?: FourAngleGlowBorderStyle;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export interface FourAngleGlowBorderRef {
|
|
16
|
-
updateConfig: (config: FourAngleGlowProps) => void;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
|
|
20
|
-
const [config] = useState<FourAngleGlowProps>({ ...props });
|
|
21
|
-
const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
|
|
22
|
-
|
|
23
|
-
const updateStyle = (style: FourAngleGlowBorderStyle) => {
|
|
24
|
-
const dom = fourAngleGlowRef.current;
|
|
25
|
-
if (dom) {
|
|
26
|
-
dom.style.setProperty('--fagb-length', `${style?.length}px`);
|
|
27
|
-
dom.style.setProperty('--fagb-color', style?.color);
|
|
28
|
-
dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
|
|
29
|
-
dom.style.setProperty('--fagb-width', `${style?.width}px`);
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
useImperativeHandle(ref, () => ({
|
|
34
|
-
updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
|
|
35
|
-
}));
|
|
36
|
-
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
updateStyle(config.style);
|
|
39
|
-
}, []);
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<div className="four-angle-glow" ref={fourAngleGlowRef}>
|
|
43
|
-
<span className="angle angle-tl" />
|
|
44
|
-
<span className="angle angle-tr" />
|
|
45
|
-
<span className="angle angle-bl" />
|
|
46
|
-
<span className="angle angle-br" />
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
export default FourAngleGlowBorder;
|
|
52
|
-
|
|
53
|
-
|
|
1
|
+
import './index.less';
|
|
2
|
+
import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
3
|
+
|
|
4
|
+
export interface FourAngleGlowBorderStyle {
|
|
5
|
+
width?: number;
|
|
6
|
+
length?: number;
|
|
7
|
+
color?: string;
|
|
8
|
+
radius?: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface FourAngleGlowProps {
|
|
12
|
+
style?: FourAngleGlowBorderStyle;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface FourAngleGlowBorderRef {
|
|
16
|
+
updateConfig: (config: FourAngleGlowProps) => void;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
|
|
20
|
+
const [config] = useState<FourAngleGlowProps>({ ...props });
|
|
21
|
+
const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
|
|
22
|
+
|
|
23
|
+
const updateStyle = (style: FourAngleGlowBorderStyle) => {
|
|
24
|
+
const dom = fourAngleGlowRef.current;
|
|
25
|
+
if (dom) {
|
|
26
|
+
dom.style.setProperty('--fagb-length', `${style?.length}px`);
|
|
27
|
+
dom.style.setProperty('--fagb-color', style?.color);
|
|
28
|
+
dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
|
|
29
|
+
dom.style.setProperty('--fagb-width', `${style?.width}px`);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
useImperativeHandle(ref, () => ({
|
|
34
|
+
updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
|
|
35
|
+
}));
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
updateStyle(config.style);
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div className="four-angle-glow" ref={fourAngleGlowRef}>
|
|
43
|
+
<span className="angle angle-tl" />
|
|
44
|
+
<span className="angle angle-tr" />
|
|
45
|
+
<span className="angle angle-bl" />
|
|
46
|
+
<span className="angle angle-br" />
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
export default FourAngleGlowBorder;
|
|
52
|
+
|
|
53
|
+
|