root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: resource list

Browse Source
This commit is contained in:
jialin
2024-06-03 19:09:43 +08:00
parent d2212fe949
commit c5b41900df
25 changed files with 827 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-form/components/wrapper.less
+7 -1
View File
@@ -1,7 +1,7 @@
:local(.wrapper) {
@wrapheight: 54px;
@inputheight: 32px;
@borderRadius: 24px;
@borderRadius: 20px;
position: relative;
display: flex;
flex-direction: column;
@@ -13,6 +13,12 @@
border-radius: @borderRadius;
padding-inline: 12px;
padding-block: 20px 0;
.extra {
position: absolute;
right: 12px;
top: 8px;
z-index: 10;
}
&.seal-input-wrapper-disabled {
background-color: var(--ant-color-bg-container-disabled);
src/components/seal-form/components/wrapper.tsx
+3
View File
@@ -11,6 +11,7 @@ interface WrapperProps {
description?: React.ReactNode;
className?: string;
disabled?: boolean;
extra?: React.ReactNode;
onClick?: () => void;
}
@@ -23,6 +24,7 @@ const Wrapper: React.FC<WrapperProps> = ({
disabled,
description,
required,
extra,
onClick
}) => {
return (
@@ -50,6 +52,7 @@ const Wrapper: React.FC<WrapperProps> = ({
description={description}
></LabelInfo>
</label>
{extra && <div className={wrapperStyle.extra}>{extra}</div>}
{children}
</div>
);
src/components/seal-form/input-number.tsx
+13 -2
View File
@@ -7,10 +7,21 @@ import { SealFormItemProps } from './types';
const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
props
) => {
const { label, placeholder, required, description, ...rest } = props;
const {
label,
placeholder,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
src/components/seal-form/input-search.tsx
+13 -2
View File
@@ -16,10 +16,21 @@ type OnSearch = (
) => void;
const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
const { label, placeholder, required, description, ...rest } = props;
const {
label,
placeholder,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
src/components/seal-form/password.tsx
+13 -2
View File
@@ -5,10 +5,21 @@ import Wrapper from './components/wrapper';
import { SealFormItemProps } from './types';
const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
const { label, placeholder, required, description, ...rest } = props;
const {
label,
placeholder,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
src/components/seal-form/seal-input.tsx
+28 -4
View File
@@ -18,12 +18,19 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
onInput,
style,
required,
isInFormItems = true,
description,
variant,
extra,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
@@ -57,7 +64,11 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
const handleOnBlur = useCallback(
(e: any) => {
if (!inputRef.current?.input?.value) {
console.log(
'inputRef.current==========',
inputRef.current?.resizableTextArea?.textArea?.value
);
if (!inputRef.current?.resizableTextArea?.textArea?.value) {
setIsFocus(false);
onBlur?.(e);
}
@@ -80,6 +91,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
required={required}
description={description}
className="seal-textarea-wrapper"
variant={variant}
extra={extra}
disabled={props.disabled}
onClick={handleClickWrapper}
>
@@ -98,10 +111,21 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
};
const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
const { label, placeholder, required, description, ...rest } = props;
const {
label,
placeholder,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
src/components/seal-form/seal-select.tsx
+14 -3
View File
@@ -6,11 +6,22 @@ import Wrapper from './components/wrapper';
import { SealFormItemProps } from './types';
const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
const { label, placeholder, children, required, description, ...rest } =
props;
const {
label,
placeholder,
children,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
const { status } = Form.Item.useStatus();
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (isNotEmptyValue(props.value)) {
src/components/seal-form/types.ts
+3 -1
View File
@@ -1,7 +1,9 @@
import React from 'react';
export interface SealFormItemProps {
label?: string;
label?: React.ReactNode;
required?: boolean;
isInFormItems?: boolean;
description?: React.ReactNode;
extra?: React.ReactNode;
}
src/components/transition/index.less
+28
View File
@@ -0,0 +1,28 @@
.transition-wrapper {
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
&.bordered {
border-width: var(--ant-line-width);
border-style: var(--ant-line-type);
border-color: var(--ant-color-border);
background-color: var(--color-white-1);
}
&.filled {
border-color: var(--ant-color-border);
.content-wrapper {
background-color: var(--color-fill-1);
}
}
.header {
background-color: var(--color-fill-1);
cursor: pointer;
padding: 8px 16px;
}
.content-wrapper {
overflow: hidden;
transition: height 300ms ease-in-out;
}
}
src/components/transition/index.tsx
+56
View File
@@ -0,0 +1,56 @@
import classNames from 'classnames';
import { useEffect, useRef, useState } from 'react';
import './index.less';
interface TransitionWrapProps {
minHeight?: number;
header?: React.ReactNode;
variant?: 'bordered' | 'filled';
children: React.ReactNode;
}
const TransitionWrapper: React.FC<TransitionWrapProps> = (props) => {
const { minHeight = 50, header, variant = 'bordered', children } = props;
const [isOpen, setIsOpen] = useState(true);
const [height, setHeight] = useState(0);
const contentRef = useRef(null);
useEffect(() => {
if (isOpen) {
setHeight(contentRef?.current?.scrollHeight);
} else {
setHeight(0);
}
}, [isOpen]);
const toggleOpen = () => {
setIsOpen(!isOpen);
};
return (
<div
className={classNames('transition-wrapper', {
bordered: variant === 'bordered',
filled: variant === 'filled'
})}
>
<div
onClick={toggleOpen}
className="header"
style={{
height: minHeight
}}
>
{header}
</div>
<div
className="content-wrapper"
style={{ height: height }}
ref={contentRef}
>
<div className="content">{children}</div>
</div>
</div>
);
};
export default TransitionWrapper;