yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-17 02:53:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move icons to app for faster loading

Browse Source
This commit is contained in:
soupette 2019-11-26 16:10:59 +01:00
parent 20d72f573d
commit 650408c20e
13 changed files with 151 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/EnumerationWrapper.js
View File

@ -3,7 +3,7 @@ import { Label } from '@buffetjs/core';
const EnumerationWrapper = styled(Label)`
width: 415px;
height: 90px;
min-height: 90px;
position: relative;
padding-left: 54px;
padding-top: 17px;

5
packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/Wrapper.js
View File

@ -13,8 +13,9 @@ const Wrapper = styled.div`
will-change: transform, opacity;
color: #9ea7b8;
> p {
max-width: 300px;
line-height: 17px;
max-width: calc(100% - 20px);
margin-top: -1px;
line-height: 18px;
}
}

4
packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js
View File

@ -6,8 +6,6 @@ import useDataManager from '../../hooks/useDataManager';
import CellRenderer from './CellRenderer';
import Wrapper from './Wrapper';
import allIcons from './utils/icons';
const ComponentIconPicker = ({
error,
isCreating,
@ -16,7 +14,7 @@ const ComponentIconPicker = ({
onChange,
value,
}) => {
const { allComponentsIconAlreadyTaken } = useDataManager();
const { allIcons, allComponentsIconAlreadyTaken } = useDataManager();
const icons = allIcons.filter(ico => {
if (isCreating) {

13
packages/strapi-plugin-content-type-builder/admin/src/components/HeaderNavLink/index.js
View File

@ -11,12 +11,19 @@ import pluginId from '../../pluginId';
import Wrapper from './Wrapper';
/* istanbul ignore next */
function HeaderNavLink({ custom, id, isActive, onClick }) {
function HeaderNavLink({ custom, isDisabled, id, isActive, onClick }) {
return (
<Wrapper
isActive={isActive}
style={{ cursor: 'pointer' }}
onClick={() => onClick(id)}
onClick={e => {
if (isDisabled) {
e.preventDefault();
return;
}
onClick(id);
}}
>
<FormattedMessage
id={`${pluginId}.popUpForm.navContainer.${custom || id}`}
@ -29,12 +36,14 @@ HeaderNavLink.defaultProps = {
custom: null,
id: 'base',
isActive: false,
isDisabled: false,
};
HeaderNavLink.propTypes = {
custom: PropTypes.string,
id: PropTypes.string,
isActive: PropTypes.bool,
isDisabled: PropTypes.bool,
onClick: PropTypes.func.isRequired,
};

3
packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js
View File

@ -9,6 +9,7 @@ import { Switch, Route } from 'react-router-dom';
import { LoadingIndicatorPage } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import DataManagerProvider from '../DataManagerProvider';
import icons from './utils/icons';
import Wrapper from './Wrapper';
const ListPage = lazy(() => import('../ListView'));
@ -18,7 +19,7 @@ import RecursivePath from '../RecursivePath';
const App = () => {
return (
<Wrapper>
<DataManagerProvider>
<DataManagerProvider allIcons={icons}>
<Suspense fallback={<LoadingIndicatorPage />}>
<Switch>
<Route

0
packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/utils/icons.js → packages/strapi-plugin-content-type-builder/admin/src/containers/App/utils/icons.js
View File

5
packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/index.js
View File

@ -15,7 +15,7 @@ import createModifiedDataSchema, {
import retrieveSpecificInfoFromComponents from './utils/retrieveSpecificInfoFromComponents';
import retrieveComponentsFromSchema from './utils/retrieveComponentsFromSchema';
const DataManagerProvider = ({ children }) => {
const DataManagerProvider = ({ allIcons, children }) => {
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
const {
components,
@ -126,7 +126,6 @@ const DataManagerProvider = ({ children }) => {
};
const removeComponentFromDynamicZone = (dzName, componentToRemoveIndex) => {
console.log({ dzName, componentToRemoveIndex });
dispatch({
type: 'REMOVE_COMPONENT_FROM_DYNAMIC_ZONE',
dzName,
@ -201,6 +200,7 @@ const DataManagerProvider = ({ children }) => {
components,
contentTypes,
createSchema,
allIcons,
initialData,
isInContentTypeView,
modifiedData,
@ -226,6 +226,7 @@ const DataManagerProvider = ({ children }) => {
};
DataManagerProvider.propTypes = {
allIcons: PropTypes.array.isRequired,
children: PropTypes.node.isRequired,
};

2
packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/reducer.js
View File

@ -28,6 +28,8 @@ const reducer = (state, action) => {
forTarget,
targetUid,
} = action;
delete rest.createComponent;
const pathToDataToEdit = ['component', 'contentType'].includes(forTarget)
? [forTarget]
: [forTarget, targetUid];

13
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
View File

@ -233,7 +233,10 @@ const FormModal = () => {
value === ''
) {
val = null;
} else if (type === 'radio' && (name === 'multiple' || name === 'single')) {
} else if (
type === 'radio' &&
(name === 'multiple' || name === 'single' || name === 'createComponent')
) {
val = value === 'false' ? false : true;
} else if (type === 'radio' && name === 'default') {
if (value === 'false') {
@ -367,7 +370,6 @@ const FormModal = () => {
? { paddingTop: '0.5rem', paddingBottom: '3rem' }
: {};
console.log({ formModal: modifiedData });
return (
<Modal
isOpen={isOpen}
@ -405,6 +407,7 @@ const FormModal = () => {
{NAVLINKS.map((link, index) => {
return (
<HeaderNavLink
isDisabled={state.step === '1' && index === 1}
isActive={state.settingType === link.id}
key={link.id}
{...link}
@ -494,6 +497,12 @@ const FormModal = () => {
);
}
if (input.type === 'spacer') {
return (
<div key="spacer" style={{ height: 20 }}></div>
);
}
if (input.type === 'relation') {
return (
<RelationForm

13
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
View File

@ -99,8 +99,17 @@ const reducer = (state, action) => {
let dataToSet;
if (attributeType === 'dynamiczone') {
dataToSet = { type: 'dynamiczone', components: [] };
if (attributeType === 'component') {
dataToSet = {
type: 'component',
createComponent: true,
componentToCreate: { type: 'component' },
};
} else if (attributeType === 'dynamiczone') {
dataToSet = {
type: 'dynamiczone',
components: [],
};
} else if (attributeType === 'text') {
dataToSet = { type: 'string' };
} else if (attributeType === 'number' || attributeType === 'date') {

50
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/componentForm.js Normal file
View File

@ -0,0 +1,50 @@
import getTrad from '../../../utils/getTrad';
const componentForm = {
base(prefix = '') {
const items = [
[
{
autoFocus: true,
name: `${prefix}name`,
type: 'text',
label: {
id: getTrad('modalForm.attribute.form.base.name'),
},
description: {
id: getTrad('modalForm.attribute.form.base.name.description'),
},
validations: {
required: true,
},
},
{
autoFocus: true,
name: 'category',
type: 'creatableSelect',
label: {
id: getTrad('modalForm.components.create-component.category.label'),
},
validations: {
required: true,
},
},
],
[
{
name: `${prefix}icon`,
type: 'componentIconPicker',
size: 12,
label: {
id: getTrad('modalForm.components.icon.label'),
},
},
],
];
return items;
},
advanced() {},
};
export default componentForm;

96
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
View File

@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
import pluginId from '../../../pluginId';
import getTrad from '../../../utils/getTrad';
import { createComponentUid, createUid, nameToSlug } from './createUid';
import componentForm from './componentForm';
yup.addMethod(yup.mixed, 'defined', function() {
return this.test(
@ -54,6 +55,7 @@ const forms = {
isEditing,
attributeToEditName,
initialData
// componentCategory
) {
const alreadyTakenAttributes = Object.keys(
get(currentSchema, ['schema', 'attributes'], {})
@ -153,6 +155,8 @@ const forms = {
};
switch (attributeType) {
case 'component':
return yup.object();
case 'dynamiczone':
return yup.object().shape({
...commonShape,
@ -494,6 +498,52 @@ const forms = {
],
];
if (type === 'component') {
const itemsToConcat =
data.createComponent === true
? [[{ type: 'spacer' }]].concat(
componentForm.base('componentToCreate.')
)
: [];
return {
items: [
[
{
label: {
id: getTrad('modalForm.attribute.text.type-selection'),
},
name: 'createComponent',
type: 'booleanBox',
size: 12,
options: [
{
headerId: getTrad(
`form.attribute.component.option.create`
),
descriptionId: getTrad(
`form.attribute.component.option.create.description`
),
value: true,
},
{
headerId: getTrad(
`form.attribute.component.option.reuse-existing`
),
descriptionId: getTrad(
`form.attribute.${type}.option.reuse-existing.description`
),
value: false,
},
],
validations: {},
},
],
...itemsToConcat,
],
};
}
if (type === 'text' || type === 'media') {
items.push([
{
@ -724,7 +774,7 @@ const forms = {
.required(errorsTrads.required),
category: yup.string().required(errorsTrads.required),
icon: yup.string().required(errorsTrads.required),
collectionName: yup.string(),
collectionName: yup.string().nullable(),
});
},
form: {
@ -749,50 +799,8 @@ const forms = {
};
},
base() {
const defaultItems = [
[
{
autoFocus: true,
name: 'name',
type: 'text',
label: {
id: getTrad('modalForm.attribute.form.base.name'),
},
description: {
id: getTrad('modalForm.attribute.form.base.name.description'),
},
validations: {
required: true,
},
},
{
autoFocus: true,
name: 'category',
type: 'creatableSelect',
label: {
id: getTrad(
'modalForm.components.create-component.category.label'
),
},
validations: {
required: true,
},
},
],
[
{
name: 'icon',
type: 'componentIconPicker',
size: 12,
label: {
id: getTrad('modalForm.components.icon.label'),
},
},
],
];
return {
items: defaultItems,
items: componentForm.base(),
};
},
},

4
packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
View File

@ -210,6 +210,10 @@
"modalForm.attribute.form.base.name.description": "No space is allowed for the name of the attribute",
"modalForm.attribute.text.type-selection": "Type",
"form.attribute.component.option.create": "Create a new component",
"form.attribute.component.option.create.description": "A component is shared across types, it will be available and accessible in your other components and content types as well.",
"form.attribute.component.option.reuse-existing": "Use an existing component",
"form.attribute.component.option.reuse-existing.description": "Reuse a component already created to keep your data consistent across content types.",
"form.attribute.item.defineRelation.fieldName": "Field name",
"form.attribute.item.settings.name": "Settings",
"form.attribute.item.date.type.date": "date",