@zym-com/input-search
Version:
搜索输入框
69 lines (68 loc) • 6.71 kB
JavaScript
;const g=require("react");var y={exports:{}},d={};/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var u=g,m=Symbol.for("react.element"),b=Symbol.for("react.fragment"),$=Object.prototype.hasOwnProperty,T=u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,B={key:!0,ref:!0,__self:!0,__source:!0};function S(l,e,n){var o,r={},a=null,c=null;n!==void 0&&(a=""+n),e.key!==void 0&&(a=""+e.key),e.ref!==void 0&&(c=e.ref);for(o in e)$.call(e,o)&&!B.hasOwnProperty(o)&&(r[o]=e[o]);if(l&&l.defaultProps)for(o in e=l.defaultProps,e)r[o]===void 0&&(r[o]=e[o]);return{$$typeof:m,type:l,key:a,ref:c,props:r,_owner:T.current}}d.Fragment=b;d.jsx=S;d.jsxs=S;y.exports=d;var i=y.exports;const C="_boxClass_1qhzk_1",_="_inputClass_1qhzk_4",s={boxClass:C,inputClass:_},v=({...l})=>{const e=l.configuration;console.log(l,e);const n=g.useRef(null);l.dataSource||requestAnimationFrame(()=>{n.current.value=""});let o="";if(e.textShadowChild){const t=e.shadow;o=t.shadowOffsetX+"px "+t.shadowOffsetY+"px "+t.shadowBlur+"px "+t.shadowColor}let r={};if(e.backgroundStyleChild){let t="";e.bgColorSelect=="solidBgColor"?t=e.solidBgColor:e.bgColorSelect=="gradientBgColor"?t="linear-gradient("+e.anamorphism.direction+"deg, "+e.anamorphism.startVal+", "+e.anamorphism.endVal+")":e.bgColorSelect=="BgImage"&&(t="url("+e.image+") center center / "+e.imageSize+" no-repeat "),r={background:t,borderRadius:e.borderRadiusName?e.borderRadiusName:0}}let a={};e.borderStyleChild&&(a={borderStyle:e.borderStyle,borderWidth:e.borderWidthName+"px",borderColor:e.borderColor});const c={width:l.base.width+"px",height:l.base.height+"px",...r,textShadow:o,color:e.textStyle.color,fontFamily:e.textStyle.fontFamily,fontSize:e.textStyle.fontSize+"px",fontStyle:e.textStyle.fontStyle,fontWeight:e.textStyle.fontWeight,letterSpacing:e.textStyle.letterSpacing+"px",textAlign:e.levelalignment,...a,opacity:e.transparency?e.transparency:1,paddingLeft:e.valuePadding.l+"px",paddingRight:e.valuePadding.r+"px",boxSizing:"border-box"};let x="";if(e.searchBtnWH){let t="";e.searchBtnType&&(e.searchBtnType=="solidBgColor"?t=`<span style='
color: ${e.searchBtnTextStyle.color};
font-family: ${e.searchBtnTextStyle.fontFamily};
font-size: ${e.searchBtnTextStyle.fontSize}px;
font-style: ${e.searchBtnTextStyle.fontStyle};
font-weight: ${e.searchBtnTextStyle.fontWeight};
letter-spacing: ${e.searchBtnTextStyle.letterSpacing}px;
text-indent: ${e.searchBtnTextStyle.letterSpacing}px;
'>${e.searchBtnText}</span>`:e.searchBtnType=="BgImage"&&(t=`
<img style="
width: ${e.searchBtnImgWH.W}px;
height: ${e.searchBtnImgWH.H}px;"
src=${e.searchBtnImage} />
`)),x=`<div style='
position: absolute;
right: ${e.searchBtnRT.R}px;
top:${e.searchBtnRT.T}%;
transform: translateY(-${e.searchBtnRT.T}%);
width: ${e.searchBtnWH.W}px;
height: ${e.searchBtnWH.H}px;
display:flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: ${e.searchBtnBgStype?e.searchBtnBgStype=="solidBgColor"?e.searchBtnBgColor:"url("+e.searchBtnBgImage+") center center / cover no-repeat ":""};
border-radius: ${e.searchBtnBgStype?e.searchBtnBorderRadius:0}px;
'>${t}</div>`}const p={inputValueChange:(t,h,f)=>{f.valueTrigger&&h=="onchange"&&l.bindCallbackParams("onchange",{value:t.target.value}),f.blurTrigger&&h=="onblur"&&l.bindCallbackParams("onblur",{value:t.target.value})},btnClick:(t,h)=>{h&&l.bindCallbackParams(t,{value:n.current.value})}};return i.jsx(i.Fragment,{children:i.jsxs("div",{style:{width:l.base.width+"px",height:l.base.height+"px"},className:s.boxClass,children:[e.placeholderTextStyle&&i.jsx("style",{children:`
.${s.boxClass} input::-webkit-input-placeholder{
color: ${e.placeholderTextStyle.color};
font-family: ${e.placeholderTextStyle.fontFamily};
font-size: ${e.placeholderTextStyle.fontSize+"px"};
font-style: ${e.placeholderTextStyle.fontStyle};
font-weight: ${e.placeholderTextStyle.fontWeight};
letter-spacing: ${e.placeholderTextStyle.letterSpacing+"px"};
}
.${s.boxClass} input:-moz-placeholder{
color: ${e.placeholderTextStyle.color};
font-family: ${e.placeholderTextStyle.fontFamily};
font-size: ${e.placeholderTextStyle.fontSize+"px"};
font-style: ${e.placeholderTextStyle.fontStyle};
font-weight: ${e.placeholderTextStyle.fontWeight};
letter-spacing: ${e.placeholderTextStyle.letterSpacing+"px"};
}
.${s.boxClass} input::-moz-placeholder{
color: ${e.placeholderTextStyle.color};
font-family: ${e.placeholderTextStyle.fontFamily};
font-size: ${e.placeholderTextStyle.fontSize+"px"};
font-style: ${e.placeholderTextStyle.fontStyle};
font-weight: ${e.placeholderTextStyle.fontWeight};
letter-spacing: ${e.placeholderTextStyle.letterSpacing+"px"};
}
.${s.boxClass} input:-ms-input-placeholder{
color: ${e.placeholderTextStyle.color};
font-family: ${e.placeholderTextStyle.fontFamily};
font-size: ${e.placeholderTextStyle.fontSize+"px"};
font-style: ${e.placeholderTextStyle.fontStyle};
font-weight: ${e.placeholderTextStyle.fontWeight};
letter-spacing: ${e.placeholderTextStyle.letterSpacing+"px"};
}
`}),i.jsx("input",{ref:n,type:"text",defaultValue:l.dataSource,className:s.inputClass,style:c,placeholder:e.placeholderValue,onChange:t=>p.inputValueChange(t,"onchange",e),onBlur:t=>p.inputValueChange(t,"onblur",e)},l.dataSource),i.jsx("div",{dangerouslySetInnerHTML:{__html:x},onClick:()=>p.btnClick("onclick",e.clickTrigger)})]})})};module.exports=v;