tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

type progress to Elements

Browse Source
This commit is contained in:
James
2020-12-01 08:04:31 -05:00
parent 8c8c49c66d
commit dc8ffa34e4
18 changed files with 52 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/admin/components/elements/Banner/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Props } from './types';
import { Props, RenderedTypeProps } from './types';
import './index.scss';
@@ -25,7 +25,7 @@ const Banner: React.FC<Props> = ({
icon && `${baseClass}--align-icon-${alignIcon}`,
].filter(Boolean).join(' ');
let RenderedType = 'div';
let RenderedType: string | React.ComponentType<RenderedTypeProps> = 'div';
if (onClick && !to) RenderedType = 'button';
if (to) RenderedType = Link;
@@ -34,7 +34,6 @@ const Banner: React.FC<Props> = ({
<RenderedType
className={classes}
onClick={onClick}
type={RenderedType === 'button' ? 'button' : undefined}
to={to || undefined}
>
{(icon && alignIcon === 'left') && (

10
src/admin/components/elements/Banner/types.ts
View File

@@ -1,11 +1,19 @@
import { MouseEvent } from 'react';
type onClick = (event: MouseEvent) => void
export type Props = {
children?: React.ReactNode,
className?: string,
icon?: React.ReactNode,
alignIcon?: 'left' | 'right',
onClick?: (event: MouseEvent) => void,
onClick?: onClick
to?: string,
type?: 'error' | 'success' | 'info' | 'default',
}
export type RenderedTypeProps = {
className?: string
onClick?: onClick
to: string
}

42
src/admin/components/elements/ColumnSelector/getInitialState.tsx
View File

@@ -1,42 +0,0 @@
const getInitialColumnState = (fields, useAsTitle, defaultColumns) => {
let initialColumns = [];
if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {
return {
columns: defaultColumns,
};
}
if (useAsTitle) {
initialColumns.push(useAsTitle);
}
const remainingColumns = fields.reduce((remaining, field) => {
if (field.name === useAsTitle) {
return remaining;
}
if (!field.name && Array.isArray(field.fields)) {
return [
...remaining,
...field.fields.map((subField) => subField.name),
];
}
return [
...remaining,
field.name,
];
}, []);
initialColumns = initialColumns.concat(remainingColumns);
initialColumns = initialColumns.slice(0, 4);
return {
columns: initialColumns,
};
};
module.exports = getInitialColumnState;

4
src/admin/components/elements/ColumnSelector/types.ts
View File

@@ -1,6 +1,6 @@
import { Collection } from '../../../../collections/config/types';
import { CollectionConfig } from '../../../../collections/config/types';
export type Props = {
collection: Collection,
collection: CollectionConfig,
handleChange: (columns) => void,
}

2
src/admin/components/elements/DatePicker/index.tsx
View File

@@ -3,7 +3,7 @@ import Loading from '../Loading';
const DatePicker = lazy(() => import('./DatePicker'));
export default (props) => (
export default (props: unknown): React.ReactNode => (
<Suspense fallback={<Loading />}>
<DatePicker {...props} />
</Suspense>

1
src/admin/components/elements/DeleteDocument/index.tsx
View File

@@ -83,7 +83,6 @@ const DeleteDocument: React.FC<Props> = (props) => {
<React.Fragment>
<button
type="button"
slug={modalSlug}
className={`${baseClass}__toggle`}
onClick={(e) => {
e.preventDefault();

4
src/admin/components/elements/DeleteDocument/types.ts
View File

@@ -1,7 +1,7 @@
import { Collection } from '../../../../collections/config/types';
import { CollectionConfig } from '../../../../collections/config/types';
export type Props = {
collection?: Collection,
collection?: CollectionConfig,
id?: string,
title?: string,
}

1
src/admin/components/elements/GenerateConfirmation/index.tsx
View File

@@ -31,7 +31,6 @@ const GenerateConfirmation: React.FC<Props> = (props) => {
<Button
size="small"
buttonStyle="secondary"
slug={modalSlug}
onClick={() => {
toggle(modalSlug);
}}

2
src/admin/components/elements/GenerateConfirmation/types.ts
View File

@@ -1,5 +1,3 @@
import { createTrue } from 'typescript';
export type Props = {
setKey: () => void,
highlightField: (Boolean) => void,

12
src/admin/components/elements/ListControls/index.tsx
View File

@@ -22,7 +22,6 @@ const ListControls: React.FC<Props> = (props) => {
fields,
admin: {
useAsTitle,
defaultColumns,
},
},
} = props;
@@ -31,7 +30,7 @@ const ListControls: React.FC<Props> = (props) => {
const [search, setSearch] = useState('');
const [columns, setColumns] = useState([]);
const [where, setWhere] = useState({});
const [visibleDrawer, setVisibleDrawer] = useState(false);
const [visibleDrawer, setVisibleDrawer] = useState<'where' | 'sort' | 'columns'>();
useEffect(() => {
if (useAsTitle) {
@@ -44,7 +43,7 @@ const ListControls: React.FC<Props> = (props) => {
}, [useAsTitle, fields]);
useEffect(() => {
const newState = {
const newState: any = {
columns,
};
@@ -83,7 +82,7 @@ const ListControls: React.FC<Props> = (props) => {
<Button
className={`${baseClass}__toggle-columns`}
buttonStyle={visibleDrawer === 'columns' ? undefined : 'secondary'}
onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : false)}
onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}
icon="chevron"
iconStyle="none"
>
@@ -93,7 +92,7 @@ const ListControls: React.FC<Props> = (props) => {
<Button
className={`${baseClass}__toggle-where`}
buttonStyle={visibleDrawer === 'where' ? undefined : 'secondary'}
onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : false)}
onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}
icon="chevron"
iconStyle="none"
>
@@ -103,7 +102,7 @@ const ListControls: React.FC<Props> = (props) => {
<Button
className={`${baseClass}__toggle-sort`}
buttonStyle={visibleDrawer === 'sort' ? undefined : 'secondary'}
onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : false)}
onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}
icon="chevron"
iconStyle="none"
>
@@ -120,7 +119,6 @@ const ListControls: React.FC<Props> = (props) => {
>
<ColumnSelector
collection={collection}
defaultColumns={defaultColumns}
handleChange={setColumns}
/>
</AnimateHeight>

4
src/admin/components/elements/ListControls/types.ts
View File

@@ -1,9 +1,9 @@
import { Collection } from '../../../../collections/config/types';
import { CollectionConfig } from '../../../../collections/config/types';
export type Props = {
enableColumns?: boolean,
enableSort?: boolean,
setSort: () => void,
collection: Collection,
collection: CollectionConfig,
handleChange: (newState) => void,
}

2
src/admin/components/elements/Localizer/index.tsx
View File

@@ -47,7 +47,7 @@ const Localizer: React.FC<Props> = () => {
return (
<li
key={localeOption}
className={localeClasses}
className={localeClasses.join(' ')}
>
<Link
to={{ search }}

2
src/admin/components/elements/Nav/index.tsx
View File

@@ -127,7 +127,7 @@ const DefaultNav = () => {
);
};
const Nav = () => {
const Nav: React.FC = () => {
const {
admin: {
components: {

4
src/admin/components/elements/Paginator/index.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import queryString from 'qs';
import { Props } from './types';
import { Props, Node } from './types';
import Page from './Page';
import Separator from './Separator';
@@ -58,7 +58,7 @@ const Pagination: React.FC<Props> = (props) => {
const rangeEndIndex = (currentPage - 1) + numberOfNeighbors + 1;
// Slice out the range of pages that we want to render
const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex);
// Add prev separator if necessary
if (currentPage - numberOfNeighbors - 1 >= 2) nodes.unshift({ type: 'Separator' });

12
src/admin/components/elements/Paginator/types.ts
View File

@@ -10,3 +10,15 @@ export type Props = {
disableHistoryChange?: boolean,
onChange?: (page) => void,
}
export type Node = {
type: 'Page' | 'Separator' | 'ClickableArrow'
props?: {
page?: number
updatePage: (page: number) => void
isFirstPage?: boolean
isLastPage?: boolean
isDisabled?: boolean
direction?: 'right' | 'left'
}
} | number

6
src/admin/components/elements/SortComplex/types.ts
View File

@@ -1,6 +1,6 @@
import { Collection } from '../../../../collections/config/types';
import { CollectionConfig } from '../../../../collections/config/types';
export type Props = {
handleChange: (any) => void,
collection: Collection,
handleChange: (controls: any) => void,
collection: CollectionConfig,
}

6
src/admin/components/elements/WhereBuilder/types.ts
View File

@@ -1,6 +1,6 @@
import { Collection } from '../../../../collections/config/types';
import { CollectionConfig } from '../../../../collections/config/types';
export type Props = {
handleChange: () => void,
collection: Collection,
handleChange: (controls: any) => void,
collection: CollectionConfig,
}

12
src/admin/components/forms/Form/buildStateFromSchema.ts
View File

@@ -4,11 +4,13 @@ import { Fields, Field, Data } from './types';
const buildValidationPromise = async (fieldState: Field, field: FieldSchema) => {
const validatedFieldState = fieldState;
validatedFieldState.valid = typeof field.validate === 'function' ? await field.validate(fieldState.value, field) : true;
const validationResult = typeof field.validate === 'function' ? await field.validate(fieldState.value, field) : true;
if (typeof validatedFieldState.valid === 'string') {
validatedFieldState.errorMessage = validatedFieldState.valid;
if (typeof validationResult === 'string') {
validatedFieldState.errorMessage = validationResult;
validatedFieldState.valid = false;
} else {
validatedFieldState.valid = true;
}
};
@@ -86,7 +88,7 @@ const buildStateFromSchema = async (fieldSchema: FieldSchema[], fullData: Data =
}
// Handle non-array-based nested fields (group, etc)
if (field.type === 'row' || field.type === 'group') {
if (field.type === 'group') {
const subFieldData = initialData?.[field.name] as Data;
return {
@@ -102,7 +104,7 @@ const buildStateFromSchema = async (fieldSchema: FieldSchema[], fullData: Data =
}
// Handle field types that do not use names (row, etc)
if (field.type === 'row' || field.type === 'group') {
if (field.type === 'row') {
return {
...state,
...iterateFields(field.fields, data, path),