Skip to content

Commit 20d7588

Browse files
sarikesarike
committed
updates: table supports expansion control
1 parent 0a9c69a commit 20d7588

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1165
-263
lines changed

‎client/packages/openblocks-design/src/components/CustomModal.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
3535
cursor: ${(props) => (props.$draggable ? "move" : "auto")};
3636
display: flex;
3737
align-items: center;
38-
padding: 16px;
38+
line-height: 26px;
39+
padding: 11px 16px;
3940
`;
4041

4142
const ModalHeaderTitle = styled.div`
@@ -44,6 +45,7 @@ const ModalHeaderTitle = styled.div`
4445
color: #222222;
4546
flex-grow: 1;
4647
min-width: 0;
48+
height: 16px;
4749
display: flex;
4850
align-items: center;
4951
@@ -58,6 +60,7 @@ const ModalCloseIcon = styled.div`
5860
margin-left: 16px;
5961
width: 16px;
6062
height: 16px;
63+
display: flex;
6164
cursor: pointer;
6265
color: ${GreyTextColor};
6366
@@ -101,8 +104,8 @@ export const ModalFooterWrapper = styled.div`
101104
height: 28px;
102105
margin-top: 12px;
103106
margin-left: 8px;
104-
padding-left: 12px;
105-
padding-right: 12px;
107+
padding-left: 11px;
108+
padding-right: 11px;
106109
}
107110
`;
108111

