@zym-com/input-search
Version:
搜索输入框
174 lines (173 loc) • 7.9 kB
JavaScript
import S, { useRef as u } from "react";
var g = { 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 m = S, b = Symbol.for("react.element"), $ = Symbol.for("react.fragment"), T = Object.prototype.hasOwnProperty, B = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, C = { key: !0, ref: !0, __self: !0, __source: !0 };
function y(l, e, a) {
var o, r = {}, n = null, c = null;
a !== void 0 && (n = "" + a), e.key !== void 0 && (n = "" + e.key), e.ref !== void 0 && (c = e.ref);
for (o in e)
T.call(e, o) && !C.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: b, type: l, key: n, ref: c, props: r, _owner: B.current };
}
d.Fragment = $;
d.jsx = y;
d.jsxs = y;
g.exports = d;
var i = g.exports;
const _ = "_boxClass_1qhzk_1", v = "_inputClass_1qhzk_4", s = {
boxClass: _,
inputClass: v
}, k = ({ ...l }) => {
const e = l.configuration;
console.log(l, e);
const a = u(null);
l.dataSource || requestAnimationFrame(() => {
a.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 n = {};
e.borderStyleChild && (n = {
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",
// lineHeight: baseStyle.textStyle.lineHeight>0?baseStyle.textStyle.lineHeight+"px":props.base.height + "px",
textAlign: e.levelalignment,
// cursor: "pointer",
...n,
opacity: e.transparency ? e.transparency : 1,
paddingLeft: e.valuePadding.l + "px",
paddingRight: e.valuePadding.r + "px",
boxSizing: "border-box"
// "&:focus": {
// border:"none"
// }
// "::WebkitInputPlaceholder": {
// color: "red"
// },
};
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: a.current.value });
}
};
return /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsxs(
"div",
{
style: {
width: l.base.width + "px",
height: l.base.height + "px"
},
className: s.boxClass,
children: [
e.placeholderTextStyle && /* @__PURE__ */ 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"};
}
` }),
/* @__PURE__ */ i.jsx("input", { ref: a, 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),
/* @__PURE__ */ i.jsx("div", { dangerouslySetInnerHTML: { __html: x }, onClick: () => p.btnClick("onclick", e.clickTrigger) })
]
}
) });
};
export {
k as default
};