migrate date and datetime widgets
This commit is contained in:
@ -45,7 +45,6 @@
|
||||
"react": "^16.4.1",
|
||||
"react-aria-menubutton": "^5.1.0",
|
||||
"react-autosuggest": "^9.3.2",
|
||||
"react-datetime": "^2.11.0",
|
||||
"react-dnd": "^2.5.4",
|
||||
"react-dnd-html5-backend": "^2.5.4",
|
||||
"react-dom": "^16.0.0",
|
||||
|
@ -5,12 +5,12 @@ import { GitGatewayBackend } from 'netlify-cms-backend-git-gateway';
|
||||
import { TestBackend } from 'netlify-cms-backend-test';
|
||||
import { BooleanControl } from 'netlify-cms-widget-boolean';
|
||||
import { StringControl, StringPreview } from 'netlify-cms-widget-string';
|
||||
import { DateControl, DatePreview } from 'netlify-cms-widget-date';
|
||||
import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
|
||||
// import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
|
||||
// import { TextControl, TextPreview } from 'netlify-cms-widget-text';
|
||||
// import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
|
||||
// import { FileControl, FilePreview } from 'netlify-cms-widget-file';
|
||||
// import { DateControl, DatePreview } from 'netlify-cms-widget-date';
|
||||
// import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
|
||||
// import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
|
||||
// import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
|
||||
// import { ListControl, ListPreview } from 'netlify-cms-widget-list';
|
||||
@ -23,6 +23,8 @@ registerBackend('github', GitHubBackend);
|
||||
registerBackend('gitlab', GitLabBackend);
|
||||
registerBackend('test-repo', TestBackend);
|
||||
registerWidget('boolean', BooleanControl);
|
||||
registerWidget('date', DateControl, DatePreview);
|
||||
registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
registerWidget('string', StringControl, StringPreview);
|
||||
// registerWidget('text', TextControl, TextPreview);
|
||||
// registerWidget('number', NumberControl, NumberPreview);
|
||||
@ -30,8 +32,6 @@ registerWidget('string', StringControl, StringPreview);
|
||||
// registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
// registerWidget('image', ImageControl, ImagePreview);
|
||||
// registerWidget('file', FileControl, FilePreview);
|
||||
// registerWidget('date', DateControl, DatePreview);
|
||||
// registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
// registerWidget('select', SelectControl, SelectPreview);
|
||||
// registerWidget('object', ObjectControl, ObjectPreview);
|
||||
// registerWidget('relation', RelationControl, RelationPreview);
|
||||
|
@ -53,7 +53,7 @@ const styles = {
|
||||
width: 100%;
|
||||
padding: ${lengths.inputPadding};
|
||||
margin: 0;
|
||||
border: ${borders.textFieldBorder};
|
||||
border: ${borders.textField};
|
||||
border-radius: ${lengths.borderRadius};
|
||||
border-top-left-radius: 0;
|
||||
outline: 0;
|
||||
|
@ -1,93 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import DateTime from 'react-datetime';
|
||||
import moment from 'moment';
|
||||
|
||||
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 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default function DatePreview({ value }) {
|
||||
return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
|
||||
}
|
||||
|
||||
DatePreview.propTypes = {
|
||||
value: PropTypes.object,
|
||||
};
|
@ -1 +0,0 @@
|
||||
@import "./ReactDatetime.css";
|
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import DateControl from 'EditorWidgets/Date/DateControl';
|
||||
|
||||
export default class DateTimeControl 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,
|
||||
]),
|
||||
format: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
field,
|
||||
format,
|
||||
onChange,
|
||||
value,
|
||||
classNameWrapper,
|
||||
setActiveStyle,
|
||||
setInactiveStyle
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<DateControl
|
||||
onChange={onChange}
|
||||
format={format}
|
||||
value={value}
|
||||
field={field}
|
||||
classNameWrapper={classNameWrapper}
|
||||
setActiveStyle={setActiveStyle}
|
||||
setInactiveStyle={setInactiveStyle}
|
||||
includeTime
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default function DateTimePreview({ value }) {
|
||||
return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
|
||||
}
|
||||
|
||||
DateTimePreview.propTypes = {
|
||||
value: PropTypes.object,
|
||||
};
|
@ -1,210 +0,0 @@
|
||||
.rdt {
|
||||
position: relative;
|
||||
}
|
||||
.rdtPicker {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
padding: 4px;
|
||||
margin-top: 1px;
|
||||
z-index: 99999 !important;
|
||||
background: #fff;
|
||||
border: 2px solid var(--colorGray);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
|
||||
}
|
||||
.rdtOpen .rdtPicker {
|
||||
display: block;
|
||||
}
|
||||
.rdtStatic .rdtPicker {
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.rdtPicker .rdtTimeToggle {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rdtPicker table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.rdtPicker td,
|
||||
.rdtPicker th {
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
}
|
||||
.rdtPicker td {
|
||||
cursor: pointer;
|
||||
}
|
||||
.rdtPicker td.rdtDay:hover,
|
||||
.rdtPicker td.rdtHour:hover,
|
||||
.rdtPicker td.rdtMinute:hover,
|
||||
.rdtPicker td.rdtSecond:hover,
|
||||
.rdtPicker .rdtTimeToggle:hover {
|
||||
background: #eeeeee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rdtPicker td.rdtOld,
|
||||
.rdtPicker td.rdtNew {
|
||||
color: #999999;
|
||||
}
|
||||
.rdtPicker td.rdtToday {
|
||||
position: relative;
|
||||
}
|
||||
.rdtPicker td.rdtToday:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #428bca;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
.rdtPicker td.rdtActive,
|
||||
.rdtPicker td.rdtActive:hover {
|
||||
background-color: #428bca;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.rdtPicker td.rdtActive.rdtToday:before {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.rdtPicker td.rdtDisabled,
|
||||
.rdtPicker td.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rdtPicker td span.rdtOld {
|
||||
color: #999999;
|
||||
}
|
||||
.rdtPicker td span.rdtDisabled,
|
||||
.rdtPicker td span.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rdtPicker th {
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
}
|
||||
.rdtPicker .dow {
|
||||
width: 14.2857%;
|
||||
border-bottom: none;
|
||||
}
|
||||
.rdtPicker th.rdtSwitch {
|
||||
width: 100px;
|
||||
}
|
||||
.rdtPicker th.rdtNext,
|
||||
.rdtPicker th.rdtPrev {
|
||||
font-size: 21px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.rdtPrev span,
|
||||
.rdtNext span {
|
||||
display: block;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rdtPicker th.rdtDisabled,
|
||||
.rdtPicker th.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rdtPicker thead tr:first-child th {
|
||||
cursor: pointer;
|
||||
}
|
||||
.rdtPicker thead tr:first-child th:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.rdtPicker tfoot {
|
||||
border-top: 1px solid #f9f9f9;
|
||||
}
|
||||
|
||||
.rdtPicker button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rdtPicker button:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.rdtPicker thead button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
td.rdtMonth,
|
||||
td.rdtYear {
|
||||
height: 50px;
|
||||
width: 25%;
|
||||
cursor: pointer;
|
||||
}
|
||||
td.rdtMonth:hover,
|
||||
td.rdtYear:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.rdtCounters {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rdtCounters > div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rdtCounter {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.rdtCounter {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.rdtCounterSeparator {
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.rdtCounter .rdtBtn {
|
||||
height: 40%;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
.rdtCounter .rdtBtn:hover {
|
||||
background: #eee;
|
||||
}
|
||||
.rdtCounter .rdtCount {
|
||||
height: 20%;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.rdtMilli {
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.rdtMilli input {
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
margin-top: 37px;
|
||||
}
|
@ -9,10 +9,6 @@ import ImageControl from './Image/ImageControl';
|
||||
import ImagePreview from './Image/ImagePreview';
|
||||
import FileControl from './File/FileControl';
|
||||
import FilePreview from './File/FilePreview';
|
||||
import DateControl from './Date/DateControl';
|
||||
import DatePreview from './Date/DatePreview';
|
||||
import DateTimeControl from './DateTime/DateTimeControl';
|
||||
import DateTimePreview from './DateTime/DateTimePreview';
|
||||
import SelectControl from './Select/SelectControl';
|
||||
import SelectPreview from './Select/SelectPreview';
|
||||
import MarkdownControl from './Markdown/MarkdownControl';
|
||||
@ -30,8 +26,6 @@ registerWidget('list', ListControl, ListPreview);
|
||||
registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
registerWidget('image', ImageControl, ImagePreview);
|
||||
registerWidget('file', FileControl, FilePreview);
|
||||
registerWidget('date', DateControl, DatePreview);
|
||||
registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
registerWidget('select', SelectControl, SelectPreview);
|
||||
registerWidget('object', ObjectControl, ObjectPreview);
|
||||
registerWidget('relation', RelationControl, RelationPreview);
|
||||
|
Reference in New Issue
Block a user