test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

React 版本默认实现 alert、confirm、jumpTo、updateLocation、isCurrentUrl、notify，降低上手成本 (#1084)

Browse Source
This commit is contained in:
吴多益 2020-11-18 17:26:20 +08:00 committed by GitHub
parent d90bfbcf6c
commit b132e5c7f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 141 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
docs/start/getting-started.md
View File

@ -104,35 +104,28 @@ let amisScoped = amis.embed(
responseAdpater(api, response, query, request) {
debugger;
return response;
},
jumpTo: location => {
// 可以不传，用来实现页面跳转
},
updateLocation: (location, replace) => {
// 可以不传，用来实现地址栏更新
},
isCurrentUrl: url => {
// 可以不传，用来判断是否目标地址当前地址。
},
copy: content => {
// 可以不传，用来实现复制到剪切板
},
notify: (type, msg) => {
// 可以不传，用来实现通知
},
alert: content => {
// 可以不传，用来实现提示
},
confirm: content => {
// 可以不传，用来实现确认框。
}
// // 可以不传，用来实现页面跳转
// jumpTo: location => {},
// // 可以不传，用来实现地址栏更新
// updateLocation: (location, replace) => {},
// // 可以不传，用来判断是否目标地址当前地址。
// isCurrentUrl: url => {},
// // 可以不传，用来实现复制到剪切板
// copy: content => {},
// // 可以不传，用来实现通知
// notify: (type, msg) => {},
// // 可以不传，用来实现提示
// alert: content => {},
// // 可以不传，用来实现确认框。
// confirm: content => {}
}
);
```
@ -252,25 +245,7 @@ class MyComponent extends React.Component<any, any> {
// props...
},
{
// env
// 这些是 amis 需要的一些接口实现
// 可以参考后面的参数介绍。
jumpTo: (
location: string /*目标地址*/,
action: any /* action对象*/
) => {
// 用来实现页面跳转, actionType:link、url 都会进来。
// 因为不清楚所在环境中是否使用了 spa 模式，所以自己实现这个方法吧。
},
updateLocation: (
location: string /*目标地址*/,
replace: boolean /*是replace，还是push？*/
) => {
// 地址替换，跟 jumpTo 类似
},
// 下面三个接口必须实现
fetcher: ({
url, // 接口地址
method, // 请求方法 get、post、put、delete
@ -314,20 +289,44 @@ class MyComponent extends React.Component<any, any> {
return (axios as any)[method](url, data, config);
},
isCancel: (value: any) => (axios as any).isCancel(value),
notify: (
type: 'error' | 'success' /**/,
msg: string /*提示内容*/
) => {
toast[type]
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
: console.warn('[Notify]', type, msg);
},
alert,
confirm,
copy: content => {
copy(content);
toast.success('内容已复制到粘贴板');
}
// 后面这些接口可以不用实现
// 默认是地址跳转
// jumpTo: (
// location: string /*目标地址*/,
// action: any /* action对象*/
// ) => {
// // 用来实现页面跳转, actionType:link、url 都会进来。
// },
// updateLocation: (
// location: string /*目标地址*/,
// replace: boolean /*是replace，还是push？*/
// ) => {
// // 地址替换，跟 jumpTo 类似
// },
// isCurrentUrl: (
// url: string /*url地址*/,
// ) => {
// // 用来判断是否目标地址当前地址
// },
// notify: (
// type: 'error' | 'success' /**/,
// msg: string /*提示内容*/
// ) => {
// toast[type]
// ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
// : console.warn('[Notify]', type, msg);
// },
// alert,
// confirm,
}
)}
</div>

39
examples/components/Play.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import {toast} from '../../src/components/Toast';
import {render} from '../../src/index';
import {normalizeLink} from '../../src/utils/normalizeLink';
import {alert, confirm} from '../../src/components/Alert';
import axios from 'axios';
import Frame from 'react-frame-component';
@ -88,44 +89,6 @@ export default class PlayGround extends React.Component {
height: '100%'
}
};
const normalizeLink = to => {
to = to || '';
const location = router.getCurrentLocation();
if (to && to[0] === '#') {
to = location.pathname + location.search + to;
} else if (to && to[0] === '?') {
to = location.pathname + to;
}
const idx = to.indexOf('?');
const idx2 = to.indexOf('#');
let pathname = ~idx
? to.substring(0, idx)
: ~idx2
? to.substring(0, idx2)
: to;
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
let hash = ~idx2 ? to.substring(idx2) : location.hash;
if (!pathname) {
pathname = location.pathname;
} else if (pathname[0] != '/' && !/^https?:\/\//.test(pathname)) {
let relativeBase = location.pathname;
const paths = relativeBase.split('/');
paths.pop();
let m;
while ((m = /^\.\.?\//.exec(pathname))) {
if (m[0] === '../') {
paths.pop();
}
pathname = pathname.substring(m[0].length);
}
pathname = paths.concat(pathname).join('/');
}
return pathname + search + hash;
};
this.env = {
session: 'doc',
updateLocation: (location, replace) => {

62
examples/components/SchemaRender.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import {render} from '../../src/index';
import axios from 'axios';
import {toast} from '../../src/components/Toast';
import {alert, confirm} from '../../src/components/Alert';
import {normalizeLink} from '../../src/utils/normalizeLink';
import Button from '../../src/components/Button';
import LazyComponent from '../../src/components/LazyComponent';
import {default as DrawerContainer} from '../../src/components/Drawer';
@ -41,44 +41,6 @@ export default function (schema) {
constructor(props) {
super(props);
const {router} = props;
const normalizeLink = to => {
to = to || '';
const location = router.getCurrentLocation();
if (to && to[0] === '#') {
to = location.pathname + location.search + to;
} else if (to && to[0] === '?') {
to = location.pathname + to;
}
const idx = to.indexOf('?');
const idx2 = to.indexOf('#');
let pathname = ~idx
? to.substring(0, idx)
: ~idx2
? to.substring(0, idx2)
: to;
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
let hash = ~idx2 ? to.substring(idx2) : location.hash;
if (!pathname) {
pathname = location.pathname;
} else if (pathname[0] != '/' && !/^https?:\/\//.test(pathname)) {
let relativeBase = location.pathname;
const paths = relativeBase.split('/');
paths.pop();
let m;
while ((m = /^\.\.?\//.exec(pathname))) {
if (m[0] === '../') {
paths.pop();
}
pathname = pathname.substring(m[0].length);
}
pathname = paths.concat(pathname).join('/');
}
return pathname + search + hash;
};
this.env = {
updateLocation: (location, replace) => {
router[replace ? 'replace' : 'push'](normalizeLink(location));
@ -87,22 +49,6 @@ export default function (schema) {
const link = normalizeLink(to);
return router.isActive(link);
},
jumpTo: (to, action) => {
to = normalizeLink(to);
if (action && action.actionType === 'url') {
action.blank === false
? (window.location.href = to)
: window.open(to);
return;
}
if (/^https?:\/\//.test(to)) {
window.location.replace(to);
} else {
router.push(to);
}
},
fetcher: ({url, method, data, config, headers}) => {
config = config || {};
config.headers = headers || {};
@ -139,12 +85,6 @@ export default function (schema) {
return axios[method](url, data, config);
},
isCancel: value => axios.isCancel(value),
notify: (type, msg) =>
toast[type]
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
: console.warn('[Notify]', type, msg),
alert,
confirm,
copy: content => {
copy(content);
toast.success('内容已复制到粘贴板');

39
examples/embed.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import {render as renderReact} from 'react-dom';
import axios from 'axios';
import copy from 'copy-to-clipboard';
import {normalizeLink} from '../src/utils/normalizeLink';
import qs from 'qs';
import {
@ -33,44 +34,6 @@ export function embed(
}
container.classList.add('amis-scope');
let scoped: any;
const normalizeLink = (to: string) => {
to = to || '';
const location = window.location;
if (to && to[0] === '#') {
to = location.pathname + location.search + to;
} else if (to && to[0] === '?') {
to = location.pathname + to;
}
const idx = to.indexOf('?');
const idx2 = to.indexOf('#');
let pathname = ~idx
? to.substring(0, idx)
: ~idx2
? to.substring(0, idx2)
: to;
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
let hash = ~idx2 ? to.substring(idx2) : location.hash;
if (!pathname) {
pathname = location.pathname;
} else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {
let relativeBase = location.pathname;
const paths = relativeBase.split('/');
paths.pop();
let m;
while ((m = /^\.\.?\//.exec(pathname))) {
if (m[0] === '../') {
paths.pop();
}
pathname = pathname.substring(m[0].length);
}
pathname = paths.concat(pathname).join('/');
}
return pathname + search + hash;
};
const responseAdpater = (api: any) => (value: any) => {
let response = value.data;

58
src/factory.tsx
View File

@ -4,6 +4,7 @@ import {RendererStore, IRendererStore, IIRendererStore} from './store/index';
import {getEnv, destroy} from 'mobx-state-tree';
import {Location} from 'history';
import {wrapFetcher} from './utils/api';
import {normalizeLink} from './utils/normalizeLink';
import {
createObject,
extendObject,
@ -42,6 +43,8 @@ import {
} from './theme';
import find from 'lodash/find';
import Alert from './components/Alert2';
import {toast} from './components/Toast';
import {alert, confirm} from './components/Alert';
import {LazyComponent} from './components';
import ImageGallery from './components/ImageGallery';
import {
@ -972,26 +975,53 @@ const defaultOptions: RenderOptions = {
);
return false;
},
alert(msg: string) {
alert(msg);
},
updateLocation() {
console.error(
'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
);
},
confirm(msg: string) {
return confirm(msg);
alert,
confirm,
notify: (type, msg) =>
toast[type]
? toast[type](msg, type === 'error' ? 'Error' : 'Info')
: console.warn('[Notify]', type, msg),
jumpTo: (to: string, action?: any) => {
if (to === 'goBack') {
return window.history.back();
}
to = normalizeLink(to);
if (action && action.actionType === 'url') {
action.blank === false ? (window.location.href = to) : window.open(to);
return;
}
if (/^https?:\/\//.test(to)) {
window.location.replace(to);
} else {
location.href = to;
}
},
notify(msg) {
alert(msg);
},
jumpTo() {
console.error(
'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
);
},
isCurrentUrl() {
isCurrentUrl: (to: string) => {
const link = normalizeLink(to);
const location = window.location;
let pathname = link;
let search = '';
const idx = link.indexOf('?');
if (~idx) {
pathname = link.substring(0, idx);
search = link.substring(idx);
}
if (search) {
if (pathname !== location.pathname || !location.search) {
return false;
}
const query = qs.parse(search.substring(1));
const currentQuery = qs.parse(location.search.substring(1));
return Object.keys(query).every(key => query[key] === currentQuery[key]);
} else if (pathname === location.pathname) {
return true;
}
return false;
},
copy(contents: string) {

38
src/utils/normalizeLink.ts Normal file
View File

@ -0,0 +1,38 @@
export const normalizeLink = (to: string) => {
to = to || '';
const location = window.location;
if (to && to[0] === '#') {
to = location.pathname + location.search + to;
} else if (to && to[0] === '?') {
to = location.pathname + to;
}
const idx = to.indexOf('?');
const idx2 = to.indexOf('#');
let pathname = ~idx
? to.substring(0, idx)
: ~idx2
? to.substring(0, idx2)
: to;
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
let hash = ~idx2 ? to.substring(idx2) : location.hash;
if (!pathname) {
pathname = location.pathname;
} else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {
let relativeBase = location.pathname;
const paths = relativeBase.split('/');
paths.pop();
let m;
while ((m = /^\.\.?\//.exec(pathname))) {
if (m[0] === '../') {
paths.pop();
}
pathname = pathname.substring(m[0].length);
}
pathname = paths.concat(pathname).join('/');
}
return pathname + search + hash;
};