@zat-design/sisyphus-react 3.0.13

package/lib/ProTable/style/index.less

@@ -0,0 +1,299 @@
+.pro-table {
+  .custom-column-btn {
+    display    : inline-flex;
+    align-items: center;
+
+    &:hover,
+    &:visited,
+    &:focus {
+      color     : unset;
+      border    : 1px solid #d9d9d9;
+      background: unset;
+    }
+
+    .anticon {
+      height: 16px;
+    }
+  }
+
+  .copyable-table-cell {
+
+
+    .ant-typography {
+      margin-bottom: 0;
+      display      : flex;
+      align-items  : center;
+    }
+
+    .drag-icon {
+      &>div {
+        display    : flex;
+        align-items: center;
+      }
+    }
+
+    .ant-typography-copy-success {
+      svg {
+        fill: var(--zaui-success, #00ae4d);
+      }
+    }
+
+    svg {
+      width  : 14px;
+      height : 14px;
+      fill   : #3f3f3f;
+      display: inline-block;
+    }
+  }
+
+  &.pro-table-no-stripe {
+    .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
+      background: #fff;
+    }
+  }
+
+  .ant-table-thead {
+    .ant-dropdown-trigger {
+      &.ant-dropdown-open {
+
+        .anticon-down {
+          transition: transform 0.3s;
+          transform : rotateZ(180deg);
+        }
+      }
+    }
+  }
+
+  .pro-table-container {
+    position: relative;
+
+    .pro-table-resizable-line {
+      position   : absolute;
+      width      : 0;
+      top        : 0;
+      border-left: 1px solid var(--zaui-brand, #006aff);
+      height     : 100%;
+      left       : 100px;
+    }
+  }
+
+  .ant-table-thead {
+    tr th {
+      &:last-child {
+        .react-resizable-handle {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ant-space {
+    gap: var(--zaui-space-size-sm, 8px) !important;
+  }
+
+  .ant-btn-link {
+    padding: 0 var(--zaui-space-size-xs, 4px);
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+
+  .column-config {
+    display        : flex;
+    justify-content: space-between;
+    margin-bottom  : var(--zaui-space-size-md, 16px);
+
+    .right-actions {
+      display    : flex;
+      align-items: center;
+
+      >.ant-btn {
+
+        &:hover,
+        &:visited,
+        &:focus {
+          color     : unset;
+          border    : 1px solid #d9d9d9;
+          background: unset;
+        }
+      }
+
+      .custom-column-btn {
+        margin-left: var(--zaui-space-size-sm, 8px);
+      }
+    }
+  }
+
+  .ant-empty .ant-empty-image {
+    height: 80px;
+  }
+
+  .ant-table-thead>tr>th {
+    border-bottom: 0;
+    white-space  : nowrap;
+
+    .pro-table-th-cell {
+      width        : 100%;
+      overflow     : hidden;
+      white-space  : nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &::before {
+      width: 0 !important;
+    }
+
+    &.react-resizable {
+      &::before {
+        width: 1px !important;
+      }
+    }
+
+    .pro-table-tooltip {
+      display    : inline-flex;
+      align-items: center;
+
+      .icon-tip {
+        svg {
+          margin-left   : 8px;
+          width         : 14px;
+          height        : 14px;
+          vertical-align: text-bottom;
+          fill          : #909090;
+        }
+      }
+    }
+  }
+
+  .ant-table-tbody .ant-table-placeholder {
+    background: var(--zaui-base-bg, #ffffff) !important;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+    border-bottom: 0;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-measure-row)>td {
+    border-bottom: 0;
+  }
+
+  .ant-table-tbody tr:nth-child(n)>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody tr:nth-child(2n)>td {
+    background-color: #F7F9FC;
+  }
+
+  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
+    background-color: #F7F9FC;
+  }
+
+  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(2n)>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .react-resizable {
+    position       : relative;
+    background-clip: padding-box;
+
+    .ant-table-filter-trigger {
+      margin-right: 0;
+    }
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    right   : -5px;
+    bottom  : 0;
+    z-index : 1;
+    width   : 10px;
+    height  : 100%;
+    cursor  : col-resize;
+
+    &::before {
+      content   : '';
+      position  : absolute;
+      left      : 50%;
+      top       : 50%;
+      width     : 1px;
+      height    : 18px;
+      background: #DCDCDC;
+      transform : translateY(-50%);
+    }
+
+    &.active::before,
+    &:hover::before {
+      content    : '';
+      position   : absolute;
+      left       : 50%;
+      height     : 100%;
+      bottom     : 0;
+      border-left: 5px solid var(--zaui-brand, #006aff);
+    }
+  }
+
+  .ant-table-tbody tr td .ant-checkbox-wrapper-checked.checkbox-disabled {
+    pointer-events: none;
+    cursor        : not-allowed;
+    opacity       : 0.5;
+  }
+
+  .ant-pagination-options-quick-jumper input {
+    border    : unset;
+    background: #FAFAFA;
+    min-width : 32px;
+    height    : 32px;
+  }
+
+  .ant-pagination .ant-pagination-item-active a {
+    color        : #fff;
+    background   : var(--zaui-brand, #006aff) !important;
+    border-radius: var(--zaui-border-radius, 4px);
+  }
+
+  .pro-table-footer {
+    &.no-page {
+      margin-top: var(--zaui-space-size-md, 16px);
+    }
+
+    &.has-page {
+      margin: -50px 0 var(--zaui-space-size-md, 16px) 0;
+    }
+  }
+}
+
+.setting-overlay {
+  .column-setting-title {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+  }
+
+  .ant-popover-inner-content {
+    max-height: 280px;
+    overflow-y: auto;
+  }
+
+  .column-checkbox-item {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+
+    .ant-checkbox-wrapper {
+      font-weight: 500;
+    }
+  }
+}
+
+.ant-dropdown-placement-bottomLeft {
+  .ant-dropdown-menu-vertical.ant-dropdown-menu-light {
+
+    .ant-dropdown-menu-item-only-child {
+      &:hover {
+        background: rgba(0, 106, 255, 0.08);
+      }
+    }
+  }
+}

package/lib/ProTable/useAntdTable.d.ts

@@ -0,0 +1,82 @@
+import { Key } from 'react';
+import { useRequest } from 'ahooks';
+import { RequestOptions, Service } from './propsType';
+declare function useAntdTable<I, R extends Record<string, any>, S extends Service<I, R>>(service: S, options?: RequestOptions<I, R>, useRequestOptions?: Parameters<typeof useRequest>[1]): {
+    data: any;
+    params: any;
+    rowSelection: {
+        type: import("antd/lib/table/interface").RowSelectionType;
+        selectedRowKeys: Key[];
+        onChange(selectedRowKeys: Key[], rows: any[]): void;
+        onSelectAll: (selected: boolean, selectedRows: R[]) => void;
+        getCheckboxProps: () => {
+            className: string;
+        };
+        selections: boolean | {
+            key: string;
+            text: string;
+            onSelect: (changeableRowKeys: Key[]) => void;
+        }[];
+    };
+    searchValues: I;
+    allSelected: boolean;
+    selectedTip: string;
+    selectedRowKeys: Key[];
+    selectedRecords: R[];
+    clearSelected: () => void;
+    setSelectedRowKeys: (selectedRowKeys: Key[]) => void;
+    setSelectedRecords: (selectedRecords: R[]) => void;
+    pagination: {
+        current: number;
+        pageSize: number;
+        showSizeChanger: boolean;
+        showQuickJumper: boolean;
+        onPaginationChange: boolean;
+        total: any;
+        showTotal: (total: any) => string;
+        onShowSizeChange: (current: number, pageSize: number) => void;
+        onChange: (current: number, pageSize: number) => void;
+    };
+    onReset: () => void;
+    onSearch: (values: any) => void;
+    refresh: () => void;
+    tableProps: {
+        rowKey: string | import("rc-table/lib/interface").GetRowKey<R>;
+        loading: boolean;
+        dataSource: any;
+        rowSelection: {
+            type: import("antd/lib/table/interface").RowSelectionType;
+            selectedRowKeys: Key[];
+            onChange(selectedRowKeys: Key[], rows: any[]): void;
+            onSelectAll: (selected: boolean, selectedRows: R[]) => void;
+            getCheckboxProps: () => {
+                className: string;
+            };
+            selections: boolean | {
+                key: string;
+                text: string;
+                onSelect: (changeableRowKeys: Key[]) => void;
+            }[];
+        };
+        pagination: {
+            current: number;
+            pageSize: number;
+            showSizeChanger: boolean;
+            showQuickJumper: boolean;
+            onPaginationChange: boolean;
+            total: any;
+            showTotal: (total: any) => string;
+            onShowSizeChange: (current: number, pageSize: number) => void;
+            onChange: (current: number, pageSize: number) => void;
+        };
+        onChange: (pagination: any, filters: any, sorter: any, extra: any) => void;
+    };
+    loading: boolean;
+    error?: Error;
+    cancel: () => void;
+    refreshAsync: () => Promise<unknown>;
+    run: (...params: any[]) => void;
+    runAsync: (...params: any[]) => Promise<unknown>;
+    mutate: (data?: unknown) => void;
+};
+export default useAntdTable;