DisclosureGroup 折叠面板组

1"use client";2// Independent React adaptation of the excluded pinned Native-preview source.3import { NativeReferenceGroup } from "./controlled";4export function Basic() {5  return <NativeReferenceGroup withNavigation={false} />;6}

1"use client";2// React adaptation of HeroUI v3.2.6 (e385ac2), Apache-2.0. Native preview content is a reference, not an embedded Native runtime.3import { ChevronDown, ChevronUp, QrCode } from "@gravity-ui/icons";4import { Button, Disclosure, DisclosureGroup, Separator } from "@lenso/ui";5import { Icon } from "@iconify/react";6import { Fragment, useState } from "react";7import * as stylex from "@stylexjs/stylex";8import { nativeReferenceStyles as styles } from "./native-reference.stylex";9export function NativeReferenceGroup({ withNavigation = true }: { withNavigation?: boolean }) {10  const [expanded, setExpanded] = useState<unknown[]>(["preview"]);11  const ids = ["preview", "download"];12  const index = ids.findIndex((id) => expanded.includes(id));13  return (14    <div {...stylex.props(styles.root)}>15      <div {...stylex.props(withNavigation ? styles.card : styles.basicCard)}>16        {withNavigation && (17          <div {...stylex.props(styles.heading)}>18            <h3 {...stylex.props(styles.title)}>HeroUI Native</h3>19            <div {...stylex.props(styles.actions)}>20              <Button21                aria-label="Previous disclosure"22                disabled={index <= 0}23                size="sm"24                variant="secondary"25                onClick={() => setExpanded([ids[index - 1]])}26              >27                <Button.Icon>28                  <ChevronUp />29                </Button.Icon>30              </Button>31              <Button32                aria-label="Next disclosure"33                disabled={index >= ids.length - 1}34                size="sm"35                variant="secondary"36                onClick={() => setExpanded([ids[index + 1]])}37              >38                <Button.Icon>39                  <ChevronDown />40                </Button.Icon>41              </Button>42            </div>43          </div>44        )}45        <DisclosureGroup value={expanded} onValueChange={setExpanded}>46          {ids.map((id, itemIndex) => (47            <Fragment key={id}>48              {itemIndex > 0 && <Separator xstyle={styles.separator} />}49              <Disclosure50                value={id}51                aria-label={id === "preview" ? "Preview HeroUI Native" : "Download HeroUI Native"}52              >53                <Disclosure.Heading>54                  <Disclosure.Trigger55                    render={56                      <Button57                        variant={expanded.includes(id) ? "secondary" : "tertiary"}58                        xstyle={[styles.trigger, !expanded.includes(id) && styles.closed]}59                      />60                    }61                  >62                    <span {...stylex.props(styles.label)}>63                      <Button.Icon>64                        {id === "preview" ? <QrCode /> : <Icon icon="tabler:brand-apple-filled" />}65                      </Button.Icon>66                      {id === "preview"67                        ? "Preview HeroUI Native"68                        : withNavigation69                          ? "Download HeroUI Native"70                          : "Download App"}71                    </span>72                    <Disclosure.Indicator xstyle={styles.indicator} />73                  </Disclosure.Trigger>74                </Disclosure.Heading>75                <Disclosure.Content>76                  <Disclosure.Body xstyle={styles.body}>77                    <p {...stylex.props(styles.muted)}>78                      {id === "download" && !withNavigation79                        ? "Download the HeroUI native app to explore our mobile components directly on your device."80                        : "Scan this QR code with your camera app to preview the HeroUI native components."}81                    </p>82                    <img83                      alt={84                        id === "download" && !withNavigation85                          ? "App Store QR Code"86                          : "Expo Go QR Code"87                      }88                      src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"89                      {...stylex.props(styles.qr)}90                    />91                    <p {...stylex.props(styles.muted)}>92                      {id === "download" && !withNavigation93                        ? "Available on iOS and Android devices."94                        : "Expo must be installed on your device."}95                    </p>96                    <Button variant="primary" xstyle={styles.action}>97                      <Button.Icon>98                        <Icon99                          icon={id === "preview" ? "logos:expo-icon" : "tabler:brand-apple-filled"}100                          {...stylex.props(id === "preview" && styles.expo)}101                        />102                      </Button.Icon>103                      {id === "preview" ? "Preview on Expo Go" : "Download on App Store"}104                    </Button>105                  </Disclosure.Body>106                </Disclosure.Content>107              </Disclosure>108            </Fragment>109          ))}110        </DisclosureGroup>111      </div>112    </div>113  );114}115export function Controlled() {116  return <NativeReferenceGroup />;117}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Button, Disclosure, DisclosureGroup, Separator } from "@lenso/ui";4import { styles } from "./source.stylex";5export function CustomStyles() {6  return (7    <DisclosureGroup xstyle={styles.custom}>8      <Disclosure value="billing">9        <Disclosure.Heading>10          <Disclosure.Trigger render={<Button variant="ghost" xstyle={styles.trigger} />}>11            Billing12            <Disclosure.Indicator xstyle={styles.muted} />13          </Disclosure.Trigger>14        </Disclosure.Heading>15        <Disclosure.Content>16          <Disclosure.Body xstyle={styles.body}>17            Invoices are issued on the first of each month.18          </Disclosure.Body>19        </Disclosure.Content>20      </Disclosure>21      <Separator xstyle={styles.separator} />22      <Disclosure value="support">23        <Disclosure.Heading>24          <Disclosure.Trigger render={<Button variant="ghost" xstyle={styles.trigger} />}>25            Support26            <Disclosure.Indicator xstyle={styles.muted} />27          </Disclosure.Trigger>28        </Disclosure.Heading>29        <Disclosure.Content>30          <Disclosure.Body xstyle={styles.body}>31            Reach us at [email protected]. Typical response time is under one business day.32          </Disclosure.Body>33        </Disclosure.Content>34      </Disclosure>35    </DisclosureGroup>36  );37}