feat(ui): popups ui-components #45
Conversation
|
На первый взгляд не надо выносить PopupButton отдельно, так как его переиспользуемость равна единице. |
|
Перенесла атом PopUp к кнопке. |
|
PopUpButton перенесла к карточке (пока со своим стейтом), теперь это просто кнопка. PopUp остался в организмах |
| > | ||
| PopUp | ||
| </Button> | ||
| {!!popup && ( |
There was a problem hiding this comment.
There was a discussion on React Telegram about that. I saw this !! in few popup examples, people said that it is reinsurance for some cases. Please confirm that I need to delete it.
| Do you absolutely sure you want to delete? Just kidding we are | ||
| archiving them anyway. | ||
| </p> | ||
| <Button onClick={() => true}>Yes</Button> |
There was a problem hiding this comment.
Just call props.onDeleteClick
There was a problem hiding this comment.
I am waiting for API with a real delete function, and alerts are blocked by husky, so this is a temporary dummy. Could I keep it?
|
|
||
| const PopUpButton = () => { | ||
| const [popup, setPopup] = useState(false) | ||
|
|
There was a problem hiding this comment.
I think we should create const here:
const close = () => setOpened(opened => !opened)And use close fn in onClose prop in PopUp
| setPopup(() => false) | ||
| }} | ||
| > | ||
| <Box popup> |
There was a problem hiding this comment.
I think that button and <Box popup> should be inside PopUp component
| CLOSE (should be x icon in the corner) | ||
| </Button> | ||
|
|
||
| <H3>Do you want to delete?</H3> |
There was a problem hiding this comment.
Also, we can create a Confirm component. Usage example:
<Confirm
onCancel={close}
onConfirm={deleteCard}
text="Do you absolutely sure you want to delete?"
/>| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); | ||
| //transform: scale(1.001); | ||
| } | ||
| ${({ sticky }) => |
There was a problem hiding this comment.
You really need sticky here?
There was a problem hiding this comment.
I would like to replace Card-atom with Box-atom later. Keep name "card" just for feature-components and Box as styled component. So later I am going to remove sticky from Card with whole Card-atom.
|
|
||
| export const PopUp = ({ children, onClose }) => { | ||
| const ref = useRef(null) | ||
| const onDocumentClick = (event) => { |
There was a problem hiding this comment.
Please use useCallback here.
because in useEffect on unmount used new function, but new function do not removed
|
All changes were done in #46. |
Popups added