@progress/kendo-react-barcodes 4.14.0-dev.202112141254

package/dist/es/Barcode.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { BarcodeProps } from './BarcodeProps';
+import { Surface } from '@progress/kendo-drawing';
+import { Group, ImageExportOptions, SVGExportOptions } from '@progress/kendo-drawing';
+/**
+ * Represents the KendoReact Barcode component.
+ */
+export declare class Barcode extends React.Component<BarcodeProps, {}> {
+    private _baseBarcode;
+    /**
+     * @hidden
+     */
+    readonly barcodeInstance: any;
+    /**
+     * The Drawing `Surface` of the Barcode.
+     */
+    readonly surface: Surface | null;
+    /**
+     * The DOM element of the Barcode.
+     */
+    readonly element: HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * Exports the component as an image. The export operation is asynchronous and returns a promise.
+     *
+     * @param {ImageExportOptions} options - The parameters for the exported image.
+     * @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
+     */
+    exportImage(options?: ImageExportOptions): Promise<string>;
+    /**
+     * Exports the component as an SVG document. The export operation is asynchronous and returns a promise.
+     *
+     * @param options - The parameters for the exported file.
+     * @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
+     */
+    exportSVG(options?: SVGExportOptions): Promise<string>;
+    /**
+     * Exports a Barcode component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Group} - A promise that returns the root `Group` of the scene.
+     */
+    exportVisual(options?: any): Group;
+    private getTarget;
+    private deriveOptionsFromParent;
+}

package/dist/es/Barcode.js

