Skip to content

Commit

Permalink
Merge branch 'refs/heads/dev' into stable
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pavel910
Pavel910 committed Sep 25, 2024
2 parents 8e5c47c + 98bc686 commit ddc0012
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 101 deletions.
44 changes: 19 additions & 25 deletions packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import { Input } from "./Input";
import { Select } from "./Select";
import { Grid, Cell } from "@webiny/ui/Grid";
Expand All @@ -8,7 +8,9 @@ import {
DEFAULT_TIMEZONE,
getCurrentDate,
getCurrentLocalTime,
getCurrentTimeZone
getCurrentTimeZone,
getHHmmss,
getHHmm
} from "./utils";
import { CmsModelField } from "~/types";
import { BindComponentRenderProp } from "@webiny/form";
Expand Down Expand Up @@ -37,11 +39,11 @@ const parseDateTime = (value?: string): Pick<State, "date"> & { rest: string } =
};
};

const parseTime = (value?: string): Pick<State, "time" | "timezone"> => {
const parseTime = (value?: string, defaultTimeZone?: string): Pick<State, "time" | "timezone"> => {
if (!value) {
return {
time: "",
timezone: ""
timezone: defaultTimeZone || ""
};
}
const sign = value.includes("+") ? "+" : "-";
Expand All @@ -62,20 +64,15 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
const defaultTimeZone = getCurrentTimeZone() || DEFAULT_TIMEZONE;

// "2020-05-18T09:00+10:00"
const initialValue = getDefaultFieldValue(field, bind, () => {
const date = new Date();
return `${getCurrentDate(date)}T${getCurrentLocalTime(date)}${defaultTimeZone}`;
});
const { date, rest } = parseDateTime(initialValue);
const { time, timezone = defaultTimeZone } = parseTime(rest);
const value =
bind.value ||
getDefaultFieldValue(field, bind, () => {
const date = new Date();
return `${getCurrentDate(date)}T${getCurrentLocalTime(date)}${defaultTimeZone}`;
});

const bindValue = bind.value || "";
useEffect(() => {
if (!date || !time || !timezone || bindValue === initialValue) {
return;
}
bind.onChange(initialValue);
}, [bindValue]);
const { date, rest } = parseDateTime(value);
const { time, timezone } = parseTime(rest, defaultTimeZone);

const cellSize = trailingIcon ? 3 : 4;

Expand All @@ -93,11 +90,8 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
}
return bind.onChange("");
}
return bind.onChange(
`${value}T${time || getCurrentLocalTime()}${
timezone || defaultTimeZone
}`
);

