GitHub/outline
1
0
Fork 0
mirror of https://github.com/outline/outline.git synced 2026-06-13 11:25:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move ColorPicker to Radix popover (#9863)

Browse Source
This commit is contained in:
Hemachandar
2025-08-07 05:22:15 +05:30
committed by GitHub
parent 74acf9601b
commit f41f93d6c9
1 changed files with 26 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/InputColor.tsx
+26 -31
View File
@@ -1,16 +1,14 @@
import * as React from "react"; import * as React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { MenuButton } from "reakit/Menu";
import styled from "styled-components"; import styled from "styled-components";
import { s } from "@shared/styles"; import { s } from "@shared/styles";
import { useMenuState } from "~/hooks/useMenuState";
import lazyWithRetry from "~/utils/lazyWithRetry"; import lazyWithRetry from "~/utils/lazyWithRetry";
import ContextMenu from "./ContextMenu";
import DelayedMount from "./DelayedMount"; import DelayedMount from "./DelayedMount";
import Input, { Props as InputProps } from "./Input"; import Input, { Props as InputProps } from "./Input";
import NudeButton from "./NudeButton"; import NudeButton from "./NudeButton";
import Relative from "./Sidebar/components/Relative"; import Relative from "./Sidebar/components/Relative";
import Text from "./Text"; import Text from "./Text";
import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover";
type Props = Omit<InputProps, "onChange"> & { type Props = Omit<InputProps, "onChange"> & {
value: string | undefined; value: string | undefined;
@@ -19,10 +17,6 @@ type Props = Omit<InputProps, "onChange"> & {
const InputColor: React.FC<Props> = ({ value, onChange, ...rest }: Props) => { const InputColor: React.FC<Props> = ({ value, onChange, ...rest }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const menu = useMenuState({
modal: true,
placement: "bottom-end",
});
return ( return (
<Relative> <Relative>
@@ -33,30 +27,26 @@ const InputColor: React.FC<Props> = ({ value, onChange, ...rest }: Props) => {
maxLength={7} maxLength={7}
{...rest} {...rest}
/> />
<MenuButton {...menu}> <Popover modal={true}>
{(props) => ( <PopoverTrigger>
<SwatchButton <SwatchButton aria-label={t("Show menu")} $background={value} />
aria-label={t("Show menu")} </PopoverTrigger>
{...props} <StyledContent aria-label={t("Select a color")} align="end">
$background={value} <React.Suspense
/> fallback={
)} <DelayedMount>
</MenuButton> <Text>{t("Loading")}…</Text>
<ContextMenu {...menu} aria-label={t("Select a color")}> </DelayedMount>
<React.Suspense }
fallback={ >
<DelayedMount> <StyledColorPicker
<Text>{t("Loading")}…</Text> disableAlpha
</DelayedMount> color={value}
} onChange={(color) => onChange(color.hex)}
> />
<StyledColorPicker </React.Suspense>
disableAlpha </StyledContent>
color={value} </Popover>
onChange={(color) => onChange(color.hex)}
/>
</React.Suspense>
</ContextMenu>
</Relative> </Relative>
); );
}; };
@@ -70,6 +60,11 @@ const SwatchButton = styled(NudeButton)<{ $background: string | undefined }>`
right: 6px; right: 6px;
`; `;
const StyledContent = styled(PopoverContent)`
width: auto;
padding: 8px;
`;
const ColorPicker = lazyWithRetry( const ColorPicker = lazyWithRetry(
() => import("react-color/lib/components/chrome/Chrome") () => import("react-color/lib/components/chrome/Chrome")
); );