Skip to content

Commit 4cf7251

Browse files
joeizangAniket-Engg
joeizang
authored and
Aniket-Engg
committed
add bottom padding to fe menu span
1 parent 6f13b6a commit 4cf7251

File tree

2 files changed

+296
-119
lines changed

2 files changed

+296
-119
lines changed

‎libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx‎

Lines changed: 87 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { CustomTooltip } from '@remix-ui/helper'
2-
import React, { useState, useEffect, } from 'react' //eslint-disable-line
3-
import { FormattedMessage } from 'react-intl'
4-
import { Placement } from 'react-bootstrap/esm/Overlay'
5-
import { FileExplorerMenuProps } from '../types'
6-
const _paq = window._paq = window._paq || []
1+
import {CustomTooltip} from '@remix-ui/helper'
2+
import React, {useState, useEffect} from 'react' //eslint-disable-line
3+
import {FormattedMessage} from 'react-intl'
4+
import {Placement} from 'react-bootstrap/esm/Overlay'
5+
import {FileExplorerMenuProps} from '../types'
6+
const _paq = (window._paq = window._paq || [])
77

88
export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
99
const [state, setState] = useState({
@@ -44,18 +44,24 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
4444
icon: 'fab fa-github',
4545
placement: 'bottom-start'
4646
}
47-
].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
47+
].filter(
48+
(item) =>
49+
props.menuItems &&
50+
props.menuItems.find((name) => {
51+
return name === item.action
52+
})
53+
),
4854
actions: {}
4955
})
50-
const enableDirUpload = { directory: "", webkitdirectory: "" }
56+
const enableDirUpload = {directory: '', webkitdirectory: ''}
5157

5258
useEffect(() => {
5359
const actions = {
5460
updateGist: () => {}
5561
}
5662

57-
setState(prevState => {
58-
return { ...prevState, actions }
63+
setState((prevState) => {
64+
return {...prevState, actions}
5965
})
6066
}, [])
6167

@@ -67,32 +73,53 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
6773
tooltipClasses="text-nowrap"
6874
tooltipText={props.title}
6975
>
70-
<span className='remixui_label' data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
76+
<span
77+
className="remixui_label"
78+
data-path={props.title}
79+
style={{fontWeight: 'bold'}}
80+
>
81+
{props.title}
82+
</span>
7183
</CustomTooltip>
72-
<span className="pl-0">{
73-
state.menuItems.map(({ action, title, icon, placement }, index) => {
84+
<span className="pl-0 pb-1">
85+
{state.menuItems.map(({action, title, icon, placement}, index) => {
7486
if (action === 'uploadFile') {
7587
return (
7688
<CustomTooltip
7789
placement={placement as Placement}
7890
tooltipId="uploadFileTooltip"
7991
tooltipClasses="text-nowrap"
80-
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
92+
tooltipText={
93+
<FormattedMessage
94+
id={`filePanel.${action}`}
95+
defaultMessage={title}
96+
/>
97+
}
8198
key={`index-${action}-${placement}-${icon}`}
8299
>
83100
<label
84101
id={action}
85-
data-id={'fileExplorerUploadFile' + action }
102+
data-id={'fileExplorerUploadFile' + action}
86103
className={icon + ' mb-0 px-1 remixui_newFile'}
87104
key={`index-${action}-${placement}-${icon}`}
88105
>
89-
<input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
90-
e.stopPropagation()
91-
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
92-
props.uploadFile(e.target)
93-
e.target.value = null
94-
}}
95-
multiple />
106+
<input
107+
id="fileUpload"
108+
data-id="fileExplorerFileUpload"
109+
type="file"
110+
onChange={(e) => {
111+
e.stopPropagation()
112+
_paq.push([
113+
'trackEvent',
114+
'fileExplorer',
115+
'fileAction',
116+
action
117+
])
118+
props.uploadFile(e.target)
119+
e.target.value = null
120+
}}
121+
multiple
122+
/>
96123
</label>
97124
</CustomTooltip>
98125
)
@@ -102,22 +129,38 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
102129
placement={placement as Placement}
103130
tooltipId="uploadFolderTooltip"
104131
tooltipClasses="text-nowrap"
105-
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
132+
tooltipText={
133+
<FormattedMessage
134+
id={`filePanel.${action}`}
135+
defaultMessage={title}
136+
/>
137+
}
106138
key={`index-${action}-${placement}-${icon}`}
107139
>
108140
<label
109141
id={action}
110-
data-id={'fileExplorerUploadFolder' + action }
142+
data-id={'fileExplorerUploadFolder' + action}
111143
className={icon + ' mb-0 px-1 remixui_newFile'}
112144
key={`index-${action}-${placement}-${icon}`}
113145
>
114-
<input id="folderUpload" data-id="fileExplorerFolderUpload" type="file" onChange={(e) => {
115-
e.stopPropagation()
116-
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
117-
props.uploadFolder(e.target)
118-
e.target.value = null
119-
}}
120-
{...enableDirUpload} multiple />
146+
<input
147+
id="folderUpload"
148+
data-id="fileExplorerFolderUpload"
149+
type="file"
150+
onChange={(e) => {
151+
e.stopPropagation()
152+
_paq.push([
153+
'trackEvent',
154+
'fileExplorer',
155+
'fileAction',
156+
action
157+
])
158+
props.uploadFolder(e.target)
159+
e.target.value = null
160+
}}
161+
{...enableDirUpload}
162+
multiple
163+
/>
121164
</label>
122165
</CustomTooltip>
123166
)
@@ -127,15 +170,25 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
127170
placement={placement as Placement}
128171
tooltipId={`${action}-${title}-${icon}-${index}`}
129172
tooltipClasses="text-nowrap"
130-
tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
173+
tooltipText={
174+
<FormattedMessage
175+
id={`filePanel.${action}`}
176+
defaultMessage={title}
177+
/>
178+
}
131179
key={`${action}-${title}-${index}`}
132180
>
133181
<span
134182
id={action}
135183
data-id={'fileExplorerNewFile' + action}
136184
onClick={(e) => {
137185
e.stopPropagation()
138-
_paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
186+
_paq.push([
187+
'trackEvent',
188+
'fileExplorer',
189+
'fileAction',
190+
action
191+
])
139192
if (action === 'createNewFile') {
140193
props.createNewFile()
141194
} else if (action === 'createNewFolder') {
@@ -148,8 +201,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
148201
}}
149202
className={'newFile ' + icon + ' px-1 remixui_newFile'}
150203
key={`${action}-${title}-${index}`}
151-
>
152-
</span>
204+
></span>
153205
</CustomTooltip>
154206
)
155207
}

0 commit comments

Comments
 (0)