forked from TeselaGen/tg-oss
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding back dts, converting a few components to fns
- Loading branch information
Showing
9 changed files
with
477 additions
and
526 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,68 @@ | ||
| import React, { Component } from "react"; | ||
| import React, { useState } from "react"; | ||
| import { Button, Classes, Icon } from "@blueprintjs/core"; | ||
| import classNames from "classnames"; | ||
| import "./style.css"; | ||
|
|
||
| export default class CollapsibleCard extends Component { | ||
| state = { | ||
| open: true | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| open: !props.initialClosed | ||
| }; | ||
| } | ||
| export default function CollapsibleCard({ | ||
| title, | ||
| icon, | ||
| openTitleElements, | ||
| noCard = false, | ||
| className, | ||
| style, | ||
| children, | ||
| initialClosed = false, | ||
| toggle, | ||
| isOpen | ||
| }) { | ||
| let [open, setOpen] = useState(!initialClosed); | ||
| if (isOpen !== undefined) open = isOpen; | ||
|
|
||
| renderOpenCard() { | ||
| return this.props.children; | ||
| } | ||
|
|
||
| toggleCardInfo = () => { | ||
| if (this.props.toggle) this.props.toggle(); | ||
| const toggleCardInfo = () => { | ||
| if (toggle) toggle(); | ||
| else { | ||
| this.setState({ | ||
| open: !this.state.open | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| getIsOpen = () => { | ||
| if (this.props.isOpen !== undefined) { | ||
| return this.props.isOpen; | ||
| } else { | ||
| return this.state.open; | ||
| setOpen(!open); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const open = this.getIsOpen(); | ||
| const { | ||
| title, | ||
| icon, | ||
| openTitleElements, | ||
| noCard = false, | ||
| className, | ||
| style | ||
| } = this.props; | ||
|
|
||
| // blueprintjs card will match our table color. which looks really bad when a table is in a card. | ||
| return ( | ||
| <div | ||
| className={classNames({ "tg-card": !noCard, open }, className)} | ||
| style={{ | ||
| paddingTop: 10, | ||
| paddingBottom: 10, | ||
| paddingLeft: 15, | ||
| paddingRight: 15, | ||
| ...style | ||
| }} | ||
| > | ||
| <div className="tg-card-header" style={{ marginBottom: 8 }}> | ||
| <div className="tg-card-header-title"> | ||
| {icon && <Icon icon={icon} />} | ||
| <h6 | ||
| style={{ | ||
| marginBottom: 0, | ||
| marginRight: 10, | ||
| marginLeft: 10 | ||
| }} | ||
| > | ||
| {title} | ||
| </h6> | ||
| <div>{open && openTitleElements}</div> | ||
| </div> | ||
| <div> | ||
| <Button | ||
| icon={open ? "minimize" : "maximize"} | ||
| className={classNames( | ||
| Classes.MINIMAL, | ||
| "info-btn", | ||
| "tg-collapse-toggle" | ||
| )} | ||
| onClick={this.toggleCardInfo} | ||
| /> | ||
| </div> | ||
| return ( | ||
| <div | ||
| className={classNames({ "tg-card": !noCard, open }, className)} | ||
| style={{ | ||
| paddingTop: 10, | ||
| paddingBottom: 10, | ||
| paddingLeft: 15, | ||
| paddingRight: 15, | ||
| ...style | ||
| }} | ||
| > | ||
| <div className="tg-card-header" style={{ marginBottom: 8 }}> | ||
| <div className="tg-card-header-title"> | ||
| {icon && <Icon icon={icon} />} | ||
| <h6 | ||
| style={{ | ||
| marginBottom: 0, | ||
| marginRight: 10, | ||
| marginLeft: 10 | ||
| }} | ||
| > | ||
| {title} | ||
| </h6> | ||
| <div>{open && openTitleElements}</div> | ||
| </div> | ||
| <div> | ||
| <Button | ||
| icon={open ? "minimize" : "maximize"} | ||
| className={classNames( | ||
| Classes.MINIMAL, | ||
| "info-btn", | ||
| "tg-collapse-toggle" | ||
| )} | ||
| onClick={toggleCardInfo} | ||
| /> | ||
| </div> | ||
| {open && this.renderOpenCard()} | ||
| </div> | ||
| ); | ||
| } | ||
| {open && children} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,78 @@ | ||
| import React, { Component } from "react"; | ||
| import React from "react"; | ||
| import { Popover, Button, Tooltip, Icon } from "@blueprintjs/core"; | ||
| import classnames from "classnames"; | ||
| import "./style.css"; | ||
| import { popoverOverflowModifiers } from ".."; | ||
|
|
||
| export default class InfoHelper extends Component { | ||
| render() { | ||
| const { | ||
| className, | ||
| content, | ||
| children, | ||
| icon = "info-sign", | ||
| isPopover, | ||
| isButton, | ||
| size, | ||
| isInline, | ||
| clickable, | ||
| color, | ||
| noMarginTop, | ||
| popoverProps = {}, | ||
| disabled, | ||
| displayToSide, | ||
| style, | ||
| ...rest | ||
| } = this.props; | ||
| const IconToUse = isButton ? Button : Icon; | ||
| const iconProps = { | ||
| icon, | ||
| color, | ||
| disabled | ||
| }; | ||
| if (!isButton) iconProps.iconSize = size; | ||
| export default ({ | ||
| className, | ||
| content, | ||
| children, | ||
| icon = "info-sign", | ||
| isPopover, | ||
| isButton, | ||
| size, | ||
| isInline, | ||
| clickable, | ||
| color, | ||
| noMarginTop, | ||
| popoverProps = {}, | ||
| disabled, | ||
| displayToSide, | ||
| style, | ||
| ...rest | ||
| }) => { | ||
| const IconToUse = isButton ? Button : Icon; | ||
| const iconProps = { | ||
| icon, | ||
| color, | ||
| disabled | ||
| }; | ||
| if (!isButton) iconProps.iconSize = size; | ||
|
|
||
| const IconInner = <IconToUse {...iconProps} {...rest} />; | ||
| let toReturn; | ||
| const toolTipOrPopoverProps = { | ||
| disabled: | ||
| disabled || | ||
| (!isPopover && | ||
| window.Cypress && | ||
| !window.Cypress.allowInfoHelperTooltips), | ||
| popoverClassName: "tg-info-helper-popover bp3-tooltip", | ||
| content: content || children, | ||
| modifiers: popoverOverflowModifiers, | ||
| ...popoverProps | ||
| }; | ||
| if (displayToSide) { | ||
| toReturn = ( | ||
| <React.Fragment> | ||
| {IconInner} | ||
| <span style={{ paddingLeft: 5, fontStyle: "italic" }}> | ||
| {content || children} | ||
| </span> | ||
| </React.Fragment> | ||
| ); | ||
| } else if (isPopover) { | ||
| toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />; | ||
| } else { | ||
| toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />; | ||
| } | ||
| const El = isInline ? "span" : "div"; | ||
| return ( | ||
| <El | ||
| style={{ | ||
| ...(clickable ? { cursor: "pointer" } : {}), | ||
| ...(isInline ? {} : { display: "flex" }), | ||
| ...style | ||
| }} | ||
| className={classnames( | ||
| "info-helper-wrapper", | ||
| { | ||
| "info-helper-wrapper-noMarginTop": noMarginTop, | ||
| "info-helper-clickable": isPopover | ||
| }, | ||
| className | ||
| )} | ||
| > | ||
| {toReturn} | ||
| </El> | ||
| const IconInner = <IconToUse {...iconProps} {...rest} />; | ||
| let toReturn; | ||
| const toolTipOrPopoverProps = { | ||
| disabled: | ||
| disabled || | ||
| (!isPopover && window.Cypress && !window.Cypress.allowInfoHelperTooltips), | ||
| popoverClassName: "tg-info-helper-popover bp3-tooltip", | ||
| content: content || children, | ||
| modifiers: popoverOverflowModifiers, | ||
| ...popoverProps | ||
| }; | ||
| if (displayToSide) { | ||
| toReturn = ( | ||
| <React.Fragment> | ||
| {IconInner} | ||
| <span style={{ paddingLeft: 5, fontStyle: "italic" }}> | ||
| {content || children} | ||
| </span> | ||
| </React.Fragment> | ||
| ); | ||
| } else if (isPopover) { | ||
| toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />; | ||
| } else { | ||
| toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />; | ||
| } | ||
| } | ||
| const El = isInline ? "span" : "div"; | ||
| return ( | ||
| <El | ||
| style={{ | ||
| ...(clickable ? { cursor: "pointer" } : {}), | ||
| ...(isInline ? {} : { display: "flex" }), | ||
| ...style | ||
| }} | ||
| className={classnames( | ||
| "info-helper-wrapper", | ||
| { | ||
| "info-helper-wrapper-noMarginTop": noMarginTop, | ||
| "info-helper-clickable": isPopover | ||
| }, | ||
| className | ||
| )} | ||
| > | ||
| {toReturn} | ||
| </El> | ||
| ); | ||
| }; |
Oops, something went wrong.