@antscorp/antsomi-ui 2.0.114 → 2.0.115

package/es/components/atoms/MobileFrameV2/styled.js

@@ -5,48 +5,48 @@ import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile
 import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
 // Constants
 import { MOBILE_VIEWPORT } from './constants';
-export const MobileWrapper = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  background: url(${MobileFrameV2}) no-repeat center center;
-  background-size: contain;
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
 `;
-export const MobileInner = styled.div `
-  position: relative;
-  margin: 18px 21px;
-  border-radius: 50px;
-  overflow: hidden;
-
-  .mobile-inner-content {
-    position: absolute;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  @media screen and (max-height: 1000px) {
-    width: ${MOBILE_VIEWPORT.MD.width}px;
-    max-width: ${MOBILE_VIEWPORT.MD.width}px;
-    height: ${MOBILE_VIEWPORT.MD.height}px;
-  }
-
-  @media screen and (min-height: 1001px) {
-    width: ${MOBILE_VIEWPORT.LG.width}px;
-    max-width: ${MOBILE_VIEWPORT.LG.width}px;
-    height: ${MOBILE_VIEWPORT.LG.height}px;
-  }
+export const MobileInner = styled.div `
+  position: relative;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  .mobile-inner-content {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media screen and (max-height: 1000px) {
+    width: ${MOBILE_VIEWPORT.MD.width}px;
+    max-width: ${MOBILE_VIEWPORT.MD.width}px;
+    height: ${MOBILE_VIEWPORT.MD.height}px;
+  }
+
+  @media screen and (min-height: 1001px) {
+    width: ${MOBILE_VIEWPORT.LG.width}px;
+    max-width: ${MOBILE_VIEWPORT.LG.width}px;
+    height: ${MOBILE_VIEWPORT.LG.height}px;
+  }
 `;
-export const MobileCamera = styled.div `
-  position: absolute;
-  pointer-events: none;
-  width: 112.11px;
-  height: 32.29px;
-  margin: auto;
-  top: 10px;
-  left: 50%;
-  z-index: 1;
-  transform: translateX(-50%);
-  background: url(${cameraImage}) no-repeat center center;
-  background-size: contain;
+export const MobileCamera = styled.div `
+  position: absolute;
+  pointer-events: none;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 10px;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
 `;

package/es/components/atoms/MobileFrameV3/styled.js

@@ -5,40 +5,40 @@ import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/previews/iphonev2
 // Constants
 import { DEFAULT_DIMENSIONS } from './constants';
 const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
-export const MobileWrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  background: url(${MobileFrame}) no-repeat center center;
-  background-size: contain;
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
 `;
-export const MobileInner = styled.div `
-  position: relative;
-  width: 100%;
-  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
-  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
-  overflow: hidden;
-
+export const MobileInner = styled.div `
+  position: relative;
+  width: 100%;
+  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
+  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
+  overflow: hidden;
+
   ${props => props.backgroundColor &&
-    css `
-      background-color: ${props.backgroundColor};
-    `}
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
-export const ScreenContainer = styled.main `
-  position: absolute;
+export const ScreenContainer = styled.main `
+  position: absolute;
 `;
-export const BrandPosition = styled.div `
-  position: absolute;
+export const BrandPosition = styled.div `
+  position: absolute;
 `;
-export const MobileBottomLine = styled.div `
-  width: 145px;
-  height: 5px;
-  background-color: #000000;
-  border-radius: 20px;
-  position: absolute;
-  margin: auto;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
 `;

package/es/components/atoms/NotificationStatus/styled.js

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
-export const Title = styled.div `
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 20px;
-  color: ${props => props.color || '#000'};
+export const Title = styled.div `
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${props => props.color || '#000'};
 `;
-export const WrapperIcon = styled.div `
-  display: flex;
-  align-items: center;
+export const WrapperIcon = styled.div `
+  display: flex;
+  align-items: center;
 `;
-export const Content = styled.div `
-  color: #7f7f7f;
+export const Content = styled.div `
+  color: #7f7f7f;
 `;

package/es/components/atoms/PreviewTabs/styled.js

@@ -3,76 +3,76 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from '../Flex';
 // Styled
 import styled from 'styled-components';
-export const StyledRichMenuTabs = styled.div `
-  display: flex;
-  align-items: center;
-  background: #f0f0f0;
-  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
-  height: 40px;
-  width: ${({ width }) => width || 467}px;
-
-  .tabs {
-    flex: 1;
-    width: 100%;
-    overflow: auto;
-
-    &__item {
-      flex-shrink: 0;
-      height: 40px;
-      width: 40px;
-      border-right: 1px solid #d4d4d4;
-      cursor: pointer;
-      transition: all 200ms;
-
-      &--active {
-        background-color: #fff;
-
-        .tabs__label {
-          background-color: var(--primary-color);
-          color: #fff;
-        }
-      }
-    }
-
-    &__label {
-      height: 24px;
-      width: 24px;
-      font-weight: 700;
-      font-size: 14px;
-      color: var(--primary-color);
-      border-radius: 100%;
-      border: 1px solid #b8cfe6;
-      background-color: #fff;
-      transition: all 200ms;
-    }
-  }
+export const StyledRichMenuTabs = styled.div `
+  display: flex;
+  align-items: center;
+  background: #f0f0f0;
+  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+  height: 40px;
+  width: ${({ width }) => width || 467}px;
+
+  .tabs {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+
+    &__item {
+      flex-shrink: 0;
+      height: 40px;
+      width: 40px;
+      border-right: 1px solid #d4d4d4;
+      cursor: pointer;
+      transition: all 200ms;
+
+      &--active {
+        background-color: #fff;
+
+        .tabs__label {
+          background-color: var(--primary-color);
+          color: #fff;
+        }
+      }
+    }
+
+    &__label {
+      height: 24px;
+      width: 24px;
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--primary-color);
+      border-radius: 100%;
+      border: 1px solid #b8cfe6;
+      background-color: #fff;
+      transition: all 200ms;
+    }
+  }
 `;
-export const NavigationButton = styled(Flex) `
-  width: 40px;
-  height: 40px;
-  background-color: #fff;
-  cursor: pointer;
-
-  i {
-    font-size: 12px;
-    color: ${THEME?.token?.bw8};
-  }
-
-  &.navigation--previous {
-    border-right: 1px solid #d4d4d4;
-  }
-
-  &.navigation--next {
-    border-left: 1px solid #d4d4d4;
-  }
-
-  &.navigation--disabled {
-    cursor: not-allowed;
-
-    i {
-      color: #59595980;
-    }
-  }
+export const NavigationButton = styled(Flex) `
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  cursor: pointer;
+
+  i {
+    font-size: 12px;
+    color: ${THEME?.token?.bw8};
+  }
+
+  &.navigation--previous {
+    border-right: 1px solid #d4d4d4;
+  }
+
+  &.navigation--next {
+    border-left: 1px solid #d4d4d4;
+  }
+
+  &.navigation--disabled {
+    cursor: not-allowed;
+
+    i {
+      color: #59595980;
+    }
+  }
 `;
 NavigationButton.defaultProps = {
     align: 'center',

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

@@ -4,22 +4,22 @@ import styled from 'styled-components';
 import { Radio as AntdRadio } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Radio = styled(AntdRadio) `
-  font-family: 'Roboto';
-  color: ${THEME.token?.colorTextBase};
-  font-size: ${THEME.token?.fontSize}px;
-
-  .antsomi-radio {
-    .antsomi-radio-inner {
-      border-width: 2px;
-      border-color: ${THEME.token?.colorPrimary};
-
-      &::after {
-        flex-shrink: 0;
-        background-color: ${THEME.token?.colorPrimary};
-      }
-    }
-  }
+export const Radio = styled(AntdRadio) `
+  font-family: 'Roboto';
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
+
+  .antsomi-radio {
+    .antsomi-radio-inner {
+      border-width: 2px;
+      border-color: ${THEME.token?.colorPrimary};
+
+      &::after {
+        flex-shrink: 0;
+        background-color: ${THEME.token?.colorPrimary};
+      }
+    }
+  }
 `;
 export const RadioButton = AntdRadio.Button;
 export const RadioGroupSub = AntdRadio.Group;

package/es/components/atoms/ReactIframe/ReactIframe.js

@@ -4,11 +4,11 @@ import { useEffect, useRef } from 'react';
 import Frame from 'react-frame-component';
 // Styled
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
-const bodyStyle = `
-  body {
-    padding: 0;
-    margin: 0;
-  }
+const bodyStyle = `
+  body {
+    padding: 0;
+    margin: 0;
+  }
 `;
 export const ReactIframe = props => {
     const { head, style, ...restOfProps } = props;

package/es/components/atoms/ReactIframe/styled.js

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 /* Storybook */
-export const StyledIframeContent = styled.div `
-  width: 100%;
-  padding: 20px;
-  border: 1px solid ${THEME.token?.bw3};
-  box-sizing: border-box;
-
-  body {
-    padding: 0;
-  }
+export const StyledIframeContent = styled.div `
+  width: 100%;
+  padding: 20px;
+  border: 1px solid ${THEME.token?.bw3};
+  box-sizing: border-box;
+
+  body {
+    padding: 0;
+  }
 `;

package/es/components/atoms/RequiredLabel/styled.js

@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledRequired = styled.span `
-  color: ${THEME.token?.red6};
-  margin-right: 4px;
+export const StyledRequired = styled.span `
+  color: ${THEME.token?.red6};
+  margin-right: 4px;
 `;

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

@@ -35,11 +35,11 @@ export const ScrollBox = props => {
             paddingRight: isScroll && isPadding ? 8 : 0,
         }, onScroll: handleScroll, children: children }));
 };
-const Wrapper = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${THEME.token?.bw0};
-  overflow: auto;
+const Wrapper = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${THEME.token?.bw0};
+  overflow: auto;
 `;
 ScrollBox.defaultProps = {
     isPadding: false,

package/es/components/atoms/Scrollbars/styled.js

@@ -3,27 +3,27 @@ import styled from 'styled-components';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollbarsWrapper = styled.div ``;
-export const ThumbBar = styled.div `
-  background: ${globalToken?.gray5};
-  border-radius: 4px;
+export const ThumbBar = styled.div `
+  background: ${globalToken?.gray5};
+  border-radius: 4px;
 `;
-export const VerticalTrack = styled.div `
-  position: absolute;
-  width: 4px !important;
-  transition: opacity 200ms ease 0s;
-  opacity: 0;
-  right: 0px;
-  bottom: 2px;
-  top: 2px;
-  border-radius: 4px;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 0px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
 `;
-export const HorizontalTrack = styled.div `
-  position: absolute;
-  height: 4px !important;
-  transition: opacity 200ms ease 0s;
-  opacity: 0;
-  right: 2px;
-  bottom: 0px;
-  left: 2px;
-  border-radius: 4px;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 0px;
+  left: 2px;
+  border-radius: 4px;
 `;

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

@@ -0,0 +1,5 @@
+import type { SelectAssociatedTagProps } from './types';
+export declare const SelectAssociatedTag: {
+    (props: SelectAssociatedTagProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: SelectAssociatedTagProps;
+};

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { StyledSpace } from './styled';
+import { Divider } from 'antd';
+import { Select } from '../../molecules';
+import SelectTag from './SelectTag';
+// Constants
+import { defaultProps } from './constants';
+export const SelectAssociatedTag = (props) => {
+    // Props
+    const { tagConfigs, style, status, selected, disabled, options, children, onSelect } = props;
+    const { tag, value } = selected || {};
+    return (_jsxs(StyledSpace, { className: `select-associated-tag ${status}`, style: style, children: [_jsx(SelectTag, { ...tagConfigs, selectedTag: tag }), _jsx(Divider, { type: "vertical", style: { margin: '0px 1px 0px 6px' }, className: "antsomi-divider-between-select" }), children ?? (_jsx(Select, { style: { width: '100%', height: '100%' }, value: value, disabled: disabled, options: options, onChange: onSelect }))] }));
+};
+SelectAssociatedTag.defaultProps = defaultProps;

package/es/components/atoms/SelectAssociatedTag/SelectTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagConfigProps } from './types';
+declare const _default: import("react").MemoExoticComponent<(props: TagConfigProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/SelectAssociatedTag/SelectTag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { memo, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+// Components
+import { Flex, Typography } from 'antd';
+import { Popover } from '../Popover';
+import { SelectedTag } from './styled';
+const SelectTag = (props) => {
+    // Props
+    const { selectedTag, disabled, title, options, onSelect } = props;
+    // State
+    const [open, setOpen] = useState(false);
+    // Memoized
+    const mapOptsMemo = useMemo(() => keyBy(options, 'value'), [options]);
+    const selectedItem = useMemo(() => mapOptsMemo?.[selectedTag] || {}, [selectedTag, mapOptsMemo]);
+    const handleOpenChange = () => {
+        setOpen(!open);
+    };
+    const handleClick = (item) => {
+        setOpen(false);
+        onSelect(item);
+    };
+    return (_jsx(Popover, { open: open && !disabled, title: _jsx(Typography.Text, { style: { fontWeight: '400', maxWidth: 130 }, ellipsis: { tooltip: title }, children: title }), content: _jsx(Flex, { wrap: "wrap", gap: 6, style: { padding: '10px 0px' }, children: options?.map(item => (_jsx(SelectedTag, { "$color": item.color, "$background": item.background, ellipsis: { tooltip: item.label }, onClick: () => handleClick(item), children: item.label }, item.value))) }), placement: "bottomLeft", trigger: "click", overlayInnerStyle: { padding: 10, maxWidth: 150 }, onOpenChange: handleOpenChange, children: _jsx(SelectedTag, { "$color": selectedItem?.color, "$background": selectedItem?.background, ellipsis: { tooltip: selectedItem?.label }, children: selectedItem?.label }) }));
+};
+export default memo(SelectTag);

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -0,0 +1,11 @@
+import type { SelectAssociatedTagProps, TagItem } from './types';
+export declare const DEFAULT_TAGS: {
+    readonly RAW: "RAW";
+    readonly md5: "md5";
+    readonly sha_256: "sha_256";
+    readonly MD5: "MD5";
+    readonly SHA_256: "SHA_256";
+};
+export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
+export declare const DEFAULT_TAGS_LIST: TagItem[];
+export declare const defaultProps: SelectAssociatedTagProps;

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -0,0 +1,42 @@
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+import { translations, translate } from '@antscorp/antsomi-locales';
+export const DEFAULT_TAGS = {
+    RAW: 'RAW',
+    md5: 'md5',
+    sha_256: 'sha_256',
+    MD5: 'MD5',
+    SHA_256: 'SHA_256',
+};
+export const DEFAULT_TAGS_OPTS = {
+    RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
+    md5: { label: 'md5', value: DEFAULT_TAGS.md5, color: globalToken?.bw0, background: '#3B8FDE' },
+    sha_256: {
+        label: 'sha-256',
+        value: DEFAULT_TAGS.sha_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+    MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
+    SHA_265: {
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+};
+export const DEFAULT_TAGS_LIST = Object.values(DEFAULT_TAGS_OPTS);
+export const defaultProps = {
+    tagConfigs: {
+        options: DEFAULT_TAGS_LIST,
+        title: translate(translations._INFO_STORY_WAIT_FOR_HASH, 'Hash Method'),
+        onSelect: () => { },
+    },
+    selected: {
+        tag: DEFAULT_TAGS.RAW,
+        value: DEFAULT_TAGS.SHA_256,
+    },
+    options: DEFAULT_TAGS_LIST,
+    onSelect: () => { },
+};

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

@@ -0,0 +1,3 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export type { SelectAssociatedTagProps } from './types';
+export * from './constants';

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

@@ -0,0 +1,2 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export * from './constants';

package/es/components/atoms/SelectAssociatedTag/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TagItem } from './types';
+export declare const StyledSpace: import("styled-components").StyledComponent<import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>, any, {}, never>;
+export declare const SelectedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $background: TagItem['background'];
+    $color: TagItem['color'];
+}, never>;