return bind.onChange(`${value}T${getHHmmss(time)}${timezone}`);
}
}}
field={{
Expand All @@ -111,7 +105,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
<Input
bind={{
...bind,
value: time,
value: getHHmm(time),
onChange: async value => {
if (!value) {
if (!bind.value) {
Expand All @@ -120,7 +114,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
return bind.onChange("");
}
return bind.onChange(
`${date || getCurrentDate()}T${value}${timezone || defaultTimeZone}`
`${date || getCurrentDate()}T${getHHmmss(value)}${timezone}`
);
}
}}
Expand All @@ -135,7 +129,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
<Cell span={cellSize}>
<Select
label="Timezone"
value={timezone || defaultTimeZone}
value={timezone}
onChange={value => {
if (!value) {
if (!bind.value) {
Expand Down
31 changes: 13 additions & 18 deletions ...es/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { useEffect } from "react";
import React from "react";
import { Grid, Cell } from "@webiny/ui/Grid";
import {
getCurrentDate,
getCurrentLocalTime,
getDefaultFieldValue,
getHHmm,
getHHmmss,
RemoveFieldButton
} from "./utils";
import { Input } from "./Input";
Expand Down Expand Up @@ -55,21 +57,14 @@ export const DateTimeWithoutTimezone = ({
trailingIcon
}: DateTimeWithoutTimezoneProps) => {
// "2020-05-18 09:00:00"
const initialValue = getDefaultFieldValue(field, bind, () => {
const date = new Date();
return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;
});
const value =
bind.value ||
getDefaultFieldValue(field, bind, () => {
const date = new Date();
return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;
});

const { date, time } = parseDateTime(initialValue);

const bindValue = bind.value || "";

useEffect(() => {
if (!date || !time || bindValue === initialValue) {
return;
}
bind.onChange(initialValue);
}, [bindValue]);
const { date, time } = parseDateTime(value);

const cellSize = trailingIcon ? 5 : 6;

Expand All @@ -87,7 +82,7 @@ export const DateTimeWithoutTimezone = ({
}
return bind.onChange("");
}
return bind.onChange(`${value} ${time || getCurrentLocalTime()}`);
return bind.onChange(`${value} ${getHHmmss(time)}`);
}
}}
field={{
Expand All @@ -101,15 +96,15 @@ export const DateTimeWithoutTimezone = ({
<Input
bind={{
...bind,
value: time,
value: getHHmm(time),
onChange: async value => {
if (!value) {
if (!bind.value) {
return;
}
return bind.onChange("");
}
return bind.onChange(`${date || getCurrentDate()} ${value}`);
return bind.onChange(`${date || getCurrentDate()} ${getHHmmss(value)}`);
}
}}
field={{
Expand Down
16 changes: 16 additions & 0 deletions packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,22 @@ export const getCurrentDate = (date?: Date): string => {
return `${year}-${month}-${day}`;
};

export const getHHmm = (time?: string) => {
if (!time) {
return "";
}
const parsableTime = time || getCurrentLocalTime();
return parsableTime.split(":").slice(0, 2).join(":");
};

// Ensure a valid HH:mm:ss string, ending with :00 for seconds.
export const getHHmmss = (time?: string) => {
const parsableTime = time || getCurrentLocalTime();
const parts = [...parsableTime.split(":").slice(0, 2), "00"];

return parts.join(":");
};

const deleteIconStyles = css({
width: "100% !important",
height: "100% !important",
Expand Down
105 changes: 55 additions & 50 deletions packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useCallback, useState, useEffect, useMemo } from "react";
import { css } from "emotion";
import styled from "@emotion/styled";
import classNames from "classnames";
import { useQuery } from "@apollo/react-hooks";
Expand Down Expand Up @@ -27,8 +26,10 @@ import {
import * as Styled from "~/templateEditor/config/Content/BlocksBrowser/StyledComponents";
import { PbPageTemplate } from "~/types";

const leftPanelStyle = css`
const ListContainer = styled.div`
width: 100%;
height: calc(100vh - 64px);
overflow: clip;
display: flex;
flex-direction: column;
`;
Expand Down Expand Up @@ -91,7 +92,7 @@ const ModalTitleStyled = styled.div`
`;

const SearchInputWrapper = styled.div`
padding: 15px;
padding: 16px;
`;

const BlankTemplateButtonWrapper = styled.div`
Expand Down Expand Up @@ -152,54 +153,58 @@ const PageTemplatesDialog = ({ onClose, onSelect, isLoading }: PageTemplatesDial
return (
<OverlayLayout barLeft={<ModalTitle />} onExited={onClose}>
<SplitView>
<LeftPanel span={3} className={leftPanelStyle}>
<SearchInputWrapper>
<Styled.Input>
<Icon className={Styled.searchIcon} icon={<SearchIcon />} />
<DelayedOnChange value={search} onChange={setSearch}>
{({ value, onChange }) => (
<input
autoFocus
type={"text"}
placeholder="Search templates..."
value={value}
onChange={ev => onChange(ev.target.value)}
/>
)}
</DelayedOnChange>
</Styled.Input>
</SearchInputWrapper>
<ScrollList
className={listStyle}
data-testid={"pb-new-page-dialog-templates-list"}
>
{filteredPageTemplates.map(template => (
<ListItem
key={template.id}
className={classNames(
listItem,
activeTemplate?.id === template.id && activeListItem
)}
onClick={() => {
setActiveTemplate(template);
}}
>
<TitleContent>
<ListItemTitle>{template.title}</ListItemTitle>
<Typography use={"body2"}>{template.description}</Typography>
</TitleContent>
</ListItem>
))}
</ScrollList>
<BlankTemplateButtonWrapper>
<ButtonSecondary
disabled={isLoading}
onClick={() => onSelect()}
data-testid={"pb-new-page-dialog-use-blank-template-btn"}
<LeftPanel span={3}>
<ListContainer>
<SearchInputWrapper>
<Styled.Input>
<Icon className={Styled.searchIcon} icon={<SearchIcon />} />
<DelayedOnChange value={search} onChange={setSearch}>
{({ value, onChange }) => (
<input
autoFocus
type={"text"}
placeholder="Search templates..."
value={value}
onChange={ev => onChange(ev.target.value)}
/>
)}
</DelayedOnChange>
</Styled.Input>
</SearchInputWrapper>
<ScrollList
className={listStyle}
data-testid={"pb-new-page-dialog-templates-list"}
>
Use a blank page template
</ButtonSecondary>
</BlankTemplateButtonWrapper>
{filteredPageTemplates.map(template => (
<ListItem
key={template.id}
className={classNames(
listItem,
activeTemplate?.id === template.id && activeListItem
)}
onClick={() => {
setActiveTemplate(template);
}}
>
<TitleContent>
<ListItemTitle>{template.title}</ListItemTitle>
<Typography use={"body2"}>
{template.description}
</Typography>
</TitleContent>
</ListItem>
))}
</ScrollList>
<BlankTemplateButtonWrapper>
<ButtonSecondary
disabled={isLoading}
onClick={() => onSelect()}
data-testid={"pb-new-page-dialog-use-blank-template-btn"}
>
Use a blank page template
</ButtonSecondary>
</BlankTemplateButtonWrapper>
</ListContainer>
</LeftPanel>
<RightPanel span={9} data-testid={"pb-new-page-dialog-template-preview"}>
{activeTemplate && (
Expand Down
16 changes: 8 additions & 8 deletions ...ages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/StyledComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@ export const List = styled("div")({
export const Input = styled("div")({
backgroundColor: "var(--mdc-theme-on-background)",
position: "relative",
height: 30,
padding: 3,
height: 36,
width: "100%",
borderRadius: 2,
"> input": {
border: "none",
fontSize: 16,
width: "calc(100% - 10px)",
height: "100%",
marginLeft: 50,
position: "absolute",
top: 0,
bottom: 0,
left: 36,
right: 0,
backgroundColor: "transparent",
outline: "none",
color: "var(--mdc-theme-text-primary-on-background)"
Expand All @@ -37,14 +38,13 @@ export const searchIcon = css({
position: "absolute",
width: 24,
height: 24,
left: 15,
top: 7
left: 8,
top: 6
}
});

export const wrapper = css({
height: "100vh",
//overflow: "scroll",
backgroundColor: "var(--mdc-theme-background)"
});

Expand Down

0 comments on commit ddc0012

Please sign in to comment.