0

我想根据按钮单击来切换表中的某些列。单击按钮时，列应从右侧淡入，单击按钮时应从右侧淡出。我正在使用 react-animated-CSS，由于某种原因，我无法让动画正常工作。我还将该animate.css文件包含在我的 index.js 中。需要切换的列是最后 3 个。

这是我的代码：

索引.js

import React, { Component } from "react";
import { render } from "react-dom";
import Rows from "./Rows";
import { Box, Flex } from "@rebass/grid";
import classnames from "classnames";
import {
  Button,
  Classes,
  Dialog,
  FormGroup,
  InputGroup,
  Intent,
  HTMLTable,
  Text,
  Icon
} from "@blueprintjs/core";
import "normalize.css/normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./style.css";
import { Animated } from "react-animated-css";
import { find, get, map, trim } from "lodash";
import dimensions from "./dimensions.json";
import "animate.css/animate.css";

const tableHeaderClasses = classnames(Classes.TEXT_MUTED);

class App extends Component {
  constructor() {
    super();
    this.state = {
      areColumnsVisible: false,
      editedOutput: {
        id: 200,
        Dimension_Aggregation_BlockID: 7758,
        ModelInstanceID: 453,
        Name: "Actual Reported Sales ($MM)",
        Timescale_Aggregation_BlockID: 7759,
        FormatParameterID: 16619,
        dimensionMapping: [
          {
            Dimension_Total_2: 0,
            id: 8598,
            ModelInstanceID: 453,
            Dimension_Total_1: 0,
            OutputID: 200,
            DimensionID: 894,
            Reporting_Flag: 0,
            Dimension_Total_3: 0,
            Aggregation_Flag: 0,
            output: {
              id: 200,
              ModelInstanceID: 453
            }
          },
          {
            Dimension_Total_2: 0,
            id: 8599,
            ModelInstanceID: 453,
            Dimension_Total_1: 0,
            OutputID: 200,
            DimensionID: 891,
            Reporting_Flag: 1,
            Dimension_Total_3: 0,
            Aggregation_Flag: 1,
            output: {
              id: 200,
              ModelInstanceID: 453
            }
          },
          {
            Dimension_Total_2: 0,
            id: 8600,
            ModelInstanceID: 453,
            Dimension_Total_1: 0,
            OutputID: 200,
            DimensionID: 892,
            Reporting_Flag: 1,
            Dimension_Total_3: 0,
            Aggregation_Flag: 1,
            output: {
              id: 200,
              ModelInstanceID: 453
            }
          },
          {
            Dimension_Total_2: 0,
            id: 8601,
            ModelInstanceID: 453,
            Dimension_Total_1: 0,
            OutputID: 200,
            DimensionID: 893,
            Reporting_Flag: 1,
            Dimension_Total_3: 0,
            Aggregation_Flag: 1,
            output: {
              id: 200,
              ModelInstanceID: 453
            }
          }
        ]
      }
    };
  }

  handleDimensionsColumnVisibility = () => {
    this.setState({
      areDimensionsColumnsVisible: !this.state.areDimensionsColumnsVisible
    });
  };

  handleDimensionMappingChange = dimensionMapping => {
    this.setState({
      editedOutput: {
        ...this.state.editedOutput,
        dimensionMapping: this.state.editedOutput.dimensionMapping
          .filter(
            mapping => mapping.DimensionID !== dimensionMapping.DimensionID
          )
          .concat(dimensionMapping)
      }
    });
  };

  render() {
    return (
      <Flex>
        <Box width="95%">
          <HTMLTable className="edit-output-dimensions-table">
            <thead>
              <tr>
                <th>
                  <Box>
                    <Text className={tableHeaderClasses}>Dimension</Text>
                  </Box>
                </th>
                <th>
                  <Box>
                    <Text className={tableHeaderClasses}>Report</Text>
                  </Box>
                </th>
                <th>
                  <Box>
                    <Text className={tableHeaderClasses}>Aggregate</Text>
                  </Box>
                </th>
                <th>
                  <Animated
                    animationIn="fadeInRight"
                    animationOut="fadeOutRight"
                    isVisible={this.state.areColumnsVisible}
                    animationInDuration={1000}
                    animationOutDuration={1000}
                  >
                    <Box>
                      <Text className={tableHeaderClasses}>
                        Dimension Total 1
                      </Text>
                    </Box>
                  </Animated>
                </th>
                <th>
                  <Animated
                    animationIn="fadeInRight"
                    animationOut="fadeOutRight"
                    isVisible={this.state.areColumnsVisible}
                    animationInDuration={1000}
                    animationOutDuration={1000}
                  >
                    <Box>
                      <Text className={tableHeaderClasses}>
                        Dimension Total 2
                      </Text>
                    </Box>
                  </Animated>
                </th>
                <th>
                  <Animated
                    animationIn="fadeInRight"
                    animationOut="fadeOutRight"
                    isVisible={this.state.areColumnsVisible}
                    animationInDuration={1000}
                    animationOutDuration={1000}
                  >
                    <Box>
                      <Text className={tableHeaderClasses}>
                        Dimension Total 3
                      </Text>
                    </Box>
                  </Animated>
                </th>
              </tr>
            </thead>
            <tbody>
              {map(dimensions, (dimension, idx) => {
                const dimensionMapping = find(
                  this.state.editedOutput.dimensionMapping,
                  mapping => mapping.DimensionID === dimension.id
                );
                return (
                  dimensionMapping && (
                    <Rows
                      key={`${dimension.id}-${idx}`}
                      dimension={dimension}
                      dimensionMapping={dimensionMapping}
                      onChange={this.handleDimensionMappingChange}
                      isLowestDimension={idx === dimensions.length - 1}
                      areDimensionsColumnsVisible={
                        this.state.areDimensionsColumnsVisible
                      }
                    />
                  )
                );
              })}
            </tbody>
          </HTMLTable>
        </Box>
        <Box width="5%" alignSelf="center">
          <Button onClick={this.handleDimensionsColumnVisibility}>
            <Icon
              icon={
                this.state.areDimensionsColumnsVisible
                  ? "double-chevron-left"
                  : "double-chevron-right"
              }
            />
          </Button>
        </Box>
      </Flex>
    );
  }
}

