-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
140 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,4 @@ | |
| title: V3 | ||
| --- | ||
|
|
||
| <StackflowExample name="demo/index" /> | ||
| <StackflowExample name="demo-activity" /> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,19 @@ | ||
| { | ||
| "name": "app-screen", | ||
| "dependencies": [ | ||
| "@seed-design/react", | ||
| "@seed-design/stackflow" | ||
| ], | ||
| "registries": [ | ||
| { | ||
| "name": "app-screen.tsx", | ||
| "type": "ui", | ||
| "content": "\"use client\";\n\nimport {\n IconChevronLeftLine,\n IconXmarkLine,\n} from \"@daangn/react-monochrome-icon\";\nimport {\n AppBar as SeedAppBar,\n AppScreen as SeedAppScreen,\n} from \"@seed-design/stackflow\";\nimport { useActions, useActivity } from \"@stackflow/react\";\nimport { forwardRef, useCallback } from \"react\";\n\nexport type AppBarProps = SeedAppBar.RootProps;\n\nexport type AppScreenProps = SeedAppScreen.RootProps;\n\nexport const AppBar = SeedAppBar.Root;\n\nexport const Left = SeedAppBar.Left;\n\nexport const Right = SeedAppBar.Right;\n\nexport const Title = SeedAppBar.Title;\n\nexport const IconButton = SeedAppBar.IconButton;\n\nexport const BackButton = forwardRef<\n HTMLButtonElement,\n SeedAppBar.IconButtonProps\n>(({ children = <IconChevronLeftLine />, onClick, ...otherProps }, ref) => {\n const activity = useActivity();\n const actions = useActions();\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n },\n [actions],\n );\n\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n return (\n <SeedAppBar.IconButton\n ref={ref}\n aria-label=\"Go Back\"\n type=\"button\"\n onClick={handleOnClick}\n {...otherProps}\n >\n {children}\n </SeedAppBar.IconButton>\n );\n});\nBackButton.displayName = \"BackButton\";\n\nexport const CloseButton = forwardRef<\n HTMLButtonElement,\n SeedAppBar.IconButtonProps\n>(({ children = <IconXmarkLine />, onClick, ...otherProps }, ref) => {\n const activity = useActivity();\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n\n if (!e.defaultPrevented) {\n // you can do something here\n }\n },\n [],\n );\n\n const isRoot = !activity || activity.isRoot;\n\n if (!isRoot) {\n return null;\n }\n\n return (\n <IconButton\n ref={ref}\n aria-label=\"Close\"\n type=\"button\"\n onClick={handleOnClick}\n {...otherProps}\n >\n {children}\n </IconButton>\n );\n});\nCloseButton.displayName = \"CloseButton\";\n\nexport const AppScreen = forwardRef<HTMLDivElement, AppScreenProps>(\n ({ children, ...otherProps }, ref) => {\n return (\n <SeedAppScreen.Root ref={ref} {...otherProps}>\n <SeedAppScreen.Dim />\n <SeedAppScreen.Layer>{children}</SeedAppScreen.Layer>\n <SeedAppScreen.Edge />\n </SeedAppScreen.Root>\n );\n },\n);\nAppScreen.displayName = \"AppScreen\";\n" | ||
| "content": "\"use client\";\n\nimport { PullToRefresh } from \"@seed-design/react/primitive\";\nimport { AppScreen as SeedAppScreen } from \"@seed-design/stackflow\";\nimport { useActions } from \"@stackflow/react\";\nimport { forwardRef } from \"react\";\nimport { ProgressCircle } from \"../ui/progress-circle\";\n\nexport interface AppScreenProps extends SeedAppScreen.RootProps {}\n\nexport const AppScreen = forwardRef<HTMLDivElement, AppScreenProps>(\n ({ children, onSwipeBackEnd, ...otherProps }, ref) => {\n const { pop } = useActions();\n\n return (\n <SeedAppScreen.Root\n ref={ref}\n onSwipeBackEnd={({ swiped }) => {\n if (swiped) {\n pop();\n }\n onSwipeBackEnd?.({ swiped });\n }}\n {...otherProps}\n >\n <SeedAppScreen.Dim />\n {children}\n <SeedAppScreen.Edge />\n </SeedAppScreen.Root>\n );\n },\n);\nAppScreen.displayName = \"AppScreen\";\n\nexport interface AppScreenContentProps extends SeedAppScreen.LayerProps {\n ptr?: boolean;\n\n onPtrReady?: () => void;\n\n onPtrRefresh?: () => Promise<void>;\n}\n\nexport const AppScreenContent = forwardRef<\n HTMLDivElement,\n AppScreenContentProps\n>(({ children, ptr, onPtrReady, onPtrRefresh, ...otherProps }, ref) => {\n if (!ptr) {\n return (\n <SeedAppScreen.Layer ref={ref} {...otherProps}>\n {children}\n </SeedAppScreen.Layer>\n );\n }\n\n return (\n <PullToRefresh.Root\n asChild\n onPtrReady={onPtrReady}\n onPtrRefresh={onPtrRefresh}\n >\n <SeedAppScreen.Layer ref={ref} {...otherProps}>\n <PullToRefresh.Indicator>\n {(props) => <ProgressCircle tone=\"brand\" {...props} />}\n </PullToRefresh.Indicator>\n <PullToRefresh.Content asChild>{children}</PullToRefresh.Content>\n </SeedAppScreen.Layer>\n </PullToRefresh.Root>\n );\n});\n" | ||
| }, | ||
| { | ||
| "name": "app-bar.tsx", | ||
| "type": "ui", | ||
| "content": "\"use client\";\n\nimport {\n IconChevronLeftLine,\n IconXmarkLine,\n} from \"@daangn/react-monochrome-icon\";\nimport { Stack } from \"@seed-design/react\";\nimport {\n AppBar as SeedAppBar,\n type AppBarIconButtonProps,\n} from \"@seed-design/stackflow\";\nimport { useActions, useActivity } from \"@stackflow/react\";\nimport * as React from \"react\";\nimport { forwardRef } from \"react\";\n\nexport interface AppBarProps extends SeedAppBar.RootProps {}\n\nexport const AppBar = SeedAppBar.Root;\n\nexport interface AppBarLeftProps extends SeedAppBar.LeftProps {}\n\nexport const AppBarLeft = SeedAppBar.Left;\n\nexport interface AppBarRightProps extends SeedAppBar.RightProps {}\n\nexport const AppBarRight = SeedAppBar.Right;\n\nexport interface AppBarMainProps extends Omit<SeedAppBar.MainProps, \"asChild\"> {\n /**\n * The title of the app bar.\n * If children is provided as ReactElement, this prop will be ignored.\n */\n title?: string;\n\n /**\n * The subtitle of the app bar.\n * If children is provided as ReactElement, this prop will be ignored.\n */\n subtitle?: string;\n}\n\nexport const AppBarMain = forwardRef<HTMLDivElement, AppBarMainProps>(\n ({ title, subtitle, children, ...otherProps }, ref) => {\n if (React.isValidElement(children)) {\n return (\n <SeedAppBar.Main {...otherProps} ref={ref}>\n {children}\n </SeedAppBar.Main>\n );\n }\n\n return (\n <SeedAppBar.Main\n layout={subtitle ? \"withSubtitle\" : \"titleOnly\"}\n {...otherProps}\n ref={ref}\n >\n <Stack overflowX=\"auto\">\n <SeedAppBar.Title>{children ?? title}</SeedAppBar.Title>\n {subtitle ? (\n <SeedAppBar.Subtitle>{subtitle}</SeedAppBar.Subtitle>\n ) : null}\n </Stack>\n </SeedAppBar.Main>\n );\n },\n);\nAppBarMain.displayName = \"AppBarMain\";\n\nexport const AppBarIconButton = SeedAppBar.IconButton;\n\nexport const AppBarBackButton = forwardRef<\n HTMLButtonElement,\n AppBarIconButtonProps\n>(({ children = <IconChevronLeftLine />, onClick, ...otherProps }, ref) => {\n const activity = useActivity();\n const actions = useActions();\n\n const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n };\n\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n return (\n <SeedAppBar.IconButton\n ref={ref}\n aria-label=\"Go Back\"\n type=\"button\"\n onClick={handleOnClick}\n {...otherProps}\n >\n {children}\n </SeedAppBar.IconButton>\n );\n});\nAppBarBackButton.displayName = \"AppBarBackButton\";\n\nexport const AppBarCloseButton = forwardRef<\n HTMLButtonElement,\n AppBarIconButtonProps\n>(({ children = <IconXmarkLine />, onClick, ...otherProps }, ref) => {\n const activity = useActivity();\n\n const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n\n if (!e.defaultPrevented) {\n // you can do something here\n }\n };\n\n const isRoot = !activity || activity.isRoot;\n\n if (!isRoot) {\n return null;\n }\n\n return (\n <AppBarIconButton\n ref={ref}\n aria-label=\"Close\"\n type=\"button\"\n onClick={handleOnClick}\n {...otherProps}\n >\n {children}\n </AppBarIconButton>\n );\n});\nAppBarCloseButton.displayName = \"AppBarCloseButton\";\n" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters