Skip to content

Commit 079cdf1

Browse files
kelokelooukrbublik
kelokeloo
and
ukrbublik
authored
feat: Add some missing type declarations for packages/core and packag… (#1264)
* feat: Add some missing type declarations for packages/core and package/ui * Fix: Remove unnecessary export declarations. * Fix Compatible with @ant-design/icons@4.x * added ListValueSimple * accurate * Suport antd 4 * fix lint * chlog --------- Co-authored-by: Denys Oblohin <ukrbublik@gmail.com>
1 parent 96566fa commit 079cdf1

File tree

18 files changed

+168
-61
lines changed

18 files changed

+168
-61
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
- Improved theming (PR #1188) (issues #892 #970 #599)
55
- Dropped `compact_styles.scss`. Use class `.qb-compact` instead if you need. See new `vars_compact.scss` (PR #1188)
66
- Added customized modals to confirm item deleteion for Fluent, Bootstrap (PR #1188)
7+
- Added some missing type declarations. Restored support of AntDesign v4 (PR #1264)
78
- Added `showSelectedValueSourceLabel` to config settings (PR #1272) (issue #1144)
89
- 6.6.15
910
- Fixed support of AntDesign 4.x DatePicker (PR #1239) (issue #1238)

‎packages/antd/modules/utils/theming.ts‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// https://ant.design/docs/react/customize-theme
22

33
import { Utils, RenderSize, Config, ThemeMode, CssVars } from "@react-awesome-query-builder/ui";
4+
// @ts-ignore antd v4 doesn't have theme
45
import { theme as antdTheme, ConfigProviderProps, GlobalToken } from "antd";
56
import omitBy from "lodash/omitBy";
67
import pickBy from "lodash/pickBy";
@@ -15,6 +16,10 @@ const { logger, isTruthy } = Utils.OtherUtils;
1516
const { setColorOpacity, generateCssVarsForLevels, chroma, isDarkColor, isColor } = Utils.ColorUtils;
1617

1718
const buildAlgorithms = (darkMode: boolean, compactMode: boolean) => {
19+
if (!antdTheme) {
20+
// antd v4 doesn't have theme
21+
return {};
22+
}
1823
const algorithms: Algorithm[] = [
1924
darkMode && antdTheme.darkAlgorithm,
2025
compactMode && antdTheme.compactAlgorithm,
@@ -49,22 +54,23 @@ const detectTokenThemeMode = (token: GlobalToken | undefined): ThemeMode | undef
4954
const filterBasicTokens = (token: GlobalToken) => {
5055
return pickBy(token, (tokenValue: string | number | boolean, tokenName: keyof GlobalToken) => {
5156
return (
52-
// preserve primary color!
53-
tokenName === "colorPrimary"
54-
// seed color tokens - seems fine to reuse
55-
|| [
56-
"colorInfo",
57-
"colorSuccess",
58-
"colorWarning",
59-
"colorError",
60-
"colorLink",
61-
].includes(tokenName)
62-
// non-color tokens
63-
|| tokenName.startsWith("boxShadow")
64-
|| tokenName.startsWith("font")
65-
|| tokenName.startsWith("lineType")
66-
|| tokenName.startsWith("motion")
67-
|| typeof tokenValue !== "string"
57+
typeof tokenName === "string" && (
58+
// preserve primary color!
59+
tokenName === "colorPrimary"
60+
// seed color tokens - seems fine to reuse
61+
|| [
62+
"colorInfo",
63+
"colorSuccess",
64+
"colorWarning",
65+
"colorError",
66+
"colorLink",
67+
].includes(tokenName)
68+
// non-color tokens
69+
|| tokenName.startsWith("boxShadow")
70+
|| tokenName.startsWith("font")
71+
|| tokenName.startsWith("lineType")
72+
|| tokenName.startsWith("motion")
73+
) || typeof tokenValue !== "string"
6874
);
6975
}) as GlobalToken;
7076
};
@@ -75,12 +81,12 @@ const filterTokens = (token: GlobalToken) => {
7581
return filterBasicTokens(token);
7682
};
7783

78-
export const mergeThemes = (themeMode: ThemeMode | undefined, existingToken: GlobalToken | undefined, themeConfig: ThemeConfig | undefined, algorithms: Algorithm[]) => {
84+
export const mergeThemes = (themeMode: ThemeMode | undefined, existingToken: GlobalToken | undefined, themeConfig: ThemeConfig | undefined, algorithms?: Algorithm[]) => {
7985
const tokenThemeMode = detectTokenThemeMode(existingToken);
8086
const canInheritToken = !themeMode || !existingToken || themeMode == tokenThemeMode;
8187
const filteredExistingToken = existingToken ? filterTokens(existingToken) : undefined;
8288
const mergedTheme: ThemeConfig = {
83-
...(algorithms.length ? { algorithm: algorithms } : {}),
89+
...(algorithms?.length ? { algorithm: algorithms } : {}),
8490
...(existingToken ? { token: filteredExistingToken } : {}),
8591
inherit: canInheritToken,
8692
...(themeConfig ? themeConfig : {}),
@@ -96,24 +102,29 @@ export const mergeThemes = (themeMode: ThemeMode | undefined, existingToken: Glo
96102
return mergedTheme;
97103
};
98104

99-
const generateCssVars = (token: GlobalToken, config: Config) => {
105+
const generateCssVars = (token: GlobalToken | undefined, config: Config) => {
100106
// logger.log("generateCssVars - antd token", token);
101-
const darkMode = isDarkColor(token.colorBgBase)!;
107+
const darkMode = isDarkColor(token?.colorBgBase)!;
102108
const renderSize = config.settings.renderSize;
103109
const useThickLeftBorderOnHoverItem = config.settings.designSettings?.useThickLeftBorderOnHoverItem ?? false;
104110
const useShadowOnHoverItem = config.settings.designSettings?.useShadowOnHoverItem ?? false;
105111

112+
if (!token) {
113+
// antd v4 doesn't have theme
114+
return {} as CssVars;
115+
}
116+
106117
let sizedBorderRadius;
107118
switch (renderSize) {
108119
case "large":
109-
sizedBorderRadius = token?.borderRadiusLG ?? token?.borderRadius;
120+
sizedBorderRadius = token.borderRadiusLG ?? token.borderRadius;
110121
break;
111122
case "small":
112-
sizedBorderRadius = token?.borderRadiusSM ?? token?.borderRadius;
123+
sizedBorderRadius = token.borderRadiusSM ?? token.borderRadius;
113124
break;
114125
case "medium":
115126
default:
116-
sizedBorderRadius = token?.borderRadius;
127+
sizedBorderRadius = token.borderRadius;
117128
break;
118129
}
119130

‎packages/antd/modules/widgets/core/CssVarsProvider.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { Config } from "@react-awesome-query-builder/ui";
3+
// @ts-ignore antd v4 doesn't have theme
34
import { theme as antdTheme } from "antd";
45
import { generateCssVars as defaultGenerateCssVars } from "../../utils/theming";
56

@@ -16,7 +17,7 @@ const CssVarsProvider: React.FC<CssVarsProviderProps> = ({ children, config }) =
1617
const liteMode = config.settings.liteMode;
1718
const enableCssVars = !!config.settings.designSettings?.generateCssVarsFromThemeLibrary;
1819

19-
const { token, theme } = antdTheme.useToken();
20+
const { token, theme } = antdTheme?.useToken() ?? {}; // antd v4 doesn't have theme
2021

2122
React.useEffect(() => {
2223
const cssVarsTarget = ref.current;
@@ -35,7 +36,7 @@ const CssVarsProvider: React.FC<CssVarsProviderProps> = ({ children, config }) =
3536
cssVarsTarget?.style.removeProperty(k);
3637
}
3738
};
38-
}, [themeMode, renderSize, ref, theme.id, config, enableCssVars]);
39+
}, [themeMode, renderSize, ref, theme?.id, config, enableCssVars]);
3940

4041
return(<div ref={ref} className={`qb-antd qb-${themeMode} ${compactMode ? "qb-compact" : ""} ${liteMode ? "qb-lite" : ""}`}>{children}</div>);
4142
};

‎packages/antd/modules/widgets/core/FieldSelect.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useCallback, useMemo } from "react";
2-
import { Tooltip, Select } from "antd";
2+
import { Tooltip, Select, version as antdVersion } from "antd";
33
import {BUILT_IN_PLACEMENTS, SELECT_WIDTH_OFFSET_RIGHT, calcTextWidth} from "../../utils/domUtils";
44
const { Option, OptGroup } = Select;
55

@@ -101,12 +101,19 @@ const FieldSelect = (props) => {
101101

102102
const fieldSelectItems = renderSelectItems(items);
103103

104+
const selectProps = {};
105+
const antdMajorVersion = parseInt(antdVersion.split(".")[0]);
106+
if (antdMajorVersion >= 5) {
107+
selectProps.popupMatchSelectWidth = false;
108+
} else {
109+
selectProps.dropdownMatchSelectWidth = false;
110+
}
111+
104112
let res = (
105113
<Select
106114
open={open}
107115
onDropdownVisibleChange={setOpen}
108116
dropdownAlign={dropdownAlign}
109-
popupMatchSelectWidth={false}
110117
style={style}
111118
placeholder={placeholder}
112119
size={config.settings.renderSize}
@@ -119,6 +126,7 @@ const FieldSelect = (props) => {
119126
showSearch={!!showSearch}
120127
searchValue={searchValue}
121128
onSearch={showSearch ? onSearch : undefined}
129+
{...selectProps}
122130
{...customProps}
123131
>{fieldSelectItems}</Select>
124132
);

‎packages/antd/modules/widgets/core/FieldTreeSelect.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from "react";
2-
import { Tooltip, TreeSelect } from "antd";
2+
import { Tooltip, TreeSelect, version as antdVersion } from "antd";
33
import {BUILT_IN_PLACEMENTS, SELECT_WIDTH_OFFSET_RIGHT, calcTextWidth} from "../../utils/domUtils";
44
import PropTypes from "prop-types";
55
import { Utils } from "@react-awesome-query-builder/ui";
@@ -145,6 +145,14 @@ export default class FieldTreeSelect extends Component {
145145
const useAutoWidth = true || !this.optionsMaxWidth; //tip: "auto" is good, but width will jump on expand/collapse
146146
const dropdownWidth = Math.max(dropdownMinWidth, Math.min(dropdownMaxWidth, this.optionsMaxWidth));
147147

148+
const selectProps = {};
149+
const antdMajorVersion = parseInt(antdVersion.split(".")[0]);
150+
if (antdMajorVersion >= 5) {
151+
selectProps.popupMatchSelectWidth = false;
152+
} else {
153+
selectProps.dropdownMatchSelectWidth = false;
154+
}
155+
148156
let res = (
149157
<TreeSelect
150158
open={open}
@@ -168,8 +176,8 @@ export default class FieldTreeSelect extends Component {
168176
placeholder={placeholder}
169177
filterTreeNode={this.filterTreeNode}
170178
treeDefaultExpandedKeys={treeDefaultExpandedKeys}
171-
popupMatchSelectWidth={false}
172179
disabled={readonly}
180+
{...selectProps}
173181
{...customProps}
174182
/>
175183
);

‎packages/antd/modules/widgets/core/Icon.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { PlusOutlined, PlusCircleOutlined, DeleteFilled, HolderOutlined } from "@ant-design/icons";
2+
import { PlusOutlined, PlusCircleOutlined, DeleteFilled, HolderOutlined, DragOutlined } from "@ant-design/icons";
33
import { Utils } from "@react-awesome-query-builder/ui";
44
const { DragIcon } = Utils;
55

@@ -12,7 +12,7 @@ const typeToIcon = {
1212
"addSubRuleSimple": <PlusOutlined />,
1313
"addSubRule": <PlusOutlined />,
1414
"addSubGroup": <PlusCircleOutlined />,
15-
"drag": <HolderOutlined />,
15+
"drag": HolderOutlined ? <HolderOutlined /> : <DragOutlined />, // Compatible with @ant-design/icons@4.x
1616
};
1717

1818
export default ({type}) => {

‎packages/antd/modules/widgets/core/Provider.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { ProviderProps } from "@react-awesome-query-builder/ui";
3+
// @ts-ignore antd v4 doesn't have theme
34
import { ConfigProvider, ConfigProviderProps, theme as antdTheme } from "antd";
45
import { CssVarsProvider } from "./CssVarsProvider";
56
import { buildAlgorithms, mergeThemes } from "../../utils/theming";
@@ -16,7 +17,7 @@ const Provider: React.FC<ProviderProps> = ({ config, children }) => {
1617
const canCreateAlgorithms = darkMode || compactMode;
1718
const canCreateTheme = !!themeConfig || localeConfig || canCreateAlgorithms;
1819

19-
const { token: existingOuterToken, theme: existingTheme } = antdTheme.useToken();
20+
const { token: existingOuterToken, theme: existingTheme } = antdTheme?.useToken() ?? {}; // antd v4 doesn't have theme
2021
const existingToken = config.settings.designSettings?.canInheritThemeFromOuterProvider ? existingOuterToken : undefined;
2122

2223
const { algorithms } = React.useMemo<ReturnType<typeof buildAlgorithms>>(() => {
@@ -25,7 +26,7 @@ const Provider: React.FC<ProviderProps> = ({ config, children }) => {
2526

2627
const customThemeConfig = React.useMemo<ThemeConfig>(() => {
2728
return canCreateTheme ? mergeThemes(themeMode, existingToken, themeConfig, algorithms) : undefined;
28-
}, [algorithms, themeConfig, existingTheme.id, themeMode, canCreateTheme]);
29+
}, [algorithms, themeConfig, existingTheme?.id, themeMode, canCreateTheme]);
2930

3031
const withCssVarsProvider = (
3132
<CssVarsProvider config={config}>
@@ -38,6 +39,7 @@ const Provider: React.FC<ProviderProps> = ({ config, children }) => {
3839
// @ts-ignore error TS2786: 'ConfigProvider' cannot be used as a JSX component. Its return type 'ReactNode | Promise<ReactNode>' is not a valid JSX element.
3940
<ConfigProvider
4041
locale={localeConfig as Locale | undefined}
42+
// @ts-ignore antd v4 doesn't have theme
4143
theme={customThemeConfig}
4244
>{withCssVarsProvider}</ConfigProvider>
4345
) : withCssVarsProvider;

‎packages/antd/modules/widgets/moment/Calendar.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import type { Moment } from "@react-awesome-query-builder/ui";
22
import { Calendar } from "antd";
33
import momentGenerateConfig from "./config";
4+
45
const MomentCalendar = (() => {
6+
// @ts-ignore for antd v4 need to import picker from 'antd/es/calendar/generatePicker' (https://4x.ant.design/docs/react/replace-moment)
57
if (typeof Calendar.generateCalendar === "function") {
8+
// @ts-ignore
69
return Calendar.generateCalendar<Moment>(momentGenerateConfig);
710
} else {
811
// support ant 4.x

‎packages/antd/modules/widgets/moment/DatePicker.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { DatePicker } from "antd";
33
import momentGenerateConfig from "./config";
44

55
const MomentDatePicker = (() => {
6+
// @ts-ignore for antd v4 need to import picker from 'antd/es/date-picker/generatePicker' (https://4x.ant.design/docs/react/replace-moment)
67
if (typeof DatePicker.generatePicker === "function") {
8+
// @ts-ignore
79
return DatePicker.generatePicker<Moment>(momentGenerateConfig);
810
} else {
911
// support ant 4.x

‎packages/antd/modules/widgets/value/Autocomplete.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useCallback } from "react";
2-
import { Select, Divider, Tooltip } from "antd";
2+
import { Select, Divider, Tooltip, version as antdVersion } from "antd";
33
import { calcTextWidth, SELECT_WIDTH_OFFSET_RIGHT } from "../../utils/domUtils";
44
import { Hooks , Utils } from "@react-awesome-query-builder/ui";
55
const { fixListValuesGroupOrder } = Utils.Autocomplete;
@@ -241,6 +241,14 @@ export default (props) => {
241241
return matches;
242242
}, [config]);
243243

244+
const selectProps = {};
245+
const antdMajorVersion = parseInt(antdVersion.split(".")[0]);
246+
if (antdMajorVersion >= 5) {
247+
selectProps.popupMatchSelectWidth = customProps?.popupMatchSelectWidth || customProps?.dropdownMatchSelectWidth || false;
248+
} else {
249+
selectProps.dropdownMatchSelectWidth = customProps?.popupMatchSelectWidth || customProps?.dropdownMatchSelectWidth || false;
250+
}
251+
244252
return (
245253
<Select
246254
filterOption={useAsyncSearch ? false : filterOption}
@@ -252,7 +260,6 @@ export default (props) => {
252260
style={customProps?.style || style}
253261
dropdownStyle={customProps?.dropdownStyle || dropdownStyle}
254262
key={"widget-autocomplete"}
255-
popupMatchSelectWidth={customProps?.popupMatchSelectWidth || customProps?.dropdownMatchSelectWidth || false}
256263
placeholder={customProps?.placeholder || dynamicPlaceholder}
257264
onDropdownVisibleChange={onDropdownVisibleChange}
258265
onChange={aOnChange}
@@ -266,6 +273,7 @@ export default (props) => {
266273
searchValue={inputValue}
267274
open={open}
268275
options={optionsToRender}
276+
{...selectProps}
269277
{...customProps}
270278
>
271279
</Select>

0 commit comments

Comments
 (0)