119 | {content}
120 | {!hideArrow && (
121 |
127 | )}
128 |
,
129 | container || this.targetNode.ownerDocument.body
130 | )
131 | }
132 |
133 | setTargetRef = ref => {
134 | this.props.innerRef && this.props.innerRef(ref)
135 | this.targetNode = ref
136 | }
137 |
138 | handleMouseEvent = e => {
139 | e.stopPropagation()
140 | }
141 |
142 | handleScroll = e => {
143 | this.setState({ isHovered: false })
144 | }
145 |
146 | _clearListenTimer() {
147 | if (this.listenTimer) {
148 | clearTimeout(this.listenTimer)
149 | delete this.listenTimer
150 | }
151 | }
152 |
153 | _clearShowTimer() {
154 | if (this.showTimer) {
155 | clearTimeout(this.showTimer)
156 | delete this.showTimer
157 | }
158 | }
159 |
160 | _clearHideTimer() {
161 | if (this.hideTimer) {
162 | clearTimeout(this.hideTimer)
163 | delete this.hideTimer
164 | }
165 | }
166 |
167 | handleMouseEnter = e => {
168 | // eslint-disable-next-line react/prop-types
169 | const { showDelay, onMouseEnter } = this.props
170 | onMouseEnter && onMouseEnter(e)
171 |
172 | this._clearHideTimer()
173 |
174 | if (!showDelay) {
175 | this.setState({ isHovered: true })
176 | return
177 | }
178 |
179 | this.showTimer = setTimeout(() => {
180 | this.setState({ isHovered: true })
181 | delete this.showTimer
182 | }, showDelay)
183 | }
184 |
185 | handleMouseLeave = e => {
186 | // eslint-disable-next-line react/prop-types
187 | const { hideDelay, onMouseLeave } = this.props
188 | onMouseLeave && onMouseLeave(e)
189 |
190 | this._clearShowTimer()
191 |
192 | const { isHovered } = this.state
193 | if (!isHovered) return
194 |
195 | if (!hideDelay) {
196 | this.setState({ isHovered: false })
197 | return
198 | }
199 |
200 | this.hideTimer = setTimeout(() => {
201 | this.setState({ isHovered: false })
202 | delete this.hideTimer
203 | }, hideDelay)
204 | }
205 | }
206 |
207 | Texty.defaultProps = {
208 | tagName: 'div',
209 | showDelay: 150,
210 | hideDelay: 150,
211 | hideArrow: false,
212 | placement: 'top',
213 | }
214 |
215 | Texty.propTypes = {
216 | /**
217 | * Get inner ref of the component
218 | */
219 | innerRef: PropTypes.func,
220 | /**
221 | * Tag name for the component
222 | */
223 | tagName: PropTypes.string,
224 | /**
225 | * Should be string or inline element
226 | */
227 | children: PropTypes.node,
228 | /**
229 | * Tooltip for the truncated text if set, or the children will be used
230 | */
231 | tooltip: PropTypes.node,
232 | /**
233 | * Classname for the tooltip
234 | */
235 | tooltipClassName: PropTypes.string,
236 | /**
237 | * Custom style of the tooltip
238 | */
239 | tooltipStyle: PropTypes.object,
240 | /**
241 | * Max width of the tooltip
242 | */
243 | tooltipMaxWidth: PropTypes.number,
244 | /**
245 | * Delay milliseconds to show when mouse enter
246 | */
247 | showDelay: PropTypes.number,
248 | /**
249 | * Delay milliseconds to hide when mouse leave
250 | */
251 | hideDelay: PropTypes.number,
252 | /**
253 | * Classname for the arrow
254 | */
255 | arrowClassName: PropTypes.string,
256 | /**
257 | * Whether to show the tooltip arrow
258 | */
259 | hideArrow: PropTypes.bool,
260 | /**
261 | * The placement of the tooltip
262 | */
263 | placement: PropTypes.oneOf([
264 | 'top',
265 | 'top-start',
266 | 'top-end',
267 | 'bottom',
268 | 'bottom-start',
269 | 'bottom-end',
270 | ]),
271 | /**
272 | * The HTML Element to append the tooltip **In most cases you don't need to set it manually**
273 | */
274 | container: PropTypes.instanceOf(
275 | typeof Element !== 'undefined' ? Element : Object
276 | ),
277 | }
278 |
279 | export default Texty
280 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | [data-texty] {
2 | display: block;
3 | overflow: hidden;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | [data-texty-tooltip] {
9 | margin: 6px 0;
10 | padding: 4px 10px;
11 | border-radius: 4px;
12 | background-color: #222;
13 | color: #fff;
14 | z-index: 99999;
15 | }
16 |
17 | [data-texty-arrow] {
18 | position: absolute;
19 | bottom: -6px;
20 | width: 0;
21 | height: 0;
22 | border-style: solid;
23 | border-width: 6px 6px 0;
24 | border-color: #222 transparent transparent;
25 | }
26 |
27 | [data-texty-arrow*='bottom'] {
28 | top: -6px;
29 | bottom: inherit;
30 | transform: rotate(180deg);
31 | }
32 |
33 | /* disable the builtin tooltip for truncated text on Safari */
34 | @media screen and (-webkit-min-device-pixel-ratio: 0) {
35 | @supports (not (-ms-ime-align: auto)) {
36 | .EllipsisText::before {
37 | content: '';
38 | display: block;
39 | width: 0;
40 | height: 0;
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/website/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "semi": false,
4 | "trailingComma": "es5",
5 | "printWidth": 80
6 | }
7 |
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | [Website](https://nihgwu.github.io/react-texty/) for [react-texty](https://github.com/nihgwu/react-texty)
2 |
--------------------------------------------------------------------------------
/website/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's Browser APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/browser-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/website/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | pathPrefix: '/react-texty',
3 | siteMetadata: {
4 | title: 'Website for react-texty',
5 | },
6 | plugins: [
7 | {
8 | resolve: `gatsby-plugin-google-analytics`,
9 | options: {
10 | trackingId: 'UA-39825336-3',
11 | },
12 | },
13 | 'gatsby-plugin-react-helmet',
14 | 'gatsby-plugin-offline',
15 | ],
16 | }
17 |
--------------------------------------------------------------------------------
/website/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | exports.onCreateWebpackConfig = ({ actions }) => {
4 | actions.setWebpackConfig({
5 | resolve: {
6 | alias: {
7 | 'react-texty/styles.css': path.resolve(__dirname, '../styles.css'),
8 | 'react-texty': path.resolve(__dirname, '../src'),
9 | react: path.resolve(__dirname, './node_modules/react'),
10 | 'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
11 | },
12 | },
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/website/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "website",
3 | "version": "0.0.0",
4 | "private": true,
5 | "author": "Neo Nie