From c173c38860d3d6ca45c69b378b00ffa555277e9d Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Mon, 7 Nov 2022 17:33:29 +0000 Subject: [PATCH 1/5] Remove random string in component --- src/core/DropdownMenu/component.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/core/DropdownMenu/component.jsx b/src/core/DropdownMenu/component.jsx index e4fb0fe58..85edbbcde 100644 --- a/src/core/DropdownMenu/component.jsx +++ b/src/core/DropdownMenu/component.jsx @@ -54,8 +54,6 @@ const Trigger = ({ children, additionalTriggerCSS = "" }) => { ); }; -Click me; - Trigger.propTypes = { children: T.node, additionalTriggerCSS: T.string, From ba833315f0bf9771d4707e0705b89973ffd84083 Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Mon, 7 Nov 2022 17:34:04 +0000 Subject: [PATCH 2/5] Fix flash component not clearing the flashes array after they were hidden --- src/core/Flash/component.jsx | 56 +++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 14 deletions(-) diff --git a/src/core/Flash/component.jsx b/src/core/Flash/component.jsx index 10bb13f0c..7a320d9ce 100644 --- a/src/core/Flash/component.jsx +++ b/src/core/Flash/component.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState, useRef } from "react"; import DOMPurify from "dompurify"; import T from "prop-types"; +import { nanoid } from "nanoid/non-secure"; import { getRemoteDataStore } from "../remote-data-store"; import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx"; @@ -50,30 +51,45 @@ const FLASH_TEXT_COLOR = { const AUTO_HIDE = ["success", "info", "notice"]; const AUTO_HIDE_TIME = 8000; -const Flash = ({ type, content }) => { - const ref = useRef(null); - const [closed, setClosed] = useState(false); - const [flashHeight, setFlashHeight] = useState(0); - const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false); +const useAutoHide = (type, closeFlash) => { + const timeoutId = useRef(null); - useEffect(() => setTriggerEntryAnimation(true), []); useEffect(() => { if (AUTO_HIDE.includes(type)) { - setTimeout(() => { - // closeFlash is idempotent, we can call it even if the flash has been already closed + timeoutId.current = setTimeout(() => { closeFlash(); }, AUTO_HIDE_TIME); } - }, [closed]); + + return () => { + if (timeoutId.current) { + clearTimeout(timeoutId.current); + } + }; + }, []); +}; + +const Flash = ({ id, type, content, removeFlash }) => { + const ref = useRef(null); + const [closed, setClosed] = useState(false); + const [flashHeight, setFlashHeight] = useState(0); + const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false); const closeFlash = () => { if (ref.current) { setFlashHeight(ref.current.getBoundingClientRect().height); } - setTimeout(() => setClosed(true), 0); + setClosed(true); + + setTimeout(() => { + removeFlash(id); + }, 100); }; + useEffect(() => setTriggerEntryAnimation(true), []); + useAutoHide(type, closeFlash); + const animateEntry = triggerEntryAnimation && !closed; let style; @@ -123,13 +139,25 @@ Flash.propTypes = { }; const Flashes = ({ flashes }) => { - const items = flashes?.items || []; + const [flashesWithIds, setFlashesWithIds] = useState([]); + + const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId)); + + useEffect(() => { + setFlashesWithIds((state) => { + return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))]; + }); + }, [flashes]); + + console.log({ flashesWithIds }); return (
- {items.map((flash) => ( - - ))} + {flashesWithIds + .filter((item) => !item.removed) + .map((flash) => ( + + ))}
); }; From 4fcd9a3a93447aceed28fe765297e70c9de33511 Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Mon, 7 Nov 2022 17:35:22 +0000 Subject: [PATCH 3/5] Update logo component to use a png instead of an SVG Chrome still has issues rendering some issues without aliasing artefacts on many monitors. Until that's fixed, we've decided to move to a raster image. --- .../app/controllers/components_controller.rb | 2 +- preview/app/views/components/logo_params.yml | 19 +++++-- .../app/views/components/logo_react.html.erb | 2 +- preview/app/views/components/logo_vw.html.erb | 2 +- src/core/Logo/component.html.erb | 29 +---------- src/core/Logo/component.jsx | 47 +++--------------- src/core/Logo/component.rb | 21 +++++--- src/core/Meganav/component.html.erb | 2 +- src/core/Meganav/component.jsx | 2 +- src/core/Meganav/component.rb | 1 + src/core/core.rb | 4 ++ src/core/images/ably-logo.png | Bin 0 -> 14141 bytes 12 files changed, 50 insertions(+), 81 deletions(-) create mode 100644 src/core/images/ably-logo.png diff --git a/preview/app/controllers/components_controller.rb b/preview/app/controllers/components_controller.rb index 8ddb9a453..719fdf2ae 100644 --- a/preview/app/controllers/components_controller.rb +++ b/preview/app/controllers/components_controller.rb @@ -171,7 +171,7 @@ def meganav_props def meganav_react_props props = { paths: { - logo: helpers.asset_path('ably_ui/core/images/ably-logo.svg'), + logo: helpers.asset_path('ably_ui/core/images/ably-logo.png'), icon_sprites: helpers.asset_path('ably_ui/core/sprites.svg'), ably_stack: helpers.asset_path('ably_ui/core/images/ably-stack.svg'), aws_logo: helpers.asset_path('ably_ui/core/images/icon-tech-aws.svg') diff --git a/preview/app/views/components/logo_params.yml b/preview/app/views/components/logo_params.yml index 3ea16606a..69f5c68ec 100644 --- a/preview/app/views/components/logo_params.yml +++ b/preview/app/views/components/logo_params.yml @@ -1,11 +1,24 @@ --- - :name: href - :optional: "Yes" - :default: "/" + :optional: "No" :type: String :description: Target URL +- :name: logoUrl + :optional: "No" + :type: String + :description: Link to logo image - :name: dataId :optional: "Yes" - :default: "" + :default: '""' :type: String :description: Identifier for DOM manipulation +- :name: additionalImgAttrs + :optional: "Yes" + :default: "{}" + :type: Object/Hash + :description: Additional attributes for the image DOM element +- :name: additionalLinkAttrs + :optional: "Yes" + :default: "{}" + :type: Object/Hash + :description: Additional attributes for the link DOM element diff --git a/preview/app/views/components/logo_react.html.erb b/preview/app/views/components/logo_react.html.erb index b24fb9c2f..9613f5fe6 100644 --- a/preview/app/views/components/logo_react.html.erb +++ b/preview/app/views/components/logo_react.html.erb @@ -4,7 +4,7 @@ <%= render(ParameterTableComponent.new(component_parameters, framework)) %> -<%= react_component('logo') %> +<%= react_component('logo', { logo_url: asset_path('ably_ui/core/images/ably-logo.png') }) %> <% content_for :component do %>