dericcain / react-tiny-fab Goto Github PK

The title of the button shown only if when it was hoverd. These buttons are not easily hovered if used on a mobile situation.
So, are we considering adding an option to control whether the title is displayed not only the button is hovered?

Hi !

I currently use this awesome component with a "burger menu" icon, which does not look nice with the rotation. It ends up like this :

I would love to be able to replace the main button with another one (like this one 🤩 ).
If I use this as the icon for the Fab component, it rotates (which is ugly here) and cannot fire the menu opening/close on clic, and cannot be notified on menu opening.

This would imply that we could also :

• achieve the behavior asked in #53 by @ulsha, so that the custom button toggles the menu opening
• set a "menu opened" callback, so that we can trigger any custom button state
• disable icon rotation

What do you think of this?

I just updated from v3.5.0 to v4.0.2 and noticed the action menu remains open when a menu item is clicked?

Is this by design?

The demo on the documentation page closes as expected, which is throwing me off.

On React v17.0.2

Hi! I use webpacker for a work with ES6.
And it was okay.
But your package doesn't work.
If you had this issue, please, talk me about solution =)

./node_modules/react-tiny-fab/dist/fab.esm.js
Module parse failed: Unexpected token (37:1076)
You may need an appropriate loader to handle this file type.

Hi Deric, nice component so thank a lot to share it!
It would be nice if you will add a prop to setup the animation speed of the appearing actions 😇

Hello,
I'd like to use a react-tiny-fab in every Card component in the dashboard I'm creating.
It would be amazing to be free to position the react-tiny-fab in a position relative to its parent component.
It would be amazing to be free to define which way it expands.

For the moment I have positioned it this way but it's not clean at all.

 <Fab
        icon={<Settings />}
        event="hover"
        key={uuid.v4()}
        alwaysShowTitle={false}
        position={({ zIndex: 0, ...position })}
      >

Where position is calculated

const offsets = { top: -90, left: -90 } // this is the distance from the bottom-left corner of the Card
const position = { top: top + height + offsets.top, left: left + width + offsets.left } // this is evaluated in something like {top: 200, left:500 }

I also had to pass the zIndex parameter through the position prop because I haven't found a cleaner way to customize the component.

I haven't found any beautiful alternative around and this is the reason why I'd like to be able to customize a little bit more.

Thank you

If you look here...

https://github.com/dericgw/react-tiny-fab#props-1

... the ...props description has a missing closing parenthesis. This needs to be fixed in two places:

./README.md
./src/example.mdx

The readme has the incorrect import path for the stylesheet. See here:
https://github.com/dericgw/react-tiny-fab/blame/master/README.md#L22

The correct code should be: import 'react-tiny-fab/dist/styles.min.css';

Thanks for this good widget.
Sometimes I just have one action to add into the FAB.
Then I do not want to expand the menu while user click the FAB; instead I want directly take the action while user click the FAB.
It seems like I have no way to do that.
Could you please support that. I think we can just add an onClick property so that FAB can take the onClick action directly.

Hi
when I set onClick function on any component between component I can't trigger the target

function handleClick(e){
     console.log(e)
}

return(
<Fab>
<someComponentOrAction onClick={handleClick} />
</Fab>
)

results in console: undefined

how is that possible?

Found following error on Edge

SCRIPT1028: SCRIPT1028: Expected identifier, string or number
fab.esm.js (84,1)

Current behaviour:
Even though logic exists to keep TinyFab visible when clicked, the class was being removed onMouseLeave.
Expected behaviour:
TinyFab stays visible when clicked until clicked again to allow closing.

Building docs before committing code is easy to forget. Good thing is that this is something that can be automated. I would like a pre-commit hook that is able to do this:

1. Build the docs npm run build:docs
2. Add the ./docs folder to the git git add docs

There are a couple of npm packages that could help with this:

• https://www.npmjs.com/package/pre-commit
• https://www.npmjs.com/package/husky

As we can see here https://github.com/dericcain/react-tiny-fab/blob/master/src/index.tsx#L52

Setting alwaysShowTitle as true forcing ariaHidden to be always false. That makes buttons unaccessible (hard to write correct tests using this component and probably makes problem for people who use screen readers).

I understand only 6 buttons max are supported but I needed 8. I've added 8 with css modification; works great and a super thank you for such tool.

Is there a way to disable this console log warning:

react-tiny-fab only supports up to 6 action buttons

PS: I wish not to fork.

Thanks.

How do i get them to close when i click outside the floating buttons?
I am using the click action.

