light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/date-time-picker/DateTimePickerConfig.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React from 'react';
+import {ConfigType} from "../../../designer/right/ConfigContent";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import {DateTimePickerController} from "./DateTimePickerController.ts";
+
+export const DateTimePickerStyleConfig: React.FC<ConfigType<DateTimePickerController>> = ({controller}) => {
+    const {style} = controller.getConfig()!;
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        console.log(dataFragment);
+        controller.update(dataFragment!);
+    };
+
+    const schema: Control[] = [
+        {
+            type: 'accordion',
+            label: '基础设置',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    config: {
+                        containerStyle: {
+                            marginBottom: '10px'
+                        }
+                    },
+                    children: [
+                        {
+                            key: 'pickerType',
+                            type: 'select',
+                            label: '选择器类型',
+                            value: style?.pickerType || 'date',
+                            config: {
+                                options: [
+                                    {label: '日期', value: 'date'},
+                                    {label: '周', value: 'week'},
+                                    {label: '月', value: 'month'},
+                                    {label: '季度', value: 'quarter'},
+                                    {label: '年', value: 'year'},
+                                    {label: '日期时间', value: 'datetime'},
+                                    {label: '日期范围', value: 'range'},
+                                ]
+                            }
+                        },
+                        {
+                            key: 'placeholder',
+                            type: 'input',
+                            label: '占位文本',
+                            value: style?.placeholder,
+                        },
+                        {
+                            key: 'format',
+                            type: 'input',
+                            label: '日期格式',
+                            value: style?.format || 'YYYY-MM-DD',
+                        },
+                    ]
+                },
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'allowClear',
+                            type: 'switch',
+                            label: '允许清空',
+                            value: style?.allowClear ?? true,
+                        },
+                        {
+                            key: 'disabled',
+                            type: 'switch',
+                            label: '禁用状态',
+                            value: style?.disabled ?? false,
+                        },
+                        {
+                            key: 'showTime',
+                            type: 'switch',
+                            label: '显示时间',
+                            value: style?.showTime ?? false,
+                        },
+                        {
+                            key: 'showNow',
+                            type: 'switch',
+                            label: '显示此刻',
+                            value: style?.showNow ?? true,
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            type: 'accordion',
+            label: '颜色',
+            key: 'style',
+            children: [
+                {
+                    key: 'token',
+                    type: 'grid',
+                    config: {
+                        containerStyle: {
+                            marginBottom: '10px'
+                        }
+                    },
+                    children: [
+                        {key: 'colorBgContainerDisabled', type: 'color-picker', label: '输入框禁用背景', value: style?.token?.colorBgContainerDisabled, config: {showText: true}},
+                        {key: 'colorBgElevated', type: 'color-picker', label: '弹框背景', value: style?.token?.colorBgElevated, config: {showText: true}},
+                        {key: 'colorBorder', type: 'color-picker', label: '边框色', value: style?.token?.colorBorder, config: {showText: true}},
+                        {key: 'colorIcon', type: 'color-picker', label: '图标色', value: style?.token?.colorIcon, config: {showText: true}},
+                        {key: 'colorIconHover', type: 'color-picker', label: '图标悬浮色', value: style?.token?.colorIconHover, config: {showText: true}},
+                        {key: 'colorText', type: 'color-picker', label: '图标色', value: style?.token?.colorText, config: {showText: true}},
+                        {key: 'colorSplit', type: 'color-picker', label: '分割线', value: style?.token?.colorSplit, config: {showText: true}},
+                        {key: 'colorPrimary', type: 'color-picker', label: '基础色', value: style?.token?.colorPrimary, config: {showText: true}},
+                        {key: 'colorTextHeading', type: 'color-picker', label: '弹窗标题', value: style?.token?.colorTextHeading, config: {showText: true}},
+                        {key: 'colorTextPlaceholder', type: 'color-picker', label: '占位符', value: style?.token?.colorTextPlaceholder, config: {showText: true}},
+                    ]
+                },
+                {
+                    key: 'components',
+                    type: 'grid',
+                    children: [
+                        {key: 'colorBgContainer', type: 'color-picker', label: '输入框背景', value: style?.components?.colorBgContainer, config: {showText: true}},
+                        {key: 'activeBg', type: 'color-picker', label: '输入框激活背景', value: style?.components?.activeBg, config: {showText: true}},
+                        {key: 'activeBorderColor', type: 'color-picker', label: '输入框激活边框', value: style?.components?.activeBorderColor, config: {showText: true}},
+                        {key: 'cellActiveWithRangeBg', type: 'color-picker', label: '日期范围激活背景', value: style?.components?.cellActiveWithRangeBg, config: {showText: true}},
+                        {key: 'cellHoverWithRangeBg', type: 'color-picker', label: '日期范围悬浮背景', value: style?.components?.cellHoverWithRangeBg, config: {showText: true}},
+                        {key: 'cellHoverBg', type: 'color-picker', label: '单元格悬浮背景', value: style?.components?.cellHoverBg, config: {showText: true}},
+                        {key: 'hoverBg', type: 'color-picker', label: '输入框悬浮背景', value: style?.components?.hoverBg, config: {showText: true}},
+                        {key: 'hoverBorderColor', type: 'color-picker', label: '输入框悬浮边框', value: style?.components?.hoverBorderColor, config: {showText: true}},
+                        {key: 'activeShadow', type: 'color-picker', label: '激活阴影', value: style?.components?.activeShadow, config: {showText: true}},
+                    ]
+                }
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '尺寸布局',
+            key: 'style',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'components',
+                    config: {
+                        containerStyle: {
+                            marginBottom: '10px'
+                        }
+                    },
+                    children: [
+                        {key: 'cellHeight', type: 'number-input', label: '单元格高度', value: style?.components?.cellHeight, config: {step: 1, min: 0}},
+                        {key: 'cellWidth', type: 'number-input', label: '单元格宽度', value: style?.components?.cellWidth, config: {step: 1, min: 0}},
+                        {key: 'inputFontSize', type: 'number-input', label: '输入框字号', value: style?.components?.inputFontSize, config: {step: 1, min: 0}},
+                        {key: 'paddingBlock', type: 'number-input', label: '输入框纵向内边距', value: style?.components?.paddingBlock, config: {step: 1, min: 0}},
+                        {key: 'paddingInline', type: 'number-input', label: '输入框横向内边距', value: style?.components?.paddingInline, config: {step: 1, min: 0}},
+                        {key: 'textHeight', type: 'number-input', label: '文本高度', value: style?.components?.textHeight, config: {step: 1, min: 0}},
+                        {key: 'timeCellHeight', type: 'number-input', label: '时间单元格高度', value: style?.components?.timeCellHeight, config: {step: 1, min: 0}},
+                        {key: 'timeColumnHeight', type: 'number-input', label: '时间列高度', value: style?.components?.timeColumnHeight, config: {step: 1, min: 0}},
+                        {key: 'timeColumnHeight', type: 'number-input', label: '时间列高度', value: style?.components?.timeColumnHeight, config: {step: 1, min: 0}},
+                        {key: 'timeColumnWidth', type: 'number-input', label: '时间列宽度', value: style?.components?.timeColumnWidth, config: {step: 1, min: 0}},
+                        {key: 'withoutTimeCellHeight', type: 'number-input', label: '无时间单元格高度', value: style?.components?.withoutTimeCellHeight, config: {step: 1, min: 0}},
+
+                    ]
+                },
+                {
+                    type: 'grid',
+                    key: 'token',
+                    children: [
+                        {key: 'fontSize', type: 'number-input', label: '基础字号', value: style?.token?.fontSize, config: {step: 1, min: 0}},
+                        {key: 'padding', type: 'number-input', label: '内边距', value: style?.token?.padding, config: {step: 1, min: 0}},
+                        {key: 'lineWidth', type: 'number-input', label: '线宽', value: style?.token?.lineWidth, config: {step: 1, min: 0}},
+                        {key: 'borderRadius', type: 'number-input', label: '圆角', value: style?.token?.borderRadius, config: {step: 1, min: 0}},
+                        {
+                            key: 'lineType', type: 'select', label: '边框类型', value: style?.token?.lineType, config: {
+                                options: [
+                                    {label: '实线', value: 'solid'},
+                                    {label: '虚线', value: 'dashed'},
+                                    {label: '点状线', value: 'dotted'},
+                                    {label: '双线', value: 'double'},
+                                ]
+                            }
+                        },
+                    ]
+                }
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '字体',
+            key: 'style',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'token',
+                    children: [
+                        {key: 'fontFamily', type: 'select', label: '字体', value: style?.token?.fontFamily, config: {options: window.LC_ENV.fonts}},
+                        {key: 'fontWeightStrong', type: 'number-input', label: '字体', value: style?.token?.fontWeightStrong, config: {step: 100, min: 100}},
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div>
+            <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+        </div>
+    );
+};

