+
+
+[](http://makeapullrequest.com)
+
+
+
### 文档地址：[wiki](https://github.com/yezihaohao/react-admin/wiki)
### 问题和方案汇总：[issue](https://github.com/yezihaohao/react-admin/issues/12)
-### 最下方增加版本更新日志😁
+### 更新日志迁移至[CHANGELOG.md](https://github.com/yezihaohao/react-admin/blob/master/CHANGELOG.md)😁(重要！对于了解项目部分功能和代码很有用！)
+
+### cli 安装和使用 react-admin 🔥
+
+使用 [saigao](https://github.com/yezihaohao/saigao) 快速安装和下载 react-admin 模板来开发项目：
+
+```js
+npm i -g saigao
+
+saigao myapp
+// 或者使用npx 下载模板
+npx saigao myapp
+```
### 前言
-> 网上react后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到GitHub
- 启动和打包的时间都稍长，请耐心等待两分钟
-- [GitHub地址](https://github.com/yezihaohao/react-admin)
-- [预览地址](http://cheng_haohao.oschina.io/reactadmin/#/app/dashboard/index)(已增加响应式，可手机预览😄)
+> 网上 react 后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到 GitHub
+> 启动和打包的时间都稍长，请耐心等待两分钟
+
+- [GitHub 地址](https://github.com/yezihaohao/react-admin)
+- [预览地址](https://admiring-dijkstra-34cb29.netlify.com)(已增加响应式，可手机预览 😄)
### 依赖模块
-
+
+ ),
+ icon: + GitHub地址： + + https://github.com/yezihaohao + +
++ 博客地址： + + https://yezihaohao.github.io/ + +
+
-
- this.themeChange(v)} />
-
- ));
- const first =
-
-
-
-
- )
- }
-}
-
-export default BreadcrumbCustom;
diff --git a/src/components/HeaderCustom.jsx b/src/components/HeaderCustom.jsx
deleted file mode 100644
index e93c7157a..000000000
--- a/src/components/HeaderCustom.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Created by hao.cheng on 2017/4/13.
- */
-import React, { Component } from 'react';
-import { Menu, Icon, Layout, Badge, Popover } from 'antd';
-import screenfull from 'screenfull';
-import { gitOauthToken, gitOauthInfo } from '../axios';
-import { queryString } from '../utils';
-import avater from '../style/imgs/b1.jpg';
-import SiderCustom from './SiderCustom';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-const { Header } = Layout;
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
-
-class HeaderCustom extends Component {
- state = {
- user: '',
- visible: false,
- };
- componentDidMount() {
- const QueryString = queryString();
- // if (QueryString.hasOwnProperty('code')) {
- // console.log(QueryString);
- // const _user = JSON.parse(localStorage.getItem('user'));
- // !_user && gitOauthToken(QueryString.code).then(res => {
- // console.log(res);
- // gitOauthInfo(res.access_token).then(info => {
- // this.setState({
- // user: info
- // });
- // localStorage.setItem('user', JSON.stringify(info));
- // });
- // });
- // _user && this.setState({
- // user: _user
- // });
- // }
- const _user = JSON.parse(localStorage.getItem('user')) || '测试';
- if (!_user && QueryString.hasOwnProperty('code')) {
- gitOauthToken(QueryString.code).then(res => {
- gitOauthInfo(res.access_token).then(info => {
- this.setState({
- user: info
- });
- localStorage.setItem('user', JSON.stringify(info));
- });
- });
- } else {
- this.setState({
- user: _user
- });
- }
- };
- screenFull = () => {
- if (screenfull.enabled) {
- screenfull.request();
- }
-
- };
- menuClick = e => {
- console.log(e);
- e.key === 'logout' && this.logout();
- };
- logout = () => {
- localStorage.removeItem('user');
- this.props.history.push('/login')
- };
- popoverHide = () => {
- this.setState({
- visible: false,
- });
- };
- handleVisibleChange = (visible) => {
- this.setState({ visible });
- };
- render() {
- const { responsive, path } = this.props;
- return (
-
- { themesTag }
-
-
- {this.props.children}
-
- )
-
- }
-}
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
new file mode 100644
index 000000000..489717102
--- /dev/null
+++ b/src/components/Page.tsx
@@ -0,0 +1,14 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React, { ReactNode } from 'react';
+
+interface PageProps {
+ children?: ReactNode;
+}
+
+const Page = (props: PageProps) => {
+ return {props.children}
;
+};
+
+export default Page;
diff --git a/src/components/SiderCustom.jsx b/src/components/SiderCustom.jsx
deleted file mode 100644
index fc8774031..000000000
--- a/src/components/SiderCustom.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Created by hao.cheng on 2017/4/13.
- */
-import React, { Component } from 'react';
-import { Layout } from 'antd';
-import { withRouter } from 'react-router-dom';
-import { menus } from '../constants/menus';
-import SiderMenu from './SiderMenu';
-
-const { Sider } = Layout;
-
-class SiderCustom extends Component {
- state = {
- collapsed: false,
- mode: 'inline',
- openKey: '',
- selectedKey: '',
- firstHide: true, // 点击收缩菜单，第一次隐藏展开子菜单，openMenu时恢复
- };
- componentDidMount() {
- this.setMenuOpen(this.props);
- }
- componentWillReceiveProps(nextProps) {
- console.log(nextProps);
- this.onCollapse(nextProps.collapsed);
- this.setMenuOpen(nextProps)
- }
- setMenuOpen = props => {
- const { pathname } = props.location;
- this.setState({
- openKey: pathname.substr(0, pathname.lastIndexOf('/')),
- selectedKey: pathname
- });
- };
- onCollapse = (collapsed) => {
- console.log(collapsed);
- this.setState({
- collapsed,
- firstHide: collapsed,
- mode: collapsed ? 'vertical' : 'inline',
- });
- };
- menuClick = e => {
- this.setState({
- selectedKey: e.key
- });
- console.log(this.state);
- const { popoverHide } = this.props; // 响应式布局控制小屏幕点击菜单时隐藏菜单操作
- popoverHide && popoverHide();
- };
- openMenu = v => {
- console.log(v);
- this.setState({
- openKey: v[v.length - 1],
- firstHide: false,
- })
- };
- render() {
- return (
-
+ {dragItems.map((item: IFMenu, index: number) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+ {provided.placeholder}
+
+ )}
+ ) =>
+ provided.dragHandleProps &&
+ provided.dragHandleProps.onDragStart(e as any)
+ }
+ >
+
+
+ )}
+
-
- 全部动画(单个动画请移动鼠标)
-
-
- {animations.map((v, i) => (
-
-
- )
- }
-}
-
-export default BasicAnimations;
\ No newline at end of file
diff --git a/src/components/animation/BasicAnimations.tsx b/src/components/animation/BasicAnimations.tsx
new file mode 100644
index 000000000..71feb4415
--- /dev/null
+++ b/src/components/animation/BasicAnimations.tsx
@@ -0,0 +1,137 @@
+/**
+ * Created by hao.cheng on 2017/5/8.
+ */
+import React from 'react';
+import { Row, Col, Card, Switch } from 'antd';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+
+class BasicAnimations extends React.Component {
+ state = {
+ animated: false,
+ animatedOne: -1,
+ };
+ animatedAll = (checked: boolean) => {
+ checked && this.setState({ animated: true });
+ !checked && this.setState({ animated: false });
+ };
+ animatedOne = (i: number) => {
+ this.setState({ animatedOne: i });
+ };
+ animatedOneOver = () => {
+ this.setState({ animatedOne: -1 });
+ };
+ render() {
+ const animations = [
+ 'bounce',
+ 'flash',
+ 'rubberBand',
+ 'shake',
+ 'headShake',
+ 'swing',
+ 'tada',
+ 'wobble',
+ 'jello',
+ 'bounceIn',
+ 'bounceInDown',
+ 'bounceInLeft',
+ 'bounceInRight',
+ 'bounceOut',
+ 'bounceOutDown',
+ 'bounceOutLeft',
+ 'bounceOutLeft',
+ 'bounceOutUp',
+ 'fadeIn',
+ 'fadeInDown',
+ 'fadeInDownBig',
+ 'fadeInLeft',
+ 'fadeInLeftBig',
+ 'fadeInRight',
+ 'fadeInRightBig',
+ 'fadeInUp',
+ 'fadeInUpBig',
+ 'fadeOut',
+ 'fadeOutDown',
+ 'fadeOutDownBig',
+ 'fadeOutLeft',
+ 'fadeOutLeftBig',
+ 'fadeOutRight',
+ 'fadeOutRightBig',
+ 'fadeOutUp',
+ 'fadeOutUpBig',
+ 'flipInX',
+ 'flipInY',
+ 'flipOutX',
+ 'flipOutY',
+ 'lightSpeedIn',
+ 'lightSpeedOut',
+ 'rotateIn',
+ 'rotateInDownLeft',
+ 'rotateInDownRight',
+ 'rotateInUpLeft',
+ 'rotateInUpRight',
+ 'rotateOut',
+ 'rotateOutDownLeft',
+ 'rotateOutDownRight',
+ 'rotateOutUpLeft',
+ 'rotateOutUpRight',
+ 'hinge',
+ 'jackInTheBox',
+ 'rollIn',
+ 'rollOut',
+ 'zoomIn',
+ 'zoomInDown',
+ 'zoomInLeft',
+ 'zoomInRight',
+ 'zoomInUp',
+ 'zoomOut',
+ 'zoomOutDown',
+ 'zoomOutLeft',
+ 'zoomOutRight',
+ 'zoomOutUp',
+ 'slideInDown',
+ 'slideInLeft',
+ 'slideInRight',
+ 'slideInUp',
+ 'slideOutDown',
+ 'slideOutLeft',
+ 'slideOutRight',
+ 'slideOutUp',
+ ];
+ return (
+
- this.animatedOne(i)}
- onMouseLeave={() => this.animatedOneOver()}
- >
-
-
-
- ))}
-
-
- {v}
-
+
+ 全部动画(单个动画请移动鼠标)
+
+
+ {animations.map((v, i) => (
+
+
+ );
+ }
+}
+
+export default BasicAnimations;
diff --git a/src/components/animation/ExampleAnimations.jsx b/src/components/animation/ExampleAnimations.jsx
deleted file mode 100644
index a43cb74ff..000000000
--- a/src/components/animation/ExampleAnimations.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Created by hao.cheng on 2017/5/8.
- */
-import React from 'react';
-import { Row, Col, Card, Table, Popconfirm, Button } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
-
-
-class ExampleAnimations extends React.Component {
- constructor(props) {
- super(props);
- this.columns = [{
- title: 'name',
- dataIndex: 'name',
- width: '30%'
- }, {
- title: 'age',
- dataIndex: 'age',
- }, {
- title: 'address',
- dataIndex: 'address',
- }, {
- title: 'operation',
- dataIndex: 'operation',
- render: (text, record, index) => {
- return (
- this.state.dataSource.length > 1 ?
- (
-
+ this.animatedOne(i)}
+ onMouseLeave={() => this.animatedOneOver()}
+ >
+
+
+
+ ))}
+
+
+ {v}
+
-
-
-
-
- {
- if (this.state.deleteIndex === record.key) return 'animated zoomOutLeft min-black';
- return 'animated fadeInRight';
- }}
- />
-
-
-
-
-
- )
- }
-}
-
-export default ExampleAnimations;
\ No newline at end of file
diff --git a/src/components/animation/ExampleAnimations.tsx b/src/components/animation/ExampleAnimations.tsx
new file mode 100644
index 000000000..c1f87325b
--- /dev/null
+++ b/src/components/animation/ExampleAnimations.tsx
@@ -0,0 +1,120 @@
+/**
+ * Created by hao.cheng on 2017/5/8.
+ */
+import React from 'react';
+import { Row, Col, Card, Table, Popconfirm, Button } from 'antd';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+
+type ExampleAnimationsProps = {};
+type ExampleAnimationsState = {
+ dataSource: any;
+ count: number;
+ deleteIndex: number;
+};
+
+class ExampleAnimations extends React.Component
+
+
+
+ );
+ }
+}
+
+export default AsynchronousTable;
diff --git a/src/components/tables/BasicTable.jsx b/src/components/tables/BasicTable.jsx
deleted file mode 100644
index 950f0f896..000000000
--- a/src/components/tables/BasicTable.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Created by hao.cheng on 2017/4/15.
- */
-import React from 'react';
-import { Table, Icon } from 'antd';
-
-const columns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
- render: text => {text},
-}, {
- title: 'Age',
- dataIndex: 'age',
- key: 'age',
-}, {
- title: 'Address',
- dataIndex: 'address',
- key: 'address',
-}, {
- title: 'Action',
- key: 'action',
- render: (text, record) => (
-
- Action 一 {record.name}
-
- Delete
-
-
- More actions
+
+
+
+
+
+
+
+
+ {hasSelected
+ ? `Selected ${selectedRowKeys.length} items`
+ : ''}
+
+
+
-
);
-export default BasicTables;
\ No newline at end of file
+export default BasicTables;
diff --git a/src/components/tables/EditableTable.jsx b/src/components/tables/EditableTable.jsx
deleted file mode 100644
index 103c21126..000000000
--- a/src/components/tables/EditableTable.jsx
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * Created by hao.cheng on 2017/4/16.
- */
-import React from 'react';
-import { Table, Input, Popconfirm } from 'antd';
-
-class EditableCell extends React.Component {
- state = {
- value: this.props.value,
- editable: this.props.editable || false,
- };
- componentWillReceiveProps(nextProps) {
- if (nextProps.editable !== this.state.editable) {
- this.setState({ editable: nextProps.editable });
- if (nextProps.editable) {
- this.cacheValue = this.state.value;
- }
- }
- if (nextProps.status && nextProps.status !== this.props.status) {
- if (nextProps.status === 'save') {
- this.props.onChange(this.state.value);
- } else if (nextProps.status === 'cancel') {
- this.setState({ value: this.cacheValue });
- this.props.onChange(this.cacheValue);
- }
- }
- }
- shouldComponentUpdate(nextProps, nextState) {
- return nextProps.editable !== this.state.editable ||
- nextState.value !== this.state.value;
- }
- handleChange(e) {
- const value = e.target.value;
- this.setState({ value });
- }
- render() {
- const { value, editable } = this.state;
- return (
-
@@ -20,13 +20,6 @@ const BasicTables = () => (
-
- {/**/}
- {/**/}
- {/* */}
- {/*
*/}
- {/**/}
- {
- editable ?
-
- );
- }
-}
-
-class EditableTable extends React.Component {
- constructor(props) {
- super(props);
- this.columns = [{
- title: 'name',
- dataIndex: 'name',
- width: '25%',
- render: (text, record, index) => this.renderColumns(this.state.data, index, 'name', text),
- }, {
- title: 'age',
- dataIndex: 'age',
- width: '15%',
- render: (text, record, index) => this.renderColumns(this.state.data, index, 'age', text),
- }, {
- title: 'address',
- dataIndex: 'address',
- width: '40%',
- render: (text, record, index) => this.renderColumns(this.state.data, index, 'address', text),
- }, {
- title: 'operation',
- dataIndex: 'operation',
- render: (text, record, index) => {
- const { editable } = this.state.data[index].name;
- return (
-
- this.handleChange(e)}
- />
-
- :
-
- {value.toString() || ' '}
-
- }
-
- {
- editable ?
-
- this.editDone(index, 'save')}>Save
- this.editDone(index, 'cancel')}>
- Cancel
-
-
- :
-
- this.edit(index)}>Edit
-
- }
-
- );
- },
- }];
- this.state = {
- data: [{
- key: '0',
- name: {
- editable: false,
- value: 'Edward King 0',
- },
- age: {
- editable: false,
- value: '32',
- },
- address: {
- value: 'London, Park Lane no. 0',
- },
- }],
- };
- }
- renderColumns(data, index, key, text) {
- const { editable, status } = data[index][key];
- if (typeof editable === 'undefined') {
- return text;
- }
- return (
-
- this.searchInput = ele}
- placeholder="Search name"
- value={this.state.searchText}
- onChange={this.onInputChange}
- onPressEnter={this.onSearch}
- />
-
-
- ),
- filterIcon:
-
-
-
- );
- }
-}
-
-export default SearchTable;
\ No newline at end of file
diff --git a/src/components/tables/SearchTable.tsx b/src/components/tables/SearchTable.tsx
new file mode 100644
index 000000000..491869eea
--- /dev/null
+++ b/src/components/tables/SearchTable.tsx
@@ -0,0 +1,150 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table, Input, Button } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
+
+const data = [
+ {
+ key: '1',
+ name: 'John Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+ },
+ {
+ key: '2',
+ name: 'Joe Black',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+ },
+ {
+ key: '3',
+ name: 'Jim Green',
+ age: 32,
+ address: 'Sidney No. 1 Lake Park',
+ },
+ {
+ key: '4',
+ name: 'Jim Red',
+ age: 32,
+ address: 'London No. 2 Lake Park',
+ },
+];
+
+class SearchTable extends React.Component {
+ state = {
+ filterDropdownVisible: false,
+ data,
+ searchText: '',
+ filtered: false,
+ };
+ searchInput: any;
+ onInputChange = (e: any) => {
+ this.setState({ searchText: e.target.value });
+ };
+ onSearch = () => {
+ const { searchText } = this.state;
+ const reg = new RegExp(searchText, 'gi');
+ this.setState({
+ filterDropdownVisible: false,
+ filtered: !!searchText,
+ data: data
+ .map((record) => {
+ const match = record.name.match(reg);
+ if (!match) {
+ return null;
+ }
+ return {
+ ...record,
+ name: (
+
+ {record.name
+ .split(reg)
+ .map((text, i) =>
+ i > 0
+ ? [{match[0]}, text]
+ : text
+ )}
+
+ ),
+ };
+ })
+ .filter((record) => !!record),
+ });
+ };
+ render() {
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ filterDropdown: (
+
+ (this.searchInput = ele)}
+ placeholder="Search name"
+ value={this.state.searchText}
+ onChange={this.onInputChange}
+ onPressEnter={this.onSearch}
+ />
+
+
+ ),
+ filterIcon: (
+
+
+
+
+ );
+ }
+}
+
+export default SearchTable;
diff --git a/src/components/tables/SelectTable.jsx b/src/components/tables/SelectTable.jsx
deleted file mode 100644
index 871b02b61..000000000
--- a/src/components/tables/SelectTable.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Created by hao.cheng on 2017/4/15.
- */
-import React from 'react';
-import { Table } from 'antd';
-
-const columns = [{
- title: 'Name',
- dataIndex: 'name',
-}, {
- title: 'Age',
- dataIndex: 'age',
-}, {
- title: 'Address',
- dataIndex: 'address',
-}];
-
-const data = [];
-for (let i = 0; i < 46; i++) {
- data.push({
- key: i,
- name: `Edward King ${i}`,
- age: 32,
- address: `London, Park Lane no. ${i}`,
- });
-}
-
-class SelectTable extends React.Component {
- state = {
- selectedRowKeys: [], // Check here to configure the default column
- };
- onSelectChange = (selectedRowKeys) => {
- console.log('selectedRowKeys changed: ', selectedRowKeys);
- this.setState({ selectedRowKeys });
- };
- render() {
- const { selectedRowKeys } = this.state;
- const rowSelection = {
- selectedRowKeys,
- onChange: this.onSelectChange,
- selections: [{
- key: 'odd',
- text: '选择奇数列',
- onSelect: (changableRowKeys) => {
- let newSelectedRowKeys = [];
- newSelectedRowKeys = changableRowKeys.filter((key, index) => {
- if (index % 2 !== 0) {
- return false;
- }
- return true;
- });
- this.setState({ selectedRowKeys: newSelectedRowKeys });
- },
- }, {
- key: 'even',
- text: '选择偶数列',
- onSelect: (changableRowKeys) => {
- let newSelectedRowKeys = [];
- newSelectedRowKeys = changableRowKeys.filter((key, index) => {
- if (index % 2 !== 0) {
- return true;
- }
- return false;
- });
- this.setState({ selectedRowKeys: newSelectedRowKeys });
- },
- }],
- onSelection: this.onSelection,
- };
- return (
-
-
-
- );
- }
-}
-
-export default SortTable;
diff --git a/src/components/tables/SortTable.tsx b/src/components/tables/SortTable.tsx
new file mode 100644
index 000000000..20e1a7e1a
--- /dev/null
+++ b/src/components/tables/SortTable.tsx
@@ -0,0 +1,117 @@
+/**
+ * Created by hao.cheng on 2017/4/15.
+ */
+import React from 'react';
+import { Table, Button } from 'antd';
+
+const data = [
+ {
+ key: '1',
+ name: 'John Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+ },
+ {
+ key: '2',
+ name: 'Jim Green',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+ },
+ {
+ key: '3',
+ name: 'Joe Black',
+ age: 32,
+ address: 'Sidney No. 1 Lake Park',
+ },
+ {
+ key: '4',
+ name: 'Jim Red',
+ age: 32,
+ address: 'London No. 2 Lake Park',
+ },
+];
+
+type SortTableState = {
+ filteredInfo: any;
+ sortedInfo: any;
+};
+class SortTable extends React.Component
-
-
-
-
-
+
+
+ );
+ }
+}
+
+export default SortTable;
diff --git a/src/components/ui/Buttons.jsx b/src/components/ui/Buttons.tsx
similarity index 69%
rename from src/components/ui/Buttons.jsx
rename to src/components/ui/Buttons.tsx
index 6f1595136..ef369214e 100644
--- a/src/components/ui/Buttons.jsx
+++ b/src/components/ui/Buttons.tsx
@@ -2,20 +2,31 @@
* Created by hao.cheng on 2017/4/23.
*/
import React from 'react';
-import { Row, Col, Card, Button, Radio, Icon, Menu, Dropdown } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import { Row, Col, Card, Button, Radio, Menu, Dropdown } from 'antd';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+import { RadioChangeEvent } from 'antd/lib/radio';
+import { ButtonSize } from 'antd/lib/button';
+import { DownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-class Buttons extends React.Component {
- state = {
- size: 'default',
- loading: false,
- iconLoading: false,
- };
+type ButtonsState = {
+ size: ButtonSize;
+ loading: boolean;
+ iconLoading: boolean;
+};
+class Buttons extends React.Component
+
+
+
+
+
-
-
+
- +
@@ -67,20 +82,27 @@ class Buttons extends React.Component {
Large
- Default
+ Middle
Small
-
+
+
- - + +
@@ -93,7 +115,7 @@ class Buttons extends React.Component {
@@ -109,10 +131,19 @@ class Buttons extends React.Component {
Loading
-
- )
+ );
}
}
diff --git a/src/components/ui/Draggable.jsx b/src/components/ui/Draggable.tsx
similarity index 74%
rename from src/components/ui/Draggable.jsx
rename to src/components/ui/Draggable.tsx
index e679fc5e5..a08a892fd 100644
--- a/src/components/ui/Draggable.jsx
+++ b/src/components/ui/Draggable.tsx
@@ -3,46 +3,49 @@
*/
import React from 'react';
import { Row, Col, Card } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
import Draggable from 'react-draggable';
class Drags extends React.Component {
state = {
activeDrags: 0,
deltaPosition: {
- x: 0, y: 0
+ x: 0,
+ y: 0,
},
controlledPosition: {
- x: -400, y: 200
- }
+ x: -400,
+ y: 200,
+ },
};
onStart = () => {
- this.setState({activeDrags: ++this.state.activeDrags});
+ let { activeDrags } = this.state;
+ this.setState({ activeDrags: ++activeDrags });
};
onStop = () => {
- this.setState({activeDrags: --this.state.activeDrags});
+ let { activeDrags } = this.state;
+ this.setState({ activeDrags: --activeDrags });
};
- handleDrag = (e, ui) => {
- const {x, y} = this.state.deltaPosition;
+ handleDrag = (e: any, ui: any) => {
+ const { x, y } = this.state.deltaPosition;
this.setState({
deltaPosition: {
x: x + ui.deltaX,
y: y + ui.deltaY,
- }
+ },
});
};
render() {
- const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
- const {deltaPosition} = this.state;
+ const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
+ const { deltaPosition } = this.state;
return (
@@ -43,7 +54,7 @@ class Buttons extends React.Component {
-
+
@@ -51,14 +62,18 @@ class Buttons extends React.Component {
- +
+
+
- - + +
-
-
-
@@ -90,7 +98,9 @@ class Drags extends React.Component {
-
@@ -98,7 +108,10 @@ class Drags extends React.Component {
-
+
-
I can be dragged anywhere
@@ -71,7 +74,10 @@ class Drags extends React.Component {
@@ -80,7 +86,9 @@ class Drags extends React.Component {
I track my deltas
- x: {deltaPosition.x.toFixed(0)}, y: {deltaPosition.y.toFixed(0)}
+
+ x: {deltaPosition.x.toFixed(0)}, y:{' '}
+ {deltaPosition.y.toFixed(0)}
+
Drag here
+
+ Drag here
+
You must click my handle to drag me
Can't drag here
+
+ Can't drag here
+
Dragging here works
-
+
@@ -112,9 +125,8 @@ class Drags extends React.Component {
}
`}
- )
+ );
}
}
-
-export default Drags;
\ No newline at end of file
+export default Drags;
diff --git a/src/components/ui/Gallery.jsx b/src/components/ui/Gallery.tsx
similarity index 64%
rename from src/components/ui/Gallery.jsx
rename to src/components/ui/Gallery.tsx
index bdc235478..feacea56e 100644
--- a/src/components/ui/Gallery.jsx
+++ b/src/components/ui/Gallery.tsx
@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Row, Col, Card } from 'antd';
-import BreadcrumbCustom from '../BreadcrumbCustom';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
import PhotoSwipe from 'photoswipe';
import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
import 'photoswipe/dist/photoswipe.css';
@@ -11,31 +11,34 @@ import 'photoswipe/dist/default-skin/default-skin.css';
class Gallery extends React.Component {
state = {
- gallery: null
+ gallery: null,
};
- componentDidMount() {
- }
+ componentDidMount() {}
componentWillUnmount = () => {
this.closeGallery();
};
- openGallery = (item) => {
+ pswpElement: any;
+ gallery: any;
+ openGallery = (item: any) => {
const items = [
{
src: item,
w: 0,
h: 0,
- }
+ },
];
const pswpElement = this.pswpElement;
- const options = {index: 0};
- this.gallery = new PhotoSwipe( pswpElement, PhotoswipeUIDefault, items, options);
- this.gallery.listen('gettingData', (index, item) => {
+ const options = { index: 0 };
+ this.gallery = new PhotoSwipe(pswpElement, PhotoswipeUIDefault, items, options);
+ this.gallery.listen('gettingData', (index: number, item: any) => {
const _this = this;
- if (item.w < 1 || item.h < 1) { // unknown size
+ if (item.w < 1 || item.h < 1) {
+ // unknown size
var img = new Image();
- img.onload = function() { // will get size after load
- item.w = this.width; // set image width
- item.h = this.height; // set image height
+ img.onload = function () {
+ // will get size after load
+ item.w = (this as any).width; // set image width
+ item.h = (this as any).height; // set image height
_this.gallery.invalidateCurrItems(); // reinit Items
_this.gallery.updateSize(true); // reinit Items
};
@@ -56,55 +59,69 @@ class Gallery extends React.Component {
'http://img.hb.aicdn.com/8c5d5f2bf6427d1b5ed8657a7ae0c9938d3465e367899-AJ0zVA_fw',
'http://img.hb.aicdn.com/bd71ccac0b16bbcade255a1a8a63504d71c7dee9a8652-zBCN9d_fw',
'http://img.hb.aicdn.com/37a40cb04345463858d45418ae6ed9ef319e30dc37a45-o4pQ0j_fw',
-
],
[
'http://img.hb.aicdn.com/5fad6c3a14a9b80c4448835bb6b23ab895d18e234eff3-BPGmox_fw',
'http://img.hb.aicdn.com/a1a19de5dac212a646ba6967ef565786399fb1665bd04-EEvwzR_fw',
'http://img.hb.aicdn.com/06595f8044e881de3a82d691768bc8c21a2a9f3633d60-XKjC2s_fw',
'http://img.hb.aicdn.com/880787b36d45efbe05aa409c867db29a3028e02da7f9b-qxGib9_fw',
- 'http://img.hb.aicdn.com/4964b97f6f6eb61a20922b40842adf0169c44e491c4b60-azX1S7_fw'
+ 'http://img.hb.aicdn.com/4964b97f6f6eb61a20922b40842adf0169c44e491c4b60-azX1S7_fw',
],
[
'http://img.hb.aicdn.com/ff97d00944edfc706c62dd5c0e955c4099a37b407534f-BcUqf0_fw',
'http://img.hb.aicdn.com/0e22be22b08c6f78b94283b6cfa890093ac3cae8401e7-b1ftfi_fw',
'http://img.hb.aicdn.com/879f870e15f7cc0847c8ae19a5fcbe974d5904bb181d7-RGmtNU_fw',
'http://img.hb.aicdn.com/b4a8e62958555a97dc3de9ccb03284bf556c042925522-x50qGv_fw',
- 'http://img.hb.aicdn.com/1ef493a15674e9fd523b248ea4ec43d2ea9ce6952ff3e-WavWKc_fw'
+ 'http://img.hb.aicdn.com/1ef493a15674e9fd523b248ea4ec43d2ea9ce6952ff3e-WavWKc_fw',
],
[
'http://img.hb.aicdn.com/8e16efec78ac4a3684fc8999d18e3661af40fd4510a25-DDvQON_fw',
'http://img.hb.aicdn.com/61dfa024c8040e6a5bcb03d42928fbcb0c87c1a54e731-yc4lvV_fw',
'http://img.hb.aicdn.com/6783b4d7811ad7fb87b1446c5488b91179f7608118289-hpEyP3_fw',
'http://img.hb.aicdn.com/7be61ba6bdb20a73be63edc387b16eec72d0bbb51c7ef-XafA07_fw',
- 'http://img.hb.aicdn.com/bd3ba3f907fe098b911947e0020615b50fc340ed2df72-WsuHuM_fw'
+ 'http://img.hb.aicdn.com/bd3ba3f907fe098b911947e0020615b50fc340ed2df72-WsuHuM_fw',
],
[
'http://img.hb.aicdn.com/71471aaac95eade66400a390863b37c76d9addcd14982-0H6sak_fw',
'http://img.hb.aicdn.com/cb16c68c4d3b7a08b5e91cd351f6b723634ca3fc27d4d-m1JD8z_fw',
'http://img.hb.aicdn.com/e3559b6e8d7237857382050e5659a64cc0b7d696a2869-stcRXA_fw',
'http://img.hb.aicdn.com/4ea229436fcf2077502953907a6afb16d3c5cd611b8e2-0dVIeH_fw',
- 'http://img.hb.aicdn.com/98c786f4314736f95a42bf927bf65a82d305a532c6258-njI6id_fw'
- ]
+ 'http://img.hb.aicdn.com/98c786f4314736f95a42bf927bf65a82d305a532c6258-njI6id_fw',
+ ],
];
- const imgsTag = imgs.map(v1 => (
- v1.map(v2 => (
- I can only be moved 100px in any direction.
+ const imgsTag = imgs.map((v1) =>
+ v1.map((v2) => (
+
))
- ));
+ );
return (
- ![]()
this.openGallery(v2)} alt="example" width="100%" src={v2} />
+ ![]()
this.openGallery(v2)}
+ alt="example"
+ width="100%"
+ src={v2}
+ />
-
-
})
`;
- dom.appendChild(middleControl);
-}
-
-export default () => (
-