feat(radio): 重构radio dom接口,补充对应文档和适配样式

fix Tencent#461
byq1213 · Aug 18, 2024 · 75b4db0 · 75b4db0
1 parent 52910ba
commit 75b4db0
Show file tree

Hide file tree

Showing 29 changed files with 2,295 additions and 308 deletions.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -58,7 +58,7 @@ export default {
     {
       title: 'Radio 单选框',
       name: 'radio',
-      component: () => import('tdesign-mobile-react/radio/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/radio/_example/index.tsx'),
     },
     {
       title: 'Rate 评分',

diff --git a/src/_common b/src/_common
diff --git a/src/common.ts b/src/common.ts
@@ -5,7 +5,9 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic
 // TElement 表示 API 只接受传入组件
 export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 // 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
-export type TNode<T = undefined> = T extends undefined ? ReactNode : (props: T) => ReactNode;
+export type TNode<T = undefined> = T extends undefined
+  ? ReactNode | (() => ReactNode)
+  : ReactNode | ((props: T) => ReactNode);
 
 export type AttachNodeReturnValue = HTMLElement | Element | Document;
 export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, CSSProperties, forwardRef, Ref, useContext, useRef } from 'react';
 import classNames from 'classnames';
-import { CheckIcon } from 'tdesign-icons-react';
+import { CheckIcon, CheckCircleFilledIcon } from 'tdesign-icons-react';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import useConfig from '../_util/useConfig';
 import useDefault from '../_util/useDefault';
@@ -31,22 +31,22 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
   const props = context ? context.inject(_props) : _props;
 
   const {
-    align = 'left',
+    placement = 'left',
     allowUncheck = false,
-    checked = false,
+    checked = undefined,
     defaultChecked = false,
-    children,
     content,
     contentDisabled,
     disabled,
-    icon,
+    icon = 'circle',
     label,
     maxContentRow = 5,
     maxLabelRow = 3,
     name,
     value,
-    // borderless = false,
+    borderless = false,
     onChange,
+    block = true,
   } = props;
 
   const [radioChecked, setRadioChecked] = useDefault(checked, defaultChecked, onChange);
@@ -66,40 +66,42 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
 
   const renderIcon = () => {
     if (Array.isArray(icon)) {
-      return radioChecked ? icon[0] : icon[1] ?? null;
+      return radioChecked ? icon[0] : (icon[1] ?? null);
+    }
+    if (radioChecked) {
+      if (icon === 'circle') {
+        return <CheckCircleFilledIcon className={`${classPrefix}__icon-wrap`} />;
+      }
+      if (icon === 'line') {
+        return <CheckIcon className={`${classPrefix}__icon-wrap`} />;
+      }
+      if (icon === 'dot') {
+        let dotIconClassName = `${classPrefix}__icon-${icon}`;
+        props.disabled && (dotIconClassName += ` ${classPrefix}__icon-${icon}--disabled`);
+        return <div className={dotIconClassName} />;
+      }
+    } else {
+      if (icon === 'circle' || icon === 'dot') {
+        let circleIconClassName = `${classPrefix}__icon-circle`;
+        props.disabled && (circleIconClassName += ` ${classPrefix}__icon-circle--disabled`);
+        return <div className={circleIconClassName} />;
+      }
+      if (icon === 'line') {
+        return <div className="placeholder" />;
+      }
     }
-    return (
-      <div
-        className={classNames(
-          `${classPrefix}__icon`, {
-            [`${classPrefix}__icon--checked`]: radioChecked,
-            [`${classPrefix}__icon--disabled`]: disabled,
-            // [`${classPrefix}__icon--strock`]: icon === 'stroke-line',
-            [`${classPrefix}__icon--custom`]: Array.isArray(icon),
-        })}
-      >
-        <CheckIcon size={16} />
-      </div>
-    );
   };
 
   const labelStyle = {
     ...getLimitRow(maxLabelRow),
     color: disabled ? '#dcdcdc' : 'inherit',
   };
 
-  const radioClassName = classNames(
-    `${classPrefix}`,
-    { [`${prefix}-is-checked`]: radioChecked },
-    { [`${prefix}-is-disabled`]: disabled },
-
-  );
+  const radioClassName = classNames(`${classPrefix}`, `${classPrefix}--${placement}`, {
+    [`${classPrefix}--block`]: block,
+  });
 
-  const titleClassName = classNames(
-    `${prefix}__content-title`,
-    { [`${prefix}-is-disabled`]: disabled },
-    { [`${prefix}__content-right-title`]: align === 'right' },
-  )
+  const titleClassName = classNames(`${classPrefix}__title`, { [`${classPrefix}__title--disabled`]: disabled });
 
   const input = (
     <input
@@ -110,7 +112,7 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
       // @ts-ignore
       value={value}
       disabled={disabled}
-      className={classNames(`${classPrefix}__original-${align}`)}
+      className={classNames(`${classPrefix}__original`)}
       checked={radioChecked}
       onClick={(e) => {
         e.stopPropagation();
@@ -122,30 +124,31 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
     />
   );
 
+  const iconClass = classNames(`${classPrefix}__icon`, `${classPrefix}__icon--${placement}`, {
+    [`${classPrefix}__icon--checked`]: radioChecked,
+    [`${classPrefix}__icon--disabled`]: disabled,
+  });
   return (
     <div className={radioClassName} ref={ref} onClick={() => switchRadioChecked()}>
-      <span className={`${classPrefix}__content-wrap`}>
-        {align === 'left' &&<span className={ `${classPrefix}__icon-wrap ${classPrefix}__icon-left-wrap`}>
-          {input}
-          {renderIcon()}
-        </span>}
-        <span className={`${classPrefix}__label-wrap`}>
-          {label && <span className={titleClassName} style={labelStyle}>{label}</span>}
-          {(children || content) && (
-            <div className={`${classPrefix}__content-inner`}  style={getLimitRow(maxContentRow)}>
-              {children || content}
-            </div>
-          )}
-        </span>
-        {align === 'right' &&<span className={ `${classPrefix}__icon-wrap ${classPrefix}__icon-right-wrap`}>
-          {input}
-          {renderIcon()}
-        </span>}
-      </span>
-      {/* 下边框 */}
-      { <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>}
-      {/* { !borderless && <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>} */}
-      <div ></div>
+      {input}
+      <div className={iconClass}>{renderIcon()}</div>
+      <div className={`${classPrefix}__content`}>
+        {label && (
+          <span className={titleClassName} style={labelStyle}>
+            {label}
+          </span>
+        )}
+        {content && (
+          <div
+            className={`${classPrefix}__description ${disabled && `${classPrefix  }__description--disabled`}`}
+            style={getLimitRow(maxContentRow)}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+
+      {!borderless && block && <div className={`${classPrefix}__border ${classPrefix}__border--${placement}`}></div>}
     </div>
   );
 });

diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
@@ -53,12 +53,8 @@ const RadioGroup: FC<RadioGroupProps> = (props) => {
       );
     });
   return (
-    <div ref={groupRef} className={`${classPrefix}-radio-group`}>
-      <div className={`${classPrefix}-cell-group`}>
-        <div className={`${classPrefix}cell-group__container`}>
-          <RadioContext.Provider value={context}>{options?.length ? renderOptions() : children}</RadioContext.Provider>
-        </div>
-      </div>
+    <div ref={groupRef} className={`${classPrefix}-radio-group ${props.className}`}>
+      <RadioContext.Provider value={context}>{options?.length ? renderOptions() : children}</RadioContext.Provider>
     </div>
   );
 };

