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

web: Added clickAction property to GroupButton component

Browse Source
This commit is contained in:
Ilya Oleshko 2019-06-10 14:29:51 +03:00
parent 369825607e
commit f05abd2d84
3 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/ASC.Web.Components/example/stories/group-button/base/README.md
View File

@ -27,3 +27,4 @@ Base Button is used for a group action on a page.
| `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state | | `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state |
| `splitted` | `bool` | - | - | `false` | Tells when the button should present a dropdown state with button | | `splitted` | `bool` | - | - | `false` | Tells when the button should present a dropdown state with button |
| `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default | | `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default |
| `clickAction` | `func` | - | - | - | What the button will trigger when clicked |

12
web/ASC.Web.Components/src/components/group-button/index.js
View File

@ -174,10 +174,6 @@ const Caret = styled(Icons.ExpanderDownIcon)`
} }
`; `;
const clickAction = (e) => {
console.log('Button "' + e.target.innerText + '" clicked!');
}
const useOuterClickNotifier = (onOuterClick, ref) => { const useOuterClickNotifier = (onOuterClick, ref) => {
useEffect(() => { useEffect(() => {
const handleClick = (e) => !ref.current.contains(e.target) && onOuterClick(e); const handleClick = (e) => !ref.current.contains(e.target) && onOuterClick(e);
@ -193,7 +189,7 @@ const useOuterClickNotifier = (onOuterClick, ref) => {
} }
const GroupButton = (props) => { const GroupButton = (props) => {
const { text, children, splitted, isDropdown, isCheckbox, opened, disabled, primary } = props; const { text, children, splitted, isDropdown, isCheckbox, opened, disabled, primary, clickAction } = props;
const [isOpen, toggle] = useState(opened); const [isOpen, toggle] = useState(opened);
const ref = useRef(null); const ref = useRef(null);
@ -261,7 +257,8 @@ GroupButton.propTypes = {
splitted: PropTypes.bool, splitted: PropTypes.bool,
isCheckbox: PropTypes.bool, isCheckbox: PropTypes.bool,
isDropdown: PropTypes.bool, isDropdown: PropTypes.bool,
tabIndex: PropTypes.number tabIndex: PropTypes.number,
clickAction: PropTypes.func
}; };
GroupButton.defaultProps = { GroupButton.defaultProps = {
@ -274,7 +271,8 @@ GroupButton.defaultProps = {
splitted: false, splitted: false,
isCheckbox: false, isCheckbox: false,
isDropdown: false, isDropdown: false,
tabIndex: -1 tabIndex: -1,
clickAction: (e) => console.log('Button "' + e.target.innerText + '" clicked!')
}; };
export default GroupButton export default GroupButton