@@ -268,6 +271,7 @@ CustomModal.confirm = (props: {
268271
bodyStyle?: React.CSSProperties;
269272
footer?: ReactNode;
270273
type?: "info" | "warn" | "error" | "success";
274+
width?: number | string;
271275
}): any => {
272276
const defaultConfirmProps: ModalFuncProps = {
273277
...DEFAULT_PROPS,
@@ -317,6 +321,7 @@ CustomModal.confirm = (props: {
317321
okText={props.okText}
318322
bodyStyle={{ ...defaultConfirmProps.bodyStyle, ...props.bodyStyle }}
319323
footer={props.footer}
324+
width={props.width}
320325
/>
321326
),
322327
});

‎client/packages/openblocks-design/src/components/Menu.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ const StyledAntdMenu = styled(AntdMenu)`
7777
.ant-menu-item:focus-visible {
7878
box-shadow: unset;
7979
}
80+
81+
.ant-menu-item-disabled span {
82+
color: #B8B9BF;
83+
}
8084
`;
8185

8286
const MenuItemContentWrapper = styled.div`

‎client/packages/openblocks-design/src/icons/icon-mobile-app.svg

Lines changed: 18 additions & 0 deletions
Loading

‎client/packages/openblocks-design/src/icons/icon-navigation-mobile.svg

Lines changed: 8 additions & 0 deletions
Loading

‎client/packages/openblocks-design/src/icons/icon-navigation-pc.svg

Lines changed: 11 additions & 0 deletions
Loading

‎client/packages/openblocks-design/src/icons/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,3 +271,6 @@ export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg";
271271
export { ReactComponent as DangerIcon } from "icons/icon-danger.svg";
272272
export { ReactComponent as TableMinusIcon } from "icons/icon-table-minus.svg";
273273
export { ReactComponent as TablePlusIcon } from "icons/icon-table-plus.svg";
274+
export { ReactComponent as MobileAppIcon } from "icons/icon-mobile-app.svg";
275+
export { ReactComponent as MobileNavIcon } from "icons/icon-navigation-mobile.svg";
276+
export { ReactComponent as PcNavIcon } from "icons/icon-navigation-pc.svg";

‎client/packages/openblocks/src/comps/comps/gridLayoutComp/canvasView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const UICompContainer = styled.div<{ maxWidth?: number; readOnly?: boolean }>`
2727
`;
2828

2929
// modal/drawer container
30-
const CanvasContainer = styled.div<{ maxWidth: number }>`
30+
export const CanvasContainer = styled.div<{ maxWidth: number }>`
3131
max-width: ${(props) => props.maxWidth}px;
3232
min-width: min(${(props) => props.maxWidth}px, 718px);
3333
margin: 0 auto;

‎client/packages/openblocks/src/comps/comps/layout/appSelectComp.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { useDispatch, useSelector } from "react-redux";
2+
import { normalAppListSelector } from "redux/selectors/applicationSelector";
3+
import { useEffect, useMemo } from "react";
4+
import { fetchAllApplications } from "redux/reduxActions/applicationActions";
5+
import { AppTypeEnum } from "constants/applicationConstants";
6+
import { Dropdown } from "components/Dropdown";
7+
import { trans } from "i18n";
8+
import { ModuleComp } from "comps/comps/moduleComp/moduleComp";
9+
10+
function AppSelectPropertyView(props: {
11+
onChange: (label: string, value: string) => void;
12+
appId: string;
13+
}) {
14+
const { appId, onChange } = props;
15+
const apps = useSelector(normalAppListSelector);
16+
const dispatch = useDispatch();
17+
useEffect(() => {
18+
if (apps.length <= 0) dispatch(fetchAllApplications({}));
19+
}, [apps]);
20+
const options = useMemo(
21+
() =>
22+
apps
23+
.filter((app) => app.applicationType === AppTypeEnum.Application)
24+
.map((app) => ({
25+
label: app.name,
26+
value: app.applicationId,
27+
})),
28+
[apps]
29+
);
30+
const valueLabelMap = useMemo(() => {
31+
return new Map(options.map((o) => [o.value, o.label]));
32+
}, [options]);
33+
34+
return (
35+
<Dropdown
36+
showSearch={true}
37+
value={appId}
38+
options={options}
39+
label={trans("aggregation.chooseApp")}
40+
onChange={(value) => {
41+
onChange(valueLabelMap.get(value) || "", value);
42+
}}
43+
/>
44+
);
45+
}
46+
47+
// @ts-ignore
48+
export class AppSelectComp extends ModuleComp {
49+
getAppId() {
50+
return this.children.appId.getView();
51+
}
52+
53+
propertyView(param: { onChange?: (label: string) => void }) {
54+
return (
55+
<AppSelectPropertyView
56+
appId={this.children.appId.getView()}
57+
onChange={(label, value) => {
58+
this.dispatchChangeValueAction({
59+
appId: value,
60+
});
61+
param.onChange && param.onChange(label);
62+
}}
63+
/>
64+
);
65+
}
66+
}

‎client/packages/openblocks/src/comps/comps/layout/layoutMenuItemComp.tsx

Lines changed: 4 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { MultiBaseComp } from "openblocks-core";
2-
import { ModuleComp } from "comps/comps/moduleComp/moduleComp";
32
import { BoolPureControl } from "comps/controls/boolControl";
43
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
54
import { keyValueListControl } from "comps/controls/keyValueControl";
@@ -11,74 +10,13 @@ import {
1110
ToViewReturn,
1211
} from "comps/generators/multi";
1312
import { genRandomKey } from "comps/utils/idGenerator";
14-
import { AppTypeEnum } from "constants/applicationConstants";
15-
import { BranchDiv, Dropdown, Treediv } from "openblocks-design";
13+
import { BranchDiv, Treediv } from "openblocks-design";
1614
import _ from "lodash";
17-
import { ReactNode, useEffect, useMemo } from "react";
18-
import { useDispatch, useSelector } from "react-redux";
19-
import { normalAppListSelector } from "redux/selectors/applicationSelector";
15+
import { ReactNode } from "react";
2016
import { IconControl } from "comps/controls/iconControl";
2117
import { hiddenPropertyView } from "comps/utils/propertyUtils";
2218
import { trans } from "i18n";
23-
import { fetchAllApplications } from "redux/reduxActions/applicationActions";
24-
25-
function AppSelectorPropertyView(props: {
26-
onChange: (label: string, value: string) => void;
27-
appId: string;
28-
}) {
29-
const { appId, onChange } = props;
30-
const apps = useSelector(normalAppListSelector);
31-
const dispatch = useDispatch();
32-
useEffect(() => {
33-
if (apps.length <= 0) dispatch(fetchAllApplications({}));
34-
}, [apps]);
35-
const options = useMemo(
36-
() =>
37-
apps
38-
.filter((app) => app.applicationType === AppTypeEnum.Application)
39-
.map((app) => ({
40-
label: app.name,
41-
value: app.applicationId,
42-
})),
43-
[apps]
44-
);
45-
const valueLabelMap = useMemo(() => {
46-
return new Map(options.map((o) => [o.value, o.label]));
47-
}, [options]);
48-
49-
return (
50-
<Dropdown
51-
showSearch={true}
52-
value={appId}
53-
options={options}
54-
label={trans("aggregation.chooseApp")}
55-
onChange={(value) => {
56-
onChange(valueLabelMap.get(value) || "", value);
57-
}}
58-
/>
59-
);
60-
}
61-
62-
// @ts-ignore
63-
class AppSelectorControl extends ModuleComp {
64-
getAppId() {
65-
return this.children.appId.getView();
66-
}
67-
68-
propertyView(param: { onChange: (label: string) => void }) {
69-
return (
70-
<AppSelectorPropertyView
71-
appId={this.children.appId.getView()}
72-
onChange={(label, value) => {
73-
this.dispatchChangeValueAction({
74-
appId: value,
75-
});
76-
param.onChange(label);
77-
}}
78-
/>
79-
);
80-
}
81-
}
19+
import { AppSelectComp } from "comps/comps/layout/appSelectComp";
8220

8321
const QueryHashList = withDefault(keyValueListControl(false, [], "string"), [
8422
{ key: "", value: "" },
@@ -87,7 +25,7 @@ const QueryHashList = withDefault(keyValueListControl(false, [], "string"), [
8725
const childrenMap = {
8826
label: StringControl,
8927
hidden: BoolCodeControl,
90-
app: AppSelectorControl,
28+
app: AppSelectComp,
9129
icon: IconControl,
9230
hideWhenNoPermission: withDefault(BoolPureControl, true),
9331
queryParam: QueryHashList,

0 commit comments

Comments
 (0)