Refactor(marketplace): Use button component

This commit is contained in:
alexsparkes 2024-02-11 10:45:40 +00:00
parent c9fb5109c9
commit 53d649e04a
7 changed files with 184 additions and 178 deletions

View File

@ -2423,104 +2423,104 @@ packages:
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
dev: false
/@rollup/rollup-android-arm-eabi@4.9.6:
resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
/@rollup/rollup-android-arm-eabi@4.10.0:
resolution: {integrity: sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==}
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-android-arm64@4.9.6:
resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
/@rollup/rollup-android-arm64@4.10.0:
resolution: {integrity: sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-darwin-arm64@4.9.6:
resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
/@rollup/rollup-darwin-arm64@4.10.0:
resolution: {integrity: sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-darwin-x64@4.9.6:
resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
/@rollup/rollup-darwin-x64@4.10.0:
resolution: {integrity: sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.9.6:
resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
/@rollup/rollup-linux-arm-gnueabihf@4.10.0:
resolution: {integrity: sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm64-gnu@4.9.6:
resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
/@rollup/rollup-linux-arm64-gnu@4.10.0:
resolution: {integrity: sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm64-musl@4.9.6:
resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
/@rollup/rollup-linux-arm64-musl@4.10.0:
resolution: {integrity: sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-riscv64-gnu@4.9.6:
resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
/@rollup/rollup-linux-riscv64-gnu@4.10.0:
resolution: {integrity: sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==}
cpu: [riscv64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-x64-gnu@4.9.6:
resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
/@rollup/rollup-linux-x64-gnu@4.10.0:
resolution: {integrity: sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-x64-musl@4.9.6:
resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
/@rollup/rollup-linux-x64-musl@4.10.0:
resolution: {integrity: sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-arm64-msvc@4.9.6:
resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
/@rollup/rollup-win32-arm64-msvc@4.10.0:
resolution: {integrity: sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-ia32-msvc@4.9.6:
resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
/@rollup/rollup-win32-ia32-msvc@4.10.0:
resolution: {integrity: sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-x64-msvc@4.9.6:
resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
/@rollup/rollup-win32-x64-msvc@4.10.0:
resolution: {integrity: sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==}
cpu: [x64]
os: [win32]
requiresBuild: true
@ -3302,7 +3302,7 @@ packages:
hasBin: true
dependencies:
caniuse-lite: 1.0.30001585
electron-to-chromium: 1.4.664
electron-to-chromium: 1.4.665
node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.22.3)
dev: true
@ -3661,8 +3661,8 @@ packages:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
dev: true
/electron-to-chromium@1.4.664:
resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==}
/electron-to-chromium@1.4.665:
resolution: {integrity: sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==}
dev: true
/embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
@ -3731,7 +3731,7 @@ packages:
has-property-descriptors: 1.0.1
has-proto: 1.0.1
has-symbols: 1.0.3
hasown: 2.0.0
hasown: 2.0.1
internal-slot: 1.0.7
is-array-buffer: 3.0.4
is-callable: 1.2.7
@ -3767,13 +3767,15 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/es-iterator-helpers@1.0.15:
resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
/es-iterator-helpers@1.0.16:
resolution: {integrity: sha512-CREG2A9Vq7bpDRnldhFcMKuKArvkZtsH6Y0DHOHVg49qhf+LD8uEdUM3OkOAICv0EziGtDEnQtqY2/mfBILpFw==}
engines: {node: '>= 0.4'}
dependencies:
asynciterator.prototype: 1.0.0
call-bind: 1.0.6
define-properties: 1.2.1
es-abstract: 1.22.3
es-errors: 1.3.0
es-set-tostringtag: 2.0.2
function-bind: 1.1.2
get-intrinsic: 1.2.4
@ -3792,13 +3794,13 @@ packages:
dependencies:
get-intrinsic: 1.2.4
has-tostringtag: 1.0.2
hasown: 2.0.0
hasown: 2.0.1
dev: true
/es-shim-unscopables@1.0.2:
resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
dependencies:
hasown: 2.0.0
hasown: 2.0.1
dev: true
/es-to-primitive@1.2.1:
@ -3972,7 +3974,7 @@ packages:
eslint: 8.56.0
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
hasown: 2.0.0
hasown: 2.0.1
is-core-module: 2.13.1
is-glob: 4.0.3
minimatch: 3.1.2
@ -4023,9 +4025,9 @@ packages:
axobject-query: 3.2.1
damerau-levenshtein: 1.0.8
emoji-regex: 9.2.2
es-iterator-helpers: 1.0.15
es-iterator-helpers: 1.0.16
eslint: 8.56.0
hasown: 2.0.0
hasown: 2.0.1
jsx-ast-utils: 3.3.5
language-tags: 1.0.9
minimatch: 3.1.2
@ -4052,7 +4054,7 @@ packages:
array.prototype.flatmap: 1.3.2
array.prototype.tosorted: 1.1.3
doctrine: 2.1.0
es-iterator-helpers: 1.0.15
es-iterator-helpers: 1.0.16
eslint: 8.56.0
estraverse: 5.3.0
jsx-ast-utils: 3.3.5
@ -4372,7 +4374,7 @@ packages:
function-bind: 1.1.2
has-proto: 1.0.1
has-symbols: 1.0.3
hasown: 2.0.0
hasown: 2.0.1
dev: true
/get-stream@6.0.1:
@ -4554,8 +4556,8 @@ packages:
has-symbols: 1.0.3
dev: true
/hasown@2.0.0:
resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
/hasown@2.0.1:
resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
engines: {node: '>= 0.4'}
dependencies:
function-bind: 1.1.2
@ -4643,7 +4645,7 @@ packages:
engines: {node: '>= 0.4'}
dependencies:
es-errors: 1.3.0
hasown: 2.0.0
hasown: 2.0.1
side-channel: 1.0.5
dev: true
@ -4700,7 +4702,7 @@ packages:
/is-core-module@2.13.1:
resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
dependencies:
hasown: 2.0.0
hasown: 2.0.1
/is-date-object@1.0.5:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@ -5769,26 +5771,26 @@ packages:
glob: 10.3.10
dev: true
/rollup@4.9.6:
resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
/rollup@4.10.0:
resolution: {integrity: sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
dependencies:
'@types/estree': 1.0.5
optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.9.6
'@rollup/rollup-android-arm64': 4.9.6
'@rollup/rollup-darwin-arm64': 4.9.6
'@rollup/rollup-darwin-x64': 4.9.6
'@rollup/rollup-linux-arm-gnueabihf': 4.9.6
'@rollup/rollup-linux-arm64-gnu': 4.9.6
'@rollup/rollup-linux-arm64-musl': 4.9.6
'@rollup/rollup-linux-riscv64-gnu': 4.9.6
'@rollup/rollup-linux-x64-gnu': 4.9.6
'@rollup/rollup-linux-x64-musl': 4.9.6
'@rollup/rollup-win32-arm64-msvc': 4.9.6
'@rollup/rollup-win32-ia32-msvc': 4.9.6
'@rollup/rollup-win32-x64-msvc': 4.9.6
'@rollup/rollup-android-arm-eabi': 4.10.0
'@rollup/rollup-android-arm64': 4.10.0
'@rollup/rollup-darwin-arm64': 4.10.0
'@rollup/rollup-darwin-x64': 4.10.0
'@rollup/rollup-linux-arm-gnueabihf': 4.10.0
'@rollup/rollup-linux-arm64-gnu': 4.10.0
'@rollup/rollup-linux-arm64-musl': 4.10.0
'@rollup/rollup-linux-riscv64-gnu': 4.10.0
'@rollup/rollup-linux-x64-gnu': 4.10.0
'@rollup/rollup-linux-x64-musl': 4.10.0
'@rollup/rollup-win32-arm64-msvc': 4.10.0
'@rollup/rollup-win32-ia32-msvc': 4.10.0
'@rollup/rollup-win32-x64-msvc': 4.10.0
fsevents: 2.3.3
dev: true
@ -6469,7 +6471,7 @@ packages:
'@types/node': 20.11.17
esbuild: 0.19.12
postcss: 8.4.35
rollup: 4.9.6
rollup: 4.10.0
sass: 1.70.0
optionalDependencies:
fsevents: 2.3.3

View File

@ -18,6 +18,7 @@ import {
import Modal from 'react-modal';
import Header from '../settings/Header';
import Button from '../settings/Button';
import { install, uninstall } from 'modules/helpers/marketplace';
@ -271,27 +272,22 @@ class Item extends PureComponent {
/>
{this.props.button}
<div className="iconButtons">
<Tooltip title={variables.getMessage('widgets.quote.share')} key="share">
<button onClick={() => this.setState({ shareModal: true })}>
<MdIosShare />
</button>
</Tooltip>
<Tooltip
title={variables.getMessage('modals.main.marketplace.product.buttons.report')}
key="report"
>
<button
onClick={() =>
window.open(
variables.constants.REPORT_ITEM +
this.props.data.display_name.split(' ').join('+'),
'_blank',
)
}
>
<MdFlag />
</button>
</Tooltip>
<Button
type="icon"
onClick={() => this.setState({ shareModal: true })}
icon={<MdIosShare />}
tooltipTitle={variables.getMessage('widgets.quote.share')}
tooltipKey="share"
/>
<Button
type="icon"
onClick={() => this.setState({ shareModal: true })}
icon={<MdFlag />}
tooltipTitle={variables.getMessage(
'modals.main.marketplace.product.buttons.report',
)}
tooltipKey="report"
/>
</div>
{this.props.data.data.collection && (
<div className="inCollection">

View File

@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
import {
MdWifiOff,
MdLocalMall,
MdOutlineKeyboardArrowRight,
MdClose,
MdSearch,
MdOutlineArrowForward,
MdLibraryAdd,
@ -14,6 +14,7 @@ import Item from '../Item';
import Items from '../Items';
import Dropdown from '../../settings/Dropdown';
import Header from '../../settings/Header';
import Button from '../../settings/Button';
import { install, urlParser, uninstall } from 'modules/helpers/marketplace';
@ -30,15 +31,20 @@ class Marketplace extends PureComponent {
};
this.buttons = {
uninstall: (
<button onClick={() => this.manage('uninstall')}>
{variables.getMessage('modals.main.marketplace.product.buttons.remove')}
</button>
<Button
type="settings"
onClick={() => this.manage('uninstall')}
icon={<MdClose />}
label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
/>
),
install: (
<button onClick={() => this.manage('install')}>
{variables.getMessage('modals.main.marketplace.product.buttons.addtomue')}
<MdLibraryAdd />
</button>
<Button
type="settings"
onClick={() => this.manage('install')}
icon={<MdLibraryAdd />}
label={variables.getMessage('modals.main.marketplace.product.buttons.addtomue')}
/>
),
};
this.controller = new AbortController();
@ -346,14 +352,13 @@ class Marketplace extends PureComponent {
<span className="subtitle">{this.state.collectionDescription}</span>
</div>
<button
className="addAllButton"
<Button
type="collection"
onClick={() => this.installCollection()}
disabled={this.state.busy}
>
{variables.getMessage('modals.main.marketplace.add_all')}
<MdLibraryAdd />
</button>
icon={<MdLibraryAdd />}
label={variables.getMessage('modals.main.marketplace.add_all')}
/>
</div>
</>
) : (
@ -408,13 +413,13 @@ class Marketplace extends PureComponent {
<span className="title">{item.display_name}</span>
<span className="subtitle">{item.description}</span>
</div>
<button
className="collectionButton"
<Button
type="collection"
onClick={() => this.toggle('collection', item.name)}
>
<MdOutlineArrowForward />{' '}
{variables.getMessage('modals.main.marketplace.explore_collection')}
</button>
icon={<MdOutlineArrowForward />}
label={variables.getMessage('modals.main.marketplace.explore_collection')}
iconPlacement="right"
/>
</div>
) : null}
</>

View File

@ -358,24 +358,6 @@ p.author {
color: #ccc !important;
}
}
.addAllButton {
margin: 0.5rem;
display: flex;
align-items: center;
gap: 15px;
padding: 1px 12px;
backdrop-filter: blur(16px) saturate(180%) !important;
background-color: rgb(255 255 255 / 10%) !important;
border: 1px solid rgb(209 213 219 / 30%) !important;
color: #fff !important;
&:hover {
backdrop-filter: blur(16px) saturate(180%) !important;
background-color: rgb(17 25 40 / 20%) !important;
border: 1px solid rgb(255 255 255 / 12.5%) !important;
}
}
}
.collection {

View File

@ -1,29 +1,3 @@
%storeButton {
cursor: pointer;
font-size: 18px;
display: block;
padding: 5px 30px;
background: none;
border-radius: 24px;
transition: ease 0.33s;
border: 2px solid black;
&:hover {
background: #2d3436;
color: map-get($theme-colours, 'main');
}
}
.dark %storeButton {
border: 2px solid map-get($theme-colours, 'main');
color: map-get($theme-colours, 'main');
&:hover {
background: map-get($theme-colours, 'main');
color: #2d3436;
}
}
.updateCheck {
flex-flow: row !important;
}
@ -93,11 +67,43 @@
border: 1px solid rgb(209 213 219 / 30%);
color: #fff;
border-radius: 12px;
height: 40px;
font-size: 1rem;
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
gap: 20px;
transition: 0.5s;
cursor: pointer;
&:hover {
backdrop-filter: blur(16px) saturate(180%);
background-color: rgb(17 25 40 / 20%);
border: 1px solid rgb(255 255 255 / 12.5%);
}
&:active {
@include themed() {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
}
&:focus {
@include themed() {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
}
&:disabled {
@include themed() {
background: t($modal-sidebarActive);
cursor: not-allowed;
}
}
}
a.btn-collection {
@ -112,3 +118,7 @@ a.btn-collection {
.flowReverse {
flex-flow: row-reverse !important;
}
.btn-icon {
@include modal-button(standard);
}

View File

@ -3,9 +3,9 @@
.tab-content {
width: 100% !important;
button {
/* button {
@include modal-button(standard);
}
}*/
@include themed {
padding: 1rem 3rem 3rem;

View File

@ -1,42 +1,53 @@
import React, { forwardRef } from 'react';
import Tooltip from '../../../helpers/tooltip/Tooltip';
const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, active }, ref) => {
let className;
const Button = forwardRef(
(
{ icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
ref,
) => {
let className;
switch (type) {
case 'settings':
className = 'btn-settings';
break;
case 'icon':
className = 'btn-icon';
break;
case 'navigation':
className = 'btn-navigation';
break;
case 'collection':
className = 'btn-collection';
break;
default:
className = 'btn-default';
}
switch (type) {
case 'settings':
className = 'btn-settings';
break;
case 'icon':
className = 'btn-icon';
break;
case 'navigation':
className = 'btn-navigation';
break;
case 'collection':
className = 'btn-collection';
break;
default:
className = 'btn-default';
}
if (iconPlacement === 'right') {
className += ' flowReverse';
}
if (iconPlacement === 'right') {
className += ' flowReverse';
}
if (active) {
className += ` ${className}-active`;
}
if (active) {
className += ` ${className}-active`;
}
const button = (
<button className={className} onClick={onClick} ref={ref}>
{icon}
{label}
</button>
);
const button = (
<button className={className} onClick={onClick} ref={ref} disabled={disabled}>
{icon}
{label}
</button>
);
return type === 'icon' ? <Tooltip>{button}</Tooltip> : button;
});
return type === 'icon' ? (
<Tooltip title={tooltipTitle} key={tooltipKey}>
{button}
</Tooltip>
) : (
button
);
},
);
export default Button;