@mailstep/design-system 0.5.0-beta.21 → 0.5.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.21",
+  "version": "0.5.0-beta.23",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.d.ts

@@ -1,5 +1,4 @@
 import { DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-declare const Image: ({ rowData, column }: Props) => JSX.Element | null;
-export default Image;
+export declare const HoverBubble: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.js

@@ -6,8 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import get from 'lodash/fp/get';
 var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"], ["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"])));
-export var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
-var Image = function (_a) {
+var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
+export var HoverBubble = function (_a) {
     var rowData = _a.rowData, column = _a.column;
     var value = get(column.name, rowData);
     if (value) {
@@ -15,5 +15,4 @@ var Image = function (_a) {
     }
     return null;
 };
-export default Image;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.d.ts

@@ -0,0 +1,7 @@
+import { DataCellProps } from '../../types';
+type SwitchData = {
+    id: string;
+};
+type Props = DataCellProps<SwitchData>;
+export declare const ToggleCell: ({ rowData, column, onRowAction }: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { SwitchInCell } from './SwitchInCell';
+import get from 'lodash/fp/get';
+export var ToggleCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, column = _a.column, onRowAction = _a.onRowAction;
+    var inverse = !!((_b = column === null || column === void 0 ? void 0 : column.passProps) === null || _b === void 0 ? void 0 : _b.inverse);
+    var rawValue = get(column.name, rowData);
+    var value = inverse ? !rawValue : !!rawValue;
+    var actionName = "toggle_".concat(column.name);
+    var _c = React.useState(value), isChecked = _c[0], setIsChecked = _c[1];
+    React.useEffect(function () {
+        setIsChecked(value);
+    }, [rowData.id]);
+    var onSwitchChange = useCallback(function () {
+        if (!onRowAction)
+            return;
+        var ret = onRowAction(rowData.id, actionName, !isChecked);
+        if (ret) {
+            // promise returned = we wait for result
+            ret.then(function () { return setIsChecked(!isChecked); });
+        }
+        else {
+            // no promise = we fake feedback
+            setIsChecked(!isChecked);
+        }
+    }, [onRowAction, rowData.id, actionName, isChecked]);
+    return _jsx(SwitchInCell, { checked: isChecked, onChange: onSwitchChange });
+};

package/ui/Blocks/CommonGrid/components/gridCells/index.d.ts

@@ -9,4 +9,6 @@ export { IconButtonInCell } from './IconButtonInCell';
 export { SwitchInCell } from './SwitchInCell';
 export { ImageCell } from './ImageCell';
 export { EnumInCell } from './EnumInCell';
+export { HoverBubble } from './HoverBubble';
 export { RowActionsCell } from './RowActionsCell';
+export { ToggleCell } from './ToggleCell';

package/ui/Blocks/CommonGrid/components/gridCells/index.js

@@ -9,4 +9,6 @@ export { IconButtonInCell } from './IconButtonInCell';
 export { SwitchInCell } from './SwitchInCell';
 export { ImageCell } from './ImageCell';
 export { EnumInCell } from './EnumInCell';
+export { HoverBubble } from './HoverBubble';
 export { RowActionsCell } from './RowActionsCell';
+export { ToggleCell } from './ToggleCell';

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.d.ts

@@ -0,0 +1,3 @@
+import { FloatingButtonProps, Item } from '../types';
+declare const useFloatingButton: (hasPermission: any, onClick?: () => void, options?: Item[], onSelect?: ((value: string) => void) | undefined) => FloatingButtonProps | undefined;
+export default useFloatingButton;

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+var useFloatingButton = function (hasPermission, onClick, options, onSelect) {
+    return useMemo(function () {
+        if (!hasPermission)
+            return;
+        return {
+            onClick: onClick,
+            options: options,
+            onSelect: onSelect,
+        };
+    }, [hasPermission, onClick, options, onSelect]);
+};
+export default useFloatingButton;

package/ui/Blocks/CommonGrid/index.d.ts

@@ -1,9 +1,10 @@
 import CommonGrid from './CommonGridContainer';
 import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
 import * as utils from './utils/public';
 export * from './StandardButtons';
 export * from './components/gridCells';
 export default CommonGrid;
-export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils, useFloatingButton, };

package/ui/Blocks/CommonGrid/index.js

@@ -1,9 +1,10 @@
 import CommonGrid from './CommonGridContainer';
 import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
 import * as utils from './utils/public';
 export * from './StandardButtons';
 export * from './components/gridCells';
 export default CommonGrid;
-export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils, useFloatingButton, };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -157,6 +157,7 @@ export type DataCellProps<T> = {
     rowData: T;
     onRowAction?: (id: string, field: string, value: any) => void | Promise<any>;
     column: ColumnDefinition;
+    children?: React.ReactNode;
 };
 type SingleColumnConfig = {
     isHidden?: boolean;