package/light-chaser-app/src/comps/lc/date-time-picker/DateTimePickerController.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import DateTimePickerComponent, {DateTimePickerComponentProps, DateTimePickerComponentRef} from "./DateTimePickerComponent.tsx";
+import {UpdateOptions} from "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+export class DateTimePickerController extends AbstractDesignerController<DateTimePickerComponentRef, DateTimePickerComponentProps> {
+
+    async create(container: HTMLElement, config: DateTimePickerComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<DateTimePickerComponentRef>(container, DateTimePickerComponent, config);
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    changeData(data: any) {
+        if (this.config?.data?.value !== undefined)
+            this.config.data.value = data;
+        this.instance?.setValue(data);
+    }
+
+    getConfig(): DateTimePickerComponentProps | null {
+        return this.config;
+    }
+
+    update(config: DateTimePickerComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+    registerEvent() {
+        if (this.instance) {
+            const nodeId = this.config?.base?.id ?? "";
+            const executor = this.bpExecutor;
+            this.instance.setEventHandler({
+                open: () => executor?.triggerComponentEvent(nodeId!, "open", this.config),
+                close: () => executor?.triggerComponentEvent(nodeId!, "close", this.config),
+                change: (value: string | [string, string]) => executor?.triggerComponentEvent(nodeId!, "change", value),
+                ok: (value: string) => executor?.triggerComponentEvent(nodeId!, "ok", value),
+                valueChange: (value: string | [string, string]) => executor?.triggerComponentEvent(nodeId!, "valueChange", value),
+                confirm: (value: string | [string, string]) => executor?.triggerComponentEvent(nodeId!, "confirm", value),
+            });
+        }
+    }
+
+    updateTheme(newTheme: IThemeItem) {
+        if (!newTheme || !this.config?.style) return;
+
+        const styleConfig = this.config.style;
+        const {colors: {main, supplementFirst, supplementSecond, background, mainText,}} = newTheme;
+
+        /** =====================
+         * token 区域
+         * ===================== */
+        if (styleConfig?.token) {
+            const token = styleConfig.token;
+
+            token.colorTextHeading = mainText ?? '#FFFFFF';
+            token.colorPrimary = main ?? '#4FB8FF';
+            token.colorSplit = supplementFirst ?? '#3A3A4E';
+            token.colorText = mainText ?? '#FFFFFF';
+            token.colorBorder = supplementFirst ?? '#3A3A4E';
+            token.colorBgContainerDisabled = background ?? '#2C2C3E';
+            token.colorTextPlaceholder = supplementSecond ?? '#A0A0B2';
+            token.colorIcon = supplementSecond ?? '#A0A0B2';
+            token.colorIconHover = mainText ?? '#FFFFFF';
+            token.colorBgElevated = background ?? '#2C2C3E';
+        }
+
+        /** =====================
+         * components 区域
+         * ===================== */
+        if (styleConfig?.components) {
+            const comp = styleConfig.components;
+            comp.colorBgContainer = background ?? '#2C2C3E';
+            comp.colorBorder = supplementFirst ?? '#3A3A4E';
+            comp.colorText = mainText ?? '#FFFFFF';
+            comp.colorPrimary = main ?? '#4FB8FF';
+            comp.colorTextHeading = mainText ?? '#FFFFFF';
+            comp.colorSplit = supplementFirst ?? '#3A3A4E';
+            comp.hoverBorderColor = main ?? '#4FB8FF';
+            comp.activeBorderColor = supplementFirst ?? '#3CED92';
+            comp.hoverBg = supplementSecond ?? '#323247';
+            comp.activeBg = supplementFirst ?? '#282839';
+            comp.activeShadow = `0 0 0 2px rgba(79, 184, 255, 0.2)`;
+            comp.cellActiveWithRangeBg = main ?? '#4FB8FF';
+            comp.cellHoverBg = supplementSecond ?? '#323247';
+            comp.cellHoverWithRangeBg = supplementFirst ?? '#3CED92';
+        }
+
+        // 统一触发更新
+        this.update({style: styleConfig}, {reRender: true});
+    }
+
+}

package/light-chaser-app/src/comps/lc/date-time-picker/DateTimePickerDefinition.ts

@@ -0,0 +1,170 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React from 'react';
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {DateTimePickerController} from "./DateTimePickerController.ts";
+import {DateTimePickerComponentProps} from "./DateTimePickerComponent.tsx";
+import DateTimePickerImg from './datetime-picker.jpg';
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+
+// 懒加载配置组件
+const BaseInfo = React.lazy(() => import("../../common-component/base-info/BaseInfo"));
+const ThemeConfig = React.lazy(() => import("../../common-component/theme-config/ThemeConfig.tsx"));
+const AnimationConfig = React.lazy(() => import("../../common-component/animation-config/AnimationConfig.tsx"));
+const DataConfig = React.lazy(() => import("../../common-component/data-config/DataConfig.tsx"));
+const FilterConfig = React.lazy(() => import("../../common-component/filter-config/FilterConfig.tsx"));
+const DateTimePickerStyleConfig = React.lazy(() => import("./DateTimePickerConfig.tsx").then((module) => ({default: module.DateTimePickerStyleConfig})));
+
+export default class DateTimePickerDefinition extends AbstractDesignerDefinition<DateTimePickerController, DateTimePickerComponentProps> {
+
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "日期时间选择器",
+            compKey: "DateTimePicker",
+            categorize: "web",
+            width: 240,
+            height: 32,
+        };
+    }
+
+    getChartImg(): string | null {
+        return DateTimePickerImg;
+    }
+
+    getController(): ClazzTemplate<DateTimePickerController> | null {
+        return DateTimePickerController;
+    }
+
+    getInitConfig(): DateTimePickerComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '日期时间选择器',
+                type: 'DateTimePicker',
+            },
+            style: {
+                // 选择器特有配置
+                pickerType: 'date',
+                placeholder: '请选择日期',
+                showTime: false,
+                format: 'YYYY-MM-DD',
+                allowClear: true,
+                disabled: false,
+                showNow: true,
+
+                token: {
+                    lineWidth: 1,
+                    fontSize: 14,
+                    colorTextHeading: "#FFFFFF",           // 主要文字 - 白色
+                    colorPrimary: "#4FB8FF",              // 主高亮色
+                    colorSplit: "#3A3A4E",                // 分割线色
+                    colorText: "#FFFFFF",                 // 主要文字色
+                    colorBorder: "#3A3A4E",               // 边框色
+                    colorBgContainerDisabled: "#2C2C3E",  // 禁用状态背景（容器色）
+                    colorTextPlaceholder: "#A0A0B2",      // 占位符文字 - 次级文字色
+                    colorIcon: "#A0A0B2",                 // 图标颜色 - 次级文字色
+                    colorIconHover: "#FFFFFF",            // 图标悬停 - 主要文字色
+                    borderRadius: 8,                      // 卡片圆角8px
+                    lineType: "solid",                    // 实线边框
+                    fontFamily: "", // 无衬线字体栈
+                    fontWeightStrong: 600,                // Semibold字重
+                    padding: 16,                          // 次轴间距16px
+                    colorBgElevated: "#2C2C3E",           // 容器背景色
+                },
+                components: {
+                    colorBgContainer: "#2C2C3E",          // container背景 - 容器色
+                    colorBorder: "#3A3A4E",               // 边框色
+                    colorText: "#FFFFFF",                 // 主要文字色
+                    colorPrimary: "#4FB8FF",              // 主色 - 高亮蓝
+                    colorTextHeading: "#FFFFFF",          // 标题色 - 与colorText一致
+                    colorSplit: "#3A3A4E",                // 分割线色
+                    hoverBorderColor: "#4FB8FF",          // 输入框悬停边框 - 主色
+                    activeBorderColor: "#3CED92",         // 输入框激活边框 - 成功色
+                    hoverBg: "#323247",                   // 输入框悬停背景（#2C2C3E亮度提升10%）
+                    activeBg: "#282839",                  // 输入框激活背景（#2C2C3E深度10%）
+                    activeShadow: "0 0 0 2px rgba(79, 184, 255, 0.2)", // 激活态阴影（主色20%透明度）
+                    cellActiveWithRangeBg: "#4FB8FF",     // 范围选择激活背景 - 主色
+                    cellHoverBg: "#323247",               // 单元格悬停背景（亮度提升）
+                    cellHoverWithRangeBg: "#3CED92",      // 带范围单元格悬停 - 成功色
+                    cellHeight: 15,                       // 标准单元格高度
+                    cellWidth: 35,                        // 标准单元格宽度
+                    withoutTimeCellHeight: 36,            // 无时间单元格高度
+                    textHeight: 40,                       // 正文行高
+                    timeCellHeight: 28,                   // 时间单元格高度
+                    timeColumnHeight: 200,                // 时间列高度
+                    timeColumnWidth: 120,                 // 时间列宽度
+                    inputFontSize: 14,                    // 输入框字体大小
+                    paddingBlock: 4,                      // 垂直内边距（对应按钮12px设计）
+                    paddingInline: 11,                    // 水平内边距（对应按钮24px设计）
+                }
+            },
+            data: {
+                sourceType: 'static',
+                value: new Date().toISOString().slice(0, 10)
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            }
+        };
+    }
+
+    getMenuToConfigContentMap()
+        :
+        MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: DateTimePickerStyleConfig,
+            animation: AnimationConfig,
+            theme: ThemeConfig,
+            filter: FilterConfig,
+            data: DataConfig
+        };
+    }
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "open",
+                name: "打开时",
+            },
+            {
+                id: "close",
+                name: "关闭时",
+            },
+            {
+                id: "change",
+                name: "值改变时",
+            },
+            {
+                id: "ok",
+                name: "点击确认时",
+            },
+            {
+                id: "valueChange",
+                name: "值变化时",
+            },
+            {
+                id: "confirm",
+                name: "确认选择时",
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/lc/digital-flipper/DigitalFlipperComponent.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React, {ForwardedRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {CountUp} from "countup.js";
+import {Odometer} from "odometer_countup";
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+
+export interface DigitalFlipperComponentStyle {
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    color?: string;
+    type?: 'slide' | 'caper';
+    alignItems?: string;
+    justifyContent?: string;
+    prefix?: string;
+    suffix?: string;
+    decimalPlaces?: number;
+    separator?: string;
+    duration?: number;
+    backgroundImage?: string;
+    backgroundClip?: string;
+    WebkitBackgroundClip?: string;
+    WebkitTextFillColor?: string;
+}
+
+export interface DigitalFlipperComponentProps extends ComponentBaseProps {
+    style?: DigitalFlipperComponentStyle;
+}
+
+export interface DigitalFlipperComponentRef {
+    updateConfig: (newConfig: DigitalFlipperComponentProps, recreate?: boolean) => void;
+    changeData: (newData: number) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+const DigitalFlipperComponent = React.forwardRef((props: DigitalFlipperComponentProps,
+                                                  ref: ForwardedRef<DigitalFlipperComponentRef>) => {
+    const [config, setConfig] = useState<DigitalFlipperComponentProps>({...props});
+
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+    const containerRef = useRef(null);
+    const countUpAnimRef = useRef<CountUp | null>(null);
+    const [count, setCount] = useState(0);
+    const [visible, setVisible] = useState(true);
+
+    useEffect(() => {
+        const {duration = 1, separator = ',', decimalPlaces = 0, prefix = '', suffix = '',} = config.style!;
+        countUpAnimRef.current = new CountUp(containerRef.current!, config.data?.value, {
+            plugin: config.style?.type === 'slide' ? new Odometer({duration: 1, lastDigitDelay: 0}) : undefined,
+            duration,
+            suffix,
+            prefix,
+            decimalPlaces,
+            separator
+        });
+        if (!countUpAnimRef.current.error) {
+            countUpAnimRef.current.start();
+        } else {
+            console.error(countUpAnimRef.current.error);
+        }
+        return () => {
+            countUpAnimRef.current = null;
+        }
+    }, [count]);
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig, recreate) => {
+            setConfig({...newConfig});
+            if (recreate)
+                setCount((prev) => prev + 1);
+        },
+        changeData: (newData) => countUpAnimRef.current?.update(newData),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        changeVisible: (visible) => setVisible(visible)
+    }));
+
+    const onClick = () => {
+        if ('click' in eventHandlerMap.current) {
+            eventHandlerMap.current['click']();
+        }
+    }
+
+    if (!visible)
+        return null;
+    const {style} = config;
+    return (
+        <div ref={containerRef}
+             style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', ...style}}
+             onClick={onClick}/>
+    );
+});
+
+export default DigitalFlipperComponent;