diff --git a/src/components/Hoverable/HoverablePropTypes.js b/src/components/Hoverable/HoverablePropTypes.js index ee2f24646b4a..07b8a8741efb 100644 --- a/src/components/Hoverable/HoverablePropTypes.js +++ b/src/components/Hoverable/HoverablePropTypes.js @@ -1,6 +1,9 @@ import PropTypes from 'prop-types'; const propTypes = { + /** Whether to disable additional wrapper around the children. It will only work for single native(View|Text) child. */ + absolute: PropTypes.bool, + /** Children to wrap with Hoverable. */ children: PropTypes.oneOfType([ PropTypes.node, @@ -22,6 +25,7 @@ const propTypes = { }; const defaultProps = { + absolute: false, containerStyles: [], onHoverIn: () => {}, onHoverOut: () => {}, diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 8326140417e0..9052639be6d8 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -78,6 +78,21 @@ class Hoverable extends Component { } render() { + if (this.props.absolute && React.isValidElement(this.props.children)) { + return React.cloneElement(React.Children.only(this.props.children), { + ref: (el) => { + this.wrapperView = el; + + // Call the original ref, if any + const {ref} = this.props.children; + if (_.isFunction(ref)) { + ref(el); + } + }, + onMouseEnter: () => this.setIsHovered(true), + onMouseLeave: () => this.setIsHovered(false), + }); + } return ( this.wrapperView = el} + style={this.props.containerStyles} + > + {this.props.children} + + ); + + if (this.props.absolute && React.isValidElement(this.props.children)) { + child = React.cloneElement(React.Children.only(this.props.children), { + ref: (el) => { + // Keep your own reference + this.wrapperView = el; + + // Call the original ref, if any + const {ref} = this.props.children; + if (typeof ref === 'function') { + ref(el); + } + }, + }); + } return ( <> {this.state.isRendered && ( - this.tooltip = el} - shiftHorizontal={_.result(this.props, 'shiftHorizontal')} - shiftVertical={_.result(this.props, 'shiftVertical')} - measureTooltip={this.measureTooltip} - text={this.props.text} - /> + this.tooltip = el} + shiftHorizontal={_.result(this.props, 'shiftHorizontal')} + shiftVertical={_.result(this.props, 'shiftVertical')} + measureTooltip={this.measureTooltip} + text={this.props.text} + /> )} - this.wrapperView = el} - style={this.props.containerStyles} - > - {this.props.children} - + {child} ); diff --git a/src/languages/en.js b/src/languages/en.js index bc1f6071476b..03d143abfbd2 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -584,6 +584,7 @@ export default { common: { card: 'Expensify Card', workspace: 'Workspace', + edit: 'Edit workspace', }, new: { newWorkspace: 'New workspace', @@ -619,7 +620,6 @@ export default { welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} workspace! Download the Expensify mobile app to start tracking your expenses.`, }, editor: { - title: 'Edit workspace', nameInputLabel: 'Name', nameInputHelpText: 'This is the name you will see on your workspace.', save: 'Save', diff --git a/src/languages/es.js b/src/languages/es.js index 57956c923a3c..ebd772102e76 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -586,6 +586,7 @@ export default { common: { card: 'Tarjeta Expensify', workspace: 'Espacio de trabajo', + edit: 'Editar espacio de trabajo', }, new: { newWorkspace: 'Nuevo espacio de trabajo', @@ -621,7 +622,6 @@ export default { welcomeNote: ({workspaceName}) => `¡Has sido invitado a la ${workspaceName} Espacio de trabajo! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`, }, editor: { - title: 'Editar espacio de trabajo', nameInputLabel: 'Nombre', nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.', save: 'Guardar', diff --git a/src/pages/workspace/WorkspaceEditorPage.js b/src/pages/workspace/WorkspaceEditorPage.js index bc4a6091de71..c5f3f77b1967 100644 --- a/src/pages/workspace/WorkspaceEditorPage.js +++ b/src/pages/workspace/WorkspaceEditorPage.js @@ -100,7 +100,7 @@ class WorkspaceEditorPage extends React.Component { return ( diff --git a/src/pages/workspace/WorkspaceSidebar.js b/src/pages/workspace/WorkspaceSidebar.js index 477a8e8ac5db..821e20acb06e 100644 --- a/src/pages/workspace/WorkspaceSidebar.js +++ b/src/pages/workspace/WorkspaceSidebar.js @@ -13,6 +13,7 @@ import { Users, ExpensifyCard, Workspace, + Pencil, } from '../../components/Icon/Expensicons'; import ScreenWrapper from '../../components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; @@ -26,6 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import Avatar from '../../components/Avatar'; import CONST from '../../CONST'; import Tooltip from '../../components/Tooltip'; +import variables from '../../styles/variables'; const propTypes = { /** Policy for the current route */ @@ -125,6 +127,16 @@ const WorkspaceSidebar = ({ fill={themedefault.iconSuccessFill} /> )} + + + + +