chore: add model file ux
This commit is contained in:
jialin
@@ -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