@imposium-hub/components 2.5.12-0 → 2.5.12

package/src/components/header/Header.tsx

@@ -20,6 +20,7 @@ import { setAccessData } from '../../redux/actions/access';
 import { bindActionCreators } from 'redux';
 import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
 import StoryTableNameFilter from '../assets/StoryTableNameFilter';
+import { updateStoryFilter } from '../../redux/actions/story-filter';
 
 export interface IHeaderProps {
     email?: string;
@@ -40,6 +41,7 @@ export interface IHeaderProps {
     showFTLogo?: boolean;
     access: any;
     storyFilter: any;
+    updateStoryFilter(n): any;
 }
 
 export interface IHeaderState {
@@ -174,12 +176,18 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         });
     };
 
+    private closeStoriesDropDown() {
+        this.setState({ showStoriesDropdown: false }, () =>
+            this.props.updateStoryFilter({ name: '' })
+        );
+    }
+
     private changeStory = (story: any): void => {
         const { onStoryChange } = this.props;
 
         if (typeof onStoryChange === 'function') {
             onStoryChange(story);
-            this.setState({ showStoriesDropdown: false });
+            this.closeStoriesDropDown();
         }
     };
 
@@ -516,7 +524,10 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     ref={this.storyToggleRef}
                     onClick={() => {
                         this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
-                            if (showStoriesDropdown === false) this.getAccessDataHandler();
+                            if (showStoriesDropdown === false) {
+                                this.props.updateStoryFilter({ name: '' });
+                                this.getAccessDataHandler();
+                            }
                         });
                     }}>
                     <div className='story-name'>
@@ -543,11 +554,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 );
 
                 if (this.props.storyFilter && this.props.storyFilter?.name) {
-                    const storyFilter = this.props.storyFilter.toLowerCase();
+                    const storyFilter = this.props.storyFilter.name.toLowerCase();
 
                     const sortByName = sortedStories.filter((stories) =>
                         stories.name.toLowerCase().includes(storyFilter)
                     );
+
                     if (sortByName.length > 0) {
                         sortedStories = sortByName;
                     } else {
@@ -674,7 +686,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     position='bottomright'
                     show={showStoriesDropdown}
                     toggleRef={this.storyToggleRef}
-                    onOutsideClick={() => this.setState({ showStoriesDropdown: false })}>
+                    onOutsideClick={() => this.closeStoriesDropDown()}>
                     <div className='stories-menu'>{storyMenuInner}</div>
                 </ImposiumDropdown>
 
@@ -694,7 +706,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
-            setAccessData
+            setAccessData,
+            updateStoryFilter
         },
         dispatch
     );

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -236,7 +236,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private colorInputChanged(key, value) {
-        const color = formatColor(value);
+        const color = formatColor(value, true);
         this.variableInputChanged(key, color);
     }
 

package/src/constants/variables.ts

@@ -39,8 +39,26 @@ export const colorPresets = [
     'transparent'
 ];
 
-export const formatColor = (color) => {
+export const formatColor = (color, hex?) => {
     const { r, g, b, a } = color.rgb;
     const alpha = color.source === 'hsv' ? 1 : a;
-    return `rgba(${r},${g},${b},${alpha})`;
+
+    if (hex) {
+        return RGBAtoHexA(r, g, b, a);
+    } else {
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+};
+
+export const RGBAtoHexA = (red, green, blue, alpha) => {
+    let r = red.toString(16);
+    let g = green.toString(16);
+    let b = blue.toString(16);
+    let a = Math.round(alpha * 255).toString(16);
+
+    if (r.length === 1) r = '0' + r;
+    if (g.length === 1) g = '0' + g;
+    if (b.length === 1) b = '0' + b;
+    if (a.length === 1) a = '0' + a;
+    return '#' + r + g + b + a;
 };