gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

migrate select, number, and text widgets

Browse Source
This commit is contained in:
Shawn Erquhart
2018-07-24 22:36:41 -04:00
parent f1a2eb33b4
commit c54605be85
21 changed files with 157 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/netlify-cms-core/package.json
View File

@ -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",

16
packages/netlify-cms-core/scripts/load-extensions.js
View File

@ -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);

52
packages/netlify-cms-core/src/components/EditorWidgets/Number/NumberControl.js
View File

@ -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}
/>;
}
}

10
packages/netlify-cms-core/src/components/EditorWidgets/Number/NumberPreview.js
View File

@ -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,
};

68
packages/netlify-cms-core/src/components/EditorWidgets/Select/SelectControl.js
View File

@ -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>
);
}
}

10
packages/netlify-cms-core/src/components/EditorWidgets/Select/SelectPreview.js
View File

@ -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,
};

52
packages/netlify-cms-core/src/components/EditorWidgets/Text/TextControl.js
View File

@ -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)}
/>
);
}
}

10
packages/netlify-cms-core/src/components/EditorWidgets/Text/TextPreview.js
View File

@ -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,
};

9
packages/netlify-cms-core/src/components/EditorWidgets/index.js
View File

@ -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);