梵总发布的帖子

梵

https://www.d3-graph-gallery.com/graph/custom_annotation.html

梵

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
      integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      /* On mouse hover, lighten state color */
      /* path:hover {
        fill-opacity: 0.7;
      } */

      div.markets {
        fill-opacity: 0.8;
      }

      /* Style for Custom Tooltip */
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }

      /* Legend Font Style */
      body {
        font: 11px sans-serif;
      }

      /* Legend Position Style */
      .legend {
        position: absolute;
        left: 800px;
        top: 350px;
      }
    </style>
  </head>
  <body>
    <button id="select-vq">VQ Markets</button>
    <button id="select-wtw">WTW Markets</button>
    <button id="select-aon">AON Markets</button>
    <button id="select-mercer">MERCER Markets</button>
    <button id="hide-markets">Hide Markets</button>

    <script type="text/javascript">
      /*  This visualization was made possible by modifying code provided by:

            Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
            https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

            Malcolm Maclean, tooltips example tutorial
            http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

            Mike Bostock, Pie Chart Legend
            http://bl.ocks.org/mbostock/3888852  */

      "use strict";

      //Width and height of map
      var width = 960;
      var height = 500; // D3 Projection

      var projection = d3
        .geoAlbersUsa()
        // .albersUsa()
        .translate([width / 2, height / 2]) // translate to center of screen
        .scale([1000]); // scale things down so see entire US
      // Define path generator

      var path = d3
        .geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection
      // Define linear scale for output

      var color = d3
        .scaleLinear()
        .range([
          "rgb(213,222,217)",
          "rgb(69,173,168)",
          "rgb(84,36,55)",
          "rgb(217,91,67)",
        ]);
      var legendText = [
        "Cities Lived",
        "States Lived",
        "States Visited",
        "Nada",
      ]; //Create SVG element and append map to the SVG

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height); // Append Div for tooltip to SVG

      var div = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
      var layer1 = svg.append("g");
      var layer2 = svg.append("g");
      var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data

      var offsets = {
        VT: [0, 50],
        NH: [15, 35],
        MA: [20, 25],
        RI: [28, 20],
        CT: [35, 10],
        NJ: [34, 20],
        DE: [33, 30],
        MD: [47, 35],
        DC: [49, 21],
      };

      d3.json("us-states-abbr.json", function (statejson) {
        layer1
          .selectAll("path")
          .data(statejson.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("stroke", "#cc0000")
          .style("stroke-width", "1")
          .style("fill", "none");

        var smalllStates = statejson.features.filter((item) =>
          _.has(offsets, item.properties.abbr)
        );

        smalllStates.forEach((item) => {
          var x = path.centroid(item)[0];
          var y = path.centroid(item)[1];

          var abbr = item.properties.abbr;

          var offset = offsets[abbr];

          var annotations = [
            {
              note: {
                label: abbr,
              },
              x: x,
              y: y,
              dy: offset[0],
              dx: offset[1],
            },
          ];

          // Add annotation to the chart
          const makeAnnotations = d3.annotation().annotations(annotations);
          svg.append("g").call(makeAnnotations);
        });

        var bigStates = statejson.features.filter(
          (item) => !_.has(offsets, item.properties.abbr)
        );

        svg
          .append("g")
          .attr("class", "states-names")
          .selectAll("text")
          .data(bigStates)
          .enter()
          .append("svg:text")
          .text(function (d) {
            return d.properties.abbr;
          })
          .attr("x", function (d) {
            console.log(path.centroid(d));
            return path.centroid(d)[0];
          })
          .attr("y", function (d) {
            return path.centroid(d)[1];
          })
          .attr("text-anchor", "middle")
          .attr("fill", "black");
      });

      // const annotations = [
      //   {
      //     note: {
      //       label: "Here is the annotation label",
      //       title: "Annotation title",
      //     },
      //     x: 562,
      //     y: 143,
      //     dy: 200,
      //     dx: 200,
      //   },
      // ];

      // // Add annotation to the chart
      // const makeAnnotations = d3.annotation().annotations(annotations);
      // svg.append("g").call(makeAnnotations);

      var items = ["#cc0000", "#00cc00", "#0000cc"];
      // d3.json("mercerMarkets.json", function (vqs) {
      //   vqs.forEach(function (vq) {
      //     var nlayer = svg.append("g").attr("class", "markets");
      //     // var color = items[Math.floor(Math.random() * items.length)];
      //     var color = vq.color;
      //     var file = vq.file;
      //     d3.json(file, function (json) {
      //       var features = [json];
      //       nlayer
      //         .selectAll("path")
      //         .data(features)
      //         .enter()
      //         .append("path")
      //         .attr("class", "markets")
      //         .attr("d", path)
      //         .style("stroke", "#ccc")
      //         .style("stroke-width", "1")
      //         .style("fill", color)
      //         .style("opacity", "0.8");
      //     });
      //   });
      // });
      document
        .getElementById("select-vq")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("vqMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("hide-markets")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
        });
      document
        .getElementById("select-wtw")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("wtwMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;

              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-aon")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("aonMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-mercer")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("mercerMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });
    </script>
  </body>
