-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add isRgbColor validator #1141
Add isRgbColor validator #1141
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
"use strict"; | ||
|
||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.default = isRgbColor; | ||
|
||
var _assertString = _interopRequireDefault(require("./util/assertString")); | ||
|
||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
|
||
var rgbColor = /^rgb\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){2}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\)$/; | ||
var rgbaColor = /^rgba\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/; | ||
var rgbColorPercent = /^rgb\((([0-9]%|[1-9][0-9]%|100%),){2}([0-9]%|[1-9][0-9]%|100%)\)/; | ||
var rgbaColorPercent = /^rgba\((([0-9]%|[1-9][0-9]%|100%),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)/; | ||
|
||
function isRgbColor(str) { | ||
var includePercentValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; | ||
(0, _assertString.default)(str); | ||
|
||
if (!includePercentValues) { | ||
return rgbColor.test(str) || rgbaColor.test(str); | ||
} | ||
|
||
return rgbColor.test(str) || rgbaColor.test(str) || rgbColorPercent.test(str) || rgbaColorPercent.test(str); | ||
} | ||
|
||
module.exports = exports.default; | ||
module.exports.default = exports.default; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import assertString from './util/assertString'; | ||
|
||
const rgbColor = /^rgb\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){2}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\)$/; | ||
const rgbaColor = /^rgba\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/; | ||
const rgbColorPercent = /^rgb\((([0-9]%|[1-9][0-9]%|100%),){2}([0-9]%|[1-9][0-9]%|100%)\)/; | ||
const rgbaColorPercent = /^rgba\((([0-9]%|[1-9][0-9]%|100%),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)/; | ||
|
||
export default function isRgbColor(str, includePercentValues = true) { | ||
assertString(str); | ||
|
||
if (!includePercentValues) { | ||
return rgbColor.test(str) || rgbaColor.test(str); | ||
} | ||
|
||
return rgbColor.test(str) || | ||
rgbaColor.test(str) || | ||
rgbColorPercent.test(str) || | ||
rgbaColorPercent.test(str); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2610,6 +2610,37 @@ describe('Validators', () => { | |
}); | ||
}); | ||
|
||
it('should validate rgb color strings', () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Run There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. okay, I wasn't sure where these files came from, so didn't commit them |
||
test({ | ||
validator: 'isRgbColor', | ||
valid: [ | ||
'rgb(0,0,0)', | ||
'rgb(255,255,255)', | ||
'rgba(0,0,0,0)', | ||
'rgba(255,255,255,1)', | ||
'rgba(255,255,255,.1)', | ||
'rgba(255,255,255,0.1)', | ||
'rgb(5%,5%,5%)', | ||
'rgba(5%,5%,5%,.3)', | ||
], | ||
invalid: [ | ||
'rgb(0,0,0,)', | ||
'rgb(0,0,)', | ||
'rgb(0,0,256)', | ||
'rgb()', | ||
'rgba(0,0,0)', | ||
'rgba(255,255,255,2)', | ||
'rgba(255,255,255,.12)', | ||
'rgba(255,255,256,0.1)', | ||
'rgb(4,4,5%)', | ||
'rgba(5%,5%,5%)', | ||
'rgba(3,3,3%,.3)', | ||
'rgb(101%,101%,101%)', | ||
'rgba(3%,3%,101%,0.3)', | ||
], | ||
}); | ||
}); | ||
|
||
it('should validate ISRC code strings', () => { | ||
test({ | ||
validator: 'isISRC', | ||
|
Large diffs are not rendered by default.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work on this implementation.
But, have 1 request,
rgb, percentage based
.E.g rgb(0%,0%,0%)
, I think it is a valid rgb value, which is not covered in this PR.Here is a reference material https://www.december.com/html/spec/colorrgbaper.html
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good point, I'll try to adjust
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ezkemboi I have doubts how to tackle the percentage based values. On one hand - it's valid rgb, on the other - e.g. in React Native it's not supported. Would you agree for some kind of optional flag, like
includePercentValues
that would be by default set to true, but will enable to set percentages as invalid value?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I totally agree.