Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Take the latest changes from Raheel#534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 12 commits intofeat/Layout-Modefromdev
Nov 29, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
12 commits
Select commitHold shift + click to select a range
fd314d4
Merge pull request #529 from lowcoder-org/feat/Layout-Mode
FalkWolskyNov 27, 2023
d000d85
feat: added screenInfo hook
raheeliftikhar5Nov 28, 2023
14e8dc2
Merge pull request #531 from raheeliftikhar5/screen-info-hook
FalkWolskyNov 28, 2023
ae91db0
refactor: handle redirectUrl using sessionStoragee
raheeliftikhar5Nov 28, 2023
27019d1
refactor: use redirectUrl from sessionStorage
raheeliftikhar5Nov 28, 2023
85c0499
Merge branch 'dev' into refactor-redirect
FalkWolskyNov 29, 2023
436283f
feat: foldable components sections
raheeliftikhar5Nov 29, 2023
6e080c6
fix: initially show only commonly used comps
raheeliftikhar5Nov 29, 2023
ad2e97e
fix: show border bottom for each section
raheeliftikhar5Nov 29, 2023
5e065a7
Merge pull request #532 from raheeliftikhar5/refactor-redirect
FalkWolskyNov 29, 2023
5fc8cdd
Merge branch 'dev' into foldable-comps-sections
FalkWolskyNov 29, 2023
b4e12f2
Merge pull request #533 from raheeliftikhar5/foldable-comps-sections
FalkWolskyNov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletionsclient/packages/lowcoder/src/appView/AppViewInstance.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import { AppView } from "./AppView";
import { API_STATUS_CODES } from "constants/apiConstants";
import { AUTH_LOGIN_URL } from "constants/routesURL";
import { AuthSearchParams } from "constants/authConstants";
import { saveAuthSearchParams } from "@lowcoder-ee/pages/userAuth/authUtils";

