@antscorp/antsomi-ui 1.3.5-beta.589 → 1.3.5-beta.590

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

@@ -1,6 +1,6 @@
 /// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +16,20 @@ export interface InputProps extends AntdInputProps {
     disableUndo?: boolean;
     withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
 }, {}> & {
     DefaultInput: typeof AntdInput;
     CustomSearch: typeof SearchInput;
 };
-declare const SearchInput: React.FC<InputProps>;
+declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
 export {};

package/es/components/atoms/Input/Input.js

@@ -23,7 +23,7 @@ import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledInput } from './styled';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
-const OriginInput = props => {
+const OriginInput = React.forwardRef((props, ref) => {
     // Props
     const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
@@ -79,7 +79,7 @@ const OriginInput = props => {
     }
     const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
-        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
+        React.createElement(StyledInput, Object.assign({}, restProps, { ref: ref, value: value, onBlur: e => {
                 if (!isFocused) {
                     setFocused(true);
                 }
@@ -89,14 +89,14 @@ const OriginInput = props => {
     if (!withWrapper)
         return content;
     return React.createElement("div", { className: "input__wrapper" }, content);
-};
+});
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
     withWrapper: true,
 };
 export const Input = OriginInput;
-const SearchInput = props => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { className: `${props.className} antsomi-search-input` })));
+const SearchInput = React.forwardRef((props, ref) => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { ref: ref, className: `${props.className} antsomi-search-input` }))));
 Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -30,193 +30,6 @@ import { Button, Flex, Typography, Spin, Tooltip, Icon } from '../../atoms';
 import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-// export const ThumbnailCard: React.FC<ThumbnailCardProps> = memo(props => {
