@antscorp/antsomi-ui 1.3.5-beta.980 → 1.3.5-beta.981

package/es/components/atoms/Typography/EllipsisMiddle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const EllipsisMiddle: React.FC<{
+    suffixCount: number;
+    children: string;
+    tooltip?: boolean;
+    style?: React.CSSProperties;
+}>;

package/es/components/atoms/Typography/EllipsisMiddle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from 'antd';
+export const EllipsisMiddle = ({ suffixCount, children, tooltip = false, style }) => {
+    if (children.length <= suffixCount)
+        return _jsx(Typography.Text, { style: style, children: children });
+    const start = children.slice(0, children.length - suffixCount);
+    const suffix = children.slice(-suffixCount);
+    return (_jsx(Typography.Text, { style: { maxWidth: '100%', ...style }, ellipsis: { tooltip: tooltip ? children : false, suffix }, children: start }));
+};

package/es/components/atoms/Typography/index.d.ts

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

package/es/components/atoms/Typography/index.js

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

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

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';

package/es/components/atoms/index.js

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';

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/DisplayFormat/DisplayFormatSettings.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import { useEffect, useState } from 'react';
 import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Typography } from '../../atoms';
+import { Button, EllipsisMiddle, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
@@ -53,31 +53,25 @@ export const DisplayFormatSettings = props => {
                 flexWrap: 'nowrap',
                 overflow: 'hidden',
                 marginTop: '5px',
-            }, ...rest, children: [_jsxs(Typography.Text
-                // size={11}
-                , { 
-                    // size={11}
-                    className: "ants-flex", style: {
+            }, ...rest, children: [_jsxs(Typography.Text, { className: "ants-flex", style: {
                         color: '#7F7F7F',
                         fontSize: '11px',
                         whiteSpace: 'nowrap',
-                        maxWidth: 'calc(89%)',
-                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0", _jsx(Typography.Text, { style: {
+                        maxWidth: '100%',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0"] }), _jsxs("div", { style: { display: 'inline-flex', maxWidth: '100%', alignItems: 'center' }, children: [_jsx(EllipsisMiddle, { style: {
                                 color: '#7F7F7F',
                                 fontSize: '11px',
                                 whiteSpace: 'nowrap',
-                                maxWidth: 'calc(81%)',
-                            }, ellipsis: { tooltip: true }, children: _jsx("bdo", { dir: "ltr", children: formatDFValue }) })] }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", 
-                    // className={`ants-border-none transition-colors duration-300 rounded-md ${
-                    //   showDetailEdit ? 'bg-[#DEEFFE]' : 'hover:bg-[#E0F2FE]'
-                    // }`}
-                    style: {
-                        backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
-                        border: 'none',
-                        boxShadow: 'none',
-                        borderRadius: '5px',
-                        flexShrink: 0,
-                    }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
+                                flexShrink: 0,
+                                width: '100%',
+                                maxWidth: displayFormatType === 'datetime' ? '100%' : 'calc(98% + 1px)',
+                            }, suffixCount: 7, tooltip: true, children: formatDFValue }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+                                backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
+                                border: 'none',
+                                boxShadow: 'none',
+                                borderRadius: '5px',
+                                flexShrink: 0,
+                            }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] })] }));
     };
     const renderFormatSetting = () => {
         switch (displayFormatType) {

package/es/components/molecules/DisplayFormat/components/FormatNumber.js

@@ -112,13 +112,13 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: translate(translations._TITL_EDIT_NUMBER_COMPACT) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 11 }, wrapperCol: { span: 13 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
+                    }, children: translate(translations._TITL_EDIT_NUMBER_COMPACT) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 12 }, wrapperCol: { span: 12 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces - 1,
                             }), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces + 1,
-                            }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_DECIMAL), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
+                            }), disabled: decimalPlaces >= 100, size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_DECIMAL), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         grouping: value,
                     }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_GROUPING), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({

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/package.json

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