export type OutputChangeHandler<O> = (output: O) => void;
export type EventTriggerHandler = (eventName: string) => void;
Expand DownExpand Up@@ -71,9 +72,11 @@ export class AppViewInstance<I = any, O = any> {
.then((i) => i.data)
.catch((e) => {
if (e.response?.status === API_STATUS_CODES.REQUEST_NOT_AUTHORISED) {
window.location.href = `${webUrl}${AUTH_LOGIN_URL}?${
AuthSearchParams.redirectUrl
}=${encodeURIComponent(window.location.href)}`;
saveAuthSearchParams({
[AuthSearchParams.redirectUrl]: encodeURIComponent(window.location.href),
[AuthSearchParams.loginType]: null,
})
window.location.href = `${webUrl}${AUTH_LOGIN_URL}`;
}
});

Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/comps/hooks/hookComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,6 +33,7 @@ import { ThemeComp } from "./themeComp";
import UrlParamsHookComp from "./UrlParamsHookComp";
import { UtilsComp } from "./utilsComp";
import { VideoMeetingControllerComp } from "../comps/meetingComp/videoMeetingControllerComp";
import { ScreenInfoHookComp } from "./screenInfoComp";

window._ = _;
window.dayjs = dayjs;
Expand DownExpand Up@@ -97,6 +98,7 @@ const HookMap: HookCompMapRawType = {
modal: ModalComp,
meeting: VideoMeetingControllerComp,
currentUser: CurrentUserHookComp,
screenInfo: ScreenInfoHookComp,
urlParams: UrlParamsHookComp,
drawer: DrawerComp,
theme: ThemeComp,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,7 @@ const AllHookComp = [
"message",
"localStorage",
"currentUser",
"screenInfo",
"urlParams",
"theme",
] as const;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ const defaultHookListValue = [
{ compType: "message", name: "message" },
{ compType: "localStorage", name: "localStorage" },
{ compType: "currentUser", name: "currentUser" },
{ compType: "screenInfo", name: "screenInfo" },
{ compType: "theme", name: "theme" },
] as const;

Expand Down
65 changes: 65 additions & 0 deletionsclient/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
import { useCallback, useEffect, useState } from "react";
import { hookToStateComp } from "../generators/hookToComp";

enum ScreenTypes {
Mobile = 'mobile',
Tablet = 'tablet',
Desktop = 'desktop',
}

type ScreenType = typeof ScreenTypes[keyof typeof ScreenTypes]

type ScreenInfo = {
width?: number;
height?: number;
deviceType?: ScreenType;
isDesktop?: boolean;
isTablet?: boolean;
isMobile?: boolean;
}

function useScreenInfo() {
const getDeviceType = () => {
if (window.screen.width < 768) return ScreenTypes.Mobile;
if (window.screen.width < 889) return ScreenTypes.Tablet;
return ScreenTypes.Desktop;
}
const getFlagsByDeviceType = (deviceType: ScreenType) => {
const flags = {
isMobile: false,
isTablet: false,
isDesktop: false,
};
if(deviceType === ScreenTypes.Mobile) {
return { ...flags, isMobile: true };
}
if(deviceType === ScreenTypes.Tablet) {
return { ...flags, Tablet: true };
}
return { ...flags, isDesktop: true };
}

const getScreenInfo = useCallback(() => {
const { width, height } = window.screen;
const deviceType = getDeviceType();
const flags = getFlagsByDeviceType(deviceType);

return { width, height, deviceType, ...flags };
}, [])

const [screenInfo, setScreenInfo] = useState<ScreenInfo>({});

const updateScreenInfo = useCallback(() => {
setScreenInfo(getScreenInfo());
}, [getScreenInfo])

useEffect(() => {
window.addEventListener('resize', updateScreenInfo);
updateScreenInfo();
return () => window.removeEventListener('resize', updateScreenInfo);
}, [ updateScreenInfo ])

return screenInfo;
}

export const ScreenInfoHookComp = hookToStateComp(useScreenInfo);
11 changes: 8 additions & 3 deletionsclient/packages/lowcoder/src/constants/authConstants.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,9 +22,14 @@ import {
export type AuthInviteInfo = InviteInfo & { invitationId: string };
export type AuthLocationState = { inviteInfo?: AuthInviteInfo; thirdPartyAuthError?: boolean };

export const AuthSearchParams = {
loginType: "loginType",
redirectUrl: "redirectUrl",
export enum AuthSearchParams {
loginType = "loginType",
redirectUrl = "redirectUrl",
};

export type AuthSearchParamsType = {
loginType: string | null,
redirectUrl: string | null,
};

export type OauthRequestParam = {
Expand Down
1 change: 0 additions & 1 deletionclient/packages/lowcoder/src/constants/routesURL.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,6 @@ export const QR_CODE_OAUTH_URL = `${USER_AUTH_URL}/oauth/qrcode`;
export const OAUTH_REDIRECT = `${USER_AUTH_URL}/oauth/redirect`;
export const CAS_AUTH_REDIRECT = `${USER_AUTH_URL}/cas/redirect`;
export const LDAP_AUTH_LOGIN_URL = `${USER_AUTH_URL}/ldap/login`;
export const USER_INFO_COMPLETION = `${USER_AUTH_URL}/completion`;
export const INVITE_LANDING_URL = "/invite/:invitationId";
export const ORG_AUTH_LOGIN_URL = `/org/:orgId/auth/login`;
export const ORG_AUTH_REGISTER_URL = `/org/:orgId/auth/register`;
Expand Down
109 changes: 75 additions & 34 deletionsclient/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,23 +8,23 @@ import { draggingUtils } from "layout";
import { isEmpty } from "lodash";
import { language } from "i18n";
import {
ComListTitle,
CompIconDiv,
EmptyCompContent,
RightPanelContentWrapper,
} from "pages/editor/right/styledComponent";
import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
import React, { useContext, useMemo } from "react";
import React, { useContext, useMemo, useState } from "react";
import styled from "styled-components";
import { labelCss } from "lowcoder-design";
import {
BaseSection,
PropertySectionContext,
PropertySectionContextType,
PropertySectionState,
labelCss,
} from "lowcoder-design";
import { TransparentImg } from "../../../util/commonUtils";
import { RightContext } from "./rightContext";

const GrayLabel = (props: { label: string }) => {
const { label } = props;
return <ComListTitle>{label}</ComListTitle>;
};

const CompDiv = styled.div`
display: flex;
flex-direction: column;
Expand DownExpand Up@@ -80,16 +80,25 @@ const InsertContain = styled.div`
gap: 8px;
`;

const CategoryLabel = styled(GrayLabel)`
margin: 0;
`;

const SectionWrapper = styled.div`
margin-bottom: 16px;
.section-header {
margin-left: 0;
}
&:not(:last-child){
border-bottom: 1px solid #e1e3eb;
}
`;

const stateCompName = 'UICompSections';
const initialState: PropertySectionState = { [stateCompName]: {}};
Object.keys(uiCompCategoryNames).forEach((cat) => {
const key = uiCompCategoryNames[cat as UICompCategory];
initialState[stateCompName][key] = key === uiCompCategoryNames.common
})

export const UICompPanel = () => {
const { onDrag, searchValue } = useContext(RightContext);
const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);

const categories = useMemo(() => {
const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
Expand All@@ -103,6 +112,22 @@ export const UICompPanel = () => {
return cats;
}, []);

const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
return {
compName: stateCompName,
state: propertySectionState,
toggle: (compName: string, sectionName: string) => {
setPropertySectionState((oldState) => {
const nextSectionState: PropertySectionState = { ...oldState };
const compState = nextSectionState[compName] || {};
compState[sectionName] = compState[sectionName] === false;
nextSectionState[compName] = compState;
return nextSectionState;
});
},
};
}, [propertySectionState]);

const compList = useMemo(
() =>
Object.entries(categories)
Expand All@@ -122,36 +147,52 @@ export const UICompPanel = () => {

return (
<SectionWrapper key={index}>
<CategoryLabel label={uiCompCategoryNames[key as UICompCategory]} />
<InsertContain>
{infos.map((info) => (
<CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
<HovDiv
draggable
onDragStart={(e) => {
e.dataTransfer.setData("compType", info[0]);
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
draggingUtils.setData("compType", info[0]);
onDrag(info[0]);
}}
>
<IconContain Icon={info[1].icon}></IconContain>
</HovDiv>
<CompNameLabel>{info[1].name}</CompNameLabel>
{language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
</CompDiv>
))}
</InsertContain>
<BaseSection
noMargin
width={288}
name={uiCompCategoryNames[key as UICompCategory]}
>
<InsertContain>
{infos.map((info) => (
<CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
<HovDiv
draggable
onDragStart={(e) => {
e.dataTransfer.setData("compType", info[0]);
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
draggingUtils.setData("compType", info[0]);
onDrag(info[0]);
}}
>
<IconContain Icon={info[1].icon}></IconContain>
</HovDiv>
<CompNameLabel>{info[1].name}</CompNameLabel>
{language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
</CompDiv>
))}
</InsertContain>
</BaseSection>
</SectionWrapper>
);
})
.filter((t) => t != null),
[categories, searchValue, onDrag]
);

if(!compList.length) return (
<RightPanelContentWrapper>
<EmptyCompContent />
</RightPanelContentWrapper>
)

return (
<RightPanelContentWrapper>
{compList.length > 0 ? compList : <EmptyCompContent />}
{/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
<PropertySectionContext.Provider
value={propertySectionContextValue}
>
{compList}
</PropertySectionContext.Provider>
</RightPanelContentWrapper>
);
};
27 changes: 20 additions & 7 deletionsclient/packages/lowcoder/src/pages/userAuth/authUtils.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,6 @@ import {
BASE_URL,
CAS_AUTH_REDIRECT,
OAUTH_REDIRECT,
USER_INFO_COMPLETION,
} from "constants/routesURL";
import { AxiosPromise, AxiosResponse } from "axios";
import { ApiResponse } from "api/apiResponses";
Expand All@@ -16,6 +15,7 @@ import { createContext, useState } from "react";
import { SystemConfig } from "constants/configConstants";
import {
AuthInviteInfo,
AuthSearchParamsType,
AuthSessionStoreParams,
ThirdPartyAuthGoal,
ThirdPartyAuthType,
Expand DownExpand Up@@ -79,12 +79,7 @@ export function authRespValidate(
) {
let replaceUrl = redirectUrl || BASE_URL;
const baseUrl = `${window.location.protocol}//${window.location.host}`;
if (infoCompleteCheck) {
// need complete info
replaceUrl = redirectUrl
? `${USER_INFO_COMPLETION}?redirectUrl=${redirectUrl}`
: USER_INFO_COMPLETION;
}

if (doValidResponse(resp)) {
onAuthSuccess?.();
history.replace(replaceUrl.replace(baseUrl, ''));
Expand DownExpand Up@@ -185,3 +180,21 @@ export const getRedirectUrl = (authType: ThirdPartyAuthType) => {
`${window.location.origin}${authType === "CAS" ? CAS_AUTH_REDIRECT : OAUTH_REDIRECT}`
);
};

const AuthSearchParamStorageKey = "_temp_auth_search_params_";

export const saveAuthSearchParams = (
authSearchParams: AuthSearchParamsType
) => {
sessionStorage.setItem(AuthSearchParamStorageKey, JSON.stringify(authSearchParams));
}

export const loadAuthSearchParams = ():AuthSearchParamsType | null => {
const authParams = sessionStorage.getItem(AuthSearchParamStorageKey);
if (!authParams) return null;
return JSON.parse(authParams);
}

export const clearAuthSearchParams = () => {
sessionStorage.removeItem(AuthSearchParamStorageKey);
}
3 changes: 2 additions & 1 deletionclient/packages/lowcoder/src/pages/userAuth/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { Redirect, Route, Switch, useLocation, useParams } from "react-router-do
import React, { useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { selectSystemConfig } from "redux/selectors/configSelectors";
import { AuthContext } from "pages/userAuth/authUtils";
import { AuthContext, clearAuthSearchParams } from "pages/userAuth/authUtils";
import { AuthRoutes } from "@lowcoder-ee/constants/authConstants";
import { AuthLocationState } from "constants/authConstants";
import { ProductLoading } from "components/ProductLoading";
Expand DownExpand Up@@ -37,6 +37,7 @@ export default function UserAuth() {

const fetchUserAfterAuthSuccess = () => {
dispatch(fetchUserAction());
clearAuthSearchParams();
}

return (
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@ export abstract class AbstractAuthenticator {
authRespValidate(
resp,
this.needInfoCheck(this.authParams.sourceType),
this.authParams.afterLoginRedirect,
getSafeAuthRedirectURL(this.authParams.afterLoginRedirect),
onAuthSuccess,
);
})
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp