@singularsystems/neo-react 1.0.0 → 1.0.1

package/dist/Modules/Types.d.ts

@@ -3,6 +3,7 @@ import { INavigationHelper } from '../Routing/NavigationHelper';
 import { RoutingState } from '../Routing/RoutingState';
 import Slider, { Range } from 'rc-slider';
 import { SketchPicker } from 'react-color';
+import { IColorPicker } from '../ReactComponents/IColorPicker';
 import AsyncSelect from 'react-select/async';
 import { AxiosStatic } from 'axios';
 import Select from 'react-select';
@@ -12,7 +13,15 @@ declare const NeoReactTypes: {
     Components: {
         Slider: AppServices.ServiceIdentifier<typeof Slider>;
         Range: AppServices.ServiceIdentifier<typeof Range>;
+        /**
+         * Sketchpicker (from 'react-color' package) component used by the color picker.
+         * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.
+         */
         SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
+        /**
+         * Returns a component that renders a color picker that accepts a color input, and onChange event handler.
+         */
+        ColorPicker: AppServices.ServiceIdentifier<IColorPicker>;
         ReactSelect: AppServices.ServiceIdentifier<Select>;
         AsyncSelect: AppServices.ServiceIdentifier<AsyncSelect>;
         IconFactory: AppServices.ServiceIdentifier<IIconFactory>;

package/dist/Modules/Types.js

@@ -3,7 +3,15 @@ import { AppServices } from '@singularsystems/neo-core';
 var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         Slider: new AppServices.ServiceIdentifier("NeoReact.Slider"),
         Range: new AppServices.ServiceIdentifier("NeoReact.Range"),
+        /**
+         * Sketchpicker (from 'react-color' package) component used by the color picker.
+         * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.
+         */
         SketchPicker: new AppServices.ServiceIdentifier("NeoReact.SketchPicker"),
+        /**
+         * Returns a component that renders a color picker that accepts a color input, and onChange event handler.
+         */
+        ColorPicker: new AppServices.ServiceIdentifier("NeoReact.ColorPicker"),
         ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
         AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
         IconFactory: new AppServices.ServiceIdentifier("NeoReact.IconFactory")

package/dist/ReactComponents/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorResult, SketchPickerProps } from 'react-color';
+import { SketchPickerProps } from 'react-color';
 import { Model } from '@singularsystems/neo-core';
 interface IColorPickerProps extends SketchPickerProps {
     bind: Model.IPropertyInstance;
@@ -14,13 +14,15 @@ export default class ColorPicker extends React.Component<IColorPickerProps, ICol
         visible: boolean;
         selectedColor: any;
     };
-    private sketchPickerImplementation;
+    constructor(props: IColorPickerProps);
     componentWillReceiveProps(nextProps: IColorPickerProps): void;
     componentDidMount(): void;
-    handleChange: (color: ColorResult) => void;
+    handleChange: (color: string) => void;
     visibleToggle: () => void;
     cancel: () => void;
     accept: () => void;
     render(): React.JSX.Element;
+    /** Renders the inner color picker components without the modal */
+    static render(color: string, onChange: (value: string) => void): JSX.Element;
 }
 export {};

package/dist/ReactComponents/ColorPicker.js

@@ -1,20 +1,19 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate, __extends, __metadata } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { NeoReactTypes } from '../Modules/Types';
 import { Misc } from '@singularsystems/neo-core';
 var ColorPicker = /** @class */ (function (_super) {
     __extends(ColorPicker, _super);
-    function ColorPicker() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ColorPicker(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
             visible: false,
             selectedColor: _this.props.bind.value
         };
-        _this.sketchPickerImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.SketchPicker);
         _this.handleChange = function (color) {
             // Set the color value
-            _this.setState({ selectedColor: color.hex });
+            _this.setState({ selectedColor: color });
         };
         _this.visibleToggle = function () {
             _this.setState({ visible: !_this.state.visible });
@@ -32,8 +31,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 _this.props.onChangeEvent();
             }
         };
+        _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
+    ColorPicker_1 = ColorPicker;
     ColorPicker.prototype.componentWillReceiveProps = function (nextProps) {
         if (nextProps.bind.value !== this.state.selectedColor) {
             // Update the state selectedColor if the color that was in the bind was changed
@@ -54,13 +55,27 @@ var ColorPicker = /** @class */ (function (_super) {
                         React.createElement("div", { className: "overlay-area", onClick: function () { return _this.cancel(); } }),
                         React.createElement("div", { className: "picker-container" },
                             React.createElement("div", { className: "picker-block" },
-                                React.createElement(this.sketchPickerImplementation, { color: this.state.selectedColor, onChange: this.handleChange }),
+                                ColorPicker_1.render(this.state.selectedColor, this.handleChange),
                                 React.createElement("div", { className: "action-container" },
                                     React.createElement("div", { className: "btn btn-primary btn-sm", onClick: function () { return _this.accept(); } }, "Accept"),
-                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1 mr-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
+                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
     };
-    ColorPicker = __decorate([
-        observer
+    /** Renders the inner color picker components without the modal */
+    ColorPicker.render = function (color, onChange) {
+        var sketchPicker = Misc.Globals.appService.tryGet(NeoReactTypes.Components.SketchPicker);
+        if (sketchPicker) {
+            return React.createElement(sketchPicker, { color: color, onChange: function (c) { return onChange(c.hex); } });
+        }
+        var colorPicker = Misc.Globals.appService.tryGet(NeoReactTypes.Components.ColorPicker);
+        if (colorPicker) {
+            return React.createElement(colorPicker, { color: color, onChange: onChange });
+        }
+        return React.createElement("input", { type: "color", value: color, onInput: function (e) { return onChange(e.target.value); } });
+    };
+    var ColorPicker_1;
+    ColorPicker = ColorPicker_1 = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
     ], ColorPicker);
     return ColorPicker;
 }(React.Component));

package/dist/ReactComponents/IColorPicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ColorPickerProps {
+    color: string;
+    onChange: (newColor: string) => void;
+}
+export type IColorPicker = (props: ColorPickerProps) => JSX.Element;
+export {};

package/dist/ReactComponents/IColorPicker.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "typescript": "5.4.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.0",
+    "@singularsystems/neo-core": "1.0.1",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.6.7",
@@ -49,7 +49,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.0",
+    "@singularsystems/neo-core": ">=1.0.1",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/ColorPicker.scss

@@ -20,11 +20,10 @@ div.color-picker {
         background-color: $offGrey;
         border-radius: 5px;
         border: 1px solid $concrete;
-        width: 234px;
 
         div.action-container {
             text-align: right;
-            padding-top: 3px;
+            padding-top: 5px;
             
             .btn {
                 cursor: pointer;