mirror of
https://github.com/strapi/strapi.git
synced 2025-12-13 16:08:11 +00:00
Add sortfield logic in editPage
This commit is contained in:
parent
4916f9277b
commit
02acfefd01
@ -43,6 +43,7 @@ class InputAddon extends React.Component {
|
|||||||
tabIndex,
|
tabIndex,
|
||||||
value,
|
value,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(styles.inputAddon, 'input-group', !isEmpty(className) && className)} style={style}>
|
<div className={cn(styles.inputAddon, 'input-group', !isEmpty(className) && className)} style={style}>
|
||||||
@ -60,7 +61,7 @@ class InputAddon extends React.Component {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</FormattedMessage>
|
</FormattedMessage>
|
||||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<input
|
<input
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
|
|||||||
@ -18,9 +18,10 @@ import styles from './styles.scss';
|
|||||||
/* eslint-disable react/jsx-boolean-value */
|
/* eslint-disable react/jsx-boolean-value */
|
||||||
function InputDate(props) {
|
function InputDate(props) {
|
||||||
const value = isObject(props.value) && props.value._isAMomentObject === true ? props.value : moment(props.value);
|
const value = isObject(props.value) && props.value._isAMomentObject === true ? props.value : moment(props.value);
|
||||||
|
const formattedPlaceholder = props.placeholder === '' ? 'app.utils.placeholder.defaultMessage' : props.placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(placeholder) => (
|
{(placeholder) => (
|
||||||
<DateTime
|
<DateTime
|
||||||
dateFormat='YYYY-MM-DD'
|
dateFormat='YYYY-MM-DD'
|
||||||
|
|||||||
@ -39,6 +39,7 @@ class InputEmail extends React.Component {
|
|||||||
tabIndex,
|
tabIndex,
|
||||||
value,
|
value,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(styles.inputEmail, 'input-group', !isEmpty(className) && className)} style={style}>
|
<div className={cn(styles.inputEmail, 'input-group', !isEmpty(className) && className)} style={style}>
|
||||||
@ -50,7 +51,7 @@ class InputEmail extends React.Component {
|
|||||||
!deactivateErrorHighlight && error && styles.errorAddon,
|
!deactivateErrorHighlight && error && styles.errorAddon,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<input
|
<input
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
|
|||||||
@ -8,8 +8,10 @@ import styles from './styles.scss';
|
|||||||
|
|
||||||
/* eslint-disable jsx-a11y/no-autofocus */
|
/* eslint-disable jsx-a11y/no-autofocus */
|
||||||
function InputNumber(props) {
|
function InputNumber(props) {
|
||||||
|
const formattedPlaceholder = props.placeholder === '' ? 'app.utils.placeholder.defaultMessage' : props.placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<input
|
<input
|
||||||
autoFocus={props.autoFocus}
|
autoFocus={props.autoFocus}
|
||||||
|
|||||||
@ -34,12 +34,12 @@ class InputPassword extends React.Component {
|
|||||||
tabIndex,
|
tabIndex,
|
||||||
value,
|
value,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||||
const eyeColor = this.state.showPassword ? { color: 'black' } : { color: '#9EA7B8' };
|
const eyeColor = this.state.showPassword ? { color: 'black' } : { color: '#9EA7B8' };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<input
|
<input
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
|
|||||||
@ -40,6 +40,7 @@ class InputSearch extends React.Component {
|
|||||||
tabIndex,
|
tabIndex,
|
||||||
value,
|
value,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(styles.inputSearch, 'input-group', !isEmpty(className) && className)} style={style}>
|
<div className={cn(styles.inputSearch, 'input-group', !isEmpty(className) && className)} style={style}>
|
||||||
@ -51,7 +52,7 @@ class InputSearch extends React.Component {
|
|||||||
!deactivateErrorHighlight && error && styles.errorAddon,
|
!deactivateErrorHighlight && error && styles.errorAddon,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||||
{(message) => (
|
{(message) => (
|
||||||
<input
|
<input
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
|
|||||||
@ -12,8 +12,6 @@ import {
|
|||||||
has,
|
has,
|
||||||
isEmpty,
|
isEmpty,
|
||||||
isFunction,
|
isFunction,
|
||||||
merge,
|
|
||||||
omit,
|
|
||||||
upperFirst,
|
upperFirst,
|
||||||
} from 'lodash';
|
} from 'lodash';
|
||||||
|
|
||||||
@ -60,26 +58,6 @@ const getInputType = (type = '') => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
class Edit extends React.PureComponent {
|
class Edit extends React.PureComponent {
|
||||||
state = { currentLayout: {}, displayedFields: {} };
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setLayout(this.props);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (isEmpty(this.props.layout) && !isEmpty(nextProps.layout)) {
|
|
||||||
this.setLayout(nextProps);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setLayout = (props) => {
|
|
||||||
// const currentLayout = get(props.layout, [props.modelName, 'attributes']);
|
|
||||||
const currentLayout = get(props.layout, ['attributes']);
|
|
||||||
const displayedFields = merge(this.getUploadRelations(props), get(currentLayout), omit(props.schema.fields, 'id'));
|
|
||||||
|
|
||||||
this.setState({ currentLayout, displayedFields });
|
|
||||||
}
|
|
||||||
|
|
||||||
getInputErrors = (attr) => {
|
getInputErrors = (attr) => {
|
||||||
const index = findIndex(this.props.formErrors, ['name', attr]);
|
const index = findIndex(this.props.formErrors, ['name', attr]);
|
||||||
return index !== -1 ? this.props.formErrors[index].errors : [];
|
return index !== -1 ? this.props.formErrors[index].errors : [];
|
||||||
@ -90,14 +68,17 @@ class Edit extends React.PureComponent {
|
|||||||
* @param {String} attr [description]
|
* @param {String} attr [description]
|
||||||
* @return {Object} Object containing the Input's label customBootstrapClass, ...
|
* @return {Object} Object containing the Input's label customBootstrapClass, ...
|
||||||
*/
|
*/
|
||||||
getInputLayout = (attr) => (
|
getInputLayout = (attr) => {
|
||||||
Object.keys(get(this.state.currentLayout, attr, {})).reduce((acc, current) => {
|
const { layout } = this.props;
|
||||||
acc[current] = isFunction(this.state.currentLayout[attr][current]) ?
|
|
||||||
this.state.currentLayout[attr][current](this) :
|
return Object.keys(get(layout, ['attributes', attr], {})).reduce((acc, current) => {
|
||||||
this.state.currentLayout[attr][current];
|
acc[current] = isFunction(layout.attributes[attr][current]) ?
|
||||||
|
layout.attributes[attr][current](this) :
|
||||||
|
layout.attributes[attr][current];
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, {})
|
}, {});
|
||||||
)
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Retrieve the input's validations
|
* Retrieve the input's validations
|
||||||
@ -132,15 +113,14 @@ class Edit extends React.PureComponent {
|
|||||||
|
|
||||||
fileRelationAllowMultipleUpload = (relationName) => has(this.props.schema, ['relations', relationName, 'collection']);
|
fileRelationAllowMultipleUpload = (relationName) => has(this.props.schema, ['relations', relationName, 'collection']);
|
||||||
|
|
||||||
// orderAttributes = (displayedFields) => Object.keys(displayedFields).sort(name => Object.keys(this.getUploadRelations(this.props)).includes(name));
|
orderAttributes = () => get(this.props.schema, ['editDisplay', 'fields'], []);
|
||||||
orderAttributes = (displayedFields) => Object.keys(displayedFields);
|
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
return (
|
return (
|
||||||
<div className={styles.form}>
|
<div className={styles.form}>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{this.orderAttributes(this.state.displayedFields).map((attr, key) => {
|
{this.orderAttributes().map((attr, key) => {
|
||||||
const details = this.state.displayedFields[attr];
|
const details = get(this.props.schema, ['editDisplay', 'availableFields', attr]);
|
||||||
// Retrieve the input's bootstrapClass from the layout
|
// Retrieve the input's bootstrapClass from the layout
|
||||||
const layout = this.getInputLayout(attr);
|
const layout = this.getInputLayout(attr);
|
||||||
const appearance = get(layout, 'appearance');
|
const appearance = get(layout, 'appearance');
|
||||||
@ -159,7 +139,7 @@ class Edit extends React.PureComponent {
|
|||||||
name={attr}
|
name={attr}
|
||||||
onBlur={this.props.onBlur}
|
onBlur={this.props.onBlur}
|
||||||
onChange={this.props.onChange}
|
onChange={this.props.onChange}
|
||||||
placeholder={get(layout, 'placeholder') || details.placeholder}
|
placeholder={get(layout, 'placeholder') || details.placeholder || ''}
|
||||||
resetProps={this.props.resetProps}
|
resetProps={this.props.resetProps}
|
||||||
selectOptions={get(this.props.attributes, [attr, 'enum'])}
|
selectOptions={get(this.props.attributes, [attr, 'enum'])}
|
||||||
type={type}
|
type={type}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user