@beisen-phoenix/select
Version:
## 概述
189 lines (177 loc) • 7.32 kB
JavaScript
import styled, { css } from 'styled-components';
import { $Fs1, $Fs2, $M1, $M5, $M6, $M7, $M9, $Ra2, $Sp2, $Sp3, $Sp8, $S4, $S5, $alpha, $M2, $red, $family, $scrollBar } from '@beisen-phoenix/style-token';
export function getHeightStyle(size) {
if (size === 'large') {
return '32px';
}
if (size === 'small') {
return '26px;';
}
if (size === 'normal') {
return '30px';
}
return 'auto';
}
export function getPaddingStyle(size) {
if (size === 'large') {
return css(["padding-top:5px;padding-bottom:1px;"]);
}
if (size === 'small') {
return css(["padding-top:2px;padding-bottom:0px;"]);
}
if (size === 'normal') {
return css(["padding-top:4px;padding-bottom:0px;"]);
}
return css(["padding-top:4px;padding-bottom:0px;"]);
}
export var PlaceHolder =
/*#__PURE__*/
styled.div(["position:absolute;top:50%;left:8px;max-width:calc(100% - 32px);height:20px;margin-top:-10px;overflow:hidden;color:", ";", " line-height:20px;white-space:nowrap;text-align:left;display:", ";", ";text-overflow:", ";"], $M5, $Fs1, function (props) {
return props.isShowPlaceHolder ? 'block' : 'none';
}, function (props) {
return props.size === 'large' ? "".concat($Fs2) : "".concat($Fs1);
}, function (props) {
return props.isFocus ? '' : 'ellipsis';
});
export var Chosen =
/*#__PURE__*/
styled.li(["box-sizing:border-box;height:20px;line-height:20px;position:relative;float:left;max-width:99%;margin:0 ", " ", " 0;padding:0 ", " 0 ", ";overflow:hidden;", " background-color:", ";border-radius:", ";cursor:default;", ";", ";", ";"], $Sp2, $Sp2, $Sp3, $Sp3, $Fs1, $M7, $Ra2, function (props) {
if (props.itemDisabled) {
return css(["padding-right:", ";cursor:not-allowed;"], $Sp3);
}
}, function (props) {
if (props.selectDisabled) {
return css(["color:", ";cursor:not-allowed;"], $M2);
}
}, function (props) {
if (props.size === 'small') {
return css(["margin-bottom:3px;"]);
}
});
export var IconWrapper =
/*#__PURE__*/
styled.span(["margin-left:", ";padding-top:2px;float:right;cursor:pointer;", ";"], $Sp2, function (props) {
if (props.selectDisabled) {
return css(["cursor:not-allowed;"]);
}
});
export var InputWrapper =
/*#__PURE__*/
styled.li(["position:relative;float:left;overflow:hidden;max-width:100%;width:auto;", ";", ";"], $Fs1, function (props) {
if (!props.multiValueLength) {
return css(["height:26px;width:99%;"]);
}
});
export var StyledInput =
/*#__PURE__*/
styled.input(["display:inline-block;font-family:", ";padding:0;margin:0;max-width:100%;background:transparent;border-width:0;outline:0;border:none;min-width:10px;&::-ms-clear{display:none;}color:", ";height:26px;", ";line-height:26px;", ";", ";", ";"], $family, $M1, function (props) {
return props.size === 'large' ? "".concat($Fs2) : "".concat($Fs1);
}, function (props) {
if (!props.isSearch) {
return css(["cursor:pointer;color:transparent;text-shadow:0 0 0 ", ";"], $M1);
}
}, function (props) {
if (props.disabled) {
return css(["&[disabled]{cursor:not-allowed;}"]);
}
}, function (props) {
var propsValue = props.propsValue;
if (props.isMultiSelect && Array.isArray(propsValue) && propsValue.length) {
return css(["width:10px;height:20px;"]);
}
return css(["width:100%;"]);
});
export var SelectIconWrapper =
/*#__PURE__*/
styled.div(["", ";font-size:12px;height:12px;margin-left:", ";position:absolute;right:", ";top:50%;transform:translateY(-50%);"], function (props) {
if (props.disabled) {
return css(["cursor:not-allowed;"]);
}
}, $Sp2, $Sp3);
export var StyledUl =
/*#__PURE__*/
styled.ul(["margin:0;width:100%;box-sizing:border-box;position:relative;max-height:120px;overflow-y:auto;overflow-x:hidden;padding:0 ", " 0 8px;", ";"], $Sp8, $scrollBar);
export var Wrapper =
/*#__PURE__*/
styled.div(["font-family:", ";position:relative;box-sizing:border-box;display:flex;align-items:center;background-color:", ";background:", ";min-height:26px;min-width:100px;margin-bottom:", ";overflow:hidden;box-sizing:border-box;&::before{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:", ";border:1px solid ", ";box-sizing:border-box;content:'';", ";", ";", ";}", ";", ";", ";&:hover{&::before{cursor:pointer;", ";", ";}.SwitchArrow{cursor:pointer;", ";}.DeleteInputTxt{", ";}}&:active::before,&:focus::before{", ";}"], $family, $M9, $M9, $Sp2, $Ra2, $M6, function (props) {
if (!props.isMultiSelect) {
return css(["z-index:1;"]);
}
}, function (props) {
if (props.error) {
return css(["border-color:", ";"], $red);
}
}, function (props) {
if ((props.isFocus || props.isActive) && !props.error) {
return css(["border-color:", ";"], $S4);
}
}, function (props) {
var multiValueLength = props.multiValueLength,
size = props.size;
if (multiValueLength) {
return getPaddingStyle(size);
}
}, function (props) {
if (props.multiValueLength && !props.isSingleLine) {
return css(["min-height:", ";height:auto;"], getHeightStyle(props.size));
}
return css(["height:", ";"], getHeightStyle(props.size));
}, function (props) {
if (props.disabled) {
return css(["color:", ";background-color:", ";cursor:not-allowed;"], $M5, $alpha($M6, '0.3'));
}
}, function (props) {
if (!props.disabled && !props.error) {
return css(["border-color:", ";"], $S5);
}
}, function (props) {
if (props.disabled) {
return css(["cursor:not-allowed;"]);
}
}, function (props) {
if (props.disabled) {
return css(["cursor:not-allowed;"]);
}
if (props.isShowDeleteIcon) {
return css(["display:none;"]);
}
}, function (props) {
if (props.isShowDeleteIcon) {
return css(["display:block;"]);
}
}, function (props) {
if (!props.disabled && !props.error) {
return css(["border-color:", ";"], $S4);
}
});
export var StyledSpan =
/*#__PURE__*/
styled.span(["display:flex;align-items:center;font-family:", ";box-sizing:border-box;color:", ";width:100%;background-color:#fff;pointer-events:none;padding-right:", ";padding-left:", ";left:0;position:absolute;height:100%;opacity:", ";", ";cursor:", ";", ";"], $family, $M1, $Sp8, $Sp3, function (props) {
return props.visibleTxt ? 1 : 0;
}, function (props) {
return props.size === 'large' ? "".concat($Fs2) : "".concat($Fs1);
}, function (props) {
return props.isSearch ? 'text' : 'pointer';
}, function (props) {
if (props.disabled) {
return css(["color:", ";background-color:transparent;"], $M2);
}
if (props.isFocus && props.isSearch) {
return "color:".concat($M5);
}
});
export var StyledWrapper =
/*#__PURE__*/
styled.div(["position:relative;zoom:1;cursor:text;"]);
export var StyledHiddenSpan =
/*#__PURE__*/
styled.span(["display:inline-block;opacity:0;z-index:-1;position:absolute;font-size:12px;"]);
export var StyledDeleteIcon =
/*#__PURE__*/
styled.div(["z-index:1;display:none;font-size:12px;height:12px;margin-left:", ";position:absolute;right:", ";top:47%;transform:translateY(-50%);&:hover{cursor:pointer;}"], $Sp2, $Sp3);
export var StyledTagSpan =
/*#__PURE__*/
styled.span(["max-width:120px;display:inline-block;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;overflow:hidden;color:", ";"], $M2);
export var TipsSapn =
/*#__PURE__*/
styled.span(["text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;overflow:hidden;"]);