</html>

梵

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
      integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      /* On mouse hover, lighten state color */
      /* path:hover {
        fill-opacity: 0.7;
      } */

      div.markets {
        fill-opacity: 0.8;
      }

      /* Style for Custom Tooltip */
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }

      /* Legend Font Style */
      body {
        font: 11px sans-serif;
      }

      /* Legend Position Style */
      .legend {
        position: absolute;
        left: 800px;
        top: 350px;
      }
    </style>
  </head>
  <body>
    <button id="select-vq">VQ Markets</button>
    <button id="select-wtw">WTW Markets</button>
    <button id="select-aon">AON Markets</button>
    <button id="select-mercer">MERCER Markets</button>
    <button id="hide-markets">Hide Markets</button>

    <script type="text/javascript">
      /*  This visualization was made possible by modifying code provided by:

            Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
            https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

            Malcolm Maclean, tooltips example tutorial
            http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

            Mike Bostock, Pie Chart Legend
            http://bl.ocks.org/mbostock/3888852  */

      "use strict";

      //Width and height of map
      var width = 960;
      var height = 500; // D3 Projection

      var projection = d3
        .geoAlbersUsa()
        // .albersUsa()
        .translate([width / 2, height / 2]) // translate to center of screen
        .scale([1000]); // scale things down so see entire US
      // Define path generator

      var path = d3
        .geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection
      // Define linear scale for output

      var color = d3
        .scaleLinear()
        .range([
          "rgb(213,222,217)",
          "rgb(69,173,168)",
          "rgb(84,36,55)",
          "rgb(217,91,67)",
        ]);
      var legendText = [
        "Cities Lived",
        "States Lived",
        "States Visited",
        "Nada",
      ]; //Create SVG element and append map to the SVG

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height); // Append Div for tooltip to SVG

      var div = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
      var layer1 = svg.append("g");
      var layer2 = svg.append("g");
      var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data

      var offsets = {
        VT: [0, 50],
        NH: [15, 35],
        MA: [20, 25],
        RI: [28, 20],
        CT: [35, 10],
        NJ: [34, 20],
        DE: [33, 30],
        MD: [47, 35],
        DC: [49, 21],
      };

      d3.json("us-states-abbr.json", function (statejson) {
        layer1
          .selectAll("path")
          .data(statejson.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("stroke", "#cc0000")
          .style("stroke-width", "1")
          .style("fill", "none");

        var smalllStates = statejson.features.filter((item) =>
          _.has(offsets, item.properties.abbr)
        );

        smalllStates.forEach((item) => {
          var x = path.centroid(item)[0];
          var y = path.centroid(item)[1];

          var abbr = item.properties.abbr;

          var offset = offsets[abbr];

          var annotations = [
            {
              note: {
                label: abbr,
              },
              x: x,
              y: y,
              dy: offset[0],
              dx: offset[1],
            },
          ];

          // Add annotation to the chart
          const makeAnnotations = d3.annotation().annotations(annotations);
          svg.append("g").call(makeAnnotations);
        });

        var bigStates = statejson.features.filter(
          (item) => !_.has(offsets, item.properties.abbr)
        );

        svg
          .append("g")
          .attr("class", "states-names")
          .selectAll("text")
          .data(bigStates)
          .enter()
          .append("svg:text")
          .text(function (d) {
            return d.properties.abbr;
          })
          .attr("x", function (d) {
            console.log(path.centroid(d));
            return path.centroid(d)[0];
          })
          .attr("y", function (d) {
            return path.centroid(d)[1];
          })
          .attr("text-anchor", "middle")
          .attr("fill", "black");
      });

      // const annotations = [
      //   {
      //     note: {
      //       label: "Here is the annotation label",
      //       title: "Annotation title",
      //     },
      //     x: 562,
      //     y: 143,
      //     dy: 200,
      //     dx: 200,
      //   },
      // ];

      // // Add annotation to the chart
      // const makeAnnotations = d3.annotation().annotations(annotations);
      // svg.append("g").call(makeAnnotations);

      var items = ["#cc0000", "#00cc00", "#0000cc"];
      // d3.json("mercerMarkets.json", function (vqs) {
      //   vqs.forEach(function (vq) {
      //     var nlayer = svg.append("g").attr("class", "markets");
      //     // var color = items[Math.floor(Math.random() * items.length)];
      //     var color = vq.color;
      //     var file = vq.file;
      //     d3.json(file, function (json) {
      //       var features = [json];
      //       nlayer
      //         .selectAll("path")
      //         .data(features)
      //         .enter()
      //         .append("path")
      //         .attr("class", "markets")
      //         .attr("d", path)
      //         .style("stroke", "#ccc")
      //         .style("stroke-width", "1")
      //         .style("fill", color)
      //         .style("opacity", "0.8");
      //     });
      //   });
      // });
      document
        .getElementById("select-vq")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("vqMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("hide-markets")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
        });
      document
        .getElementById("select-wtw")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("wtwMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;

              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-aon")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("aonMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-mercer")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("mercerMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });
    </script>
  </body>
