migrate select, number, and text widgets

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

View File

@ -0,0 +1,27 @@
{
"name": "netlify-cms-widget-number",
"description": "Widget for editing numberic values in Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-number.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"number"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
},
"peerDependencies": {
"netlify-cms-ui-default": "^2.0.0-alpha.0",
"prop-types": "^15.5.10",
"react": "^16.4.1"
}
}

View File

@ -0,0 +1,52 @@
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}
/>;
}
}

View File

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
const NumberPreview = ({ value }) => (
<WidgetPreviewContainer>{ value }</WidgetPreviewContainer>
);
NumberPreview.propTypes = {
value: PropTypes.node,
};
export default NumberPreview;

View File

@ -0,0 +1,2 @@
export NumberControl from './NumberControl';
export NumberPreview from './NumberPreview';

View File

@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();