@willphan1712000/frontend 1.8.2 → 1.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +41 -29
- package/dist/index.mjs +41 -29
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1703,30 +1703,35 @@ var InputGoogle = (_a) => {
|
|
|
1703
1703
|
const [isFocus, setFocus] = (0, import_react13.useState)(false);
|
|
1704
1704
|
const spanRef = (0, import_react13.useRef)(null);
|
|
1705
1705
|
const inputRef = (0, import_react13.useRef)(null);
|
|
1706
|
-
|
|
1707
|
-
|
|
1706
|
+
const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
|
|
1707
|
+
const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
|
|
1708
|
+
function spanPositionWhenFocused() {
|
|
1708
1709
|
if (spanRef.current) {
|
|
1709
1710
|
spanRef.current.style.top = others2.topFocus;
|
|
1710
1711
|
spanRef.current.style.fontSize = others2.fontSizeFocus;
|
|
1711
1712
|
}
|
|
1712
1713
|
}
|
|
1713
|
-
function
|
|
1714
|
-
setFocus(false);
|
|
1715
|
-
if (value) return;
|
|
1714
|
+
function spanPositionWhenNotFocused() {
|
|
1716
1715
|
if (spanRef.current) {
|
|
1717
1716
|
spanRef.current.style.top = others2.topRelease;
|
|
1718
1717
|
spanRef.current.style.fontSize = others2.fontSizeRelease;
|
|
1719
1718
|
}
|
|
1720
1719
|
}
|
|
1721
|
-
function
|
|
1720
|
+
function onFocus() {
|
|
1721
|
+
setFocus(true);
|
|
1722
|
+
spanPositionWhenFocused();
|
|
1723
|
+
}
|
|
1724
|
+
function offFocus() {
|
|
1725
|
+
setFocus(false);
|
|
1726
|
+
if (value) return;
|
|
1727
|
+
spanPositionWhenNotFocused();
|
|
1728
|
+
}
|
|
1729
|
+
function focus() {
|
|
1722
1730
|
var _a2;
|
|
1723
1731
|
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
1724
1732
|
}
|
|
1725
|
-
const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
|
|
1726
|
-
const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
|
|
1727
1733
|
(0, import_react13.useEffect)(() => {
|
|
1728
|
-
|
|
1729
|
-
transitionOffFocus();
|
|
1734
|
+
if (value) spanPositionWhenFocused();
|
|
1730
1735
|
}, [value]);
|
|
1731
1736
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
|
|
1732
1737
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
@@ -1736,13 +1741,15 @@ var InputGoogle = (_a) => {
|
|
|
1736
1741
|
name: "will-input-google",
|
|
1737
1742
|
ref: inputRef,
|
|
1738
1743
|
value,
|
|
1739
|
-
onChange: (e) =>
|
|
1744
|
+
onChange: (e) => {
|
|
1745
|
+
setValue(e.target.value);
|
|
1746
|
+
},
|
|
1740
1747
|
type: "text",
|
|
1741
1748
|
style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
|
|
1742
|
-
border:
|
|
1749
|
+
border: borderWhenFocused
|
|
1743
1750
|
}),
|
|
1744
|
-
onFocus
|
|
1745
|
-
onBlur:
|
|
1751
|
+
onFocus,
|
|
1752
|
+
onBlur: offFocus
|
|
1746
1753
|
}, props)
|
|
1747
1754
|
),
|
|
1748
1755
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
@@ -1750,9 +1757,9 @@ var InputGoogle = (_a) => {
|
|
|
1750
1757
|
{
|
|
1751
1758
|
ref: spanRef,
|
|
1752
1759
|
style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
|
|
1753
|
-
color:
|
|
1760
|
+
color: labelColorWhenFocused
|
|
1754
1761
|
}),
|
|
1755
|
-
onClick:
|
|
1762
|
+
onClick: focus,
|
|
1756
1763
|
children: label
|
|
1757
1764
|
}
|
|
1758
1765
|
)
|
|
@@ -1824,30 +1831,35 @@ var TextArea = (_a) => {
|
|
|
1824
1831
|
const [isFocus, setFocus] = (0, import_react14.useState)(false);
|
|
1825
1832
|
const spanRef = (0, import_react14.useRef)(null);
|
|
1826
1833
|
const inputRef = (0, import_react14.useRef)(null);
|
|
1827
|
-
|
|
1828
|
-
|
|
1834
|
+
const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
|
|
1835
|
+
const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
|
|
1836
|
+
function spanPositionWhenFocused() {
|
|
1829
1837
|
if (spanRef.current) {
|
|
1830
1838
|
spanRef.current.style.top = others3.topFocus;
|
|
1831
1839
|
spanRef.current.style.fontSize = others3.fontSizeFocus;
|
|
1832
1840
|
}
|
|
1833
1841
|
}
|
|
1834
|
-
function
|
|
1835
|
-
setFocus(false);
|
|
1836
|
-
if (value) return;
|
|
1842
|
+
function spanPositionWhenNotFocused() {
|
|
1837
1843
|
if (spanRef.current) {
|
|
1838
1844
|
spanRef.current.style.top = others3.topRelease;
|
|
1839
1845
|
spanRef.current.style.fontSize = others3.fontSizeRelease;
|
|
1840
1846
|
}
|
|
1841
1847
|
}
|
|
1842
|
-
function
|
|
1848
|
+
function onFocus() {
|
|
1849
|
+
setFocus(true);
|
|
1850
|
+
spanPositionWhenFocused();
|
|
1851
|
+
}
|
|
1852
|
+
function offFocus() {
|
|
1853
|
+
setFocus(false);
|
|
1854
|
+
if (value) return;
|
|
1855
|
+
spanPositionWhenNotFocused();
|
|
1856
|
+
}
|
|
1857
|
+
function focus() {
|
|
1843
1858
|
var _a2;
|
|
1844
1859
|
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
1845
1860
|
}
|
|
1846
|
-
const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
|
|
1847
|
-
const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
|
|
1848
1861
|
(0, import_react14.useEffect)(() => {
|
|
1849
|
-
|
|
1850
|
-
transitionOffFocus();
|
|
1862
|
+
if (value) spanPositionWhenFocused();
|
|
1851
1863
|
}, [value]);
|
|
1852
1864
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: TextArea_styles_default.container, children: [
|
|
1853
1865
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
@@ -1861,8 +1873,8 @@ var TextArea = (_a) => {
|
|
|
1861
1873
|
style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
|
|
1862
1874
|
border: inputBorder
|
|
1863
1875
|
}),
|
|
1864
|
-
onFocus
|
|
1865
|
-
onBlur:
|
|
1876
|
+
onFocus,
|
|
1877
|
+
onBlur: offFocus
|
|
1866
1878
|
}, props)
|
|
1867
1879
|
),
|
|
1868
1880
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
@@ -1872,7 +1884,7 @@ var TextArea = (_a) => {
|
|
|
1872
1884
|
style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
|
|
1873
1885
|
color: labelTextColor
|
|
1874
1886
|
}),
|
|
1875
|
-
onClick:
|
|
1887
|
+
onClick: focus,
|
|
1876
1888
|
children: label
|
|
1877
1889
|
}
|
|
1878
1890
|
)
|
package/dist/index.mjs
CHANGED
|
@@ -1664,30 +1664,35 @@ var InputGoogle = (_a) => {
|
|
|
1664
1664
|
const [isFocus, setFocus] = useState9(false);
|
|
1665
1665
|
const spanRef = useRef8(null);
|
|
1666
1666
|
const inputRef = useRef8(null);
|
|
1667
|
-
|
|
1668
|
-
|
|
1667
|
+
const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
|
|
1668
|
+
const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
|
|
1669
|
+
function spanPositionWhenFocused() {
|
|
1669
1670
|
if (spanRef.current) {
|
|
1670
1671
|
spanRef.current.style.top = others2.topFocus;
|
|
1671
1672
|
spanRef.current.style.fontSize = others2.fontSizeFocus;
|
|
1672
1673
|
}
|
|
1673
1674
|
}
|
|
1674
|
-
function
|
|
1675
|
-
setFocus(false);
|
|
1676
|
-
if (value) return;
|
|
1675
|
+
function spanPositionWhenNotFocused() {
|
|
1677
1676
|
if (spanRef.current) {
|
|
1678
1677
|
spanRef.current.style.top = others2.topRelease;
|
|
1679
1678
|
spanRef.current.style.fontSize = others2.fontSizeRelease;
|
|
1680
1679
|
}
|
|
1681
1680
|
}
|
|
1682
|
-
function
|
|
1681
|
+
function onFocus() {
|
|
1682
|
+
setFocus(true);
|
|
1683
|
+
spanPositionWhenFocused();
|
|
1684
|
+
}
|
|
1685
|
+
function offFocus() {
|
|
1686
|
+
setFocus(false);
|
|
1687
|
+
if (value) return;
|
|
1688
|
+
spanPositionWhenNotFocused();
|
|
1689
|
+
}
|
|
1690
|
+
function focus() {
|
|
1683
1691
|
var _a2;
|
|
1684
1692
|
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
1685
1693
|
}
|
|
1686
|
-
const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
|
|
1687
|
-
const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
|
|
1688
1694
|
useEffect9(() => {
|
|
1689
|
-
|
|
1690
|
-
transitionOffFocus();
|
|
1695
|
+
if (value) spanPositionWhenFocused();
|
|
1691
1696
|
}, [value]);
|
|
1692
1697
|
return /* @__PURE__ */ jsxs12("div", { style: InputGoogle_styles_default.container, children: [
|
|
1693
1698
|
/* @__PURE__ */ jsx15(
|
|
@@ -1697,13 +1702,15 @@ var InputGoogle = (_a) => {
|
|
|
1697
1702
|
name: "will-input-google",
|
|
1698
1703
|
ref: inputRef,
|
|
1699
1704
|
value,
|
|
1700
|
-
onChange: (e) =>
|
|
1705
|
+
onChange: (e) => {
|
|
1706
|
+
setValue(e.target.value);
|
|
1707
|
+
},
|
|
1701
1708
|
type: "text",
|
|
1702
1709
|
style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
|
|
1703
|
-
border:
|
|
1710
|
+
border: borderWhenFocused
|
|
1704
1711
|
}),
|
|
1705
|
-
onFocus
|
|
1706
|
-
onBlur:
|
|
1712
|
+
onFocus,
|
|
1713
|
+
onBlur: offFocus
|
|
1707
1714
|
}, props)
|
|
1708
1715
|
),
|
|
1709
1716
|
/* @__PURE__ */ jsx15(
|
|
@@ -1711,9 +1718,9 @@ var InputGoogle = (_a) => {
|
|
|
1711
1718
|
{
|
|
1712
1719
|
ref: spanRef,
|
|
1713
1720
|
style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
|
|
1714
|
-
color:
|
|
1721
|
+
color: labelColorWhenFocused
|
|
1715
1722
|
}),
|
|
1716
|
-
onClick:
|
|
1723
|
+
onClick: focus,
|
|
1717
1724
|
children: label
|
|
1718
1725
|
}
|
|
1719
1726
|
)
|
|
@@ -1785,30 +1792,35 @@ var TextArea = (_a) => {
|
|
|
1785
1792
|
const [isFocus, setFocus] = useState10(false);
|
|
1786
1793
|
const spanRef = useRef9(null);
|
|
1787
1794
|
const inputRef = useRef9(null);
|
|
1788
|
-
|
|
1789
|
-
|
|
1795
|
+
const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
|
|
1796
|
+
const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
|
|
1797
|
+
function spanPositionWhenFocused() {
|
|
1790
1798
|
if (spanRef.current) {
|
|
1791
1799
|
spanRef.current.style.top = others3.topFocus;
|
|
1792
1800
|
spanRef.current.style.fontSize = others3.fontSizeFocus;
|
|
1793
1801
|
}
|
|
1794
1802
|
}
|
|
1795
|
-
function
|
|
1796
|
-
setFocus(false);
|
|
1797
|
-
if (value) return;
|
|
1803
|
+
function spanPositionWhenNotFocused() {
|
|
1798
1804
|
if (spanRef.current) {
|
|
1799
1805
|
spanRef.current.style.top = others3.topRelease;
|
|
1800
1806
|
spanRef.current.style.fontSize = others3.fontSizeRelease;
|
|
1801
1807
|
}
|
|
1802
1808
|
}
|
|
1803
|
-
function
|
|
1809
|
+
function onFocus() {
|
|
1810
|
+
setFocus(true);
|
|
1811
|
+
spanPositionWhenFocused();
|
|
1812
|
+
}
|
|
1813
|
+
function offFocus() {
|
|
1814
|
+
setFocus(false);
|
|
1815
|
+
if (value) return;
|
|
1816
|
+
spanPositionWhenNotFocused();
|
|
1817
|
+
}
|
|
1818
|
+
function focus() {
|
|
1804
1819
|
var _a2;
|
|
1805
1820
|
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
1806
1821
|
}
|
|
1807
|
-
const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
|
|
1808
|
-
const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
|
|
1809
1822
|
useEffect10(() => {
|
|
1810
|
-
|
|
1811
|
-
transitionOffFocus();
|
|
1823
|
+
if (value) spanPositionWhenFocused();
|
|
1812
1824
|
}, [value]);
|
|
1813
1825
|
return /* @__PURE__ */ jsxs13("div", { style: TextArea_styles_default.container, children: [
|
|
1814
1826
|
/* @__PURE__ */ jsx16(
|
|
@@ -1822,8 +1834,8 @@ var TextArea = (_a) => {
|
|
|
1822
1834
|
style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
|
|
1823
1835
|
border: inputBorder
|
|
1824
1836
|
}),
|
|
1825
|
-
onFocus
|
|
1826
|
-
onBlur:
|
|
1837
|
+
onFocus,
|
|
1838
|
+
onBlur: offFocus
|
|
1827
1839
|
}, props)
|
|
1828
1840
|
),
|
|
1829
1841
|
/* @__PURE__ */ jsx16(
|
|
@@ -1833,7 +1845,7 @@ var TextArea = (_a) => {
|
|
|
1833
1845
|
style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
|
|
1834
1846
|
color: labelTextColor
|
|
1835
1847
|
}),
|
|
1836
|
-
onClick:
|
|
1848
|
+
onClick: focus,
|
|
1837
1849
|
children: label
|
|
1838
1850
|
}
|
|
1839
1851
|
)
|