TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(prettier): full repo linting and code reformatting once and for all (#3627)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2023-09-01 16:19:39 -04:00
1 parent 01500a2d4c
commit 9045ddaedc
656 files changed
+21737 -20628
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/Tooltip/PortalTooltip.tsx
+7 -9
View File
@@ -14,8 +14,7 @@ const portalNodes = {};
*/
export default class PortalTooltip extends React.Component {
static propTypes = {
parent: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
.isRequired,
parent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
active: PropTypes.bool,
group: PropTypes.string,
tooltipTimeout: PropTypes.number,
@@ -41,10 +40,12 @@ export default class PortalTooltip extends React.Component {
this.createPortal();
}
let { parent, ...other } = props;
let parentEl =
typeof parent === 'string' ? document.querySelector(parent) : parent;
let parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent;
ReactDOM.render(
<Card parentEl={parentEl} {...other} />,
<Card
parentEl={parentEl}
{...other}
/>,
portalNodes[this.props.group].node
);
}
@@ -68,10 +69,7 @@ export default class PortalTooltip extends React.Component {
let props = { ...nextProps };
let newProps = { ...nextProps };
if (
portalNodes[this.props.group] &&
portalNodes[this.props.group].timeout
) {
if (portalNodes[this.props.group] && portalNodes[this.props.group].timeout) {
clearTimeout(portalNodes[this.props.group].timeout);
}
platform/ui/src/components/Tooltip/PortalTooltipCard.tsx
+11 -39
View File
@@ -83,9 +83,7 @@ export default class PortalTooltipCard extends Component {
...this.defaultArrowStyle,
...this.props.style.arrowStyle,
};
let bgBorderColor = arrowStyle.borderColor
? arrowStyle.borderColor
: 'transparent';
let bgBorderColor = arrowStyle.borderColor ? arrowStyle.borderColor : 'transparent';
let fgColorBorder = `10px solid ${arrowStyle.color}`;
let fgTransBorder = `${FG_SIZE}px solid transparent`;
@@ -161,11 +159,7 @@ export default class PortalTooltipCard extends Component {
}
}
let {
color,
borderColor,
...propsArrowStyle
} = this.props.style.arrowStyle;
let { color, borderColor, ...propsArrowStyle } = this.props.style.arrowStyle;
const state = {
fgStyle: this.mergeStyle(fgStyle, propsArrowStyle),
@@ -192,16 +186,7 @@ export default class PortalTooltipCard extends Component {
mergeStyle(style, theme) {
if (theme) {
let {
position,
top,
left,
right,
bottom,
marginLeft,
marginRight,
...validTheme
} = theme;
let { position, top, left, right, bottom, marginLeft, marginRight, ...validTheme } = theme;
return {
...style,
@@ -217,10 +202,8 @@ export default class PortalTooltipCard extends Component {
let parent = this.props.parentEl;
let align = this.props.align;
let tooltipPosition = parent.getBoundingClientRect();
let scrollY =
window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
let scrollX =
window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
let scrollY = window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
let scrollX = window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
let top = scrollY + tooltipPosition.top;
let left = scrollX + tooltipPosition.left;
let style = {};
@@ -228,8 +211,7 @@ export default class PortalTooltipCard extends Component {
if (this.rootRef.current) {
const newHeight = this.rootRef.current.offsetHeight / 2;
const bottomPosition = tooltipPosition.bottom + newHeight;
const isOffscreen =
tooltipPosition.bottom + newHeight > window.innerHeight;
const isOffscreen = tooltipPosition.bottom + newHeight > window.innerHeight;
const offscreenDifference = bottomPosition - window.innerHeight;
if (isOffscreen) {
const padding = 3;
@@ -270,13 +252,11 @@ export default class PortalTooltipCard extends Component {
style.left = left + parentSize.width + this.margin;
},
top: () => {
style.left =
left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
style.left = left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
style.top = top - this.state.height - this.margin;
},
bottom: () => {
style.left =
left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
style.left = left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
style.top = top + parentSize.height + this.margin;
},
};
@@ -286,19 +266,13 @@ export default class PortalTooltipCard extends Component {
style.left = left + parentSize.width / 2 - this.margin + alignOffset;
},
right: () => {
style.left =
left -
this.state.width +
parentSize.width / 2 +
this.margin +
alignOffset;
style.left = left - this.state.width + parentSize.width / 2 + this.margin + alignOffset;
},
top: () => {
style.top = top + parentSize.height / 2 - this.margin;
},
bottom: () => {
style.top =
top + parentSize.height / 2 - this.state.height + this.margin;
style.top = top + parentSize.height / 2 - this.state.height + this.margin;
},
};
@@ -319,9 +293,7 @@ export default class PortalTooltipCard extends Component {
if (!bgStyleRight) {
bgStyleRight = tooltipWidth / 2 - BG_SIZE;
}
const newBgRight = Math.round(
bgStyleRight - style.left + this.margin
);
const newBgRight = Math.round(bgStyleRight - style.left + this.margin);
arrowStyle = {
...arrowStyle,
bgStyle: {
platform/ui/src/components/Tooltip/Tooltip.tsx
+8 -20
View File
@@ -30,15 +30,7 @@ const arrowPositionStyle = {
},
};
const Tooltip = ({
content,
isSticky,
position,
className,
tight,
children,
isDisabled,
}) => {
const Tooltip = ({ content, isSticky, position, className, tight, children, isDisabled }) => {
const [isActive, setIsActive] = useState(false);
const { t } = useTranslation('Buttons');
@@ -74,7 +66,7 @@ const Tooltip = ({
>
<div
className={classnames(
'relative tooltip-box bg-primary-dark border border-secondary-light text-white text-base rounded inset-x-auto top-full w-max-content',
'tooltip-box bg-primary-dark border-secondary-light w-max-content relative inset-x-auto top-full rounded border text-base text-white',
{
'py-1 px-4': !tight,
}
@@ -82,12 +74,15 @@ const Tooltip = ({
>
{typeof content === 'string' ? t(content) : content}
<svg
className="absolute h-4 text-primary-dark stroke-secondary-light"
className="text-primary-dark stroke-secondary-light absolute h-4"
style={arrowPositionStyle[position]}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path fill="currentColor" d="M24 22l-12-20l-12 20" />
<path
fill="currentColor"
d="M24 22l-12-20l-12 20"
/>
</svg>
</div>
</div>
@@ -106,14 +101,7 @@ Tooltip.propTypes = {
/** prevents tooltip from rendering despite hover/active/sticky */
isDisabled: PropTypes.bool,
content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
position: PropTypes.oneOf([
'bottom',
'bottom-left',
'bottom-right',
'left',
'right',
'top',
]),
position: PropTypes.oneOf(['bottom', 'bottom-left', 'bottom-right', 'left', 'right', 'top']),
isSticky: PropTypes.bool,
tight: PropTypes.bool,
children: PropTypes.node.isRequired,
platform/ui/src/components/Tooltip/__stories__/toolbarButton.stories.mdx
+22 -10
View File
@@ -9,11 +9,14 @@ export const argTypes = {
title: 'Components/Tooltip',
};
<Meta title="Components/Tooltip" component={Tooltip} />
<Meta
title="Components/Tooltip"
component={Tooltip}
/>
export const TooltipTemplate = (args) => (
export const TooltipTemplate = args => (
<div className="h-16 w-full">
<div class="w-8 h-8 mx-auto">
<div class="mx-auto h-8 w-8">
<Tooltip {...args}>
<Icon name="clipboard" />
</Tooltip>
@@ -21,7 +24,10 @@ export const TooltipTemplate = (args) => (
</div>
);
<Heading title="Tooltip" componentRelativePath="Tooltip/Tooltip.js" />
<Heading
title="Tooltip"
componentRelativePath="Tooltip/Tooltip.js"
/>
- [Overview](#overview)
- [Props](#props)
@@ -55,17 +61,23 @@ You can set the position of the tooltip by using the `position` prop.
<Canvas>
<Story name="Position">
<div className="h-16 w-full m-8">
<div class="w-8 h-8 mx-auto">
<Tooltip position="right" content="right">
<div className="m-8 h-16 w-full">
<div class="mx-auto h-8 w-8">
<Tooltip
position="right"
content="right"
>
<Icon name="clipboard" />
<span>Right</span>
</Tooltip>
</div>
</div>
<div className="h-16 w-full m-8">
<div class="w-8 h-8 mx-auto">
<Tooltip position="left" content="left">
<div className="m-8 h-16 w-full">
<div class="mx-auto h-8 w-8">
<Tooltip
position="left"
content="left"
>
<Icon name="clipboard" />
<span>Left</span>
</Tooltip>
platform/ui/src/components/Tooltip/tooltip.css
+10 -10
View File
@@ -4,7 +4,7 @@
/* TOOLTIP WORKAROUND FOR ARROW UP */
.tooltip.tooltip-bottom .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 14px;
height: 1px;
@@ -14,7 +14,7 @@
}
.tooltip.tooltip-top .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 14px;
height: 1px;
@@ -24,25 +24,25 @@
}
.tooltip.tooltip-bottom {
@apply pt-2 mt-1;
@apply mt-1 pt-2;
left: 50%;
transform: translateX(-50%);
}
.tooltip.tooltip-top {
@apply pb-2 mb-1;
@apply mb-1 pb-2;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
}
.tooltip.tooltip-bottom-left {
@apply pt-2 mt-1;
@apply mt-1 pt-2;
left: 0;
}
.tooltip.tooltip-bottom-right {
@apply pt-2 mt-1;
@apply mt-1 pt-2;
right: 0;
}
@@ -61,7 +61,7 @@
}
.tooltip.tooltip-right .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 2px;
height: 15px;
@@ -71,7 +71,7 @@
}
.tooltip.tooltip-left .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 2px;
height: 15px;
@@ -81,7 +81,7 @@
}
.tooltip.tooltip-bottom-right .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 15px;
height: 2px;
@@ -90,7 +90,7 @@
}
.tooltip.tooltip-bottom-left .tooltip-box::before {
@apply absolute z-10 bg-primary-dark;
@apply bg-primary-dark absolute z-10;
content: '';
width: 15px;
height: 2px;