@eeacms/react-chart-editor/lib/components/widgets/ColorPicker.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _SketchFields=_interopRequireDefault(require("react-color/lib/components/sketch/SketchFields"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _tinycolor=_interopRequireDefault(require("tinycolor2"));var _common=require("react-color/lib/components/common");var _reactColor=require("react-color");var _plotlyIcons=require("plotly-icons");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};const extractRGB=c=>c.rgb||c;const getColorSource=c=>c.source==="hex"?c.hex:extractRGB(c);const toTinyColor=c=>(0,_tinycolor.default)(getColorSource(c));class Custom extends _react.Component{render(){const{onChangeComplete}=this.props;return _react.default.createElement("div",{className:"colorpicker__outer"},_react.default.createElement("div",{className:"colorpicker__controls +flex"},_react.default.createElement("div",{className:"colorpicker__sliders"},_react.default.createElement("div",{className:"colorpicker__slider"},_react.default.createElement(_common.Hue,this.props)),_react.default.createElement("div",{className:"colorpicker__slider"},_react.default.createElement(_common.Alpha,this.props)))),_react.default.createElement("div",{className:"colorpicker__saturation"},_react.default.createElement(_common.Saturation,this.props)),_react.default.createElement("div",{className:"colorpicker__custom-input"},_react.default.createElement(_SketchFields.default,_extends({},this.props,{onChange:onChangeComplete}))))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}Custom.propTypes={rgb:_propTypes.default.object,onChangeComplete:_propTypes.default.func,onVisibilityChange:_propTypes.default.func};const CustomColorPicker=(0,_reactColor.CustomPicker)(Custom);class ColorPicker extends _react.Component{constructor(props){super(props);this.state={isVisible:false};this.onSelectedColorChange=this.onSelectedColorChange.bind(this);this.toggleVisible=this.toggleVisible.bind(this)}onSelectedColorChange(newColor){const color=toTinyColor(newColor);this.props.onColorChange(color.toRgbString())}toggleVisible(){this.setState(prevState=>({isVisible:!prevState.isVisible}),()=>{var _this$props$onVisibil,_this$props;(_this$props$onVisibil=(_this$props=this.props).onVisibilityChange)===null||_this$props$onVisibil===void 0||_this$props$onVisibil.call(_this$props,this.state.isVisible)})}render(){var _this$props$selectedC;const selectedColor=(0,_tinycolor.default)(this.props.selectedColor);const colorText=selectedColor.toHexString();const rgbString=selectedColor._a>=0?selectedColor.toRgbString():"rgb(".concat(selectedColor._r,",").concat(selectedColor._g,",").concat(selectedColor._b,")");const swatchStyle={backgroundColor:rgbString};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{className:"colorpicker__container"},_react.default.createElement("div",{className:"colorpicker"},_react.default.createElement("div",{className:"colorpicker__swatch +cursor-clickable",style:swatchStyle,onClick:this.toggleVisible})),_react.default.createElement("div",{className:"colorpicker__selected-color +hover-grey",onClick:this.toggleVisible},colorText),((_this$props$selectedC=this.props.selectedColorscale)===null||_this$props$selectedC===void 0?void 0:_this$props$selectedC.length)>2&&_react.default.createElement("div",{style:{marginLeft:"0.5rem",flex:"1"}},_react.default.createElement(_plotlyIcons.TrashIcon,{size:"20px",onClick:this.props.onDeleteColor,color:"var(--color-accent)",style:{cursor:"pointer",float:"right"}}))),this.state.isVisible&&_react.default.createElement(CustomColorPicker,{color:rgbString,onChangeComplete:this.onSelectedColorChange}))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}ColorPicker.propTypes={onColorChange:_propTypes.default.func.isRequired,onVisibilityChange:_propTypes.default.func,onDeleteColor:_propTypes.default.func,selectedColor:_propTypes.default.string,selectedColorscale:_propTypes.default.array};const _default=ColorPicker;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(extractRGB,"extractRGB","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(getColorSource,"getColorSource","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(toTinyColor,"toTinyColor","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(Custom,"Custom","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(CustomColorPicker,"CustomColorPicker","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(ColorPicker,"ColorPicker","/react-chart-editor/src/components/widgets/ColorPicker.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/components/widgets/ColorPicker.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=ColorPicker.js.map