近23万优秀开发者
24 |您的专属云端开发团队
25 |近23万优秀开发者
43 |您的专属云端开发团队
44 |近23万优秀开发者
62 |您的专属云端开发团队
63 |近23万优秀开发者
81 |您的专属云端开发团队
82 |项目名称
17 |项目描述
18 |
19 |
20 |
项目名称
34 |项目描述
35 |
36 |
37 |
项目名称
51 |项目描述
52 |
53 |
54 |
项目名称
68 |项目描述
69 |
70 |
71 |
{header}
14 |= Partial
>( 12 | defaultProps: DP, 13 | Cmp: ComponentType
14 | ) => { 15 | // 提取出必须的属性 16 | type RequiredProps = Partial
;
17 | // 重新创建我们的属性定义，通过一个相交类型，将所有的原始属性标记成可选的，必选属性标记成可选的
18 | type Props = Partial ) 含有预定义的children 和
30 | // (defaultProps,displayName等等...)
31 | const Button: SFC {clicksCount}
36 |
39 |
41 |
44 | = { props: P };
13 | const defaultProps: DefaultProps = { props: {} };
14 |
15 | type Props = Partial<
16 | {
17 | children: RenderCallback | ReactNode;
18 | render: RenderCallback;
19 | component: ComponentType
21 | >;
22 |
23 | type RenderCallback = (args: ToggleableComponentProps) => JSX.Element;
24 |
25 | export type ToggleableComponentProps = {
26 | show: State['show'];
27 | toggle: Toggleable['toggle'];
28 | } & P;
29 |
30 | const updateShowState = (prevState: State) => ({ show: !prevState.show });
31 |
32 | export default class Toggleable
16 | 还没有账户？创建新账户
17 |
13 |
15 | {show ? children : null}
16 |
17 | );
18 |
19 | type Props = { title: string };
20 | const ToggleableMenu: SFC{title}
14 |
13 |
14 |
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/pages/user/register/form.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Input,
4 | InputAdornment,
5 | IconButton,
6 | Button,
7 | FormControl,
8 | Select,
9 | MenuItem,
10 | InputLabel,
11 | StyleRulesCallback,
12 | } from '@material-ui/core';
13 | import { StyleRules, withStyles } from '@material-ui/core/styles';
14 | import { Visibility, VisibilityOff } from '@material-ui/icons';
15 |
16 | export interface Props {
17 | classes: { [key: string]: string };
18 | }
19 |
20 | interface State {
21 | showPassword: boolean;
22 | showEnterPassword: boolean;
23 | params: {
24 | [key: string]: any;
25 | };
26 | sendCode: boolean;
27 | [key: string]: any;
28 | }
29 |
30 | const StyledSelect = withStyles({
31 | icon: {
32 | display: 'none',
33 | },
34 | })(Select);
35 |
36 | const styles = theme => ({
37 | form: {
38 | padding: '0px 50px 50px 50px',
39 | },
40 | formControl: {
41 | minWidth: 120,
42 | width: '100%',
43 | },
44 | formSelectControl: {
45 | width: 'calc(50% - 6px)',
46 | },
47 | formLeftSelectControl: {
48 | marginRight: 6,
49 | },
50 | formRightSelectControl: {
51 | marginLeft: 6,
52 | },
53 | input: {
54 | height: 60,
55 | marginTop: '0px !important',
56 | icon: {
57 | fontSize: 40,
58 | },
59 | },
60 | button: {
61 | minWidth: 115,
62 | TextAlign: 'right',
63 | // textAlign: 'right',
64 | color: '#FF40AEA8',
65 | },
66 | submitButton: {
67 | marginTop: 50,
68 | borderRadius: 0,
69 | color: '#FFFFFF',
70 | width: '100%',
71 | backgroundColor: '#40AEA8',
72 | fontSize: 20,
73 | },
74 | });
75 | class RegisterForm extends React.Component登录
15 |
22 |
28 |
120 |
221 |
222 | );
223 | }
224 | }
225 |
226 | export default withStyles(styles)(RegisterForm);
227 |
228 | // tslint:disable //——忽略该行以下所有代码出现的错误提示
229 | // tslint:enable //——当前ts文件重新启用tslint
230 | // tslint:disable-line——忽略当前行代码出现的错误提示
231 | // tslint:disable-next-line——忽略下一行代码出现的错误提示
232 |
--------------------------------------------------------------------------------
/src/pages/user/register/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Sign from 'component/user/Sign';
3 | import RegisterForm, { Props } from './form';
4 |
5 | type State = any
6 |
7 | export default class Index extends React.Component',
31 | });
32 |
33 | /**
34 | * Updates configuration.
35 | *
36 | * NProgress.configure({
37 | * minimum: 0.1
38 | * });
39 | */
40 | NProgress.configure = function(options) {
41 | var key,
42 | value;
43 | for (key in options) {
44 | if (Object.prototype.hasOwnProperty.call(options, key)) {
45 | value = options[key];
46 | if (value !== undefined && options.hasOwnProperty(key)) Settings[key] = value;
47 | }
48 | }
49 |
50 | return this;
51 | };
52 |
53 | /**
54 | * Last number.
55 | */
56 |
57 | NProgress.status = null;
58 |
59 | /**
60 | * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
61 | *
62 | * NProgress.set(0.4);
63 | * NProgress.set(1.0);
64 | */
65 |
66 | NProgress.set = function(n) {
67 | var started = NProgress.isStarted();
68 |
69 | n = clamp(n, Settings.minimum, 1);
70 | NProgress.status = n === 1 ? null : n;
71 |
72 | var progress = NProgress.render(!started),
73 | bar = progress.querySelector(Settings.barSelector),
74 | speed = Settings.speed,
75 | ease = Settings.easing;
76 |
77 | progress.offsetWidth; /* Repaint */
78 |
79 | queue(function(next) {
80 | // Set positionUsing if it hasn't already been set
81 | if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
82 |
83 | // Add transition
84 | css(bar, barPositionCSS(n, speed, ease));
85 |
86 | if (n === 1) {
87 | // Fade out
88 | css(progress, {
89 | transition: 'none',
90 | opacity: 1,
91 | });
92 | progress.offsetWidth; /* Repaint */
93 |
94 | setTimeout(function() {
95 | css(progress, {
96 | transition: 'all ' + speed + 'ms linear',
97 | opacity: 0,
98 | });
99 | setTimeout(function() {
100 | NProgress.remove();
101 | next();
102 | }, speed);
103 | }, speed);
104 | } else {
105 | setTimeout(next, speed);
106 | }
107 | });
108 |
109 | return this;
110 | };
111 |
112 | NProgress.isStarted = function() {
113 | return typeof NProgress.status === 'number';
114 | };
115 |
116 | /**
117 | * Shows the progress bar.
118 | * This is the same as setting the status to 0%, except that it doesn't go backwards.
119 | *
120 | * NProgress.start();
121 | *
122 | */
123 | NProgress.start = function() {
124 | if (!NProgress.status) NProgress.set(0);
125 |
126 | var work = function() {
127 | setTimeout(function() {
128 | if (!NProgress.status) return;
129 | NProgress.trickle();
130 | work();
131 | }, Settings.trickleSpeed);
132 | };
133 |
134 | if (Settings.trickle) work();
135 |
136 | return this;
137 | };
138 |
139 | /**
140 | * Hides the progress bar.
141 | * This is the *sort of* the same as setting the status to 100%, with the
142 | * difference being `done()` makes some placebo effect of some realistic motion.
143 | *
144 | * NProgress.done();
145 | *
146 | * If `true` is passed, it will show the progress bar even if its hidden.
147 | *
148 | * NProgress.done(true);
149 | */
150 |
151 | NProgress.done = function(force) {
152 | if (!force && !NProgress.status) return this;
153 |
154 | return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
155 | };
156 |
157 | /**
158 | * Increments by a random amount.
159 | */
160 |
161 | NProgress.inc = function(amount) {
162 | var n = NProgress.status;
163 |
164 | if (!n) {
165 | return NProgress.start();
166 | } else {
167 | if (typeof amount !== 'number') {
168 | amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
169 | }
170 |
171 | n = clamp(n + amount, 0, 0.994);
172 | return NProgress.set(n);
173 | }
174 | };
175 |
176 | NProgress.trickle = function() {
177 | return NProgress.inc(Math.random() * Settings.trickleRate);
178 | };
179 |
180 | /**
181 | * Waits for all supplied jQuery promises and
182 | * increases the progress as the promises resolve.
183 | *
184 | * @param $promise jQUery Promise
185 | */
186 | (function() {
187 | var initial = 0,
188 | current = 0;
189 |
190 | NProgress.promise = function($promise) {
191 | if (!$promise || $promise.state() === 'resolved') {
192 | return this;
193 | }
194 |
195 | if (current === 0) {
196 | NProgress.start();
197 | }
198 |
199 | initial++;
200 | current++;
201 |
202 | $promise.always(function() {
203 | current--;
204 | if (current === 0) {
205 | initial = 0;
206 | NProgress.done();
207 | } else {
208 | NProgress.set((initial - current) / initial);
209 | }
210 | });
211 |
212 | return this;
213 | };
214 | })();
215 |
216 | /**
217 | * (Internal) renders the progress bar markup based on the `template`
218 | * setting.
219 | */
220 |
221 | NProgress.render = function(fromStart) {
222 | if (NProgress.isRendered()) return document.getElementById('nprogress');
223 |
224 | addClass(document.documentElement, 'nprogress-busy');
225 |
226 | var progress = document.createElement('div');
227 | progress.id = 'nprogress';
228 | progress.innerHTML = Settings.template;
229 |
230 | var bar = progress.querySelector(Settings.barSelector),
231 | perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
232 | parent = document.querySelector(Settings.parent),
233 | spinner;
234 |
235 | css(bar, {
236 | transition: 'all 0 linear',
237 | transform: 'translate3d(' + perc + '%,0,0)',
238 | });
239 |
240 | if (!Settings.showSpinner) {
241 | spinner = progress.querySelector(Settings.spinnerSelector);
242 | spinner && removeElement(spinner);
243 | }
244 |
245 | if (parent != document.body) {
246 | addClass(parent, 'nprogress-custom-parent');
247 | }
248 |
249 | parent.appendChild(progress);
250 | return progress;
251 | };
252 |
253 | /**
254 | * Removes the element. Opposite of render().
255 | */
256 |
257 | NProgress.remove = function() {
258 | removeClass(document.documentElement, 'nprogress-busy');
259 | removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent');
260 | var progress = document.getElementById('nprogress');
261 | progress && removeElement(progress);
262 | };
263 |
264 | /**
265 | * Checks if the progress bar is rendered.
266 | */
267 |
268 | NProgress.isRendered = function() {
269 | return !!document.getElementById('nprogress');
270 | };
271 |
272 | /**
273 | * Determine which positioning CSS rule to use.
274 | */
275 |
276 | NProgress.getPositioningCSS = function() {
277 | // Sniff on document.body.style
278 | var bodyStyle = document.body.style;
279 |
280 | // Sniff prefixes
281 | var vendorPrefix =
282 | 'WebkitTransform' in bodyStyle
283 | ? 'Webkit'
284 | : 'MozTransform' in bodyStyle
285 | ? 'Moz'
286 | : 'msTransform' in bodyStyle
287 | ? 'ms'
288 | : 'OTransform' in bodyStyle
289 | ? 'O'
290 | : '';
291 |
292 | if (vendorPrefix + 'Perspective' in bodyStyle) {
293 | // Modern browsers with 3D support, e.g. Webkit, IE10
294 | return 'translate3d';
295 | } else if (vendorPrefix + 'Transform' in bodyStyle) {
296 | // Browsers without 3D support, e.g. IE9
297 | return 'translate';
298 | } else {
299 | // Browsers without translate() support, e.g. IE7-8
300 | return 'margin';
301 | }
302 | };
303 |
304 | /**
305 | * Helpers
306 | */
307 |
308 | function clamp(n, min, max) {
309 | if (n < min) return min;
310 | if (n > max) return max;
311 | return n;
312 | }
313 |
314 | /**
315 | * (Internal) converts a percentage (`0..1`) to a bar translateX
316 | * percentage (`-100%..0%`).
317 | */
318 |
319 | function toBarPerc(n) {
320 | return (-1 + n) * 100;
321 | }
322 |
323 | /**
324 | * (Internal) returns the correct CSS for changing the bar's
325 | * position given an n percentage, and speed and ease from Settings
326 | */
327 |
328 | function barPositionCSS(n, speed, ease) {
329 | var barCSS;
330 |
331 | if (Settings.positionUsing === 'translate3d') {
332 | barCSS = { transform: 'translate3d(' + toBarPerc(n) + '%,0,0)' };
333 | } else if (Settings.positionUsing === 'translate') {
334 | barCSS = { transform: 'translate(' + toBarPerc(n) + '%,0)' };
335 | } else {
336 | barCSS = { 'margin-left': toBarPerc(n) + '%' };
337 | }
338 |
339 | barCSS.transition = 'all ' + speed + 'ms ' + ease;
340 |
341 | return barCSS;
342 | }
343 |
344 | /**
345 | * (Internal) Queues a function to be executed.
346 | */
347 |
348 | var queue = (function() {
349 | var pending = [];
350 |
351 | function next() {
352 | var fn = pending.shift();
353 | if (fn) {
354 | fn(next);
355 | }
356 | }
357 |
358 | return function(fn) {
359 | pending.push(fn);
360 | if (pending.length == 1) next();
361 | };
362 | })();
363 |
364 | /**
365 | * (Internal) Applies css properties to an element, similar to the jQuery
366 | * css method.
367 | *
368 | * While this helper does assist with vendor prefixed property names, it
369 | * does not perform any manipulation of values prior to setting styles.
370 | */
371 |
372 | var css = (function() {
373 | var cssPrefixes = ['Webkit', 'O', 'Moz', 'ms'],
374 | cssProps = {};
375 |
376 | function camelCase(string) {
377 | return string.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function(match, letter) {
378 | return letter.toUpperCase();
379 | });
380 | }
381 |
382 | function getVendorProp(name) {
383 | var style = document.body.style;
384 | if (name in style) return name;
385 |
386 | var i = cssPrefixes.length,
387 | capName = name.charAt(0).toUpperCase() + name.slice(1),
388 | vendorName;
389 | while (i--) {
390 | vendorName = cssPrefixes[i] + capName;
391 | if (vendorName in style) return vendorName;
392 | }
393 |
394 | return name;
395 | }
396 |
397 | function getStyleProp(name) {
398 | name = camelCase(name);
399 | return cssProps[name] || getVendorProp(name);
400 | }
401 |
402 | function applyCss(element, prop, value) {
403 | prop = getStyleProp(prop);
404 | element.style[prop] = value;
405 | }
406 |
407 | return function(element, properties) {
408 | var args = arguments,
409 | prop,
410 | value;
411 |
412 | if (args.length == 2) {
413 | for (prop in properties) {
414 | if (Object.prototype.hasOwnProperty.call(prop, properties)) {
415 | value = properties[prop];
416 | if (value !== undefined && properties.hasOwnProperty(prop)) applyCss(element, prop, value);
417 | }
418 | }
419 | } else {
420 | applyCss(element, args[1], args[2]);
421 | }
422 | };
423 | })();
424 |
425 | /**
426 | * (Internal) Determines if an element or space separated list of class names contains a class name.
427 | */
428 |
429 | function hasClass(element, name) {
430 | var list = typeof element == 'string' ? element : classList(element);
431 | return list.indexOf(' ' + name + ' ') >= 0;
432 | }
433 |
434 | /**
435 | * (Internal) Adds a class to an element.
436 | */
437 |
438 | function addClass(element, name) {
439 | var oldList = classList(element),
440 | newList = oldList + name;
441 |
442 | if (hasClass(oldList, name)) return;
443 |
444 | // Trim the opening space.
445 | element.className = newList.substring(1);
446 | }
447 |
448 | /**
449 | * (Internal) Removes a class from an element.
450 | */
451 |
452 | function removeClass(element, name) {
453 | var oldList = classList(element),
454 | newList;
455 |
456 | if (!hasClass(element, name)) return;
457 |
458 | // Replace the class name.
459 | newList = oldList.replace(' ' + name + ' ', ' ');
460 |
461 | // Trim the opening and closing spaces.
462 | element.className = newList.substring(1, newList.length - 1);
463 | }
464 |
465 | /**
466 | * (Internal) Gets a space separated list of the class names on the element.
467 | * The list is wrapped with a single space on each end to facilitate finding
468 | * matches within the list.
469 | */
470 |
471 | function classList(element) {
472 | return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' ');
473 | }
474 |
475 | /**
476 | * (Internal) Removes an element from the DOM.
477 | */
478 |
479 | function removeElement(element) {
480 | element && element.parentNode && element.parentNode.removeChild(element);
481 | }
482 |
483 | return NProgress;
484 | });
485 |
--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | export const formatRes = (data, code = '0000') => {
2 | return {
3 | data,
4 | code,
5 | message: code === '0000' ? '请求成功' : '请求失败',
6 | };
7 | };
8 |
--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
1 | test('test 2 + 2', () => {
2 | expect(Math.floor(2.4)).toBe(2);
3 | });
4 |
5 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2016",
4 | "allowJs": true,
5 | "skipLibCheck": false,
6 | "esModuleInterop": false,
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | // "resolveJsonModule": true,
13 | "isolatedModules": false,
14 | "noEmit": true,
15 | "jsx": "preserve",
16 | "strictNullChecks": false,
17 | "baseUrl": "./",
18 | "paths": {
19 | "src/*": ["src/*"],
20 | "component/*": ["component/*"],
21 | "assets/*": ["assets/*"]
22 | },
23 | "experimentalDecorators": true,
24 | "noImplicitAny": false
25 | },
26 | "include": ["src"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------