Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>tags/2.0.0-beta.2^2
| @@ -32,6 +32,7 @@ export type ActionButtonProps = { | |||
| size?: 'xs' | 's' | 'm' | 'l' | 'xl' | |||
| state?: ActionButtonState | |||
| styleCss?: CSSProperties | |||
| ref?: React.Ref<HTMLButtonElement> | |||
| } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants> | |||
| function getActionButtonState(state: ActionButtonState) { | |||
| @@ -49,24 +50,22 @@ function getActionButtonState(state: ActionButtonState) { | |||
| } | |||
| } | |||
| const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>( | |||
| ({ className, size, state = ActionButtonState.Default, styleCss, children, ...props }, ref) => { | |||
| return ( | |||
| <button | |||
| type='button' | |||
| className={classNames( | |||
| actionButtonVariants({ className, size }), | |||
| getActionButtonState(state), | |||
| )} | |||
| ref={ref} | |||
| style={styleCss} | |||
| {...props} | |||
| > | |||
| {children} | |||
| </button> | |||
| ) | |||
| }, | |||
| ) | |||
| const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, ...props }: ActionButtonProps) => { | |||
| return ( | |||
| <button | |||
| type='button' | |||
| className={classNames( | |||
| actionButtonVariants({ className, size }), | |||
| getActionButtonState(state), | |||
| )} | |||
| ref={ref} | |||
| style={styleCss} | |||
| {...props} | |||
| > | |||
| {children} | |||
| </button> | |||
| ) | |||
| } | |||
| ActionButton.displayName = 'ActionButton' | |||
| export default ActionButton | |||
| @@ -35,27 +35,26 @@ export type ButtonProps = { | |||
| loading?: boolean | |||
| styleCss?: CSSProperties | |||
| spinnerClassName?: string | |||
| ref?: React.Ref<HTMLButtonElement> | |||
| } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> | |||
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | |||
| ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => { | |||
| return ( | |||
| <button | |||
| type='button' | |||
| className={classNames( | |||
| buttonVariants({ variant, size, className }), | |||
| destructive && 'btn-destructive', | |||
| )} | |||
| ref={ref} | |||
| style={styleCss} | |||
| {...props} | |||
| > | |||
| {children} | |||
| {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />} | |||
| </button> | |||
| ) | |||
| }, | |||
| ) | |||
| const Button = ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ref, ...props }: ButtonProps) => { | |||
| return ( | |||
| <button | |||
| type='button' | |||
| className={classNames( | |||
| buttonVariants({ variant, size, className }), | |||
| destructive && 'btn-destructive', | |||
| )} | |||
| ref={ref} | |||
| style={styleCss} | |||
| {...props} | |||
| > | |||
| {children} | |||
| {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />} | |||
| </button> | |||
| ) | |||
| } | |||
| Button.displayName = 'Button' | |||
| export default Button | |||
| @@ -30,9 +30,10 @@ export type InputProps = { | |||
| wrapperClassName?: string | |||
| styleCss?: CSSProperties | |||
| unit?: string | |||
| ref?: React.Ref<HTMLInputElement> | |||
| } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants> | |||
| const Input = React.forwardRef<HTMLInputElement, InputProps>(({ | |||
| const Input = ({ | |||
| size, | |||
| disabled, | |||
| destructive, | |||
| @@ -46,8 +47,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ | |||
| placeholder, | |||
| onChange = noop, | |||
| unit, | |||
| ref, | |||
| ...props | |||
| }, ref) => { | |||
| }: InputProps) => { | |||
| const { t } = useTranslation() | |||
| return ( | |||
| <div className={cn('relative w-full', wrapperClassName)}> | |||
| @@ -93,7 +95,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ | |||
| } | |||
| </div> | |||
| ) | |||
| }) | |||
| } | |||
| Input.displayName = 'Input' | |||
| @@ -107,10 +107,13 @@ const initMermaid = () => { | |||
| return isMermaidInitialized | |||
| } | |||
| const Flowchart = React.forwardRef((props: { | |||
| type FlowchartProps = { | |||
| PrimitiveCode: string | |||
| theme?: 'light' | 'dark' | |||
| }, ref) => { | |||
| ref?: React.Ref<HTMLDivElement> | |||
| } | |||
| const Flowchart = (props: FlowchartProps) => { | |||
| const { t } = useTranslation() | |||
| const [svgString, setSvgString] = useState<string | null>(null) | |||
| const [look, setLook] = useState<'classic' | 'handDrawn'>('classic') | |||
| @@ -490,7 +493,7 @@ const Flowchart = React.forwardRef((props: { | |||
| } | |||
| return ( | |||
| <div ref={ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}> | |||
| <div ref={props.ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}> | |||
| <div className={themeClasses.segmented}> | |||
| <div className="msh-segmented-group"> | |||
| <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1"> | |||
| @@ -572,7 +575,7 @@ const Flowchart = React.forwardRef((props: { | |||
| )} | |||
| </div> | |||
| ) | |||
| }) | |||
| } | |||
| Flowchart.displayName = 'Flowchart' | |||
| @@ -24,30 +24,29 @@ export type TextareaProps = { | |||
| disabled?: boolean | |||
| destructive?: boolean | |||
| styleCss?: CSSProperties | |||
| ref?: React.Ref<HTMLTextAreaElement> | |||
| } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants> | |||
| const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | |||
| ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => { | |||
| return ( | |||
| <textarea | |||
| ref={ref} | |||
| style={styleCss} | |||
| className={cn( | |||
| 'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs', | |||
| textareaVariants({ size }), | |||
| disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled', | |||
| destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive', | |||
| className, | |||
| )} | |||
| value={value ?? ''} | |||
| onChange={onChange} | |||
| disabled={disabled} | |||
| {...props} | |||
| > | |||
| </textarea> | |||
| ) | |||
| }, | |||
| ) | |||
| const Textarea = ({ className, value, onChange, disabled, size, destructive, styleCss, ref, ...props }: TextareaProps) => { | |||
| return ( | |||
| <textarea | |||
| ref={ref} | |||
| style={styleCss} | |||
| className={cn( | |||
| 'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs', | |||
| textareaVariants({ size }), | |||
| disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled', | |||
| destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive', | |||
| className, | |||
| )} | |||
| value={value ?? ''} | |||
| onChange={onChange} | |||
| disabled={disabled} | |||
| {...props} | |||
| > | |||
| </textarea> | |||
| ) | |||
| } | |||
| Textarea.displayName = 'Textarea' | |||
| export default Textarea | |||
| @@ -1,14 +1,14 @@ | |||
| import type { ComponentProps, FC, ReactNode } from 'react' | |||
| import { forwardRef } from 'react' | |||
| import classNames from '@/utils/classnames' | |||
| export type PreviewContainerProps = ComponentProps<'div'> & { | |||
| header: ReactNode | |||
| mainClassName?: string | |||
| ref?: React.Ref<HTMLDivElement> | |||
| } | |||
| export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => { | |||
| const { children, className, header, mainClassName, ...rest } = props | |||
| export const PreviewContainer: FC<PreviewContainerProps> = (props) => { | |||
| const { children, className, header, mainClassName, ref, ...rest } = props | |||
| return <div className={className}> | |||
| <div | |||
| {...rest} | |||
| @@ -25,5 +25,5 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re | |||
| </main> | |||
| </div> | |||
| </div> | |||
| }) | |||
| } | |||
| PreviewContainer.displayName = 'PreviewContainer' | |||
| @@ -1,5 +1,4 @@ | |||
| 'use client' | |||
| import type { ForwardRefRenderFunction } from 'react' | |||
| import { useImperativeHandle } from 'react' | |||
| import React, { useCallback, useEffect, useMemo, useState } from 'react' | |||
| import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin, VersionInfo } from '../../../types' | |||
| @@ -21,6 +20,7 @@ type Props = { | |||
| onDeSelectAll: () => void | |||
| onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void | |||
| isFromMarketPlace?: boolean | |||
| ref?: React.Ref<ExposeRefs> | |||
| } | |||
| export type ExposeRefs = { | |||
| @@ -28,7 +28,7 @@ export type ExposeRefs = { | |||
| deSelectAllPlugins: () => void | |||
| } | |||
| const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({ | |||
| const InstallByDSLList = ({ | |||
| allPlugins, | |||
| selectedPlugins, | |||
| onSelect, | |||
| @@ -36,7 +36,8 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({ | |||
| onDeSelectAll, | |||
| onLoadedAllPlugin, | |||
| isFromMarketPlace, | |||
| }, ref) => { | |||
| ref, | |||
| }: Props) => { | |||
| const systemFeatures = useGlobalPublicStore(s => s.systemFeatures) | |||
| // DSL has id, to get plugin info to show more info | |||
| const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map((d) => { | |||
| @@ -268,4 +269,4 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({ | |||
| </> | |||
| ) | |||
| } | |||
| export default React.forwardRef(InstallByDSLList) | |||
| export default InstallByDSLList | |||
| @@ -1,5 +1,5 @@ | |||
| 'use client' | |||
| import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react' | |||
| import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react' | |||
| import { useTranslation } from 'react-i18next' | |||
| import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll' | |||
| import Item from './item' | |||
| @@ -17,18 +17,20 @@ export type ListProps = { | |||
| tags: string[] | |||
| toolContentClassName?: string | |||
| disableMaxWidth?: boolean | |||
| ref?: React.Ref<ListRef> | |||
| } | |||
| export type ListRef = { handleScroll: () => void } | |||
| const List = forwardRef<ListRef, ListProps>(({ | |||
| const List = ({ | |||
| wrapElemRef, | |||
| searchText, | |||
| tags, | |||
| list, | |||
| toolContentClassName, | |||
| disableMaxWidth = false, | |||
| }, ref) => { | |||
| ref, | |||
| }: ListProps) => { | |||
| const { t } = useTranslation() | |||
| const hasFilter = !searchText | |||
| const hasRes = list.length > 0 | |||
| @@ -125,7 +127,7 @@ const List = forwardRef<ListRef, ListProps>(({ | |||
| </div> | |||
| </> | |||
| ) | |||
| }) | |||
| } | |||
| List.displayName = 'List' | |||