Skip to content

Commit

Permalink
Release v1.18.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@sawyerh
sawyerh committed Mar 12, 2018
1 parent 0579b7b commit 8cbb84c
Show file tree
Hide file tree
Showing 9 changed files with 151 additions and 68 deletions.
2 changes: 1 addition & 1 deletion lerna.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
"packages/*",
"packages/themes/*"
],
"version": "1.17.1"
"version": "1.18.0"
}
180 changes: 130 additions & 50 deletions packages/core/dist/components/TextField/Mask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ exports.Mask = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.unmask = unmask;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);
Expand All @@ -21,13 +23,112 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*
Masked field
A masked field is an enhanced input field that provides visual and non-visual
cues to a user about the expected value.
Style guide: components.masked-field
*/


// Deliminate chunks of integers
var deliminatedMaskRegex = {
phone: /(\d{3})(\d{1,3})?(\d+)?/,
ssn: /(\d{3})(\d{1,2})?(\d+)?/,
zip: /(\d{5})(\d+)/
};

/**
* Split value into groups and insert a hyphen deliminator between each
* @param {String} value
* @param {RegExp} rx - Regular expression with capturing groups
* @returns {String}
*/
function deliminateRegexGroups(value, rx) {
var matches = toInt(value).match(rx);

if (matches && matches.length > 1) {
value = matches.slice(1).filter(function (a) {
return !!a;
}) // remove undefined groups
.join('-');
}

return value;
}

/**
* Format a string using fixed-point notation, similar to Number.prototype.toFixed
* though a decimal is only fixed if the string included a decimal already
* @param {String} value - A stringified number (i.e. "1234")
* @param {Number} digits - The number of digits to appear after the decimal point
* @returns {String}
*/
function stringWithFixedDigits(value) {
var digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

var decimalRegex = /\.[\d]+$/;

// Check for existing decimal
var decimal = value.match(decimalRegex);

if (decimal) {
var fixedDecimal = parseFloat(decimal).toFixed(digits).match(decimalRegex)[0];

return value.replace(decimal, fixedDecimal);
}

return value;
}

/**
* Remove all non-digits
* @param {String} value
* @returns {String}
*/
function toInt(value) {
return value.replace(/\D+/g, '');
}

/**
* Convert string into a number (positive or negative float or integer)
* @param {String} value
* @returns {Number}
*/
function toNumber(value) {
if (typeof value !== 'string') return value;

// 0 = number, 1 = decimals
var parts = value.split('.');
var digitsRegex = /^-|\d/g; // include a check for a beginning "-" for negative numbers
var a = parts[0].match(digitsRegex).join('');
var b = parts.length >= 2 && parts[1].match(digitsRegex).join('');

return b ? parseFloat(a + '.' + b) : parseInt(a);
}

/*
`<TextField mask={...}>`
Passing a `mask` prop into the `TextField` component with a valid value will
enable formatting to occur when the field is blurred. To "unmask" the
value, you can import and call the `unmaskValue` method.
@react-component TextField
@react-example Mask
Style guide: components.masked-field.react
*/

/**
* A Mask component renders a controlled input field. When the
* field is blurred, it applies formatting to improve the readability
* of the value.
*/

var Mask = exports.Mask = function (_React$PureComponent) {
_inherits(Mask, _React$PureComponent);

Expand All @@ -52,52 +153,6 @@ var Mask = exports.Mask = function (_React$PureComponent) {
}
}

