From e5b344350bd4197a1173fe48323dd9e09994f970 Mon Sep 17 00:00:00 2001
From: sheepluo <yaoyanhuoyi@qq.com>
Date: Wed, 15 Nov 2023 15:31:06 +0800
Subject: [PATCH] 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 <sheepluo@tencent.com>
---
js/utils/helper.ts | 22 +++++++++++++++++++
style/web/components/space/_index.less | 30 ++++++++++++++++++++++++++
2 files changed, 52 insertions(+)
diff --git a/js/utils/helper.ts b/js/utils/helper.ts
index c3c99827d7..14a1bd4c76 100644
--- 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
index 6b91d890f9..3d44e0ece4 100644
--- 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);
+ }
+}