Web: Settings: Backup: Refactoring and Delete file-input-with-folder-path from components.
This commit is contained in:
parent
c24fe6a9ab
commit
20404ad431
@ -1,166 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import IconButton from "../icon-button";
|
||||
import TextInput from "../text-input";
|
||||
import StyledFileInput from "../file-input/styled-file-input";
|
||||
|
||||
let path = "";
|
||||
|
||||
class FileInputWithFolderPath extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.inputRef = React.createRef();
|
||||
this.state = {
|
||||
fullFolderPath: "",
|
||||
thirdParty: "",
|
||||
selectedInput: "",
|
||||
};
|
||||
}
|
||||
|
||||
// componentDidUpdate(prevProps) {
|
||||
// const { folderPath, selectedInput } = this.props;
|
||||
// if (folderPath !== prevProps.folderPath) {
|
||||
// //this.getTitlesFolders();
|
||||
// }
|
||||
// }
|
||||
|
||||
// getTitlesFolders = () => {
|
||||
// const { folderPath, selectedInput } = this.props;
|
||||
// //debugger;
|
||||
// console.log("selectedInput", selectedInput);
|
||||
|
||||
// path = "";
|
||||
// if (folderPath.length > 1) {
|
||||
// for (let item of folderPath) {
|
||||
// if (!path) {
|
||||
// path = path + `${item.title}`;
|
||||
// } else path = path + " " + "/" + " " + `${item.title}`;
|
||||
// }
|
||||
// this.setState({
|
||||
// //fullFolderPath: path,
|
||||
// [selectedInput]: path,
|
||||
// });
|
||||
// } else {
|
||||
// for (let item of folderPath) {
|
||||
// path = `${item.title}`;
|
||||
// }
|
||||
// this.setState({
|
||||
// //fullFolderPath: path,
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
handleOptionChange(e) {
|
||||
console.log("e.target.value", e.target.name);
|
||||
//console.log("this.inputRef.current", this.inputRef.current);
|
||||
const { curRef } = this.props;
|
||||
this.setState({
|
||||
//fullFolderPath: path,
|
||||
//[e.target.name]: "HELLO",
|
||||
selectedInput: this.inputRef.current,
|
||||
});
|
||||
}
|
||||
|
||||
onChange = () => {
|
||||
console.log("on change!!!!");
|
||||
};
|
||||
render() {
|
||||
const { fullFolderPath, selectedInput } = this.state;
|
||||
const {
|
||||
folderPath,
|
||||
onClick,
|
||||
size,
|
||||
placeholder,
|
||||
isDisabled,
|
||||
scale,
|
||||
hasError,
|
||||
hasWarning,
|
||||
accept,
|
||||
id,
|
||||
baseFolder,
|
||||
onClickInput,
|
||||
name,
|
||||
onSelect,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<StyledFileInput
|
||||
size={size}
|
||||
scale={scale ? 1 : 0}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
isDisabled={isDisabled}
|
||||
{...rest}
|
||||
>
|
||||
<TextInput
|
||||
ref={this.inputRef}
|
||||
id={id}
|
||||
className="text-input"
|
||||
placeholder={placeholder}
|
||||
value={folderPath || baseFolder}
|
||||
size={size}
|
||||
isDisabled={isDisabled}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
scale={scale}
|
||||
//onClick={onClickInput}
|
||||
onClick={(e) => {
|
||||
this.handleOptionChange(e);
|
||||
onClickInput && onClickInput(e);
|
||||
}}
|
||||
isReadOnly
|
||||
name={name}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
|
||||
<div className="icon" onClick={!isDisabled ? onClickInput : null}>
|
||||
<IconButton
|
||||
className="icon-button"
|
||||
iconName={"/static/images/catalog.folder.react.svg"}
|
||||
color={"#A3A9AE"}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
</div>
|
||||
</StyledFileInput>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FileInputWithFolderPath.propTypes = {
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Placeholder text for the input */
|
||||
placeholder: PropTypes.string,
|
||||
/** Supported size of the input fields */
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
/** Indicates the input field has scale */
|
||||
scale: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Indicates the input field has an error */
|
||||
hasError: PropTypes.bool,
|
||||
/** Indicates the input field has a warning */
|
||||
hasWarning: PropTypes.bool,
|
||||
/** Used as HTML `id` property */
|
||||
id: PropTypes.string,
|
||||
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Used as HTML `name` property */
|
||||
name: PropTypes.string,
|
||||
/**Specifies files visible for upload */
|
||||
accept: PropTypes.string,
|
||||
};
|
||||
|
||||
FileInputWithFolderPath.defaultProps = {
|
||||
size: "base",
|
||||
scale: false,
|
||||
hasWarning: false,
|
||||
hasError: false,
|
||||
isDisabled: false,
|
||||
baseFolder: "",
|
||||
accept: "",
|
||||
};
|
||||
|
||||
export default FileInputWithFolderPath;
|
||||
@ -0,0 +1,91 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import StyledFileInput from "@appserver/components/file-input/styled-file-input";
|
||||
|
||||
const FileInputWithFolderPath = (
|
||||
{
|
||||
folderPath,
|
||||
size,
|
||||
placeholder,
|
||||
isDisabled,
|
||||
scale,
|
||||
hasError,
|
||||
hasWarning,
|
||||
id,
|
||||
baseFolder,
|
||||
onClickInput,
|
||||
name,
|
||||
},
|
||||
...rest
|
||||
) => {
|
||||
return (
|
||||
<StyledFileInput
|
||||
size={size}
|
||||
scale={scale ? 1 : 0}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
isDisabled={isDisabled}
|
||||
{...rest}
|
||||
>
|
||||
<TextInput
|
||||
id={id}
|
||||
className="text-input"
|
||||
placeholder={placeholder}
|
||||
value={folderPath || baseFolder}
|
||||
size={size}
|
||||
isDisabled={isDisabled}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
scale={scale}
|
||||
onClick={onClickInput}
|
||||
isReadOnly
|
||||
name={name}
|
||||
/>
|
||||
|
||||
<div className="icon" onClick={!isDisabled ? onClickInput : null}>
|
||||
<IconButton
|
||||
className="icon-button"
|
||||
iconName={"/static/images/catalog.folder.react.svg"}
|
||||
color={"#A3A9AE"}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
</div>
|
||||
</StyledFileInput>
|
||||
);
|
||||
};
|
||||
FileInputWithFolderPath.propTypes = {
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Placeholder text for the input */
|
||||
placeholder: PropTypes.string,
|
||||
/** Supported size of the input fields */
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
/** Indicates the input field has scale */
|
||||
scale: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Indicates the input field has an error */
|
||||
hasError: PropTypes.bool,
|
||||
/** Indicates the input field has a warning */
|
||||
hasWarning: PropTypes.bool,
|
||||
/** Used as HTML `id` property */
|
||||
id: PropTypes.string,
|
||||
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Used as HTML `name` property */
|
||||
name: PropTypes.string,
|
||||
};
|
||||
|
||||
FileInputWithFolderPath.defaultProps = {
|
||||
size: "base",
|
||||
scale: false,
|
||||
hasWarning: false,
|
||||
hasError: false,
|
||||
isDisabled: false,
|
||||
baseFolder: "",
|
||||
};
|
||||
|
||||
export default FileInputWithFolderPath;
|
||||
@ -8,10 +8,11 @@ import store from "studio/store";
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import { StyledAsidePanel } from "../StyledPanels";
|
||||
import { useTranslation, withTranslation } from "react-i18next";
|
||||
import FileInputWithFolderPath from "@appserver/components/file-input-with-folder-path";
|
||||
import FileInputWithFolderPath from "./fileInputWithFolderPath";
|
||||
import styled from "styled-components";
|
||||
import Loader from "@appserver/components/loader";
|
||||
import Text from "@appserver/components/text";
|
||||
|
||||
const { auth: authStore } = store;
|
||||
|
||||
let path = "";
|
||||
@ -38,14 +39,9 @@ class OperationsDialog extends React.PureComponent {
|
||||
this.state = {
|
||||
isLoading: false,
|
||||
isLoadingData: false,
|
||||
|
||||
thirdPartyDefault: "",
|
||||
thirdParty: "",
|
||||
|
||||
commonDefault: "",
|
||||
common: "",
|
||||
|
||||
baseFolder: "",
|
||||
fullFolderPath: "",
|
||||
fullFolderPathDefault: "",
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
@ -54,7 +50,6 @@ class OperationsDialog extends React.PureComponent {
|
||||
getCommonFolder,
|
||||
folderPath,
|
||||
onSelectFolder,
|
||||
name,
|
||||
folderList,
|
||||
isCommonWithoutProvider,
|
||||
onSetLoadingData,
|
||||
@ -85,25 +80,21 @@ class OperationsDialog extends React.PureComponent {
|
||||
pathName = this.getTitlesFolders(folderPath);
|
||||
|
||||
this.setState({
|
||||
//fullFolderPath: path,
|
||||
[name]: pathName,
|
||||
[`${name}Default`]: pathName,
|
||||
fullFolderPath: pathName,
|
||||
fullFolderPathDefault: pathName,
|
||||
});
|
||||
}
|
||||
|
||||
console.log("DID MOunt", folderPath);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { isSetDefaultFolderPath, name, folderPath } = this.props;
|
||||
const { isSetDefaultFolderPath, folderPath } = this.props;
|
||||
|
||||
//debugger;
|
||||
if (
|
||||
isSetDefaultFolderPath &&
|
||||
isSetDefaultFolderPath !== prevProps.isSetDefaultFolderPath
|
||||
) {
|
||||
this.setState({
|
||||
[name]: this.state[`${name}Default`],
|
||||
fullFolderPath: this.state.fullFolderPathDefault,
|
||||
});
|
||||
}
|
||||
if (folderPath !== prevProps.folderPath) {
|
||||
@ -115,7 +106,7 @@ class OperationsDialog extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
onSelect = (folder) => {
|
||||
const { onSelectFolder, onClose, name } = this.props;
|
||||
const { onSelectFolder, onClose } = this.props;
|
||||
|
||||
this.setState({ isLoadingData: true }, function () {
|
||||
getFolderPath(folder)
|
||||
@ -123,8 +114,7 @@ class OperationsDialog extends React.PureComponent {
|
||||
.then(() =>
|
||||
this.setState(
|
||||
{
|
||||
//fullFolderPath: path,
|
||||
[name]: pathName,
|
||||
fullFolderPath: pathName,
|
||||
},
|
||||
function () {
|
||||
onSelectFolder(folder);
|
||||
@ -168,11 +158,11 @@ class OperationsDialog extends React.PureComponent {
|
||||
withoutTopLevelFolder,
|
||||
isSavingProcess,
|
||||
} = this.props;
|
||||
const { isLoading, isLoadingData, baseFolder } = this.state;
|
||||
const { isLoading, isLoadingData, baseFolder, fullFolderPath } = this.state;
|
||||
const zIndex = 310;
|
||||
//console.log("name", name);
|
||||
|
||||
console.log("folderList", folderList);
|
||||
//console.log("folderList", folderList);
|
||||
|
||||
return (
|
||||
<StyledComponent>
|
||||
@ -182,7 +172,7 @@ class OperationsDialog extends React.PureComponent {
|
||||
className="input-with-folder-path"
|
||||
baseFolder={baseFolder}
|
||||
isDisabled={isLoading || isSavingProcess}
|
||||
folderPath={this.state[name]}
|
||||
folderPath={fullFolderPath}
|
||||
onClickInput={onClickInput}
|
||||
hasError={isError}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user