@plusscommunities/pluss-core-web 1.7.3-beta.1 → 1.7.4-beta.0

package/src/components/ExportCsvPopup.js

@@ -1,222 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import moment from 'moment';
-import FontAwesome from 'react-fontawesome';
-import { CSVLink } from 'react-csv';
-import { Popup } from './Popup';
-import { CheckBox } from './CheckBox';
-import { GenericInput } from './GenericInput';
-import { DatePicker } from './DatePicker';
-import { Text } from './Text';
-
-class ExportCsvPopup extends Component {
-  constructor(props) {
-    super(props);
-
-    const state = {
-      columns: props.columns,
-      selectedHeaders: props.columns.filter((c) => c.key && c.selected),
-      selectedSource: [],
-      saving: false,
-    };
-
-    if (props.timestampFilter) {
-      state.filterDateStart = props.timestampFilter.startDate;
-      state.filterDateEnd = props.timestampFilter.endDate;
-    }
-
-    this.state = state;
-  }
-
-  canSave = () => {
-    return _.some(this.state.columns, (c) => c.selected);
-  };
-
-  onConfirm = () => {
-    return this.canSave();
-  };
-
-  onClose = () => {
-    if (this.props.onClose) this.props.onClose();
-  };
-
-  onToggleColumn = (key) => {
-    const columns = _.cloneDeep(this.state.columns);
-    const column = columns.find((c) => c.key === key);
-    if (column) {
-      column.selected = !column.selected;
-      if (!column.key) columns.map((c) => (c.selected = column.selected)); // Toggle all
-      const selectedHeaders = columns.filter((c) => c.key && c.selected);
-      this.setState({ columns, selectedHeaders });
-    }
-  };
-
-  onToggleStartDateFilter = () => {
-    const { filterDateStartVisible } = this.state;
-    if (filterDateStartVisible) {
-      setTimeout(() => this.setState({ filterDateStartVisible: false }), 200);
-    } else {
-      this.setState({ filterDateStartVisible: true });
-    }
-  };
-
-  onToggleEndDateFilter = () => {
-    const { filterDateEndVisible } = this.state;
-    if (filterDateEndVisible) {
-      setTimeout(() => this.setState({ filterDateEndVisible: false }), 200);
-    } else {
-      this.setState({ filterDateEndVisible: true });
-    }
-  };
-
-  onDateFilterStartChanged = (date) => {
-    const { filterDateEnd } = this.state;
-    const start = moment(date);
-    if (start.isSameOrBefore(filterDateEnd)) {
-      this.setState({ filterDateStart: start.startOf('day'), filterDateStartVisible: false });
-    }
-  };
-
-  onDateFilterEndChanged = (date) => {
-    const { filterDateStart } = this.state;
-    const end = moment(date);
-    if (end.isSameOrAfter(filterDateStart)) {
-      this.setState({ filterDateEnd: end.endOf('day'), filterDateEndVisible: false });
-    }
-  };
-
-  getSelectedSource = () => {
-    const { source } = this.props;
-    const { selectedHeaders } = this.state;
-
-    let result = source;
-
-    // apply timestamp filter
-    if (this.props.timestampFilter) {
-      const { filterDateStart, filterDateEnd } = this.state;
-      const { filterKey } = this.props.timestampFilter;
-      const minDate = filterDateStart.valueOf();
-      const maxDate = filterDateEnd.valueOf();
-      result = _.filter(source, (item) => {
-        return item[filterKey] >= minDate && item[filterKey] <= maxDate;
-      });
-    }
-
-    // map result to columns
-    const selectedheaderKeys = selectedHeaders.map((h) => h.key);
-    return result.map((i) => _.pick(i, selectedheaderKeys));
-  };
-
-  renderTimestampFilter = () => {
-    if (!this.props.timestampFilter) {
-      return null;
-    }
-    return (
-      <div>
-        <GenericInput
-          id="dateStart"
-          label="Start Date"
-          alwaysShowLabel
-          placeholder={'Select start date'}
-          value={this.state.filterDateStart.format('DD/MM/YYYY')}
-          onClick={this.onToggleStartDateFilter}
-          readOnly
-        />
-        {this.state.filterDateStartVisible ? (
-          <DatePicker hideTop selectedDate={this.state.filterDateStart} selectDate={this.onDateFilterStartChanged} />
-        ) : null}
-        <GenericInput
-          id="dateEnd"
-          label="End Date"
-          alwaysShowLabel
-          placeholder={'Select end date'}
-          value={this.state.filterDateEnd.format('DD/MM/YYYY')}
-          onClick={this.onToggleEndDateFilter}
-          readOnly
-        />
-        {this.state.filterDateEndVisible ? (
-          <DatePicker hideTop selectedDate={this.state.filterDateEnd} selectDate={this.onDateFilterEndChanged} />
-        ) : null}
-      </div>
-    );
-  };
-
-  renderContent = () => {
-    const { saving, columns } = this.state;
-
-    if (saving) {
-      return (
-        <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
-          <FontAwesome style={{ fontSize: 30 }} name="spinner fa-pulse fa-fw" />
-        </div>
-      );
-    }
-
-    if (!columns) return null;
-    return (
-      <div className="marginTop-16">
-        {columns.map((c) => {
-          return (
-            <CheckBox
-              key={c.key}
-              label={c.label}
-              isActive={c.selected}
-              onChange={() => this.onToggleColumn(c.key)}
-              style={{ marginBottom: 8 }}
-            />
-          );
-        })}
-      </div>
-    );
-  };
-
-  render() {
-    const { selectedHeaders } = this.state;
-    const { filename } = this.props;
-
-    const buttons = [
-      {
-        type: 'primary',
-        isActive: this.canSave(),
-        text: (
-          <CSVLink
-            headers={selectedHeaders}
-            data={this.getSelectedSource()}
-            style={{ textDecoration: 'none', color: '#fff' }}
-            filename={filename || 'export.csv'}
-            onClick={this.onConfirm}
-          >
-            Confirm
-          </CSVLink>
-        ),
-      },
-      {
-        type: 'tertiary',
-        onClick: this.onClose,
-        isActive: true,
-        text: 'Close',
-      },
-    ];
-
-    return (
-      <Popup
-        title="Confirm Export"
-        boxClasses="flex flex-column"
-        innerClasses="flex flex-column fillSpace flex-1"
-        minWidth={500}
-        maxWidth={500}
-        minHeight={'50vh'}
-        maxHeight={'100vh'}
-        hasPadding
-        onClose={this.onClose}
-        buttons={buttons}
-      >
-        {this.renderTimestampFilter()}
-        <Text type="bodyLarge">Select which columns to include in the export</Text>
-        {this.renderContent()}
-      </Popup>
-    );
-  }
-}
-
-export { ExportCsvPopup };

