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.
Files changed (75) hide show
  1. package/dist/index.esm.js +437 -0
  2. package/dist/index.esm.js.map +1 -0
  3. package/dist/index.js +453 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.umd.js +455 -0
  6. package/dist/index.umd.js.map +1 -0
  7. package/dist/styles/components/backIcon.scss +10 -0
  8. package/dist/styles/components/button.scss +99 -0
  9. package/dist/styles/components/captcha.scss +4 -0
  10. package/dist/styles/components/formInput.scss +120 -0
  11. package/dist/styles/components/image.scss +3 -0
  12. package/dist/styles/components/images/icon-arrow-right.png +0 -0
  13. package/dist/styles/components/images/loading.png +0 -0
  14. package/dist/styles/components/index.scss +9 -0
  15. package/dist/styles/components/list.scss +84 -0
  16. package/dist/styles/components/loading.scss +55 -0
  17. package/dist/styles/components/mask.scss +17 -0
  18. package/dist/styles/components/page.scss +9 -0
  19. package/dist/styles/index.scss +6 -0
  20. package/dist/styles/themes/base.scss +162 -0
  21. package/dist/styles/themes/default.scss +25 -0
  22. package/dist/styles/themes/variable.scss +20 -0
  23. package/lib/components/BankIcon/bank.js +33 -0
  24. package/lib/components/BankIcon/bank.js.map +1 -0
  25. package/lib/components/BankIcon/index.js +12 -0
  26. package/lib/components/BankIcon/index.js.map +1 -0
  27. package/lib/components/Button/index.js +36 -0
  28. package/lib/components/Button/index.js.map +1 -0
  29. package/lib/components/Captcha/index.js +60 -0
  30. package/lib/components/Captcha/index.js.map +1 -0
  31. package/lib/components/Dialog/Alert/index.js +35 -0
  32. package/lib/components/Dialog/Alert/index.js.map +1 -0
  33. package/lib/components/Dialog/Dialog/index.js +31 -0
  34. package/lib/components/Dialog/Dialog/index.js.map +1 -0
  35. package/lib/components/Dialog/index.js +6 -0
  36. package/lib/components/Dialog/index.js.map +1 -0
  37. package/lib/components/FormInput/index.js +55 -0
  38. package/lib/components/FormInput/index.js.map +1 -0
  39. package/lib/components/Image/index.js +33 -0
  40. package/lib/components/Image/index.js.map +1 -0
  41. package/lib/components/List/index.js +21 -0
  42. package/lib/components/List/index.js.map +1 -0
  43. package/lib/components/Loading/index.js +14 -0
  44. package/lib/components/Loading/index.js.map +1 -0
  45. package/lib/components/Mask/index.js +17 -0
  46. package/lib/components/Mask/index.js.map +1 -0
  47. package/lib/components/Page/index.js +15 -0
  48. package/lib/components/Page/index.js.map +1 -0
  49. package/lib/hooks/index.js +10 -0
  50. package/lib/hooks/index.js.map +1 -0
  51. package/lib/index.js +10 -0
  52. package/lib/index.js.map +1 -0
  53. package/lib/types/index.js +2 -0
  54. package/lib/types/index.js.map +1 -0
  55. package/lib/utils/index.js +51 -0
  56. package/lib/utils/index.js.map +1 -0
  57. package/package.json +132 -0
  58. package/readme.md +25 -0
  59. package/types/components/BankIcon/bank.d.ts +18 -0
  60. package/types/components/BankIcon/index.d.ts +11 -0
  61. package/types/components/Button/index.d.ts +41 -0
  62. package/types/components/Captcha/index.d.ts +17 -0
  63. package/types/components/Dialog/Alert/index.d.ts +10 -0
  64. package/types/components/Dialog/Dialog/index.d.ts +19 -0
  65. package/types/components/Dialog/index.d.ts +9 -0
  66. package/types/components/FormInput/index.d.ts +44 -0
  67. package/types/components/Image/index.d.ts +10 -0
  68. package/types/components/List/index.d.ts +14 -0
  69. package/types/components/Loading/index.d.ts +9 -0
  70. package/types/components/Mask/index.d.ts +10 -0
  71. package/types/components/Page/index.d.ts +10 -0
  72. package/types/hooks/index.d.ts +1 -0
  73. package/types/index.d.ts +9 -0
  74. package/types/types/index.d.ts +3 -0
  75. 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,9 @@
1
+
2
+ @import '../../styles/themes/variable.scss';
3
+ @import '../../styles/themes/default.scss';
4
+
5
+ #{$xh-prefix}-page {
6
+ width: 100%;
7
+ min-height: 100vh;
8
+ background: #fff;
9
+ }
@@ -0,0 +1,6 @@
1
+ @import './themes/variable.scss';
2
+ @import './themes/default.scss';
3
+ @import './themes/base.scss';
4
+
5
+ @import './components/index.scss'
6
+
@@ -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,6 @@
1
+ import DialogComponent from "./Dialog";
2
+ import Alert from "./Alert";
3
+ const Dialog = DialogComponent;
4
+ Dialog.alert = Alert;
5
+ export default Dialog;
6
+ //# sourceMappingURL=index.js.map
@@ -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":"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"}
@@ -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"}