For example on the mobile browser the FAB is stick to the bottom of the layout but not float.
If this is bug? In desktop browser the FAB is works very well. I think this issue is easy to reproduce.

It looks like I am doing something wrong but I don't know what's is wrong...
The example FAB looks good on mobile browser.

How can I show the label by default without hovering? It will be useful in mobile views because there is no hover in mobile.

Can we add a props to style the texts?

This might not be an issue with the component, but on the example I identified buggy behavior.

If I tap the button to open the menu with the two options (= and +) and I tap =, after I tap the OK button on the Alert that it spawns and the menu closes, I am no longer able to tap the button to re-open the menu, without first de-focusing it.

I recorded a video here:
https://imgur.com/a/fITbFt3

It's a bit hard to see because I'm tapping my touch screen, but hopefully the description above explains it.

Is there a way to disable the hover/click animation on the button? I looked through the docs, but didn't see a way to do so.

In version previous to v4, there was an example in the example folder that would run when running npm run start. Since the update to v4, this no longer works. All of the code for the examples is here: https://github.com/dericgw/react-tiny-fab/blob/master/example/index.html

Ideally, we would want to run npm run start:example and the example would be served in the browser. I am not overly concerned with live reload since there aren't too many changes made to this library. I don't want to use Create React App because it is a bit too much for just displaying one page. I am okay with using something like Parcel, or even getting it working like it is within an HTML page.

• On https://dericgw.github.io/react-tiny-fab/#license-mit
• Click on 'Check it out here'
• https://dericgw.github.io/react-tiny-fab/LICENSE.md 404s

Is there a reason to why we can't do that? It would be handy for people who don't use React styles.

Love the library. Thanks.

So when I surround the Action component with Link from react-router-dom, the title text does not show. So I tried adding an onClick handler instead but its also not working.

<Fab
    mainButtonStyles={{ backgroundColor: '#26978A', }}
    icon={<AddIcon />}
    alwaysShowTitle={true}
    >
    <Link
        to={{
            pathname: '/AddEvent',
            state: id,
        }}
        >
        <Action text="Add Event" style={{ backgroundColor: '#666', }}>
            <CalendarTodayOutlinedIcon />
        </Action>
    </Link>
</Fab>

Is there an easy fix so that the text title shows? It's not a big issue but it would be nice to show the text to the User.
Here's a codeandsandbox:

https://codesandbox.io/s/dark-hooks-pzxyc?file=/src/App.js

Is ther any way to disabled the main fab button?

Hi,

I've been trying to test tiny-fab on an iOS device. And only the first click sometimes works on Safari, but then no click events are fired. I see a similar issue in Chrome on iPhone X as well.

Has anyone run into this issue? Also, what other information should I provide to dig into it more?

I would be nice to have the component accessible for those that use screen readers and such. I am not positive what all goes into making this happen so I am going to start researching it. However, this should be some pretty low hanging fruit.

Seems that the position prop only sets it relative to the page/viewport. Is there a way to have it be relative to a component / container instead?

https://dericgw.github.io/react-tiny-fab/#/

This part need to change.

Usage
There are two components available for import - Fab and Action. You import them like this:

1
import { Fab, Action } from 'react-tiny-fab';
2

import 'react-tiny-fab/styles.css';

to

import 'react-tiny-fab/dist/styles.css';

The description between github README and homepage is different.

The github document you wrote is correct.

Fab is not showing in mobile chrome based browsers (chrome, brave), in mobile firefox is working ok.
You can check on connect.drherbio.com
(on my samsung s10e)
Any ideas what may be the reason?

It looks like there is a vulnerability in a dependency of CRAv1. Updating that to v2 should resolve the issue.

I am new to this library but I guess the opening direction is fixed(vertical).Is there option to open it horizontally(Like right to left or left to right)? or any suggestion how to do that with css changes?

/****  React Tiny FAB - Deric Cain<[email protected]>  *****/
import React, { useState } from 'react';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

