Move modal to helper plugin

This commit is contained in:
soupette 2019-09-11 17:13:45 +02:00
parent bf73d73f8e
commit b89c7c056d
20 changed files with 98 additions and 99 deletions

View File

@ -6,7 +6,8 @@
import styled from 'styled-components';
import { colors, sizes } from 'strapi-helper-plugin';
import colors from '../../assets/styles/colors';
import sizes from '../../assets/styles/sizes';
const FooterModal = styled.div`
padding-top: ${sizes.margin * 0.9}px;

View File

@ -10,7 +10,11 @@ describe('<FooterModal />', () => {
it('should render its children', () => {
const Child = () => <div>This is a child</div>;
const wrapper = shallow(<FooterModal><Child /></FooterModal>);
const wrapper = shallow(
<FooterModal>
<Child />
</FooterModal>
);
expect(wrapper.find(Child).exists()).toBe(true);
});

View File

@ -5,8 +5,8 @@
*/
import styled from 'styled-components';
import { colors, sizes } from 'strapi-helper-plugin';
import colors from '../../assets/styles/colors';
import sizes from '../../assets/styles/sizes';
const HeaderModal = styled.div`
color: ${colors.black};

View File

@ -18,6 +18,8 @@ export { default as ErrorBoundary } from './components/ErrorBoundary';
export { default as ExtendComponent } from './components/ExtendComponent';
export { default as GlobalPagination } from './components/GlobalPagination';
export { default as HeaderNav } from './components/HeaderNav';
export { default as HeaderModal } from './components/HeaderModal';
export { default as HeaderModalTitle } from './components/HeaderModalTitle';
export { default as IcoContainer } from './components/IcoContainer';
export { default as InputAddon } from './components/InputAddon';
@ -87,6 +89,10 @@ export {
default as LoadingIndicatorPage,
} from './components/LoadingIndicatorPage';
export { default as Modal } from './components/Modal';
export { default as ModalBody } from './components/BodyModal';
export { default as ModalFooter } from './components/FooterModal';
export { default as ModalForm } from './components/FormModal';
export { default as NotFound } from './components/NotFound';
export { default as OverlayBlocker } from './components/OverlayBlocker';
export { default as PageFooter } from './components/PageFooter';

View File

@ -1,17 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import HeaderModal from '../index';
describe('<HeaderModal />', () => {
it('should not crash', () => {
shallow(<HeaderModal />);
});
it('should render its children', () => {
const Child = () => <div>Some child</div>;
const wrapper = shallow(<HeaderModal><Child /></HeaderModal>);
expect(wrapper.find(Child).exists()).toBe(true);
});
});

View File

@ -1,10 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import HeaderModalTitle from '../index';
describe('<HeaderModalTitle />', () => {
it('should not crash', () => {
shallow(<HeaderModalTitle title="app.utils.defaultTitle" />);
});
});

View File

