diff --git a/packages/netlify-cms-core/package.json b/packages/netlify-cms-core/package.json index 85dec704..afb59f41 100644 --- a/packages/netlify-cms-core/package.json +++ b/packages/netlify-cms-core/package.json @@ -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", diff --git a/packages/netlify-cms-core/scripts/load-extensions.js b/packages/netlify-cms-core/scripts/load-extensions.js index ff7401a1..7f15dda4 100644 --- a/packages/netlify-cms-core/scripts/load-extensions.js +++ b/packages/netlify-cms-core/scripts/load-extensions.js @@ -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); diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js index 247b327e..79273243 100644 --- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js +++ b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js @@ -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; diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/Date/DatePreview.js b/packages/netlify-cms-core/src/components/EditorWidgets/Date/DatePreview.js deleted file mode 100644 index 945a8f2b..00000000 --- a/packages/netlify-cms-core/src/components/EditorWidgets/Date/DatePreview.js +++ /dev/null @@ -1,10 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -export default function DatePreview({ value }) { - return
{value ? value.toString() : null}
; -} - -DatePreview.propTypes = { - value: PropTypes.object, -}; diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTime.css b/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTime.css deleted file mode 100644 index 41b83e5c..00000000 --- a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTime.css +++ /dev/null @@ -1 +0,0 @@ -@import "./ReactDatetime.css"; diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimeControl.js b/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimeControl.js deleted file mode 100644 index dc97a680..00000000 --- a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimeControl.js +++ /dev/null @@ -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 ( - - ); - } -} diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimePreview.js b/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimePreview.js deleted file mode 100644 index a6d89bdd..00000000 --- a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/DateTimePreview.js +++ /dev/null @@ -1,10 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -export default function DateTimePreview({ value }) { - return
{value ? value.toString() : null}
; -} - -DateTimePreview.propTypes = { - value: PropTypes.object, -}; diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/ReactDatetime.css b/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/ReactDatetime.css deleted file mode 100644 index 4dc0b791..00000000 --- a/packages/netlify-cms-core/src/components/EditorWidgets/DateTime/ReactDatetime.css +++ /dev/null @@ -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; -} diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/index.js b/packages/netlify-cms-core/src/components/EditorWidgets/index.js index 2bdd6971..823275a2 100644 --- a/packages/netlify-cms-core/src/components/EditorWidgets/index.js +++ b/packages/netlify-cms-core/src/components/EditorWidgets/index.js @@ -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); diff --git a/packages/netlify-cms-widget-date/package.json b/packages/netlify-cms-widget-date/package.json new file mode 100644 index 00000000..d78498eb --- /dev/null +++ b/packages/netlify-cms-widget-date/package.json @@ -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" + } +} diff --git a/packages/netlify-cms-core/src/components/EditorWidgets/Date/DateControl.js b/packages/netlify-cms-widget-date/src/DateControl.js similarity index 94% rename from packages/netlify-cms-core/src/components/EditorWidgets/Date/DateControl.js rename to packages/netlify-cms-widget-date/src/DateControl.js index 6b758bf6..40493566 100644 --- a/packages/netlify-cms-core/src/components/EditorWidgets/Date/DateControl.js +++ b/packages/netlify-cms-widget-date/src/DateControl.js @@ -1,8 +1,14 @@ 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; diff --git a/packages/netlify-cms-widget-date/src/DatePreview.js b/packages/netlify-cms-widget-date/src/DatePreview.js new file mode 100644 index 00000000..1235ef31 --- /dev/null +++ b/packages/netlify-cms-widget-date/src/DatePreview.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { WidgetPreviewContainer } from 'netlify-cms-ui-default'; + +const DatePreview = ({ value }) => ( + {value ? value.toString() : null} +); + +DatePreview.propTypes = { + value: PropTypes.object, +}; + +export default DatePreview; diff --git a/packages/netlify-cms-widget-date/src/index.js b/packages/netlify-cms-widget-date/src/index.js new file mode 100644 index 00000000..ee5a1afe --- /dev/null +++ b/packages/netlify-cms-widget-date/src/index.js @@ -0,0 +1,2 @@ +export DateControl from './DateControl'; +export DatePreview from './DatePreview'; diff --git a/packages/netlify-cms-widget-date/webpack.config.js b/packages/netlify-cms-widget-date/webpack.config.js new file mode 100644 index 00000000..d39ce069 --- /dev/null +++ b/packages/netlify-cms-widget-date/webpack.config.js @@ -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'], + }, + ], + }, +}; diff --git a/packages/netlify-cms-widget-datetime/package.json b/packages/netlify-cms-widget-datetime/package.json new file mode 100644 index 00000000..6ffc0e1d --- /dev/null +++ b/packages/netlify-cms-widget-datetime/package.json @@ -0,0 +1,33 @@ +{ + "name": "netlify-cms-widget-datetime", + "description": "Widget for editing dates and times in Netlify CMS.", + "version": "2.0.0-alpha.0", + "main": "dist/netlify-cms-widget-datetime.js", + "license": "MIT", + "keywords": [ + "netlify", + "netlify-cms", + "widget", + "date", + "time", + "datetime" + ], + "sideEffects": false, + "scripts": { + "watch": "webpack -w", + "build": "webpack" + }, + "dependencies": { + "netlify-cms-widget-date": "^2.0.0-alpha.0" + }, + "devDependencies": { + "webpack": "^4.16.1", + "webpack-cli": "^3.1.0" + }, + "peerDependencies": { + "react": "^16.4.1" + }, + "localExternals": [ + "netlify-cms-widget-date" + ] +} diff --git a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js new file mode 100644 index 00000000..33e03ded --- /dev/null +++ b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { DateControl } from 'netlify-cms-widget-date'; + +export default class DateTimeControl extends React.Component { + render() { + return ; + } +} diff --git a/packages/netlify-cms-widget-datetime/src/index.js b/packages/netlify-cms-widget-datetime/src/index.js new file mode 100644 index 00000000..d6750c61 --- /dev/null +++ b/packages/netlify-cms-widget-datetime/src/index.js @@ -0,0 +1,2 @@ +export DateTimeControl from './DateTimeControl'; +export DateTimePreview from 'netlify-cms-widget-date'; diff --git a/packages/netlify-cms-widget-datetime/webpack.config.js b/packages/netlify-cms-widget-datetime/webpack.config.js new file mode 100644 index 00000000..42edd361 --- /dev/null +++ b/packages/netlify-cms-widget-datetime/webpack.config.js @@ -0,0 +1,3 @@ +const { getConfig } = require('../../scripts/webpack.js'); + +module.exports = getConfig(); diff --git a/scripts/webpack.js b/scripts/webpack.js index d4444e36..3fd6289c 100644 --- a/scripts/webpack.js +++ b/scripts/webpack.js @@ -67,9 +67,11 @@ const getConfig = () => ({ * Exclude peer dependencies from package bundles. */ externals: (context, request, cb) => { + const localExternals = pkg.localExternals || []; const peerDeps = Object.keys(pkg.peerDependencies || {}); + const externals = isProduction ? peerDeps : [...localExternals, ...peerDeps]; const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request); - return peerDeps.some(isPeerDep) ? cb(null, request) : cb(); + return externals.some(isPeerDep) ? cb(null, request) : cb(); }, stats: stats(), });