6c2c7dcd48
- document folder - full-text search - blob storage - basic edgeless support Co-authored-by: tzhangchi <terry.zhangchi@outlook.com> Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com> Co-authored-by: DiamondThree <diamond.shx@gmail.com> Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com> Co-authored-by: JimmFly <yangjinfei001@gmail.com> Co-authored-by: Yifeng Wang <doodlewind@toeverything.info> Co-authored-by: Himself65 <himself65@outlook.com> Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com> Co-authored-by: Qi <474021214@qq.com>
120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
export const displayFlex = (
|
|
justifyContent: CSSProperties['justifyContent'] = 'unset',
|
|
alignItems: CSSProperties['alignContent'] = 'unset',
|
|
alignContent: CSSProperties['alignContent'] = 'unset'
|
|
): {
|
|
display: CSSProperties['display'];
|
|
justifyContent: CSSProperties['justifyContent'];
|
|
alignItems: CSSProperties['alignContent'];
|
|
alignContent: CSSProperties['alignContent'];
|
|
} => {
|
|
return {
|
|
display: 'flex',
|
|
justifyContent,
|
|
alignItems,
|
|
alignContent,
|
|
};
|
|
};
|
|
export const displayInlineFlex = (
|
|
justifyContent: CSSProperties['justifyContent'] = 'unset',
|
|
alignItems: CSSProperties['alignContent'] = 'unset',
|
|
alignContent: CSSProperties['alignContent'] = 'unset'
|
|
): {
|
|
display: CSSProperties['display'];
|
|
justifyContent: CSSProperties['justifyContent'];
|
|
alignItems: CSSProperties['alignContent'];
|
|
alignContent: CSSProperties['alignContent'];
|
|
} => {
|
|
return {
|
|
display: 'inline-flex',
|
|
justifyContent,
|
|
alignItems,
|
|
alignContent,
|
|
};
|
|
};
|
|
|
|
export const absoluteCenter = ({
|
|
horizontal = false,
|
|
vertical = false,
|
|
position: { left, right, top, bottom } = {},
|
|
}: {
|
|
horizontal?: boolean;
|
|
vertical?: boolean;
|
|
position?: {
|
|
left?: CSSProperties['left'];
|
|
right?: CSSProperties['right'];
|
|
top?: CSSProperties['top'];
|
|
bottom?: CSSProperties['bottom'];
|
|
};
|
|
}): {
|
|
position: CSSProperties['position'];
|
|
left: CSSProperties['left'];
|
|
top: CSSProperties['top'];
|
|
right: CSSProperties['right'];
|
|
bottom: CSSProperties['bottom'];
|
|
transform: CSSProperties['transform'];
|
|
} => {
|
|
return {
|
|
position: 'absolute',
|
|
left: left ? left : horizontal ? '50%' : 'auto',
|
|
top: top ? top : vertical ? '50%' : 'auto',
|
|
right: right ? right : horizontal ? 'auto' : 'auto',
|
|
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
|
|
transform: `translate(${horizontal ? '-50%' : '0'}, ${
|
|
vertical ? '-50%' : '0'
|
|
})`,
|
|
};
|
|
};
|
|
export const fixedCenter = ({
|
|
horizontal = false,
|
|
vertical = false,
|
|
position: { left, right, top, bottom } = {},
|
|
}: {
|
|
horizontal?: boolean;
|
|
vertical?: boolean;
|
|
position?: {
|
|
left?: CSSProperties['left'];
|
|
right?: CSSProperties['right'];
|
|
top?: CSSProperties['top'];
|
|
bottom?: CSSProperties['bottom'];
|
|
};
|
|
}): {
|
|
position: CSSProperties['position'];
|
|
left: CSSProperties['left'];
|
|
top: CSSProperties['top'];
|
|
right: CSSProperties['right'];
|
|
bottom: CSSProperties['bottom'];
|
|
transform: CSSProperties['transform'];
|
|
} => {
|
|
return {
|
|
position: 'fixed',
|
|
left: left ? left : horizontal ? '50%' : 'auto',
|
|
top: top ? top : vertical ? '50%' : 'auto',
|
|
right: right ? right : horizontal ? 'auto' : 'auto',
|
|
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
|
|
transform: `translate(${horizontal ? '-50%' : '0'}, ${
|
|
vertical ? '-50%' : '0'
|
|
})`,
|
|
};
|
|
};
|
|
|
|
export const textEllipsis = (lineNum = 1): CSSProperties => {
|
|
if (lineNum > 1) {
|
|
return {
|
|
display: '-webkit-box',
|
|
wordBreak: 'break-all',
|
|
WebkitBoxOrient: 'vertical',
|
|
WebkitLineClamp: `${lineNum}`, //需要显示的行数
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
};
|
|
}
|
|
return {
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
};
|
|
};
|