migrate select, number, and text widgets
This commit is contained in:
@ -57,7 +57,6 @@
|
||||
"react-scroll-sync": "^0.4.0",
|
||||
"react-sortable-hoc": "^0.6.8",
|
||||
"react-split-pane": "^0.1.82",
|
||||
"react-textarea-autosize": "^5.2.0",
|
||||
"react-toggled": "^1.1.2",
|
||||
"react-topbar-progress-indicator": "^2.0.0",
|
||||
"react-transition-group": "^2.2.1",
|
||||
|
@ -11,11 +11,11 @@ import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
|
||||
import { ListControl, ListPreview } from 'netlify-cms-widget-list';
|
||||
import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
|
||||
import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
|
||||
import { StringControl, StringPreview } from 'netlify-cms-widget-string';
|
||||
// import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
|
||||
// import { TextControl, TextPreview } from 'netlify-cms-widget-text';
|
||||
// import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
|
||||
import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
|
||||
// import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
|
||||
import { StringControl, StringPreview } from 'netlify-cms-widget-string';
|
||||
import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
|
||||
import { TextControl, TextPreview } from 'netlify-cms-widget-text';
|
||||
import image from 'netlify-cms-editor-component-image';
|
||||
|
||||
registerBackend('git-gateway', GitGatewayBackend);
|
||||
@ -29,10 +29,10 @@ registerWidget('file', FileControl, FilePreview);
|
||||
registerWidget('image', ImageControl, ImagePreview);
|
||||
registerWidget('list', ListControl, ListPreview);
|
||||
registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
registerWidget('number', NumberControl, NumberPreview);
|
||||
registerWidget('object', ObjectControl, ObjectPreview);
|
||||
registerWidget('string', StringControl, StringPreview);
|
||||
// registerWidget('text', TextControl, TextPreview);
|
||||
// registerWidget('number', NumberControl, NumberPreview);
|
||||
// registerWidget('select', SelectControl, SelectPreview);
|
||||
// registerWidget('relation', RelationControl, RelationPreview);
|
||||
registerWidget('string', StringControl, StringPreview);
|
||||
registerWidget('text', TextControl, TextPreview);
|
||||
registerWidget('select', SelectControl, SelectPreview);
|
||||
registerEditorComponent(image);
|
||||
|
@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class NumberControl extends React.Component {
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
classNameWrapper: PropTypes.string.isRequired,
|
||||
setActiveStyle: PropTypes.func.isRequired,
|
||||
setInactiveStyle: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
forID: PropTypes.string,
|
||||
valueType: PropTypes.string,
|
||||
step: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
value: '',
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
const valueType = this.props.field.get('valueType');
|
||||
const { onChange } = this.props;
|
||||
if(valueType === 'int') {
|
||||
onChange(parseInt(e.target.value, 10));
|
||||
} else if(valueType === 'float') {
|
||||
onChange(parseFloat(e.target.value));
|
||||
} else {
|
||||
onChange(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { field, value, classNameWrapper, forID, setActiveStyle, setInactiveStyle } = this.props;
|
||||
const min = field.get('min', '');
|
||||
const max = field.get('max', '');
|
||||
const step = field.get('step', field.get('valueType') === 'int' ? 1 : '');
|
||||
return <input
|
||||
type="number"
|
||||
id={forID}
|
||||
className={classNameWrapper}
|
||||
onFocus={setActiveStyle}
|
||||
onBlur={setInactiveStyle}
|
||||
value={value || ''}
|
||||
step={step}
|
||||
min={min}
|
||||
max={max}
|
||||
onChange={this.handleChange}
|
||||
/>;
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default function NumberPreview({ value }) {
|
||||
return <div className="nc-widgetPreview">{value}</div>;
|
||||
}
|
||||
|
||||
NumberPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
};
|
@ -1,68 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { Map } from 'immutable';
|
||||
|
||||
export default class SelectControl extends React.Component {
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
forID: PropTypes.string.isRequired,
|
||||
classNameWrapper: PropTypes.string.isRequired,
|
||||
setActiveStyle: PropTypes.func.isRequired,
|
||||
setInactiveStyle: PropTypes.func.isRequired,
|
||||
field: ImmutablePropTypes.contains({
|
||||
options: ImmutablePropTypes.listOf(PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
ImmutablePropTypes.contains({
|
||||
label: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
}),
|
||||
])).isRequired,
|
||||
}),
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
value: '',
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
this.props.onChange(e.target.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { field, value, forID, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
|
||||
const fieldOptions = field.get('options');
|
||||
|
||||
if (!fieldOptions) {
|
||||
return <div>Error rendering select control for {field.get('name')}: No options</div>;
|
||||
}
|
||||
|
||||
const options = [
|
||||
...(field.get('default', false) ? [] : [{ label: '', value: '' }]),
|
||||
...fieldOptions.map((option) => {
|
||||
if (typeof option === 'string') {
|
||||
return { label: option, value: option };
|
||||
}
|
||||
return Map.isMap(option) ? option.toJS() : option;
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<select
|
||||
id={forID}
|
||||
value={value || ''}
|
||||
onChange={this.handleChange}
|
||||
className={classNameWrapper}
|
||||
onFocus={setActiveStyle}
|
||||
onBlur={setInactiveStyle}
|
||||
>
|
||||
{
|
||||
options.map(
|
||||
(option, idx) => <option key={idx} value={option.value}>{option.label}</option>
|
||||
)
|
||||
}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default function SelectPreview({ value }) {
|
||||
return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
|
||||
}
|
||||
|
||||
SelectPreview.propTypes = {
|
||||
value: PropTypes.string,
|
||||
};
|
@ -1,52 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Textarea from 'react-textarea-autosize';
|
||||
|
||||
export default class TextControl extends React.Component {
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
forID: PropTypes.string,
|
||||
value: PropTypes.node,
|
||||
classNameWrapper: PropTypes.string.isRequired,
|
||||
setActiveStyle: PropTypes.func.isRequired,
|
||||
setInactiveStyle: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
value: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Always update to ensure `react-textarea-autosize` properly calculates
|
||||
* height. Certain situations, such as this widget being nested in a list
|
||||
* item that gets rearranged, can leave the textarea in a minimal height
|
||||
* state. Always updating should generally be low cost, but this should be
|
||||
* optimized in the future.
|
||||
*/
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
forID,
|
||||
value,
|
||||
onChange,
|
||||
classNameWrapper,
|
||||
setActiveStyle,
|
||||
setInactiveStyle,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Textarea
|
||||
id={forID}
|
||||
value={value || ''}
|
||||
className={classNameWrapper}
|
||||
onFocus={setActiveStyle}
|
||||
onBlur={setInactiveStyle}
|
||||
style={{ minHeight: '140px' }}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default function TextPreview({ value }) {
|
||||
return <div className="nc-widgetPreview">{value}</div>;
|
||||
}
|
||||
|
||||
TextPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
};
|
@ -1,17 +1,8 @@
|
||||
import { registerWidget } from 'Lib/registry';
|
||||
import UnknownControl from './Unknown/UnknownControl';
|
||||
import UnknownPreview from './Unknown/UnknownPreview';
|
||||
import NumberControl from './Number/NumberControl';
|
||||
import NumberPreview from './Number/NumberPreview';
|
||||
import TextControl from './Text/TextControl';
|
||||
import TextPreview from './Text/TextPreview';
|
||||
import SelectControl from './Select/SelectControl';
|
||||
import SelectPreview from './Select/SelectPreview';
|
||||
import RelationControl from './Relation/RelationControl';
|
||||
import RelationPreview from './Relation/RelationPreview';
|
||||
|
||||
registerWidget('text', TextControl, TextPreview);
|
||||
registerWidget('number', NumberControl, NumberPreview);
|
||||
registerWidget('select', SelectControl, SelectPreview);
|
||||
registerWidget('relation', RelationControl, RelationPreview);
|
||||
registerWidget('unknown', UnknownControl, UnknownPreview);
|
||||
|
Reference in New Issue
Block a user