@adcops/autocore-react 3.0.5 → 3.0.6

package/dist/components/FitText.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface FitTextProps {
+    /** The children prop expects any valid React node. */
+    children: React.ReactNode;
+}
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ *
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export declare const FitText: React.FC<FitTextProps>;
+export default FitText;

package/dist/components/FitText.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import useFitText from"use-fit-text";export const FitText=({children:t})=>{const{fontSize:e,ref:i}=useFitText();return _jsx("div",{ref:i,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:_jsx("p",{style:{fontSize:e},children:t})})};export default FitText;

package/dist/components/ValueIndicator.d.ts

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+    /**
+     * The topic to monitor to display. Optional.
+     */
+    topic?: string;
+}
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ *
+ */
+export declare class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps);
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default ValueIndicator;
+export { NumerableFormatOptions };

package/dist/components/ValueIndicator.js

@@ -0,0 +1 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Component}from"react";import{Tooltip}from"primereact/tooltip";import{ValueDisplay}from"./ValueDisplay";export class ValueIndicator extends Component{constructor(r){super(r),this.state={}}render(){return _jsxs(_Fragment,{children:[_jsxs("style",{children:["\n                        .value-indicator-container {\n\n                            background-color: var(--surface-ground);\n                            border-color: var(--surface-border);\n                            border-radius: var(--border-radius);\n                            border-width: 1px;\n                            border-style: solid;\n                            display: flex;\n                            flex-direction: column;\n                            justify-content: center;\n                            align-items: center;\n                            padding: 2mm;\n                        }\n\n                        .value-indicator-label {\n                            padding-bottom: 1mm;\n                        }            \n                    ","'"]}),_jsx(Tooltip,{target:".value-indicator-tooltip"}),_jsx("span",{className:"value-indicator-tooltip",children:_jsxs("div",{className:"value-indicator-container",children:[void 0!==this.props.label&&_jsx("div",{className:"value-indicator-label",children:this.props.label}),_jsx(ValueDisplay,{className:this.props.className,value:this.props.value,format:this.props.format,formatOptions:this.props.formatOptions,topic:this.props.topic,"data-pr-tooltip":this.props.tooltip,"data-pr-position":"down","data-pr-mousetrack":!0,"data-pr-showDelay":2e3})]})})]})}}export default ValueIndicator;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.5",
+    "version": "3.0.6",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FitText.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-21 13:03:38
+ * -----
+ * Last Modified: 2024-03-21 13:36:25
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import useFitText from 'use-fit-text';
+
+interface FitTextProps {
+  /** The children prop expects any valid React node. */
+  children: React.ReactNode;
+}
+
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ * 
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export const FitText: React.FC<FitTextProps> = ({ children }) => {
+  const { fontSize, ref } = useFitText();
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <p style={{ fontSize }}>{children}</p>
+    </div>
+  );
+};
+
+
+export default FitText;

package/src/components/ValueIndicator.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-03-21 15:24:54
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+
+import React, { Component } from 'react';
+
+import { Tooltip } from "primereact/tooltip";
+
+import { ValueDisplay } from './ValueDisplay';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+
+
+
+
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+
+
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+
+
+
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ * 
+ */
+export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+
+
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render() {
+
+
+        return (
+            <>
+                <style>
+                    {`
+                        .value-indicator-container {
+
+                            background-color: var(--surface-ground);
+                            border-color: var(--surface-border);
+                            border-radius: var(--border-radius);
+                            border-width: 1px;
+                            border-style: solid;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 2mm;
+                        }
+
+                        .value-indicator-label {
+                            padding-bottom: 1mm;
+                        }            
+                    `}'
+                </style>
+                <Tooltip target=".value-indicator-tooltip" />
+                <span className="value-indicator-tooltip" >
+                    <div className='value-indicator-container'>
+
+                        {this.props.label !== undefined &&
+                            <div className="value-indicator-label">
+                                {this.props.label}
+                            </div>
+                        }
+
+                        <ValueDisplay
+                            className={this.props.className}
+                            value={this.props.value}
+                            format={this.props.format}
+                            formatOptions={this.props.formatOptions}
+                            topic={this.props.topic}
+                            data-pr-tooltip={this.props.tooltip}
+                            data-pr-position="down"
+                            data-pr-mousetrack={true}
+                            data-pr-showDelay={2000}
+                        />
+                    </div>
+                </span>
+            </>
+        );
+    }
+}
+
+export default ValueIndicator;
+export { NumerableFormatOptions };