</html>

梵

componentDidMount() {
this.login();
window.history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.onBack);
//Ping the server every 31 minutes to see if the session is still alive
this.interval = setInterval(
() => this.sessionManager.ping(),
SESSION_TIMEOUT
);
}

componentWillUnmount() {
clearInterval(this.interval);
}

onBack() {
if (this.state.selectedNetwork) {
this.onSelectNetwork(null);
}
window.history.pushState(null, null, document.URL);
}

梵

Start from here for some basic example using D3:
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

梵

This is amazing website for geoJSON topoJSON, shape and beyond:
https://mapshaper.org/

梵

var items = [
   '#cc0000','#00cc00', '#0000cc'
];


for(var i=0; i < 100; i++ ) {

	let nlayer = svg.append('g');

	let color = items[Math.floor(Math.random() * items.length)];
	if (i<10){
		j = "00" + i;
	}
	else {
		j = "0" + i;
	}

	console.log(j, color);
	d3.json("https://api.deniapps.com/zip3?zip3="+j, function(json) {
	const features = json.data;
	nlayer.selectAll("path")
	.data(features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("stroke", "#ccc")
	.style("stroke-width", "1")
	.style("fill", color)

});

}

梵

https://egghead.io/lessons/react-update-data-using-the-apollo-mutation-component

梵

独裁世界，我们被洗脑。
然而有观点，必然有偏见。
自由世界里，虽然我们可以听到两种声音，但是谁对谁错，依然使我们困惑和迷失！

梵

git checkout master
git reset --hard e3f1e37
git push --force origin master
# Then to prove it (it won't print any diff)
git diff master..origin/master

梵

https://maxschmitt.me/posts/next-js-http-only-cookie-auth-tokens/

梵

http://www.med.umich.edu/pdf/grief/ChineseBereavementBook.pdf

梵

https://www.howtographql.com/

梵

101 Javascript Questions: http://blog.canumeet.com/2016/09/16/101-javascript-interview-question/
Helpful Examples: http://www.sitepoint.com/5-typical-javascript-interview-exercises/
Learn JavaScript | MDN: https://developer.mozilla.org/en-US/Learn/JavaScript
Video: Douglas Crockford, "Advanced JavaScript:" https://www.youtube.com/watch?v=DwYPG6vreJg
Eloquent JavaScript: http://eloquentjavascript.net/
Learning Advanced JavaScript: http://ejohn.org/apps/learn/
JavaScript Garden: http://bonsaiden.github.io/JavaScript-Garden/

Additional FB related links
Facebook Bootcamp:
https://www.facebook.com/photo.php?v=10150411360573109
Facebook Engineering and Open Source:
https://code.facebook.com
https://code.facebook.com/projects
https://code.facebook.com/frontend
Facebook News and Statistics:
http://newsroom.fb.com
React:
http://facebook.github.io/react
http://facebook.github.io/react/blog/2013/06/05/why-react.html

梵

这两篇文章不错：
https://medium.com/@rossbulat/how-to-use-react-refs-4541a7501663
https://medium.com/@rossbulat/react-using-refs-with-the-useref-hook-884ed25b5c29

梵

@梵总 ./components/Common/CKEditor.js
Module not found: Can't resolve '../../lib/ckeditor5-build-dna' in '/Users/dcai/Projects/next-feathers/next/components/Common'
could be folder naming issue.

梵

Weird!
The code block version is 19.0.0 or 20.0.0?
npm install --save @ckeditor/ckeditor5-code-block
installed 20.0.0 which is not compatible to archived https://github.com/ckeditor/ckeditor5-build-classic (up to 19.0.0)
Which causes ckeditor-duplicated-modules

梵

Module not found: Can't resolve '../../lib/ckeditor5-build-dna' in '/Users/dcai/Projects/next-feathers/next/components/Common'

Because missing package.json

梵

Use PATH instead of PUT, because PUT is idempotent.
To use PUT, you have to put in all fields exception timestamp, but timestamp will never been updated.
Use PATH to update partial data, and updatedAt will be automatically updated.

梵

import React from "react";
import { withApollo } from "react-apollo";
// import S3FileUpload from "react-s3";
import S3 from "aws-s3";
// import { Link } from "react-router-dom";

// material-ui icons
// import Assignment from "@material-ui/icons/Assignment";
import CloudUploadIcon from "@material-ui/icons/CloudUpload";
// core components

import Button from "components/CustomButtons/Button.jsx";

// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";

// core components
import FormControl from "@material-ui/core/FormControl";
import regularFormsStyle from "assets/jss/material-dashboard-pro-react/views/regularFormsStyle";

import { GET_SECRET } from "../../graphql/User";
import { CHECK_FILE } from "../../graphql/FileManager";
import { RUN } from "../../graphql/Command";

import config from "../../config";

class Upload extends React.Component {
  state = {
    awsS3Config: {}
  };
  handleChangeFile = async event => {
    console.log(this.state.awsS3Config);
    const file = event.target.files[0];
    console.log(file);
    const fileName = file.name.trim().replace(/[^a-zA-Z0-9.]+/g, "-");
    //8233-2.jpg
    const newFileName = fileName
      .split(".")
      .slice(0, -1)
      .join(".");
    //8233-2;

    const newFile = new File([file], fileName, { type: file.type });
    const S3Client = new S3({
      ...this.state.awsS3Config,
      s3Url: config.s3.BASE_URL
    });
    S3Client.uploadFile(newFile, newFileName)
      .then(async res => {
        // console.log(res);
        let fileUrl = res.location;
        if (config.s3.COULD_URL) {
          fileUrl = fileUrl.replace(config.s3.BASE_URL, config.s3.COULD_URL);
        }
        const filePath = res.key;

        if (process.env.REACT_APP_N_ENV === "stage") {
          const { data } = await this.props.client.query({
            query: CHECK_FILE,
            variables: { fileUrl: fileUrl }
          });
          // console.log(data);
          const fileExist = data.checkFile;
          if (fileExist) {
            await this.props.client.query({
              query: RUN,
              variables: { command: "invalidate", filePath: filePath }
            });
          }
        }
        this.props.handleFileUploaded({
          url: fileUrl,
          size: file.size,
          fileType: file.type
        });
      })
      .catch(err => console.log(err));
    //Make a request to server and send formData
  };

  async componentDidMount() {
    const { data } = await this.props.client.query({
      query: GET_SECRET,
      fetchPolicy: "network-only",
      variables: { secretId: config.awsS3 }
    });
    this.setState({
      awsS3Config: JSON.parse(data.getSecret)
    });
  }

  render() {
    const { classes } = this.props;
    return (
      <FormControl>
        <input
          className={classes.input}
          id="contained-button-file"
          multiple
          type="file"
          onChange={this.handleChangeFile}
          style={{ display: "none" }}
        />
        <label htmlFor="contained-button-file">
          <Button variant="contained" component="span">
            Upload <CloudUploadIcon className={classes.rightIcon} />
          </Button>
        </label>
      </FormControl>
    );
  }
}

export default withApollo(withStyles(regularFormsStyle)(Upload));

梵总 发布的帖子

梵总发布的帖子