feat: support space style in old browsers (#1635)

* feat: support space style in old browers * fix: style & version * revert: version 100 --------- Co-authored-by: sheepluo <[email protected]>
Tencent · Nov 15, 2023 · e5b3443 · e5b3443
1 parent 6582900
commit e5b3443
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/js/utils/helper.ts b/js/utils/helper.ts
@@ -94,6 +94,28 @@ export function getIEVersion() {
   return Number.MAX_SAFE_INTEGER;
 }
 
+/**
+ * Safari Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15
+ * FireFox Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/114.0
+ * Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36
+ * Chrome 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.3
+ * 搜狗 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36 SE 2.X MetaSr 1.
+ * 360 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.9 Safari/537.36 QIHU 360EE
+ */
+export function getFlexGapPolyFill() {
+  if (typeof navigator === 'undefined' || !navigator) return false;
+  const ua = navigator.userAgent;
+  const chromeMatch = ua.match(/AppleWebKit.+Chrome\/(.+) Safari\/.+/i);
+  if (Number(chromeMatch?.[1]?.split('.')[0]) < 100) return true;
+  const safariMatch = ua.match(/AppleWebKit.+Version\/(.+) Safari\/.+/i);
+  if (Number(safariMatch?.[1]?.split('.')[0]) < 12) return true;
+  const ieVersion = getIEVersion();
+  if (ieVersion <= 11) return true;
+  const fireFoxMatch = ua.match(/Firefox\/(.+)/i);
+  if (Number(fireFoxMatch?.[1]?.split('.')[0]) < 100) return true;
+  return false;
+}
+
 /**
  * 计算字符串字符的长度并可以截取字符串。
  * @param str 传入字符串

diff --git a/style/web/components/space/_index.less b/style/web/components/space/_index.less
@@ -33,3 +33,33 @@
     }
   }
 }
+
+.@{prefix}-space.@{prefix}-space--break-line {
+  flex-wrap: wrap;
+}
+
+.@{prefix}-space {
+  &.@{prefix}-space--polyfill {
+    display: flex;
+
+    &.@{prefix}-space-horizontal,
+    &.@{prefix}-space--break-line {
+      margin-left: calc(-1 * var(--column-gap, 0));
+    }
+
+    &.@{prefix}-space-vertical,
+    &.@{prefix}-space--break-line {
+      margin-top: calc(-1 * var(--row-gap, 0));
+    }
+  }
+
+  &.@{prefix}-space--polyfill.@{prefix}-space-horizontal > *,
+  &.@{prefix}-space--polyfill.@{prefix}-space--break-line > * {
+    margin-left: var(--column-gap);
+  }
+
+  &.@{prefix}-space--polyfill.@{prefix}-space-vertical > *,
+  &.@{prefix}-space--polyfill.@{prefix}-space--break-line > * {
+    margin-top: var(--row-gap);
+  }
+}