@dsh-workbench/shared 0.1.11 → 0.1.13

package/src/components/ChoiceGroup.test.tsx

@@ -0,0 +1,201 @@
+import { describe, expect, it } from 'vitest';
+import { Fragment, h } from '../lib/react.js';
+import { ChoiceGroup } from './ChoiceGroup.js';
+
+interface AnyElement {
+  readonly type: unknown;
+  readonly props: Record<string, unknown>;
+}
+
+function flatten(node: unknown, out: AnyElement[]): void {
+  if (node === null || node === void 0 || typeof node === 'boolean') return;
+  if (typeof node === 'string' || typeof node === 'number') return;
+  if (Array.isArray(node)) {
+    for (const one of node) flatten(one, out);
+    return;
+  }
+  if (typeof node !== 'object') return;
+  const element = node as AnyElement;
+  if (typeof element.type === 'function') {
+    flatten(
+      (element.type as (props: unknown) => unknown)(element.props),
+      out,
+    );
+    return;
+  }
+  out.push(element);
+  if (element.props['children'] !== void 0) {
+    flatten(element.props['children'], out);
+  }
+}
+
+function treeOf(element: unknown): readonly AnyElement[] {
+  const out: AnyElement[] = [];
+  flatten(element, out);
+  return out;
+}
+
+function inputsOf(element: unknown): readonly AnyElement[] {
+  return treeOf(element).filter((one) => one.type === 'input');
+}
+
+const OPTIONS = [
+  { value: 'tencent-test', label: '腾讯云 · 测试' },
+  { value: 'tencent-prod', label: '腾讯云 · 生产' },
+];
+
+describe('ChoiceGroup：单选照旧，多选是新加的那条路', () => {
+  it('单选：选中的那一行 checked，点别的行给的是那个字符串', () => {
+    const seen: string[] = [];
+    const element = ChoiceGroup({
+      label: '环境',
+      name: 'env',
+      value: 'tencent-test',
+      options: OPTIONS,
+      onChange: (next) => seen.push(next),
+    });
+    const inputs = inputsOf(element);
+
+    expect(inputs).toHaveLength(2);
+    expect(inputs.map((one) => one.props['type'])).toEqual(['radio', 'radio']);
+    expect(inputs.map((one) => one.props['checked'])).toEqual([true, false]);
+    expect(
+      treeOf(element).filter((node) => node.props['className'] === 'wb-radio'),
+    ).toHaveLength(2);
+
+    (inputs[1]?.props['onChange'] as () => void)();
+    expect(seen).toEqual(['tencent-prod']);
+  });
+
+  it('★ 多选：勾上的再点是摘掉，没勾的是加上（给的是整份数组，不是新值）', () => {
+    const seen: (readonly string[])[] = [];
+    const element = ChoiceGroup({
+      multi: true,
+      label: '环境',
+      name: 'env',
+      values: ['tencent-test'],
+      options: OPTIONS,
+      onChange: (next) => seen.push(next),
+    });
+    const inputs = inputsOf(element);
+
+    expect(inputs.map((one) => one.props['type'])).toEqual([
+      'checkbox',
+      'checkbox',
+    ]);
+    expect(inputs.map((one) => one.props['checked'])).toEqual([true, false]);
+    expect(
+      treeOf(element).filter((one) => one.props['className'] === 'wb-checkbox'),
+    ).toHaveLength(2);
+
+    (inputs[0]?.props['onChange'] as () => void)();
+    (inputs[1]?.props['onChange'] as () => void)();
+
+    expect(seen).toEqual([[], ['tencent-test', 'tencent-prod']]);
+  });
+
+  it('★ 多选的标签收 ReactNode：两列那种行塞得进去（EnvPicker 靠这条）', () => {
+    const element = ChoiceGroup({
+      multi: true,
+      label: '环境',
+      name: 'env',
+      values: [],
+      options: [
+        {
+          value: 'tencent-test',
+          label: h('span', { className: 'twoColumns' }, 'tencent-test'),
+        },
+      ],
+      onChange: () => {},
+    });
+
+    const labels = treeOf(element).filter(
+      (one) => one.props['className'] === 'wb-choiceLabel',
+    );
+    expect(labels).toHaveLength(1);
+    expect(
+      treeOf(labels[0]?.props['children']).some(
+        (one) => one.props['className'] === 'twoColumns',
+      ),
+    ).toBe(true);
+  });
+
+  it('多选的容器是 group、单选是 radiogroup（屏幕阅读器读出来的东西不一样）', () => {
+    const multi = treeOf(
+      ChoiceGroup({
+        multi: true,
+        label: '环境',
+        name: 'env',
+        values: [],
+        options: OPTIONS,
+        onChange: () => {},
+      }),
+    ).find((one) => one.props['className'] === 'wb-choiceMenu');
+    const single = treeOf(
+      ChoiceGroup({
+        label: '环境',
+        name: 'env',
+        value: 'tencent-test',
+        options: OPTIONS,
+        onChange: () => {},
+      }),
+    ).find((one) => one.props['className'] === 'wb-choiceMenu');
+
+    expect(multi?.props['role']).toBe('group');
+    expect(single?.props['role']).toBe('radiogroup');
+  });
+
+  it('勾上了的行带 wb-choiceOptionOn，没勾的不带', () => {
+    const rows = treeOf(
+      ChoiceGroup({
+        multi: true,
+        label: '环境',
+        name: 'env',
+        values: ['tencent-prod'],
+        options: OPTIONS,
+        onChange: () => {},
+      }),
+    ).filter((one) => one.type === 'label');
+
+    expect(rows.map((one) => one.props['className'])).toEqual([
+      'wb-choiceOption',
+      'wb-choiceOption wb-choiceOptionOn',
+    ]);
+  });
+
+  it('多选里勾上了才画那颗勾（没勾就是个空盒子）', () => {
+    const boxes = (values: readonly string[]): readonly AnyElement[] =>
+      treeOf(
+        ChoiceGroup({
+          multi: true,
+          label: '环境',
+          name: 'env',
+          values,
+          options: OPTIONS,
+          onChange: () => {},
+        }),
+      ).filter((one) => one.props['className'] === 'wb-checkboxBox');
+
+    expect(boxes([]).map((one) => one.props['children'])).toEqual([null, null]);
+    expect(boxes(['tencent-test']).map((one) => one.props['children'])[0]).not.toBeNull();
+  });
+
+  it('禁用照旧传下去', () => {
+    const inputs = inputsOf(
+      ChoiceGroup({
+        multi: true,
+        label: '环境',
+        name: 'env',
+        values: [],
+        options: OPTIONS,
+        disabled: true,
+        onChange: () => {},
+      }),
+    );
+    expect(inputs.every((one) => one.props['disabled'] === true)).toBe(true);
+  });
+
+  it('Fragment 还是 React 自己的（别把 key 语义换掉）', () => {
+    expect(Fragment).toBeDefined();
+  });
+});

