feat: Add customize icon (ant-design#52216)

* feat: custom icon * feat: add style * feat: add collapsibleIcon * feat: custom icon * feat: add style * feat: add collapsibleIcon * feat: add test * feat: update snap * feat: update doc * feat: update snap * feat: rename * fix: default icon * Update components/splitter/SplitBar.tsx Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * feat: update type * feat: update test * feat: update test * feat: update version * feat: update type * Update components/splitter/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * Update components/splitter/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * feat: code optimization * feat: update * test: update * feat: rename * test: update * feat: update draggerIcon * test: update --------- Signed-off-by: Wanpan <wanpan96@163.com> Co-authored-by: lijianan <574980606@qq.com>
aojunhao123 · Jan 15, 2025 · 0df33b2 · 0df33b2
1 parent 1f50049
commit 0df33b2
Show file tree

Hide file tree

Showing 12 changed files with 643 additions and 20 deletions.
diff --git a/components/splitter/SplitBar.tsx b/components/splitter/SplitBar.tsx
@@ -6,13 +6,17 @@ import UpOutlined from '@ant-design/icons/UpOutlined';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import classNames from 'classnames';
 
+import type { SplitterProps } from './interface';
+
 export interface SplitBarProps {
   index: number;
   active: boolean;
   prefixCls: string;
   resizable: boolean;
   startCollapsible: boolean;
   endCollapsible: boolean;
+  draggerIcon?: SplitterProps['draggerIcon'];
+  collapsibleIcon?: SplitterProps['collapsibleIcon'];
   onOffsetStart: (index: number) => void;
   onOffsetUpdate: (index: number, offsetX: number, offsetY: number) => void;
   onOffsetEnd: VoidFunction;
@@ -39,6 +43,8 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     ariaMin,
     ariaMax,
     resizable,
+    draggerIcon,
+    collapsibleIcon,
     startCollapsible,
     endCollapsible,
     onOffsetStart,
@@ -160,8 +166,22 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
   };
 
   // ======================== Render ========================
-  const StartIcon = vertical ? UpOutlined : LeftOutlined;
-  const EndIcon = vertical ? DownOutlined : RightOutlined;
+  const [startIcon, endIcon, startCustomize, endCustomize] = React.useMemo(() => {
+    let startIcon = null;
+    let endIcon = null;
+    const startCustomize = collapsibleIcon?.start !== undefined;
+    const endCustomize = collapsibleIcon?.end !== undefined;
+
+    if (vertical) {
+      startIcon = startCustomize ? collapsibleIcon.start : <UpOutlined />;
+      endIcon = endCustomize ? collapsibleIcon.end : <DownOutlined />;
+    } else {
+      startIcon = startCustomize ? collapsibleIcon.start : <LeftOutlined />;
+      endIcon = endCustomize ? collapsibleIcon.end : <RightOutlined />;
+    }
+
+    return [startIcon, endIcon, startCustomize, endCustomize];
+  }, [collapsibleIcon, vertical]);
 
   return (
     <div
@@ -184,26 +204,36 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         className={classNames(`${splitBarPrefixCls}-dragger`, {
           [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
           [`${splitBarPrefixCls}-dragger-active`]: active,
+          [`${splitBarPrefixCls}-dragger-customize`]: !!draggerIcon,
         })}
         onMouseDown={onMouseDown}
         onTouchStart={onTouchStart}
-      />
+      >
+        {draggerIcon ? (
+          <div className={classNames(`${splitBarPrefixCls}-dragger-icon`)}>{draggerIcon}</div>
+        ) : null}
+      </div>
 
       {/* Start Collapsible */}
       {startCollapsible && (
         <div
           className={classNames(
             `${splitBarPrefixCls}-collapse-bar`,
             `${splitBarPrefixCls}-collapse-bar-start`,
+            {
+              [`${splitBarPrefixCls}-collapse-bar-customize`]: startCustomize,
+            },
           )}
           onClick={() => onCollapse(index, 'start')}
         >
-          <StartIcon
+          <span
             className={classNames(
               `${splitBarPrefixCls}-collapse-icon`,
               `${splitBarPrefixCls}-collapse-start`,
             )}
-          />
+          >
+            {startIcon}
+          </span>
         </div>
       )}
 
@@ -213,15 +243,20 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
           className={classNames(
             `${splitBarPrefixCls}-collapse-bar`,
             `${splitBarPrefixCls}-collapse-bar-end`,
+            {
+              [`${splitBarPrefixCls}-collapse-bar-customize`]: endCustomize,
+            },
           )}
           onClick={() => onCollapse(index, 'end')}
         >
-          <EndIcon
+          <span
             className={classNames(
               `${splitBarPrefixCls}-collapse-icon`,
               `${splitBarPrefixCls}-collapse-end`,
             )}
-          />
+          >
+            {endIcon}
+          </span>
         </div>
       )}
     </div>

diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
@@ -24,6 +24,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     style,
     layout = 'horizontal',
     children,
+    draggerIcon,
+    collapsibleIcon,
     rootClassName,
     onResizeStart,
     onResize,
@@ -177,6 +179,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
                 prefixCls={prefixCls}
                 vertical={isVertical}
                 resizable={resizableInfo.resizable}
+                draggerIcon={draggerIcon}
+                collapsibleIcon={collapsibleIcon}
                 ariaNow={stackSizes[idx] * 100}
                 ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
                 ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}

diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -198,6 +198,208 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
 
 exports[`renders components/splitter/demo/control.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/splitter/demo/customize.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-splitter ant-splitter-horizontal"
+    style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+  >
+    <div
+      class="ant-splitter-panel"
+      style="flex-basis: 40%; flex-grow: 0;"
+    >
+      <div
+        class="ant-flex ant-flex-align-center ant-flex-justify-center"
+        style="height: 100%;"
+      >
+        <h5
+          class="ant-typography ant-typography-secondary"
+          style="white-space: nowrap;"
+        >
+          Panel 1
+        </h5>
+      </div>
+    </div>
+    <div
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="40"
+      class="ant-splitter-bar"
+      role="separator"
+    >
+      <div
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled ant-splitter-bar-dragger-customize"
+      >
+        <div
+          class="ant-splitter-bar-dragger-icon"
+        >
+          <span
+            aria-label="column-width"
+            class="anticon anticon-column-width acss-jp9u09"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="column-width"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 00-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 000 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-splitter-panel"
+      style="flex-basis: auto; flex-grow: 1;"
+    >
+      <div
+        class="ant-flex ant-flex-align-center ant-flex-justify-center"
+        style="height: 100%;"
+      >
+        <h5
+          class="ant-typography ant-typography-secondary"
+          style="white-space: nowrap;"
+        >
+          Panel 2
+        </h5>
+      </div>
+    </div>
+    <div
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="70"
+      class="ant-splitter-bar"
+      role="separator"
+    >
+      <div
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled ant-splitter-bar-dragger-customize"
+      >
+        <div
+          class="ant-splitter-bar-dragger-icon"
+        >
+          <span
+            aria-label="column-width"
+            class="anticon anticon-column-width acss-jp9u09"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="column-width"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 00-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 000 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-splitter-panel"
+      style="flex-basis: auto; flex-grow: 1;"
+    >
+      <div
+        class="ant-flex ant-flex-align-center ant-flex-justify-center"
+        style="height: 100%;"
+      >
+        <h5
+          class="ant-typography ant-typography-secondary"
+          style="white-space: nowrap;"
+        >
+          Panel 3
+        </h5>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-splitter ant-splitter-vertical"
+    style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+  >
+    <div
+      class="ant-splitter-panel"
+      style="flex-basis: 40%; flex-grow: 0;"
+    >
+      <div
+        class="ant-flex ant-flex-align-center ant-flex-justify-center"
+        style="height: 100%;"
+      >
+        <h5
+          class="ant-typography ant-typography-secondary"
+          style="white-space: nowrap;"
+        >
+          First
+        </h5>
+      </div>
+    </div>
+    <div
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="40"
+      class="ant-splitter-bar"
+      role="separator"
+    >
+      <div
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled ant-splitter-bar-dragger-customize"
+      >
+        <div
+          class="ant-splitter-bar-dragger-icon"
+        >
+          <span
+            aria-label="column-height"
+            class="anticon anticon-column-height acss-jp9u09"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="column-height"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-splitter-panel"
+      style="flex-basis: auto; flex-grow: 1;"
+    >
+      <div
+        class="ant-flex ant-flex-align-center ant-flex-justify-center"
+        style="height: 100%;"
+      >
+        <h5
+          class="ant-typography ant-typography-secondary"
+          style="white-space: nowrap;"
+        >
+          Second
+        </h5>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/splitter/demo/customize.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"