@griddo/ax 1.66.4 → 1.66.7
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.
- package/package.json +2 -2
- package/src/api/pages.tsx +3 -15
- package/src/api/redirects.tsx +2 -4
- package/src/api/sites.tsx +2 -4
- package/src/components/Browser/index.tsx +1 -3
- package/src/components/Browser/style.tsx +2 -2
- package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx +1 -0
- package/src/components/ErrorCenter/index.tsx +5 -8
- package/src/components/ErrorCenter/style.tsx +8 -21
- package/src/components/Fields/ColorPicker/index.tsx +0 -1
- package/src/components/Fields/ReferenceField/ItemList/index.tsx +1 -5
- package/src/components/Fields/ReferenceField/index.tsx +14 -18
- package/src/components/Fields/UrlField/index.tsx +1 -13
- package/src/components/Fields/index.tsx +0 -2
- package/src/components/FieldsBehavior/index.tsx +1 -14
- package/src/components/MainWrapper/AppBar/index.tsx +10 -21
- package/src/components/MainWrapper/AppBar/style.tsx +3 -11
- package/src/components/MainWrapper/index.tsx +0 -2
- package/src/components/Modal/style.tsx +1 -0
- package/src/components/SearchField/index.tsx +4 -36
- package/src/components/SearchField/style.tsx +10 -23
- package/src/components/SideModal/style.tsx +6 -6
- package/src/components/TableFilters/StatusFilter/index.tsx +2 -2
- package/src/components/index.tsx +0 -2
- package/src/containers/App/actions.tsx +7 -3
- package/src/containers/PageEditor/actions.tsx +22 -91
- package/src/containers/PageEditor/constants.tsx +1 -1
- package/src/containers/PageEditor/interfaces.tsx +6 -6
- package/src/containers/PageEditor/reducer.tsx +4 -4
- package/src/containers/PageEditor/utils.tsx +1 -2
- package/src/containers/Sites/actions.tsx +23 -35
- package/src/containers/Sites/constants.tsx +0 -1
- package/src/containers/Sites/interfaces.tsx +0 -6
- package/src/containers/Sites/reducer.tsx +0 -4
- package/src/forms/editor.tsx +1 -34
- package/src/forms/errors.tsx +0 -1
- package/src/forms/index.tsx +1 -15
- package/src/forms/validators.tsx +9 -168
- package/src/guards/error/index.tsx +1 -1
- package/src/helpers/dataPacks.tsx +1 -8
- package/src/helpers/index.tsx +1 -2
- package/src/modules/Content/PageItem/index.tsx +4 -54
- package/src/modules/Content/atoms.tsx +3 -41
- package/src/modules/Content/index.tsx +64 -111
- package/src/modules/Content/style.tsx +1 -8
- package/src/modules/GlobalEditor/Editor/index.tsx +1 -3
- package/src/modules/GlobalEditor/PageBrowser/index.tsx +0 -3
- package/src/modules/GlobalEditor/index.tsx +6 -8
- package/src/modules/PageEditor/Editor/index.tsx +2 -6
- package/src/modules/PageEditor/PageBrowser/index.tsx +0 -3
- package/src/modules/PageEditor/index.tsx +15 -29
- package/src/modules/Redirects/index.tsx +10 -40
- package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/index.tsx +1 -1
- package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/index.tsx +1 -1
- package/src/modules/Settings/ContentTypes/DataPacks/Config/index.tsx +1 -1
- package/src/modules/Settings/ContentTypes/DataPacks/index.tsx +1 -1
- package/src/modules/Sites/index.tsx +3 -3
- package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx +1 -1
- package/src/modules/StructuredData/StructuredDataList/atoms.tsx +1 -1
- package/src/modules/Users/Profile/index.tsx +4 -3
- package/src/modules/Users/UserCreate/SiteItem/index.tsx +1 -1
- package/src/modules/Users/UserCreate/SiteItem/style.tsx +1 -1
- package/src/modules/Users/UserForm/style.tsx +3 -3
- package/src/modules/Users/UserList/UserItem/index.tsx +1 -3
- package/src/modules/Users/UserList/hooks.tsx +1 -1
- package/src/modules/Users/UserList/index.tsx +2 -2
- package/src/types/index.tsx +3 -16
- package/src/components/Fields/LinkField/index.tsx +0 -85
- package/src/components/Icon/components/Copy.js +0 -14
- package/src/components/Icon/svgs/Copy2.svg +0 -3
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@griddo/ax",
|
|
3
3
|
"description": "Griddo Author Experience",
|
|
4
|
-
"version": "1.66.
|
|
4
|
+
"version": "1.66.7",
|
|
5
5
|
"authors": [
|
|
6
6
|
"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
|
|
7
7
|
"Carlos Torres <carlos.torres@secuoyas.com>",
|
|
@@ -221,5 +221,5 @@
|
|
|
221
221
|
"publishConfig": {
|
|
222
222
|
"access": "public"
|
|
223
223
|
},
|
|
224
|
-
"gitHead": "
|
|
224
|
+
"gitHead": "492d4611398f8d06adc680637e8d5ee3fe57c6bf"
|
|
225
225
|
}
|
package/src/api/pages.tsx
CHANGED
|
@@ -75,11 +75,6 @@ const SERVICES: { [key: string]: IServiceConfig } = {
|
|
|
75
75
|
endpoint: ["/page/", "/preview/"],
|
|
76
76
|
method: "GET",
|
|
77
77
|
},
|
|
78
|
-
PAGE_CHECK: {
|
|
79
|
-
...template,
|
|
80
|
-
endpoint: "/page/check",
|
|
81
|
-
method: "POST",
|
|
82
|
-
},
|
|
83
78
|
};
|
|
84
79
|
|
|
85
80
|
const getPageInfo = async (pageID: number) => {
|
|
@@ -159,17 +154,15 @@ const getPageBreadcrumb = async (pageID: number) => {
|
|
|
159
154
|
return sendRequest(SERVICES.GET_PAGE_BREADCRUMB);
|
|
160
155
|
};
|
|
161
156
|
|
|
162
|
-
const duplicatePage = async (pageID: number, data
|
|
157
|
+
const duplicatePage = async (pageID: number, data: any) => {
|
|
163
158
|
const {
|
|
164
159
|
host,
|
|
165
160
|
endpoint: [prefix, suffix],
|
|
166
161
|
} = SERVICES.DUPLICATE_PAGE;
|
|
167
162
|
|
|
168
|
-
SERVICES.DUPLICATE_PAGE.dynamicUrl =
|
|
169
|
-
? `${host}${prefix}${pageID}${suffix}/${siteID}`
|
|
170
|
-
: `${host}${prefix}${pageID}${suffix}`;
|
|
163
|
+
SERVICES.DUPLICATE_PAGE.dynamicUrl = `${host}${prefix}${pageID}${suffix}`;
|
|
171
164
|
|
|
172
|
-
return
|
|
165
|
+
return sendRequest(SERVICES.DUPLICATE_PAGE, { ...data });
|
|
173
166
|
};
|
|
174
167
|
|
|
175
168
|
const bulkDelete = async (ids: any) => sendRequest(SERVICES.DELETE_BULK, { ids });
|
|
@@ -206,10 +199,6 @@ const getPublicPage = async (pageID: number, entity: string) => {
|
|
|
206
199
|
return sendRequest(SERVICES.GET_PUPLIC_PAGE);
|
|
207
200
|
};
|
|
208
201
|
|
|
209
|
-
const pageCheck = async (data: any) => {
|
|
210
|
-
return sendRequest(SERVICES.PAGE_CHECK, { ...data });
|
|
211
|
-
};
|
|
212
|
-
|
|
213
202
|
export default {
|
|
214
203
|
getPageInfo,
|
|
215
204
|
updatePage,
|
|
@@ -225,5 +214,4 @@ export default {
|
|
|
225
214
|
bulkRestore,
|
|
226
215
|
sendPagePing,
|
|
227
216
|
getPublicPage,
|
|
228
|
-
pageCheck,
|
|
229
217
|
};
|
package/src/api/redirects.tsx
CHANGED
|
@@ -40,15 +40,13 @@ const SERVICES: { [key: string]: IServiceConfig } = {
|
|
|
40
40
|
};
|
|
41
41
|
|
|
42
42
|
const getRedirects = async (params: any, filters?: string) => {
|
|
43
|
-
const { page, itemsPerPage, pagination
|
|
43
|
+
const { page, itemsPerPage, pagination } = params;
|
|
44
44
|
|
|
45
45
|
const { host, endpoint } = SERVICES.GET_REDIRECTS;
|
|
46
46
|
|
|
47
47
|
const filterString = filters || "";
|
|
48
|
-
const searchQuery = query ? `&query=${query}` : "";
|
|
49
|
-
const filterQuery = filterBy ? `&filterBy=${filterBy}` : "";
|
|
50
48
|
|
|
51
|
-
SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filterString}
|
|
49
|
+
SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filterString}`;
|
|
52
50
|
|
|
53
51
|
return sendRequest(SERVICES.GET_REDIRECTS);
|
|
54
52
|
};
|
package/src/api/sites.tsx
CHANGED
|
@@ -101,10 +101,8 @@ const SERVICES: { [key: string]: IServiceConfig } = {
|
|
|
101
101
|
},
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
const getAllSites = async (
|
|
105
|
-
|
|
106
|
-
SERVICES.GET_ALL_SITES.dynamicUrl = language ? `${host}${endpoint}?language=${language}` : "";
|
|
107
|
-
return sendRequest(SERVICES.GET_ALL_SITES);
|
|
104
|
+
const getAllSites = async (token: string) => {
|
|
105
|
+
return sendInitialRequest(SERVICES.GET_ALL_SITES, token);
|
|
108
106
|
};
|
|
109
107
|
|
|
110
108
|
const getSiteInfo = async (siteID: number) => {
|
|
@@ -29,7 +29,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
|
|
|
29
29
|
siteID,
|
|
30
30
|
isPreview,
|
|
31
31
|
setSelectedContent,
|
|
32
|
-
browserRef,
|
|
33
32
|
} = props;
|
|
34
33
|
|
|
35
34
|
const API_URL = process.env.REACT_APP_API_ENDPOINT;
|
|
@@ -135,7 +134,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
|
|
|
135
134
|
const initialContent = `<!DOCTYPE html><html><head>${getStylesFromHeader()}</head><body><div></div></body></html>`;
|
|
136
135
|
|
|
137
136
|
return (
|
|
138
|
-
<S.BrowserWrapper
|
|
137
|
+
<S.BrowserWrapper>
|
|
139
138
|
<S.NavBar>
|
|
140
139
|
<S.NavUrl>{url}</S.NavUrl>
|
|
141
140
|
{isPreview && (
|
|
@@ -196,7 +195,6 @@ interface IBrowserProps {
|
|
|
196
195
|
disabled?: boolean;
|
|
197
196
|
siteID?: number;
|
|
198
197
|
isPreview?: boolean;
|
|
199
|
-
browserRef?: any;
|
|
200
198
|
}
|
|
201
199
|
|
|
202
200
|
export default Browser;
|
|
@@ -67,8 +67,8 @@ const FrameWrapper = styled.div`
|
|
|
67
67
|
height: 100%;
|
|
68
68
|
`;
|
|
69
69
|
|
|
70
|
-
const StyledFrame = styled(Frame)
|
|
71
|
-
box-shadow: ${(p) =>
|
|
70
|
+
const StyledFrame = styled(Frame)`
|
|
71
|
+
box-shadow: ${(p) => p.theme.shadow.shadowL};
|
|
72
72
|
`;
|
|
73
73
|
|
|
74
74
|
export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, StyledFrame };
|
|
@@ -103,6 +103,7 @@ interface IProps {
|
|
|
103
103
|
error?: IErrorItem;
|
|
104
104
|
deleteError(error: IErrorItem): void;
|
|
105
105
|
errors: IErrorItem[];
|
|
106
|
+
collapsed?: boolean;
|
|
106
107
|
theme: string;
|
|
107
108
|
moduleCopy: { date: string; element: Record<string, unknown> } | null;
|
|
108
109
|
availableDataPacks: Record<string, any>[];
|
|
@@ -20,18 +20,15 @@ const ErrorCenter = (props: IProps): JSX.Element => {
|
|
|
20
20
|
goToElement(item.key);
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
const icon = item.type === "warning" ? "warning" : "alert";
|
|
24
|
-
|
|
25
23
|
return (
|
|
26
|
-
<S.Wrapper key={`${item.editorID}${item.key}`}
|
|
27
|
-
<S.Header
|
|
28
|
-
<Icon name=
|
|
29
|
-
|
|
24
|
+
<S.Wrapper key={`${item.editorID}${item.key}`} onClick={handleClick}>
|
|
25
|
+
<S.Header>
|
|
26
|
+
<Icon name="alert" size="16" />
|
|
27
|
+
{item.type}
|
|
30
28
|
</S.Header>
|
|
31
29
|
<S.Content>
|
|
32
30
|
<S.Title>{item.message}</S.Title>
|
|
33
31
|
<S.Subtitle>{item.name}</S.Subtitle>
|
|
34
|
-
{item.editorID && <S.Link>Go to field</S.Link>}
|
|
35
32
|
</S.Content>
|
|
36
33
|
</S.Wrapper>
|
|
37
34
|
);
|
|
@@ -48,7 +45,7 @@ const ErrorCenter = (props: IProps): JSX.Element => {
|
|
|
48
45
|
interface IProps {
|
|
49
46
|
errors: IErrorItem[];
|
|
50
47
|
actions?: {
|
|
51
|
-
goToError(editorID: number
|
|
48
|
+
goToError(editorID: number, tab: string, template: boolean): void;
|
|
52
49
|
};
|
|
53
50
|
}
|
|
54
51
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
|
|
3
3
|
const ActionMenu = styled.div`
|
|
4
|
+
padding: 0 ${(p) => p.theme.spacing.s};
|
|
4
5
|
width: ${(p) => `calc(4 * ${p.theme.spacing.l})`};
|
|
5
6
|
max-height: 380px;
|
|
6
7
|
overflow: auto;
|
|
@@ -9,20 +10,16 @@ const ActionMenu = styled.div`
|
|
|
9
10
|
const MenuHeader = styled.div`
|
|
10
11
|
${(p) => p.theme.textStyle.headingXXS};
|
|
11
12
|
color: ${(p) => p.theme.color.textLowEmphasis};
|
|
12
|
-
padding: ${(p) =>
|
|
13
|
+
padding-top: ${(p) => p.theme.spacing.xs};
|
|
13
14
|
`;
|
|
14
15
|
|
|
15
|
-
const Wrapper = styled.div
|
|
16
|
-
padding: ${(p) => p.theme.spacing.
|
|
16
|
+
const Wrapper = styled.div`
|
|
17
|
+
padding: ${(p) => p.theme.spacing.s} 0;
|
|
17
18
|
border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
|
|
18
|
-
|
|
19
|
-
cursor: ${(p) => (p.clickable ? "pointer" : "default")};
|
|
20
|
-
:hover {
|
|
21
|
-
background-color: ${(p) => (p.clickable ? p.theme.color.overlayHoverPrimary : "transparent")};
|
|
22
|
-
}
|
|
19
|
+
cursor: pointer;
|
|
23
20
|
`;
|
|
24
21
|
|
|
25
|
-
const Header = styled.div
|
|
22
|
+
const Header = styled.div`
|
|
26
23
|
${(p) => p.theme.textStyle.uiXS};
|
|
27
24
|
color: ${(p) => p.theme.color.textLowEmphasis};
|
|
28
25
|
display: flex;
|
|
@@ -31,7 +28,7 @@ const Header = styled.div<{ type: string }>`
|
|
|
31
28
|
svg {
|
|
32
29
|
margin-right: ${(p) => p.theme.spacing.xxs};
|
|
33
30
|
path {
|
|
34
|
-
fill: ${(p) =>
|
|
31
|
+
fill: ${(p) => p.theme.color.error};
|
|
35
32
|
}
|
|
36
33
|
}
|
|
37
34
|
`;
|
|
@@ -52,14 +49,4 @@ const Subtitle = styled.div`
|
|
|
52
49
|
color: ${(p) => p.theme.color.textLowEmphasis};
|
|
53
50
|
`;
|
|
54
51
|
|
|
55
|
-
|
|
56
|
-
text-transform: capitalize;
|
|
57
|
-
`;
|
|
58
|
-
|
|
59
|
-
const Link = styled.div`
|
|
60
|
-
${(p) => p.theme.textStyle.uiS};
|
|
61
|
-
color: ${(p) => p.theme.color.interactive01};
|
|
62
|
-
margin-top: ${(p) => p.theme.spacing.xxs};
|
|
63
|
-
`;
|
|
64
|
-
|
|
65
|
-
export { ActionMenu, MenuHeader, Wrapper, Header, Content, Title, Subtitle, Type, Link };
|
|
52
|
+
export { ActionMenu, MenuHeader, Wrapper, Header, Content, Title, Subtitle };
|
|
@@ -11,7 +11,6 @@ const ColorPicker = (props: IProps): JSX.Element => {
|
|
|
11
11
|
const { value, onChange, error, colors, handleValidation, theme } = props;
|
|
12
12
|
|
|
13
13
|
const initialState = { color: value, inputValue: value };
|
|
14
|
-
|
|
15
14
|
const reducer = useCallback((state: any, payload: any) => ({ ...state, ...payload }), []);
|
|
16
15
|
const [state, dispatch] = useReducer(reducer, initialState);
|
|
17
16
|
|
|
@@ -27,10 +27,6 @@ const ItemList = (props: IProps) => {
|
|
|
27
27
|
const response = await structuredData.getDistributorContent(siteID, params);
|
|
28
28
|
if (isReqOk(response.status)) {
|
|
29
29
|
setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
|
|
30
|
-
if (fixed.length !== response.data.length) {
|
|
31
|
-
const itemsID = response.data.reduce((previous: any, current: any) => [...previous, current.id], []);
|
|
32
|
-
setState((state: IReferenceState) => ({ ...state, fixed: itemsID }));
|
|
33
|
-
}
|
|
34
30
|
} else {
|
|
35
31
|
console.log("Error en getItems");
|
|
36
32
|
}
|
|
@@ -49,7 +45,7 @@ const ItemList = (props: IProps) => {
|
|
|
49
45
|
|
|
50
46
|
const handleDelete = (item: IStructuredDataContent) => {
|
|
51
47
|
const originalItemId = item.relatedPage?.originalStructuredDataId;
|
|
52
|
-
const itemId = fixed.includes(originalItemId) ? originalItemId : item.id;
|
|
48
|
+
const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
|
|
53
49
|
if (fixed.includes(itemId)) {
|
|
54
50
|
const newSelIds = fixed.filter((a: any) => a !== itemId);
|
|
55
51
|
const selItems = selectedItems.filter((b: any) => b.id !== itemId);
|
|
@@ -17,21 +17,10 @@ const ReferenceFieldWithProvider = (props: IProps) => (
|
|
|
17
17
|
<ReferenceProvider modes={props.selectionType}>
|
|
18
18
|
<ReferenceField {...props} />
|
|
19
19
|
</ReferenceProvider>
|
|
20
|
-
)
|
|
20
|
+
)
|
|
21
21
|
|
|
22
22
|
const ReferenceField = (props: IProps) => {
|
|
23
|
-
const {
|
|
24
|
-
source,
|
|
25
|
-
value,
|
|
26
|
-
onChange,
|
|
27
|
-
disabled,
|
|
28
|
-
site,
|
|
29
|
-
selectionType,
|
|
30
|
-
structuredDataValues,
|
|
31
|
-
validators,
|
|
32
|
-
maxItems,
|
|
33
|
-
resetValidation,
|
|
34
|
-
} = props;
|
|
23
|
+
const { source, value, onChange, disabled, site, selectionType, structuredDataValues, validators, maxItems } = props;
|
|
35
24
|
|
|
36
25
|
const { isOpen, toggleModal } = useModal();
|
|
37
26
|
|
|
@@ -121,7 +110,6 @@ const ReferenceField = (props: IProps) => {
|
|
|
121
110
|
fixed,
|
|
122
111
|
};
|
|
123
112
|
onChange(newValue);
|
|
124
|
-
resetValidation && resetValidation();
|
|
125
113
|
};
|
|
126
114
|
|
|
127
115
|
const icon = isAuto ? "edit" : "add";
|
|
@@ -164,9 +152,14 @@ const ReferenceField = (props: IProps) => {
|
|
|
164
152
|
|
|
165
153
|
const getPanel = () =>
|
|
166
154
|
isAuto ? (
|
|
167
|
-
<AutoPanel
|
|
155
|
+
<AutoPanel
|
|
156
|
+
structuredData={structuredDataValues}
|
|
157
|
+
onChange={handleOnChange}
|
|
158
|
+
site={site}
|
|
159
|
+
validators={validators}
|
|
160
|
+
/>
|
|
168
161
|
) : (
|
|
169
|
-
|
|
162
|
+
<ManualPanel onChange={handleOnChange} hasMaxItems={hasMaxItems} />
|
|
170
163
|
);
|
|
171
164
|
|
|
172
165
|
const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
|
|
@@ -196,7 +189,11 @@ const ReferenceField = (props: IProps) => {
|
|
|
196
189
|
{isAuto ? (
|
|
197
190
|
autoData
|
|
198
191
|
) : (
|
|
199
|
-
<ItemList
|
|
192
|
+
<ItemList
|
|
193
|
+
items={value ? value.fixed : []}
|
|
194
|
+
handleListDelete={handleListDelete}
|
|
195
|
+
handleChange={onChange}
|
|
196
|
+
/>
|
|
200
197
|
)}
|
|
201
198
|
<FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
|
|
202
199
|
{isOpen && getPanel()}
|
|
@@ -215,7 +212,6 @@ interface IProps {
|
|
|
215
212
|
structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
|
|
216
213
|
validators?: Record<string, unknown>;
|
|
217
214
|
maxItems?: number;
|
|
218
|
-
resetValidation?: () => void;
|
|
219
215
|
}
|
|
220
216
|
|
|
221
217
|
const mapStateToProps = (state: IRootState) => ({
|
|
@@ -11,17 +11,7 @@ import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./uti
|
|
|
11
11
|
import * as S from "./style";
|
|
12
12
|
|
|
13
13
|
const UrlField = (props: IUrlFieldProps): JSX.Element => {
|
|
14
|
-
const {
|
|
15
|
-
value,
|
|
16
|
-
onChange,
|
|
17
|
-
showAdvanced,
|
|
18
|
-
handlePanel,
|
|
19
|
-
inFloatingPanel,
|
|
20
|
-
disabled,
|
|
21
|
-
handleValidation,
|
|
22
|
-
validators,
|
|
23
|
-
resetValidation,
|
|
24
|
-
} = props;
|
|
14
|
+
const { value, onChange, showAdvanced, handlePanel, inFloatingPanel, disabled, handleValidation, validators } = props;
|
|
25
15
|
const { isOpen, toggleModal } = useModal();
|
|
26
16
|
const [anchorOptions, setAnchorOptions] = useState<ISelectOption[]>([]);
|
|
27
17
|
const [tabOptions, setTabOptions] = useState<ISelectOption[]>([]);
|
|
@@ -80,7 +70,6 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
|
|
|
80
70
|
const handleReset = () => {
|
|
81
71
|
onChange(null);
|
|
82
72
|
setInternalPageName(null);
|
|
83
|
-
resetValidation && resetValidation();
|
|
84
73
|
};
|
|
85
74
|
|
|
86
75
|
const handleSetPage = (page: IPage) => {
|
|
@@ -230,7 +219,6 @@ interface IUrlFieldProps {
|
|
|
230
219
|
inFloatingPanel?: boolean;
|
|
231
220
|
disabled?: boolean;
|
|
232
221
|
handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
|
|
233
|
-
resetValidation?: () => void;
|
|
234
222
|
validators?: Record<string, unknown>;
|
|
235
223
|
}
|
|
236
224
|
|
|
@@ -15,7 +15,6 @@ import FileField from "./FileField";
|
|
|
15
15
|
import HeadingField from "./HeadingField";
|
|
16
16
|
import HiddenField from "./HiddenField";
|
|
17
17
|
import ImageField from "./ImageField";
|
|
18
|
-
import LinkField from "./LinkField";
|
|
19
18
|
import MultiCheckSelect from "./MultiCheckSelect";
|
|
20
19
|
import MultiCheckSelectGroup from "./MultiCheckSelectGroup";
|
|
21
20
|
import NoteField from "./NoteField";
|
|
@@ -54,7 +53,6 @@ export {
|
|
|
54
53
|
HeadingField,
|
|
55
54
|
HiddenField,
|
|
56
55
|
ImageField,
|
|
57
|
-
LinkField,
|
|
58
56
|
MultiCheckSelect,
|
|
59
57
|
MultiCheckSelectGroup,
|
|
60
58
|
NoteField,
|
|
@@ -71,23 +71,10 @@ const FieldsBehavior = (props: any): JSX.Element => {
|
|
|
71
71
|
}
|
|
72
72
|
setErrorField(!isValid);
|
|
73
73
|
};
|
|
74
|
-
|
|
75
|
-
const resetValidation = () => {
|
|
76
|
-
setMessage(helptext);
|
|
77
|
-
error && deleteError && deleteError(error);
|
|
78
|
-
setErrorField(false);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
74
|
return (
|
|
82
75
|
<S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
|
|
83
76
|
<S.Content data-testid="contentWrapper" error={errorField}>
|
|
84
|
-
<Field
|
|
85
|
-
{...props}
|
|
86
|
-
showAdvanced={showAdvanced}
|
|
87
|
-
handleValidation={handleValidation}
|
|
88
|
-
resetValidation={resetValidation}
|
|
89
|
-
error={errorField}
|
|
90
|
-
/>
|
|
77
|
+
<Field {...props} showAdvanced={showAdvanced} handleValidation={handleValidation} error={errorField} />
|
|
91
78
|
</S.Content>
|
|
92
79
|
<S.Header className="fieldHeader">
|
|
93
80
|
{showTitle && (
|
|
@@ -43,8 +43,6 @@ const AppBar = (props: IProps): JSX.Element => {
|
|
|
43
43
|
errorActions,
|
|
44
44
|
isFromEditor,
|
|
45
45
|
pageStatusActions,
|
|
46
|
-
filterSearchAction,
|
|
47
|
-
searchFilters,
|
|
48
46
|
} = props;
|
|
49
47
|
|
|
50
48
|
const publishedTooltip: any = {
|
|
@@ -160,28 +158,21 @@ const AppBar = (props: IProps): JSX.Element => {
|
|
|
160
158
|
</S.WrapperTitle>
|
|
161
159
|
{tabs && (
|
|
162
160
|
<S.WrapperTabs>
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
/>
|
|
172
|
-
</S.TabsContent>
|
|
161
|
+
<Tabs
|
|
162
|
+
tabs={tabs.tabSet}
|
|
163
|
+
icons={tabs.icons}
|
|
164
|
+
active={tabs.selectedTab}
|
|
165
|
+
setSelectedTab={tabs.action}
|
|
166
|
+
isInAppBar={true}
|
|
167
|
+
inversed={inversed}
|
|
168
|
+
/>
|
|
173
169
|
</S.WrapperTabs>
|
|
174
170
|
)}
|
|
175
171
|
<S.WrapperEnd>
|
|
176
172
|
{searchAction && (
|
|
177
173
|
<>
|
|
178
|
-
<S.SearchWrapper
|
|
179
|
-
<SearchField
|
|
180
|
-
onChange={searchAction}
|
|
181
|
-
onFilterChange={filterSearchAction}
|
|
182
|
-
searchFilters={searchFilters}
|
|
183
|
-
closeOnInactive
|
|
184
|
-
/>
|
|
174
|
+
<S.SearchWrapper>
|
|
175
|
+
<SearchField onChange={searchAction} closeOnInactive />
|
|
185
176
|
</S.SearchWrapper>
|
|
186
177
|
<S.Separator />
|
|
187
178
|
</>
|
|
@@ -270,8 +261,6 @@ interface IAppBarProps {
|
|
|
270
261
|
inversed?: boolean;
|
|
271
262
|
currentPageID?: number;
|
|
272
263
|
searchAction?(query: string): void;
|
|
273
|
-
filterSearchAction?(filter: string): void;
|
|
274
|
-
searchFilters?: any;
|
|
275
264
|
errors?: IErrorItem[];
|
|
276
265
|
errorActions?: {
|
|
277
266
|
goToError(editorID: number, tab: string, template: boolean): void;
|
|
@@ -7,14 +7,6 @@ const WrapperTabs = styled.div`
|
|
|
7
7
|
flex-direction: row;
|
|
8
8
|
align-items: center;
|
|
9
9
|
margin-right: auto;
|
|
10
|
-
flex: 1 1 auto;
|
|
11
|
-
`;
|
|
12
|
-
|
|
13
|
-
const TabsContent = styled.div`
|
|
14
|
-
position: absolute;
|
|
15
|
-
right: 50%;
|
|
16
|
-
bottom: 0;
|
|
17
|
-
transform: translateX(50%);
|
|
18
10
|
`;
|
|
19
11
|
|
|
20
12
|
const WrapperEnd = styled.div`
|
|
@@ -28,6 +20,7 @@ const WrapperTitle = styled.div`
|
|
|
28
20
|
display: flex;
|
|
29
21
|
flex-direction: row;
|
|
30
22
|
align-items: center;
|
|
23
|
+
width: 600px;
|
|
31
24
|
margin-right: ${(p) => p.theme.spacing.xl};
|
|
32
25
|
`;
|
|
33
26
|
|
|
@@ -172,8 +165,8 @@ const ErrorWrapper = styled.div`
|
|
|
172
165
|
}
|
|
173
166
|
`;
|
|
174
167
|
|
|
175
|
-
const SearchWrapper = styled.div
|
|
176
|
-
width: ${(p) => `calc(${p.theme.spacing.xl} *
|
|
168
|
+
const SearchWrapper = styled.div`
|
|
169
|
+
width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
|
|
177
170
|
display: flex;
|
|
178
171
|
justify-content: flex-end;
|
|
179
172
|
`;
|
|
@@ -198,5 +191,4 @@ export {
|
|
|
198
191
|
SearchWrapper,
|
|
199
192
|
WrapperEnd,
|
|
200
193
|
WrapperTitle,
|
|
201
|
-
TabsContent,
|
|
202
194
|
};
|
|
@@ -42,8 +42,6 @@ interface IWrapperProps {
|
|
|
42
42
|
getDataContent?(dataID?: number): void;
|
|
43
43
|
} | null;
|
|
44
44
|
searchAction?(query: string): void;
|
|
45
|
-
filterSearchAction?(filter: string): void;
|
|
46
|
-
searchFilters?: any;
|
|
47
45
|
errors?: IErrorItem[];
|
|
48
46
|
errorActions?: {
|
|
49
47
|
goToError(editorID: number, tab: string, template: boolean): void;
|
|
@@ -1,24 +1,13 @@
|
|
|
1
1
|
import { Icon } from "@ax/components";
|
|
2
2
|
import React, { useState } from "react";
|
|
3
|
-
import { Select } from "../Fields";
|
|
4
3
|
|
|
5
4
|
import * as S from "./style";
|
|
6
5
|
|
|
7
6
|
const SearchField = (props: IProps): JSX.Element => {
|
|
8
|
-
const {
|
|
9
|
-
onChange,
|
|
10
|
-
placeholder,
|
|
11
|
-
closeOnInactive = false,
|
|
12
|
-
searchOnEnter = true,
|
|
13
|
-
disabled = false,
|
|
14
|
-
searchFilters,
|
|
15
|
-
onFilterChange,
|
|
16
|
-
} = props;
|
|
7
|
+
const { onChange, placeholder, closeOnInactive = false, searchOnEnter = true, disabled = false } = props;
|
|
17
8
|
|
|
18
9
|
const [isOpen, setIsOpen] = useState(false);
|
|
19
10
|
const [inputValue, setInputValue] = useState("");
|
|
20
|
-
const initState = searchFilters && searchFilters[0] ? searchFilters[0].value : "";
|
|
21
|
-
const [selectValue, setSelectValue] = useState<string>(initState);
|
|
22
11
|
|
|
23
12
|
const toggleField = () => setIsOpen(!isOpen);
|
|
24
13
|
|
|
@@ -47,32 +36,12 @@ const SearchField = (props: IProps): JSX.Element => {
|
|
|
47
36
|
}
|
|
48
37
|
};
|
|
49
38
|
|
|
50
|
-
const handleSelectChange = (value: string) => {
|
|
51
|
-
setSelectValue(value);
|
|
52
|
-
onFilterChange && onFilterChange(value);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
39
|
const showField = isOpen || !closeOnInactive;
|
|
56
40
|
|
|
57
41
|
return (
|
|
58
42
|
<S.Wrapper>
|
|
59
43
|
{showField ? (
|
|
60
|
-
<S.FieldWrapper
|
|
61
|
-
{searchFilters && searchFilters.length && (
|
|
62
|
-
<>
|
|
63
|
-
<S.FilterWrapper>
|
|
64
|
-
<Select
|
|
65
|
-
name="filterSelect"
|
|
66
|
-
value={selectValue}
|
|
67
|
-
options={searchFilters}
|
|
68
|
-
onChange={handleSelectChange}
|
|
69
|
-
type="inline"
|
|
70
|
-
placeholder="Filter by"
|
|
71
|
-
/>
|
|
72
|
-
</S.FilterWrapper>
|
|
73
|
-
<S.Separator />
|
|
74
|
-
</>
|
|
75
|
-
)}
|
|
44
|
+
<S.FieldWrapper>
|
|
76
45
|
<S.Input
|
|
77
46
|
type="text"
|
|
78
47
|
value={inputValue}
|
|
@@ -81,6 +50,7 @@ const SearchField = (props: IProps): JSX.Element => {
|
|
|
81
50
|
placeholder={placeholder}
|
|
82
51
|
closeOnInactive={closeOnInactive}
|
|
83
52
|
disabled={disabled}
|
|
53
|
+
autoFocus
|
|
84
54
|
/>
|
|
85
55
|
{inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
|
|
86
56
|
{closeOnInactive || inputValue.length > 0 ? (
|
|
@@ -108,8 +78,6 @@ interface IProps {
|
|
|
108
78
|
closeOnInactive?: boolean;
|
|
109
79
|
searchOnEnter?: boolean;
|
|
110
80
|
disabled?: boolean;
|
|
111
|
-
searchFilters?: any;
|
|
112
|
-
onFilterChange?(filter: string): void;
|
|
113
81
|
}
|
|
114
82
|
|
|
115
|
-
export default SearchField;
|
|
83
|
+
export default SearchField;
|
|
@@ -5,9 +5,15 @@ const Wrapper = styled.div`
|
|
|
5
5
|
width: 100%;
|
|
6
6
|
`;
|
|
7
7
|
|
|
8
|
-
const FieldWrapper = styled.div
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const FieldWrapper = styled.div``;
|
|
9
|
+
|
|
10
|
+
const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
|
|
11
|
+
${(p) => p.theme.textStyle.fieldContent};
|
|
12
|
+
color: ${(p) => p.theme.color.textHighEmphasis};
|
|
13
|
+
background-color: ${(p) => p.theme.color.interactiveBackground};
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: ${(p) => p.theme.spacing.l};
|
|
16
|
+
padding-left: ${(p) => p.theme.spacing.xs};
|
|
11
17
|
border-color: ${(p) =>
|
|
12
18
|
p.disabled
|
|
13
19
|
? p.theme.color.interactiveDisabled
|
|
@@ -17,16 +23,6 @@ const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>
|
|
|
17
23
|
border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
|
|
18
24
|
border-style: solid;
|
|
19
25
|
border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
|
|
20
|
-
`;
|
|
21
|
-
|
|
22
|
-
const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
|
|
23
|
-
${(p) => p.theme.textStyle.fieldContent};
|
|
24
|
-
color: ${(p) => p.theme.color.textHighEmphasis};
|
|
25
|
-
background-color: ${(p) => p.theme.color.interactiveBackground};
|
|
26
|
-
flex: 1 1 auto;
|
|
27
|
-
height: ${(p) => p.theme.spacing.l};
|
|
28
|
-
padding-left: ${(p) => p.theme.spacing.xs};
|
|
29
|
-
border: none;
|
|
30
26
|
|
|
31
27
|
&:active,
|
|
32
28
|
&:focus {
|
|
@@ -70,13 +66,4 @@ const IconCloseWrapper = styled.div`
|
|
|
70
66
|
transform: translateY(-50%);
|
|
71
67
|
`;
|
|
72
68
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
const Separator = styled.div`
|
|
76
|
-
border-right: 1px solid ${(p) => p.theme.color.uiLine};
|
|
77
|
-
height: ${(p) => p.theme.spacing.m};
|
|
78
|
-
margin-right: ${(p) => p.theme.spacing.xs};
|
|
79
|
-
margin-left: ${(p) => p.theme.spacing.s};
|
|
80
|
-
`;
|
|
81
|
-
|
|
82
|
-
export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper, FilterWrapper, Separator };
|
|
69
|
+
export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper };
|