@antscorp/antsomi-ui 1.3.5-beta.461 → 1.3.5-beta.463

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 (10) hide show
  1. package/es/components/organism/DataTable/DataTable.js +3 -2
  2. package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js +3 -2
  3. package/es/components/organism/DataTable/components/Toolbar/styled.js +4 -0
  4. package/es/components/organism/DataTable/hooks/useDataTable.d.ts +1 -0
  5. package/es/components/organism/DataTable/hooks/useDataTable.js +1 -0
  6. package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts +1 -1
  7. package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js +1 -0
  8. package/es/components/organism/DataTable/types/toolbar.d.ts +3 -0
  9. package/es/tests/DataTableTest.js +8 -0
  10. package/package.json +1 -1
package/es/components/organism/DataTable/DataTable.js CHANGED
@@ -25,9 +25,10 @@ import { AntdTableConfigProvider } from './providers';
25
25
  import { useDataTableStore } from './hooks/useDataTableStore';
26
26
  function DataTableComponent(props) {
27
27
  // Hooks
28
- const { pagination, setPagination } = useDataTable(props);
28
+ const { pagination, toolbar, setPagination } = useDataTable(props);
29
+ const { show: showToolbar = true } = toolbar || {};
29
30
  return (React.createElement(DataTableWrapper, null,
30
- React.createElement(Toolbar, null),
31
+ !!showToolbar && React.createElement(Toolbar, null),
31
32
  React.createElement(Table, null),
32
33
  React.createElement(Pagination, Object.assign({ id: "data-table-pagination" }, pagination, { onChange: payload => {
33
34
  var _a;
package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js CHANGED
@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { Link } from 'react-router-dom';
13
13
  import React, { useState } from 'react';
14
14
  import styled from 'styled-components';
15
+ import clsx from 'clsx';
15
16
  // Components
16
17
  import { Input, Popover, Divider, Typography, Scrollbars, Icon, Spin, } from '@antscorp/antsomi-ui/es/components/atoms';
17
18
  import { EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -49,7 +50,7 @@ const StyledContent = styled.div `
49
50
  }
50
51
  `;
51
52
  export const SearchPopover = props => {
52
- const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "loading", "isAddFilterFromSearchItem", "onAddFilter", "onSearch", "onClick", "onClickSearchItem", "itemSearchRender"]);
53
+ const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender, searchItemProps } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "loading", "isAddFilterFromSearchItem", "onAddFilter", "onSearch", "onClick", "onClickSearchItem", "itemSearchRender", "searchItemProps"]);
53
54
  // State
54
55
  const [state, setState] = useState({
55
56
  searchValue: '',
@@ -72,7 +73,7 @@ export const SearchPopover = props => {
72
73
  const { id, label, link, icon } = searchItem;
73
74
  const Label = (React.createElement(React.Fragment, null,
74
75
  icon && React.createElement(IconWrapper, null, icon),
75
- React.createElement(Typography.Text, { className: `${link ? 'text-link' : ''}`, ellipsis: { tooltip: label } }, link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem ? (React.createElement(Link, { to: link }, label)) : (label))));
76
+ React.createElement(Typography.Text, Object.assign({ ellipsis: { tooltip: label } }, searchItemProps, { className: clsx(`${link ? 'text-link' : ''}`, searchItemProps === null || searchItemProps === void 0 ? void 0 : searchItemProps.className) }), link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem ? (React.createElement(Link, { to: link }, label)) : (label))));
76
77
  return (React.createElement(StyledSearchItem, { key: id, align: "center", gap: 6, onClick: () => {
77
78
  onClick(searchItem);
78
79
  setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
package/es/components/organism/DataTable/components/Toolbar/styled.js CHANGED
@@ -73,6 +73,10 @@ export const StyledSearchItem = styled(Flex) `
73
73
  font-weight: 500;
74
74
  cursor: pointer;
75
75
 
76
+ .text-link {
77
+ color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
78
+ }
79
+
76
80
  &:hover {
77
81
  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
78
82
  }
package/es/components/organism/DataTable/hooks/useDataTable.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { DataTableProps } from '../types';
2
2
  export declare const useDataTable: <TTableDataType>(props: DataTableProps<TTableDataType>) => {
3
3
  pagination: import("../components").PaginationProps | undefined;
4
+ toolbar: import("../types").ToolbarProps<[]> | undefined;
4
5
  setPagination: (pagination: Partial<import("../components").PaginationProps>) => void;
5
6
  };
package/es/components/organism/DataTable/hooks/useDataTable.js CHANGED
@@ -36,6 +36,7 @@ export const useDataTable = (props) => {
36
36
  }, [setPagination, pagination]);
37
37
  return {
38
38
  pagination,
39
+ toolbar,
39
40
  setPagination,
40
41
  };
41
42
  };
package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts CHANGED
@@ -35,7 +35,7 @@ type TToggleColumnType<TTableType> = TGeneralTableColumnType<TTableType> & {
35
35
  onChange?: (checked: boolean, record: TTableType) => void;
36
36
  };
37
37
  type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : TGeneralTableColumnType<TTableType>;
38
- type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem'>> & {
38
+ type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem' | 'searchItemProps'>> & {
39
39
  link?: ((record: Partial<TSearchType>) => string) | string;
40
40
  icon?: (record: Partial<TSearchType>) => ReactNode | ReactNode;
41
41
  itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js CHANGED
@@ -525,6 +525,7 @@ export function useDataTableListing(props) {
525
525
  'addFilterInfo',
526
526
  'isAddFilterFromSearchItem',
527
527
  'onClickSearchItem',
528
+ 'searchItemProps',
528
529
  ])),
529
530
  /* Queries */
530
531
  queries: {
package/es/components/organism/DataTable/types/toolbar.d.ts CHANGED
@@ -6,6 +6,7 @@ import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
6
6
  import { TOperatorKey } from '@antscorp/antsomi-ui/es/types/condition';
7
7
  import { ModifyColumnMetric } from '../../ModifyColumnModal';
8
8
  import { SavedModifyColumnItem, TOnSaveModifyColumnArgs } from '../../ModifyColumnModal/types';
9
+ import { TextProps } from 'antd/es/typography/Text';
9
10
  export type TActionToolbarButtonKey<T extends string[] = []> = (typeof TOOLBAR_ACTION_KEYS)[keyof typeof TOOLBAR_ACTION_KEYS] | T[number];
10
11
  export type TSearchItem = {
11
12
  id: string | number;
@@ -35,6 +36,7 @@ export type TSearchActionButton = TActionButton & {
35
36
  metricId?: string | number;
36
37
  operator: TOperatorKey;
37
38
  };
39
+ searchItemProps?: TextProps;
38
40
  loading?: boolean;
39
41
  itemSearchRender?: (item: TSearchItem, index: number, node: ReactNode) => React.ReactNode;
40
42
  onSearch?: (valueSearch: string) => void;
@@ -58,6 +60,7 @@ export type TCollapse = {
58
60
  onCollapse?: (collapsed: boolean) => void;
59
61
  };
60
62
  export interface ToolbarProps<TActionKey extends string[] = []> {
63
+ show?: boolean;
61
64
  addButton?: AddButtonProps | ((node: ReactNode) => ReactNode);
62
65
  actionButtons?: {
63
66
  [K in TActionToolbarButtonKey<TActionKey>]?: TToolbarActionButton<TActionKey, K>;
package/es/tests/DataTableTest.js CHANGED
@@ -53,12 +53,20 @@ export const DataTableTest = () => {
53
53
  label: 'survey_name',
54
54
  },
55
55
  isClientSearch: false,
56
+ searchItemProps: {
57
+ style: {
58
+ color: 'red',
59
+ },
60
+ },
56
61
  link(record) {
57
62
  return `/survey/${record.survey_id}`;
58
63
  },
59
64
  formatData(response) {
60
65
  return (response === null || response === void 0 ? void 0 : response.body) || [];
61
66
  },
67
+ onClickSearchItem(item) {
68
+ console.log(item);
69
+ },
62
70
  },
63
71
  queryOptions: {
64
72
  getTableListing: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.461",
3
+ "version": "1.3.5-beta.463",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",