@@ -0,0 +1,146 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+import * as React from 'react';
+import { BaseBarcode } from './BaseBarcode';
+import { Barcode as KendoBarcode } from '@progress/kendo-charts';
+import { exportImage, exportSVG, Group } from '@progress/kendo-drawing';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the KendoReact Barcode component.
+ */
+var Barcode = /** @class */ (function (_super) {
+    __extends(Barcode, _super);
+    function Barcode() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getTarget = function () {
+            return _this;
+        };
+        _this.deriveOptionsFromParent = function (options) {
+            return Object.assign({}, options, {
+                background: _this.props.background,
+                border: _this.props.border,
+                checksum: _this.props.checksum,
+                color: _this.props.color,
+                height: _this.props.height,
+                padding: _this.props.padding,
+                text: _this.props.text,
+                type: _this.props.type,
+                value: _this.props.value,
+                width: _this.props.width
+            });
+        };
+        return _this;
+    }
+    Object.defineProperty(Barcode.prototype, "barcodeInstance", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            if (this._baseBarcode !== null) {
+                return this._baseBarcode.barcodeInstance;
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Barcode.prototype, "surface", {
+        /**
+         * The Drawing `Surface` of the Barcode.
+         */
+        get: function () {
+            if (this._baseBarcode !== null) {
+                return this._baseBarcode.surface;
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Barcode.prototype, "element", {
+        /**
+         * The DOM element of the Barcode.
+         */
+        get: function () {
+            if (this._baseBarcode !== null) {
+                return this._baseBarcode.element;
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    Barcode.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, children = _a.children, className = _a.className, baseBarcodeProps = __rest(_a, ["children", "className"]);
+        return (React.createElement(BaseBarcode, __assign({}, baseBarcodeProps, { deriveOptionsFromParent: this.deriveOptionsFromParent, ref: function (baseBarcode) { return _this._baseBarcode = baseBarcode; }, barcodeConstructor: KendoBarcode, getTarget: this.getTarget, className: classNames('k-barcode', className) }), children));
+    };
+    /**
+     * Exports the component as an image. The export operation is asynchronous and returns a promise.
+     *
+     * @param {ImageExportOptions} options - The parameters for the exported image.
+     * @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
+     */
+    Barcode.prototype.exportImage = function (options) {
+        if (options === void 0) { options = {}; }
+        return exportImage(this.exportVisual(), options);
+    };
+    /**
+     * Exports the component as an SVG document. The export operation is asynchronous and returns a promise.
+     *
+     * @param options - The parameters for the exported file.
+     * @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
+     */
+    Barcode.prototype.exportSVG = function (options) {
+        if (options === void 0) { options = {}; }
+        return exportSVG(this.exportVisual(), options);
+    };
+    /**
+     * Exports a Barcode component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Group} - A promise that returns the root `Group` of the scene.
+     */
+    Barcode.prototype.exportVisual = function (options) {
+        if (this.barcodeInstance !== null) {
+            return this.barcodeInstance.exportVisual(options);
+        }
+        return new Group();
+    };
+    return Barcode;
+}(React.Component));
+export { Barcode };

package/dist/es/BarcodeContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Store } from './store/store';
+/**
+ * @hidden
+ */
+export interface BarcodeContextType {
+    observersStore: Store;
+}
+/**
+ * @hidden
+ */
+export declare const BarcodeContext: React.Context<BarcodeContextType>;

package/dist/es/BarcodeContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export var BarcodeContext = React.createContext(null);
+BarcodeContext.displayName = 'BarcodeContext';

package/dist/es/BarcodeProps.d.ts

@@ -0,0 +1,61 @@
+import { BaseBarcodeProps } from './BaseBarcodeProps';
+import { BarcodeText, BarcodeType, Border, Padding } from './types';
+/**
+ * Represents the props of the [KendoReact Barcode component]({% slug overview_barcode_barcodes %}).
+ */
+export interface BarcodeProps extends BaseBarcodeProps {
+    /**
+     * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "white"
+     */
+    background?: string;
+    /**
+     * The border of the Barcode.
+     */
+    border?: Border;
+    /**
+     * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
+     *
+     * @default false
+     */
+    checksum?: boolean;
+    /**
+     * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "black"
+     */
+    color?: string;
+    /**
+     * The height of the Barcode in pixels.
+     *
+     * The Barcode dimensions can also be set through regular CSS styling.
+     */
+    height?: number;
+    /**
+     * The padding of the Barcode. A numeric value sets all paddings.
+     *
+     * @default 0
+     */
+    padding?: Padding | number;
+    /**
+     * The Barcode text label configuration.
+     */
+    text?: BarcodeText;
+    /**
+     * The symbology (encoding) the Barcode will use.
+     *
+     * @default "Code39"
+     */
+    type: BarcodeType | string;
+    /**
+     * The value of the Barcode.
+     */
+    value: number | string;
+    /**
+     * The width of the Barcode in pixels.
+     *
+     * The Barcode dimensions can also be set through regular CSS styling.
+     */
+    width?: number;
+}

package/dist/es/BaseBarcode.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Surface } from '@progress/kendo-drawing';
+import { BaseBarcodePrivateProps } from './BaseBarcodeProps';
+import { BarcodeContextType } from './BarcodeContext';
+/**
+ * @hidden
+ */
+export declare class BaseBarcode extends React.Component<BaseBarcodePrivateProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        dir: PropTypes.Requireable<string>;
+        renderAs: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        renderAs: string;
+    };
+    /**
+     * @hidden
+     */
+    barcodeInstance: any | null;
+    /**
+     * @hidden
+     */
+    surface: Surface;
+    /**
+     * @hidden
+     */
+    readonly element: HTMLDivElement;
+    protected _element: HTMLDivElement | null;
+    protected contextValue: BarcodeContextType;
+    protected observersStore: any;
+    constructor(props: BaseBarcodePrivateProps);
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: any): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * @hidden
+     */
+    instantiateCoreBarcode(): void;
+    /**
+     * @hidden
+     */
+    refresh(): void;
+    /**
+     * @hidden
+     */
+    getBarcodeOptions(): any;
+    /**
+     * @hidden
+     */
+    trigger(name: string, e: any): void;
+    /**
+     * @hidden
+     */
+    onWindowResize: () => void;
+}

package/dist/es/BaseBarcode.js

@@ -0,0 +1,179 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import createStore from './store/store';
+import { observersReducer } from './store/reducer';
+import { isOptionsChanged } from './utils/common';
+import { BarcodeContext } from './BarcodeContext';
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from './package-metadata';
+/**
+ * @hidden
+ */
+var BaseBarcode = /** @class */ (function (_super) {
+    __extends(BaseBarcode, _super);
+    function BaseBarcode(props) {
+        var _this = _super.call(this, props) || this;
+        /**
+         * @hidden
+         */
+        _this.barcodeInstance = null;
+        _this._element = null;
+        _this.observersStore = {};
+        /* DOM event handlers */
+        /**
+         * @hidden
+         */
+        _this.onWindowResize = function () {
+            if (_this.barcodeInstance !== null) {
+                _this.barcodeInstance.redraw();
+                _this.trigger('render', { sender: _this });
+            }
+        };
+        validatePackage(packageMetadata);
+        _this.observersStore = createStore(observersReducer);
+        _this.contextValue = {
+            observersStore: _this.observersStore
+        };
+        return _this;
+    }
+    Object.defineProperty(BaseBarcode.prototype, "element", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._element;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.componentDidMount = function () {
+        this.instantiateCoreBarcode();
+        window.addEventListener('resize', this.onWindowResize);
+        this.trigger('render', { sender: this });
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, children = _a.children, deriveOptionsFromParent = _a.deriveOptionsFromParent, getTarget = _a.getTarget, barcodeConstructor = _a.barcodeConstructor, className = _a.className, renderAs = _a.renderAs, currentOthers = __rest(_a, ["children", "deriveOptionsFromParent", "getTarget", "barcodeConstructor", "className", "renderAs"]);
+        var prevChildren = prevProps.children, prevDeriveOptionsFromParent = prevProps.deriveOptionsFromParent, prevGetTarget = prevProps.getTarget, prevBarcodeConstructor = prevProps.barcodeConstructor, prevClassName = prevProps.className, prevRenderAs = prevProps.renderAs, prevOthers = __rest(prevProps, ["children", "deriveOptionsFromParent", "getTarget", "barcodeConstructor", "className", "renderAs"]);
+        if (this.barcodeInstance !== null) {
+            var optionsChanged = isOptionsChanged(prevOthers, currentOthers);
+            if ((renderAs || 'svg') !== (prevRenderAs || 'svg')) {
+                if (this.barcodeInstance !== null) {
+                    this.barcodeInstance.destroy();
+                    this.barcodeInstance = null;
+                }
+                this.instantiateCoreBarcode();
+            }
+            else if (optionsChanged) {
+                this.refresh();
+            }
+            this.trigger('render', { sender: this });
+        }
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.componentWillUnmount = function () {
+        if (this.barcodeInstance !== null) {
+            this.barcodeInstance.destroy();
+            this.barcodeInstance = null;
+        }
+        window.removeEventListener('resize', this.onWindowResize);
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, children = _a.children;
+        return (React.createElement(BarcodeContext.Provider, { value: this.contextValue },
+            React.createElement("div", { style: style, ref: function (el) { return _this._element = el; }, className: className }, children)));
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.instantiateCoreBarcode = function () {
+        var barcodeConstructor = this.props.barcodeConstructor;
+        var barcodeOptions = this.getBarcodeOptions();
+        this.barcodeInstance = new barcodeConstructor(this.element, barcodeOptions, function (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                throw error;
+            }
+            else {
+                console.warn(error);
+            }
+        });
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.refresh = function () {
+        if (this.barcodeInstance !== null) {
+            var barcodeOptions = this.getBarcodeOptions();
+            this.barcodeInstance.setOptions(barcodeOptions);
+        }
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.getBarcodeOptions = function () {
+        var _a = this.props, renderAs = _a.renderAs, deriveOptionsFromParent = _a.deriveOptionsFromParent;
+        var barcodeOptions = { renderAs: renderAs };
+        if (deriveOptionsFromParent) {
+            // Add options from parent - required by TS
+            barcodeOptions = deriveOptionsFromParent(barcodeOptions);
+        }
+        return barcodeOptions;
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.prototype.trigger = function (name, e) {
+        var observers = this.observersStore.getState();
+        for (var idx = 0; idx < observers.length; idx++) {
+            observers[idx].trigger(name, e);
+        }
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.propTypes = {
+        dir: PropTypes.string,
+        renderAs: PropTypes.oneOf(['svg', 'canvas'])
+    };
+    /**
+     * @hidden
+     */
+    BaseBarcode.defaultProps = {
+        renderAs: 'svg'
+    };
+    return BaseBarcode;
+}(React.Component));
+export { BaseBarcode };

package/dist/es/BaseBarcodeProps.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { Barcodes } from './common/barcodes';
+import { RenderMode } from './types';
+/**
+ * @hidden
+ */
+export interface BaseBarcodePrivateProps extends BaseBarcodeProps {
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent?: (options: any) => any;
+    /**
+     * @hidden
+     */
+    barcodeConstructor: any;
+    /**
+     * @hidden
+     */
+    getTarget: () => Barcodes;
+}
+/**
+ * @hidden
+ */
+export interface BaseBarcodeProps {
+    /**
+     * The styles that are applied to the component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional CSS classes to the component.
+     */
+    className?: string;
+    /**
+     * Sets the preferred rendering engine.
+     *
+     * The supported values are:
+     * - `"svg"`&mdash;If available, renders the component as an inline `svg` element.
+     * - `"canvas"`&mdash;If available, renders the component as a `canvas` element.
+     */
+    renderAs?: RenderMode;
+}

package/dist/es/QRCode.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { QRCodeProps } from './QRCodeProps';
+import { Surface } from '@progress/kendo-drawing';
+import { Group, ImageExportOptions, SVGExportOptions } from '@progress/kendo-drawing';
+/**
+ * Represents the KendoReact QRCode component.
+ */
+export declare class QRCode extends React.Component<QRCodeProps, {}> {
+    private _baseBarcode;
+    /**
+     * @hidden
+     */
+    readonly barcodeInstance: any;
+    /**
+     * The Drawing `Surface` of the Barcode.
+     */
+    readonly surface: Surface | null;
+    /**
+     * The DOM element of the Barcode.
+     */
+    readonly element: HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * Exports the component as an image. The export operation is asynchronous and returns a promise.
+     *
+     * @param {ImageExportOptions} options - The parameters for the exported image.
+     * @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
+     */
+    exportImage(options?: ImageExportOptions): Promise<string>;
+    /**
+     * Exports the component as an SVG document. The export operation is asynchronous and returns a promise.
+     *
+     * @param options - The parameters for the exported file.
+     * @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
+     */
+    exportSVG(options?: SVGExportOptions): Promise<string>;
+    /**
+     * Exports a Barcode component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Group} - A promise that returns the root `Group` of the scene.
+     */
+    exportVisual(options?: any): Group;
+    private getTarget;
+    private deriveOptionsFromParent;
+}