@plusscommunities/pluss-core-web 1.4.6-beta.0 → 1.4.9-beta.0

package/dist/index.cjs.js

@@ -11025,8 +11025,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setColourCircle", function (colour) {
-      var tc = tinycolor__default['default'](colour);
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setColourCircle", function () {
+      var tc = tinycolor__default['default'](_this.state.colour);
 
       _this.setState({
         colourCircleTop: 100 - 100 * tc.getBrightness() / 255,
@@ -11043,6 +11043,7 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onColourChange", function (color) {
+      // console.log('onColourChange', color);
       var colour = color;
 
       if (_typeof__default['default'](color) === 'object') {
@@ -11050,10 +11051,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
       }
 
       _this.setState({
-        colour: colour.toUpperCase()
+        selectedColour: colour.toUpperCase()
       });
-
-      _this.setColourCircle(colour);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectOption", function (selectedOption) {
@@ -11063,15 +11062,34 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDone", function () {
+      var _this$state = _this.state,
+          colourPickerOpen = _this$state.colourPickerOpen,
+          selectedColour = _this$state.selectedColour;
+
       _this.setState({
-        colourPickerOpen: !_this.state.colourPickerOpen
+        colourPickerOpen: !colourPickerOpen,
+        colour: selectedColour
       }, function () {
+        _this.setColourCircle();
+
         var onColourSelected = _this.props.onColourSelected;
         if (onColourSelected) onColourSelected(_this.state.colour);
       });
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCancel", function () {
+      var _this$state2 = _this.state,
+          colourPickerOpen = _this$state2.colourPickerOpen,
+          colour = _this$state2.colour;
+
+      _this.setState({
+        colourPickerOpen: !colourPickerOpen,
+        selectedColour: colour
+      });
+    });
+
     _this.state = {
+      selectedColour: props.value,
       colour: props.value,
       selectedOption: props.defaultTab || 'vibrant',
       colourPickerOpen: false,
@@ -11082,12 +11100,19 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }
 
   _createClass__default['default'](ColourPicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setColourCircle();
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.value !== prevProps.value) {
+        var value = this.props.value;
         this.setState({
-          colour: this.props.value
-        });
+          selectedColour: value,
+          colour: value
+        }, this.setColourCircle);
       }
     }
   }, {
@@ -11133,10 +11158,12 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColourOptions",
     value: function renderColourOptions() {
+      var _this$state3 = this.state,
+          selectedColour = _this$state3.selectedColour,
+          selectedOption = _this$state3.selectedOption;
       var content;
-      var selectedColour = this.state.colour;
 
-      switch (this.state.selectedOption) {
+      switch (selectedOption) {
         case 'picker':
           content = /*#__PURE__*/React__default['default'].createElement("div", {
             className: "flex flex-center-row colourQuickChoices",
@@ -11197,7 +11224,7 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
       var tabs = this.getQuickChoiceTabs();
       return /*#__PURE__*/React__default['default'].createElement("div", null, tabs && tabs.length > 1 ? /*#__PURE__*/React__default['default'].createElement(Tabs, {
         onSelectTab: this.onSelectOption,
-        selectedTab: this.state.selectedOption,
+        selectedTab: selectedOption,
         tabs: tabs
       }) : null, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "flex flex-center flex-center-row"
@@ -11206,7 +11233,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColourPopup",
     value: function renderColourPopup() {
-      if (!this.state.colourPickerOpen) return null;
+      var colourPickerOpen = this.state.colourPickerOpen;
+      if (!colourPickerOpen) return null;
       var title = this.props.title;
       return /*#__PURE__*/React__default['default'].createElement(Popup, {
         title: title || "Colour Picker",
@@ -11215,18 +11243,29 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
         buttons: [{
           type: 'primary',
           onClick: this.onDone,
+          style: {
+            width: 100
+          },
           isActive: true,
           text: 'Done'
+        }, {
+          type: 'outlinedAction',
+          onClick: this.onCancel,
+          style: {
+            width: 100
+          },
+          isActive: true,
+          text: 'Cancel'
         }]
       }, this.renderColourOptions());
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$state = this.state,
-          colourCircleTop = _this$state.colourCircleTop,
-          colourCircleLeft = _this$state.colourCircleLeft,
-          colour = _this$state.colour;
+      var _this$state4 = this.state,
+          colourCircleTop = _this$state4.colourCircleTop,
+          colourCircleLeft = _this$state4.colourCircleLeft,
+          colour = _this$state4.colour;
       var _this$props = this.props,
           children = _this$props.children,
           showHex = _this$props.showHex;

package/dist/index.esm.js

@@ -10995,8 +10995,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "setColourCircle", function (colour) {
-      var tc = tinycolor(colour);
+    _defineProperty(_assertThisInitialized(_this), "setColourCircle", function () {
+      var tc = tinycolor(_this.state.colour);
 
       _this.setState({
         colourCircleTop: 100 - 100 * tc.getBrightness() / 255,
@@ -11013,6 +11013,7 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onColourChange", function (color) {
+      // console.log('onColourChange', color);
       var colour = color;
 
       if (_typeof(color) === 'object') {
@@ -11020,10 +11021,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
       }
 
       _this.setState({
-        colour: colour.toUpperCase()
+        selectedColour: colour.toUpperCase()
       });
-
-      _this.setColourCircle(colour);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSelectOption", function (selectedOption) {
@@ -11033,15 +11032,34 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDone", function () {
+      var _this$state = _this.state,
+          colourPickerOpen = _this$state.colourPickerOpen,
+          selectedColour = _this$state.selectedColour;
+
       _this.setState({
-        colourPickerOpen: !_this.state.colourPickerOpen
+        colourPickerOpen: !colourPickerOpen,
+        colour: selectedColour
       }, function () {
+        _this.setColourCircle();
+
         var onColourSelected = _this.props.onColourSelected;
         if (onColourSelected) onColourSelected(_this.state.colour);
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onCancel", function () {
+      var _this$state2 = _this.state,
+          colourPickerOpen = _this$state2.colourPickerOpen,
+          colour = _this$state2.colour;
+
+      _this.setState({
+        colourPickerOpen: !colourPickerOpen,
+        selectedColour: colour
+      });
+    });
+
     _this.state = {
+      selectedColour: props.value,
       colour: props.value,
       selectedOption: props.defaultTab || 'vibrant',
       colourPickerOpen: false,
@@ -11052,12 +11070,19 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(ColourPicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setColourCircle();
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.value !== prevProps.value) {
+        var value = this.props.value;
         this.setState({
-          colour: this.props.value
-        });
+          selectedColour: value,
+          colour: value
+        }, this.setColourCircle);
       }
     }
   }, {
@@ -11103,10 +11128,12 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColourOptions",
     value: function renderColourOptions() {
+      var _this$state3 = this.state,
+          selectedColour = _this$state3.selectedColour,
+          selectedOption = _this$state3.selectedOption;
       var content;
-      var selectedColour = this.state.colour;
 
-      switch (this.state.selectedOption) {
+      switch (selectedOption) {
         case 'picker':
           content = /*#__PURE__*/React.createElement("div", {
             className: "flex flex-center-row colourQuickChoices",
@@ -11167,7 +11194,7 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
       var tabs = this.getQuickChoiceTabs();
       return /*#__PURE__*/React.createElement("div", null, tabs && tabs.length > 1 ? /*#__PURE__*/React.createElement(Tabs, {
         onSelectTab: this.onSelectOption,
-        selectedTab: this.state.selectedOption,
+        selectedTab: selectedOption,
         tabs: tabs
       }) : null, /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center flex-center-row"
@@ -11176,7 +11203,8 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColourPopup",
     value: function renderColourPopup() {
-      if (!this.state.colourPickerOpen) return null;
+      var colourPickerOpen = this.state.colourPickerOpen;
+      if (!colourPickerOpen) return null;
       var title = this.props.title;
       return /*#__PURE__*/React.createElement(Popup, {
         title: title || "Colour Picker",
@@ -11185,18 +11213,29 @@ var ColourPicker = /*#__PURE__*/function (_Component) {
         buttons: [{
           type: 'primary',
           onClick: this.onDone,
+          style: {
+            width: 100
+          },
           isActive: true,
           text: 'Done'
+        }, {
+          type: 'outlinedAction',
+          onClick: this.onCancel,
+          style: {
+            width: 100
+          },
+          isActive: true,
+          text: 'Cancel'
         }]
       }, this.renderColourOptions());
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$state = this.state,
-          colourCircleTop = _this$state.colourCircleTop,
-          colourCircleLeft = _this$state.colourCircleLeft,
-          colour = _this$state.colour;
+      var _this$state4 = this.state,
+          colourCircleTop = _this$state4.colourCircleTop,
+          colourCircleLeft = _this$state4.colourCircleLeft,
+          colour = _this$state4.colour;
       var _this$props = this.props,
           children = _this$props.children,
           showHex = _this$props.showHex;

package/dist/index.umd.js

@@ -10996,8 +10996,8 @@
 
       _this = _super.call(this, props);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setColourCircle", function (colour) {
-        var tc = tinycolor__default['default'](colour);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setColourCircle", function () {
+        var tc = tinycolor__default['default'](_this.state.colour);
 
         _this.setState({
           colourCircleTop: 100 - 100 * tc.getBrightness() / 255,
@@ -11014,6 +11014,7 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onColourChange", function (color) {
+        // console.log('onColourChange', color);
         var colour = color;
 
         if (_typeof__default['default'](color) === 'object') {
@@ -11021,10 +11022,8 @@
         }
 
         _this.setState({
-          colour: colour.toUpperCase()
+          selectedColour: colour.toUpperCase()
         });
-
-        _this.setColourCircle(colour);
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectOption", function (selectedOption) {
@@ -11034,15 +11033,34 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDone", function () {
+        var _this$state = _this.state,
+            colourPickerOpen = _this$state.colourPickerOpen,
+            selectedColour = _this$state.selectedColour;
+
         _this.setState({
-          colourPickerOpen: !_this.state.colourPickerOpen
+          colourPickerOpen: !colourPickerOpen,
+          colour: selectedColour
         }, function () {
+          _this.setColourCircle();
+
           var onColourSelected = _this.props.onColourSelected;
           if (onColourSelected) onColourSelected(_this.state.colour);
         });
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCancel", function () {
+        var _this$state2 = _this.state,
+            colourPickerOpen = _this$state2.colourPickerOpen,
+            colour = _this$state2.colour;
+
+        _this.setState({
+          colourPickerOpen: !colourPickerOpen,
+          selectedColour: colour
+        });
+      });
+
       _this.state = {
+        selectedColour: props.value,
         colour: props.value,
         selectedOption: props.defaultTab || 'vibrant',
         colourPickerOpen: false,
@@ -11053,12 +11071,19 @@
     }
 
     _createClass__default['default'](ColourPicker, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.setColourCircle();
+      }
+    }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
         if (this.props.value !== prevProps.value) {
+          var value = this.props.value;
           this.setState({
-            colour: this.props.value
-          });
+            selectedColour: value,
+            colour: value
+          }, this.setColourCircle);
         }
       }
     }, {
@@ -11104,10 +11129,12 @@
     }, {
       key: "renderColourOptions",
       value: function renderColourOptions() {
+        var _this$state3 = this.state,
+            selectedColour = _this$state3.selectedColour,
+            selectedOption = _this$state3.selectedOption;
         var content;
-        var selectedColour = this.state.colour;
 
-        switch (this.state.selectedOption) {
+        switch (selectedOption) {
           case 'picker':
             content = /*#__PURE__*/React__default['default'].createElement("div", {
               className: "flex flex-center-row colourQuickChoices",
@@ -11168,7 +11195,7 @@
         var tabs = this.getQuickChoiceTabs();
         return /*#__PURE__*/React__default['default'].createElement("div", null, tabs && tabs.length > 1 ? /*#__PURE__*/React__default['default'].createElement(Tabs, {
           onSelectTab: this.onSelectOption,
-          selectedTab: this.state.selectedOption,
+          selectedTab: selectedOption,
           tabs: tabs
         }) : null, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-center flex-center-row"
@@ -11177,7 +11204,8 @@
     }, {
       key: "renderColourPopup",
       value: function renderColourPopup() {
-        if (!this.state.colourPickerOpen) return null;
+        var colourPickerOpen = this.state.colourPickerOpen;
+        if (!colourPickerOpen) return null;
         var title = this.props.title;
         return /*#__PURE__*/React__default['default'].createElement(Popup, {
           title: title || "Colour Picker",
@@ -11186,18 +11214,29 @@
           buttons: [{
             type: 'primary',
             onClick: this.onDone,
+            style: {
+              width: 100
+            },
             isActive: true,
             text: 'Done'
+          }, {
+            type: 'outlinedAction',
+            onClick: this.onCancel,
+            style: {
+              width: 100
+            },
+            isActive: true,
+            text: 'Cancel'
           }]
         }, this.renderColourOptions());
       }
     }, {
       key: "render",
       value: function render() {
-        var _this$state = this.state,
-            colourCircleTop = _this$state.colourCircleTop,
-            colourCircleLeft = _this$state.colourCircleLeft,
-            colour = _this$state.colour;
+        var _this$state4 = this.state,
+            colourCircleTop = _this$state4.colourCircleTop,
+            colourCircleLeft = _this$state4.colourCircleLeft,
+            colour = _this$state4.colour;
         var _this$props = this.props,
             children = _this$props.children,
             showHex = _this$props.showHex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.4.6-beta.0",
+  "version": "1.4.9-beta.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/ColourPicker.js

@@ -10,6 +10,7 @@ class ColourPicker extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      selectedColour: props.value,
       colour: props.value,
       selectedOption: props.defaultTab || 'vibrant',
       colourPickerOpen: false,
@@ -18,14 +19,19 @@ class ColourPicker extends Component {
     };
   }
 
+  componentDidMount() {
+    this.setColourCircle();
+  }
+
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
-      this.setState({ colour: this.props.value });
+      const { value } = this.props;
+      this.setState({ selectedColour: value, colour: value }, this.setColourCircle);
     }
   }
 
-  setColourCircle = (colour) => {
-    const tc = tinycolor(colour);
+  setColourCircle = () => {
+    const tc = tinycolor(this.state.colour);
     this.setState({
       colourCircleTop: 100 - (100 * tc.getBrightness()) / 255,
       colourCircleLeft: (100 * tc.toHsv().h) / 360,
@@ -58,12 +64,12 @@ class ColourPicker extends Component {
   };
 
   onColourChange = (color) => {
+    // console.log('onColourChange', color);
     let colour = color;
     if (typeof color === 'object') {
       colour = color.hex;
     }
-    this.setState({ colour: colour.toUpperCase() });
-    this.setColourCircle(colour);
+    this.setState({ selectedColour: colour.toUpperCase() });
   };
 
   onSelectOption = (selectedOption) => {
@@ -71,12 +77,20 @@ class ColourPicker extends Component {
   };
 
   onDone = () => {
-    this.setState({ colourPickerOpen: !this.state.colourPickerOpen }, () => {
+    const { colourPickerOpen, selectedColour } = this.state;
+    this.setState({ colourPickerOpen: !colourPickerOpen, colour: selectedColour }, () => {
+      this.setColourCircle();
+
       const { onColourSelected } = this.props;
       if (onColourSelected) onColourSelected(this.state.colour);
     });
   };
 
+  onCancel = () => {
+    const { colourPickerOpen, colour } = this.state;
+    this.setState({ colourPickerOpen: !colourPickerOpen, selectedColour: colour });
+  };
+
   renderColourQuickChoicesCircle(colour, selectedColour) {
     const isSelected = selectedColour.toLowerCase() === colour.toLowerCase();
     return (
@@ -91,9 +105,10 @@ class ColourPicker extends Component {
   }
 
   renderColourOptions() {
+    const { selectedColour, selectedOption } = this.state;
+
     let content;
-    const selectedColour = this.state.colour;
-    switch (this.state.selectedOption) {
+    switch (selectedOption) {
       case 'picker':
         content = (
           <div className="flex flex-center-row colourQuickChoices" style={{ marginBottom: 'unset' }}>
@@ -181,14 +196,15 @@ class ColourPicker extends Component {
 
     return (
       <div>
-        {tabs && tabs.length > 1 ? <Tabs onSelectTab={this.onSelectOption} selectedTab={this.state.selectedOption} tabs={tabs} /> : null}
+        {tabs && tabs.length > 1 ? <Tabs onSelectTab={this.onSelectOption} selectedTab={selectedOption} tabs={tabs} /> : null}
         <div className="flex flex-center flex-center-row">{content}</div>
       </div>
     );
   }
 
   renderColourPopup() {
-    if (!this.state.colourPickerOpen) return null;
+    const { colourPickerOpen } = this.state;
+    if (!colourPickerOpen) return null;
     const { title } = this.props;
 
     return (
@@ -200,9 +216,17 @@ class ColourPicker extends Component {
           {
             type: 'primary',
             onClick: this.onDone,
+            style: { width: 100 },
             isActive: true,
             text: 'Done',
           },
+          {
+            type: 'outlinedAction',
+            onClick: this.onCancel,
+            style: { width: 100 },
+            isActive: true,
+            text: 'Cancel',
+          },
         ]}
       >
         {this.renderColourOptions()}