@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { AccountSelectionProps } from '../AccountSelection';
+import { AccountSharingProps } from '../../organism';
+import { IHelpProps } from '../../organism/Help/types';
+import { envType } from '@antscorp/antsomi-ui/es/types/config';
+interface Breadcrumb {
+    title: string;
+    link?: string;
+    useExternalLink?: boolean;
+}
+export interface HeaderV2Props {
+    className?: string;
+    style?: React.CSSProperties;
+    pageTitle?: string | React.ReactNode;
+    breadcrumbs?: Breadcrumb[];
+    accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
+        onSelectAccount?: (userId: string) => void;
+    };
+    helpConfig: Omit<IHelpProps, 'configs'> & {
+        configs: Omit<IHelpProps['configs'], 'portalId' | 'userId' | 'token' | 'domain' | 'domainTicket' | 'domainPlatform'>;
+    } & {
+        show?: boolean;
+    };
+    notificationConfig?: {
+        show?: boolean;
+    };
+    accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
+        show?: boolean;
+    };
+    useURLParam?: boolean;
+    config?: {
+        env?: envType;
+        language?: string;
+        userId?: number;
+        portalId?: number;
+        token?: string;
+        appCode?: string;
+        menuCode?: string;
+        permissionDomain?: string;
+        iamDomain?: string;
+    };
+}
+export declare const HeaderV2: React.FC<HeaderV2Props>;
+export {};

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -0,0 +1,116 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { memo, useMemo, useState } from 'react';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+// Styled
+import { HeaderV2Styled } from './styled';
+// Components
+import { AccountSelection } from '../AccountSelection';
+import { AccountSharing, Help, Notification, } from '../../organism';
+// Constants
+import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { useContextSelector } from 'use-context-selector';
+import { AppConfigContext } from '../../..';
+import { isNil } from 'lodash';
+const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
+// const DOUBLE_RIGHT_POINTING = '&raquo;'
+export const HeaderV2 = memo(props => {
+    var _a, _b;
+    const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
+    const { search } = useLocation();
+    const history = useHistory();
+    // * Prefer to use Header in AppConfigContext
+    const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    /** General config for children component */
+    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
+    const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : 'all';
+    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : 'all'}`}`);
+    // Memo
+    const accountSelectionDomain = useMemo(() => {
+        var _a;
+        if (portalId !== PORTALS_IDS.SANDBOX_76753)
+            return CDP_API[env || 'development'];
+        switch (appCode) {
+            case DATAFLOWS:
+            case APP_ANTALYSER:
+                return (_a = APP_PERMISSION_DOMAIN[appCode || '']) === null || _a === void 0 ? void 0 : _a[env || ''];
+            default:
+                return CDP_API[env || 'development'];
+        }
+    }, [portalId, env, appCode]);
+    if (!env || !language || !userId || !portalId || !token)
+        return null;
+    const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
+    const { show: showNotification = true } = notificationConfig;
+    const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
+    const accountSelectionApiConfig = {
+        domain: accountSelectionDomain,
+        languageCode: language,
+        userId,
+        portalId,
+        token,
+        appCode,
+        menuCode,
+    };
+    const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
+    const notificationConfigProps = {
+        accountId: userId,
+        networkId: portalId,
+        token,
+        lang: language,
+        permissionDomain,
+        socketDomain: SOCKET_API,
+    };
+    const accountSharingPropsFormatted = {
+        permissionDomain,
+        iamDomain,
+        accountId: userId,
+        networkId: portalId,
+        urlEditProfile: `${permissionDomain}/${portalId}#/account/profile/`,
+        // 6006 is storybook port so direct to sandbox page
+        urlLogout: urlLogoutProvider || window.location.origin,
+        // urlLogout: window.location.origin,
+        token,
+        lang: language,
+    };
+    const handleChangeAccount = (userId) => {
+        setSelectedAccount(userId);
+        if (useURLParam) {
+            if (userId === 'all') {
+                urlParams.set('oid', userId);
+            }
+            else {
+                urlParams.delete('oid');
+            }
+            history.replace({ search: urlParams.toString() });
+        }
+        onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
+    };
+    const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
+    return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
+        React.createElement("div", { className: "left-side" },
+            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
+            React.createElement("div", { className: "title-container" },
+                breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
+                    isNil(item.useExternalLink) && !item.useExternalLink ? (React.createElement(Link, { to: item.link || '', className: "header-breadcrumbs__item" }, item.title)) : (React.createElement("a", { href: item.link, className: "header-breadcrumbs__item" }, item.title)),
+                    breadcrumbs.length === index + 1 ? null : React.createElement(React.Fragment, null,
+                        "\u2002",
+                        QUOTE_ENTITY,
+                        "\u2002")))))) : null,
+                typeof pageTitle === 'string' ? (React.createElement("div", { className: "page-title" }, pageTitle)) : (pageTitle))),
+        React.createElement("div", { className: "right-side" },
+            showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,
+            showNotification ? React.createElement(Notification, Object.assign({}, notificationConfigProps)) : null,
+            showAccountSharing ? (React.createElement(AccountSharing, Object.assign({ isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess }, accountSharingPropsFormatted, accountSharingProps))) : null)));
+});

package/es/components/molecules/HeaderV2/constants.d.ts

@@ -0,0 +1 @@
+export declare const HEADER_HEIGHT = 60;

package/es/components/molecules/HeaderV2/constants.js

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 60;

package/es/components/molecules/HeaderV2/index.d.ts

@@ -0,0 +1 @@
+export { HeaderV2, type HeaderV2Props } from './HeaderV2';

package/es/components/molecules/HeaderV2/index.js

@@ -0,0 +1 @@
+export { HeaderV2 } from './HeaderV2';

package/es/components/molecules/HeaderV2/styled.d.ts

@@ -0,0 +1 @@
+export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/HeaderV2/styled.js

@@ -0,0 +1,47 @@
+var _a, _b, _c;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const HeaderV2Styled = styled.div `
+  height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
+  background-color: #f6f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  .left-side,
+  .right-side {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .left-side {
+    gap: 15px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .header-breadcrumbs,
+  .header-breadcrumbs__item {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: bold;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw7};
+    user-select: none;
+  }
+
+  .header-breadcrumbs__item {
+    cursor: pointer;
+    &:hover {
+      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText};
+    }
+  }
+
+  .page-title {
+    font-size: 20px;
+    line-height: 23px;
+    font-weight: bold;
+  }
+`;

package/es/components/molecules/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CanvasState } from './reducer';
+export type ImageResizeHandle = {
+    getBase64: (options?: any) => string | undefined;
+    replaceImageWithUrl: (imageUrl: string) => void;
+    getCurrentState: () => CanvasState;
+};
+interface ImageEditorProps {
+    className?: string;
+    width: number;
+    height: number;
+    hideAction?: boolean;
+    imageUrl?: string;
+    defaultValue?: CanvasState;
+    showSelection?: boolean;
+    style?: Omit<React.CSSProperties, 'width'>;
+}
+export declare const ImageEditor: React.ForwardRefExoticComponent<ImageEditorProps & React.RefAttributes<ImageResizeHandle>>;
+export {};