From 9b7b950b8d926e1c57897f67ccaea7bfe557ba54 Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Thu, 5 Oct 2017 10:51:08 -0700 Subject: [PATCH] Support React 16 --- .babelrc | 3 +- dist/amd/currency.js | 7 -- dist/amd/date.js | 7 -- dist/amd/generator.js | 59 ---------- dist/amd/message.js | 197 -------------------------------- dist/amd/number.js | 7 -- dist/amd/react-create-class.js | 22 ---- dist/amd/relative-time.js | 7 -- dist/currency.js | 7 -- dist/date.js | 7 -- dist/generator.js | 58 ---------- dist/index.js | 15 --- dist/message.js | 198 --------------------------------- dist/number.js | 7 -- dist/react-create-class.js | 19 ---- dist/relative-time.js | 7 -- package.json | 12 +- src/generator.js | 27 +++-- src/message.js | 2 +- src/react-create-class.js | 17 --- test/test_setup.js | 5 +- 21 files changed, 30 insertions(+), 660 deletions(-) delete mode 100644 dist/amd/currency.js delete mode 100644 dist/amd/date.js delete mode 100644 dist/amd/generator.js delete mode 100644 dist/amd/message.js delete mode 100644 dist/amd/number.js delete mode 100644 dist/amd/react-create-class.js delete mode 100644 dist/amd/relative-time.js delete mode 100644 dist/currency.js delete mode 100644 dist/date.js delete mode 100644 dist/generator.js delete mode 100644 dist/index.js delete mode 100644 dist/message.js delete mode 100644 dist/number.js delete mode 100644 dist/react-create-class.js delete mode 100644 dist/relative-time.js delete mode 100644 src/react-create-class.js diff --git a/.babelrc b/.babelrc index e3c1e5c..102a0c8 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["react", "es2015"] + "presets": ["react", "es2015"], + "plugins": ["transform-class-properties", "transform-object-rest-spread"] } diff --git a/dist/amd/currency.js b/dist/amd/currency.js deleted file mode 100644 index 18dcc81..0000000 --- a/dist/amd/currency.js +++ /dev/null @@ -1,7 +0,0 @@ -define(['react', './generator', 'globalize/currency'], function (React, generator) { - - 'use strict'; - - return generator("formatCurrency", ["value", "currency", "options"]); - -}); \ No newline at end of file diff --git a/dist/amd/date.js b/dist/amd/date.js deleted file mode 100644 index 90c539c..0000000 --- a/dist/amd/date.js +++ /dev/null @@ -1,7 +0,0 @@ -define(['react', './generator', 'globalize/date'], function (React, generator) { - - 'use strict'; - - return generator("formatDate", ["value", "options"]); - -}); \ No newline at end of file diff --git a/dist/amd/generator.js b/dist/amd/generator.js deleted file mode 100644 index d4a6ced..0000000 --- a/dist/amd/generator.js +++ /dev/null @@ -1,59 +0,0 @@ -define(['./react-create-class', 'react', 'globalize'], function (reactCreateClass, React, Globalize) { - - 'use strict'; - - var commonPropNames = ["elements", "locale"]; - - function capitalizeFirstLetter(string) { - return string.charAt(0).toUpperCase() + string.slice(1); - } - - function omit(set) { - return function(element) { - return set.indexOf(element) === -1; - }; - } - - function generator(fn, localPropNames, options) { - options = options || {}; - var Fn = capitalizeFirstLetter(fn); - var beforeFormat = options.beforeFormat || function() {}; - var afterFormat = options.afterFormat || function(formattedValue) { - return formattedValue; - }; - var globalizePropNames = commonPropNames.concat(localPropNames); - - return reactCreateClass({ - displayName: Fn, - componentWillMount: function() { - this.setup(this.props); - }, - componentWillReceiveProps: function(nextProps) { - this.setup(nextProps); - }, - setup: function(props) { - this.globalize = props.locale ? Globalize(props.locale) : Globalize; - this.domProps = Object.keys(props).filter(omit(globalizePropNames)).reduce(function(memo, propKey) { - memo[propKey] = props[propKey]; - return memo; - }, {}); - - this.globalizePropValues = localPropNames.map(function(element) { - return props[element]; - }); - this.globalizePropValues[0] = props.children; - - beforeFormat.call(this, props); - var formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues); - this.value = afterFormat.call(this, formattedValue); - }, - render: function() { - return React.DOM.span(this.domProps, this.value); - } - }); - } - - - return generator; - -}); \ No newline at end of file diff --git a/dist/amd/message.js b/dist/amd/message.js deleted file mode 100644 index 3e32227..0000000 --- a/dist/amd/message.js +++ /dev/null @@ -1,197 +0,0 @@ -define(['globalize', 'react', './generator', 'globalize/message', 'globalize/plural'], function (Globalize, React, generator) { - - 'use strict'; - - function messageSetup(globalize, props, globalizePropValues) { - var defaultMessage; - var children = props.children; - var scope = props.scope; - - function getDefaultMessage(children) { - if (typeof children === "string") { - return children; - } else { - throw new Error("Invalid default message type `" + typeof children + "`"); - } - } - - // Set path - path as props supercedes default value. - if (props.path) { - // Override generator assumption. The generator assumes the globalizePropValues[0] - // (path) and props.children to be mutually exclusive, but this isn't - // true here for messages. Because, it's possible to use props.path (for - // path) and props.children for defaultMessage, which are two different - // variables. - globalizePropValues[0] = props.path; - } else { - // Although the generator had already set globalizePropValues[0] (path) as - // props.children, here its type is checked and its value is sanitized. - defaultMessage = getDefaultMessage(children); - globalizePropValues[0] = sanitizePath(defaultMessage); - } - - // Scope path. - if (scope) { - globalizePropValues[0] = scope + "/" + globalizePropValues[0]; - } - - // Development mode only. - if (process.env.NODE_ENV !== "production") { - var path = props.path ? props.path.split("/") : [globalizePropValues[0]]; - var getMessage = function(globalize, path) { - return globalize.cldr.get(["globalize-messages/{bundle}"].concat(path)); - }; - - var setMessage = function(globalize, path, message) { - var data = {}; - function set(data, path, value) { - var i; - var node = data; - var length = path.length; - - for (i = 0; i < length - 1; i++) { - if (!node[path[i]]) { - node[path[i]] = {}; - } - node = node[path[i]]; - } - node[path[i]] = value; - } - set(data, [globalize.cldr.attributes.bundle].concat(path), message); - Globalize.loadMessages(data); - }; - - if (globalize.cldr) { - if (!getMessage(globalize, path)) { - defaultMessage = defaultMessage || getDefaultMessage(children); - setMessage(globalize, path, defaultMessage); - } - } - } - } - - function replaceElements(props, formatted) { - var elements = props.elements; - - function _replaceElements(string, elements) { - if (typeof string !== "string") { - throw new Error("Missing or invalid string `" + string + "` (" + typeof string + ")"); - } - if (typeof elements !== "object") { - throw new Error("Missing or invalid elements `" + elements + "` (" + typeof elements + ")"); - } - - // Given [x, y, z], it returns [x, element, y, element, z]. - function spreadElementsInBetweenItems(array, element) { - var getElement = typeof element === "function" ? element : function() { - return element; - }; - return array.slice(1).reduce(function(ret, item, i) { - ret.push(getElement(i), item); - return ret; - }, [array[0]]); - } - - function splice(sourceArray, start, deleteCount, itemsArray) { - [].splice.apply(sourceArray, [start, deleteCount].concat(itemsArray)); - } - - return Object.keys(elements).reduce(function(ret, key) { - var element = elements[key]; - - ret.forEach(function(string, i) { - var aux, contents, regexp, regexp2; - - // Insert array into the correct ret position. - function replaceRetItem(array) { - splice(ret, i, 1, array); - } - - if (typeof string !== "string") { - return; // continue; - } - - // Empty tags, e.g., `[foo/]`. - aux = string.split("[" + key + "/]"); - if (aux.length > 1) { - aux = spreadElementsInBetweenItems(aux, element); - replaceRetItem(aux); - return; // continue; - } - - // Start-end tags, e.g., `[foo]content[/foo]`. - regexp = new RegExp("\\[" + key + "\\][\\s\\S]*?\\[\\/" + key + "\\]", "g"); - regexp2 = new RegExp("\\[" + key + "\\]([\\s\\S]*?)\\[\\/" + key + "\\]"); - aux = string.split(regexp); - if (aux.length > 1) { - contents = string.match(regexp).map(function(content) { - return content.replace(regexp2, "$1"); - }); - aux = spreadElementsInBetweenItems(aux, function(i) { - return React.cloneElement(element, {}, contents[i]); - }); - replaceRetItem(aux); - } - }); - - return ret; - }, [string]); - } - - - // Elements replacement. - if (elements) { - formatted = React.DOM.span.apply(React.DOM.span, [{}].concat(_replaceElements(formatted, elements))); - } - - return formatted; - } - - function sanitizePath(pathString) { - return pathString.trim().replace(/\{/g, "(").replace(/\}/g, ")").replace(/\//g, "|").replace(/\n/g, " ").replace(/ +/g, " ").replace(/"/g, "'"); - } - - // Overload Globalize's `.formatMessage` to allow default message. - var globalizeMessageFormatter = Globalize.messageFormatter; - Globalize.messageFormatter = Globalize.prototype.messageFormatter = function(pathOrMessage) { - var aux = {}; - var sanitizedPath = sanitizePath(pathOrMessage); - - // Globalize runtime - if (!this.cldr) { - // On runtime, the only way for deciding between using sanitizedPath or - // pathOrMessage as path is by checking which formatter exists. - arguments[0] = sanitizedPath; - aux = globalizeMessageFormatter.apply(this, arguments); - arguments[0] = pathOrMessage; - return aux || globalizeMessageFormatter.apply(this, arguments); - } - - var sanitizedPathExists = this.cldr.get(["globalize-messages/{bundle}", sanitizedPath]) !== undefined; - var pathExists = this.cldr.get(["globalize-messages/{bundle}", pathOrMessage]) !== undefined; - - // Want to distinguish between default message and path value - just checking - // for sanitizedPath won't be enough, because sanitizedPath !== pathOrMessage - // for paths like "salutations/hi". - if (!sanitizedPathExists && !pathExists) { - aux[this.cldr.attributes.bundle] = {}; - aux[this.cldr.attributes.bundle][sanitizedPath] = pathOrMessage; - Globalize.loadMessages(aux); - sanitizedPathExists = true; - } - - arguments[0] = sanitizedPathExists ? sanitizedPath : pathOrMessage; - return globalizeMessageFormatter.apply(this, arguments); - }; - - - return generator("formatMessage", ["path", "variables"], { - beforeFormat: function(props) { - messageSetup(this.globalize, props, this.globalizePropValues); - }, - afterFormat: function(formattedValue) { - return replaceElements(this.props, formattedValue); - } - }); - -}); \ No newline at end of file diff --git a/dist/amd/number.js b/dist/amd/number.js deleted file mode 100644 index 57b917d..0000000 --- a/dist/amd/number.js +++ /dev/null @@ -1,7 +0,0 @@ -define(['react', './generator', 'globalize/number'], function (React, generator) { - - 'use strict'; - - return generator("formatNumber", ["value", "options"]); - -}); \ No newline at end of file diff --git a/dist/amd/react-create-class.js b/dist/amd/react-create-class.js deleted file mode 100644 index 6c28631..0000000 --- a/dist/amd/react-create-class.js +++ /dev/null @@ -1,22 +0,0 @@ -define(['react'], function (React) { - - 'use strict'; - - var versions = React.version.split("."); - var major = versions[0]; - var minor = versions[1]; - - var REACT15 = major === "15"; - var REACT155 = REACT15 && minor >= 5; - - var reactCreateClass; - if (REACT155) { - reactCreateClass = require("create-react-class"); - } else { - reactCreateClass = React.createClass; - } - - - return reactCreateClass; - -}); \ No newline at end of file diff --git a/dist/amd/relative-time.js b/dist/amd/relative-time.js deleted file mode 100644 index 78c699c..0000000 --- a/dist/amd/relative-time.js +++ /dev/null @@ -1,7 +0,0 @@ -define(['react', './generator', 'globalize/relative-time'], function (React, generator) { - - 'use strict'; - - return generator("formatRelativeTime", ["value", "unit", "options"]); - -}); \ No newline at end of file diff --git a/dist/currency.js b/dist/currency.js deleted file mode 100644 index 9c4fbe7..0000000 --- a/dist/currency.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -var React = require('react'); -var generator = require('./generator'); - - -module.exports = generator("formatCurrency", ["value", "currency", "options"]); \ No newline at end of file diff --git a/dist/date.js b/dist/date.js deleted file mode 100644 index 6ecd0ea..0000000 --- a/dist/date.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -var React = require('react'); -var generator = require('./generator'); - - -module.exports = generator("formatDate", ["value", "options"]); \ No newline at end of file diff --git a/dist/generator.js b/dist/generator.js deleted file mode 100644 index e1093d4..0000000 --- a/dist/generator.js +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; - -var reactCreateClass = require('./react-create-class'); -var React = require('react'); -var Globalize = require('globalize'); - -var commonPropNames = ["elements", "locale"]; - -function capitalizeFirstLetter(string) { - return string.charAt(0).toUpperCase() + string.slice(1); -} - -function omit(set) { - return function(element) { - return set.indexOf(element) === -1; - }; -} - -function generator(fn, localPropNames, options) { - options = options || {}; - var Fn = capitalizeFirstLetter(fn); - var beforeFormat = options.beforeFormat || function() {}; - var afterFormat = options.afterFormat || function(formattedValue) { - return formattedValue; - }; - var globalizePropNames = commonPropNames.concat(localPropNames); - - return reactCreateClass({ - displayName: Fn, - componentWillMount: function() { - this.setup(this.props); - }, - componentWillReceiveProps: function(nextProps) { - this.setup(nextProps); - }, - setup: function(props) { - this.globalize = props.locale ? Globalize(props.locale) : Globalize; - this.domProps = Object.keys(props).filter(omit(globalizePropNames)).reduce(function(memo, propKey) { - memo[propKey] = props[propKey]; - return memo; - }, {}); - - this.globalizePropValues = localPropNames.map(function(element) { - return props[element]; - }); - this.globalizePropValues[0] = props.children; - - beforeFormat.call(this, props); - var formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues); - this.value = afterFormat.call(this, formattedValue); - }, - render: function() { - return React.DOM.span(this.domProps, this.value); - } - }); -} - -module.exports = generator; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js deleted file mode 100644 index 6da4851..0000000 --- a/dist/index.js +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; - -var FormatCurrency = require('./currency'); -var FormatDate = require('./date'); -var FormatMessage = require('./message'); -var FormatNumber = require('./number'); -var FormatRelativeTime = require('./relative-time'); - -module.exports = { - FormatCurrency: FormatCurrency, - FormatDate: FormatDate, - FormatMessage: FormatMessage, - FormatNumber: FormatNumber, - FormatRelativeTime: FormatRelativeTime -}; \ No newline at end of file diff --git a/dist/message.js b/dist/message.js deleted file mode 100644 index ca5388e..0000000 --- a/dist/message.js +++ /dev/null @@ -1,198 +0,0 @@ -'use strict'; - -var Globalize = require('globalize'); -var React = require('react'); -var generator = require('./generator'); - - - -function messageSetup(globalize, props, globalizePropValues) { - var defaultMessage; - var children = props.children; - var scope = props.scope; - - function getDefaultMessage(children) { - if (typeof children === "string") { - return children; - } else { - throw new Error("Invalid default message type `" + typeof children + "`"); - } - } - - // Set path - path as props supercedes default value. - if (props.path) { - // Override generator assumption. The generator assumes the globalizePropValues[0] - // (path) and props.children to be mutually exclusive, but this isn't - // true here for messages. Because, it's possible to use props.path (for - // path) and props.children for defaultMessage, which are two different - // variables. - globalizePropValues[0] = props.path; - } else { - // Although the generator had already set globalizePropValues[0] (path) as - // props.children, here its type is checked and its value is sanitized. - defaultMessage = getDefaultMessage(children); - globalizePropValues[0] = sanitizePath(defaultMessage); - } - - // Scope path. - if (scope) { - globalizePropValues[0] = scope + "/" + globalizePropValues[0]; - } - - // Development mode only. - if (process.env.NODE_ENV !== "production") { - var path = props.path ? props.path.split("/") : [globalizePropValues[0]]; - var getMessage = function(globalize, path) { - return globalize.cldr.get(["globalize-messages/{bundle}"].concat(path)); - }; - - var setMessage = function(globalize, path, message) { - var data = {}; - function set(data, path, value) { - var i; - var node = data; - var length = path.length; - - for (i = 0; i < length - 1; i++) { - if (!node[path[i]]) { - node[path[i]] = {}; - } - node = node[path[i]]; - } - node[path[i]] = value; - } - set(data, [globalize.cldr.attributes.bundle].concat(path), message); - Globalize.loadMessages(data); - }; - - if (globalize.cldr) { - if (!getMessage(globalize, path)) { - defaultMessage = defaultMessage || getDefaultMessage(children); - setMessage(globalize, path, defaultMessage); - } - } - } -} - -function replaceElements(props, formatted) { - var elements = props.elements; - - function _replaceElements(string, elements) { - if (typeof string !== "string") { - throw new Error("Missing or invalid string `" + string + "` (" + typeof string + ")"); - } - if (typeof elements !== "object") { - throw new Error("Missing or invalid elements `" + elements + "` (" + typeof elements + ")"); - } - - // Given [x, y, z], it returns [x, element, y, element, z]. - function spreadElementsInBetweenItems(array, element) { - var getElement = typeof element === "function" ? element : function() { - return element; - }; - return array.slice(1).reduce(function(ret, item, i) { - ret.push(getElement(i), item); - return ret; - }, [array[0]]); - } - - function splice(sourceArray, start, deleteCount, itemsArray) { - [].splice.apply(sourceArray, [start, deleteCount].concat(itemsArray)); - } - - return Object.keys(elements).reduce(function(ret, key) { - var element = elements[key]; - - ret.forEach(function(string, i) { - var aux, contents, regexp, regexp2; - - // Insert array into the correct ret position. - function replaceRetItem(array) { - splice(ret, i, 1, array); - } - - if (typeof string !== "string") { - return; // continue; - } - - // Empty tags, e.g., `[foo/]`. - aux = string.split("[" + key + "/]"); - if (aux.length > 1) { - aux = spreadElementsInBetweenItems(aux, element); - replaceRetItem(aux); - return; // continue; - } - - // Start-end tags, e.g., `[foo]content[/foo]`. - regexp = new RegExp("\\[" + key + "\\][\\s\\S]*?\\[\\/" + key + "\\]", "g"); - regexp2 = new RegExp("\\[" + key + "\\]([\\s\\S]*?)\\[\\/" + key + "\\]"); - aux = string.split(regexp); - if (aux.length > 1) { - contents = string.match(regexp).map(function(content) { - return content.replace(regexp2, "$1"); - }); - aux = spreadElementsInBetweenItems(aux, function(i) { - return React.cloneElement(element, {}, contents[i]); - }); - replaceRetItem(aux); - } - }); - - return ret; - }, [string]); - } - - - // Elements replacement. - if (elements) { - formatted = React.DOM.span.apply(React.DOM.span, [{}].concat(_replaceElements(formatted, elements))); - } - - return formatted; -} - -function sanitizePath(pathString) { - return pathString.trim().replace(/\{/g, "(").replace(/\}/g, ")").replace(/\//g, "|").replace(/\n/g, " ").replace(/ +/g, " ").replace(/"/g, "'"); -} - -// Overload Globalize's `.formatMessage` to allow default message. -var globalizeMessageFormatter = Globalize.messageFormatter; -Globalize.messageFormatter = Globalize.prototype.messageFormatter = function(pathOrMessage) { - var aux = {}; - var sanitizedPath = sanitizePath(pathOrMessage); - - // Globalize runtime - if (!this.cldr) { - // On runtime, the only way for deciding between using sanitizedPath or - // pathOrMessage as path is by checking which formatter exists. - arguments[0] = sanitizedPath; - aux = globalizeMessageFormatter.apply(this, arguments); - arguments[0] = pathOrMessage; - return aux || globalizeMessageFormatter.apply(this, arguments); - } - - var sanitizedPathExists = this.cldr.get(["globalize-messages/{bundle}", sanitizedPath]) !== undefined; - var pathExists = this.cldr.get(["globalize-messages/{bundle}", pathOrMessage]) !== undefined; - - // Want to distinguish between default message and path value - just checking - // for sanitizedPath won't be enough, because sanitizedPath !== pathOrMessage - // for paths like "salutations/hi". - if (!sanitizedPathExists && !pathExists) { - aux[this.cldr.attributes.bundle] = {}; - aux[this.cldr.attributes.bundle][sanitizedPath] = pathOrMessage; - Globalize.loadMessages(aux); - sanitizedPathExists = true; - } - - arguments[0] = sanitizedPathExists ? sanitizedPath : pathOrMessage; - return globalizeMessageFormatter.apply(this, arguments); -}; - -module.exports = generator("formatMessage", ["path", "variables"], { - beforeFormat: function(props) { - messageSetup(this.globalize, props, this.globalizePropValues); - }, - afterFormat: function(formattedValue) { - return replaceElements(this.props, formattedValue); - } -}); \ No newline at end of file diff --git a/dist/number.js b/dist/number.js deleted file mode 100644 index c9ee109..0000000 --- a/dist/number.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -var React = require('react'); -var generator = require('./generator'); - - -module.exports = generator("formatNumber", ["value", "options"]); \ No newline at end of file diff --git a/dist/react-create-class.js b/dist/react-create-class.js deleted file mode 100644 index 5fa4694..0000000 --- a/dist/react-create-class.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -var React = require('react'); - -var versions = React.version.split("."); -var major = versions[0]; -var minor = versions[1]; - -var REACT15 = major === "15"; -var REACT155 = REACT15 && minor >= 5; - -var reactCreateClass; -if (REACT155) { - reactCreateClass = require("create-react-class"); -} else { - reactCreateClass = React.createClass; -} - -module.exports = reactCreateClass; \ No newline at end of file diff --git a/dist/relative-time.js b/dist/relative-time.js deleted file mode 100644 index e802345..0000000 --- a/dist/relative-time.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -var React = require('react'); -var generator = require('./generator'); - - -module.exports = generator("formatRelativeTime", ["value", "unit", "options"]); \ No newline at end of file diff --git a/package.json b/package.json index 367c10d..596a41f 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,13 @@ "bugs": "https://github.com/jquery-support/react-globalize/issues", "peerDependencies": { "globalize": ">= 1.0.0", - "react": "^0.13 || ^0.14 || ^15.0.0" + "react": "^15.6.0 || ^16.0.0" }, "devDependencies": { "babel-eslint": "^4.1.6", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-register": "^6.7.2", @@ -43,7 +46,8 @@ "cldr-data": ">=25", "cldrjs": "^0.4.3", "create-react-class": "^15.5.2", - "enzyme": "2.2.0", + "enzyme": "^3.1.0", + "enzyme-adapter-react-16": "^1.0.1", "eslint": "^1.10.3", "eslint-config-defaults": "^7.1.1", "eslint-plugin-react": "^3.11.2", @@ -53,8 +57,8 @@ "grunt-esperanto": "^0.4.0", "grunt-mocha-test": "^0.12.7", "mocha": "^2.4.5", - "react": "15.0.1", + "react": "^16.0.0", "react-addons-test-utils": "15.0.1", - "react-dom": "15.0.1" + "react-dom": "^16.0.0" } } diff --git a/src/generator.js b/src/generator.js index b209b58..074db03 100644 --- a/src/generator.js +++ b/src/generator.js @@ -1,4 +1,3 @@ -import reactCreateClass from "./react-create-class"; import React from "react"; import Globalize from "globalize"; @@ -23,15 +22,18 @@ function generator(fn, localPropNames, options) { }; var globalizePropNames = commonPropNames.concat(localPropNames); - return reactCreateClass({ - displayName: Fn, - componentWillMount: function() { + return class extends React.Component { + // static displayName = Fn; + + componentWillMount() { this.setup(this.props); - }, - componentWillReceiveProps: function(nextProps) { + } + + componentWillReceiveProps(nextProps) { this.setup(nextProps); - }, - setup: function(props) { + } + + setup(props) { this.globalize = props.locale ? Globalize(props.locale) : Globalize; this.domProps = Object.keys(props).filter(omit(globalizePropNames)).reduce(function(memo, propKey) { memo[propKey] = props[propKey]; @@ -46,11 +48,12 @@ function generator(fn, localPropNames, options) { beforeFormat.call(this, props); var formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues); this.value = afterFormat.call(this, formattedValue); - }, - render: function() { - return React.DOM.span(this.domProps, this.value); } - }); + + render() { + return React.createElement("span", this.domProps, ...this.value); + } + }; } export default generator; diff --git a/src/message.js b/src/message.js index c422a67..0da81a1 100644 --- a/src/message.js +++ b/src/message.js @@ -143,7 +143,7 @@ function replaceElements(props, formatted) { // Elements replacement. if (elements) { - formatted = React.DOM.span.apply(React.DOM.span, [{}].concat(_replaceElements(formatted, elements))); + return _replaceElements(formatted, elements); } return formatted; diff --git a/src/react-create-class.js b/src/react-create-class.js deleted file mode 100644 index f194418..0000000 --- a/src/react-create-class.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -var versions = React.version.split("."); -var major = versions[0]; -var minor = versions[1]; - -var REACT15 = major === "15"; -var REACT155 = REACT15 && minor >= 5; - -var reactCreateClass; -if (REACT155) { - reactCreateClass = require("create-react-class"); -} else { - reactCreateClass = React.createClass; -} - -export default reactCreateClass; diff --git a/test/test_setup.js b/test/test_setup.js index e943caf..8ca6a84 100755 --- a/test/test_setup.js +++ b/test/test_setup.js @@ -1,7 +1,10 @@ +import Adapter from "enzyme-adapter-react-16"; import { expect } from "chai"; import React from "react"; -import { shallow } from "enzyme"; import Globalize from "globalize"; +import Enzyme, { shallow } from "enzyme"; + +Enzyme.configure({ adapter: new Adapter() }); global.expect = expect; global.React = React;