render(<App />, document.getElementById("root"));

行.jsx

import * as React from "react";
import { Box } from "@rebass/grid";
import { Checkbox, Text } from "@blueprintjs/core";
import { Animated } from "react-animated-css";

import { Dimension, OutputDimensionMapping } from "../../../../types/models";

class Rows extends React.Component {
  render() {
    const {
      dimension,
      dimensionMapping,
      isLowestDimension,
      areDimensionsColumnsVisible
    } = this.props;

    return (
      <tr>
        <td>
          <Box>
            <Text>{dimension.Name}</Text>
          </Box>
        </td>
        <td>
          <Box>
            <Checkbox
              defaultChecked={dimensionMapping.Reporting_Flag === 1}
              onChange={this.handleReportingFlagChange}
            />
          </Box>
        </td>
        <td>
          <Box>
            <Checkbox
              defaultChecked={dimensionMapping.Aggregation_Flag === 1}
              onChange={this.handleAggregationFlagChange}
              disabled={isLowestDimension}
            />
          </Box>
        </td>
        <td>
          <Animated
            animationIn="fadeInRight"
            animationOut="fadeOutRight"
            isVisible={areDimensionsColumnsVisible}
            animationInDuration={1000}
            animationOutDuration={1000}
          >
            <Box>
              <Checkbox
                defaultChecked={dimensionMapping.Dimension_Total_1 === 1}
                onChange={this.handleDimensionTotalChangeOne}
              />
            </Box>
          </Animated>
        </td>
        <td>
          <Animated
            animationIn="fadeInRight"
            animationOut="fadeOutRight"
            isVisible={areDimensionsColumnsVisible}
            animationInDuration={1000}
            animationOutDuration={1000}
          >
            <Box>
              <Checkbox
                defaultChecked={dimensionMapping.Dimension_Total_2 === 1}
                onChange={this.handleDimensionTotalChangeTwo}
              />
            </Box>
          </Animated>
        </td>
        <td>
          <Animated
            animationIn="fadeInRight"
            animationOut="fadeOutRight"
            isVisible={areDimensionsColumnsVisible}
            animationInDuration={1000}
            animationOutDuration={1000}
          >
            <Box>
              <Checkbox
                defaultChecked={dimensionMapping.Dimension_Total_3 === 1}
                onChange={this.handleDimensionTotalChangeThree}
              />
            </Box>
          </Animated>
        </td>
      </tr>
    );
  }

  handleReportingFlagChange = e =>
    this.props.onChange({
      ...this.props.dimensionMapping,
      Reporting_Flag: e.currentTarget.checked ? 1 : 0
    });

  handleAggregationFlagChange = e =>
    this.props.onChange({
      ...this.props.dimensionMapping,
      Aggregation_Flag: e.currentTarget.checked ? 1 : 0
    });

  handleDimensionTotalChangeOne = e =>
    this.props.onChange({
      ...this.props.dimensionMapping,
      Dimension_Total_1: e.currentTarget.checked ? 1 : 0
    });

  handleDimensionTotalChangeTwo = e =>
    this.props.onChange({
      ...this.props.dimensionMapping,
      Dimension_Total_2: e.currentTarget.checked ? 1 : 0
    });

  handleDimensionTotalChangeThree = e =>
    this.props.onChange({
      ...this.props.dimensionMapping,
      Dimension_Total_3: e.currentTarget.checked ? 1 : 0
    });
}

export default Rows;

Stackblitz 链接

PS：我也愿意使用其他支持 Typescript 的动画库。谢谢

4

0 回答 0