package/src/components/ChoiceGroup.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from '../lib/react.js';
 import { Fragment, h } from '../lib/react.js';
+import { IconCheckOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives';
 import './ChoiceGroup.css';
 
 export interface ChoiceGroupOption {
@@ -7,33 +8,125 @@ export interface ChoiceGroupOption {
   readonly label: ReactNode;
 }
 
-export interface ChoiceGroupProps {
+interface ChoiceGroupCommon {
   readonly label: string;
   readonly name: string;
-  readonly value: string;
   readonly options: readonly ChoiceGroupOption[];
   readonly disabled?: boolean | undefined;
+}
+
+export interface ChoiceGroupSingleProps extends ChoiceGroupCommon {
+  readonly multi?: false | undefined;
+  readonly value: string;
   readonly onChange: (next: string) => void;
 }
 
-export function ChoiceGroup({ label, name, value, options, disabled, onChange }: ChoiceGroupProps) {
+export interface ChoiceGroupMultiProps extends ChoiceGroupCommon {
+  readonly multi: true;
+  readonly values: readonly string[];
+  readonly onChange: (next: readonly string[]) => void;
+}
+
+export type ChoiceGroupProps = ChoiceGroupSingleProps | ChoiceGroupMultiProps;
+
+interface ChoiceRowState {
+  readonly checked: boolean;
+  readonly onSelect: () => void;
+}
+
+function ChoiceMenu(input: {
+  readonly label: string;
+  readonly name: string;
+  readonly options: readonly ChoiceGroupOption[];
+  readonly disabled: boolean;
+  readonly multi: boolean;
+  readonly rowOf: (value: string) => ChoiceRowState;
+}) {
   return (
-    <div className="wb-choiceMenu" role="radiogroup" aria-label={label}>
-      {options.map((option) => (
-        <Fragment key={option.value}>
-          <label className="wb-choiceOption">
-            <input
-              className="wb-radio"
-              type="radio"
-              name={name}
-              checked={option.value === value}
-              disabled={disabled === true}
-              onChange={() => onChange(option.value)}
-            />
-            <span className="wb-choiceLabel">{option.label}</span>
-          </label>
-        </Fragment>
-      ))}
+    <div
+      className="wb-choiceMenu"
+      role={input.multi ? 'group' : 'radiogroup'}
+      aria-label={input.label}
+    >
+      {input.options.map((option) => {
+        const row = input.rowOf(option.value);
+        return (
+          <Fragment key={option.value}>
+            <label
+              className={`wb-choiceOption${row.checked ? ' wb-choiceOptionOn' : ''}`}
+            >
+              <input
+                className={input.multi ? 'wb-checkbox' : 'wb-radio'}
+                type={input.multi ? 'checkbox' : 'radio'}
+                name={input.name}
+                checked={row.checked}
+                disabled={input.disabled}
+                onChange={row.onSelect}
+              />
+              {input.multi ? (
+                <span
+                  className="wb-checkboxBox"
+                  aria-hidden="true"
+                >
+                  {row.checked ? <IconCheckOutlineRegular size={12} /> : null}
+                </span>
+              ) : null}
+              <span className="wb-choiceLabel">{option.label}</span>
+            </label>
+          </Fragment>
+        );
+      })}
     </div>
   );
 }
+
+export function ChoiceGroup(props: ChoiceGroupProps) {
+  const common = {
+    label: props.label,
+    name: props.name,
+    options: props.options,
+    disabled: props.disabled === true,
+  };
+
+  if (props.multi === true) {
+    const values = props.values;
+    const onChange = props.onChange;
+    return (
+      <ChoiceMenu
+        label={common.label}
+        name={common.name}
+        options={common.options}
+        disabled={common.disabled}
+        multi={true}
+        rowOf={(value) => ({
+          checked: values.includes(value),
+          onSelect: () => {
+            onChange(
+              values.includes(value)
+                ? values.filter((one) => one !== value)
+                : [...values, value],
+            );
+          },
+        })}
+      />
+    );
+  }
+
+  const value = props.value;
+  const onChange = props.onChange;
+  return (
+    <ChoiceMenu
+      label={common.label}
+      name={common.name}
+      options={common.options}
+      disabled={common.disabled}
+      multi={false}
+      rowOf={(option) => ({
+        checked: option === value,
+        onSelect: () => {
+          onChange(option);
+        },
+      })}
+    />
+  );
+}

package/src/lib/ui.test.ts

@@ -45,6 +45,14 @@ describe('relativeTime', () => {
     expect(relativeTime(NOW - 7 * 24 * 60 * 60_000, t)).not.toContain('time.');
   });
 
+  it('★ 过了 7 天要给到时分秒：只剩日子的话，"哪一次同步"根本分不出来', () => {
+    const old = relativeTime(NOW - 8 * 24 * 60 * 60_000, t);
+
+    expect(old).not.toContain('time.');
+    expect(old.match(/:/g)).toHaveLength(2);
+    expect(old).toContain(String(new Date(NOW).getFullYear()));
+  });
+
   it('非法时间戳给空串而不是 NaN', () => {
     expect(relativeTime(Number.NaN, t)).toBe('');
     expect(relativeTime(Number.POSITIVE_INFINITY, t)).toBe('');

package/src/lib/ui.ts

@@ -13,7 +13,14 @@ export function relativeTime(epochMs: number, t: TimeTranslate): string {
   if (diff < 60 * MINUTE) return t('time.minutes', { n: Math.floor(diff / MINUTE) });
   if (diff < 24 * 60 * MINUTE) return t('time.hours', { n: Math.floor(diff / (60 * MINUTE)) });
   if (diff < 7 * 24 * 60 * MINUTE) return t('time.days', { n: Math.floor(diff / (24 * 60 * MINUTE)) });
-  return new Date(epochMs).toLocaleDateString();
+  return new Date(epochMs).toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
 }
 
 export function shortenPath(path: unknown): string {