nzk-react-components 0.4.0 → 0.4.1

package/dist/components/DrawingTool/components/FileInput/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var FileInput = require('./FileInput.js');
-
-
-
-module.exports = FileInput;
-//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/FileInput/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Header/Header.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    onBack: () => void;
-    onSave: () => void;
-    prompt: string;
-    height: number;
-}
-declare const _default: (props: Props) => JSX.Element;
-export default _default;

package/dist/components/DrawingTool/components/Header/Header.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var styled = require('styled-components');
-var DrawingToolProvider = require('../../DrawingToolProvider.js');
-var Icon = require('../../../Icon/Icon.js');
-var IconButton = require('../../../IconButton/IconButton.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"])), function (props) { return props.height; });
-var getButtonSizeForHeight = function (height) {
-    if (height <= 50)
-        return 'x-small';
-    if (height <= 70)
-        return 'small';
-    return 'regular';
-};
-var Header = (function (props) {
-    var toolMode = DrawingToolProvider.useDrawingTool().toolMode;
-    var disableButtons = toolMode !== 'DRAW';
-    var onSave = function () {
-        if (!disableButtons)
-            props.onSave();
-    };
-    return React__default['default'].createElement(Container, { height: props.height },
-        React__default['default'].createElement(IconButton, { disabled: disableButtons, onClick: props.onBack, size: getButtonSizeForHeight(props.height), icon: React__default['default'].createElement(Icon, { name: 'arrow-left' }), theme: 'primary' }, "Back"),
-        props.prompt && (React__default['default'].createElement("div", null, props.prompt)),
-        React__default['default'].createElement(IconButton, { disabled: disableButtons, onClick: onSave, size: getButtonSizeForHeight(props.height), icon: React__default['default'].createElement(Icon, { name: 'tick' }), theme: 'confirm' }, "Save"));
-});
-var templateObject_1;
-
-module.exports = Header;
-//# sourceMappingURL=Header.js.map

package/dist/components/DrawingTool/components/Header/Header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/Header/index.d.ts

@@ -1,2 +0,0 @@
-import Header from "./Header";
-export default Header;

package/dist/components/DrawingTool/components/Header/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var Header = require('./Header.js');
-
-
-
-module.exports = Header;
-//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/Header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { Orientation } from '../../DrawingTool';
-export interface Props {
-    orientation: Orientation;
-    buttonSize: number;
-}
-declare const _default: (props: Props) => JSX.Element;
-export default _default;

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.js

@@ -1,31 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ReactTooltip = require('react-tooltip');
-var Icon = require('../../../Icon/Icon.js');
-var OpacityToggle_styles = require('./OpacityToggle.styles.js');
-var DrawingToolProvider = require('../../DrawingToolProvider.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
-
-var OpacityToggle = (function (props) {
-    var _a = DrawingToolProvider.useDrawingTool(), brushOpacity = _a.brushOpacity, setBruchOpacity = _a.setBruchOpacity, currentColour = _a.currentColour;
-    var toggleOpacity = function () {
-        setBruchOpacity(brushOpacity === 1 ? 0.5 : 1);
-    };
-    return React__default['default'].createElement("div", null,
-        React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
-        React__default['default'].createElement(OpacityToggle_styles.Container, { "data-tip": brushOpacity === 0.5
-                ? 'Switch OFF color mixer'
-                : 'Switch ON color mixer', orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .8), onClick: toggleOpacity },
-            React__default['default'].createElement(OpacityToggle_styles.OpacityButton, { orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .9) },
-                React__default['default'].createElement(Icon, { fill: brushOpacity === 1 ? '#7A7A79' : currentColour.hex, name: 'drawing-tool-opacity-half' })),
-            React__default['default'].createElement(OpacityToggle_styles.OpacityButton, { orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .9) },
-                React__default['default'].createElement(Icon, { fill: brushOpacity < 1 ? '#7A7A79' : currentColour.hex, name: 'drawing-tool-opacity-full' }))));
-});
-
-module.exports = OpacityToggle;
-//# sourceMappingURL=OpacityToggle.js.map

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpacityToggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.d.ts

@@ -1,9 +0,0 @@
-import { Orientation } from '../../DrawingTool';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const OpacityButton: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"], ["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'LANDSCAPE' ? props.buttonSize + props.buttonSize * 0.2 + "px" : 'auto'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '4px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '4px' : '0px'; });
-var OpacityButton = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"])), function (props) { return props.buttonSize; }, function (props) { return props.buttonSize; });
-var templateObject_1, templateObject_2;
-
-exports.Container = Container;
-exports.OpacityButton = OpacityButton;
-//# sourceMappingURL=OpacityToggle.styles.js.map

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpacityToggle.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/OpacityToggle/index.d.ts

@@ -1,2 +0,0 @@
-import OpacityToggle from "./OpacityToggle";
-export default OpacityToggle;

package/dist/components/DrawingTool/components/OpacityToggle/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var OpacityToggle = require('./OpacityToggle.js');
-
-
-
-module.exports = OpacityToggle;
-//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/OpacityToggle/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Placeable/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { MoveableManagerInterface, Renderer } from "react-moveable";
-declare const _default: {
-    readonly name: "placeable";
-    readonly props: {};
-    readonly events: {};
-    readonly render: (moveable: MoveableManagerInterface<any, any>, React: Renderer) => JSX.Element;
-};
-export default _default;

