chore: add model file ux
This commit is contained in:
jialin
@@ -1,75 +0,0 @@
|
||||
import { Cascader, Input, Popover } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
const { Panel } = Cascader;
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 'fruit',
|
||||
label: 'Fruit',
|
||||
children: [
|
||||
{ value: 'apple', label: 'Apple' },
|
||||
{ value: 'banana', label: 'Banana' }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'vegetable',
|
||||
label: 'Vegetable',
|
||||
children: [
|
||||
{ value: 'carrot', label: 'Carrot' },
|
||||
{ value: 'potato', label: 'Potato' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const CustomCascader: React.FC = () => {
|
||||
const [value, setValue] = useState<string>('');
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [inputWidth, setInputWidth] = useState<number>(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
setInputWidth(inputRef.current.offsetWidth);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCascaderChange = (selectedValues: string[]) => {
|
||||
setValue(selectedValues.join(' / '));
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
overlayStyle={{ minWidth: inputWidth }}
|
||||
content={
|
||||
<div style={{ width: '100%' }}>
|
||||
<Panel
|
||||
options={options}
|
||||
onChange={handleCascaderChange}
|
||||
changeOnSelect
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
arrow={false}
|
||||
placement="bottomLeft"
|
||||
trigger="click"
|
||||
open={visible}
|
||||
onOpenChange={setVisible}
|
||||
>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Select or type..."
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
onClick={() => setVisible(true)}
|
||||
/>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomCascader;
|
||||
@@ -0,0 +1,7 @@
|
||||
const WRAPHEIGHT = 54;
|
||||
const INPUTHEIGHT = 32;
|
||||
const BORDERRADIUS = 4;
|
||||
const BGCOLOR = 'transparent';
|
||||
const INPUT_INNER_PADDING = 14;
|
||||
|
||||
export { BGCOLOR, BORDERRADIUS, INPUTHEIGHT, INPUT_INNER_PADDING, WRAPHEIGHT };
|
||||
@@ -1,9 +1,10 @@
|
||||
import { isNotEmptyValue } from '@/utils/index';
|
||||
import type { InputNumberProps } from 'antd';
|
||||
import { Form, InputNumber } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Wrapper from './components/wrapper';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { SealFormItemProps } from './types';
|
||||
import Wrapper from './wrapper';
|
||||
import InputWrapper from './wrapper/input';
|
||||
|
||||
const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
|
||||
props
|
||||
@@ -60,26 +61,28 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
className="seal-input-number"
|
||||
>
|
||||
<InputNumber
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onInput={handleInput}
|
||||
onChange={handleChange}
|
||||
></InputNumber>
|
||||
</Wrapper>
|
||||
<InputWrapper>
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
className="seal-input-number"
|
||||
>
|
||||
<InputNumber
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onInput={handleInput}
|
||||
onChange={handleChange}
|
||||
></InputNumber>
|
||||
</Wrapper>
|
||||
</InputWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { InputProps } from 'antd';
|
||||
import { Form, Input } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Wrapper from './components/wrapper';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { SealFormItemProps } from './types';
|
||||
import Wrapper from './wrapper';
|
||||
import InputWrapper from './wrapper/input';
|
||||
|
||||
const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
const {
|
||||
@@ -55,26 +56,28 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
hasPrefix={!!props.prefix}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input.Password
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
className="seal-input-password"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
></Input.Password>
|
||||
</Wrapper>
|
||||
<InputWrapper>
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
hasPrefix={!!props.prefix}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input.Password
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
className="seal-input-password"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
></Input.Password>
|
||||
</Wrapper>
|
||||
</InputWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import type { InputProps } from 'antd';
|
||||
import { Form, Input } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Wrapper from './components/wrapper';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import SealInputNumber from './input-number';
|
||||
import SealInputSearch from './input-search';
|
||||
import SealPassword from './password';
|
||||
import SealTextArea from './seal-textarea';
|
||||
import { SealFormItemProps } from './types';
|
||||
import Wrapper from './wrapper';
|
||||
import InputWrapper from './wrapper/input';
|
||||
|
||||
const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
const {
|
||||
@@ -72,29 +73,31 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
status={checkStatus || status}
|
||||
label={label}
|
||||
labelExtra={labelExtra}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
addAfter={addAfter}
|
||||
hasPrefix={!!props.prefix}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input
|
||||
{...rest}
|
||||
placeholder={isFocus || !label ? placeholder : ''}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
onInput={handleInput}
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
></Input>
|
||||
</Wrapper>
|
||||
<InputWrapper>
|
||||
<Wrapper
|
||||
status={checkStatus || status}
|
||||
label={label}
|
||||
labelExtra={labelExtra}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
addAfter={addAfter}
|
||||
hasPrefix={!!props.prefix}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input
|
||||
{...rest}
|
||||
placeholder={isFocus || !label ? placeholder : ''}
|
||||
ref={inputRef}
|
||||
autoComplete="off"
|
||||
onInput={handleInput}
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
></Input>
|
||||
</Wrapper>
|
||||
</InputWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -3,9 +3,10 @@ import { useIntl } from '@umijs/max';
|
||||
import type { SelectProps } from 'antd';
|
||||
import { Form, Select } from 'antd';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import Wrapper from './components/wrapper';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { SealFormItemProps } from './types';
|
||||
import Wrapper from './wrapper';
|
||||
import SelectWrapper from './wrapper/select';
|
||||
|
||||
const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
|
||||
const {
|
||||
@@ -81,28 +82,30 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
className="seal-select-wrapper"
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Select
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
options={children ? null : _options}
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
notFoundContent={null}
|
||||
<SelectWrapper>
|
||||
<Wrapper
|
||||
className="seal-select-wrapper"
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
</Wrapper>
|
||||
<Select
|
||||
{...rest}
|
||||
ref={inputRef}
|
||||
options={children ? null : _options}
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleChange}
|
||||
notFoundContent={null}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
</Wrapper>
|
||||
</SelectWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import { INPUT_WIDTH } from '@/constants';
|
||||
import { Form, InputNumber, Slider, type SliderSingleProps } from 'antd';
|
||||
import React from 'react';
|
||||
import LabelInfo from './components/label-info';
|
||||
import FieldWrapper from './field-wrapper';
|
||||
import SliderStyles from './styles/slider.less';
|
||||
import Wrapper from './wrapper';
|
||||
import SliderWrapper from './wrapper/slider';
|
||||
|
||||
interface SealSliderProps extends SliderSingleProps {
|
||||
required?: boolean;
|
||||
@@ -51,7 +51,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
|
||||
const renderLabel = React.useMemo(() => {
|
||||
return (
|
||||
<span
|
||||
className={SliderStyles['slider-label']}
|
||||
className="slider-label"
|
||||
style={{ width: labelWidth || INPUT_WIDTH.mini }}
|
||||
>
|
||||
<span className="text">
|
||||
@@ -74,25 +74,27 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
|
||||
);
|
||||
}, [label, labelWidth, description, value, max, min, step, defaultValue]);
|
||||
return (
|
||||
<FieldWrapper
|
||||
required={required}
|
||||
status={checkStatus || status}
|
||||
label={renderLabel}
|
||||
style={{ padding: '20px 2px 0' }}
|
||||
variant="borderless"
|
||||
>
|
||||
<Slider
|
||||
{...rest}
|
||||
defaultValue={defaultValue}
|
||||
max={max}
|
||||
min={min}
|
||||
step={step}
|
||||
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
||||
tooltip={tooltip}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
></Slider>
|
||||
</FieldWrapper>
|
||||
<SliderWrapper>
|
||||
<Wrapper
|
||||
required={required}
|
||||
status={checkStatus || status}
|
||||
label={renderLabel}
|
||||
isFocus={true}
|
||||
variant="borderless"
|
||||
>
|
||||
<Slider
|
||||
{...rest}
|
||||
defaultValue={defaultValue}
|
||||
max={max}
|
||||
min={min}
|
||||
step={step}
|
||||
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
||||
tooltip={tooltip}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
></Slider>
|
||||
</Wrapper>
|
||||
</SliderWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Form, Input } from 'antd';
|
||||
import type { TextAreaProps } from 'antd/es/input/TextArea';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import Wrapper from './components/wrapper';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { SealFormItemProps } from './types';
|
||||
import Wrapper from './wrapper';
|
||||
import InputWrapper from './wrapper/input';
|
||||
|
||||
const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
|
||||
const {
|
||||
@@ -78,30 +79,32 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
className="seal-textarea-wrapper"
|
||||
extra={extra}
|
||||
disabled={props.disabled}
|
||||
addAfter={addAfter}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input.TextArea
|
||||
{...rest}
|
||||
autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
|
||||
ref={inputRef}
|
||||
style={{ minHeight: '80px', ...style }}
|
||||
className="seal-textarea"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onInput={handleInput}
|
||||
onChange={(e) => handleChange(e)}
|
||||
></Input.TextArea>
|
||||
</Wrapper>
|
||||
<InputWrapper>
|
||||
<Wrapper
|
||||
status={status}
|
||||
label={label}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
className="seal-textarea-wrapper"
|
||||
extra={extra}
|
||||
disabled={props.disabled}
|
||||
addAfter={addAfter}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
<Input.TextArea
|
||||
{...rest}
|
||||
autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
|
||||
ref={inputRef}
|
||||
style={{ minHeight: '80px', ...style }}
|
||||
className="seal-textarea"
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onInput={handleInput}
|
||||
onChange={(e) => handleChange(e)}
|
||||
></Input.TextArea>
|
||||
</Wrapper>
|
||||
</InputWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { FC } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import LabelInfo from '../components/label-info';
|
||||
import { INPUT_INNER_PADDING } from '../config';
|
||||
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
noWrapperStyle?: boolean;
|
||||
isFocus?: boolean;
|
||||
classList?: string;
|
||||
status?: string; // error | success | warning
|
||||
required?: boolean;
|
||||
description?: React.ReactNode;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
extra?: React.ReactNode;
|
||||
addAfter?: React.ReactNode;
|
||||
variant?: string;
|
||||
hasPrefix?: boolean;
|
||||
labelExtra?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
// wrapper box
|
||||
const WrapperBox = styled.div`
|
||||
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: var(--border-radius-base);
|
||||
background-color: var(--color-white-1);
|
||||
&.borderless {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.filled {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.borderless:focus-within {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&: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);
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
&.seal-input-wrapper-disabled {
|
||||
background-color: var(--ant-color-bg-container-disabled);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-color-border);
|
||||
|
||||
.ant-input-search-button {
|
||||
border-color: var(--ant-color-border) !important;
|
||||
color: var(--ant-color-text-description) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// wrapper
|
||||
const InnerWrapper = styled.div.attrs<{
|
||||
noWrapperStyle?: boolean;
|
||||
nolabel?: boolean;
|
||||
}>((props) => ({
|
||||
className: classNames({
|
||||
__wrapper__: true,
|
||||
'no-wrapper-style': props.noWrapperStyle,
|
||||
'no-label': props.nolabel
|
||||
})
|
||||
}))`
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
padding-block: 20px 0;
|
||||
max-width: 100%;
|
||||
&:hover {
|
||||
.ant-input-number-handler-wrap {
|
||||
width: 34px !important;
|
||||
}
|
||||
}
|
||||
&.no-wrapper-style {
|
||||
padding-block: 0;
|
||||
}
|
||||
&.no-label {
|
||||
padding-block: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
// label
|
||||
export const Label = styled.div.attrs<{
|
||||
isFocus?: boolean;
|
||||
hasPrefix?: boolean;
|
||||
}>((props) => ({
|
||||
className: classNames({
|
||||
'isfoucs-has-value': props.isFocus,
|
||||
'blur-no-value': !props.isFocus,
|
||||
'has-prefix': props.hasPrefix
|
||||
})
|
||||
}))`
|
||||
position: absolute;
|
||||
left: ${INPUT_INNER_PADDING}px;
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
// inner
|
||||
const Inner = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Extra = styled.div`
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 8px;
|
||||
z-index: 10;
|
||||
`;
|
||||
|
||||
const AddAfter = styled.div`
|
||||
position: relative;
|
||||
color: var(--ant-color-text-quaternary);
|
||||
font-size: 14px;
|
||||
padding-right: calc(var(--ant-padding-sm) - 1px);
|
||||
`;
|
||||
|
||||
// for wrapper
|
||||
|
||||
const Wrapper: FC<WrapperProps> = ({
|
||||
children,
|
||||
label,
|
||||
isFocus,
|
||||
status,
|
||||
className,
|
||||
disabled,
|
||||
classList,
|
||||
description,
|
||||
required,
|
||||
extra,
|
||||
variant,
|
||||
addAfter,
|
||||
hasPrefix,
|
||||
noWrapperStyle,
|
||||
labelExtra,
|
||||
onClick
|
||||
}) => {
|
||||
const wrapperClass = classNames(
|
||||
status ? `validate-status-${status}` : '',
|
||||
className,
|
||||
classList,
|
||||
variant,
|
||||
{
|
||||
'seal-input-wrapper-addafter': addAfter,
|
||||
'seal-input-wrapper-disabled': disabled
|
||||
}
|
||||
);
|
||||
return (
|
||||
<WrapperBox className={wrapperClass}>
|
||||
<InnerWrapper
|
||||
noWrapperStyle={noWrapperStyle}
|
||||
nolabel={!label}
|
||||
onClick={onClick}
|
||||
>
|
||||
{label && (
|
||||
<Label isFocus={isFocus} hasPrefix={hasPrefix} onClick={onClick}>
|
||||
<LabelInfo
|
||||
label={label}
|
||||
required={required}
|
||||
description={description}
|
||||
labelExtra={labelExtra}
|
||||
></LabelInfo>
|
||||
</Label>
|
||||
)}
|
||||
{extra && <Extra>{extra}</Extra>}
|
||||
<Inner>{children}</Inner>
|
||||
</InnerWrapper>
|
||||
{addAfter && <AddAfter>{addAfter}</AddAfter>}
|
||||
</WrapperBox>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@@ -0,0 +1,131 @@
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
BGCOLOR,
|
||||
BORDERRADIUS,
|
||||
INPUTHEIGHT,
|
||||
INPUT_INNER_PADDING,
|
||||
WRAPHEIGHT
|
||||
} from '../config';
|
||||
|
||||
const InputWrapper = styled.div`
|
||||
.seal-input-number {
|
||||
padding-right: 0;
|
||||
}
|
||||
.seal-input-wrapper-disabled {
|
||||
background-color: var(--ant-color-bg-container-disabled);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ant-color-border);
|
||||
.ant-input-search-button {
|
||||
border-color: var(--ant-color-border) !important;
|
||||
color: var(--ant-color-text-description) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input-number-input-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-block: 5px;
|
||||
padding-inline: ${INPUT_INNER_PADDING}px;
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
background-color: ${BGCOLOR};
|
||||
}
|
||||
.ant-input.seal-textarea {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
position: static;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
background-color: ${BGCOLOR};
|
||||
|
||||
&:hover .ant-input-number-handler-wrap,
|
||||
&-focused .ant-input-number-handler-wrap {
|
||||
width: 34px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
&.ant-input-number-disabled {
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input-outlined {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-block: 5px;
|
||||
padding-inline: ${INPUT_INNER_PADDING}px;
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input.ant-input-disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
input.ant-input-number-input {
|
||||
flex: 1;
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
padding-block: 5px;
|
||||
padding-inline: ${INPUT_INNER_PADDING}px;
|
||||
}
|
||||
.ant-input-group {
|
||||
position: static;
|
||||
}
|
||||
.ant-input-group-addon {
|
||||
inset-inline-start: unset !important;
|
||||
border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0;
|
||||
width: 30px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.ant-input-group-wrapper-disabled {
|
||||
.ant-input-group-addon {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-group-addon:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.ant-input-search-button {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0;
|
||||
border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0 !important;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
height: 52px;
|
||||
border-left: var(--ant-line-width) var(--ant-line-type)
|
||||
var(--ant-color-border);
|
||||
}
|
||||
.ant-input-number-handler-wrap {
|
||||
top: 0;
|
||||
height: ${WRAPHEIGHT - 2}px;
|
||||
}
|
||||
.seal-textarea-wrapper {
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default InputWrapper;
|
||||
@@ -0,0 +1,190 @@
|
||||
import styled from 'styled-components';
|
||||
import { BORDERRADIUS, INPUT_INNER_PADDING, INPUTHEIGHT } from '../config';
|
||||
|
||||
const SelectWrapper = styled.div`
|
||||
.seal-select-wrapper {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&.dropdown-visible {
|
||||
.__wrapper__ {
|
||||
.ant-select-selector {
|
||||
border-bottom: none !important;
|
||||
border-radius: ${BORDERRADIUS}px ${BORDERRADIUS}px 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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.__wrapper__ {
|
||||
padding-block: 0;
|
||||
|
||||
.label {
|
||||
left: ${INPUT_INNER_PADDING + 1}px !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;
|
||||
}
|
||||
}
|
||||
&.no-label {
|
||||
padding-block: 0;
|
||||
|
||||
:global {
|
||||
.ant-select-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
padding-block-start: 0 !important;
|
||||
}
|
||||
|
||||
:global(.ant-select .ant-select-selection-search) {
|
||||
top: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-select-selection-overflow-item > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ant-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
|
||||
.ant-select-selection-search {
|
||||
top: 20px !important;
|
||||
inset-inline-start: ${INPUT_INNER_PADDING}px;
|
||||
}
|
||||
&.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;
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-multiple.ant-select-lg {
|
||||
.ant-select-selection-search {
|
||||
margin-inline-start: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selection-item {
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
padding-block: 5px !important;
|
||||
line-height: 22px !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default SelectWrapper;
|
||||
@@ -0,0 +1,40 @@
|
||||
import styled from 'styled-components';
|
||||
import { INPUTHEIGHT, INPUT_INNER_PADDING } from '../config';
|
||||
|
||||
const SliderWrapper = styled.div`
|
||||
padding-block: 0;
|
||||
padding-inline: 2px;
|
||||
input.ant-input-number-input {
|
||||
text-align: center !important;
|
||||
flex: 1;
|
||||
height: ${INPUTHEIGHT}px !important;
|
||||
padding-block: 5px;
|
||||
padding-inline: ${INPUT_INNER_PADDING}px;
|
||||
}
|
||||
.slider-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
|
||||
.val {
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
|
||||
.label-val {
|
||||
position: absolute !important;
|
||||
top: -14px;
|
||||
right: -14px;
|
||||
width: 80px;
|
||||
border-radius: var(--border-radius-base);
|
||||
text-align: center;
|
||||
border: 1px solid var(--ant-color-border) !important;
|
||||
|
||||
.ant-input-number-input {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default SliderWrapper;
|
||||
Reference in New Issue
Block a user