Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-04 18:59:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

minor refactor

Browse Source
This commit is contained in:
Red Adaya 2024-10-17 20:33:39 +08:00
parent c73a4e5968
commit 2bc995a87a
6 changed files with 58 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/element/emojipalette.stories.tsx
View File

@ -26,7 +26,7 @@ type Story = StoryObj<typeof EmojiPalette>;
export const DefaultEmojiPalette: Story = {
render: (args) => {
return (
<div style={{ padding: "20px", height: "300px", border: "2px solid black" }}>
<div style={{ padding: "20px", height: "500px", border: "2px solid black" }}>
<EmojiPalette {...args} />
</div>
);

4
frontend/app/element/emojipalette.tsx
View File

@ -5,9 +5,7 @@ import clsx from "clsx";
import React, { memo, useState } from "react";
import { Button } from "./button";
import { Input } from "./input";
import { Palette } from "./palette";
import { PaletteButton } from "./palettebutton";
import { PaletteContent } from "./palettecontent";
import { Palette, PaletteButton, PaletteContent } from "./palette";
import "./emojiPalette.less";

6
frontend/app/element/palette.stories.tsx
View File

@ -2,9 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import type { Meta, StoryObj } from "@storybook/react";
import { Palette } from "./palette";
import { PaletteButton } from "./palettebutton";
import { PaletteContent } from "./palettecontent";
import { Palette, PaletteButton, PaletteContent } from "./palette";
const meta: Meta<typeof Palette> = {
title: "Elements/Palette",
@ -25,7 +23,7 @@ type Story = StoryObj<typeof Palette>;
export const DefaultPalette: Story = {
render: (args) => {
return (
<div className="boundary" style={{ padding: "20px", height: "500px", border: "2px solid black" }}>
<div className="boundary" style={{ padding: "20px", height: "00px", border: "2px solid black" }}>
<Palette {...args}>
<PaletteButton className="ghost grey">
<i className="fa-sharp fa-solid fa-face-smile"></i>

61
frontend/app/element/palette.tsx
View File

@ -1,7 +1,12 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { useDismiss, useFloating, useInteractions, type Placement } from "@floating-ui/react";
import clsx from "clsx";
import {
Children,
cloneElement,
forwardRef,
isValidElement,
JSXElementConstructor,
memo,
@ -9,14 +14,10 @@ import {
ReactNode,
useState,
} from "react";
import { PaletteButton, PaletteButtonProps } from "./palettebutton";
import { PaletteContent, PaletteContentProps } from "./palettecontent";
import { Button } from "./button";
import "./palette.less";
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
interface PaletteProps {
children: ReactNode;
className?: string;
@ -80,6 +81,52 @@ const Palette = memo(({ children, className, placement, onOpenChange }: PaletteP
return <>{renderChildren}</>;
});
Palette.displayName = "Palette";
interface PaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
isActive?: boolean;
children: React.ReactNode;
onClick?: () => void;
getReferenceProps?: () => any;
}
export { Palette };
const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
({ isActive, children, onClick, getReferenceProps, className, ...props }, ref) => {
return (
<Button
ref={ref}
className={clsx("ghost grey palette-button", className, { "is-active": isActive })}
onClick={onClick}
{...getReferenceProps?.()}
{...props}
>
{children}
</Button>
);
}
);
interface PaletteContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
getFloatingProps?: () => any;
}
const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
({ children, className, getFloatingProps, style, ...props }, ref) => {
return (
<div
ref={ref}
className={clsx("palette-content", className)}
style={style}
{...getFloatingProps?.()}
{...props}
>
{children}
</div>
);
}
);
Palette.displayName = "Palette";
PaletteButton.displayName = "PaletteButton";
PaletteContent.displayName = "PaletteContent";
export { Palette, PaletteButton, PaletteContent, type PaletteButtonProps, type PaletteContentProps };

33
frontend/app/element/palettebutton.tsx
View File

@ -1,33 +0,0 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import clsx from "clsx";
import { forwardRef } from "react";
import { Button } from "./button";
interface PaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
isActive?: boolean;
children: React.ReactNode;
onClick?: () => void;
getReferenceProps?: () => any;
}
const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
({ isActive, children, onClick, getReferenceProps, className, ...props }, ref) => {
return (
<Button
ref={ref}
className={clsx("ghost grey palette-button", className, { "is-active": isActive })}
onClick={onClick}
{...getReferenceProps?.()}
{...props}
>
{children}
</Button>
);
}
);
PaletteButton.displayName = "PaletteButton";
export { PaletteButton, type PaletteButtonProps };

30
frontend/app/element/palettecontent.tsx
View File

@ -1,30 +0,0 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import clsx from "clsx";
import { forwardRef } from "react";
interface PaletteContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
getFloatingProps?: () => any;
}
const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
({ children, className, getFloatingProps, style, ...props }, ref) => {
return (
<div
ref={ref}
className={clsx("palette-content", className)}
style={style}
{...getFloatingProps?.()}
{...props}
>
{children}
</div>
);
}
);
PaletteContent.displayName = "PaletteContent";
export { PaletteContent, type PaletteContentProps };