From 09474e8be901cafdf4d11663c5f7d2b1a37030cb Mon Sep 17 00:00:00 2001 From: Daniil Senkiv Date: Thu, 19 Mar 2020 15:05:57 +0300 Subject: [PATCH 1/4] People.Client: replace FilterInput from asc-web-components to asc-web-common, delete asc-web-components FilterInput --- .../pages/Home/Section/Filter/index.js | 3 +- .../src/components/filter-input/README.md | 46 -- .../components/filter-input/close-button.js | 32 - .../components/filter-input/filter-block.js | 311 ---------- .../components/filter-input/filter-button.js | 30 - .../filter-input/filter-input.stories.js | 110 ---- .../filter-input/filter-input.test.js | 56 -- .../components/filter-input/hide-filter.js | 130 ---- .../src/components/filter-input/index.js | 555 ------------------ .../components/filter-input/sort-combobox.js | 166 ------ web/ASC.Web.Components/src/index.js | 1 - 11 files changed, 1 insertion(+), 1439 deletions(-) delete mode 100644 web/ASC.Web.Components/src/components/filter-input/README.md delete mode 100644 web/ASC.Web.Components/src/components/filter-input/close-button.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/filter-block.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/filter-button.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/filter-input.stories.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/filter-input.test.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/hide-filter.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/index.js delete mode 100644 web/ASC.Web.Components/src/components/filter-input/sort-combobox.js diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js index 5f33bb7771..22cdc31fe0 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js @@ -1,13 +1,12 @@ import React from "react"; import { connect } from "react-redux"; -import { FilterInput } from "asc-web-components"; import { fetchPeople } from "../../../../../store/people/actions"; import find from "lodash/find"; import result from "lodash/result"; import { withTranslation } from "react-i18next"; import { withRouter } from "react-router"; import { getFilterByLocation } from "../../../../../helpers/converters"; -import { store } from 'asc-web-common'; +import { store, FilterInput } from 'asc-web-common'; const { isAdmin } = store.auth.selectors; const getEmployeeStatus = filterValues => { diff --git a/web/ASC.Web.Components/src/components/filter-input/README.md b/web/ASC.Web.Components/src/components/filter-input/README.md deleted file mode 100644 index dbbb2436e2..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# FilterInput - -Used to filter tables - -### Usage - -```js -import { FilterInput } from "asc-web-components"; -``` - -```jsx - [ - { - key: "filter-example", - group: "filter-example", - label: "example group", - isHeader: true - }, - { key: "0", group: "filter-example", label: "Test" } - ]} - getSortData={() => [ - { key: "name", label: "Name", default: true }, - { key: "surname", label: "Surname", default: true } - ]} - onFilter={result => { - console.log(result); - }} -/> -``` - -### Properties - -| Props | Type | Required | Values | Default | Description | -| -------------------- | :------------: | :------: | :-----------------------------: | :-----: | ------------------------------------------------------------------------------------------------------ | -| `className` | `string` | - | - | - | Accepts class | -| `id` | `string` | - | - | - | Used as HTML `id` property | -| `id` | `string` | - | - | - | Accepts id | -| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) | -| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` | -| `placeholder` | `string` | - | - | - | Placeholder text for the input | -| `scale` | `bool` | - | - | - | Indicates the input field has scale | -| `selectedFilterData` | `object` | - | - | - | Selected filter data | -| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. | -| `style` | `obj`, `array` | - | - | - | Accepts css style | -| `value` | `string` | - | - | - | Value of the input | diff --git a/web/ASC.Web.Components/src/components/filter-input/close-button.js b/web/ASC.Web.Components/src/components/filter-input/close-button.js deleted file mode 100644 index 06e552c145..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/close-button.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import IconButton from '../icon-button'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -const StyledCloseButton = styled.div` - margin-left: 7px; - margin-top: -1px; -`; -const CloseButton = props => { - //console.log("CloseButton render"); - return ( - - - - ); -}; -CloseButton.propTypes = { - isDisabled: PropTypes.bool, - onClick: PropTypes.func, - className: PropTypes.string -} -export default CloseButton \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/filter-input/filter-block.js b/web/ASC.Web.Components/src/components/filter-input/filter-block.js deleted file mode 100644 index 836acab5c3..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/filter-block.js +++ /dev/null @@ -1,311 +0,0 @@ -import React from 'react'; -import styled, { css } from 'styled-components'; -import FilterButton from './filter-button'; -import HideFilter from './hide-filter'; -import throttle from 'lodash/throttle'; -import ComboBox from '../combobox'; -import CloseButton from './close-button'; -import isEqual from 'lodash/isEqual'; -import PropTypes from 'prop-types'; - -const StyledFilterBlock = styled.div` - display: flex; - align-items: center; -`; - -const StyledFilterItem = styled.div` - display: ${props => props.block ? 'flex' : 'inline-block'}; - margin-bottom: ${props => props.block ? '8px' : '0'}; - position: relative; - height: 100%; - margin-right: 2px; - border: 1px solid #ECEEF1; - border-radius: 3px; - background-color: #F8F9F9; - padding-right: 22px; - - font-weight: 600; - font-size: 13px; - line-height: 15px; - box-sizing: border-box; - color: #555F65; - - &:last-child{ - margin-bottom: 0; - } -`; - -const StyledFilterItemContent = styled.div` - display: flex; - padding: 5px 4px 2px 7px; - width: 100%; - user-select: none; - color: #333; - ${props => - props.isOpen && !props.isDisabled && - css` - background: #ECEEF1; - `} - ${props => - !props.isDisabled && - css` - &:active{ - background: #ECEEF1; - } - `} -`; - -const StyledCloseButtonBlock = styled.div` - display: flex; - cursor: ${props => - props.isDisabled || !props.isClickable ? "default" : "pointer"}; - align-items: center; - position: absolute; - height: 100%; - width: 25px; - border-left: 1px solid #ECEEF1; - right: 0; - top: 0; - background-color: #F8F9F9; - ${props => - !props.isDisabled && - css` - &:active{ - background: #ECEEF1; - svg path:first-child { - fill: #A3A9AE; - } - } - `} -`; -const StyledComboBox = styled(ComboBox)` - display: inline-block; - background: transparent; - max-width: 185px; - cursor: pointer; - vertical-align: middle; - margin-top: -2px; - > div:first-child{ - width: auto; - padding-left: 4px; - } - > div:last-child{ - max-width: 220px; - } - .combo-button-label { - color: #333; - } -`; -const StyledFilterName = styled.span` - line-height: 18px; - margin-left: 5px; -`; - -class FilterItem extends React.Component { - constructor(props) { - super(props); - - this.state = { - id: this.props.id, - isOpen: false - }; - } - - onSelect = (option) => { - this.props.onSelectFilterItem(null, { - key: option.group + "_" + option.key, - label: option.label, - group: option.group, - inSubgroup: !!option.inSubgroup - }); - } - onClick = () => { - !this.props.isDisabled && this.props.onClose(this.props.id); - } - - render() { - return ( - - - {this.props.groupLabel}: - {this.props.groupItems.length > 1 ? - { - this.setState({ - isOpen: isOpen - }) - }} - dropDownMaxHeight={200} - > - : {this.props.label} - } - - - - - - - - ); - } -} -FilterItem.propTypes = { - id: PropTypes.string, - opened: PropTypes.bool, - isDisabled: PropTypes.bool, - block: PropTypes.bool, - groupItems: PropTypes.array, - label: PropTypes.string, - groupLabel: PropTypes.string, - onClose: PropTypes.func, - onSelectFilterItem: PropTypes.func -} - -class FilterBlock extends React.Component { - constructor(props) { - super(props); - - this.state = { - hideFilterItems: this.props.hideFilterItems || [], - openFilterItems: this.props.openFilterItems || [] - }; - - this.throttledRender = throttle(this.onRender, 100); - - } - onDeleteFilterItem = (key) => { - this.props.onDeleteFilterItem(key); - } - getFilterItems = () => { - const _this = this; - let result = []; - let openItems = []; - let hideItems = []; - if (this.state.openFilterItems.length > 0) { - openItems = this.state.openFilterItems.map(function (item) { - return - - }); - } - if (this.state.hideFilterItems.length > 0) { - var open = false; - var hideFilterItemsList = this.state.hideFilterItems.map(function (item) { - open = item.key.indexOf('_-1') == -1 ? false : true - return - - }) - hideItems.push( - - { - hideFilterItemsList - } - - ); - } - result = hideItems.concat(openItems); - return result; - } - getData = () => { - const _this = this; - const d = this.props.getFilterData(); - let result = []; - d.forEach(element => { - if (!element.inSubgroup) { - element.onClick = !element.isSeparator && !element.isHeader && !element.disabled ? ((e) => _this.props.onClickFilterItem(e, element)) : undefined; - element.key = element.group != element.key ? element.group + "_" + element.key : element.key; - if (element.subgroup != undefined) { - if (d.findIndex(x => x.group === element.subgroup) == -1) element.disabled = true; - } - result.push(element); - } - }); - return result; - } - componentDidUpdate() { - this.throttledRender(); - } - onRender = () => { - this.props.onRender(); - } - shouldComponentUpdate(nextProps, nextState) { - - if (!isEqual(this.props, nextProps)) { - if (!isEqual(this.props.hideFilterItems, nextProps.hideFilterItems) || !isEqual(this.props.openFilterItems, nextProps.openFilterItems)) { - this.setState({ - hideFilterItems: nextProps.hideFilterItems, - openFilterItems: nextProps.openFilterItems - }); - return false; - } - return true; - } - if (this.props.isResizeUpdate) { - return true; - } - return !isEqual(this.state, nextState); - } - render() { - const _this = this; - const filterItems = this.getFilterItems(); - const filterData = this.props.getFilterData(); - return ( - <> - - {filterItems} - - {filterData.length > 0 && } - - ); - } -} -FilterBlock.propTypes = { - iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - isDisabled: PropTypes.bool, - isResizeUpdate: PropTypes.bool, - hideFilterItems: PropTypes.array, - openFilterItems: PropTypes.array, - onRender: PropTypes.func, - onDeleteFilterItem: PropTypes.func, - getFilterData: PropTypes.func -} - -export default FilterBlock; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/filter-input/filter-button.js b/web/ASC.Web.Components/src/components/filter-input/filter-button.js deleted file mode 100644 index 6c5216dabe..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/filter-button.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import ContextMenuButton from '../context-menu-button'; -import PropTypes from 'prop-types'; - -class FilterButton extends React.PureComponent { - render() { - //console.log('render FilterButton) - return ( - - ) - } -} -FilterButton.propTypes = { - id: PropTypes.string, - iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - isDisabled: PropTypes.bool, - getData: PropTypes.func -} -export default FilterButton \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/filter-input/filter-input.stories.js b/web/ASC.Web.Components/src/components/filter-input/filter-input.stories.js deleted file mode 100644 index ad08d0a5aa..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/filter-input.stories.js +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import { StringValue } from 'react-values'; -import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react'; -import withReadme from 'storybook-readme/with-readme'; -import Readme from './README.md'; -import FilterInput from '.'; -import Button from '../button'; -import Section from '../../../.storybook/decorators/section'; - -const sizeOptions = ['base', 'middle', 'big', 'huge']; - -function getData() { - return [ - { key: 'filter-status', group: 'filter-status', label: 'Status', isHeader: true }, - { key: '0', group: 'filter-status', label: 'Active' }, - { key: '1', group: 'filter-status', label: 'Disabled' }, - { key: 'filter-type', group: 'filter-type', label: 'Type', isHeader: true }, - { key: '0', group: 'filter-type', label: 'Folders' }, - { key: '1', group: 'filter-type', label: 'Employee' }, - { key: 'filter-test', group: 'filter-test', label: 'Test', isHeader: true }, - { key: '0', group: 'filter-test', label: 'test1' }, - { key: '1', group: 'filter-test', label: 'test2' }, - { key: 'filter-other', group: 'filter-other', label: 'Other', isHeader: true }, - { key: '0', group: 'filter-other', subgroup: 'filter-groups', defaultSelectLabel: 'Select', label: 'Groups' }, - { key: '0', inSubgroup: true, group: 'filter-groups', label: 'Administration'}, - { key: '1', inSubgroup: true, group: 'filter-groups', label: 'Public Relations'} - ]; - } -function getSortData() { - return [ - {key: 'name', label: 'Name', default: true}, - {key: 'surname', label: 'Surname', default: true} - ]; -} - -class FilterStory extends React.Component { - constructor(props) { - super(props); - this.state = { - selectedFilterData: { - inputValue: "text", - filterValues: [ - {key: "1", group: "filter-status"} - ] - } - }; - this.buttonClick = this.buttonClick.bind(this); - } - buttonClick(){ - this.setState({ - selectedFilterData: { - filterValues: [ - {key: "-1", group: "filter-groups"} - ], - sortDirection: "asc", - sortId: "surname", - inputValue: "text 123" - } - }); - } - render(){ - return( -
- { - action('onChange')(e); - } - } - > - {({ value, set }) => ( -
-
-
-
- {console.log(result)}} - value={value} - selectedFilterData={this.state.selectedFilterData} - onChange={e => { - set(e.target.value); - }} - /> -
-
- )} - -
- ) - } -} - -storiesOf('Components|Filter', module) - .addDecorator(withKnobs) - .addDecorator(withReadme(Readme)) - .add('base', () => ( - - )); \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/filter-input/filter-input.test.js b/web/ASC.Web.Components/src/components/filter-input/filter-input.test.js deleted file mode 100644 index 27d440568f..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/filter-input.test.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import FilterInput from '.'; - -describe('', () => { - it('renders without error', () => { - const wrapper = mount( - [{ key: 'filter-example', group: 'filter-example', label: 'example group', isHeader: true }, { key: '0', group: 'filter-example', label: 'Test' }]} - getSortData={() => [{ key: 'name', label: 'Name' }, { key: 'surname', label: 'Surname' }]} - onFilter={jest.fn()} - /> - ); - - expect(wrapper).toExist(); - }); - - it('accepts id', () => { - const wrapper = mount( - [{ key: 'filter-example', group: 'filter-example', label: 'example group', isHeader: true }, { key: '0', group: 'filter-example', label: 'Test' }]} - getSortData={() => [{ key: 'name', label: 'Name' }, { key: 'surname', label: 'Surname' }]} - onFilter={jest.fn()} - id="testId" - /> - ); - - expect(wrapper.prop('id')).toEqual('testId'); - }); - - it('accepts className', () => { - const wrapper = mount( - [{ key: 'filter-example', group: 'filter-example', label: 'example group', isHeader: true }, { key: '0', group: 'filter-example', label: 'Test' }]} - getSortData={() => [{ key: 'name', label: 'Name' }, { key: 'surname', label: 'Surname' }]} - onFilter={jest.fn()} - className="test" - /> - ); - - expect(wrapper.prop('className')).toEqual('test'); - }); - - it('accepts style', () => { - const wrapper = mount( - [{ key: 'filter-example', group: 'filter-example', label: 'example group', isHeader: true }, { key: '0', group: 'filter-example', label: 'Test' }]} - getSortData={() => [{ key: 'name', label: 'Name' }, { key: 'surname', label: 'Surname' }]} - onFilter={jest.fn()} - style={{ color: 'red' }} - /> - ); - - expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red'); - }); -}); diff --git a/web/ASC.Web.Components/src/components/filter-input/hide-filter.js b/web/ASC.Web.Components/src/components/filter-input/hide-filter.js deleted file mode 100644 index ae7fc76252..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/hide-filter.js +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { Icons } from "../icons"; -import DropDown from "../drop-down"; -import { handleAnyClick } from "../../utils/event"; -import PropTypes from 'prop-types'; - -const Caret = styled.div` - width: 7px; - position: absolute; - right: 6px; - transform: ${props => (props.isOpen ? "rotate(180deg)" : "rotate(0)")}; - top: ${props => (props.isOpen ? "2px" : "0")}; -`; - -const StyledHideFilterButton = styled.div` - box-sizing: border-box; - display: flex; - position: relative; - align-items: center; - font-weight: 600; - font-size: 16px; - height: 100%; - border: 1px solid #eceef1; - border-radius: 3px; - background-color: #f8f9f9; - padding: 0 20px 0 9px; - margin-right: 2px; - cursor: ${props => (props.isDisabled ? "default" : "pointer")}; - font-family: Open Sans; - font-style: normal; - - :hover { - border-color: ${props => (props.isDisabled ? "#ECEEF1" : "#A3A9AE")}; - } - :active { - background-color: ${props => (props.isDisabled ? "#F8F9F9" : "#ECEEF1")}; - } -`; -const StyledHideFilter = styled.div` - display: inline-block; - height: 100%; -`; -const DropDownStyle = styled.div` - .drop-down { - padding: 16px; - } - position: relative; -`; - -class HideFilter extends React.Component { - constructor(props) { - super(props); - - this.ref = React.createRef(); - this.dropDownRef = React.createRef(); - this.state = { - popoverOpen: this.props.open - }; - } - - onClick = (state, e) => { - if (!state && e && this.dropDownRef.current.contains(e.target)) { - return; - } - if (!this.props.isDisabled) { - this.setState({ - popoverOpen: state - }); - } - }; - - handleClick = e => { - this.state.popoverOpen && - !this.dropDownRef.current.firstElementChild.contains(e.target) && - this.onClick(false); - }; - - componentWillUnmount() { - handleAnyClick(false, this.handleClick); - } - - componentDidUpdate(prevState) { - if (this.state.popoverOpen !== prevState.popoverOpen) { - handleAnyClick(this.state.popoverOpen, this.handleClick); - } - } - - render() { - //console.log("HideFilter render"); - return ( - - - {this.props.count} - - - - - - - - {this.props.children} - - - - ); - } -} -HideFilter.propTypes = { - children: PropTypes.any, - open: PropTypes.bool, - isDisabled: PropTypes.bool, - count: PropTypes.number -} -export default HideFilter; diff --git a/web/ASC.Web.Components/src/components/filter-input/index.js b/web/ASC.Web.Components/src/components/filter-input/index.js deleted file mode 100644 index e79358eced..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/index.js +++ /dev/null @@ -1,555 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import SearchInput from '../search-input'; -import isEqual from 'lodash/isEqual'; -import throttle from 'lodash/throttle'; -import FilterBlock from './filter-block'; -import SortComboBox from './sort-combobox'; -import { mobile } from '../../utils/device'; -import map from 'lodash/map'; -import clone from 'lodash/clone'; - -const StyledFilterInput = styled.div` - width: 100%; - min-width: 255px; - &:after { - content: " "; - display: block; - height: 0; - clear: both; - visibility: hidden; - } -`; -const StyledSearchInput = styled.div` - display: block; - float: left; - width: calc(100% - 140px); - @media ${mobile} { - width: calc(100% - 58px); - } - - .search-input-block { - & > input { - height: 30px; - } - } -`; -const StyledFilterBlock = styled.div` - display: flex; - - .filter-button { - - svg { - path:not(:first-child) { - stroke: #A3A9AE; - } - } - - stroke: #A3A9AE; - div:active { - svg path:first-child { - fill: #ECEEF1; - stroke: #A3A9AE; - } - } - div:first-child:hover { - svg path:not(:first-child) { - stroke: #A3A9AE; - } - } - } - -`; -const cloneObjectsArray = function (props) { - return map(props, clone); -} -const convertToInternalData = function (fullDataArray, inputDataArray) { - const filterItems = []; - for (let i = 0; i < inputDataArray.length; i++) { - let filterValue = fullDataArray.find(x => ((x.key === inputDataArray[i].key.replace(inputDataArray[i].group + "_", '')) && x.group === inputDataArray[i].group && !x.inSubgroup)); - if (filterValue) { - inputDataArray[i].key = inputDataArray[i].group + "_" + inputDataArray[i].key; - inputDataArray[i].label = filterValue.label; - inputDataArray[i].groupLabel = !fullDataArray.inSubgroup ? fullDataArray.find(x => (x.group === inputDataArray[i].group)).label : inputDataArray[i].groupLabel; - filterItems.push(inputDataArray[i]); - } else { - filterValue = fullDataArray.find(x => ((x.key === inputDataArray[i].key.replace(inputDataArray[i].group + "_", '')) && x.group === inputDataArray[i].group && x.inSubgroup)); - if (filterValue) { - inputDataArray[i].key = inputDataArray[i].group + "_" + inputDataArray[i].key; - inputDataArray[i].label = filterValue.label; - inputDataArray[i].groupLabel = fullDataArray.find(x => (x.subgroup === inputDataArray[i].group)).label; - filterItems.push(inputDataArray[i]); - } else { - filterValue = fullDataArray.find(x => ((x.subgroup === inputDataArray[i].group))); - if (filterValue) { - const subgroupItems = fullDataArray.filter(t => t.group === filterValue.subgroup); - if (subgroupItems.length > 1) { - inputDataArray[i].key = inputDataArray[i].group + "_-1"; - inputDataArray[i].label = filterValue.defaultSelectLabel; - inputDataArray[i].groupLabel = fullDataArray.find(x => (x.subgroup === inputDataArray[i].group)).label; - filterItems.push(inputDataArray[i]); - } else if (subgroupItems.length === 1) { - - const selectFilterItem = { - key: subgroupItems[0].group + "_" + subgroupItems[0].key, - group: subgroupItems[0].group, - label: subgroupItems[0].label, - groupLabel: fullDataArray.find(x => x.subgroup === subgroupItems[0].group).label, - inSubgroup: true - }; - filterItems.push(selectFilterItem); - } - } - } - } - } - return filterItems; -} - -class FilterInput extends React.Component { - constructor(props) { - super(props); - - this.isResizeUpdate = false; - this.minWidth = 190; - - function getDefaultFilterData() { - const filterData = props.getFilterData(); - const filterItems = []; - const selectedFilterData = cloneObjectsArray(props.selectedFilterData.filterValues); - selectedFilterData.forEach(defaultFilterValue => { - const filterValue = filterData.find(x => ((x.key === defaultFilterValue.key.replace(defaultFilterValue.group + "_", '')) && x.group === defaultFilterValue.group)); - let groupLabel = ''; - - const groupFilterItem = filterData.find(x => (x.key === defaultFilterValue.group)); - if (groupFilterItem != undefined) { - groupLabel = groupFilterItem.label; - } else { - const subgroupFilterItem = filterData.find(x => (x.subgroup === defaultFilterValue.group)) - if (subgroupFilterItem != undefined) { - groupLabel = subgroupFilterItem.label; - } - } - - if (filterValue != undefined) { - defaultFilterValue.key = defaultFilterValue.group + "_" + defaultFilterValue.key; - defaultFilterValue.label = filterValue.label; - defaultFilterValue.groupLabel = groupLabel; - filterItems.push(defaultFilterValue); - } - }); - return filterItems; - } - - this.state = { - sortDirection: props.selectedFilterData.sortDirection === "desc" ? true : false, - sortId: props.getSortData().findIndex(x => x.key === props.selectedFilterData.sortId) != -1 ? props.selectedFilterData.sortId : props.getSortData().length > 0 ? props.getSortData()[0].key : "", - searchText: props.selectedFilterData.inputValue || props.value, - - filterValues: props.selectedFilterData ? getDefaultFilterData() : [], - openFilterItems: [], - hideFilterItems: [] - }; - - this.searchWrapper = React.createRef(); - this.filterWrapper = React.createRef(); - - this.onClickSortItem = this.onClickSortItem.bind(this); - this.onSortDirectionClick = this.onSortDirectionClick.bind(this); - this.onChangeSortDirection = this.onChangeSortDirection.bind(this); - this.onSearch = this.onSearch.bind(this); - this.onChangeFilter = this.onChangeFilter.bind(this); - - this.onSearchChanged = this.onSearchChanged.bind(this); - - this.getDefaultSelectedIndex = this.getDefaultSelectedIndex.bind(this); - - this.updateFilter = this.updateFilter.bind(this); - this.onClickFilterItem = this.onClickFilterItem.bind(this); - this.getFilterData = this.getFilterData.bind(this); - this.onFilterRender = this.onFilterRender.bind(this); - this.onDeleteFilterItem = this.onDeleteFilterItem.bind(this); - this.clearFilter = this.clearFilter.bind(this); - - this.throttledResize = throttle(this.resize, 300); - - } - resize = () => { - this.isResizeUpdate = true; - this.setState({ - filterValues: this.state.filterValues, - openFilterItems: this.state.filterValues, - hideFilterItems: [] - }) - } - onChangeSortDirection(key) { - this.onFilter(this.state.filterValues, this.state.sortId, key ? "desc" : "asc"); - this.setState({ sortDirection: !!key }); - } - getDefaultSelectedIndex() { - const sortData = this.props.getSortData(); - if (sortData.length > 0) { - const defaultIndex = sortData.findIndex(x => x.key === this.state.sortId); - return defaultIndex != -1 ? defaultIndex : 0; - } - return 0; - } - onClickSortItem(key) { - this.setState({ sortId: key }); - this.onFilter(this.state.filterValues, key, this.state.sortDirection ? "desc" : "asc"); - } - onSortDirectionClick() { - - this.onFilter(this.state.filterValues, this.state.sortId, !this.state.sortDirection ? "desc" : "asc"); - this.setState({ sortDirection: !this.state.sortDirection }); - } - onSearchChanged(value) { - this.setState({ searchText: value }); - this.onFilter(this.state.filterValues, this.state.sortId, this.state.sortDirection ? "desc" : "asc", value); - } - onSearch(result) { - this.onFilter(result.filterValues, this.state.sortId, this.state.sortDirection ? "desc" : "asc"); - } - getFilterData() { - const _this = this; - const d = this.props.getFilterData(); - const result = []; - d.forEach(element => { - if (!element.inSubgroup) { - element.onClick = !element.isSeparator && !element.isHeader && !element.disabled ? ((e) => _this.props.onClickFilterItem(e, element)) : undefined; - element.key = element.group != element.key ? element.group + "_" + element.key : element.key; - if (element.subgroup != undefined) { - if (d.findIndex(x => x.group === element.subgroup) === -1) element.disabled = true; - } - result.push(element); - } - }); - return result; - } - clearFilter() { - this.setState({ - searchText: '', - filterValues: [], - openFilterItems: [], - hideFilterItems: [] - }); - this.onFilter([], this.state.sortId, this.state.sortDirection ? "desc" : "asc", ''); - } - updateFilter(inputFilterItems) { - const currentFilterItems = inputFilterItems || cloneObjectsArray(this.state.filterValues); - const fullWidth = this.searchWrapper.current.getBoundingClientRect().width; - const filterWidth = this.filterWrapper.current.getBoundingClientRect().width; - const filterArr = Array.from(Array.from(this.filterWrapper.current.children).find(x => x.id === 'filter-items-container').children); - const searchFilterButton = Array.from(this.filterWrapper.current.children).find(x => x.id != 'filter-items-container'); - - const filterButton = searchFilterButton ? Array.from(searchFilterButton.children)[0] : null; - - if (fullWidth <= this.minWidth && fullWidth > 0) { - this.setState({ - openFilterItems: [], - hideFilterItems: cloneObjectsArray(currentFilterItems) - }); - } else if (filterWidth > fullWidth / 2) { - let newOpenFilterItems = cloneObjectsArray(currentFilterItems); - let newHideFilterItems = []; - - let elementsWidth = 0; - Array.from(filterArr).forEach(element => { - elementsWidth = elementsWidth + element.getBoundingClientRect().width; - }); - - if ( filterButton !== null && (elementsWidth >= (fullWidth / 3) - filterButton.getBoundingClientRect().width)) { - for (let i = 0; i < filterArr.length; i++) { - if (elementsWidth > (fullWidth / 3) - filterButton.getBoundingClientRect().width) { - elementsWidth = elementsWidth - filterArr[i].getBoundingClientRect().width; - const hiddenItem = currentFilterItems.find(x => x.key === filterArr[i].getAttribute('id')); - if (hiddenItem) newHideFilterItems.push(hiddenItem); - newOpenFilterItems.splice(newOpenFilterItems.findIndex(x => x.key === filterArr[i].getAttribute('id')), 1); - } - } - } - this.setState({ - openFilterItems: newOpenFilterItems, - hideFilterItems: newHideFilterItems - }); - - } else { - this.setState({ - openFilterItems: currentFilterItems.slice(), - hideFilterItems: [] - }); - } - } - onDeleteFilterItem(key) { - const currentFilterItems = this.state.filterValues.slice(); - const indexFilterItem = currentFilterItems.findIndex(x => x.key === key); - if (indexFilterItem != -1) { - currentFilterItems.splice(indexFilterItem, 1); - } - this.setState({ - filterValues: currentFilterItems, - openFilterItems: currentFilterItems, - hideFilterItems: [] - }); - let filterValues = cloneObjectsArray(currentFilterItems); - filterValues = filterValues.map(function (item) { - item.key = item.key.replace(item.group + "_", ''); - return item; - }) - this.onFilter(filterValues.filter(item => item.key != '-1'), this.state.sortId, this.state.sortDirection ? "desc" : "asc"); - } - onFilter(filterValues, sortId, sortDirection, searchText) { - let cloneFilterValues = cloneObjectsArray(filterValues); - cloneFilterValues = cloneFilterValues.map(function (item) { - item.key = item.key.replace(item.group + "_", ''); - return item; - }) - this.props.onFilter({ - inputValue: searchText != undefined ? searchText : this.state.searchText, - filterValues: cloneFilterValues.filter(item => item.key != '-1'), - sortId: sortId, - sortDirection: sortDirection - }); - } - onChangeFilter(result) { - this.setState({ - searchText: result.inputValue, - filterValues: result.filterValues, - }); - this.onFilter(result.filterValues, this.state.sortId, this.state.sortDirection ? "desc" : "asc", result.inputValue); - } - onFilterRender() { - if (this.isResizeUpdate) { - this.isResizeUpdate = false; - } - - if (this.searchWrapper.current && this.filterWrapper.current) { - const fullWidth = this.searchWrapper.current.getBoundingClientRect().width; - const filterWidth = this.filterWrapper.current.getBoundingClientRect().width; - if (fullWidth <= this.minWidth || filterWidth > fullWidth / 2) this.updateFilter(); - } - } - onClickFilterItem(event, filterItem) { - const currentFilterItems = cloneObjectsArray(this.state.filterValues); - - if (filterItem.subgroup) { - const indexFilterItem = currentFilterItems.findIndex(x => x.group === filterItem.subgroup); - if (indexFilterItem != -1) { - currentFilterItems.splice(indexFilterItem, 1); - } - const subgroupItems = this.props.getFilterData().filter(t => t.group === filterItem.subgroup); - if (subgroupItems.length > 1) { - const selectFilterItem = { - key: filterItem.subgroup + "_-1", - group: filterItem.subgroup, - label: filterItem.defaultSelectLabel, - groupLabel: filterItem.label, - inSubgroup: true - }; - if (indexFilterItem != -1) - currentFilterItems.splice(indexFilterItem, 0, selectFilterItem); - else - currentFilterItems.push(selectFilterItem); - this.setState({ - filterValues: currentFilterItems, - openFilterItems: currentFilterItems, - hideFilterItems: [] - }); - } else if (subgroupItems.length === 1) { - - const selectFilterItem = { - key: subgroupItems[0].group + "_" + subgroupItems[0].key, - group: subgroupItems[0].group, - label: subgroupItems[0].label, - groupLabel: this.props.getFilterData().find(x => x.subgroup === subgroupItems[0].group).label, - inSubgroup: true - }; - if (indexFilterItem != -1) - currentFilterItems.splice(indexFilterItem, 0, selectFilterItem); - else - currentFilterItems.push(selectFilterItem); - - const clone = cloneObjectsArray(currentFilterItems.filter(item => item.key != '-1')); - clone.map(function (item) { - item.key = item.key.replace(item.group + "_", ''); - return item; - }) - this.onFilter(clone.filter(item => item.key != '-1'), this.state.sortId, this.state.sortDirection ? "desc" : "asc"); - this.setState({ - filterValues: currentFilterItems, - openFilterItems: currentFilterItems, - hideFilterItems: [] - }); - } - } else { - const filterItems = this.getFilterData(); - - const indexFilterItem = currentFilterItems.findIndex(x => x.group === filterItem.group); - if (indexFilterItem != -1) { - currentFilterItems.splice(indexFilterItem, 1); - } - - const selectFilterItem = { - key: filterItem.key, - group: filterItem.group, - label: filterItem.label, - groupLabel: filterItem.inSubgroup ? filterItems.find(x => x.subgroup === filterItem.group).label : filterItems.find(x => x.key === filterItem.group).label - }; - if (indexFilterItem != -1) - currentFilterItems.splice(indexFilterItem, 0, selectFilterItem); - else - currentFilterItems.push(selectFilterItem); - this.setState({ - filterValues: currentFilterItems, - openFilterItems: currentFilterItems, - hideFilterItems: [] - }); - - const clone = cloneObjectsArray(currentFilterItems.filter(item => item.key != '-1')); - clone.map(function (item) { - item.key = item.key.replace(item.group + "_", ''); - return item; - }) - this.onFilter(clone.filter(item => item.key != '-1'), this.state.sortId, this.state.sortDirection ? "desc" : "asc"); - } - - } - - componentDidMount() { - window.addEventListener('resize', this.throttledResize); - if (this.state.filterValues.length > 0) this.updateFilter(); - } - componentWillUnmount() { - window.removeEventListener('resize', this.throttledResize); - } - componentDidUpdate(prevProps){ - if(this.props.needForUpdate && this.props.needForUpdate(prevProps, this.props)){ - let internalFilterData = convertToInternalData(this.props.getFilterData(), cloneObjectsArray(this.props.selectedFilterData.filterValues)); - this.updateFilter(internalFilterData); - } - } - shouldComponentUpdate(nextProps, nextState) { - if (!isEqual(this.props.selectedFilterData, nextProps.selectedFilterData)) { - let internalFilterData = cloneObjectsArray(this.state.filterValues); - if (nextProps.selectedFilterData.filterValues) { - internalFilterData = convertToInternalData(this.props.getFilterData(), cloneObjectsArray(nextProps.selectedFilterData.filterValues)); - this.updateFilter(internalFilterData); - } - this.setState( - { - sortDirection: nextProps.selectedFilterData.sortDirection === "desc" ? true : false, - sortId: this.props.getSortData().findIndex(x => x.key === nextProps.selectedFilterData.sortId) != -1 ? nextProps.selectedFilterData.sortId : "", - filterValues: internalFilterData, - searchText: nextProps.selectedFilterData.inputValue || this.props.value - } - ); - return true; - } - if (this.props.id != nextProps.id || - this.props.isDisabled != nextProps.isDisabled || - this.props.size != nextProps.size || - this.props.placeholder != nextProps.placeholder || - this.props.value != nextProps.value) - - return true; - if (this.isResizeUpdate) { - return true; - } - return !isEqual(this.state, nextState); - } - render() { - //console.log("FilterInput render"); - let iconSize = 33; - switch (this.props.size) { - case 'base': - iconSize = 33; - break; - case 'middle': - case 'big': - case 'huge': - iconSize = 41; - break; - default: - break; - } - return ( - - - 0} - onClearSearch={this.clearFilter} - onChange={this.onSearchChanged} - > - - - - - - - - 0 ? this.props.getSortData().find(x => x.key === this.state.sortId) : {}} - onButtonClick={this.onSortDirectionClick} - sortDirection={+this.state.sortDirection} - directionAscLabel={this.props.directionAscLabel} - directionDescLabel={this.props.directionDescLabel} - /> - - - ); - } -} - -FilterInput.protoTypes = { - size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']), - autoRefresh: PropTypes.bool, - selectedFilterData: PropTypes.object, - directionAscLabel: PropTypes.string, - directionDescLabel: PropTypes.string, - className: PropTypes.string, - id: PropTypes.string, - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - needForUpdate: PropTypes.bool -}; - -FilterInput.defaultProps = { - autoRefresh: true, - selectedFilterData: { - sortDirection: false, - sortId: '', - filterValues: [], - searchText: '' - }, - size: 'base', - needForUpdate: false, - directionAscLabel: 'A-Z', - directionDescLabel: 'Z-A' -}; - -export default FilterInput; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js b/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js deleted file mode 100644 index d154e22e0a..0000000000 --- a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js +++ /dev/null @@ -1,166 +0,0 @@ -import React from 'react'; -import isEqual from 'lodash/isEqual'; -import ComboBox from '../combobox' -import IconButton from '../icon-button'; -import DropDownItem from '../drop-down-item'; -import RadioButtonGroup from '../radio-button-group' -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -import { mobile } from '../../utils/device' - -const StyledIconButton = styled.div` - transform: ${state => !state.sortDirection ? 'scale(1, -1)' : 'scale(1)'}; -`; -const StyledComboBox = styled(ComboBox)` - display: block; - float: left; - width: 132px; - margin-left: 8px; - - @media ${mobile} { - width: 50px; - .optionalBlock ~ div:first-child{ - opacity: 0 - } - } - - .combo-button-label { - color: #333; - } - -`; - -class SortComboBox extends React.Component { - constructor(props) { - super(props); - - this.state = { - sortDirection: this.props.sortDirection - } - - this.combobox = React.createRef(); - - this.onChangeSortId = this.onChangeSortId.bind(this); - this.onChangeSortDirection = this.onChangeSortDirection.bind(this); - this.onButtonClick = this.onButtonClick.bind(this); - - } - onButtonClick() { - typeof this.props.onChangeSortDirection === 'function' && this.props.onChangeSortDirection(+(this.state.sortDirection === 0 ? 1 : 0)); - this.setState({ - sortDirection: this.state.sortDirection === 0 ? 1 : 0 - }); - } - - onChangeSortId(e) { - typeof this.props.onChangeSortId === 'function' && this.props.onChangeSortId(e.target.value); - } - onChangeSortDirection(e) { - this.setState({ - sortDirection: +e.target.value - }); - typeof this.props.onChangeSortDirection === 'function' && this.props.onChangeSortDirection(+e.target.value); - } - shouldComponentUpdate(nextProps, nextState) { - //TODO - /*const comboboxText = this.combobox.current.ref.current.children[0].children[1]; - if(comboboxText.scrollWidth > Math.round(comboboxText.getBoundingClientRect().width)){ - comboboxText.style.opacity = "0"; - }else{ - comboboxText.style.opacity = "1"; - }*/ - if (this.props.sortDirection !== nextProps.sortDirection) { - this.setState({ - sortDirection: nextProps.sortDirection - }); - return true; - } - return (!isEqual(this.props, nextProps) || !isEqual(this.state, nextState)); - } - render() { - let sortArray = this.props.options.map(function (item) { - item.value = item.key - return item; - }); - let sortDirectionArray = [ - { value: '0', label: this.props.directionAscLabel }, - { value: '1', label: this.props.directionDescLabel } - ]; - - const isMobile = window.innerWidth > 375; //TODO: Make some better - - const advancedOptions = ( - <> - - - - - - - - - ); - return ( - - - - - - ); - } -} - -SortComboBox.propTypes = { - isDisabled: PropTypes.bool, - sortDirection: PropTypes.number, - onChangeSortId: PropTypes.func, - onChangeSortDirection: PropTypes.func, - onButtonClick: PropTypes.func, - directionAscLabel: PropTypes.string, - directionDescLabel: PropTypes.string -} - -SortComboBox.defaultProps = { - isDisabled: false, - sortDirection: 0 -} - - -export default SortComboBox; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js index 125a791d60..96074ca528 100644 --- a/web/ASC.Web.Components/src/index.js +++ b/web/ASC.Web.Components/src/index.js @@ -16,7 +16,6 @@ export { default as DropDownItem } from './components/drop-down-item' export { default as EmailInput } from './components/email-input' export { default as EmptyScreenContainer} from './components/empty-screen-container' export { default as FieldContainer } from './components/field-container' -export { default as FilterInput } from './components/filter-input' export { default as GroupButton } from './components/group-button' export { default as GroupButtonsMenu } from './components/group-buttons-menu' export { default as Heading } from './components/heading' From 25d796b309075e7cf13acfc41861c51217ed0931 Mon Sep 17 00:00:00 2001 From: Daniil Senkiv Date: Thu, 19 Mar 2020 15:06:04 +0300 Subject: [PATCH 2/4] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index b69f4707de..3bbd485bc4 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.373", + "version": "1.0.374", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From c1782f774a7fa24229448689d4b75833beb676bd Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 19 Mar 2020 15:25:11 +0300 Subject: [PATCH 3/4] Web: Files: added Empty TrashDialog with translations --- .../src/components/Article/Body/index.js | 14 ++-- .../dialogs/EmptyTrashDialog/i18n.js | 54 +++++++++++++ .../dialogs/EmptyTrashDialog/index.js | 76 +++++++++++++++++++ .../locales/en/translation.json | 8 ++ .../locales/ru/translation.json | 8 ++ .../dialogs/ModalDialogContainer.js | 58 ++++++++++++++ .../Client/src/components/dialogs/index.js | 3 + .../pages/Home/Section/Header/index.js | 30 ++++++-- .../pages/Home/locales/en/translation.json | 3 +- .../pages/Home/locales/ru/translation.json | 3 +- web/ASC.Web.Common/src/api/files/index.js | 6 +- 11 files changed, 250 insertions(+), 13 deletions(-) create mode 100644 products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/i18n.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/locales/en/translation.json create mode 100644 products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/locales/ru/translation.json create mode 100644 products/ASC.Files/Client/src/components/dialogs/ModalDialogContainer.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/index.js diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js index 2b406ebbbf..51f5b2ff0a 100644 --- a/products/ASC.Files/Client/src/components/Article/Body/index.js +++ b/products/ASC.Files/Client/src/components/Article/Body/index.js @@ -3,7 +3,11 @@ import { connect } from "react-redux"; import { utils, toastr } from "asc-web-components"; import { getRootFolders } from "../../../store/files/selectors"; import TreeFolders from "./TreeFolders"; -import { setFilter, fetchFiles, setRootFolders } from "../../../store/files/actions"; +import { + setFilter, + fetchFiles, + setRootFolders +} from "../../../store/files/actions"; import store from "../../../store/store"; import { api, history } from "asc-web-common"; const { files } = api; @@ -79,16 +83,16 @@ function mapStateToProps(state) { const { rootFolders, selectedFolder, filter } = state.files; const currentFolderId = selectedFolder.id.toString(); const fakeNewDocuments = 8; - const parentId = selectedFolder.parentId; return { data: getRootFolders(rootFolders), selectedKeys: selectedFolder ? [currentFolderId] : [""], fakeNewDocuments, currentModule: currentFolderId, - filter, - parentId + filter }; } -export default connect(mapStateToProps, { setFilter, setRootFolders })(ArticleBodyContent); +export default connect(mapStateToProps, { setFilter, setRootFolders })( + ArticleBodyContent +); diff --git a/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/i18n.js b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/i18n.js new file mode 100644 index 0000000000..e9856cccb7 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/i18n.js @@ -0,0 +1,54 @@ +import i18n from "i18next"; +import Backend from "i18next-xhr-backend"; +import config from "../../../../package.json"; +import { constants } from 'asc-web-common'; +const { LANGUAGE } = constants; + +const newInstance = i18n.createInstance(); + +if (process.env.NODE_ENV === "production") { + newInstance + .use(Backend) + .init({ + lng: localStorage.getItem(LANGUAGE) || 'en', + fallbackLng: "en", + + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + + react: { + useSuspense: true + }, + backend: { + loadPath: `${config.homepage}/locales/EmptyTrashDialog/{{lng}}/{{ns}}.json` + } + }); +} else if (process.env.NODE_ENV === "development") { + + const resources = { + en: { + translation: require("./locales/en/translation.json") + }, + ru: { + translation: require("./locales/ru/translation.json") + }, + }; + + newInstance.init({ + resources: resources, + lng: localStorage.getItem(LANGUAGE) || 'en', + fallbackLng: "en", + debug: true, + + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + + react: { + useSuspense: true + } + }); +} + +export default newInstance; \ No newline at end of file diff --git a/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js new file mode 100644 index 0000000000..61f8dc3207 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js @@ -0,0 +1,76 @@ +import React, { useCallback, useState } from "react"; +import ModalDialogContainer from "../ModalDialogContainer"; +import { toastr, ModalDialog, Button, Text } from "asc-web-components"; +import { withTranslation } from "react-i18next"; +import i18n from "./i18n"; +import { api, utils } from "asc-web-common"; + +const { files } = api; +const { changeLanguage } = utils; + +const EmptyTrashDialogComponent = props => { + const { onClose, visible, t } = props; + const [isLoading, setIsLoading] = useState(false); + + changeLanguage(i18n); + + const onEmptyTrash = useCallback(() => { + setIsLoading(true); + files + .emptyTrash() + .then(res => { + toastr.success("Success empty recycle bin"); + }) //toastr.success("It was successfully deleted 24 from 24"); + progressBar + .catch(err => toastr.error(err)) + .finally(() => { + setIsLoading(false); + onClose(); + }); + }, [onClose]); + + return ( + + + {t("EmptyTrashDialogQuestion")} + {t("EmptyTrashDialogMessage")} + + } + footerContent={ + <> +