hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use new @reach/tooltip

Browse Source
This commit is contained in:
Brian Vaughn
2019-04-20 14:29:03 -07:00
parent 627255cae6
commit 2fb63887d0
18 changed files with 95 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -4
View File
@@ -66,9 +66,6 @@
],
"**/*.js": "eslint --max-warnings 0"
},
"resolutions": {
"@reach/portal": "file:./vendor/@reach/portal"
},
"dependencies": {
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -76,7 +73,8 @@
"@babel/preset-env": "^7.1.6",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@reach/menu-button": "^0.1.9",
"@reach/menu-button": "^0.1.12",
"@reach/tooltip": "^0.1.1",
"adm-zip": "^0.4.7",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^9.0.0",
shells/dev/index.html
-1
View File
@@ -13,7 +13,6 @@
height: 400px;
max-height: 50%;
overflow: hidden;
z-index: 10000001;
}
body {
display: flex;
src/devtools/views/Button.css
-1
View File
@@ -6,7 +6,6 @@
display: inline-flex;
align-items: center;
padding: 0.25rem;
cursor: pointer;
flex: 0 0 auto;
}
.Button:hover {
src/devtools/views/Button.js
+16 -2
View File
@@ -1,14 +1,28 @@
// @flow
import React from 'react';
import Tooltip from '@reach/tooltip';
import styles from './Button.css';
import tooltipStyles from './Tooltip.css';
type Props = {
className?: string,
title: string,
};
export default function Button({ className, ...rest }: Props) {
return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
export default function Button({ className, title, ...rest }: Props) {
let button = (
<button className={`${styles.Button} ${className || ''}`} {...rest} />
);
if (title) {
button = (
<Tooltip className={tooltipStyles.Tooltip} label={title}>
{button}
</Tooltip>
);
}
return button;
}
src/devtools/views/Components/OwnersStack.js
+6 -3
View File
@@ -7,6 +7,7 @@ import React, {
useState,
} from 'react';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Tooltip from '@reach/tooltip';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import { TreeContext } from './TreeContext';
@@ -93,9 +94,11 @@ function ElementsDropdown({
return (
<Menu>
<MenuButton className={styles.MenuButton} title="Open elements dropdown">
<ButtonIcon type="more" />
</MenuButton>
<Tooltip label="Open elements dropdown">
<MenuButton className={styles.MenuButton}>
<ButtonIcon type="more" />
</MenuButton>
</Tooltip>
<MenuList className={styles.Modal}>
{ownerStack.map((id, index) => (
<MenuItem
src/devtools/views/DevTools.js
+5 -1
View File
@@ -1,5 +1,10 @@
// @flow
// Reach styles need to come before any component styles.
// This makes overridding the styles simpler.
import '@reach/menu-button/styles.css';
import '@reach/tooltip/styles.css';
import React, { useEffect, useState } from 'react';
import Store from '../store';
import { BridgeContext, StoreContext } from './context';
@@ -14,7 +19,6 @@ import ReactLogo from './ReactLogo';
import styles from './DevTools.css';
import '@reach/menu-button/styles.css';
import './root.css';
import type { Bridge } from '../../types';
src/devtools/views/Settings/SettingsContext.js
+2
View File
@@ -247,6 +247,8 @@ function updateThemeVariables(
updateStyleHelper(theme, 'color-search-match', documentElements);
updateStyleHelper(theme, 'color-search-match-current', documentElements);
updateStyleHelper(theme, 'color-text-color', documentElements);
updateStyleHelper(theme, 'color-tooltip-background', documentElements);
updateStyleHelper(theme, 'color-tooltip-text', documentElements);
// Font smoothing varies based on the theme.
updateStyleHelper(theme, 'font-smoothing', documentElements);
src/devtools/views/Toggle.css
-1
View File
@@ -5,7 +5,6 @@
display: inline-flex;
align-items: center;
padding: 0.25rem;
cursor: pointer;
flex: 0 0 auto;
}
src/devtools/views/Toggle.js
+14 -2
View File
@@ -1,8 +1,10 @@
// @flow
import React, { useCallback } from 'react';
import Tooltip from '@reach/tooltip';
import styles from './Toggle.css';
import tooltipStyles from './Tooltip.css';
type Props = {
children: React$Node,
@@ -37,8 +39,8 @@ export default function Toggle({
[onChange]
);
return (
<label className={`${defaultClassName} ${className}`} title={title}>
let toggle = (
<label className={`${defaultClassName} ${className}`}>
<input
type="checkbox"
className={styles.Input}
@@ -49,4 +51,14 @@ export default function Toggle({
{children}
</label>
);
if (title) {
toggle = (
<Tooltip className={tooltipStyles.Tooltip} label={title}>
{toggle}
</Tooltip>
);
}
return toggle;
}
src/devtools/views/Tooltip.css
+8
View File
@@ -0,0 +1,8 @@
.Tooltip {
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 12px;
background-color: var(--color-tooltip-background);
color: var(--color-tooltip-text);
}
src/devtools/views/root.css
+4
View File
@@ -48,6 +48,8 @@
--light-color-selected-border: #0088fa;
--light-color-selected-foreground: #ffffff;
--light-color-text-color: #000000;
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
--light-color-tooltip-text: #ffffff;
/* Dark theme */
--dark-color-attribute-name: #9d87d2;
@@ -94,6 +96,8 @@
--dark-color-selected-border: #178fb9;
--dark-color-selected-foreground: #ffffff;
--dark-color-text-color: #ffffff;
--dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
--dark-color-tooltip-text: #000000;
/* Font smoothing */
--light-font-smoothing: auto;
vendor/@reach/portal/.eslintignore
Vendored
-1
View File
@@ -1 +0,0 @@
index.js
vendor/@reach/portal/es/index.js
Vendored
-44
View File
@@ -1,44 +0,0 @@
import React from "react";
import { createPortal } from "react-dom";
import Component from "@reach/component-component";
var Portal = function Portal(_ref) {
var children = _ref.children,
_ref$type = _ref.type,
type = _ref$type === undefined ? "reach-portal" : _ref$type;
return React.createElement(Component, {
getRefs: function getRefs() {
return { mountNode: null, portalNode: null };
},
didMount: function didMount(_ref2) {
var refs = _ref2.refs,
forceUpdate = _ref2.forceUpdate;
// It's possible that the content we are portal has, itself, been portaled.
// In that case, it's important to append to the correct document element.
var ownerDocument = refs.mountNode.ownerDocument;
refs.portalNode = ownerDocument.createElement(type);
ownerDocument.body.appendChild(refs.portalNode);
forceUpdate();
},
willUnmount: function willUnmount(_ref3) {
var portalNode = _ref3.refs.portalNode;
portalNode.ownerDocument.body.removeChild(portalNode);
},
render: function render(_ref4) {
var refs = _ref4.refs;
var portalNode = refs.portalNode;
if (!portalNode) {
return React.createElement("div", { ref: function ref(div) {
return refs.mountNode = div;
} });
} else {
return createPortal(children, portalNode);
}
}
});
};
export default Portal;
vendor/@reach/portal/examples/basic.example.js
Vendored
-35
View File
@@ -1,35 +0,0 @@
import React from "react";
import Portal from "../src/index";
export let name = "Basic";
export let Example = () => (
<div
style={{
height: 40,
overflow: "auto"
}}
>
<div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}>
This is in the normal react root, with an overflow hidden parent, clips
the box.
</div>
<Portal>
<div
style={{
position: "absolute",
top: 0,
left: 20,
width: 100,
border: "solid 5px",
padding: 20,
background: "#f0f0f0"
}}
>
This is in the portal, rendered in the DOM at the document root so the
CSS doesn't screw things up, but we render it in the react hierarchy
where it makes sense.
</div>
</Portal>
</div>
);
vendor/@reach/portal/index.js
Vendored
-56
View File
@@ -1,56 +0,0 @@
"use strict";
exports.__esModule = true;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _componentComponent = require("@reach/component-component");
var _componentComponent2 = _interopRequireDefault(_componentComponent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Portal = function Portal(_ref) {
var children = _ref.children,
_ref$type = _ref.type,
type = _ref$type === undefined ? "reach-portal" : _ref$type;
return _react2.default.createElement(_componentComponent2.default, {
getRefs: function getRefs() {
return { mountNode: null, portalNode: null };
},
didMount: function didMount(_ref2) {
var refs = _ref2.refs,
forceUpdate = _ref2.forceUpdate;
// It's possible that the content we are portal has, itself, been portaled.
// In that case, it's important to append to the correct document element.
var ownerDocument = refs.mountNode.ownerDocument;
refs.portalNode = ownerDocument.createElement(type);
ownerDocument.body.appendChild(refs.portalNode);
forceUpdate();
},
willUnmount: function willUnmount(_ref3) {
var portalNode = _ref3.refs.portalNode;
portalNode.ownerDocument.body.removeChild(portalNode);
},
render: function render(_ref4) {
var refs = _ref4.refs;
var portalNode = refs.portalNode;
if (!portalNode) {
return _react2.default.createElement("div", { ref: function ref(div) {
return refs.mountNode = div;
} });
} else {
return (0, _reactDom.createPortal)(children, portalNode);
}
}
});
};
exports.default = Portal;
vendor/@reach/portal/package.json
Vendored
-28
View File
@@ -1,28 +0,0 @@
{
"name": "@reach/portal",
"version": "0.1.3",
"description": "Declarative portals for React",
"main": "index.js",
"module": "es/index.js",
"scripts": {
"test": "echo \"Write some tests you bum!\"",
"build": "node ../../shared/build-package",
"lint": "eslint . --max-warnings=0"
},
"dependencies": {
"@reach/component-component": "^0.1.3"
},
"peerDependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"author": "",
"license": "MIT",
"files": [
"es",
"src",
"lib",
"index.js",
"styles.css"
]
}
vendor/@reach/portal/src/index.js
Vendored
-30
View File
@@ -1,30 +0,0 @@
import React from "react";
import { createPortal } from "react-dom";
import Component from "@reach/component-component";
let Portal = ({ children, type = "reach-portal" }) => (
<Component
getRefs={() => ({ mountNode: null, portalNode: null })}
didMount={({ refs, forceUpdate }) => {
// It's possible that the content we are portal has, itself, been portaled.
// In that case, it's important to append to the correct document element.
const ownerDocument = refs.mountNode.ownerDocument;
refs.portalNode = ownerDocument.createElement(type);
ownerDocument.body.appendChild(refs.portalNode);
forceUpdate();
}}
willUnmount={({ refs: { portalNode } }) => {
portalNode.ownerDocument.body.removeChild(portalNode);
}}
render={({ refs }) => {
const { portalNode } = refs;
if (!portalNode) {
return <div ref={div => (refs.mountNode = div)} />;
} else {
return createPortal(children, portalNode);
}
}}
/>
);
export default Portal;
yarn.lock
+38 -14
View File
@@ -998,19 +998,24 @@
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/yargs" "^12.0.9"
"@reach/[email protected]":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
"@reach/component-component@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
"@reach/menu-button@^0.1.9":
version "0.1.9"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.9.tgz#d5957f69efa51d29beb4239403eabf49f9a4bb3e"
integrity sha512-894lhzcCpaGJKvmCuUX8AJ7xg0Ov/xRKKR5RRVJUroHYuWNuvgZSluO657Y2fNaMKgG0LPqLrtOGUq2CN0golg==
"@reach/menu-button@^0.1.12":
version "0.1.12"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.12.tgz#209b52ddf0b329e4c0f6712c4d7fec88c433c344"
integrity sha512-16D1K9+NAfGdH4bZ3cJ721BKfp0cVvkv1lMNFLcp125ZcLTSaGXRnpUmpD+F1BJFCgP6g2cP+4MQxfiHMJ9IXg==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/portal" "^0.1.3"
"@reach/rect" "^0.2.0"
"@reach/portal" "^0.2.0"
"@reach/rect" "^0.2.1"
"@reach/router" "^1.1.0"
"@reach/utils" "^0.2.0"
"@reach/window-size" "^0.1.3"
@@ -1021,15 +1026,17 @@
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
"@reach/portal@^0.1.3", "@reach/portal@file:./vendor/@reach/portal":
version "0.1.3"
"@reach/portal@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.0.tgz#668a6d47ff749d81c2c6804c58c42323b31ac4fe"
integrity sha512-d+4m9LACj3uShSKsMDjKuR1Pw54lzYCh1h6kOvfkpdgLqOZEk/8RvjDCWLvQzvPJIgzCWVAA/Db55xDgOaOYQA==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/rect@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.0.tgz#3e8dd4e2188294228ea223223a956885a8a33472"
integrity sha512-/C0r28VC/0dJ7ehKqkiebU7WvyiqXw5ViWC4KUWQRVTwauLENmslJ3jgEDUQZn6M3Ko63owaMZ2/rAivFfpIGQ==
"@reach/rect@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/observe-rect" "^1.0.3"
@@ -1045,11 +1052,28 @@
react-lifecycles-compat "^3.0.4"
warning "^3.0.0"
"@reach/utils@^0.2.0":
"@reach/tooltip@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.1.1.tgz#7f0385624eaffabcd4f075a098ef0fe4b472ce5d"
integrity sha512-EawPeRdeajl5HwtM8Q1rz0aNzOgRKnbs4GNW4tUa/6+F8yN93nZGxfYyefYGQgjzVOd0HdgeatUVqDQMgcldYA==
dependencies:
"@reach/auto-id" "0.2.0"
"@reach/portal" "^0.2.0"
"@reach/rect" "^0.2.1"
"@reach/utils" "0.2.0"
"@reach/visually-hidden" "^0.1.3"
prop-types "^15.7.2"
"@reach/[email protected]", "@reach/utils@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
"@reach/visually-hidden@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.3.tgz#96f6ac9a0b62723b2f3e7d384b6143d49b45105a"
integrity sha512-kOmRRmUnWDsdKg6FIkljWk0Oc5v+SFCD5iVoF4moRRIJN/UvwxS2j6CqtCMlur8pc6KRi+D0mkO91nUzwQTYTg==
"@reach/window-size@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
@@ -9013,7 +9037,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==