IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: fixed mobile main button docs

Browse Source
This commit is contained in:
DmitrySychugov 2023-05-31 13:55:27 +05:00
parent 3fccdff213
commit 5cd2dee957
2 changed files with 98 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/components/main-button-mobile/main-button-mobile-docs.mdx Normal file
View File

@ -0,0 +1,26 @@
import {
Meta,
Story,
ArgsTable,
Canvas,
Controls,
} from "@storybook/addon-docs/blocks";
import * as stories from "./main-button-mobile.stories.js";
import MainButtonMobile from "./index.js";
<Meta
title="Components/MainButtonMobile"
component={MainButtonMobile}
/>
# MainButtonMobile
<Canvas>
<Story story={stories.Default} />
</Canvas>
## Properties
<Controls />

136
packages/components/main-button-mobile/main-button-mobile.stories.js
View File

@ -5,14 +5,68 @@ import MobileActionsFolderReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.fol
import MobileActionsRemoveReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.remove.react.svg?url";
import MobileStartReactSvgUrl from "PUBLIC_DIR/images/mobile.star.react.svg?url";
import MobileMainButtonDocs from "./main-button-mobile-docs.mdx";
export default {
title: "Components/MainButtonMobile",
component: MainButtonMobile,
tags: ["autodocs"],
parameters: {
docs: { description: { component: "Components/MainButtonMobile" } },
docs: {
page: MobileMainButtonDocs,
},
},
};
const actionOptions = [
{
key: "1",
label: "New document",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "2",
label: "New presentation",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "3",
label: "New spreadsheet",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "4",
label: "New folder",
icon: MobileActionsFolderReactSvgUrl,
},
];
const buttonOptions = [
{
key: "1",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
{
key: "2",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
{
key: "3",
label: "Import point",
isSeparator: true,
},
{
key: "4",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
];
const Template = ({ ...args }) => {
const maxUploads = 10;
const maxOperations = 7;
@ -82,29 +136,6 @@ const Template = ({ ...args }) => {
const uploadPercent = (state.uploads / maxUploads) * 100;
const operationPercent = (state.operations / maxOperations) * 100;
const actionOptions = [
{
key: "1",
label: "New document",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "2",
label: "New presentation",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "3",
label: "New spreadsheet",
icon: MobileActionsFolderReactSvgUrl,
},
{
key: "4",
label: "New folder",
icon: MobileActionsFolderReactSvgUrl,
},
];
const progressOptions = [
{
key: "1",
@ -127,47 +158,24 @@ const Template = ({ ...args }) => {
},
];
const buttonOptions = [
{
key: "1",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
{
key: "2",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
{
key: "3",
label: "Import point",
isSeparator: true,
},
{
key: "4",
label: "Import point",
icon: MobileStartReactSvgUrl,
onClick: () => setIsOpenButton(false),
},
];
return (
<MainButtonMobile
{...args}
style={{ position: "absolute", bottom: "26px", right: "44px" }}
actionOptions={actionOptions}
dropdownStyle={{ right: "104px", bottom: "55px" }}
progressOptions={progressOptions}
buttonOptions={buttonOptions}
onUploadClick={onUploadClick}
withButton={true}
isOpenButton={isOpenButton}
title="Upload"
percent={uploadPercent}
opened={opened}
/>
<div style={{ width: "600px", height: "500px" }}>
<MainButtonMobile
{...args}
style={{ position: "absolute", bottom: "26px", right: "44px" }}
actionOptions={actionOptions}
dropdownStyle={{ position: "absolute", right: "60px", bottom: "25px" }}
progressOptions={progressOptions}
buttonOptions={buttonOptions}
onUploadClick={onUploadClick}
withButton={true}
isOpenButton={isOpenButton}
isDefaultMode={false}
title="Upload"
percent={uploadPercent}
opened={opened}
/>
</div>
);
};