@antscorp/antsomi-ui 1.3.5-beta.776 → 1.3.5-beta.777

package/es/components/atoms/Tag/Tag.d.ts

@@ -1,2 +1,11 @@
+import React from 'react';
+import { TagProps } from 'antd';
 import { TagType } from 'antd/lib';
-export declare const Tag: TagType;
+export interface TagListProps {
+    tags: string[];
+    tagProps?: TagProps;
+    limit?: number;
+}
+export declare const Tag: TagType & {
+    List: React.FC<TagListProps>;
+};

package/es/components/atoms/Tag/Tag.js

@@ -1,10 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+// Libraries
+import { useMemo, useState } from 'react';
 import { Tag as AntdTag } from 'antd';
 import styled from 'styled-components';
 // Icons
 import { CloseIcon } from '../../icons';
+// Components
+import { Flex } from '../Flex';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { SearchPopover } from '../../molecules';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Utils
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Scrollbars } from '../Scrollbars';
+const { Text } = Typography;
 const CloseBtn = styled.div `
   display: flex;
   align-items: center;
@@ -14,9 +27,36 @@ const CloseBtn = styled.div `
   background-color: #fff;
   border-radius: 100%;
 `;
+const AllTagsContainer = styled(Flex) `
+  padding: 10px;
+`;
 const OriginTag = props => {
     const { closable = false, closeIcon = (_jsx(CloseBtn, { children: _jsx(CloseIcon, { size: 14, color: globalToken?.colorPrimary }) })), ...restOfProps } = props;
     return _jsx(AntdTag, { ...restOfProps, closable: closable, closeIcon: closable ? closeIcon : null });
 };
+const TagList = props => {
+    const { tags, tagProps, limit = 2 } = props;
+    const [state, setState] = useState({
+        open: false,
+        searchValue: '',
+        selected: [],
+    });
+    const { searchValue } = state;
+    const filteredTags = useMemo(() => tags.filter(tag => searchStringQuery(tag, searchValue)), [tags, searchValue]);
+    const renderTags = () => (_jsx(Flex, { align: "center", children: tags.slice(0, limit).map((tag, index) => (_jsx(OriginTag, { ...tagProps, children: _jsx(Text, { ellipsis: { tooltip: true }, children: tag }) }, index))) }));
+    const renderAllTags = () => (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 300, children: _jsx(AllTagsContainer, { gap: "8px 0px", wrap: "wrap", children: filteredTags.map((tag, index) => (_jsx(OriginTag, { ...tagProps, children: _jsx(Text, { ellipsis: { tooltip: true }, children: tag }) }, index))) }) }));
+    const renderShowMoreTags = () => {
+        if (tags.length > limit) {
+            return (_jsx(SearchPopover, { content: renderAllTags(), overlayInnerStyle: { width: 300 }, inputSearchProps: {
+                    onAfterChange(value) {
+                        setState(prev => ({ ...prev, searchValue: value }));
+                    },
+                }, children: _jsx(Button, { type: "text", children: translate(translations.viewAll) }) }));
+        }
+        return null;
+    };
+    return (_jsxs(Flex, { children: [renderTags(), " ", renderShowMoreTags()] }));
+};
 export const Tag = OriginTag;
 Tag.CheckableTag = AntdTag.CheckableTag;
+Tag.List = TagList;

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -1,4 +1,7 @@
-export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType & {
+    List: import("react").FC<import("../../atoms/Tag/Tag").TagListProps>;
+}, any, {}, never>;
 export declare const TagCloseBtn: import("styled-components").StyledComponent<"div", any, {
     borderColor?: string | undefined;
 }, never>;

package/es/components/organism/Login/components/VerifyAccount/styled.d.ts

@@ -9,7 +9,7 @@ export declare const WrapperForm: import("styled-components").StyledComponent<(<
     useWatch: typeof import("rc-field-form").useWatch;
     Item: (<Values_1 = any>(props: import("antd").FormItemProps<Values_1>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         useStatus: () => {
-            status?: "" | "warning" | "error" | "success" | "validating" | undefined;
+            status?: "" | "warning" | "success" | "error" | "validating" | undefined;
             errors: import("react").ReactNode[];
             warnings: import("react").ReactNode[];
         };

package/es/components/organism/Login/styled.d.ts

@@ -19,7 +19,7 @@ export declare const StyledForm: import("styled-components").StyledComponent<(<V
     useWatch: typeof import("rc-field-form").useWatch;
     Item: (<Values_1 = any>(props: import("antd").FormItemProps<Values_1>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         useStatus: () => {
-            status?: "" | "warning" | "error" | "success" | "validating" | undefined;
+            status?: "" | "warning" | "success" | "error" | "validating" | undefined;
             errors: import("react").ReactNode[];
             warnings: import("react").ReactNode[];
         };

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/es/constants/variables.d.ts

@@ -66,3 +66,15 @@ export declare const MAP_BOOLEAN_PROPERTIES: {
         label: string;
     };
 };
+export declare const DEFAULT_STATUS: {
+    ENABLED: number;
+    DISABLED: number;
+    REMOVED: number;
+    ARCHIVED: number;
+};
+export declare const ATTRIBUTE_STATUS: {
+    ENABLED: number;
+    DISABLED: number;
+    REMOVED: number;
+    ARCHIVED: number;
+};

package/es/constants/variables.js

@@ -70,3 +70,11 @@ export const MAP_BOOLEAN_PROPERTIES = {
     true: BOOLEAN_PROPERTIES[0],
     false: BOOLEAN_PROPERTIES[1],
 };
+export const DEFAULT_STATUS = {
+    ENABLED: 1,
+    DISABLED: 2,
+    REMOVED: 3,
+    ARCHIVED: 4,
+};
+// Attribute Status
+export const ATTRIBUTE_STATUS = DEFAULT_STATUS;

package/es/utils/attribute.js

@@ -1,16 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Constants
-import { MAP_BOOLEAN_PROPERTIES } from '../constants';
+import { ATTRIBUTE_STATUS, MAP_BOOLEAN_PROPERTIES } from '../constants';
 // Utils
 import { formatAttributeUTCDate } from './date';
 import { getUserLocaleLanguage, safeParseDisplayFormat, safeParseDisplayFormatCurrency, safeParseDisplayFormatNumber, safeParseDisplayFormatPercentage, } from './portal';
 import { safeParseJson } from './common';
+// Components
+import { Tag } from '../components/atoms';
+const { REMOVED, ARCHIVED } = ATTRIBUTE_STATUS;
 /**
  * Format attribute value according to its data type and display format.
  * @param {{ attribute: Attribute, value: any }} args - attribute and its value.
  * @returns {string} Formatted value or '--' if value is empty.
  */
 export const formatAttributeDisplay = ({ attribute, value, }) => {
-    const { dataType } = attribute || {};
+    const { dataType, itemPropertyName } = attribute || {};
     const displayFormat = safeParseDisplayFormat(attribute?.displayFormat, {
         dataType,
     });
@@ -42,8 +46,41 @@ export const formatAttributeDisplay = ({ attribute, value, }) => {
             dataValue = safeParseJson(value, '--');
             break;
         }
-        default:
+        case dataType?.startsWith('array'): {
+            const draftValue = Array.isArray(value)
+                ? value
+                    .map(item => {
+                    const isSegment = itemPropertyName.startsWith('segment_ids');
+                    if (isSegment && typeof item === 'object') {
+                        const { segmentDisplay, status } = item || {};
+                        if ([REMOVED, ARCHIVED].includes(status)) {
+                            return undefined;
+                        }
+                        return segmentDisplay;
+                    }
+                    return item;
+                })
+                    ?.filter(Boolean)
+                : value;
+            if (Array.isArray(draftValue) && draftValue.length) {
+                dataValue = (_jsx(Tag.List, { tags: draftValue, tagProps: {
+                        color: '#CAE5FE',
+                        style: {
+                            color: 'black',
+                        },
+                    }, limit: 2 }));
+            }
+            else {
+                dataValue = '--';
+            }
+            break;
+        }
+        default: {
+            if (typeof dataValue === 'object') {
+                dataValue = safeParseJson(dataValue, '--');
+            }
             break;
+        }
     }
     return dataValue || '--';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.776",
+  "version": "1.3.5-beta.777",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",