listpage-next 0.0.152 → 0.0.154

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.
@@ -0,0 +1,7 @@
1
+ import { SwitchProps } from 'antd';
2
+ export interface AsyncSwitchProps extends SwitchProps {
3
+ syncChange?: (value: boolean) => Promise<void>;
4
+ }
5
+ export declare const AsyncSwitch: (props: SwitchProps & {
6
+ syncChange?: (value: boolean) => Promise<void>;
7
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,29 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useControllableValue } from "ahooks";
3
+ import { Switch } from "antd";
4
+ import { useState } from "react";
5
+ const AsyncSwitch = (props)=>{
6
+ const { syncChange, ...restProps } = props;
7
+ const [value, onChange] = useControllableValue(props, {
8
+ trigger: 'onChange',
9
+ valuePropName: 'value',
10
+ defaultValue: props.defaultValue
11
+ });
12
+ const [loading, setLoading] = useState(false);
13
+ return /*#__PURE__*/ jsx(Switch, {
14
+ ...restProps,
15
+ loading: loading,
16
+ value: value,
17
+ onChange: async (checked)=>{
18
+ onChange(checked);
19
+ setLoading(true);
20
+ try {
21
+ await props.syncChange?.(checked);
22
+ } finally{
23
+ setLoading(false);
24
+ onChange(!checked);
25
+ }
26
+ }
27
+ });
28
+ };
29
+ export { AsyncSwitch };
@@ -1,9 +1,9 @@
1
1
  import { HTMLAttributeAnchorTarget } from 'react';
2
- import { TagProps, TypographyProps } from 'antd';
2
+ import { SwitchProps, TagProps, TypographyProps } from 'antd';
3
3
  import { ColumnType } from 'antd/es/table';
4
4
  import { ColumnRender } from '../components/Render';
5
- export type ComponentType = 'text' | 'time' | 'tag' | 'link';
6
- export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : ComponentType extends 'time' ? TimeComponentProps : ComponentType extends 'tag' ? TagComponentProps : ComponentType extends 'link' ? LinkComponentProps : unknown;
5
+ export type ComponentType = 'text' | 'time' | 'tag' | 'link' | 'switch';
6
+ export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : ComponentType extends 'time' ? TimeComponentProps : ComponentType extends 'tag' ? TagComponentProps : ComponentType extends 'link' ? LinkComponentProps : ComponentType extends 'switch' ? SwitchComponentProps : unknown;
7
7
  export type TextComponentProps = TypographyProps['Text'];
8
8
  export type TimeComponentProps = {
9
9
  format?: string;
@@ -14,6 +14,9 @@ export type LinkComponentProps = {
14
14
  hrefPropName?: string | ((record: any) => string);
15
15
  target?: HTMLAttributeAnchorTarget;
16
16
  };
17
+ export type SwitchComponentProps = SwitchProps & {
18
+ syncChange?: (value: boolean, record: any) => Promise<void>;
19
+ };
17
20
  export interface ColumnRenderProps<Record, Context> {
18
21
  component?: ComponentType | ColumnRender<Record, Context>;
19
22
  props?: ComponentProps;
@@ -4,19 +4,23 @@ import { styled } from "styled-components";
4
4
  import dayjs from "dayjs";
5
5
  import { Render } from "../components/Render.js";
6
6
  import { TextOverflow } from "../../TextOverflow/index.js";
7
+ import { AsyncSwitch } from "../../AsyncSwitch/index.js";
7
8
  function createColumnRender(ctx, column) {
8
9
  if (column.component) {
9
10
  if ('text' === column.component) return function(value, record, index) {
10
- return textRender(value, column.props);
11
+ return textRender(value, record, column.props);
11
12
  };
12
13
  if ('time' === column.component) return function(value, record, index) {
13
- return timeRender(value, column.props);
14
+ return timeRender(value, record, column.props);
14
15
  };
15
16
  if ('tag' === column.component) return function(value, record, index) {
16
- return tagRender(value, column.props);
17
+ return tagRender(value, record, column.props);
17
18
  };
18
19
  if ('link' === column.component) return function(value, record, index) {
19
- return linkRender(record, column.props);
20
+ return linkRender(value, record, column.props);
21
+ };
22
+ if ('switch' === column.component) return function(value, record, index) {
23
+ return switchRender(value, record, column.props);
20
24
  };
21
25
  return function(value, record, index) {
22
26
  return /*#__PURE__*/ jsx(Render, {
@@ -30,7 +34,7 @@ function createColumnRender(ctx, column) {
30
34
  }
31
35
  return column.render;
32
36
  }
33
- function textRender(value, props) {
37
+ function textRender(value, record, props) {
34
38
  return /*#__PURE__*/ jsx(Typography.Text, {
35
39
  ellipsis: {
36
40
  tooltip: true
@@ -39,7 +43,7 @@ function textRender(value, props) {
39
43
  children: value
40
44
  });
41
45
  }
42
- function timeRender(value, props) {
46
+ function timeRender(value, record, props) {
43
47
  try {
44
48
  const time = value ? dayjs(value).format(props?.format) : '-';
45
49
  return /*#__PURE__*/ jsx("span", {
@@ -51,13 +55,13 @@ function timeRender(value, props) {
51
55
  });
52
56
  }
53
57
  }
54
- function tagRender(value, props) {
58
+ function tagRender(value, record, props) {
55
59
  return /*#__PURE__*/ jsx(Tag, {
56
60
  ...props,
57
61
  children: value
58
62
  });
59
63
  }
60
- function linkRender(record, props) {
64
+ function linkRender(value, record, props) {
61
65
  const getPropName = (propName)=>{
62
66
  if ('function' == typeof propName) return propName(record);
63
67
  return record[propName];
@@ -76,6 +80,15 @@ function linkRender(record, props) {
76
80
  }
77
81
  });
78
82
  }
83
+ function switchRender(value, record, props) {
84
+ return /*#__PURE__*/ jsx(AsyncSwitch, {
85
+ defaultValue: value,
86
+ ...props,
87
+ syncChange: async (checked)=>{
88
+ await props?.syncChange?.(checked, record);
89
+ }
90
+ });
91
+ }
79
92
  const LinkStyle = styled.a`
80
93
  color: #1677ff;
81
94
  &:hover {
@@ -32,7 +32,7 @@ export declare class ListPageStore<FilterValue = any, RecordValue extends Record
32
32
  visibleFloat?: {
33
33
  key: string;
34
34
  record: RecordValue;
35
- onCloseCallback?: () => void;
35
+ onCloseCallback?: true | (() => void);
36
36
  };
37
37
  loadingData: boolean;
38
38
  dataSource: RecordValue[];
@@ -48,7 +48,7 @@ export declare class ListPageStore<FilterValue = any, RecordValue extends Record
48
48
  listeners: Record<string, Function>;
49
49
  constructor(options: ListPageStorageOption<FilterValue, RecordValue>);
50
50
  submitFiltersChange(value?: FilterValue): void;
51
- showFloat(key: string, record: any, onCloseCallback?: () => void): void;
51
+ showFloat(key: string, record: any, onCloseCallback?: true | (() => void)): void;
52
52
  hideFloat(): void;
53
53
  updatePage(page: number, pageSize: number): void;
54
54
  fetchTableData(): Promise<void>;
@@ -10,7 +10,8 @@ function useFloat() {
10
10
  record: visibleFloat?.record,
11
11
  onClose: ()=>{
12
12
  store.hideFloat();
13
- visibleFloat?.onCloseCallback?.();
13
+ if (visibleFloat?.onCloseCallback === true) store.refreshTable();
14
+ else visibleFloat?.onCloseCallback?.();
14
15
  },
15
16
  visible: true
16
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "listpage-next",
3
- "version": "0.0.152",
3
+ "version": "0.0.154",
4
4
  "description": "A React component library for creating filter forms with Ant Design",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",