package/src/components/FileInput.js

@@ -1,389 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import _ from "lodash";
-import Dropzone from "react-dropzone";
-import FontAwesome from "react-fontawesome";
-import { Button } from "./Button";
-import { fileActions } from "../apis";
-import { getFileName } from "../helper";
-
-const DEFAULT_INPUT = {
-  uploadingFile: false,
-  value: "",
-};
-
-class FileInputComponent extends Component {
-  state = {
-    inputs: [
-      {
-        uploadingFile: false,
-        value: "",
-      },
-    ],
-  };
-
-  componentDidMount() {
-    setTimeout(() => {
-      if (this.props.hasDefault) {
-        this.setState({
-          inputs: [
-            {
-              uploadingFile: false,
-              value: this.props.hasDefault,
-            },
-          ],
-        });
-        if (this.props.refreshCallback) {
-          this.props.refreshCallback(this.props.hasDefault);
-        }
-      }
-    }, 100);
-  }
-
-  setValue(val) {
-    if (typeof val === "string") {
-      this.setState({
-        inputs: [
-          {
-            uploadingImage: false,
-            value: val,
-          },
-        ],
-      });
-    } else {
-      const inputs = [];
-      _.forEach(val, (str) => {
-        inputs.push({
-          uploadingImage: false,
-          value: str,
-        });
-      });
-      if (!this.props.limit || this.props.limit > inputs.length)
-        inputs.push(DEFAULT_INPUT);
-      this.setState({ inputs });
-    }
-  }
-
-  getClassNames(input, inputsLength) {
-    let classes = "clearfix imageInput";
-    if (input.uploadingFile) {
-      classes += " imageInput-uploading";
-    } else if (!_.isEmpty(input.value) && !this.props.onlyAllowUpload) {
-      classes += " imageInput-hasImage";
-    }
-    if (inputsLength === 1) {
-      classes += " imageInput-only";
-    }
-    if (
-      this.props.style &&
-      this.props.style.height &&
-      this.props.style.height < 150
-    ) {
-      classes += " imageInput-condensed";
-    }
-    return classes;
-  }
-
-  getErrorState() {
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return " imageInput_upload--error";
-    }
-    return "";
-  }
-
-  getAccept = () => {
-    if (typeof this.props.accept === "object") {
-      return this.props.accept;
-    }
-    if (typeof this.props.accept === "string") {
-      const accept = {
-        [this.props.accept]: [`.${_.last(this.props.accept.split("/"))}`],
-      };
-      return accept;
-    }
-    return null;
-  };
-
-  checkRefreshCallback = (inputs) => {
-    if (_.isUndefined(this.props.refreshCallback)) {
-      return;
-    }
-    if (!this.props.multiple) {
-      const file = _.find(inputs, (i) => {
-        return !i.uploadingFile && !_.isEmpty(i.value);
-      });
-      this.props.refreshCallback(file ? file.value : undefined);
-    } else {
-      const files = _.filter(inputs, (i) => {
-        return !i.uploadingFile && !_.isEmpty(i.value);
-      }).map((i) => {
-        return i.value;
-      });
-      this.props.refreshCallback(files);
-    }
-  };
-
-  checkSetDisplayValue(input, value) {
-    input.value = value;
-    input.uploadingFile = false;
-    const newInputs = _.clone(this.state.inputs);
-    this.setState({ inputs: newInputs });
-    this.checkRefreshCallback(newInputs);
-  }
-
-  onDrop = (files) => {
-    if (this.props.multiple) {
-      const newInputs = _.clone(this.state.inputs);
-      files.forEach((file) => {
-        if (this.props.limit && newInputs.length === this.props.limit) {
-          // hit limit - replace last input if it's empty
-          if (_.isEmpty(newInputs[newInputs.length - 1].value)) {
-            const newInput = newInputs[newInputs.length - 1];
-            this.handleFile(newInput, file);
-          }
-        } else {
-          const newInput = {
-            ...DEFAULT_INPUT,
-          };
-          newInputs.splice(newInputs.length - 1, 0, newInput);
-          this.handleFile(newInput, file);
-        }
-      });
-      this.setState({
-        inputs: newInputs,
-      });
-      this.checkRefreshCallback(newInputs);
-    } else {
-      this.handleFile(this.state.inputs[0], files[0]);
-    }
-  };
-
-  handleFile = async (input, file) => {
-    if (!file || input.uploadingFile) {
-      return;
-    }
-    input.uploadingFile = true;
-    const newInputs = _.clone(this.state.inputs);
-    this.setState({
-      inputs: newInputs,
-    });
-    this.checkRefreshCallback(newInputs);
-    if (this.props.handleFile) {
-      await this.props.handleFile(file, newInputs);
-      this.checkSetDisplayValue(input, "");
-    } else {
-      try {
-        let uploadFile = file;
-        const url = await fileActions.uploadMediaAsync(
-          uploadFile,
-          uploadFile.name,
-        );
-        this.checkSetDisplayValue(input, url);
-      } catch (error) {
-        console.log("handleFile error", error);
-        this.setState({ uploadingFile: false });
-      }
-    }
-  };
-
-  removeFile(input) {
-    const newState = {};
-
-    input.value = "";
-
-    const newInputs = _.clone(this.state.inputs);
-
-    if (newInputs.length > 1) {
-      newInputs.splice(newInputs.indexOf(input), 1);
-      if (
-        newInputs.length === this.props.limit - 1 &&
-        !_.isEmpty(newInputs[newInputs.length - 1].value)
-      ) {
-        // was full
-        newInputs.push(DEFAULT_INPUT);
-      }
-    }
-
-    newState.inputs = newInputs;
-
-    this.setState(newState);
-    // for single item
-    if (!_.isUndefined(this.props.refreshCallback)) {
-      this.props.refreshCallback();
-    }
-  }
-
-  renderInput(input, index, inputsLength) {
-    const renderContent = () => {
-      if (this.props.onlyAllowUpload) {
-        return null;
-      }
-      if (!_.isEmpty(input.value) && !input.uploadingFile) {
-        return (
-          <div className="imageInput_simpleContainer">
-            <div
-              className="imageInput_image"
-              style={{
-                ...this.props.style,
-                height:
-                  this.props.style && this.props.style.height
-                    ? this.props.style.height - 62
-                    : 80,
-              }}
-            >
-              <img
-                src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
-                className="imageInput_icon"
-                alt="file"
-              />
-              <p className="imageInput_text">{getFileName(input.value)}</p>
-            </div>
-            <Dropzone
-              accept={this.getAccept()}
-              onDrop={(files) => this.onDrop(files, true)}
-            >
-              {(state) => {
-                const { getRootProps, getInputProps } = state;
-                return (
-                  <div style={{ padding: 10 }} {...getRootProps()}>
-                    <input {...getInputProps()} />
-                    <Button
-                      buttonType="secondary"
-                      className="imageInput_button"
-                      disabled
-                    >
-                      Change file
-                    </Button>
-                  </div>
-                );
-              }}
-            </Dropzone>
-          </div>
-        );
-      }
-      return (
-        <div className="imageInput_image" style={{ ...this.props.style }}></div>
-      );
-    };
-
-    const renderRemove = () => {
-      return (
-        !this.props.disableRemove &&
-        !this.props.disabled &&
-        (this.props.simpleStyle ? (
-          <FontAwesome
-            name="remove"
-            className="imageInput_removeIcon"
-            onClick={this.removeFile.bind(this, input)}
-          />
-        ) : (
-          <p
-            className="imageInput_remove"
-            onClick={this.removeFile.bind(this, input)}
-          >
-            remove
-          </p>
-        ))
-      );
-    };
-
-    const renderDownload = () => {
-      if (this.props.noDownload) return null;
-      return (
-        <a href={input.value} target="_blank" className="imageInput_download">
-          <img
-            alt=""
-            className="dlicon"
-            src="https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:efbab8db-136a-446e-b14a-d00af0067841/public/025971e94153af280049fdf3e3/downloadicon.png"
-          ></img>
-        </a>
-      );
-    };
-
-    return (
-      <div
-        key={index}
-        className={this.getClassNames(input, inputsLength)}
-        style={{ ...this.props.style }}
-      >
-        <Dropzone accept={this.getAccept()} onDrop={this.onDrop}>
-          {(state) => {
-            const { getRootProps, getInputProps, isDragActive } = state;
-            return (
-              <div
-                className={`imageInput_upload ${this.getErrorState()}`}
-                style={{ ...this.props.style }}
-                {...getRootProps()}
-              >
-                <input {...getInputProps()} />
-                <div
-                  className={`${isDragActive ? "imageInput_dropZoneActive" : ""}`}
-                >
-                  {!this.props.simpleStyle && (
-                    <img
-                      src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
-                      className="imageInput_icon"
-                      alt="file"
-                    />
-                  )}
-                  <p className="imageInput_helpText">
-                    {isDragActive ? `Drop file here` : `Drag and drop file or`}
-                  </p>
-                  {!isDragActive && (
-                    <Button
-                      buttonType="secondary"
-                      className="imageInput_button"
-                      disabled
-                    >
-                      {this.props.multiple ? `Upload files` : `Upload a file`}
-                    </Button>
-                  )}
-                </div>
-              </div>
-            );
-          }}
-        </Dropzone>
-        <div className="imageInput_uploading" style={{ ...this.props.style }}>
-          <FontAwesome
-            className="spinner imageInput_spinner"
-            name="spinner fa-pulse fa-fw"
-          />
-        </div>
-        {renderContent()}
-        {renderRemove()}
-        {renderDownload()}
-      </div>
-    );
-  }
-
-  renderUploadFiles(inputs) {
-    return (
-      <div
-        className={`imageInputContainer clearfix ${inputs.length === 1 ? "imageInputContainer-noPadding" : ""} ${this.props.simpleStyle ? "imageInputContainer-simple" : ""
-          }`}
-        style={{ ...this.props.style }}
-      >
-        {inputs.map((input, index) => {
-          return this.renderInput(input, index, inputs.length);
-        })}
-      </div>
-    );
-  }
-
-  renderContent() {
-    return this.renderUploadFiles(this.state.inputs);
-  }
-
-  render() {
-    return <div style={this.props.containerStyle}>{this.renderContent()}</div>;
-  }
-}
-
-const mapStateToProps = () => {
-  return {};
-};
-
-const FileInput = connect(mapStateToProps, {}, null, { forwardRef: true })(
-  FileInputComponent,
-);
-export { FileInput };