yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 23:24:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created WithFormSection HOC and implemented it in EditFormSection and PopUpForm

Browse Source
This commit is contained in:
cyril lopez 2017-07-25 12:42:03 +02:00
parent cb3ff240ab
commit 1b53a4691d
8 changed files with 113 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/strapi-plugin-settings-manager/admin/src/components/EditFormSection/index.js
View File

@ -7,45 +7,11 @@
import React from 'react';
import { map, isEmpty } from 'lodash';
import { FormattedMessage } from 'react-intl';
// design
import InputNumber from 'components/InputNumber';
import InputText from 'components/InputText';
import InputToggle from 'components/InputToggle';
import InputSelect from 'components/InputSelect';
import InputEnum from 'components/InputEnum';
import config from './config.json';
// HOC Form
import WithFormSection from 'components/WithFormSection';
import styles from './styles.scss';
class EditFormSection extends React.Component { // eslint-disable-line react/prefer-stateless-function
renderInput = (props, key) => {
const inputs = {
string: InputText,
number: InputNumber,
boolean: InputToggle,
enum: InputEnum,
select: InputSelect,
};
const Input = inputs[props.type];
const customBootstrapClass = config[props.target] || '';
const inputValue = this.props.values[props.target];
// retrieve options for the select input
const selectOptions = props.type === 'enum' ? props.items : [];
return (
<Input
customBootstrapClass={customBootstrapClass}
key={key}
handleChange={this.props.handleChange}
name={props.name}
target={props.target}
isChecked={inputValue}
selectOptions={selectOptions}
validations={props.validations}
value={inputValue}
/>
);
}
render() {
const sectionName = isEmpty(this.props.section.name) ? '' : <FormattedMessage {...{id: this.props.section.name}} />;
@ -60,7 +26,7 @@ class EditFormSection extends React.Component { // eslint-disable-line react/pre
</div>
<form>
{map(this.props.section.items, (item, key) => (
this.renderInput(item, key)
this.props.renderInput(item, key)
))}
</form>
</div>
@ -71,9 +37,8 @@ class EditFormSection extends React.Component { // eslint-disable-line react/pre
}
EditFormSection.propTypes = {
handleChange: React.PropTypes.func.isRequired,
renderInput: React.PropTypes.func,
section: React.PropTypes.object,
values: React.PropTypes.object,
};
export default EditFormSection;
export default WithFormSection(EditFormSection); // eslint-disable-line new-cap

6
packages/strapi-plugin-settings-manager/admin/src/components/List/index.js
View File

@ -10,7 +10,7 @@
* prevent from displaying the List button
* - renderRow: function
* overrides the default rendering of the List tr (we can pass customs components there)
* - sections: array the elements to display
* - listItems: array the elements to display
* - handleListPopButtonSave: func
*
*/
@ -68,7 +68,7 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele
<div className="col-md-12">
<table className={` table ${styles.listNoBorder}`}>
<tbody>
{map(this.props.sections, (value, key) => {
{map(this.props.listItems, (value, key) => {
// handle custom row displaying
if (this.props.renderRow) {
return this.props.renderRow(value, key, styles);
@ -113,6 +113,7 @@ List.propTypes = {
handlei18n: React.PropTypes.bool,
handleListPopUpSubmit: React.PropTypes.func,
listButtonLabel: React.PropTypes.string,
listItems: React.PropTypes.array,
listTitle: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
@ -122,7 +123,6 @@ List.propTypes = {
React.PropTypes.bool,
React.PropTypes.func,
]),
sections: React.PropTypes.array,
};
export default List;

28
packages/strapi-plugin-settings-manager/admin/src/components/PopUpForm/index.js
View File

@ -5,16 +5,40 @@
*/
import React from 'react';
import { isEmpty } from 'lodash';
import { FormattedMessage } from 'react-intl';
import WithFormSection from 'components/WithFormSection';
import styles from './styles.scss';
class PopUpForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
console.log(this.props);
let formName;
if (this.props.slug === 'languages') {
formName = <FormattedMessage {...{id: 'form.i18n.choose'}} />;
} else {
formName = isEmpty(this.props.sections.name) ? '' : <FormattedMessage {...{id: this.props.sections.name}} />;
}
return (
<div className={styles.popUpForm}>
<div className="container-fluid">
<div className="row">
<div className="col-sm-12">
<span>{formName}</span>
</div>
</div>
</div>
</div>
);
}
}
export default PopUpForm;
PopUpForm.propTypes = {
sections: React.PropTypes.object,
slug: React.PropTypes.string,
};
export default WithFormSection(PopUpForm); // eslint-disable-line new-cap

0
packages/strapi-plugin-settings-manager/admin/src/components/EditFormSection/config.json → packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/config.json
View File

61
packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js Normal file
View File

@ -0,0 +1,61 @@
/**
*
* WithFormSection
*
*/
import React from 'react';
import InputNumber from 'components/InputNumber';
import InputText from 'components/InputText';
import InputToggle from 'components/InputToggle';
import InputSelect from 'components/InputSelect';
import InputEnum from 'components/InputEnum';
import config from './config.json';
const WithFormSection = (InnerComponent) => class extends React.Component {
static propTypes = {
handleChange: React.PropTypes.func.isRequired,
values: React.PropTypes.object,
}
renderInput = (props, key) => {
const inputs = {
string: InputText,
number: InputNumber,
boolean: InputToggle,
enum: InputEnum,
select: InputSelect,
};
const Input = inputs[props.type];
const customBootstrapClass = config[props.target] || '';
const inputValue = this.props.values[props.target];
// retrieve options for the select input
const selectOptions = props.type === 'enum' ? props.items : [];
return (
<Input
customBootstrapClass={customBootstrapClass}
key={key}
handleChange={this.props.handleChange}
name={props.name}
target={props.target}
isChecked={inputValue}
selectOptions={selectOptions}
validations={props.validations}
value={inputValue}
/>
);
}
render() {
return (
<InnerComponent
{...this.props}
renderInput={this.renderInput}
/>
);
}
}
export default WithFormSection;

3
packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/styles.scss Normal file
View File

@ -0,0 +1,3 @@
.withForm { /* stylelint-disable */
}

11
packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/tests/index.test.js Normal file
View File

@ -0,0 +1,11 @@
// import WithForm from '../index';
import expect from 'expect';
// import { shallow } from 'enzyme';
// import React from 'react';
describe('<WithFormSection />', () => {
it('Expect to have unit tests specified', () => {
expect(true).toEqual(false);
});
});

5
packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
View File

@ -186,11 +186,14 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
const Component = this.components[specificComponent];
const renderRow = this.props.params.slug === 'languages' ? this.renderRowLanguage : false;
const listTitle = this.props.params.slug === 'languages' ? this.renderListTitle() : '';
// sections is the props used by EditForm in case of list of table rendering we need to change its value
const sections = this.props.params.slug === 'languages' ? this.props.home.listLanguages : this.props.home.configsDisplay.sections;
const listButtonLabel = this.props.params.slug === 'languages' ? this.renderListButtonLabel() : '';
return (
<Component
sections={this.props.home.configsDisplay.sections}
sections={sections}
listItems={this.props.home.configsDisplay.sections}
values={this.props.home.modifiedData}
handleChange={this.handleChange}
handleCancel={this.handleCancel}