diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/ScenesController.stories.tsx b/packages/flat-components/src/components/ClassroomPage/ScenesController/ScenesController.stories.tsx new file mode 100644 index 00000000000..1662bc4195d --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/ScenesController.stories.tsx @@ -0,0 +1,16 @@ +import { Meta, Story } from "@storybook/react"; +import React from "react"; +import { ScenesController, ScenesControllerProps } from "."; + +const storyMeta: Meta = { + title: "ClassroomPage/ScenesController", + component: ScenesController, +}; + +export default storyMeta; + +export const Overview: Story = args => ; +Overview.args = { + currentScene: 1, + scenesCount: 2, +}; diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/image/add-scene.svg b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/add-scene.svg new file mode 100644 index 00000000000..250e5c79a99 --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/add-scene.svg @@ -0,0 +1,9 @@ + + + 矩形备份 24 + + + + + + \ No newline at end of file diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene-disabled.svg b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene-disabled.svg new file mode 100644 index 00000000000..0e300c97081 --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene-disabled.svg @@ -0,0 +1,9 @@ + + + next-d + + + + + + \ No newline at end of file diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene.svg b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene.svg new file mode 100644 index 00000000000..373677de5fd --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/next-scene.svg @@ -0,0 +1,9 @@ + + + next + + + + + + \ No newline at end of file diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene-disabled.svg b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene-disabled.svg new file mode 100644 index 00000000000..dbd1132cb7f --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene-disabled.svg @@ -0,0 +1,9 @@ + + + previous-d + + + + + + \ No newline at end of file diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene.svg b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene.svg new file mode 100644 index 00000000000..13f13d19350 --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/image/previous-scene.svg @@ -0,0 +1,9 @@ + + + previous + + + + + + \ No newline at end of file diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/index.tsx b/packages/flat-components/src/components/ClassroomPage/ScenesController/index.tsx new file mode 100644 index 00000000000..685fa3cc010 --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/index.tsx @@ -0,0 +1,69 @@ +import "./style.less"; +import addSceneSVG from "./image/add-scene.svg"; +import nextScenesDisabledSVG from "./image/next-scene-disabled.svg"; +import nextScenesSVG from "./image/next-scene.svg"; +import preScenesDisabledSVG from "./image/previous-scene-disabled.svg"; +import preScenesSVG from "./image/previous-scene.svg"; + +import React, { FC, useCallback } from "react"; +import classNames from "classnames"; + +export interface ScenesControllerProps { + addScene: () => void; + preScene: () => void; + nextScene: () => void; + currentSceneIndex: number; + scenesCount: number; + disabled: boolean; +} + +export const ScenesController: FC = ({ + addScene, + preScene, + nextScene, + currentSceneIndex, + scenesCount, + disabled, +}) => { + const isFirstScene = currentSceneIndex === 0; + const isLastScene = currentSceneIndex + 1 === scenesCount; + + const warpOnClick = useCallback( + (onClick: () => void) => { + if (disabled) { + return undefined; + } + return onClick; + }, + [disabled], + ); + + return ( +
+
+
+ add scene +
+
+ previous scene +
+
+ {currentSceneIndex + 1} / {scenesCount} +
+
+ next scene +
+
+
+ ); +}; diff --git a/packages/flat-components/src/components/ClassroomPage/ScenesController/style.less b/packages/flat-components/src/components/ClassroomPage/ScenesController/style.less new file mode 100644 index 00000000000..df2016c09f0 --- /dev/null +++ b/packages/flat-components/src/components/ClassroomPage/ScenesController/style.less @@ -0,0 +1,37 @@ +.scenes-controller-container { + display: flex; + height: 32px; + padding: 0 4px; + border-radius: 4px; + box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%); + background-color: white; + + &.disabled { + opacity: 0.5; + * { + cursor: not-allowed; + } + } +} + +.scenes-controller-btn-list { + display: flex; + flex-direction: row; + align-items: center; + user-select: none; +} + +.scenes-controller-btn { + cursor: pointer; + + &:hover { + background: rgba(33, 35, 36, 0.1); + } +} + +.scenes-controller-info { + margin-left: 8px; + margin-right: 8px; + font-size: 12px; + color: #212324; +} diff --git a/packages/flat-components/src/components/ClassroomPage/index.tsx b/packages/flat-components/src/components/ClassroomPage/index.tsx index 3931eb229a6..204a300a79b 100644 --- a/packages/flat-components/src/components/ClassroomPage/index.tsx +++ b/packages/flat-components/src/components/ClassroomPage/index.tsx @@ -8,3 +8,4 @@ export * from "./TopBar"; export * from "./BigVideoAvatar"; export * from "./SmallVideoAvatar"; export * from "./OneToOneVideoAvatar"; +export * from "./ScenesController";