mirror of
https://github.com/strapi/strapi.git
synced 2025-09-24 16:04:54 +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,
|
||||
value,
|
||||
} = this.props;
|
||||
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||
|
||||
return (
|
||||
<div className={cn(styles.inputAddon, 'input-group', !isEmpty(className) && className)} style={style}>
|
||||
@ -60,7 +61,7 @@ class InputAddon extends React.Component {
|
||||
</span>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(message) => (
|
||||
<input
|
||||
autoFocus={autoFocus}
|
||||
|
@ -18,9 +18,10 @@ import styles from './styles.scss';
|
||||
/* eslint-disable react/jsx-boolean-value */
|
||||
function InputDate(props) {
|
||||
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 (
|
||||
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(placeholder) => (
|
||||
<DateTime
|
||||
dateFormat='YYYY-MM-DD'
|
||||
|
@ -39,6 +39,7 @@ class InputEmail extends React.Component {
|
||||
tabIndex,
|
||||
value,
|
||||
} = this.props;
|
||||
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||
|
||||
return (
|
||||
<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,
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(message) => (
|
||||
<input
|
||||
autoFocus={autoFocus}
|
||||
|
@ -8,8 +8,10 @@ import styles from './styles.scss';
|
||||
|
||||
/* eslint-disable jsx-a11y/no-autofocus */
|
||||
function InputNumber(props) {
|
||||
const formattedPlaceholder = props.placeholder === '' ? 'app.utils.placeholder.defaultMessage' : props.placeholder;
|
||||
|
||||
return (
|
||||
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(message) => (
|
||||
<input
|
||||
autoFocus={props.autoFocus}
|
||||
|
@ -34,12 +34,12 @@ class InputPassword extends React.Component {
|
||||
tabIndex,
|
||||
value,
|
||||
} = this.props;
|
||||
|
||||
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||
const eyeColor = this.state.showPassword ? { color: 'black' } : { color: '#9EA7B8' };
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(message) => (
|
||||
<input
|
||||
autoComplete="new-password"
|
||||
|
@ -40,6 +40,7 @@ class InputSearch extends React.Component {
|
||||
tabIndex,
|
||||
value,
|
||||
} = this.props;
|
||||
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
|
||||
|
||||
return (
|
||||
<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,
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage id={placeholder} defaultMessage={placeholder}>
|
||||
<FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
|
||||
{(message) => (
|
||||
<input
|
||||
autoFocus={autoFocus}
|
||||
|
@ -12,8 +12,6 @@ import {
|
||||
has,
|
||||
isEmpty,
|
||||
isFunction,
|
||||
merge,
|
||||
omit,
|
||||
upperFirst,
|
||||
} from 'lodash';
|
||||
|
||||
@ -60,26 +58,6 @@ const getInputType = (type = '') => {
|
||||
};
|
||||
|
||||
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) => {
|
||||
const index = findIndex(this.props.formErrors, ['name', attr]);
|
||||
return index !== -1 ? this.props.formErrors[index].errors : [];
|
||||
@ -90,14 +68,17 @@ class Edit extends React.PureComponent {
|
||||
* @param {String} attr [description]
|
||||
* @return {Object} Object containing the Input's label customBootstrapClass, ...
|
||||
*/
|
||||
getInputLayout = (attr) => (
|
||||
Object.keys(get(this.state.currentLayout, attr, {})).reduce((acc, current) => {
|
||||
acc[current] = isFunction(this.state.currentLayout[attr][current]) ?
|
||||
this.state.currentLayout[attr][current](this) :
|
||||
this.state.currentLayout[attr][current];
|
||||
getInputLayout = (attr) => {
|
||||
const { layout } = this.props;
|
||||
|
||||
return Object.keys(get(layout, ['attributes', attr], {})).reduce((acc, current) => {
|
||||
acc[current] = isFunction(layout.attributes[attr][current]) ?
|
||||
layout.attributes[attr][current](this) :
|
||||
layout.attributes[attr][current];
|
||||
|
||||
return acc;
|
||||
}, {})
|
||||
)
|
||||
}, {});
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieve the input's validations
|
||||
@ -132,15 +113,14 @@ class Edit extends React.PureComponent {
|
||||
|
||||
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 = (displayedFields) => Object.keys(displayedFields);
|
||||
orderAttributes = () => get(this.props.schema, ['editDisplay', 'fields'], []);
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div className={styles.form}>
|
||||
<div className="row">
|
||||
{this.orderAttributes(this.state.displayedFields).map((attr, key) => {
|
||||
const details = this.state.displayedFields[attr];
|
||||
{this.orderAttributes().map((attr, key) => {
|
||||
const details = get(this.props.schema, ['editDisplay', 'availableFields', attr]);
|
||||
// Retrieve the input's bootstrapClass from the layout
|
||||
const layout = this.getInputLayout(attr);
|
||||
const appearance = get(layout, 'appearance');
|
||||
@ -159,7 +139,7 @@ class Edit extends React.PureComponent {
|
||||
name={attr}
|
||||
onBlur={this.props.onBlur}
|
||||
onChange={this.props.onChange}
|
||||
placeholder={get(layout, 'placeholder') || details.placeholder}
|
||||
placeholder={get(layout, 'placeholder') || details.placeholder || ''}
|
||||
resetProps={this.props.resetProps}
|
||||
selectOptions={get(this.props.attributes, [attr, 'enum'])}
|
||||
type={type}
|
||||
|
Loading…
x
Reference in New Issue
Block a user