- {iconPosition === 'left' && renderIcon()}
+ {iconPlacement === 'left' && renderIcon()}
{title &&
{title}
}
{subtitle &&
{subtitle}
}
@@ -155,7 +155,7 @@ export default function CollapsibleContainer({
{right && {right}}
{deleteBtn && {deleteBtn}}
- {iconPosition === 'right' && renderIcon()}
+ {iconPlacement === 'right' && renderIcon()}
);
diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx
index a5017d7d..84cedb4a 100644
--- a/src/components/drop-down-buttons/index.tsx
+++ b/src/components/drop-down-buttons/index.tsx
@@ -1,6 +1,6 @@
import { MoreOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
-import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
+import { Button, Dropdown, Space, Tooltip, type MenuProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React from 'react';
@@ -31,7 +31,9 @@ const DropdownWrapper = styled.div`
min-width: 160px;
`;
-const DropdownButtons: React.FC
= ({
+const DropdownButtons: React.FC<
+ DropdownButtonsProps & { items: MenuProps['items'] }
+> = ({
items,
size = 'middle',
trigger = ['hover'],
@@ -72,70 +74,64 @@ const DropdownButtons: React.FC = ({
>
) : (
- {
- return (
-
- {_.map(_.tail(items), (item: any) => {
- return (
-
- );
+
+ <>
+ {showText ? (
+
- );
- }}
- buttonsRender={([leftButton, rightButton]) => [
- <>
- {showText ? (
+ {extra}
+
+ ) : (
+
- ) : (
-
-
-
- )}
- ,
+ disabled={headItem?.disabled}
+ >
+
+ )}
+
+ ({
+ ...item,
+ ...item.props,
+ label:
+ item.locale || item.locale === undefined
+ ? intl.formatMessage({ id: item.label })
+ : item.label
+ }))
+ }}
+ >
}
size={size}
@@ -144,8 +140,8 @@ const DropdownButtons: React.FC = ({
color="default"
className={classNames('dropdown-button', size)}
>
- ]}
- >
+
+
)}
);
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index f0dbc033..e69d6210 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -56,7 +56,7 @@ const Footer: React.FC = () => {
{new Date().getFullYear()}
{intl.formatMessage({ id: 'settings.company' })}
-
+
-
+
diff --git a/src/components/list-input/list-item.tsx b/src/components/list-input/list-item.tsx
index 1df76156..b0b7942d 100644
--- a/src/components/list-input/list-item.tsx
+++ b/src/components/list-input/list-item.tsx
@@ -1,4 +1,3 @@
-// import AutoComplete from '@/components/seal-form/auto-complete';
import { MinusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React from 'react';
diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx
index 73e2fd41..7c302634 100644
--- a/src/components/overlay-scroller/index.tsx
+++ b/src/components/overlay-scroller/index.tsx
@@ -82,9 +82,9 @@ export const TooltipOverlayScroller: React.FC<
) => void;
@@ -122,7 +123,7 @@ export const FilterBar: React.FC = (props) => {
diff --git a/src/components/popover/index.tsx b/src/components/popover/index.tsx
index bec4143d..99de6674 100644
--- a/src/components/popover/index.tsx
+++ b/src/components/popover/index.tsx
@@ -12,7 +12,9 @@ const SealPopover: React.FC = (props) => {
{...restProps}
style={{ ...style }}
data-maxHeight="300px"
- overlayClassName={classNames(className, styles.seal_custom_popover)}
+ classNames={{
+ root: classNames(className, styles.seal_custom_popover)
+ }}
>
{children}
diff --git a/src/components/scroller-modal/gs-drawer.tsx b/src/components/scroller-modal/gs-drawer.tsx
index 0ccac71a..d85c9ace 100644
--- a/src/components/scroller-modal/gs-drawer.tsx
+++ b/src/components/scroller-modal/gs-drawer.tsx
@@ -1,6 +1,7 @@
import { useEscHint } from '@/hooks/use-esc-hint';
import { CloseOutlined } from '@ant-design/icons';
import { Button, Drawer, type DrawerProps } from 'antd';
+import React from 'react';
/**
* use ColumnWrapper to wrap content in Drawer with scroller
@@ -22,11 +23,18 @@ const ScrollerModal = (props: DrawerProps) => {
const handleCancel = (e: React.MouseEvent) => {
props.onClose?.(e);
};
+
return (
<>
{
overflowX: 'hidden',
...styles?.body
},
- content: {
+ section: {
borderRadius: '6px 0 0 6px',
- ...styles?.content
+ ...styles?.section
}
}}
closable={false}
diff --git a/src/components/scroller-modal/index.tsx b/src/components/scroller-modal/index.tsx
index 2cff9642..ecee9e3e 100644
--- a/src/components/scroller-modal/index.tsx
+++ b/src/components/scroller-modal/index.tsx
@@ -60,7 +60,7 @@ const ScrollerModal = (
title={{props.title}}
destroyOnHidden={true}
styles={{
- content: {
+ container: {
padding: 0
},
header: {
diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx
index fe9d8b8b..cb50485e 100644
--- a/src/components/seal-form/auto-complete.tsx
+++ b/src/components/seal-form/auto-complete.tsx
@@ -32,6 +32,7 @@ const SealAutoComplete: React.FC<
loading,
allowClear,
clearSpaceOnBlur,
+ showSearch,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
@@ -83,10 +84,6 @@ const SealAutoComplete: React.FC<
props.onBlur?.(e);
};
- const handleSearch = (text: string) => {
- props.onSearch?.(text);
- };
-
const handleOnSelect = (value: any, option: any) => {
onSelect?.(value, option);
};
@@ -146,7 +143,7 @@ const SealAutoComplete: React.FC<
onSelect={handleOnSelect}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
- onSearch={handleSearch}
+ showSearch={showSearch}
onChange={handleChange}
popupRender={popupRender}
onInput={handleOnInput}
diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx
index 16c2974f..0bc000f5 100644
--- a/src/components/seal-form/seal-cascader.tsx
+++ b/src/components/seal-form/seal-cascader.tsx
@@ -146,9 +146,10 @@ const SealCascader: React.FC<
};
const handleOnBlur = (e: any) => {
- if (allowNull && props.value === null) {
+ const noVal = !props.value || props.value.length === 0;
+ if (allowNull && noVal) {
setIsFocus(true);
- } else if (!props.value) {
+ } else if (noVal) {
setIsFocus(false);
}
props.onBlur?.(e);
diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx
index 23d2ac8b..6c5525eb 100644
--- a/src/components/seal-form/seal-select.tsx
+++ b/src/components/seal-form/seal-select.tsx
@@ -24,6 +24,7 @@ const SealSelect: React.FC<
isInFormItems = true,
notFoundContent = null,
loading,
+ footer,
...rest
} = props;
const intl = useIntl();
@@ -106,6 +107,7 @@ const SealSelect: React.FC<
>
=
};
const handleOnSearch = (value: string) => {
- if (restProps.onSearch) {
- restProps.onSearch(value);
+ if (restProps.showSearch?.onSearch) {
+ restProps.showSearch?.onSearch?.(value);
} else {
const filteredOptions = options?.filter((option: any) =>
option.label.toLowerCase().includes(value.toLowerCase())
@@ -268,8 +268,10 @@ const SimpleSelect: React.FC =
tagRender={TagRender}
onBlur={handleOnBlur}
onFocus={handleOnFocus}
- onSearch={handleOnSearch}
- filterOption={filterOption}
+ showSearch={{
+ onSearch: handleOnSearch,
+ filterOption: restProps.showSearch?.filterOption || filterOption
+ }}
onOpenChange={handleOnOpenChange}
>
{props.children}
diff --git a/src/components/seal-form/styles/cascader.less b/src/components/seal-form/styles/cascader.less
deleted file mode 100644
index 28e381dd..00000000
--- a/src/components/seal-form/styles/cascader.less
+++ /dev/null
@@ -1,5 +0,0 @@
-:local(.dropdown-visible) {
- :local(.ant-select-selector) {
- border-bottom: 0 !important;
- }
-}
diff --git a/src/components/seal-form/wrapper/input.ts b/src/components/seal-form/wrapper/input.ts
index 3ecc2b61..35b048ba 100644
--- a/src/components/seal-form/wrapper/input.ts
+++ b/src/components/seal-form/wrapper/input.ts
@@ -160,6 +160,9 @@ const InputWrapper = styled.div`
top: 0;
height: ${WRAPHEIGHT - 2}px;
}
+ .ant-input-number-actions {
+ border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0;
+ }
.seal-textarea-wrapper {
height: auto;
padding-right: 10px;
diff --git a/src/components/seal-form/wrapper/select.ts b/src/components/seal-form/wrapper/select.ts
index d77f673b..49748022 100644
--- a/src/components/seal-form/wrapper/select.ts
+++ b/src/components/seal-form/wrapper/select.ts
@@ -8,10 +8,11 @@ const SelectWrapper = styled.div`
&.dropdown-visible {
.__wrapper__ {
- .ant-select-selector {
+ .ant-cascader.ant-select.ant-select-outlined {
border-bottom: none !important;
border-radius: ${BORDERRADIUS}px ${BORDERRADIUS}px 0 0;
transition: all 0.2s ease;
+ box-shadow: none;
&::before {
content: '';
@@ -79,12 +80,14 @@ const SelectWrapper = styled.div`
top: 50%;
}
- .ant-select-selector {
- padding-block-start: 0 !important;
+ .ant-select .ant-select-input {
+ top: 5px !important;
}
-
- .ant-select .ant-select-selection-search {
- top: 10px !important;
+ .ant-select-placeholder {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ right: 0;
}
}
}
@@ -96,6 +99,7 @@ const SelectWrapper = styled.div`
display: flex;
align-items: center;
height: 54px;
+ padding-inline: 14px !important;
.ant-select-selection-wrap {
height: 100%;
@@ -109,23 +113,25 @@ const SelectWrapper = styled.div`
&.ant-select-multiple.ant-cascader .ant-select-selection-search {
top: 0 !important;
}
- }
- .ant-select-selector {
- flex: 1;
- padding-inline: ${INPUT_INNER_PADDING}px !important;
- border-width: var(--ant-line-width);
- border-style: var(--ant-line-type);
- border-color: var(--ant-color-border);
- border-radius: ${BORDERRADIUS}px;
- height: 54px !important;
- padding-block: 20px 0 !important;
- box-shadow: none !important;
+ .ant-select-content {
+ padding-block: 20px 0 !important;
+ box-shadow: none !important;
+ }
+ &.ant-cascader {
+ .ant-select-content-item-prefix + .ant-select-content-item-suffix {
+ margin-inline-start: 0 !important;
+ }
+ }
- &:focus-within {
- border-color: var(--ant-input-active-border-color) !important;
- outline: 0;
- background-color: var(--ant-input-active-bg);
+ .ant-select-input {
+ height: ${INPUTHEIGHT}px !important;
+ top: 14px !important;
+ }
+ .ant-select-placeholder {
+ > span {
+ padding-inline: 0 !important;
+ }
}
}
@@ -143,39 +149,15 @@ const SelectWrapper = styled.div`
padding-inline-end: 0 !important;
}
- .ant-select-auto-complete .ant-select-selector {
- padding-inline: 0 !important;
- flex: 1;
- }
-
.ant-select-arrow {
top: 32px;
}
- .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
- .ant-select-selector {
- background-color: transparent;
- }
-
.ant-select-selection-search-input {
height: ${INPUTHEIGHT}px !important;
}
&.validate-status-error {
- .ant-select-selector {
- border-width: var(--ant-line-width) !important;
- border-style: var(--ant-line-type) !important;
- border-color: var(--ant-color-error) !important;
-
- &:hover {
- border-color: var(--ant-color-error-border-hover) !important;
- }
-
- &:focus-within {
- border-color: var(--ant-color-error) !important;
- }
- }
-
&.dropdown-visible {
.ant-select-dropdown {
border-color: var(--ant-color-error) !important;
diff --git a/src/components/simple-table/info-column.tsx b/src/components/simple-table/info-column.tsx
index 40c3da8d..2e36c290 100644
--- a/src/components/simple-table/info-column.tsx
+++ b/src/components/simple-table/info-column.tsx
@@ -37,7 +37,7 @@ const InfoColumn: React.FC = (props) => {
{index < fieldList.length - 1 ? (
= (props) => {
{hiddenIndices.end < dataList.length && (
= ({
return (
= (props) => {
@@ -20,7 +20,7 @@ const UitilBar: React.FC = (props) => {
title,
size = 150,
strokeColor,
- trailColor = 'rgba(221,221,221,.5)'
+ railColor = 'rgba(221,221,221,.5)'
} = props;
const strokeColorFunc = (percent: number) => {
@@ -42,7 +42,7 @@ const UitilBar: React.FC = (props) => {
strokeWidth={strokeWidth}
size={size}
percent={percent}
- trailColor={trailColor}
+ railColor={railColor}
strokeColor={strokeColor || strokeColorFunc(percent)}
>
diff --git a/src/config/global.d.ts b/src/config/global.d.ts
index c799360d..fa700937 100644
--- a/src/config/global.d.ts
+++ b/src/config/global.d.ts
@@ -73,6 +73,7 @@ declare namespace Global {
label: string;
key: string;
icon: React.ReactNode;
+ locale?: boolean;
props?: {
danger?: boolean;
};
diff --git a/src/config/theme/dark.ts b/src/config/theme/dark.ts
index 57734dff..34671a48 100644
--- a/src/config/theme/dark.ts
+++ b/src/config/theme/dark.ts
@@ -9,6 +9,12 @@ export default {
inputFontSize: 14,
inputFontSizeLG: 14
},
+ InputNumber: {
+ handleWidth: 32
+ },
+ Tag: {
+ defaultBg: '#1d1d1d'
+ },
Steps: {
descriptionMaxWidth: 200,
iconSizeSM: 20
diff --git a/src/config/theme/light.ts b/src/config/theme/light.ts
index ba766480..69678ed6 100644
--- a/src/config/theme/light.ts
+++ b/src/config/theme/light.ts
@@ -9,6 +9,12 @@ export default {
inputFontSize: 14,
inputFontSizeLG: 14
},
+ InputNumber: {
+ handleWidth: 32
+ },
+ Tag: {
+ defaultBg: '#fafafa'
+ },
Steps: {
descriptionMaxWidth: 200,
iconSizeSM: 20
diff --git a/src/global.less b/src/global.less
index bd4f72df..c8dc7cca 100644
--- a/src/global.less
+++ b/src/global.less
@@ -189,8 +189,7 @@ body {
}
.ant-input-outlined,
- .ant-input-number,
- .ant-select-selector {
+ .ant-input-number {
background: transparent !important;
}
diff --git a/src/hooks/use-body-scroll.ts b/src/hooks/use-body-scroll.ts
index cd8b5479..e7629348 100644
--- a/src/hooks/use-body-scroll.ts
+++ b/src/hooks/use-body-scroll.ts
@@ -9,7 +9,7 @@ export default function useBodyScroll() {
const instanceRef = React.useRef