taro-react-uilib 1.0.2
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.esm.js +437 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +453 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +455 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/styles/components/backIcon.scss +10 -0
- package/dist/styles/components/button.scss +99 -0
- package/dist/styles/components/captcha.scss +4 -0
- package/dist/styles/components/formInput.scss +120 -0
- package/dist/styles/components/image.scss +3 -0
- package/dist/styles/components/images/icon-arrow-right.png +0 -0
- package/dist/styles/components/images/loading.png +0 -0
- package/dist/styles/components/index.scss +9 -0
- package/dist/styles/components/list.scss +84 -0
- package/dist/styles/components/loading.scss +55 -0
- package/dist/styles/components/mask.scss +17 -0
- package/dist/styles/components/page.scss +9 -0
- package/dist/styles/index.scss +6 -0
- package/dist/styles/themes/base.scss +162 -0
- package/dist/styles/themes/default.scss +25 -0
- package/dist/styles/themes/variable.scss +20 -0
- package/lib/components/BankIcon/bank.js +33 -0
- package/lib/components/BankIcon/bank.js.map +1 -0
- package/lib/components/BankIcon/index.js +12 -0
- package/lib/components/BankIcon/index.js.map +1 -0
- package/lib/components/Button/index.js +36 -0
- package/lib/components/Button/index.js.map +1 -0
- package/lib/components/Captcha/index.js +60 -0
- package/lib/components/Captcha/index.js.map +1 -0
- package/lib/components/Dialog/Alert/index.js +35 -0
- package/lib/components/Dialog/Alert/index.js.map +1 -0
- package/lib/components/Dialog/Dialog/index.js +31 -0
- package/lib/components/Dialog/Dialog/index.js.map +1 -0
- package/lib/components/Dialog/index.js +6 -0
- package/lib/components/Dialog/index.js.map +1 -0
- package/lib/components/FormInput/index.js +55 -0
- package/lib/components/FormInput/index.js.map +1 -0
- package/lib/components/Image/index.js +33 -0
- package/lib/components/Image/index.js.map +1 -0
- package/lib/components/List/index.js +21 -0
- package/lib/components/List/index.js.map +1 -0
- package/lib/components/Loading/index.js +14 -0
- package/lib/components/Loading/index.js.map +1 -0
- package/lib/components/Mask/index.js +17 -0
- package/lib/components/Mask/index.js.map +1 -0
- package/lib/components/Page/index.js +15 -0
- package/lib/components/Page/index.js.map +1 -0
- package/lib/hooks/index.js +10 -0
- package/lib/hooks/index.js.map +1 -0
- package/lib/index.js +10 -0
- package/lib/index.js.map +1 -0
- package/lib/types/index.js +2 -0
- package/lib/types/index.js.map +1 -0
- package/lib/utils/index.js +51 -0
- package/lib/utils/index.js.map +1 -0
- package/package.json +132 -0
- package/readme.md +25 -0
- package/types/components/BankIcon/bank.d.ts +18 -0
- package/types/components/BankIcon/index.d.ts +11 -0
- package/types/components/Button/index.d.ts +41 -0
- package/types/components/Captcha/index.d.ts +17 -0
- package/types/components/Dialog/Alert/index.d.ts +10 -0
- package/types/components/Dialog/Dialog/index.d.ts +19 -0
- package/types/components/Dialog/index.d.ts +9 -0
- package/types/components/FormInput/index.d.ts +44 -0
- package/types/components/Image/index.d.ts +10 -0
- package/types/components/List/index.d.ts +14 -0
- package/types/components/Loading/index.d.ts +9 -0
- package/types/components/Mask/index.d.ts +10 -0
- package/types/components/Page/index.d.ts +10 -0
- package/types/hooks/index.d.ts +1 -0
- package/types/index.d.ts +9 -0
- package/types/types/index.d.ts +3 -0
- package/types/utils/index.d.ts +6 -0
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
|
|
2
|
+
#{$xh-prefix}-loading {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
|
|
5
|
+
&-main {
|
|
6
|
+
position: absolute;
|
|
7
|
+
top: 50%;
|
|
8
|
+
left: 50%;
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
width: 120px;
|
|
13
|
+
height: 120px;
|
|
14
|
+
background: rgba(0, 0, 0, 1);
|
|
15
|
+
border-radius: 20px;
|
|
16
|
+
opacity: 0.7;
|
|
17
|
+
transform: translate(-50%, -50%);
|
|
18
|
+
z-index: 9999999;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&-icon {
|
|
22
|
+
width: 60px;
|
|
23
|
+
height: 60px;
|
|
24
|
+
background-image: url('./images/loading.png');
|
|
25
|
+
background-size: 100%;
|
|
26
|
+
animation: rotate 1s infinite linear;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&-mask {
|
|
30
|
+
position: fixed;
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 0;
|
|
33
|
+
right: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
z-index: 9999998;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dark-mask {
|
|
39
|
+
background: rgba(0, 0, 0, .3);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes rotate {
|
|
44
|
+
0% {
|
|
45
|
+
transform: rotate(0deg);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
50% {
|
|
49
|
+
transform: rotate(-180deg);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
100% {
|
|
53
|
+
transform: rotate(-360deg);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
|
|
2
|
+
#{$xh-prefix}-mask {
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
background-color: $mask-color;
|
|
9
|
+
z-index: 998;
|
|
10
|
+
|
|
11
|
+
&-normal {
|
|
12
|
+
background-color: #FFF;
|
|
13
|
+
}
|
|
14
|
+
&-transparent {
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
line-height: 1;
|
|
4
|
+
min-height: 100vh;
|
|
5
|
+
font-family: 'PingFangSC-Regular', 'Helvetica', 'Droid Sans', 'Arial',
|
|
6
|
+
sans-serif;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
article,
|
|
10
|
+
aside,
|
|
11
|
+
footer,
|
|
12
|
+
header,
|
|
13
|
+
nav,
|
|
14
|
+
section,
|
|
15
|
+
main,
|
|
16
|
+
figcaption,
|
|
17
|
+
figure,
|
|
18
|
+
menu,
|
|
19
|
+
details {
|
|
20
|
+
display: block;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
audio,
|
|
24
|
+
canvas,
|
|
25
|
+
video {
|
|
26
|
+
display: inline-block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
img {
|
|
30
|
+
display: block;
|
|
31
|
+
border: 0;
|
|
32
|
+
}
|
|
33
|
+
image {
|
|
34
|
+
width: initial;
|
|
35
|
+
height: initial;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h1,
|
|
39
|
+
h2,
|
|
40
|
+
h3,
|
|
41
|
+
h4,
|
|
42
|
+
h5,
|
|
43
|
+
h6 {
|
|
44
|
+
margin: 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
font-weight: normal;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
p {
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
address,
|
|
55
|
+
cite,
|
|
56
|
+
dfn,
|
|
57
|
+
em,
|
|
58
|
+
var {
|
|
59
|
+
font-style: normal;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
ul,
|
|
63
|
+
ol {
|
|
64
|
+
margin: 0;
|
|
65
|
+
padding: 0;
|
|
66
|
+
list-style-type: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
a {
|
|
70
|
+
background-color: transparent;
|
|
71
|
+
font-size: inherit;
|
|
72
|
+
color: inherit;
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
|
|
75
|
+
&:active,
|
|
76
|
+
&:hover {
|
|
77
|
+
outline: 0;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:focus {
|
|
82
|
+
outline: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
button,
|
|
86
|
+
input,
|
|
87
|
+
select,
|
|
88
|
+
textarea {
|
|
89
|
+
margin: 0;
|
|
90
|
+
font-size: inherit;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
button,
|
|
94
|
+
html [type='button'],
|
|
95
|
+
[type='reset'],
|
|
96
|
+
[type='submit'] {
|
|
97
|
+
padding: 0;
|
|
98
|
+
border: 0;
|
|
99
|
+
color: inherit;
|
|
100
|
+
background-color: transparent;
|
|
101
|
+
-webkit-appearance: button;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
button::-moz-focus-inner,
|
|
106
|
+
input::-moz-focus-inner {
|
|
107
|
+
border: 0;
|
|
108
|
+
padding: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
input {
|
|
112
|
+
padding: 0;
|
|
113
|
+
line-height: normal;
|
|
114
|
+
|
|
115
|
+
&::-webkit-input-placeholder {
|
|
116
|
+
font-weight: 300;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&::-ms-input-placeholder {
|
|
120
|
+
font-weight: 300;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&::-moz-placeholder {
|
|
124
|
+
font-weight: 300;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
[type='number'] {
|
|
129
|
+
-moz-appearance: textfield;
|
|
130
|
+
|
|
131
|
+
&::-webkit-inner-spin-button,
|
|
132
|
+
&::-webkit-outer-spin-button {
|
|
133
|
+
margin: 0;
|
|
134
|
+
height: auto;
|
|
135
|
+
-webkit-appearance: none;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
[type='search'] {
|
|
140
|
+
-webkit-appearance: textfield;
|
|
141
|
+
|
|
142
|
+
&::-webkit-search-cancel-button,
|
|
143
|
+
&::-webkit-search-decoration {
|
|
144
|
+
-webkit-appearance: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
textarea {
|
|
149
|
+
overflow: auto;
|
|
150
|
+
resize: none;
|
|
151
|
+
-webkit-appearance: none;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
select {
|
|
155
|
+
-webkit-appearance: none;
|
|
156
|
+
background-color: #fff;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
table {
|
|
160
|
+
border-collapse: collapse;
|
|
161
|
+
border-spacing: 0;
|
|
162
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
$color-primary: #f6ab00;
|
|
2
|
+
$color-primary-dark: #f98f33;
|
|
3
|
+
$color-primary-reverse: #fff;
|
|
4
|
+
$color-disabled: #e6e6e6;
|
|
5
|
+
$color-warning: #ff512d;
|
|
6
|
+
$color-warning-light: #ff5a66;
|
|
7
|
+
|
|
8
|
+
$background-color: #f6f6f6;
|
|
9
|
+
|
|
10
|
+
$body-background-color: $background-color;
|
|
11
|
+
$component-background-color: $background-color;
|
|
12
|
+
|
|
13
|
+
$font-color: #333;
|
|
14
|
+
$font-color-secondary: #666;
|
|
15
|
+
$font-color-tertiary: #999;
|
|
16
|
+
|
|
17
|
+
$border-color: #e6e6e6;
|
|
18
|
+
|
|
19
|
+
$btn-font-size: 34px;
|
|
20
|
+
$btn-color: linear-gradient(90deg, $color-primary 0%, $color-primary-dark 100%);
|
|
21
|
+
$btn-shadow-primary: 0 10px 20px rgba(247, 174, 5, 0.3);
|
|
22
|
+
|
|
23
|
+
$mask-color: rgba(0, 0, 0, 0.3);
|
|
24
|
+
|
|
25
|
+
$border-radius: 10px;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@import './default.scss';
|
|
2
|
+
|
|
3
|
+
$xh-prefix: '.xh';
|
|
4
|
+
:root {
|
|
5
|
+
--color-primary: #{$color-primary};
|
|
6
|
+
--color-primary-dark: #{$color-primary-dark};
|
|
7
|
+
--color-primary-reverse: #{$color-primary-reverse};
|
|
8
|
+
--color-disabled: #{$color-disabled};
|
|
9
|
+
--color-warning: #{$color-warning};
|
|
10
|
+
--color-warning-light: #{$color-warning-light};
|
|
11
|
+
--background-color: #{$background-color};
|
|
12
|
+
--body-background-color: #{$body-background-color};
|
|
13
|
+
--font-color: #{$font-color};
|
|
14
|
+
--font-color-secondary: #{$font-color-secondary};
|
|
15
|
+
--font-color-tertiary: #{$font-color-tertiary};
|
|
16
|
+
--border-color: #{$border-color};
|
|
17
|
+
--btn-color: #{$btn-color};
|
|
18
|
+
--btn-shadow-primary: #{$btn-shadow-primary};
|
|
19
|
+
--mask-color: #{$mask-color};
|
|
20
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import img102 from './images/102.png';
|
|
2
|
+
import img103 from './images/103.png';
|
|
3
|
+
import img104 from './images/104.png';
|
|
4
|
+
import img105 from './images/105.png';
|
|
5
|
+
import img301 from './images/301.png';
|
|
6
|
+
import img302 from './images/302.png';
|
|
7
|
+
import img303 from './images/303.png';
|
|
8
|
+
import img304 from './images/304.png';
|
|
9
|
+
import img305 from './images/305.png';
|
|
10
|
+
import img306 from './images/306.png';
|
|
11
|
+
import img307 from './images/307.png';
|
|
12
|
+
import img308 from './images/308.png';
|
|
13
|
+
import img309 from './images/309.png';
|
|
14
|
+
import img310 from './images/310.png';
|
|
15
|
+
import img403 from './images/403.png';
|
|
16
|
+
export default {
|
|
17
|
+
'102': img102,
|
|
18
|
+
'103': img103,
|
|
19
|
+
'104': img104,
|
|
20
|
+
'105': img105,
|
|
21
|
+
'301': img301,
|
|
22
|
+
'302': img302,
|
|
23
|
+
'303': img303,
|
|
24
|
+
'304': img304,
|
|
25
|
+
'305': img305,
|
|
26
|
+
'306': img306,
|
|
27
|
+
'307': img307,
|
|
28
|
+
'308': img308,
|
|
29
|
+
'309': img309,
|
|
30
|
+
'310': img310,
|
|
31
|
+
'403': img403
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=bank.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bank.js","sourceRoot":"","sources":["../../../src/components/BankIcon/bank.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Image from '../../../src/components/Image';
|
|
3
|
+
import bankImage from './bank';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import './index.scss';
|
|
6
|
+
const XHBankIcon = (props) => {
|
|
7
|
+
const { code, className, size } = props;
|
|
8
|
+
const cls = classNames('xh-bank-icon', `item-${size}`, className);
|
|
9
|
+
return (React.createElement(Image, { src: bankImage[code], className: cls }));
|
|
10
|
+
};
|
|
11
|
+
export default XHBankIcon;
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BankIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,MAAM,+BAA+B,CAAA;AACjD,OAAO,SAAS,MAAM,QAAQ,CAAA;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,cAAc,CAAA;AAQrB,MAAM,UAAU,GAAoB,CAAC,KAAK,EAAE,EAAE;IAE5C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAEzC,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,CAAA;IAE/D,OAAO,CACL,oBAAC,KAAK,IAAC,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,GAAI,CAChD,CAAA;AACH,CAAC,CAAA;AACD,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { useTaroEnv } from '../../hooks';
|
|
4
|
+
import { Button } from '@tarojs/components';
|
|
5
|
+
import './index.scss';
|
|
6
|
+
const XhButton = props => {
|
|
7
|
+
const { disabled = false, type = 'default', size = 'normal', shape = 'round', children, className, htmlType, formType, text, openType, lang, sessionFrom, sendMessageTitle, sendMessagePath, sendMessageImg, showMessageCard, appParameter, onGetUserInfo, onGetPhoneNumber, onOpenSetting, onError, onContact, onClick, } = props;
|
|
8
|
+
const state = useTaroEnv();
|
|
9
|
+
const classObj = classNames('xh-button', {
|
|
10
|
+
'xh-button-default': type === 'default',
|
|
11
|
+
'xh-button-primary': type === 'primary',
|
|
12
|
+
'xh-button-secondary': type === 'secondary',
|
|
13
|
+
'xh-button-warn': type === 'warn',
|
|
14
|
+
'xh-button-square': shape === 'square',
|
|
15
|
+
'xh-button-round': shape === 'round',
|
|
16
|
+
'xh-button-normal': size === 'normal',
|
|
17
|
+
'xh-button-small': size === 'mini',
|
|
18
|
+
'xh-button-full': size === 'full',
|
|
19
|
+
'xh-button-disabled': disabled,
|
|
20
|
+
'xh-button-webutton': state === 'WEAPP'
|
|
21
|
+
}, className);
|
|
22
|
+
const handleClick = e => {
|
|
23
|
+
state === 'WEB' && e.nativeEvent.stopImmediatePropagation();
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
onClick && onClick(e);
|
|
26
|
+
};
|
|
27
|
+
const weButton = (React.createElement(Button, { className: classObj, formType: formType, openType: openType, lang: lang, type: type, sessionFrom: sessionFrom, sendMessageTitle: sendMessageTitle, sendMessagePath: sendMessagePath, sendMessageImg: sendMessageImg, showMessageCard: showMessageCard, appParameter: appParameter, onGetUserInfo: onGetUserInfo, onGetPhoneNumber: onGetPhoneNumber, onOpenSetting: onOpenSetting, onError: onError, onContact: onContact, onClick: onClick, disabled: disabled }, children));
|
|
28
|
+
if (state === 'WEAPP') {
|
|
29
|
+
return weButton;
|
|
30
|
+
}
|
|
31
|
+
return (
|
|
32
|
+
// eslint-disable-next-line react/button-has-type
|
|
33
|
+
React.createElement("button", { className: classObj, disabled: disabled, type: htmlType, onClick: disabled ? undefined : handleClick }, children || text));
|
|
34
|
+
};
|
|
35
|
+
export default XhButton;
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAA;AACpD,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAI3C,OAAO,cAAc,CAAA;AA2CrB,MAAM,QAAQ,GAAsB,KAAK,CAAC,EAAE;IAC1C,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,OAAO,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,eAAe,EACf,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,SAAS,EACT,OAAO,GACR,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,UAAU,EAAE,CAAA;IAE1B,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,EAAE;QACvC,mBAAmB,EAAE,IAAI,KAAK,SAAS;QACvC,mBAAmB,EAAE,IAAI,KAAK,SAAS;QACvC,qBAAqB,EAAE,IAAI,KAAK,WAAW;QAC3C,gBAAgB,EAAE,IAAI,KAAK,MAAM;QACjC,kBAAkB,EAAE,KAAK,KAAK,QAAQ;QACtC,iBAAiB,EAAE,KAAK,KAAK,OAAO;QACpC,kBAAkB,EAAE,IAAI,KAAK,QAAQ;QACrC,iBAAiB,EAAE,IAAI,KAAK,MAAM;QAClC,gBAAgB,EAAE,IAAI,KAAK,MAAM;QACjC,oBAAoB,EAAE,QAAQ;QAC9B,oBAAoB,EAAE,KAAK,KAAK,OAAO;KACxC,EAAE,SAAS,CAAC,CAAA;IAEb,MAAM,WAAW,GAA2C,CAAC,CAAC,EAAE;QAC9D,KAAK,KAAK,KAAK,IAAI,CAAC,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAA;QAC3D,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,CACf,oBAAC,MAAM,IACL,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAA2B,EACjC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,QAAQ,CAAU,CACrB,CAAA;IAED,IAAI,KAAK,KAAK,OAAO,EAAE;QACrB,OAAO,QAAQ,CAAA;KAChB;IAID,OAAO;IACL,iDAAiD;IACjD,gCACE,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAE1C,QAAQ,IAAI,IAAI,CACV,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect, useImperativeHandle, forwardRef, useMemo, } from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import Button from "../Button";
|
|
4
|
+
import "./index.scss";
|
|
5
|
+
const CountdownButton = forwardRef((props, fromRef) => {
|
|
6
|
+
const { timeout, text = "获取验证码", onClick, className } = props;
|
|
7
|
+
const intervalRef = useRef();
|
|
8
|
+
const [time, setTime] = useState(0);
|
|
9
|
+
const [disabled, setDisabled] = useState(false);
|
|
10
|
+
const reset = () => {
|
|
11
|
+
intervalRef.current && clearInterval(intervalRef.current);
|
|
12
|
+
setTime(0);
|
|
13
|
+
setDisabled(false);
|
|
14
|
+
};
|
|
15
|
+
useImperativeHandle(fromRef, () => ({
|
|
16
|
+
reset,
|
|
17
|
+
}), [intervalRef.current]);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
intervalRef.current && clearInterval(intervalRef.current);
|
|
20
|
+
return () => {
|
|
21
|
+
intervalRef.current && clearInterval(intervalRef.current);
|
|
22
|
+
};
|
|
23
|
+
}, []);
|
|
24
|
+
// 倒计时
|
|
25
|
+
const buttonText = useMemo(() => {
|
|
26
|
+
if (time) {
|
|
27
|
+
return `${time}秒`;
|
|
28
|
+
}
|
|
29
|
+
return text;
|
|
30
|
+
}, [time, text]);
|
|
31
|
+
const counter = () => {
|
|
32
|
+
const now = Date.now();
|
|
33
|
+
let nowStamp = now;
|
|
34
|
+
if (intervalRef.current) {
|
|
35
|
+
clearInterval(intervalRef.current);
|
|
36
|
+
}
|
|
37
|
+
setTime(timeout);
|
|
38
|
+
intervalRef.current = setInterval(() => {
|
|
39
|
+
nowStamp = Date.now();
|
|
40
|
+
const overTimeStamp = now + timeout * 1000 + 100;
|
|
41
|
+
const leftTime = Math.max(Math.floor((overTimeStamp - nowStamp) / 1000), 0);
|
|
42
|
+
if (leftTime === 0) {
|
|
43
|
+
intervalRef.current && clearInterval(intervalRef.current);
|
|
44
|
+
setDisabled(false);
|
|
45
|
+
}
|
|
46
|
+
setTime(leftTime);
|
|
47
|
+
}, 1000);
|
|
48
|
+
};
|
|
49
|
+
const handleClick = () => {
|
|
50
|
+
setDisabled(true);
|
|
51
|
+
const promise = onClick();
|
|
52
|
+
promise.then(counter).catch(() => {
|
|
53
|
+
console.log("callback reject....");
|
|
54
|
+
setDisabled(false);
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
return (React.createElement(Button, Object.assign({}, props, { className: classnames("xh-downbutton", className), disabled: disabled, onClick: handleClick, ref: fromRef, type: "secondary", shape: "square", size: "mini" }), buttonText));
|
|
58
|
+
});
|
|
59
|
+
export default CountdownButton;
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Captcha/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { createRef } from "react";
|
|
2
|
+
import ReactDOM from "react-dom";
|
|
3
|
+
import { showModal } from "@tarojs/taro";
|
|
4
|
+
import Dialog from "../Dialog";
|
|
5
|
+
import Button from "../../../../src/components/Button";
|
|
6
|
+
import "./index.scss";
|
|
7
|
+
const Alert = (props) => {
|
|
8
|
+
const { title = "温馨提示", content, buttonText = "我知道了" } = props;
|
|
9
|
+
return new Promise((resolve) => {
|
|
10
|
+
if (process.env.TARO_ENV === "h5") {
|
|
11
|
+
const div = document.createElement("div");
|
|
12
|
+
document.body.appendChild(div);
|
|
13
|
+
const dialogRef = createRef();
|
|
14
|
+
const alertFooter = (React.createElement(Button, { type: "primary", className: "alert-button", onClick: () => {
|
|
15
|
+
var _a;
|
|
16
|
+
(_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.close();
|
|
17
|
+
ReactDOM.unmountComponentAtNode(div);
|
|
18
|
+
document.body.removeChild(div);
|
|
19
|
+
resolve();
|
|
20
|
+
} }, buttonText));
|
|
21
|
+
ReactDOM.render(React.createElement(Dialog, { header: title, footer: alertFooter, content: content, visible: true, ref: dialogRef }), div);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
showModal({
|
|
25
|
+
title: title,
|
|
26
|
+
content: content,
|
|
27
|
+
showCancel: false,
|
|
28
|
+
confirmColor: "#f6ab00",
|
|
29
|
+
confirmText: buttonText,
|
|
30
|
+
}).then(() => resolve());
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
export default Alert;
|
|
35
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AACpD,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,MAAqB,MAAM,WAAW,CAAC;AAC9C,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,cAAc,CAAC;AAStB,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAiB,EAAE;IACjD,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAC/D,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI,EAAE;YACjC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YAE/B,MAAM,SAAS,GAAG,SAAS,EAAa,CAAC;YACzC,MAAM,WAAW,GAAG,CAClB,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,GAAG,EAAE;;oBACZ,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC3B,QAAQ,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC;oBACrC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;oBAC/B,OAAO,EAAE,CAAC;gBACZ,CAAC,IAEA,UAAU,CACJ,CACV,CAAC;YACF,QAAQ,CAAC,MAAM,CACb,oBAAC,MAAM,IACL,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,OAAO,EAChB,OAAO,QACP,GAAG,EAAE,SAAS,GACd,EACF,GAAG,CACJ,CAAC;SACH;aAAM;YACL,SAAS,CAAC;gBACR,KAAK,EAAE,KAAe;gBACtB,OAAO,EAAE,OAAiB;gBAC1B,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,SAAS;gBACvB,WAAW,EAAE,UAAoB;aAClC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React, { useState, useImperativeHandle, forwardRef, useEffect, } from "react";
|
|
2
|
+
import ReactDOM from "react-dom";
|
|
3
|
+
import classNames from "classnames";
|
|
4
|
+
import { View } from "@tarojs/components";
|
|
5
|
+
import { CSSTransition } from "react-transition-group";
|
|
6
|
+
import Mask from "../../../../src/components/Mask";
|
|
7
|
+
import "./index.scss";
|
|
8
|
+
const Dialog = forwardRef((props, fromRef) => {
|
|
9
|
+
const { header, content, footer, className = "", visible } = props;
|
|
10
|
+
const [selfVisible, setSelfVisible] = useState(false);
|
|
11
|
+
useImperativeHandle(fromRef, () => ({
|
|
12
|
+
close: () => {
|
|
13
|
+
setSelfVisible(false);
|
|
14
|
+
},
|
|
15
|
+
}));
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
console.log(visible);
|
|
18
|
+
setSelfVisible(visible);
|
|
19
|
+
}, [visible]);
|
|
20
|
+
const dialogcls = classNames("xh-dialog", className);
|
|
21
|
+
const DialogMain = (React.createElement(View, null,
|
|
22
|
+
React.createElement(Mask, null),
|
|
23
|
+
React.createElement(CSSTransition, { in: selfVisible, className: dialogcls, timeout: 200 },
|
|
24
|
+
React.createElement(View, null,
|
|
25
|
+
React.createElement(View, { className: "xh-dialog-header" }, header),
|
|
26
|
+
React.createElement(View, { className: "xh-dialog-content" }, content),
|
|
27
|
+
React.createElement(View, { className: "xh-dialog-footer" }, footer)))));
|
|
28
|
+
return ReactDOM.createPortal(DialogMain, document.body);
|
|
29
|
+
});
|
|
30
|
+
export default Dialog;
|
|
31
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,QAAQ,EACR,mBAAmB,EACnB,UAAU,EACV,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,cAAc,CAAC;AAYtB,MAAM,MAAM,GAAG,UAAU,CAAyB,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,mBAAmB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,GAAG,EAAE;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAErD,MAAM,UAAU,GAAG,CACjB,oBAAC,IAAI;QACH,oBAAC,IAAI,OAAG;QACR,oBAAC,aAAa,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG;YAChE,oBAAC,IAAI;gBACH,oBAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,IAAE,MAAM,CAAQ;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ;gBACpD,oBAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,IAAE,MAAM,CAAQ,CAC7C,CACO,CACX,CACR,CAAC;IAEF,OAAO,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1D,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,eAA2C,MAAM,UAAU,CAAC;AACnE,OAAO,KAAqB,MAAM,SAAS,CAAC;AAO5C,MAAM,MAAM,GAAG,eAA+C,CAAC;AAC/D,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AAErB,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { useRef, useImperativeHandle } from "react";
|
|
2
|
+
import { Input, View, Text } from "@tarojs/components";
|
|
3
|
+
import { getEnv } from "@tarojs/taro";
|
|
4
|
+
import classNames from "classnames";
|
|
5
|
+
import { inputRange } from "../../utils/index";
|
|
6
|
+
import "./index.scss";
|
|
7
|
+
const FormInput = React.forwardRef((props, formRef) => {
|
|
8
|
+
const taroEnv = getEnv();
|
|
9
|
+
const { onChange, maxlength, value, type, placeholder, label, labelHtml, RightComponent, onBlur, pattern, LeftComponent, LeftIcon, name, readonly = false, withArrow = false, password, } = props;
|
|
10
|
+
function handleChange(e) {
|
|
11
|
+
let inputValue = inputRange(e.target.value);
|
|
12
|
+
e.target.value = inputValue;
|
|
13
|
+
onChange && onChange(inputValue);
|
|
14
|
+
}
|
|
15
|
+
function handleBlur(e) {
|
|
16
|
+
let inputValue = inputRange(e.target.value);
|
|
17
|
+
onBlur && onBlur(inputValue);
|
|
18
|
+
}
|
|
19
|
+
const inputRef = useRef(null);
|
|
20
|
+
useImperativeHandle(formRef, () => ({
|
|
21
|
+
focus: () => {
|
|
22
|
+
inputRef.current.focus();
|
|
23
|
+
},
|
|
24
|
+
}));
|
|
25
|
+
if (taroEnv !== "WEB") {
|
|
26
|
+
return (React.createElement(View, { className: "form-input" },
|
|
27
|
+
React.createElement(View, { className: "form-input-left" },
|
|
28
|
+
label && (React.createElement(View, { className: "form-input-left-label" },
|
|
29
|
+
label,
|
|
30
|
+
React.createElement(View, { className: "form-input-left-label-icon" }, LeftIcon))),
|
|
31
|
+
labelHtml && (React.createElement("label", { dangerouslySetInnerHTML: { __html: labelHtml }, className: "label" })),
|
|
32
|
+
React.createElement(View, null, LeftComponent)),
|
|
33
|
+
React.createElement(View, { className: "form-input-center" }, readonly ? (React.createElement(Text, { className: classNames("form-input-readonly", {
|
|
34
|
+
"form-input-placeholder": !value,
|
|
35
|
+
}) }, value || placeholder)) : (React.createElement(Input, { ref: inputRef, className: "form-input-center-native", maxlength: maxlength, name: name, placeholder: placeholder, type: type, value: value, onBlur: handleBlur, onInput: handleChange, password: password }))),
|
|
36
|
+
React.createElement(View, { className: "form-input-right" },
|
|
37
|
+
RightComponent,
|
|
38
|
+
withArrow && React.createElement(View, { className: "arrow" }))));
|
|
39
|
+
}
|
|
40
|
+
return (React.createElement("div", { className: "form-input" },
|
|
41
|
+
React.createElement("div", { className: "form-input-left" },
|
|
42
|
+
label && (React.createElement("label", { className: "form-input-left-label" },
|
|
43
|
+
label,
|
|
44
|
+
React.createElement(View, { className: "form-input-left-label-icon" }, LeftIcon))),
|
|
45
|
+
labelHtml && (React.createElement("label", { dangerouslySetInnerHTML: { __html: labelHtml }, className: "label" })),
|
|
46
|
+
React.createElement("div", null, LeftComponent)),
|
|
47
|
+
React.createElement("div", { className: "form-input-center" }, readonly ? (React.createElement("p", { className: classNames("form-input-readonly", {
|
|
48
|
+
"form-input-placeholder": !value,
|
|
49
|
+
}) }, value || placeholder)) : (React.createElement("input", { ref: inputRef, className: "form-input-center-native", maxLength: maxlength, name: name, pattern: pattern, placeholder: placeholder, type: type, value: value, onBlur: handleBlur, onInput: handleChange }))),
|
|
50
|
+
React.createElement("div", { className: "form-input-right" },
|
|
51
|
+
RightComponent,
|
|
52
|
+
withArrow && React.createElement("i", { className: "arrow" }))));
|
|
53
|
+
});
|
|
54
|
+
export default FormInput;
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,MAAM,EAAE,mBAAmB,EAAO,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAc,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAuBtB,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,KAAqB,EAAE,OAAkB,EAAE,EAAE;IAC5C,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;IACzB,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,EACd,MAAM,EACN,OAAO,EACP,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,SAAS,YAAY,CAAC,CAAC;QACrB,IAAI,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC;QAC5B,QAAQ,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,CAAC;IAED,SAAS,UAAU,CAAC,CAAC;QACnB,IAAI,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,GAAG,EAAE;YACV,QAAQ,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,IAAI,OAAO,KAAK,KAAK,EAAE;QACrB,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAC,YAAY;YAC1B,oBAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB;gBAC9B,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,SAAS,EAAC,uBAAuB;oBACpC,KAAK;oBACN,oBAAC,IAAI,IAAC,SAAS,EAAC,4BAA4B,IAAE,QAAQ,CAAQ,CACzD,CACR;gBACA,SAAS,IAAI,CACZ,+BACE,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,SAAS,EAAC,OAAO,GACjB,CACH;gBACD,oBAAC,IAAI,QAAE,aAAa,CAAQ,CACvB;YACP,oBAAC,IAAI,IAAC,SAAS,EAAC,mBAAmB,IAChC,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IACH,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;oBAC3C,wBAAwB,EAAE,CAAC,KAAK;iBACjC,CAAC,IAED,KAAK,IAAI,WAAW,CAChB,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,0BAA0B,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAA0B,EAChC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,GAClB,CACH,CACI;YACP,oBAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB;gBAC/B,cAAc;gBACd,SAAS,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAC,OAAO,GAAG,CACnC,CACF,CACR,CAAC;KACH;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,IAAI,CACR,+BAAO,SAAS,EAAC,uBAAuB;gBACrC,KAAK;gBACN,oBAAC,IAAI,IAAC,SAAS,EAAC,4BAA4B,IAAE,QAAQ,CAAQ,CACxD,CACT;YACA,SAAS,IAAI,CACZ,+BACE,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,SAAS,EAAC,OAAO,GACjB,CACH;YACD,iCAAM,aAAa,CAAO,CACtB;QACN,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,QAAQ,CAAC,CAAC,CAAC,CACV,2BACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;gBAC3C,wBAAwB,EAAE,CAAC,KAAK;aACjC,CAAC,IAED,KAAK,IAAI,WAAW,CACnB,CACL,CAAC,CAAC,CAAC,CACF,+BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,0BAA0B,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,YAAY,GACrB,CACH,CACG;QACN,6BAAK,SAAS,EAAC,kBAAkB;YAC9B,cAAc;YACd,SAAS,IAAI,2BAAG,SAAS,EAAC,OAAO,GAAG,CACjC,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React, { useEffect, useMemo, useState } from "react";
|
|
2
|
+
import { Image } from "@tarojs/components";
|
|
3
|
+
import { getImageInfo } from "@tarojs/taro";
|
|
4
|
+
import "./index.scss";
|
|
5
|
+
import { useTaroEnv } from "../../../src/hooks";
|
|
6
|
+
const XHImage = (props) => {
|
|
7
|
+
const { width = "", height = "", src, className } = props;
|
|
8
|
+
const [defaultSize, setDefaultSize] = useState({});
|
|
9
|
+
// const style = { width: `${width}px`, height: `${height}px` }
|
|
10
|
+
const state = useTaroEnv();
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (state !== "WEB" && !className) {
|
|
13
|
+
getImageInfo({
|
|
14
|
+
src,
|
|
15
|
+
success: (res) => {
|
|
16
|
+
if (res.errMsg === "getImageInfo:ok") {
|
|
17
|
+
console.log(res);
|
|
18
|
+
setDefaultSize({ width: res.width, height: res.height });
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}, [state]);
|
|
24
|
+
const size = useMemo(() => {
|
|
25
|
+
if (width || height) {
|
|
26
|
+
return { width, height };
|
|
27
|
+
}
|
|
28
|
+
return defaultSize;
|
|
29
|
+
}, [width, height, defaultSize]);
|
|
30
|
+
return state !== "WEB" ? (React.createElement(Image, { src: src, style: size, className: className })) : (React.createElement("img", { src: src, alt: "", style: size, className: className }));
|
|
31
|
+
};
|
|
32
|
+
export default XHImage;
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD,MAAM,OAAO,GAAmB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,+DAA+D;IAC/D,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE;YACjC,YAAY,CAAC;gBACX,GAAG;gBACH,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;oBACf,IAAI,GAAG,CAAC,MAAM,KAAK,iBAAiB,EAAE;wBACpC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;wBACjB,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;qBAC1D;gBACH,CAAC;aACF,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;SAC1B;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,OAAO,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CACvB,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAC5D,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|