ColorPicker-CyxxnIJm.js 6.1 KB

1
  1. import{s as F,f as o,L as V,aa as H,ap as P,ab as M,e9 as O,ea as E,ao as d,bs as T,z as I,P as A,Q as m,bF as B,bG as U,eb as D}from"./index-DT8qTvyx.js";var R=function(v){F(r,v);function r(t){var e=v.call(this,t)||this;return e.state={isOpened:!1,isFocused:!1,inputValue:e.props.value||"",tempValue:e.props.value||""},e.open=e.open.bind(e),e.close=e.close.bind(e),e.focus=e.focus.bind(e),e.blur=e.blur.bind(e),e.handleChange=e.handleChange.bind(e),e.handleTempChange=e.handleTempChange.bind(e),e.handleConfirm=e.handleConfirm.bind(e),e.handleFocus=e.handleFocus.bind(e),e.handleBlur=e.handleBlur.bind(e),e.clearValue=e.clearValue.bind(e),e.handleInputChange=e.handleInputChange.bind(e),e.handleClick=e.handleClick.bind(e),e.preview=o.createRef(),e.input=o.createRef(),e}return r.prototype.componentDidUpdate=function(t){var e=this.props;t.value!==e.value&&this.setState({inputValue:e.value||""})},r.prototype.handleFocus=function(){this.setState({isFocused:!0})},r.prototype.handleBlur=function(){this.setState({isFocused:!1,inputValue:this.props.value})},r.prototype.focus=function(){this.input.current&&this.input.current.focus()},r.prototype.blur=function(){this.input.current&&this.input.current.blur()},r.prototype.open=function(t){this.props.disabled||this.setState({isOpened:!0},t)},r.prototype.close=function(){this.setState({isOpened:!1})},r.prototype.clearValue=function(){var t=this.props,e=t.onChange,a=t.resetValue;e(a||"")},r.prototype.handleClick=function(){this.state.isOpened?this.close():this.open(this.focus)},r.prototype.handleInputChange=function(t){var e=this;if(this.props.allowCustomColor){var a=this.props.onChange;this.setState({inputValue:t.currentTarget.value},function(){var s=e.validateColor(e.state.inputValue);s&&a(e.state.inputValue)})}},r.prototype.validateColor=function(t){if(t===""||t==="inherit"||t==="transparent")return!1;var e=document.createElement("img");return e.style.color="rgb(0, 0, 0)",e.style.color=t,e.style.color!=="rgb(0, 0, 0)"?!0:(e.style.color="rgb(255, 255, 255)",e.style.color=t,e.style.color!=="rgb(255, 255, 255)")},r.prototype.handleChange=function(t){var e=this.props,a=e.onChange,s=e.format;a(s==="rgba"?"rgba(".concat(t.rgb.r,", ").concat(t.rgb.g,", ").concat(t.rgb.b,", ").concat(t.rgb.a,")"):s==="rgb"?"rgb(".concat(t.rgb.r,", ").concat(t.rgb.g,", ").concat(t.rgb.b,")"):s==="hexa"?this.rgbaToHex(t.rgb.r,t.rgb.g,t.rgb.b,t.rgb.a):s==="hsl"?"hsl(".concat(Math.round(t.hsl.h),", ").concat(Math.round(t.hsl.s*100),"%, ").concat(Math.round(t.hsl.l*100),"%)"):t.hex)},r.prototype.handleTempChange=function(t){var e=this.state.tempValue,a=this.props.format;a==="rgba"?e="rgba(".concat(t.rgb.r,", ").concat(t.rgb.g,", ").concat(t.rgb.b,", ").concat(t.rgb.a,")"):a==="rgb"?e="rgb(".concat(t.rgb.r,", ").concat(t.rgb.g,", ").concat(t.rgb.b,")"):a==="hexa"?e=this.rgbaToHex(t.rgb.r,t.rgb.g,t.rgb.b,t.rgb.a):a==="hsl"?e="hsl(".concat(Math.round(t.hsl.h),", ").concat(Math.round(t.hsl.s*100),"%, ").concat(Math.round(t.hsl.l*100),"%)"):e=t.hex,this.setState({tempValue:e})},r.prototype.handleConfirm=function(){var t=this.props.onChange,e=this.state.tempValue;t(e),this.close()},r.prototype.rgbaToHex=function(t,e,a,s){if(t<0||t>255||e<0||e>255||a<0||a>255)return"#00000000";(typeof s>"u"||s>1)&&(s=1),s<.01&&(s=0);var i=function(C){return C.toString(16).padStart(2,"0").toUpperCase()},p=i(Math.round(s*255)),f=i(t),u=i(e),h=i(a);return"#".concat(f).concat(u).concat(h).concat(p)},r.prototype.render=function(){var t=this,e=this.props,a=e.classPrefix,s=e.className,i=e.popoverClassName,p=e.value,f=e.placeholder,u=e.disabled,h=e.popOverContainer,C=e.popOverContainerSelector,y=e.format,N=e.clearable,S=e.placement,l=e.classnames,c=e.presetColors,k=e.allowCustomColor,g=e.mobileUI,_=this.props.translate,b=this.state.isOpened,w=this.state.isFocused,x=this.state.tempValue;return o.createElement("div",{className:l("ColorPicker",{"is-disabled":u,"is-focused":w,"is-opened":b},s)},o.createElement("span",{onClick:this.handleClick,className:l("ColorPicker-preview")},o.createElement("i",{ref:this.preview,className:"".concat(a,"ColorPicker-previewIcon"),style:{background:this.state.inputValue||"#ccc"}})),o.createElement("input",{ref:this.input,type:"text",autoComplete:"off",size:10,className:l("ColorPicker-input"),value:this.state.inputValue||"",placeholder:_(f),disabled:u,onChange:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,readOnly:g}),N&&!u&&p?o.createElement("a",{onClick:this.clearValue,className:l("ColorPicker-clear")},o.createElement(V,{icon:"input-clear",className:"icon"})):null,o.createElement("span",{className:l("ColorPicker-arrow")},o.createElement(V,{icon:"right-arrow-bold",className:"icon",onClick:this.handleClick})),!g&&b?o.createElement(H,{placement:S||"auto",target:function(){return P.findDOMNode(t)},onHide:this.close,container:h||function(){return P.findDOMNode(t)},containerSelector:C,rootClose:!1,show:!0},o.createElement(M,{classPrefix:a,className:l("ColorPicker-popover",i),onHide:this.close,overlay:!0},k?o.createElement(O,{styles:{},disableAlpha:!!~["rgb","hex"].indexOf(y),color:p,presetColors:c,onChangeComplete:this.handleChange}):o.createElement(E,{color:p,colors:Array.isArray(c)?c.filter(function(n){return typeof n=="string"||d(n)}).map(function(n){return typeof n=="string"?n:d(n)?n==null?void 0:n.color:n}):void 0,onChangeComplete:this.handleChange}))):null,g&&o.createElement(T,{className:l("".concat(a,"ColorPicker-popup")),container:h,isShow:b,onHide:this.handleClick,showConfirm:!0,onConfirm:this.handleConfirm},k?o.createElement(O,{styles:{},disableAlpha:!!~["rgb","hex"].indexOf(y),color:x,presetColors:c,onChangeComplete:this.handleTempChange}):o.createElement(E,{color:x,colors:Array.isArray(c)?c.filter(function(n){return typeof n=="string"||d(n)}).map(function(n){return typeof n=="string"?n:d(n)?n==null?void 0:n.color:n}):void 0,onChangeComplete:this.handleTempChange})))},r.defaultProps={format:"hex",clearable:!0,placeholder:"ColorPicker.placeholder",allowCustomColor:!0},I([A,m("design:type",Function),m("design:paramtypes",[String]),m("design:returntype",void 0)],r.prototype,"validateColor",null),r}(o.PureComponent),G=B(U(D(R,{value:"onChange"})));export{R as ColorControl,G as default};