@ -9,20 +9,23 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { get, isEmpty } from 'lodash';
import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
import {
ButtonModal,
HeaderModal,
HeaderModalTitle,
Modal,
ModalBody,
ModalFooter,
ModalForm,
InputsIndex as Input,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import BodyModal from '../../components/BodyModal';
import ButtonModalPrimary from '../../components/ButtonModalPrimary';
import CustomCheckbox from '../../components/CustomCheckbox';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderNavLink from '../../components/HeaderNavLink';
import WrapperModal from '../../components/WrapperModal';
import Icon from '../../assets/icons/icon_type_ct.png';
import IconGroup from '../../assets/icons/icon_type_groups.png';
@ -318,7 +321,7 @@ class AttributeForm extends React.Component {
const currentForm = this.getCurrentForm();
return (
<WrapperModal
<Modal
isOpen={isOpen}
onClosed={this.handleOnClosed}
onOpened={this.handleOnOpened}
@ -354,12 +357,12 @@ class AttributeForm extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<FormModal>
<BodyModal>
<ModalForm>
<ModalBody>
{showForm && currentForm.map(this.renderInput)}
</BodyModal>
</FormModal>
<FooterModal>
</ModalBody>
</ModalForm>
<ModalFooter>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add.field`}
@ -379,9 +382,9 @@ class AttributeForm extends React.Component {
onClick={this.handleSubmit}
/>
</section>
</FooterModal>
</ModalFooter>
</form>
</WrapperModal>
</Modal>
);
}
}

View File

@ -4,14 +4,13 @@ import { FormattedMessage } from 'react-intl';
import mountWithIntl from 'testUtils/mountWithIntl';
import formatMessagesWithPluginId from 'testUtils/formatMessages';
import { InputsIndex as Input } from 'strapi-helper-plugin';
import { HeaderModalTitle, InputsIndex as Input } from 'strapi-helper-plugin';
// This part is needed if you need to test the lifecycle of a container that contains FormattedMessages
import pluginId from '../../../pluginId';
import pluginTradsEn from '../../../translations/en.json';
import CustomCheckbox from '../../../components/CustomCheckbox';
import HeaderModalTitle from '../../../components/HeaderModalTitle';
import AttributeForm from '../index';
const messages = formatMessagesWithPluginId(pluginId, pluginTradsEn);

View File

@ -7,15 +7,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import {
HeaderModal,
HeaderModalTitle,
Modal,
ModalBody,
ModalFooter,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import AttributeOption from '../../components/AttributeOption';
import BodyModal from '../../components/BodyModal';
import FooterModal from '../../components/FooterModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import WrapperModal from '../../components/WrapperModal';
import Icon from '../../assets/icons/icon_type_ct.png';
import IconGroup from '../../assets/icons/icon_type_groups.png';
@ -164,7 +165,7 @@ class AttributesPickerModal extends React.Component {
const { featureName, featureType, isOpen } = this.props;
return (
<WrapperModal
<Modal
isOpen={isOpen}
onToggle={this.handleToggle}
onClosed={this.handleOnClosed}
@ -185,11 +186,11 @@ class AttributesPickerModal extends React.Component {
</HeaderModalTitle>
</section>
</HeaderModal>
<BodyModal style={{ paddingTop: '0.4rem', paddingBottom: '3rem' }}>
<ModalBody style={{ paddingTop: '0.4rem', paddingBottom: '3rem' }}>
{attributes.map(this.renderAttribute)}
</BodyModal>
<FooterModal />
</WrapperModal>
</ModalBody>
<ModalFooter />
</Modal>
);
}
}

View File

@ -9,17 +9,20 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { get, isEmpty, upperFirst } from 'lodash';
import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
import {
ButtonModal,
HeaderModal,
HeaderModalTitle,
Modal,
ModalBody,
ModalFooter,
InputsIndex as Input,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import BodyModal from '../../components/BodyModal';
import FooterModal from '../../components/FooterModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderNavLink from '../../components/HeaderNavLink';
import WrapperModal from '../../components/WrapperModal';
import Icon from '../../assets/icons/icon_type_ct.png';
import IconGroup from '../../assets/icons/icon_type_groups.png';
@ -226,7 +229,7 @@ class ModelForm extends React.Component {
const currentForm = get(forms, activeTab, forms.base);
return (
<WrapperModal
<Modal
isOpen={isOpen}
onOpened={this.handleOnOpened}
onClosed={this.handleOnClosed}
@ -261,8 +264,8 @@ class ModelForm extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmit}>
<BodyModal>{currentForm.items.map(this.renderInput)}</BodyModal>
<FooterModal>
<ModalBody>{currentForm.items.map(this.renderInput)}</ModalBody>
<ModalFooter>
<section>
<ButtonModal
isSecondary
@ -274,9 +277,9 @@ class ModelForm extends React.Component {
type="submit"
/>
</section>
</FooterModal>
</ModalFooter>
</form>
</WrapperModal>
</Modal>
);
}
}

View File

@ -9,19 +9,23 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { get, isEmpty } from 'lodash';
import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
import {
ButtonModal,
HeaderModal,
HeaderModalTitle,
Modal,
ModalBody,
ModalFooter,
ModalForm,
InputsIndex as Input,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import BodyModal from '../../components/BodyModal';
import ButtonModalPrimary from '../../components/ButtonModalPrimary';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderNavLink from '../../components/HeaderNavLink';
import WrapperModal from '../../components/WrapperModal';
import NaturePicker from './NaturePicker';
import RelationWrapper from './RelationWrapper';
@ -287,7 +291,7 @@ class RelationForm extends React.Component {
: this.renderAdvancedSettings();
return (
<WrapperModal
<Modal
isOpen={isOpen}
onClosed={this.handleOnClosed}
onOpened={this.handleOnOpened}
@ -323,10 +327,10 @@ class RelationForm extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<FormModal>
<BodyModal>{showForm && content}</BodyModal>
</FormModal>
<FooterModal>
<ModalForm>
<ModalBody>{showForm && content}</ModalBody>
</ModalForm>
<ModalFooter>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add.field`}
@ -346,9 +350,9 @@ class RelationForm extends React.Component {
onClick={this.handleSubmit}
/>
</section>
</FooterModal>
</ModalFooter>
</form>
</WrapperModal>
</Modal>
);
}
}

View File

@ -9,22 +9,27 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { get, isEmpty } from 'lodash';
import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
import {
ButtonModal,
HeaderModal,
HeaderModalTitle,
Modal,
ModalBody,
ModalFooter,
ModalForm,
InputsIndex as Input,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import BodyModal from '../../components/BodyModal';
import ButtonModalPrimary from '../../components/ButtonModalPrimary';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderNavLink from '../../components/HeaderNavLink';
import RelationNaturePicker from '../../components/RelationNaturePicker';
import RelationBox from '../../components/RelationBox';
import RelationsWrapper from '../../components/RelationsWrapper';
import WrapperModal from '../../components/WrapperModal';
import Icon from '../../assets/icons/icon_type_ct.png';
import IconGroup from '../../assets/icons/icon_type_groups.png';
@ -295,7 +300,7 @@ class RelationFormGroup extends React.Component {
: this.renderAdvancedSettings();
return (
<WrapperModal
<Modal
isOpen={isOpen}
onClosed={this.handleOnClosed}
onOpened={this.handleOnOpened}
@ -331,12 +336,12 @@ class RelationFormGroup extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<FormModal>
<BodyModal>
<ModalForm>
<ModalBody>
<RelationsWrapper>{showForm && content}</RelationsWrapper>
</BodyModal>
</FormModal>
<FooterModal>
</ModalBody>
</ModalForm>
<ModalFooter>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add.field`}
@ -356,9 +361,9 @@ class RelationFormGroup extends React.Component {
onClick={this.handleSubmit}
/>
</section>
</FooterModal>
</ModalFooter>
</form>
</WrapperModal>
</Modal>
);
}
}