const AB=a=>React.createElement("button",_extends({type:"button"},a,{className:"rtf--ab"}),a.children);const MB=a=>React.createElement("button",_extends({type:"button",className:"rtf--mb"},a),a.children);const defaultPosition={bottom:24,right:24},Fab=({event:d="hover",position:e=defaultPosition,alwaysShowTitle:f=!1,children:a,icon:b,mainButtonStyles:c})=>{const[g,h]=useState(!1),i=()=>h(!0),j=()=>h(!1),k=a=>{h(!1),setTimeout(()=>{a();},1);};return React.createElement("ul",{onMouseEnter:()=>"hover"===d&&i(),onMouseLeave:()=>"hover"===d&&j(),className:`rtf ${g?"open":"closed"}`,style:e},React.createElement("li",{className:"rtf--mb__c"},React.createElement(MB,{onClick:()=>"click"===d?g?j():i():null,style:c,role:"button","aria-label":"Floating menu",tabIndex:"0"},b),React.createElement("ul",null,(()=>{6<React.Children.count(a)&&console.warn("react-tiny-fab only supports up to 6 action buttons");const b=f||!g;return React.Children.map(a,(a,c)=>a&&React.createElement("li",{className:`rtf--ab__c ${"top"in e?"top":""}`},React.cloneElement(a,{"data-testid":`action-button-${c}`,"aria-label":a.props.text||`Menu button ${c+1}`,"aria-hidden":b,...a.props,onClick:()=>k(a.props.onClick)}),a.props.text&&React.createElement("span",{className:`${"right"in e?"right":""} ${f?"always-show":""}`,"aria-hidden":b},a.props.text)))})())))};

export { AB as Action, Fab, MB };

the dist code is not translate to es5...

When attempting to conditionally render Actions such as in the following example the below type error is received.

repro: https://codesandbox.io/s/react-tiny-fab-conditional-render-1qlc3

Uncaught TypeError: Cannot read property 'props' of null

function App() {
  const [vis, setVis] = useState(true);
  return (
    <>
      <button onClick={() => setVis(!vis)}>{vis ? "remove" : "add"}</button>
      <Fab alwaysShowTitle={true} icon="ℹ️">
        <Action text="Fire" onClick={() => console.log("fire")}>
          🔥
        </Action>
        {vis && (
          <Action text="Up" onClick={() => console.log("Up")}>
            👍
          </Action>
        )}
        <Action text="Down" onClick={() => console.log("Down")}>
          👎
        </Action>
      </Fab>
    </>
  );
}

Hi, I found a problem in the Action.

here is my code.

When I click Action 2, Chat. The onClick function cannot work.

Hello
I've been testing your sample from here https://github.com/dericgw/react-tiny-fab/blob/master/example/index.html with component. It seems that as soon as I click in one of the inputs, the form dissapears. Is there a workaround for that?

Thanks

Hello, Can I trigger the mouseleave event after I click on one of the menu items. Currently, I am opening a dialog after clicking on the first item in the menu but the state of the FAB not changing from open true to open false. I tried to trigger the mouseleave (mouseout) events from the code but no success. My goal is just hide the menu after clicking on any of the items in the menu

Issue

#22 is pushed type definition into this repo, but npm published module has not d.ts file.

Reason

The reason is that the package.json types field specifies src/index.d.ts, but the src directory is not included in publish.

Suggestion

I think it can be solve by either.

• Include src directory to publish with files field in package.json.
• Deploy index.d.ts to dist directory.

What do you think?

on Microsoft Edge the error 'SCRIPT1028: SCRIPT1028: Expected identifier, string or number' appears in the console and a blank page is rendered when just adding import { Fab, Action } from 'react-tiny-fab'; to .jsx

using Create-react-app with the latest react-scripts...here is the excerpt from package.json..

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"react-tiny-fab": "^3.2.0",

Hello,
I'm a fan of react-tiny-fab - I like the simplicity of the implementation and design.
One thing I am missing, however, is a prop so that the component can be toggled/untoggled externally - for example, if a new process/job arrives the FAB should be toggled to display its progress. The user can then untoggle it automatically again.

It could be as simple as

 <Fab
        icon="+"
        event='click'
        toggled="true" /* or false */
>

I would like to add https://github.com/pedronauck/docz to the lib so that I can have a Gitub pages page with interactive documentation.

I use typescript react,
But, there is no any type definition
can you support for typescript react users?

Hi,
once the FAB is been closed it won't open again.

Step to reproduce (this only happens on mobile and event='hover')

1. open fab
2. press one of the actions, at this point fab is closed
3. try to open fab again...nothing happen

this bug is unlocked by typing on the background

I think this issue is related to #75 , but he doesn't mention is only about mobile.

You can test it in your page too

I'm creating a tool bar with your library and I added one more button over 6 and the UI breaks. I understand 6 is only supported. Is it possible support than six?

It will be much better if, it can always show the children of the fab.
The event 'hover' or 'click' doesn't meet this requirement. Thanks.