jialin
1 year ago
parent
0f7a619a34
commit
b89e7c6c3d
@ -1,463 +0,0 @@
|
||||
:local(.wrapper-box) {
|
||||
@borderRadius: var(--border-radius-base);
|
||||
@input-inner-padding: 14px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
border-width: var(--ant-line-width);
|
||||
border-style: var(--ant-line-type);
|
||||
border-color: var(--ant-color-border);
|
||||
border-radius: @borderRadius;
|
||||
background-color: var(--color-white-1);
|
||||
|
||||
&.seal-select-wrapper {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&.dropdown-visible {
|
||||
:local(.wrapper) {
|
||||
:global(.ant-select-selector) {
|
||||
border-bottom: none !important;
|
||||
border-radius: @borderRadius @borderRadius 0 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
margin-inline: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--ant-color-split);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-select-dropdown) {
|
||||
box-shadow: none;
|
||||
border-width: var(--ant-line-width);
|
||||
border-style: var(--ant-line-type);
|
||||
border-color: var(--ant-input-active-border-color);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:global(.ant-select-dropdown) {
|
||||
border-color: var(--ant-input-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--ant-input-active-border-color) !important;
|
||||
outline: 0;
|
||||
background-color: var(--ant-input-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:local(.wrapper) {
|
||||
padding-block: 0;
|
||||
|
||||
.label {
|
||||
left: @input-inner-padding + 1 !important;
|
||||
top: 11px;
|
||||
|
||||
&.isfoucs-has-value {
|
||||
top: 11px;
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
|
||||
&.blur-no-value {
|
||||
top: 21px;
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
|
||||
&.has-prefix {
|
||||
top: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-select-selection-overflow-item) > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.validate-status-error {
|
||||
:global(.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 {
|
||||
:global(.ant-select-dropdown) {
|
||||
border-color: var(--ant-color-error) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.seal-input-number {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.borderless {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.borderless:focus-within {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.seal-input-wrapper-disabled {
|
||||
background-color: var(--ant-color-bg-container-disabled);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-color-border);
|
||||
|
||||
:global(.ant-input-search-button) {
|
||||
border-color: var(--ant-color-border) !important;
|
||||
color: var(--ant-color-text-description) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.seal-textarea-wrapper {
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&.validate-status-error:not(.seal-select-wrapper) {
|
||||
border-width: var(--ant-line-width);
|
||||
border-style: var(--ant-line-type);
|
||||
border-color: var(--ant-color-error);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-color-error-border-hover);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--ant-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-input-hover-border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--ant-input-active-border-color);
|
||||
box-shadow: var(--ant-input-active-shadow);
|
||||
outline: 0;
|
||||
background-color: var(--ant-input-active-bg);
|
||||
}
|
||||
|
||||
.add-after {
|
||||
position: relative;
|
||||
color: var(--ant-color-text-quaternary);
|
||||
font-size: 14px;
|
||||
padding-right: calc(var(--ant-padding-sm) - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:local(.wrapper) {
|
||||
@wrapheight: 54px;
|
||||
@inputheight: 32px;
|
||||
@borderRadius: 4px;
|
||||
@input-inner-padding: 14px;
|
||||
@bgColor: transparent;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
padding-block: 20px 0;
|
||||
max-width: 100%;
|
||||
|
||||
&:hover {
|
||||
:global(.ant-input-number-handler-wrap) {
|
||||
width: 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-wrapper-style {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.extra {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
left: @input-inner-padding;
|
||||
color: rgba(0, 0, 0, 45%);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1;
|
||||
pointer-events: all;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
z-index: 5;
|
||||
|
||||
&.isfoucs-has-value {
|
||||
top: 10px;
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
|
||||
&.blur-no-value {
|
||||
top: 21px;
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
|
||||
&.has-prefix {
|
||||
top: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== select ==================
|
||||
|
||||
:global(.ant-select) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
|
||||
:global(.ant-select-selection-search) {
|
||||
top: 20px !important;
|
||||
inset-inline-start: @input-inner-padding;
|
||||
}
|
||||
}
|
||||
|
||||
:global(
|
||||
.ant-select.ant-select-multiple.ant-cascader .ant-select-selection-search
|
||||
) {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
:global(.ant-input-number-input-wrap) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(.ant-select-selector) {
|
||||
flex: 1;
|
||||
padding-inline: @input-inner-padding !important;
|
||||
border-width: var(--ant-line-width);
|
||||
border-style: var(--ant-line-type);
|
||||
border-color: var(--ant-color-border);
|
||||
border-radius: @borderRadius;
|
||||
height: 54px !important;
|
||||
padding-block: 20px 0 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-input-hover-border-color) !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--ant-input-active-border-color) !important;
|
||||
outline: 0;
|
||||
background-color: var(--ant-input-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-select-multiple.ant-select-lg) {
|
||||
:global(.ant-select-selection-search) {
|
||||
margin-inline-start: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-select-selection-item) {
|
||||
height: @inputheight !important;
|
||||
padding-block: 5px !important;
|
||||
line-height: 22px !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-auto-complete) :global(.ant-select-selector) {
|
||||
padding-inline: 0 !important;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(.ant-select-arrow) {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
&.no-label {
|
||||
padding-block: 0;
|
||||
|
||||
:global {
|
||||
.ant-select-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-select-selector) {
|
||||
padding-block-start: 0 !important;
|
||||
}
|
||||
|
||||
:global(.ant-select .ant-select-selection-search) {
|
||||
top: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(
|
||||
.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
|
||||
.ant-select-selector
|
||||
) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:global(.ant-select-selection-search-input) {
|
||||
height: @inputheight !important;
|
||||
}
|
||||
|
||||
// ==================== input ====================
|
||||
|
||||
:global(.ant-input),
|
||||
:global(.ant-input-password) {
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-block: 5px;
|
||||
padding-inline: @input-inner-padding;
|
||||
height: @inputheight !important;
|
||||
background-color: @bgColor;
|
||||
}
|
||||
|
||||
:global(.ant-input.seal-textarea) {
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(.ant-input-number) {
|
||||
position: static;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
height: @inputheight !important;
|
||||
background-color: @bgColor;
|
||||
|
||||
&:hover .ant-input-number-handler-wrap,
|
||||
&-focused .ant-input-number-handler-wrap {
|
||||
width: 34px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-input-number.ant-input-number-disabled) {
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-input-outlined) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-block: 5px;
|
||||
padding-inline: @input-inner-padding;
|
||||
height: @inputheight !important;
|
||||
background-color: transparent;
|
||||
|
||||
&.seal-textarea {
|
||||
min-height: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-input.ant-input-disabled) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:global(input.ant-input-number-input) {
|
||||
flex: 1;
|
||||
height: @inputheight !important;
|
||||
padding-block: 5px;
|
||||
padding-inline: @input-inner-padding;
|
||||
}
|
||||
|
||||
:global(.ant-input-group) {
|
||||
position: static;
|
||||
}
|
||||
|
||||
:global(.ant-input-group-addon) {
|
||||
inset-inline-start: unset !important;
|
||||
border-radius: 0 @borderRadius @borderRadius 0;
|
||||
width: 30px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.ant-input-group-addon:hover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:global(.ant-input-group-wrapper-disabled .ant-input-group-addon) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:global(.ant-input-group-wrapper-disabled .ant-input-group-addon:hover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:global(.ant-input-search-button) {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0;
|
||||
border-radius: 0 @borderRadius @borderRadius 0 !important;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
height: 52px;
|
||||
border-left: var(--ant-line-width) var(--ant-line-type)
|
||||
var(--ant-color-border);
|
||||
}
|
||||
|
||||
:global(.ant-input-number-handler-wrap) {
|
||||
top: 0;
|
||||
height: @wrapheight - 2px;
|
||||
}
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import LabelInfo from './label-info';
|
||||
import wrapperStyle from './wrapper.less';
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
noWrapperStyle?: boolean;
|
||||
isFocus?: boolean;
|
||||
status?: string;
|
||||
required?: boolean;
|
||||
description?: React.ReactNode;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
extra?: React.ReactNode;
|
||||
addAfter?: React.ReactNode;
|
||||
variant?: string;
|
||||
hasPrefix?: boolean;
|
||||
classList?: string;
|
||||
labelExtra?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Wrapper: React.FC<WrapperProps> = ({
|
||||
children,
|
||||
label,
|
||||
isFocus,
|
||||
status,
|
||||
className,
|
||||
disabled,
|
||||
description,
|
||||
required,
|
||||
extra,
|
||||
variant,
|
||||
addAfter,
|
||||
hasPrefix,
|
||||
noWrapperStyle,
|
||||
classList,
|
||||
labelExtra,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
classList,
|
||||
wrapperStyle['wrapper-box'],
|
||||
'field-wrapper',
|
||||
wrapperStyle[`validate-status-${status}`],
|
||||
addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
|
||||
disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
|
||||
className ? wrapperStyle[className] : '',
|
||||
classList ? wrapperStyle[classList] : '',
|
||||
variant ? wrapperStyle[variant] : ''
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(wrapperStyle.wrapper, {
|
||||
[wrapperStyle['no-wrapper-style']]: noWrapperStyle,
|
||||
[wrapperStyle['no-label']]: !label
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
<label
|
||||
onClick={onClick}
|
||||
className={classNames(
|
||||
wrapperStyle['label'],
|
||||
isFocus
|
||||
? wrapperStyle['isfoucs-has-value']
|
||||
: wrapperStyle['blur-no-value'],
|
||||
{
|
||||
[wrapperStyle['has-prefix']]: hasPrefix
|
||||
}
|
||||
)}
|
||||
>
|
||||
<LabelInfo
|
||||
label={label}
|
||||
required={required}
|
||||
description={description}
|
||||
labelExtra={labelExtra}
|
||||
></LabelInfo>
|
||||
</label>
|
||||
{extra && <div className={wrapperStyle.extra}>{extra}</div>}
|
||||
<div
|
||||
className={classNames(wrapperStyle['inner-wrapper'], 'wrapper-inner')}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{addAfter && <div className={wrapperStyle['add-after']}>{addAfter}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
Loading…
Reference in new issue