refactor(infra): directory structure (#4615)

2026-08-24 05:07:06 +08:00 · 2023-10-18 23:30:08 +08:00
parent 814d552be8
commit bed9310519
1150 changed files with 539 additions and 584 deletions
@@ -0,0 +1,145 @@
+import type { CSSProperties } from 'react';
+
+export const displayFlex = (
+  justifyContent: CSSProperties['justifyContent'] = 'unset',
+  alignItems: CSSProperties['alignItems'] = 'unset',
+  alignContent: CSSProperties['alignContent'] = 'unset'
+): {
+  display: CSSProperties['display'];
+  justifyContent: CSSProperties['justifyContent'];
+  alignItems: CSSProperties['alignItems'];
+  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 : 'auto',
+    bottom: bottom ? bottom : '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 : 'auto',
+    bottom: bottom ? bottom : '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}`, //the number of rows to display
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    };
+  }
+  return {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  };
+};
+
+export const positionAbsolute = ({
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  left?: CSSProperties['left'];
+  top?: CSSProperties['top'];
+  right?: CSSProperties['right'];
+  bottom?: CSSProperties['bottom'];
+}): {
+  position: CSSProperties['position'];
+  left: CSSProperties['left'];
+  top: CSSProperties['top'];
+  right: CSSProperties['right'];
+  bottom: CSSProperties['bottom'];
+} => {
+  return {
+    position: 'absolute',
+    left,
+    top,
+    right,
+    bottom,
+  };
+};