package/dist/components/DrawingTool/components/Placeable/index.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var Icon = require('../../../Icon/Icon.js');
-
-var Placeable = {
-    name: "placeable",
-    props: {},
-    events: {},
-    render: function (moveable, React) {
-        var rect = moveable.getRect();
-        var _a = moveable.state, pos1 = _a.pos1, pos2 = _a.pos2;
-        var Placeable = moveable.useCSS("div", "\n        {\n            position: absolute;\n            left: 0px;\n            top: 0px;\n            will-change: transform;\n            transform-origin: 0px 0px;\n            pointer-events: none;\n        }\n        .placeable-icon {\n            width: 24px;\n            height: 24px;\n            background: #4af;\n            border-radius: 100%;\n        }\n        ");
-        return React.createElement(Placeable, { key: "placeable", className: "moveable-placeable", style: {
-                transform: "translate(" + (pos2[0] - (pos2[0] - pos1[0]) / 2) + "px, " + (pos2[1] - (pos2[1] - pos1[1]) / 2) + "px) rotate(" + rect.rotation + "deg) translateY(-54px) translateX(-12px)",
-            } },
-            React.createElement("div", { className: 'placeable-icon' },
-                React.createElement(Icon, { name: 'refresh' })));
-    }
-};
-
-module.exports = Placeable;
-//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/Placeable/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/index.d.ts

@@ -1,2 +0,0 @@
-import DrawingTool from "./DrawingTool";
-export default DrawingTool;

package/dist/components/DrawingTool/lib/Sketch.d.ts

@@ -1,90 +0,0 @@
-import SketchLayer from './SketchLayer';
-import { Point } from './createInteractionSurface';
-import SketchModel, { SketchAction, SketchActionMergeData, SketchModelData } from './SketchModel';
-export interface SketchProps {
-    containerEl: HTMLDivElement;
-    template?: string;
-    onChange?: Function;
-    sketchData?: SketchModelData;
-    onReady?: Function;
-}
-interface ExportProps {
-    crop?: boolean;
-}
-export default class Sketch {
-    readonly containerEl: HTMLDivElement;
-    readonly width: number;
-    readonly height: number;
-    readonly naturalWidth: number;
-    readonly naturalHeight: number;
-    readonly pixelRatioScale: number;
-    readonly model: SketchModel;
-    readonly drawingLayer: SketchLayer;
-    readonly bufferLayer: SketchLayer;
-    readonly cacheLayer: SketchLayer;
-    readonly templateLayer?: SketchLayer;
-    template?: string;
-    interactionSurface: HTMLDivElement;
-    isDrawing: boolean;
-    onChange?: Function;
-    sketchData?: SketchModelData;
-    drawUndo?: any;
-    drawFinished?: any;
-    drawAnimation?: any;
-    reqStroke?: any;
-    constructor(props: SketchProps);
-    setBrush({ colour, size, opacity, fill, eraser }: {
-        colour: any;
-        size: any;
-        opacity: any;
-        fill: any;
-        eraser: any;
-    }): void;
-    mergeImage(data: SketchActionMergeData, saveAction?: boolean, callback?: () => void): void;
-    export(props?: ExportProps): any;
-    undo(): void;
-    redo(): void;
-    canUndo(): boolean;
-    canRedo(): boolean;
-    restart(): void;
-    serialize(): {
-        colour: number[];
-        opacity: number;
-        size: number;
-        lastActionIndex: number;
-        actions: SketchAction[];
-        currentStroke: import("./SketchStrokeModel").SketchStrokeModelData | null;
-    };
-    deserialize(serialized: any): void;
-    getNumberOfActions(): number;
-    initDrawAnimations(): void;
-    startDraw(point: Point): void;
-    continueDraw(point: Point): boolean;
-    endDraw(): void;
-    drawExistingSketch(callback?: Function): void;
-    drawAction(action: SketchAction, callback?: () => void): void;
-    strokeAnimation(): void;
-    drawAnimationStroke(stroke: any): void;
-    endStrokeAnimation(): void;
-    drawUndoStroke(stroke: any): void;
-    drawFinishedStroke(stroke: any): void;
-    drawExistingStroke(stroke: any): void;
-    drawTransparentFillFinal(stroke: any): void;
-    drawStrokeFinal(stroke: any): void;
-    drawFillFinal(stroke: any): void;
-    drawFillAndStroke(stroke: any): void;
-    drawEraserUndoingFinal(stroke: any): void;
-    drawEraserUndoingFillFinal(stroke: any): void;
-    drawEraser(stroke: any, copy?: boolean): void;
-    drawEraserFillFinal(stroke: any, copy?: boolean): void;
-    findBoundingBox(ctx: any): {
-        topLeftX: number;
-        topLeftY: number;
-        bottomRightX: number;
-        bottomRightY: number;
-        width: number;
-        height: number;
-    };
-    getLayerToExport(): SketchLayer;
-}
-export {};