diff --git a/src/components/DetailCard/index.jsx b/src/components/DetailCard/index.jsx index 47cf15e9..e81ddcd6 100644 --- a/src/components/DetailCard/index.jsx +++ b/src/components/DetailCard/index.jsx @@ -108,6 +108,7 @@ const DetailCard = ({ arrowPointAtCenter="true" placement="rightTop" content={titleHelp} + getPopupContainer={(node) => node.parentNode} > diff --git a/src/components/DetailCard/index.less b/src/components/DetailCard/index.less index 475201cc..19fad4d6 100644 --- a/src/components/DetailCard/index.less +++ b/src/components/DetailCard/index.less @@ -49,6 +49,3 @@ } } } - - - diff --git a/src/components/FormItem/Label/index.jsx b/src/components/FormItem/Label/index.jsx index d02aaf08..cedcd1c4 100644 --- a/src/components/FormItem/Label/index.jsx +++ b/src/components/FormItem/Label/index.jsx @@ -31,6 +31,7 @@ import { TagOutlined, HddOutlined, CloudServerOutlined, + LoadingOutlined, } from '@ant-design/icons'; import styles from './index.less'; @@ -82,14 +83,19 @@ export default class index extends Component { } render() { - const { content, value, iconType, ...rest } = this.props; + const { content, value, iconType, showLoading, ...rest } = this.props; + const failValues = [undefined, null, '']; if (content) { return content; } return ( {this.renderIcon()} - {value} + {showLoading && failValues.includes(value) ? ( + + ) : ( + value + )} ); } diff --git a/src/components/FormItem/SelectTable/index.jsx b/src/components/FormItem/SelectTable/index.jsx index 22a1cef7..e3720bce 100644 --- a/src/components/FormItem/SelectTable/index.jsx +++ b/src/components/FormItem/SelectTable/index.jsx @@ -82,6 +82,7 @@ export default class SelectTable extends React.Component { defaultSortKey: PropTypes.string, defaultSortOrder: PropTypes.string, onRow: PropTypes.func, + childrenColumnName: PropTypes.string, }; static defaultProps = { @@ -105,6 +106,7 @@ export default class SelectTable extends React.Component { isSortByBack: false, defaultSortKey: '', defaultSortOrder: '', + childrenColumnName: 'children', }; constructor(props) { @@ -652,6 +654,7 @@ export default class SelectTable extends React.Component { filterParams, onRow, rowKey, + childrenColumnName, } = this.props; const { current, pageSize, total, filters } = this.state; const defaultPageSizeOptions = [10, 20, 50, 100]; @@ -697,6 +700,7 @@ export default class SelectTable extends React.Component { onChange={this.handleChange} footer={footer} onRow={onRow} + childrenColumnName={childrenColumnName} /> ); } diff --git a/src/components/FormItem/index.jsx b/src/components/FormItem/index.jsx index 372fb1f8..6886ae23 100644 --- a/src/components/FormItem/index.jsx +++ b/src/components/FormItem/index.jsx @@ -60,7 +60,7 @@ import TabSelectTable from './TabSelectTable'; import TreeSelect from './TreeSelect'; // import styles from './index.less'; -const type2component = { +export const type2component = { label: Label, input: Input, select: Select, @@ -132,8 +132,8 @@ export default class FormItem extends React.Component { getComponentProps(type) { switch (type) { case 'label': { - const { content, icon, iconType } = this.props; - return { content, icon, iconType }; + const { content, icon, iconType, showLoading } = this.props; + return { content, icon, iconType, showLoading }; } case 'divider': return { @@ -319,6 +319,10 @@ export default class FormItem extends React.Component { return newRules; } + getComponent(type) { + return type2component[type]; + } + renderTip(tip) { if (!tip) { return null; @@ -347,7 +351,7 @@ export default class FormItem extends React.Component { if (component) { return {component}; } - const TypeComp = type2component[type]; + const TypeComp = this.getComponent(type); const props = this.getComponentProps(type); if (type === 'divider') { return ; diff --git a/src/components/Layout/GlobalNav/index.jsx b/src/components/Layout/GlobalNav/index.jsx deleted file mode 100644 index 3fcc92b8..00000000 --- a/src/components/Layout/GlobalNav/index.jsx +++ /dev/null @@ -1,81 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -import { trimEnd } from 'lodash'; - -import NavItem from './item'; - -import styles from './index.less'; - -class GlobalNav extends React.Component { - static propTypes = { - className: PropTypes.string, - navs: PropTypes.array.isRequired, - // eslint-disable-next-line react/no-unused-prop-types - prefix: PropTypes.string, - // eslint-disable-next-line react/no-unused-prop-types - checkSelect: PropTypes.func, - onItemClick: PropTypes.func, - innerRef: PropTypes.object, - }; - - static defaultProps = { - className: '', - prefix: '', - checkSelect() {}, - onItemClick() {}, - }; - - get currentPath() { - const { - location: { pathname }, - match: { url }, - } = this.props; - - const { length } = trimEnd(url, '/'); - return pathname.slice(length + 1); - } - - render() { - const { className, navs, innerRef, onItemClick } = this.props; - const classNames = classnames(styles.wrapper, className); - - return ( -
- {navs.map((nav) => ( -
- {nav.title &&

{t(nav.title)}

} -
    - {nav.items.map((item) => ( - - ))} -
-
- ))} -
- ); - } -} - -export default GlobalNav; diff --git a/src/components/Layout/GlobalNav/index.less b/src/components/Layout/GlobalNav/index.less deleted file mode 100644 index 99f9f919..00000000 --- a/src/components/Layout/GlobalNav/index.less +++ /dev/null @@ -1,102 +0,0 @@ -@import '~styles/variables'; -@import '~styles/mixins'; - -.wrapper { - position: fixed; - top: 60px; - left: 8px; - width: $nav-width; - height: calc(100vh - 68px); - padding: 40px 20px; - border-radius: $border-radius; - background-color: $dark; - box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); - transition: left $trans-speed ease-in-out; - overflow-y: auto; - z-index: 212; - - .subNav > ul > li { - &.select { - box-shadow: 0 4px 8px 0 rgba(25, 30, 41, 0.2); - background-color: #d8dee5; - border: solid 1px #404e68; - } - - &:hover { - background-color: #d8dee5; - } - - &:active { - background-color: #d8dee5; - border: solid 1px #404e68; - } - - & > a { - color: $light; - transition: color $trans-speed ease-in-out; - - @media (max-width: 1366px) { - padding: 7px 12px; - } - - :global .qicon { - color: #b6c2cd; - fill: #b6c2cd; - } - } - } -} - -.subNav { - & > p { - color: $light-color02; - margin-bottom: 12px; - } - - & > ul { - margin-bottom: 20px; - - & > li { - border-radius: 18px; - border: solid 1px transparent; - transition: all $trans-speed ease-in-out; - - & > a, - .title { - display: block; - padding: 7px 12px; - color: #4a5974; - font-weight: 500; - cursor: pointer; - - @media (max-width: 1366px) { - padding: 7px 0; - } - - :global { - .icon { - margin-right: 8px; - vertical-align: text-bottom; - } - } - } - - &.select, - &:hover, - &:active { - & > a { - color: $primary; - - :global .qicon { - color: #1890ff; - fill:#6fb4f5; - } - } - } - - & + li { - margin-top: 4px; - } - } - } -} diff --git a/src/components/Layout/GlobalNav/item.jsx b/src/components/Layout/GlobalNav/item.jsx deleted file mode 100644 index 45128bb3..00000000 --- a/src/components/Layout/GlobalNav/item.jsx +++ /dev/null @@ -1,57 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import { Link } from 'react-router-dom'; -import { Icon } from 'antd'; - -import styles from './index.less'; - -export default class NavItem extends React.Component { - static propTypes = { - item: PropTypes.object, - current: PropTypes.string, - prefix: PropTypes.string, - onClick: PropTypes.func, - }; - - checkSelect = (item = {}) => { - const { current } = this.props; - - return current.startsWith(item.name); - }; - - renderIcon(icon) { - return ; - } - - render() { - const { item, prefix, onClick } = this.props; - - return ( -
  • - - {this.renderIcon(item.icon)} {t(item.title)} - -
    • - ); - } -} diff --git a/src/components/Layout/Nav/index.jsx b/src/components/Layout/Nav/index.jsx deleted file mode 100644 index 0c769588..00000000 --- a/src/components/Layout/Nav/index.jsx +++ /dev/null @@ -1,81 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React from 'react'; -import PropTypes from 'prop-types'; - -import { trimEnd } from 'lodash'; - -import NavItem from './item'; - -import styles from './index.less'; - -class Nav extends React.Component { - static propTypes = { - className: PropTypes.string, - navs: PropTypes.array.isRequired, - // eslint-disable-next-line react/no-unused-prop-types - prefix: PropTypes.string, - // eslint-disable-next-line react/no-unused-prop-types - checkSelect: PropTypes.func, - onItemClick: PropTypes.func, - innerRef: PropTypes.object, - }; - - static defaultProps = { - className: '', - prefix: '', - checkSelect() {}, - onItemClick() {}, - }; - - get currentPath() { - const { - location: { pathname }, - match: { url }, - } = this.props; - - const { length } = trimEnd(url, '/'); - return pathname.slice(length + 1); - } - - render() { - const { className, navs, match, innerRef, onItemClick } = this.props; - - const prefix = trimEnd(match.url, '/'); - - return ( -
    - {navs.map((nav) => ( -
    - {nav.title &&

    {t(nav.title)}

    } -
      - {nav.items.map((item) => ( - - ))} -
    -
    - ))} -
    - ); - } -} - -export default Nav; diff --git a/src/components/Layout/Nav/index.less b/src/components/Layout/Nav/index.less deleted file mode 100644 index 8a651a80..00000000 --- a/src/components/Layout/Nav/index.less +++ /dev/null @@ -1,134 +0,0 @@ -@import '~styles/variables'; - -.subNav { - & > p { - color: #79879c; - margin-bottom: 12px; - } - - & > ul { - margin-bottom: 20px; - - & > li { - border-radius: 18px; - border: solid 1px transparent; - transition: all $trans-speed ease-in-out; - - & > a, - .title { - display: block; - padding: 7px 12px; - color: #4a5974; - font-weight: 500; - cursor: pointer; - - @media (max-width: 1366px) { - padding: 7px 0; - } - - :global { - .icon { - margin-right: 8px; - vertical-align: text-bottom; - } - - .qicon-chevron-down { - margin-top: 4px; - transition: all $trans-speed ease-in-out; - } - } - - .devopsIcon { - width: 16px; - height: 16px; - padding: 2px; - margin-right: 8px; - vertical-align: text-bottom; - } - } - - &.select, - &.childSelect, - &:hover, - &:active { - & > a { - color: $primary; - - :global .qicon { - color: $icon-color; - fill: #6fb4f5; - } - - .devopsIcon { - color: $icon-color; - fill: #6fb4f5; - } - } - - .title { - :global .qicon-chevron-down { - transform: rotate(-180deg); - } - } - - .innerNav > li { - height: 20px; - margin-top: 8px; - opacity: 1; - transition: height $trans-speed ease-in-out, - margin-top $trans-speed ease-in-out, - opacity $trans-speed ease-in-out 0.1s; - } - } - - & + li { - margin-top: 4px; - } - } - } -} - -.innerNav { - margin-bottom: 4px; - padding-left: 38px; - - @media (max-width: 1366px) { - padding-left: 26px; - } - - & > li { - height: 0; - opacity: 0; - overflow: auto; - transition: height $trans-speed ease-in-out 0.1s, - margin-top $trans-speed ease-in-out 0.1s, opacity $trans-speed ease-in-out; - - & > a { - color: #4a5974; - } - - &.select, - &:hover, - &:active { - & > a { - color: $primary; - } - } - } -} - -.back { - margin: 20px 0; - padding: 8px 12px; - & > a > svg { - width: 16px; - height: 16px; - margin-right: 8px; - vertical-align: text-top; - } -} - -.rightIcon { - float: right; - margin-right: 0 !important; -} diff --git a/src/components/Layout/Nav/item.jsx b/src/components/Layout/Nav/item.jsx deleted file mode 100644 index 49b172ac..00000000 --- a/src/components/Layout/Nav/item.jsx +++ /dev/null @@ -1,88 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import { Link } from 'react-router-dom'; -import { Icon } from 'antd'; - -import styles from './index.less'; - -export default class NavItem extends React.Component { - static propTypes = { - item: PropTypes.object, - current: PropTypes.string, - prefix: PropTypes.string, - onClick: PropTypes.func, - }; - - checkSelect = (item = {}) => { - const { current } = this.props; - - if (item.children) { - return item.children.some((child) => this.checkSelect(child)); - } - - if (item.tabs) { - return item.tabs.some((tab) => this.checkSelect(tab)); - } - - return current.startsWith(item.name); - }; - - render() { - const { item, prefix, onClick } = this.props; - - if (item.children) { - return ( -
  • -
    - {t(item.title)} - -
    -
      - {item.children.map((child) => ( -
    • - {t(child.title)} -
      • - ))} -
    -
    • - ); - } - - return ( -
  • - - {t(item.title)} - -
    • - ); - } -} diff --git a/src/components/Layout/Selector/index.jsx b/src/components/Layout/Selector/index.jsx deleted file mode 100644 index 564cd20f..00000000 --- a/src/components/Layout/Selector/index.jsx +++ /dev/null @@ -1,150 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { Icon, Dropdown, Spin, Menu } from 'antd'; - -import styles from './index.less'; - -export default class Selector extends React.Component { - static propTypes = { - icon: PropTypes.string, - defaultIcon: PropTypes.string, - value: PropTypes.string, - type: PropTypes.string, - loading: PropTypes.bool, - options: PropTypes.array, - onSelect: PropTypes.func, - onScrollBottom: PropTypes.func, - }; - - static defaultProps = { - icon: '', - defaultIcon: '', - value: '', - type: '', - loading: false, - options: [], - onSelect() {}, - onScrollBottom() {}, - }; - - constructor(props) { - super(props); - - this.contentRef = React.createRef(); - } - - componentDidMount() { - if (this.contentRef.current) { - this.$dropdownContent = - this.contentRef.current.querySelector('.dropdown-content'); - this.$dropdownContent.addEventListener('scroll', this.handleScroll); - } - } - - componentDidUpdate() { - if (this.contentRef.current) { - const $menu = this.contentRef.current.querySelector( - '.dropdown-content > .menu-wrapper' - ); - - if ($menu && this.$dropdownContent) { - this.threshold = - $menu.offsetHeight - this.$dropdownContent.offsetHeight; - } - } - } - - componentWillUnmount() { - if (this.$dropdownContent) { - this.$dropdownContent.removeEventListener('scroll', this.handleScroll); - } - } - - get isMulti() { - return this.props.options.length > 1; - } - - handleScroll = (e) => { - if (this.threshold && e.target.scrollTop >= this.threshold - 2) { - this.props.onScrollBottom(); - } - }; - - handleMenuClick = (e, key) => { - this.props.onSelect(key); - }; - - renderList() { - const { defaultIcon, options, loading } = this.props; - - if (!this.isMulti) { - return null; - } - - return ( -
    - - {options.map((option) => ( - - - {option.label} - - ))} - -
    - {loading && } -
    -
    - ); - } - - render() { - const { icon, defaultIcon, value, type, options } = this.props; - - const option = options.find((item) => item.value === value) || {}; - - return ( -
    - -
    -
    - -
    -
    -

    {type}

    -
    {option.label || value}
    -
    - {this.isMulti && ( -
    - -
    - )} -
    -     -
    - ); - } -} diff --git a/src/components/Layout/Selector/index.less b/src/components/Layout/Selector/index.less deleted file mode 100644 index ae1413aa..00000000 --- a/src/components/Layout/Selector/index.less +++ /dev/null @@ -1,98 +0,0 @@ -@import '~styles/variables'; -@import '~styles/mixins'; - -.titleWrapper { - position: relative; - margin-bottom: 20px; - padding: 12px; - border-radius: $border-radius; - background-color: $background-color; - box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.2); - - .icon { - display: inline-block; - vertical-align: middle; - width: 40px; - height: 40px; - padding: 8px; - margin-right: 12px; - border-radius: 100px 0 100px 100px; - background-color: rgba(239, 244, 249, 0.08); - - img { - width: 24px; - height: 24px; - } - } - - .text { - display: inline-block; - vertical-align: middle; - width: 124px; - - :global .h6 { - font-family: $font-family-id; - line-height: 1.43; - color: #ffffff; - @include ellipsis; - } - - p { - color: #d8dee5; - } - } - - .arrow { - position: absolute; - bottom: 12px; - right: 12px; - width: 20px; - height: 20px; - padding: 3px; - border-radius: 50%; - background-color: rgba(85, 188, 138, 0.1); - - :global .icon { - width: 14px; - height: 14px; - background-color: $primary; - border-radius: 50%; - vertical-align: inherit; - } - } -} - -.multi { - cursor: pointer; -} - -.dropdown { - background-color: $background-color; - - :global { - .dropdown-content { - max-height: 300px; - overflow-y: auto; - overflow-x: hidden; - } - - .menu { - padding: 12px; - } - - .menu-item { - padding: 6px 20px 6px 14px; - - img { - width: 16px; - height: 16px; - margin-right: 10px; - } - } - } -} - -.bottom { - position: relative; - text-align: center; -} diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js deleted file mode 100644 index 987dbd1b..00000000 --- a/src/components/Layout/index.js +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -export { default as Nav } from './Nav'; -export { default as GlobalNav } from './GlobalNav'; -export { default as Selector } from './Selector'; diff --git a/src/components/MagicInput/index.less b/src/components/MagicInput/index.less index f2b95eb0..cd55de1f 100644 --- a/src/components/MagicInput/index.less +++ b/src/components/MagicInput/index.less @@ -165,4 +165,5 @@ .magic-input-checks { line-height: 32px; margin-left: 8px; + min-width: 120px; } diff --git a/src/components/Status/index.jsx b/src/components/Status/index.jsx index 14a23a93..98e4cc31 100644 --- a/src/components/Status/index.jsx +++ b/src/components/Status/index.jsx @@ -32,6 +32,7 @@ const successKeys = [ 'power on', 'complete', 'online', + 'ready', ]; const successKeysContain = ['complete']; @@ -90,7 +91,7 @@ const getStatus = (key) => { export default class index extends Component { static propTypes = { - status: PropTypes.string, + status: PropTypes.any, text: PropTypes.string, style: PropTypes.object, }; diff --git a/src/components/Tables/SimpleTable/index.jsx b/src/components/Tables/SimpleTable/index.jsx index 552e9008..f113d5b2 100644 --- a/src/components/Tables/SimpleTable/index.jsx +++ b/src/components/Tables/SimpleTable/index.jsx @@ -48,6 +48,7 @@ export default class SimpleTable extends React.Component { // eslint-disable-next-line react/no-unused-prop-types defaultSortOrder: PropTypes.string, onRow: PropTypes.func, + childrenColumnName: PropTypes.string, }; static defaultProps = { @@ -78,6 +79,7 @@ export default class SimpleTable extends React.Component { render, isStatus, isName, + isPrice, ...rest } = column; if (column.key === 'operation') { @@ -99,6 +101,9 @@ export default class SimpleTable extends React.Component { if (dataIndex === 'name' || isName) { newRender = this.getNameRender(newRender, column); } + if (dataIndex === 'cost' || isPrice) { + newRender = this.getPriceRender(newRender, column); + } const newColumn = { ...rest, dataIndex, @@ -196,6 +201,17 @@ export default class SimpleTable extends React.Component { return baseColumns; }; + // eslint-disable-next-line no-unused-vars + getPriceRender = (render, column) => { + if (render) { + return render; + } + return (value) => { + const valueStr = isString(value) ? value : (value || 0).toFixed(2); + return {valueStr}; + }; + }; + getDataSource = () => { const { datas, filters, filterByBackend } = this.props; if (filterByBackend) { @@ -297,7 +313,8 @@ export default class SimpleTable extends React.Component { }; render() { - const { className, isLoading, rowSelection, footer } = this.props; + const { className, isLoading, rowSelection, footer, childrenColumnName } = + this.props; const currentColumns = this.getColumns(); const dataSource = this.getDataSource(); @@ -314,6 +331,7 @@ export default class SimpleTable extends React.Component { showSorterTooltip={false} footer={footer} onRow={this.onRow} + childrenColumnName={childrenColumnName} /> ); } diff --git a/src/components/VisibleObserver/index.jsx b/src/components/VisibleObserver/index.jsx deleted file mode 100644 index 14170498..00000000 --- a/src/components/VisibleObserver/index.jsx +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import React, { Component } from 'react'; -import { observer } from 'mobx-react'; - -@observer -export default class Observer extends Component { - constructor(props) { - super(props); - this.state = { visible: !window.IntersectionObserver }; - this.io = null; - this.container = null; - } - - componentDidMount() { - (window.IntersectionObserver - ? Promise.resolve() - : import('intersection-observer') - ).then(() => { - this.io = new window.IntersectionObserver((entries) => { - entries.forEach((entry) => { - this.setState({ visible: entry.isIntersecting }); - }); - }, {}); - this.io.observe(this.container); - }); - } - - componentWillUnmount() { - if (this.io) { - this.io.disconnect(); - } - } - - render() { - return ( - // 这里也可以使用 findDOMNode 实现，但是不建议 -
    { - this.container = div; - }} - {...this.props} - > - {Array.isArray(this.props.children) - ? this.props.children.map((child) => child(this.state.visible)) - : this.props.children(this.state.visible)} -
    - ); - } -} diff --git a/src/layouts/Base/Menu.jsx b/src/layouts/Base/Menu.jsx index cbe441b7..c4a41df2 100644 --- a/src/layouts/Base/Menu.jsx +++ b/src/layouts/Base/Menu.jsx @@ -25,9 +25,7 @@ import styles from './index.less'; const { SubMenu } = Menu; -@inject('rootStore') -@observer -class LayoutMenu extends Component { +export class LayoutMenu extends Component { constructor(props) { super(props); this.state = { @@ -57,6 +55,10 @@ class LayoutMenu extends Component { this.setState({ collapsed }); }; + getImage(isExtend) { + return !isExtend ? logoSmall : logoExtend; + } + changeCollapse = () => { const { collapsed } = this.state; this.setState({ @@ -200,7 +202,7 @@ class LayoutMenu extends Component { renderLogo() { const { collapsed, hover } = this.state; const isExtend = !collapsed || hover; - const imageSvg = !isExtend ? logoSmall : logoExtend; + const imageSvg = this.getImage(isExtend); const homeUrl = this.getUrl('/base/overview'); return (
    { }; const crontabNameValidate = (rule, value) => { - console.log(rule, value, isCrontabName(value)); if (!rule.required && value === undefined) { return Promise.resolve(true); }