aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/sidebars
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/sidebars')
-rw-r--r--ui/app/components/sidebars/index.js1
-rw-r--r--ui/app/components/sidebars/index.scss81
-rw-r--r--ui/app/components/sidebars/sidebar-content.scss112
-rw-r--r--ui/app/components/sidebars/sidebar.component.js69
-rw-r--r--ui/app/components/sidebars/sidebar.constants.js1
-rw-r--r--ui/app/components/sidebars/tests/sidebars-component.test.js97
6 files changed, 0 insertions, 361 deletions
diff --git a/ui/app/components/sidebars/index.js b/ui/app/components/sidebars/index.js
deleted file mode 100644
index 732925f69..000000000
--- a/ui/app/components/sidebars/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './sidebar.component'
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
deleted file mode 100644
index b9845d564..000000000
--- a/ui/app/components/sidebars/index.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import './sidebar-content';
-
-.sidebar-right-enter {
- transition: transform 300ms ease-in-out;
- transform: translateX(-100%);
-}
-
-.sidebar-right-enter.sidebar-right-enter-active {
- transition: transform 300ms ease-in-out;
- transform: translateX(0%);
-}
-
-.sidebar-right-leave {
- transition: transform 200ms ease-out;
- transform: translateX(0%);
-}
-
-.sidebar-right-leave.sidebar-right-leave-active {
- transition: transform 200ms ease-out;
- transform: translateX(-100%);
-}
-
-.sidebar-left-enter {
- transition: transform 300ms ease-in-out;
- transform: translateX(100%);
-}
-
-.sidebar-left-enter.sidebar-left-enter-active {
- transition: transform 300ms ease-in-out;
- transform: translateX(0%);
-}
-
-.sidebar-left-leave {
- transition: transform 200ms ease-out;
- transform: translateX(0%);
-}
-
-.sidebar-left-leave.sidebar-left-leave-active {
- transition: transform 200ms ease-out;
- transform: translateX(100%);
-}
-
-.sidebar-left {
- flex: 1 0 230px;
- background: rgb(250, 250, 250);
- z-index: $sidebar-z-index;
- position: fixed;
- left: 15%;
- right: 0;
- bottom: 0;
- opacity: 1;
- visibility: visible;
- will-change: transform;
- overflow-y: auto;
- box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
- width: 85%;
- height: 100%;
-
- @media screen and (min-width: 769px) {
- width: 408px;
- left: calc(100% - 408px);
- }
-
- @media screen and (max-width: $break-small) {
- width: 100%;
- left: 0%;
- }
-}
-
-.sidebar-overlay {
- z-index: $sidebar-overlay-z-index;
- position: fixed;
- height: 100%;
- width: 100%;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 1;
- visibility: visible;
- background-color: rgba(0, 0, 0, .3);
-} \ No newline at end of file
diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss
deleted file mode 100644
index ca6b0a458..000000000
--- a/ui/app/components/sidebars/sidebar-content.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-.sidebar-left {
- display: flex;
-
- .gas-modal-page-container {
- display: flex;
-
- .page-container {
- flex: 1;
- max-width: 100%;
-
- &__content {
- display: flex;
- overflow-y: initial;
- }
-
- @media screen and (max-width: $break-small) {
- max-width: 344px;
- min-height: auto;
- }
-
- @media screen and (min-width: $break-small) {
- max-height: none;
- }
- }
-
- .gas-price-chart {
- margin-left: 10px;
-
- &__root {
- max-height: 160px !important;
- }
- }
-
- .page-container__bottom {
- display: flex;
- flex-direction: column;
- flex-flow: space-between;
- height: 100%;
- }
-
- .page-container__content {
- overflow-y: inherit;
- }
-
- .basic-tab-content {
- height: auto;
- margin-bottom: 0px;
- border-bottom: 1px solid #d2d8dd;
- flex: 1 1 70%;
-
- @media screen and (max-width: $break-small) {
- padding-left: 14px;
- padding-bottom: 21px;
- }
-
- .gas-price-button-group--alt {
- @media screen and (max-width: $break-small) {
- max-width: 318px;
-
- &__time-estimate {
- font-size: 12px;
- }
- }
- }
- }
-
- .advanced-tab {
- @media screen and (min-width: $break-small) {
- flex: 1 1 70%;
- }
-
- &__fee-chart {
- height: 320px;
-
- @media screen and (max-width: $break-small) {
- height: initial;
- }
- }
-
- &__fee-chart__speed-buttons {
- bottom: 77px;
-
- @media screen and (max-width: $break-small) {
- display: none;
- }
- }
- }
-
- .gas-modal-content {
- display: flex;
- flex-direction: column;
- width: 100%;
-
- &__info-row-wrapper {
- display: flex;
- @media screen and (min-width: $break-small) {
- flex: 1 1 30%;
- }
- }
-
- &__info-row {
- height: 170px;
-
- @media screen and (max-width: $break-small) {
- height: initial;
- display: flex;
- justify-content: center;
- }
- }
- }
- }
-} \ No newline at end of file
diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js
deleted file mode 100644
index b9e0f9e81..000000000
--- a/ui/app/components/sidebars/sidebar.component.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-import WalletView from '../wallet-view'
-import { WALLET_VIEW_SIDEBAR } from './sidebar.constants'
-import CustomizeGas from '../gas-customization/gas-modal-page-container/'
-
-export default class Sidebar extends Component {
-
- static propTypes = {
- sidebarOpen: PropTypes.bool,
- hideSidebar: PropTypes.func,
- sidebarShouldClose: PropTypes.bool,
- transitionName: PropTypes.string,
- type: PropTypes.string,
- sidebarProps: PropTypes.object,
- onOverlayClose: PropTypes.func,
- };
-
- renderOverlay () {
- const { onOverlayClose } = this.props
-
- return <div
- className="sidebar-overlay"
- onClick={() => {
- onOverlayClose && onOverlayClose()
- this.props.hideSidebar()
- }
- } />
- }
-
- renderSidebarContent () {
- const { type, sidebarProps = {} } = this.props
- const { transaction = {} } = sidebarProps
- switch (type) {
- case WALLET_VIEW_SIDEBAR:
- return <WalletView responsiveDisplayClassname={'sidebar-right' } />
- case 'customize-gas':
- return <div className={'sidebar-left'}><CustomizeGas transaction={transaction} /></div>
- default:
- return null
- }
-
- }
-
- componentDidUpdate (prevProps) {
- if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) {
- this.props.hideSidebar()
- }
- }
-
- render () {
- const { transitionName, sidebarOpen, sidebarShouldClose } = this.props
-
- return (
- <div>
- <ReactCSSTransitionGroup
- transitionName={transitionName}
- transitionEnterTimeout={300}
- transitionLeaveTimeout={200}
- >
- { sidebarOpen && !sidebarShouldClose ? this.renderSidebarContent() : null }
- </ReactCSSTransitionGroup>
- { sidebarOpen && !sidebarShouldClose ? this.renderOverlay() : null }
- </div>
- )
- }
-
-}
diff --git a/ui/app/components/sidebars/sidebar.constants.js b/ui/app/components/sidebars/sidebar.constants.js
deleted file mode 100644
index 1613a8245..000000000
--- a/ui/app/components/sidebars/sidebar.constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const WALLET_VIEW_SIDEBAR = 'wallet-view'
diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/sidebars/tests/sidebars-component.test.js
deleted file mode 100644
index cee22aca8..000000000
--- a/ui/app/components/sidebars/tests/sidebars-component.test.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-import Sidebar from '../sidebar.component.js'
-
-import WalletView from '../../wallet-view'
-import CustomizeGas from '../../gas-customization/gas-modal-page-container/'
-
-const propsMethodSpies = {
- hideSidebar: sinon.spy(),
-}
-
-describe('Sidebar Component', function () {
- let wrapper
-
- beforeEach(() => {
- wrapper = shallow(<Sidebar
- sidebarOpen={false}
- hideSidebar={propsMethodSpies.hideSidebar}
- transitionName={'someTransition'}
- type={'wallet-view'}
- />)
- })
-
- afterEach(() => {
- propsMethodSpies.hideSidebar.resetHistory()
- })
-
- describe('renderOverlay', () => {
- let renderOverlay
-
- beforeEach(() => {
- renderOverlay = shallow(wrapper.instance().renderOverlay())
- })
-
- it('should render a overlay element', () => {
- assert(renderOverlay.hasClass('sidebar-overlay'))
- })
-
- it('should pass the correct onClick function to the element', () => {
- assert.equal(propsMethodSpies.hideSidebar.callCount, 0)
- renderOverlay.props().onClick()
- assert.equal(propsMethodSpies.hideSidebar.callCount, 1)
- })
- })
-
- describe('renderSidebarContent', () => {
- let renderSidebarContent
-
- beforeEach(() => {
- wrapper.setProps({ type: 'wallet-view' })
- renderSidebarContent = wrapper.instance().renderSidebarContent()
- })
-
- it('should render sidebar content with the correct props', () => {
- wrapper.setProps({ type: 'wallet-view' })
- renderSidebarContent = wrapper.instance().renderSidebarContent()
- assert.equal(renderSidebarContent.props.responsiveDisplayClassname, 'sidebar-right')
- })
-
- it('should render sidebar content with the correct props', () => {
- wrapper.setProps({ type: 'customize-gas' })
- renderSidebarContent = wrapper.instance().renderSidebarContent()
- const renderedSidebarContent = shallow(renderSidebarContent)
- assert(renderedSidebarContent.hasClass('sidebar-left'))
- assert(renderedSidebarContent.childAt(0).is(CustomizeGas))
- })
-
- it('should not render with an unrecognized type', () => {
- wrapper.setProps({ type: 'foobar' })
- renderSidebarContent = wrapper.instance().renderSidebarContent()
- assert.equal(renderSidebarContent, undefined)
- })
- })
-
- describe('render', () => {
- it('should render a div with one child', () => {
- assert(wrapper.is('div'))
- assert.equal(wrapper.children().length, 1)
- })
-
- it('should render the ReactCSSTransitionGroup without any children', () => {
- assert(wrapper.children().at(0).is(ReactCSSTransitionGroup))
- assert.equal(wrapper.children().at(0).children().length, 0)
- })
-
- it('should render sidebar content and the overlay if sidebarOpen is true', () => {
- wrapper.setProps({ sidebarOpen: true })
- assert.equal(wrapper.children().length, 2)
- assert(wrapper.children().at(1).hasClass('sidebar-overlay'))
- assert.equal(wrapper.children().at(0).children().length, 1)
- assert(wrapper.children().at(0).children().at(0).is(WalletView))
- })
- })
-})
generated by cgit (git 2.34.1) at 2024-10-23 01:58:40 +0800