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

Web: Components: rename main button callback function

Browse Source
This commit is contained in:
DmitrySychugov 2023-05-23 19:21:14 +05:00
parent ea5f959a65
commit 67832c5f52
3 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/components/main-button/README.md
View File

@ -21,25 +21,23 @@ or
<MainButton
text="Button"
isDropdown={false}
clickAction={() => SomeFunction()}
clickActionSecondary={() => SomeFunction()}
onkAction={() => SomeFunction()}
moduleName="people"
/>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ---------------------- | :------------: | :------: | :---------------------------: | :----------: | ------------------------------------------------------------------------ |
| `className` | `string` | - | - | - | Accepts class |
| `clickActionSecondary` | `func` | - | - | - | What the secondary button will trigger when clicked |
| `clickAction` | `func` | - | - | - | What the main button will trigger when clicked |
| `iconName` | `string` | - | - | `PeopleIcon` | Icon inside button |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isDropdown` | `bool` | - | - | `true` | Select a state between two separate buttons or one with a drop-down list |
| `moduleName` | `oneOf` | - | `people`, `mail`, `documents` | - | The name of the module where the button is used |
| `onClick` | `func` | - | - | - | DropDown component click action |
| `opened` | `bool` | - | - | - | Open DropDown |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `text` | `string` | - | - | `Button` | Button text |
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :---------------------------: | :----------: | ------------------------------------------------------------------------ |
| `className` | `string` | - | - | - | Accepts class |
| `onAction` | `func` | - | - | - | What the main button will trigger when clicked |
| `iconName` | `string` | - | - | `PeopleIcon` | Icon inside button |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isDropdown` | `bool` | - | - | `true` | Select a state between two separate buttons or one with a drop-down list |
| `moduleName` | `oneOf` | - | `people`, `mail`, `documents` | - | The name of the module where the button is used |
| `onClick` | `func` | - | - | - | DropDown component click action |
| `opened` | `bool` | - | - | - | Open DropDown |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `text` | `string` | - | - | `Button` | Button text |

8
packages/components/main-button/index.js
View File

@ -9,7 +9,7 @@ import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
import TriangleNavigationDownReactSvgUrl from "PUBLIC_DIR/images/triangle.navigation.down.react.svg?url";
const MainButton = (props) => {
const { text, model, isDropdown, isDisabled, clickAction } = props;
const { text, model, isDropdown, isDisabled, onAction } = props;
const { id, ...rest } = props;
const ref = useRef();
@ -32,7 +32,7 @@ const MainButton = (props) => {
const onMainButtonClick = (e) => {
if (!isDisabled) {
if (!isDropdown) {
clickAction && clickAction(e);
onAction && onAction(e);
} else {
toggle(e, !isOpen);
}
@ -79,9 +79,7 @@ MainButton.propTypes = {
/** Activates a drop-down list for MainButton */
isDropdown: PropTypes.bool,
/** Sets a callback function that is triggered when the button is clicked */
clickAction: PropTypes.func,
/** Sets a callback function that is triggered when the secondary button is clicked */
clickActionSecondary: PropTypes.func,
onAction: PropTypes.func,
/** Opens DropDown */
opened: PropTypes.bool, //TODO: Make us whole
/** Accepts class */

19
packages/components/main-button/main-button.stories.js
View File

@ -6,23 +6,13 @@ export default {
title: "Components/MainButton",
component: MainButton,
parameters: { docs: { description: { component: "Components/MainButton" } } },
clickAction: { action: "clickAction" },
clickActionSecondary: { action: "clickActionSecondary" },
onAction: { action: "onAction" },
clickItem: { action: "clickItem", table: { disable: true } },
};
const Template = ({
clickAction,
clickActionSecondary,
clickItem,
...args
}) => {
const Template = ({ onAction, clickItem, ...args }) => {
const clickMainButtonHandler = (e, credentials) => {
clickAction(e, credentials);
};
const clickSecondaryButtonHandler = (e, credentials) => {
clickActionSecondary(e, credentials);
onAction(e, credentials);
};
const itemsModel = [
@ -76,8 +66,7 @@ const Template = ({
<div style={{ width: "280px" }}>
<MainButton
{...args}
clickAction={clickMainButtonHandler}
clickActionSecondary={clickSecondaryButtonHandler}
onAction={clickMainButtonHandler}
model={itemsModel}
></MainButton>
</div>