-//   const [modal, contextHolder] = Modal.useModal();
-//   const {
-//     id,
-//     name,
-//     width = THUMBNAIL_CARD_DEFAULT_WIDTH,
-//     height = THUMBNAIL_CARD_DEFAULT_HEIGHT,
-//     thumbnail,
-//     thumbnailFit,
-//     removable = true,
-//     actionAvailable = true,
-//     showSkeleton,
-//     loading = false,
-//     removeModalProps,
-//     editBtnProps,
-//     previewBtnProps,
-//     thumbnailCacheValue,
-//     actionButtons,
-//     onClickWrapper,
-//     ...restOfProps
-//   } = props;
-//   const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
-//   const {
-//     text: editText = 'Use template',
-//     onClick: onClickEdit,
-//     ...restOfEditBtnProps
-//   } = editBtnProps || {};
-//   const {
-//     text: previewText = 'Preview',
-//     onClick: onClickPreview,
-//     ...restOfPreviewBtnProps
-//   } = previewBtnProps || {};
-//   // Memo
-//   const showSkeletonMemo =
-//     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
-//     typeof showSkeleton === 'undefined'
-//       ? checkShowSkeletonBaseUrl(thumbnail)
-//       : typeof showSkeleton === 'function'
-//       ? showSkeleton(props)
-//       : showSkeleton;
-//   // Handlers
-//   const handleRemoveThumbnail: React.MouseEventHandler<HTMLElement> = e => {
-//     e.stopPropagation();
-//     modal.confirm({
-//       title: 'Remove template',
-//       centered: true,
-//       icon: <Icon type="icon-ants-info" style={{ fontSize: 16, lineHeight: '25px' }} />,
-//       content: (
-//         <div>
-//           <p>Are you sure you want to remove the template?</p>
-//           <p>This action can not be undone.</p>
-//         </div>
-//       ),
-//       okText: 'Remove',
-//       cancelText: 'Cancel',
-//       closable: true,
-//       ...restOfRemoveTemplateModalProps,
-//       onOk: async () => {
-//         if (onOk) onOk(id);
-//       },
-//     });
-//   };
-//   const handleWrapperClick: React.MouseEventHandler<HTMLElement> = e => {
-//     e.stopPropagation();
-//     onClickWrapper?.(id);
-//   };
-//   // Handlers
-//   const renderActionButtons = () => {
-//     if (!actionButtons) return null;
-//     return Object.keys(actionButtons)
-//       .map(key => {
-//         const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
-//         const actionSettings = actionButtons[key as TActionButtonKey];
-//         if (actionSettings) {
-//           const { buttonProps, key, customRender } = actionSettings;
-//           const icon = actionSettings.icon || option.icon || '';
-//           const label = actionSettings.label || option.label || '';
-//           const ButtonComponent = (
-//             <Tooltip title={label}>
-//               <Button
-//                 key={key || option.key}
-//                 type="primary"
-//                 icon={
-//                   <Icon type={icon || option.icon} style={{ fontSize: 24, color: '#FFFFFF' }} />
-//                 }
-//                 {...buttonProps}
-//               />
-//             </Tooltip>
-//           );
-//           /**
-//            * Handle custom render for action button
-//            * If customRender is a function, return the function callback the ButtonComponent
-//            * If not, return ButtonComponent
-//            */
-//           return typeof customRender === 'function'
-//             ? customRender(ButtonComponent)
-//             : ButtonComponent;
-//         }
-//         return null;
-//       })
-//       .filter(Boolean);
-//   };
-//   return (
-//     <Flex gap={10} vertical {...restOfProps} style={{ width, ...restOfProps.style }}>
-//       <ThumbnailCardWrapper
-//         $showSkeleton={showSkeletonMemo}
-//         style={{ height, cursor: actionAvailable ? 'default' : 'pointer' }}
-//         onClick={handleWrapperClick}
-//       >
-//         <div className="screen">
-//           {thumbnail && (
-//             <img
-//               src={getUrlNoCache(thumbnail, thumbnailCacheValue)}
-//               alt=""
-//               style={{ objectFit: thumbnailFit }}
-//               onError={e => {
-//                 e.currentTarget.style.display = 'none';
-//               }}
-//             />
-//           )}
-//         </div>
-//         {actionAvailable && !loading && (
-//           <>
-//             <Flex className="center-action" align="center" gap={10} vertical>
-//               <Button
-//                 type="primary"
-//                 className="animate__animated animate__fadeIn"
-//                 {...restOfEditBtnProps}
-//                 onClick={e => {
-//                   e.stopPropagation();
-//                   onClickEdit?.(id);
-//                 }}
-//               >
-//                 <Typography.Text
-//                   ellipsis={{ tooltip: editText }}
-//                   style={{ maxWidth: '100%', color: 'inherit' }}
-//                 >
-//                   {editText}
-//                 </Typography.Text>
-//               </Button>
-//               <Button
-//                 className="animate__animated animate__fadeIn"
-//                 onClick={e => {
-//                   e.stopPropagation();
-//                   onClickPreview?.(id);
-//                 }}
-//                 {...restOfPreviewBtnProps}
-//               >
-//                 <Typography.Text
-//                   ellipsis={{ tooltip: previewText }}
-//                   style={{ maxWidth: '100%', color: 'inherit' }}
-//                 >
-//                   {previewText}
-//                 </Typography.Text>
-//               </Button>
-//             </Flex>
-//             <div className="top-right-corner-action animate__animated animate__fadeIn">
-//               {renderActionButtons()}
-//               {removable && (
-//                 <Tooltip title={i18nInstance.t(translations.remove).toString()}>
-//                   <Button
-//                     type="primary"
-//                     icon={
-//                       <Icon
-//                         type="icon-ants-trash-outline"
-//                         style={{ fontSize: 24, color: '#FFFFFF' }}
-//                       />
-//                     }
-//                     onClick={handleRemoveThumbnail}
-//                   />
-//                 </Tooltip>
-//               )}
-//             </div>
-//             <div className="backdrop" />
-//             <div>{contextHolder}</div>
-//           </>
-//         )}
-//         {loading && <Spin className="thumbnail__loading" spinning />}
-//       </ThumbnailCardWrapper>
-//       {!!name && (
-//         <Typography.Text ellipsis={{ tooltip: name }} style={{ maxWidth: '100%' }}>
-//           {name}
-//         </Typography.Text>
-//       )}
-//     </Flex>
-//   );
-// });
 export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
     const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // Libraries
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Components
@@ -44,6 +44,8 @@ export const SavedFilterAndMetrics = memo(props => {
     const [state, setState] = useState(initialState);
     // Variables
     const { searchValue } = state;
+    // Refs
+    const searchInputRef = useRef();
     // Memos
     const savedFilterList = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.filter(({ name }) => searchStringQuery(name, searchValue))) || [], [list, searchValue]);
     const { matchedParents, results: filterMetricList } = useDeepCompareMemo(() => recursiveSearchItems({
@@ -55,6 +57,11 @@ export const SavedFilterAndMetrics = memo(props => {
     // Effects
     useEffect(() => {
         setState(initialState);
+        // Handle auto focus input search when component is mount
+        setTimeout(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 200);
     }, []);
     // Handlers
     const renderSavedFilter = () => {
@@ -109,7 +116,7 @@ export const SavedFilterAndMetrics = memo(props => {
     }), [filterMetricList, onSelectFilterMetric]);
     const renderFilterMetrics = () => (React.createElement(Menu, { key: matchedParents.map(item => `${item.id}`).join(','), mode: "inline", inlineIndent: 10, defaultOpenKeys: matchedParents.map(item => `${item.id}`), items: filterMetricItems }));
     return (React.createElement(FilterSelectFieldsContent, null,
-        React.createElement(Input, { bordered: false, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))), suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
+        React.createElement(Input.CustomSearch, { ref: searchInputRef, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))) }),
         React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
         isEmpty(savedFilterList) && isEmpty(filterMetricList) ? (React.createElement(EmptyData, { showIcon: false, title: "No data" })) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
             renderSavedFilter(),

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import clsx from 'clsx';
 // Components
@@ -57,6 +57,8 @@ export const SearchPopover = props => {
         searchValue: '',
         isOpenPopover: false,
     });
+    // Refs
+    const searchInputRef = useRef();
     // Variables
     const { searchValue, isOpenPopover } = state;
     // Memo
@@ -114,7 +116,7 @@ export const SearchPopover = props => {
             React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 200 }, filteredSearchList)));
     };
     const content = (React.createElement(StyledContent, null,
-        React.createElement(Input.CustomSearch, { value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
+        React.createElement(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
                 setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
                 onSearch(searchValue);
             }, onPressEnter: e => {
@@ -126,6 +128,13 @@ export const SearchPopover = props => {
     return (React.createElement(Popover, Object.assign({ open: isOpenPopover, content: content, overlayInnerStyle: { width: 300, padding: 0 }, trigger: ['click'], arrow: false, placement: "bottomRight" }, restProps, { onOpenChange: open => {
             // Reset search value to empty when close popover
             setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), { isOpenPopover: open }), (!open && { searchValue: '' }))));
+            // Auto focus search input when popover is open
+            if (open) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 200);
+            }
             // Clear search when close popover
             if (!open) {
                 onSearch('');

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -7,7 +7,7 @@ import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
 import { SorterResult } from 'antd/es/table/interface';
 import { TGetColumnMetrics, TGetFilterMetricList, TGetModifyColumnList, TGetSavedFilterList, TGetSearchListing, TGetTableListing } from '@antscorp/antsomi-ui/es/queries';
-import { MatchesAnyItem, TThumbnailButton } from '@antscorp/antsomi-ui/es/components/molecules';
+import { MatchesAnyItem, TRemoveModalProps, TThumbnailButton } from '@antscorp/antsomi-ui/es/components/molecules';
 import { TTemplateItem } from '@antscorp/antsomi-ui/es/components/template';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
@@ -66,7 +66,10 @@ type TGridViewProps<TTableType> = {
     name?: (record: TTableType) => ReactNode | ReactNode;
     thumbnail?: (record: TTableType) => string | string;
     itemProps?: {
+        removable?: boolean;
         showButton?: boolean;
+        onRemove?: (record: TTableType) => void;
+        removeModalProps?: TRemoveModalProps;
         buttonProps?: Omit<TThumbnailButton, 'onClick'> & {
             onClick: (record: TTableType) => void;
         };

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -744,7 +744,13 @@ export function useDataTableListing(props) {
                     loading: isTableListingLoading || isTableListingRefetching,
                 },
                 templateItemProps: {
-                    removable: false,
+                    removable: gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.removable,
+                    removeModalProps: Object.assign(Object.assign({}, gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.removeModalProps), { onOk: (id) => __awaiter(this, void 0, void 0, function* () {
+                            const record = tableData === null || tableData === void 0 ? void 0 : tableData.find(item => (item === null || item === void 0 ? void 0 : item[gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys.id]) === id);
+                            if ((gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.onRemove) && record) {
+                                gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.onRemove(record);
+                            }
+                        }) }),
                     previewBtnProps: {
                         show: false,
                     },

package/package.json

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