diff --git a/src/radio/_example/base.jsx → src/radio/_example/base.tsx b/src/radio/_example/base.jsx → src/radio/_example/base.tsx
@@ -8,9 +8,11 @@ export default function Base() {
       <Radio label="单选" value="idx0"></Radio>
       <Radio label="单选" value="idx1"></Radio>
       <Radio label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选" value="idx2"></Radio>
-      <Radio label="单选" value="idx3">
-        单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选单选
-      </Radio>
+      <Radio
+        label="单选"
+        value="idx3"
+        content="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
+      ></Radio>
     </RadioGroup>
   );
 }
diff --git a/src/radio/_example/card.tsx b/src/radio/_example/card.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+
+export default function () {
+  const [defaultValue, setDefaultValue] = useState('1');
+  const options = [
+    {
+      value: '1',
+      label: '单选',
+    },
+    {
+      value: '2',
+      label: '单选',
+    },
+    {
+      value: '3',
+      label: '单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行',
+    },
+  ];
+  return (
+    <RadioGroup className="theme-card" value={defaultValue} onChange={setDefaultValue}>
+      {options.map((opt) => <Radio value={opt.value} label={opt.label} key={opt.value}></Radio>)}
+    </RadioGroup>
+  );
+}
diff --git a/src/radio/_example/custom.tsx b/src/radio/_example/custom.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+
+export default function () {
+  const [defaultValue, setDefaultValue] = useState(0);
+  const [defaultValueH, setDefaultValueH] = useState(0);
+  return (
+    <>
+      <TDemoBlock summary="单选框尺寸规格">
+        <RadioGroup value={defaultValue} onChange={(value) => setDefaultValue(value)}>
+          {Array.from(Array(3), (_, key) => (
+            <div className={`card ${defaultValue === key ? 'card--active' : ''}`} key={key}>
+              {defaultValue === key && <Icon name="check" color="#fff" className="card__icon" />}
+              <Radio
+                value={key}
+                borderless
+                label="单选"
+                content="描述信息描述信息描述信息描述信息描述信息"
+                icon="none"
+              ></Radio>
+            </div>
+          ))}
+        </RadioGroup>
+      </TDemoBlock>
+      <TDemoBlock summary="横向卡片单选框">
+        <RadioGroup className="horizontal-box" value={defaultValueH} onChange={(value) => setDefaultValueH(value)}>
+          {Array.from(Array(3), (_, key) => (
+            <div className={`card ${defaultValueH === key ? 'card--active' : ''}`} key={key}>
+              {defaultValueH === key && <Icon name="check" color="#fff" className="card__icon" />}
+              <Radio borderless value={key} label="单选" icon="none"></Radio>
+            </div>
+          ))}
+        </RadioGroup>
+      </TDemoBlock>
+    </>
+  );
+}
diff --git a/src/radio/_example/group.jsx b/src/radio/_example/group.jsx
diff --git a/src/radio/_example/horizontal.tsx b/src/radio/_example/horizontal.tsx
@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from 'tdesign-mobile-react';
+
+export default function Base() {
+  const [defaultValue, setDefaultValue] = useState('idx0');
+  return (
+    <RadioGroup value={defaultValue} className="box" onChange={(value) => setDefaultValue(value)}>
+      <Radio block={false} label="单选标题" value="idx0"></Radio>
+      <Radio block={false} label="单选标题" value="idx1"></Radio>
+      <Radio block={false} label="单选标题" value="idx2"></Radio>
+    </RadioGroup>
+  );
+}
diff --git a/src/radio/_example/icon.jsx b/src/radio/_example/icon.jsx
diff --git a/src/radio/_example/icon.tsx b/src/radio/_example/icon.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from 'tdesign-mobile-react';
+
+export default function () {
+  return (
+    <>
+      <Radio label="单选" icon="line" defaultChecked></Radio>
+      <Radio label="单选" icon="dot" defaultChecked></Radio>
+    </>
+  );
+}