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

migrate date and datetime widgets

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

2
packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
View File

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

93
packages/netlify-cms-core/src/components/EditorWidgets/Date/DateControl.js
View File

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

10
packages/netlify-cms-core/src/components/EditorWidgets/Date/DatePreview.js
View File

@ -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
packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTime.css
View File

@ -1 +0,0 @@
@import "./ReactDatetime.css";

43
packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimeControl.js
View File

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

10
packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimePreview.js
View File

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

210
packages/netlify-cms-core/src/components/EditorWidgets/DateTime/ReactDatetime.css
View File

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

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

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