/**
* @param {String} value
* @returns {Number}
*/

}, {
key: 'toNumber',
value: function toNumber(value) {
if (typeof value !== 'string') return value;

// 0 = number, 1 = decimals
var parts = value.split('.');
var digitsRegex = /^-|\d/g; // include a check for a beginning "-" for negative numbers
var a = parts[0].match(digitsRegex).join('');
var b = parts.length >= 2 && parts[1].match(digitsRegex).join('');

return b ? parseFloat(a + '.' + b) : parseInt(a);
}

/**
* Format a string using fixed-point notation, similar to Number.prototype.toFixed
* though a decimal is only fixed if the string included a decimal already
* @param {String} value - A stringified number (i.e. "1234")
* @param {Number} digits - The number of digits to appear after the decimal point
* @returns {String}
*/

}, {
key: 'stringWithFixedDigits',
value: function stringWithFixedDigits(value) {
var digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

var decimalRegex = /\.[\d]+$/;

// Check for existing decimal
var decimal = value.match(decimalRegex);

if (decimal) {
var fixedDecimal = parseFloat(decimal).toFixed(digits).match(decimalRegex)[0];

return value.replace(decimal, fixedDecimal);
}

return value;
}

/**
* Returns the value with additional masking characters
* @param {String} value
Expand All @@ -110,13 +165,16 @@ var Mask = exports.Mask = function (_React$PureComponent) {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

if (value && typeof value === 'string') {
var mask = this.props.mask;

value = value.trim();

if (this.props.mask === 'currency') {
if (mask === 'currency') {
// Format number with commas. If the number includes a decimal,
// ensure it includes two decimal points
value = this.toNumber(value);
value = this.stringWithFixedDigits(value.toLocaleString('en-US'));
value = stringWithFixedDigits(toNumber(value).toLocaleString('en-US'));
} else if (Object.keys(deliminatedMaskRegex).includes(mask)) {
value = deliminateRegexGroups(value, deliminatedMaskRegex[mask]);
}
}

Expand Down Expand Up @@ -200,4 +258,26 @@ Mask.propTypes = {
mask: _propTypes2.default.string.isRequired
};

/**
* Remove mask characters from value
* @param {String} value
* @param {String} mask
* @returns {String}
*/
function unmask(value, mask) {
if (!value || typeof value !== 'string') return value;

value = value.trim();

if (mask === 'currency') {
// Preserve only digits, decimal point, or negative symbol
value = value.match(/^-|[\d.]/g).join('');
} else if (Object.keys(deliminatedMaskRegex).includes(mask)) {
// Remove the deliminators and revert to single ungrouped string
value = toInt(value);
}

return value;
}

exports.default = Mask;
15 changes: 9 additions & 6 deletions packages/core/dist/components/TextField/TextField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextField = undefined;
exports.TextField = exports.unmaskValue = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _FormLabel = require('../FormLabel/FormLabel');

var _FormLabel2 = _interopRequireDefault(_FormLabel);

var _Mask = require('./Mask');

var _Mask2 = _interopRequireDefault(_Mask);

var _FormLabel = require('../FormLabel/FormLabel');

var _FormLabel2 = _interopRequireDefault(_FormLabel);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);
Expand All @@ -43,10 +43,13 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

exports.unmaskValue = _Mask.unmask;

/**
* A `TextField` component renders an input field as well as supporting UI
* elements like a label, error message, and hint text.
*/

var TextField = exports.TextField = function (_React$PureComponent) {
_inherits(TextField, _React$PureComponent);

Expand Down Expand Up @@ -236,7 +239,7 @@ TextField.propTypes = {
* you expect to be entered. Depending on the mask, the
* field's appearance and functionality may be affected.
*/
mask: _propTypes2.default.oneOf(['currency']),
mask: _propTypes2.default.oneOf(['currency', 'phone', 'ssn', 'zip']),
/**
* `max` HTML input attribute
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/core/dist/index.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@cmsgov/design-system-core",
"version": "1.17.1",
"version": "1.18.0",
"publishConfig": {
"access": "public"
},
Expand All @@ -9,7 +9,7 @@
"license": "SEE LICENSE IN LICENSE.md",
"main": "dist/index.js",
"dependencies": {
"@cmsgov/design-system-support": "^1.17.1",
"@cmsgov/design-system-support": "^1.18.0",
"classnames": "^2.2.5",
"core-js": "^2.5.3",
"downshift": "^1.28.2",
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "@cmsgov/design-system-docs",
"version": "1.17.1",
"version": "1.18.0",
"private": true,
"description": "Design system's documentation website",
"repository": "CMSgov/design-system",
"dependencies": {
"@cmsgov/design-system-core": "^1.17.1",
"@cmsgov/design-system-layout": "^1.17.1",
"@cmsgov/design-system-support": "^1.17.1",
"@cmsgov/design-system-core": "^1.18.0",
"@cmsgov/design-system-layout": "^1.18.0",
"@cmsgov/design-system-support": "^1.18.0",
"classnames": "^2.2.5",
"core-js": "^2.5.3",
"lodash": "^4.17.5",
Expand Down
Loading

0 comments on commit 8cbb84c

Please sign in to comment.