npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.972 → 1.3.5-beta.973 - Mend

@antscorp/antsomi-ui 1.3.5-beta.972 → 1.3.5-beta.973

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -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 CHANGED Viewed

@@ -5,7 +5,7 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Text } from '../../atoms';
+import { Button, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
@@ -43,14 +43,40 @@ export const DisplayFormatSettings = props => {
         if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, ...rest, children: [_jsx(Text, { size: 11, className: "ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
-                        __html: `${translate(translations._ACT_PREVIEW)}: &nbsp;<bdo dir='ltr'>${formatDFValue}</bdo>`,
-                    } }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+        return (_jsxs("div", { className: "ants-flex ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: {
+                display: 'flex',
+                alignItems: 'end',
+                gap: '8px',
+                marginBottom: '5px',
+                flexShrink: 0,
+                width: '100%',
+                flexWrap: 'nowrap',
+                overflow: 'hidden',
+            }, ...rest, children: [_jsxs(Typography.Text
+                // size={11}
+                , {
+                    // size={11}
+                    className: "ants-flex", style: {
+                        color: '#7F7F7F',
+                        fontSize: '11px',
+                        whiteSpace: 'nowrap',
+                        maxWidth: 'calc(89%)',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0", _jsx(Typography.Text, { style: {
+                                color: '#7F7F7F',
+                                fontSize: '11px',
+                                whiteSpace: 'nowrap',
+                                maxWidth: 'calc(85%)',
+                            }, 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: {
                         marginTop: '1px',
                         backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
                         border: 'none',
                         boxShadow: 'none',
                         borderRadius: '5px',
+                        flexShrink: 0,
                     }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
     };
     const renderFormatSetting = () => {

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

@@ -112,7 +112,7 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, 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: 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({
                                 ...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({

package/es/components/molecules/DisplayFormat/constants.d.ts CHANGED Viewed

@@ -149,3 +149,24 @@ export declare const DYNAMIC_CONTENT_DF_FORMAT_TYPE: {
     number: string;
     datetime: string;
 };
+export declare const TYPE_FORMAT_OPTIONS: {
+    SHORT: string;
+    MEDIUM: string;
+    LONG: string;
+};
+export declare const DATE_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};
+export declare const TIME_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};

package/es/components/molecules/DisplayFormat/constants.js CHANGED Viewed

@@ -239,3 +239,68 @@ export const DYNAMIC_CONTENT_DF_FORMAT_TYPE = {
     number: 'number',
     datetime: 'datetime',
 };
+export const TYPE_FORMAT_OPTIONS = {
+    SHORT: 'short',
+    MEDIUM: 'medium',
+    LONG: 'long',
+};
+export const DATE_FORMAT_LIST_TEST = {
+    [DATE_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT1),
+            value: 'MM/DD/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT1),
+            value: 'MMM DD, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT1),
+            value: 'MMMM DD, YYYY',
+        },
+    },
+    [DATE_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT2),
+            value: 'DD/MM/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT2),
+            value: 'DD MMM, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT2),
+            value: 'DD MMMM, YYYY',
+        },
+    },
+};
+export const TIME_FORMAT_LIST_TEST = {
+    [TIME_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT1),
+            value: 'h:mm A',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT1),
+            value: 'h:mm:ss A',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT1),
+            value: 'h:mm:ss A [GMT]',
+        },
+    },
+    [TIME_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT2),
+            value: 'H:mm',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT2),
+            value: 'H:mm:ss',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT2),
+            value: 'H:mm:ss [GMT]',
+        },
+    },
+};

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

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.972",
+  "version": "1.3.5-beta.973",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.32",
+    "@antscorp/antsomi-locales": "1.0.33",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",