migrate date and datetime widgets

This commit is contained in:
Shawn Erquhart
2018-07-24 10:45:12 -04:00
parent 0e61613295
commit e80a407cee
19 changed files with 127 additions and 287 deletions

View File

@ -0,0 +1,35 @@
{
"name": "netlify-cms-widget-date",
"description": "Widget for editing dates in Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-date.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"date",
"dates"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"dependencies": {
"react-datetime": "^2.11.0"
},
"devDependencies": {
"css-loader": "^1.0.0",
"to-string-loader": "^1.1.5",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
},
"peerDependencies": {
"moment": "^2.11.2",
"netlify-cms-ui-default": "^2.0.0-alpha.0",
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-emotion": "^9.2.6"
}
}

View File

@ -0,0 +1,99 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectGlobal } from 'react-emotion';
import DateTime from 'react-datetime';
import dateTimeStyles from 'react-datetime/css/react-datetime.css';
import moment from 'moment';
injectGlobal`
${dateTimeStyles}
`
const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
const DEFAULT_DATETIME_FORMAT = moment.defaultFormat;
export default class DateControl extends React.Component {
static propTypes = {
field: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
classNameWrapper: PropTypes.string.isRequired,
setActiveStyle: PropTypes.func.isRequired,
setInactiveStyle: PropTypes.func.isRequired,
value: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
]),
includeTime: PropTypes.bool,
};
format = this.props.field.get('format');
componentDidMount() {
const { value } = this.props;
/**
* Set the current date as default value if no default value is provided. An
* empty string means the value is intentionally blank.
*/
if (!value && value !== '') {
this.handleChange(new Date());
}
}
// Date is valid if datetime is a moment or Date object otherwise it's a string.
// Handle the empty case, if the user wants to empty the field.
isValidDate = datetime => (moment.isMoment(datetime) || datetime instanceof Date || datetime === '');
handleChange = datetime => {
const { onChange } = this.props;
/**
* Set the date only if it is valid.
*/
if (!this.isValidDate(datetime)) {
return;
}
/**
* Produce a formatted string only if a format is set in the config.
* Otherwise produce a date object.
*/
if (this.format) {
const formattedValue = moment(datetime).format(this.format);
onChange(formattedValue);
} else {
const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
onChange(value);
}
};
onBlur = datetime => {
const { setInactiveStyle } = this.props;
if (!this.isValidDate(datetime)) {
const parsedDate = moment(datetime);
if (parsedDate.isValid()) {
this.handleChange(datetime);
} else {
window.alert('The date you entered is invalid.');
}
}
setInactiveStyle();
};
render() {
const { includeTime, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
return (
<DateTime
timeFormat={!!includeTime}
value={moment(value, this.format)}
onChange={this.handleChange}
onFocus={setActiveStyle}
onBlur={this.onBlur}
inputProps={{ className: classNameWrapper }}
/>
);
}
}

View File

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

View File

@ -0,0 +1,2 @@
export DateControl from './DateControl';
export DatePreview from './DatePreview';

View File

@ -0,0 +1,17 @@
const { getConfig } = require('../../scripts/webpack.js');
const baseWebpackConfig = getConfig();
module.exports = {
...baseWebpackConfig,
module: {
rules: [
...baseWebpackConfig.module.rules,
{
test: /\.css$/,
include: [/react-datetime/],
use: ['to-string-loader', 'css-loader'],
},
],
},
};