migrate date and datetime widgets
This commit is contained in:
35
packages/netlify-cms-widget-date/package.json
Normal file
35
packages/netlify-cms-widget-date/package.json
Normal 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"
|
||||
}
|
||||
}
|
99
packages/netlify-cms-widget-date/src/DateControl.js
Normal file
99
packages/netlify-cms-widget-date/src/DateControl.js
Normal 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 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
13
packages/netlify-cms-widget-date/src/DatePreview.js
Normal file
13
packages/netlify-cms-widget-date/src/DatePreview.js
Normal 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;
|
2
packages/netlify-cms-widget-date/src/index.js
Normal file
2
packages/netlify-cms-widget-date/src/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export DateControl from './DateControl';
|
||||
export DatePreview from './DatePreview';
|
17
packages/netlify-cms-widget-date/webpack.config.js
Normal file
17
packages/netlify-cms-widget-date/webpack.config.js
Normal 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'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
Reference in New Issue
Block a user