mirror of
https://github.com/strapi/strapi.git
synced 2025-08-08 00:37:38 +00:00
Move modal to helper plugin
This commit is contained in:
parent
bf73d73f8e
commit
b89c7c056d
@ -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;
|
@ -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);
|
||||
});
|
@ -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};
|
@ -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';
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
@ -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" />);
|
||||
});
|
||||
});
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user