You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
var color = data.hex ? (0, _tinycolor2.default)(data.hex) : (0, _tinycolor2.default)(data);
27612
27612
var hsl = color.toHsl();
27613
27613
var hsv = color.toHsv();
27614
+
var rgb = color.toRgb();
27615
+
var hex = color.toHex();
27614
27616
if (hsl.s === 0) {
27615
27617
hsl.h = oldHue || 0;
27616
27618
hsv.h = oldHue || 0;
27617
27619
}
27620
+
var transparent = hex === '000000' && rgb.a === 0;
27618
27621
27619
27622
return {
27620
27623
hsl: hsl,
27621
-
hex: '#' + color.toHex(),
27622
-
rgb: color.toRgb(),
27624
+
hex: transparent ? 'transparent' : '#' + hex,
27625
+
rgb: rgb,
27623
27626
hsv: hsv,
27624
27627
oldHue: data.h || oldHue || hsl.h,
27625
27628
source: data.source
@@ -28873,6 +28876,8 @@
28873
28876
});
28874
28877
exports.Swatch = undefined;
28875
28878
28879
+
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; };
28880
+
28876
28881
var _react = __webpack_require__(2);
28877
28882
28878
28883
var _react2 = _interopRequireDefault(_react);
@@ -28881,34 +28886,45 @@
28881
28886
28882
28887
var _reactcss2 = _interopRequireDefault(_reactcss);
module.exports = "---\nid: api-color\ntitle: color\n---\nColor controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.\n\nColor accepts either a string of a hex color `'#333'` or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`. Both rgb and hsl will also take a `a: 1` value for alpha.\n\n```\nimport React from 'react';\nimport { SketchPicker } from 'react-color';\n\nclass Component extends React.Component {\n state = {\n background: '#fff',\n };\n\n handleChangeComplete = (color) => {\n this.setState({ background: color.hex });\n };\n\n render() {\n return (\n <SketchPicker\n color={ this.state.background }\n onChangeComplete={ this.handleChangeComplete }\n />\n );\n }\n}\n```\nIn this case, the color picker will initialize with the color `#fff`. When the color is changed, `handleChangeComplete` will fire and set the new color to state.\n";
40809
+
module.exports = "---\nid: api-color\ntitle: color\n---\nColor controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.\n\nColor accepts either a string of a hex color `'#333'` or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`. Both rgb and hsl will also take a `a: 1` value for alpha. You can also use `transparent`.\n\n```\nimport React from 'react';\nimport { SketchPicker } from 'react-color';\n\nclass Component extends React.Component {\n state = {\n background: '#fff',\n };\n\n handleChangeComplete = (color) => {\n this.setState({ background: color.hex });\n };\n\n render() {\n return (\n <SketchPicker\n color={ this.state.background }\n onChangeComplete={ this.handleChangeComplete }\n />\n );\n }\n}\n```\nIn this case, the color picker will initialize with the color `#fff`. When the color is changed, `handleChangeComplete` will fire and set the new color to state.\n";
Copy file name to clipboardExpand all lines: docs/documentation/03.01-color.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: color
4
4
---
5
5
Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.
6
6
7
-
Color accepts either a string of a hex color `'#333'` or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`. Both rgb and hsl will also take a `a: 1` value for alpha.
7
+
Color accepts either a string of a hex color `'#333'` or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`. Both rgb and hsl will also take a `a: 1` value for alpha. You can also use `transparent`.
0 commit comments