diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js index ab5c7ff8b3..bbcf0082db 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js @@ -1,45 +1,56 @@ -import React, { memo } from "react"; +import React, { memo, useState } from "react"; import styled from "styled-components"; import { TextInput, Button } from "asc-web-components"; const EditingWrapper = styled.div` -width: 100%; -display: inline-flex; -align-items: center; + width: 100%; + display: inline-flex; + align-items: center; -@media (max-width: 1024px) { -height: 56px; -} -.edit-text { - height: 30px; - font-size: 15px; - outline: 0 !important; - font-weight: bold; - margin: 0; - font-family: 'Open Sans',sans-serif,Arial; - text-align: left; - color: #333333; -} -.edit-button { - margin-left: 8px; - height: 30px; -} + @media (max-width: 1024px) { + height: 56px; + } + .edit-text { + height: 30px; + font-size: 15px; + outline: 0 !important; + font-weight: bold; + margin: 0; + font-family: 'Open Sans',sans-serif,Arial; + text-align: left; + color: #333333; + } + .edit-button { + margin-left: 8px; + height: 30px; + } -.edit-ok-icon { - margin-top: -6px; - width: 16px; - height: 16px; -} + .edit-ok-icon { + margin-top: -6px; + width: 16px; + height: 16px; + } -.edit-cancel-icon { - margin-top: -6px; - width: 14px; - height: 14px; -} + .edit-cancel-icon { + margin-top: -6px; + width: 14px; + height: 14px; + } `; const EditingWrapperComponent = props => { - const { isLoading, itemTitle, okIcon, cancelIcon, renameTitle, onKeyUpUpdateItem, onClickUpdateItem, cancelUpdateItem } = props; + const { itemTitle, okIcon, cancelIcon, renameTitle, onKeyUpUpdateItem, onClickUpdateItem, cancelUpdateItem } = props; + const [loading, setLoading] = useState(false); + + const onUpdate = () => { + setLoading(true); + onClickUpdateItem(); + } + + const onCancel = () => { + setLoading(true); + cancelUpdateItem(); + } return( @@ -52,20 +63,20 @@ const EditingWrapperComponent = props => { isAutoFocussed={true} onChange={renameTitle} onKeyUp={onKeyUpUpdateItem} - isDisabled={isLoading} + isDisabled={loading} />