typescriptreact.json

{
  "Widget Starter": {
    "prefix": "widgetStarter",
    "body": [
      "",
      "import {subclass, property} from \"esri/core/accessorSupport/decorators\";",
      "",
      "import Widget from\"esri/widgets/Widget\";",
      "",
      "import {  tsx } from \"esri/widgets/support/widget\";",
      "",
      "const CSS = {",
      "  base: \"esri-${1:hello-world}\"",
      "};",
      "",
      "@subclass(\"esri.widgets.${2:HelloWorld}\")",
      "class ${2:HelloWorld} extends (Widget) {",
      "",
      "  //--------------------------------------------------------------------------",
      "  //",
      "  //  Properties",
      "  //",
      "  //--------------------------------------------------------------------------",
      "",
      "",
      "  //--------------------------------------------------------------------------",
      "  //",
      "  //  Public Methods",
      "  //",
      "  //--------------------------------------------------------------------------",
      "",
      "",
      "  render() {",
      "  ",
      "    return (",
      "      <div class={CSS.base}>",
      "   ",
      "      </div>",
      "      );",
      "  }",
      "",
      "  //--------------------------------------------------------------------------",
      "  //",
      "  //  Private Methods",
      "  //",
      "  //--------------------------------------------------------------------------",
      "",
      "}",
      "",
      "export = ${2:HelloWorld};"
    ],
    "description": "Widget Starter"
  },
  "Property": {
    "prefix": "property",
    "body": [
      "@property()",
      "view: ${1:propertyName};"
    ],
    "description": "Property"
  },
  "Constructor": {
    "prefix": "Constructor",
    "body": [
      " constructor(params) {",
      "    super(params);",
      "  }",
      ""
    ],
    "description": "Constructor"
  },
  "ReactViewComponent": {
    "prefix": "reactmap",
    "body": [
      "import React, { Component, createRef } from \"react\";",
      "",
      "import MapView from \"@arcgis/core/views/MapView\";",
      "import SceneView from \"@arcgis/core/views/SceneView\";",
      "",
      "import \"./View.scss\";",
      "",
      "interface ViewProps {",
      "  map: __esri.WebMap | __esri.WebScene;",
      "}",
      "",
      "const CSS = {",
      "  base: \"esri-view\"",
      "};",
      "",
      "const WEB_MAP = \"Web Map\";",
      "const WEB_SCENE = \"Web Scene\";",
      "",
      "class View extends Component<ViewProps, null> {",
      "  container = createRef() as React.RefObject<HTMLDivElement>;",
      "  view: __esri.MapView | __esri.SceneView = null;",
      "",
      "  constructor(props: ViewProps) {",
      "    super(props);",
      "  }",
      "",
      "  componentDidMount(): void {",
      "    this.init();",
      "  }",
      "",
      "  componentWillUnmount(): void {",
      "    this.view.destroy();",
      "    this.view = null;",
      "  }",
      "",
      "  render(): JSX.Element {",
      "    return <div className={CSS.base} ref={this.container} />;",
      "  }",
      "",
      "  async init(): Promise<void> {",
      "    const { map } = this.props;",
      "",
      "    if (!map) {",
      "      console.error(\"ERROR: NO MAP FOUND\");",
      "      return;",
      "    }",
      "",
      "    const { loaded } = map;",
      "",
      "    if (!loaded) {",
      "      await map.load();",
      "    }",
      "",
      "    this.createView();",
      "  }",
      "",
      "  createView(): void {",
      "    const { map } = this.props;",
      "    const { type } = map.portalItem;",
      "    const viewConfig = { map, container: this.container.current };",
      "    const view =",
      "      type === WEB_MAP",
      "        ? new MapView(viewConfig)",
      "        : type === WEB_SCENE",
      "        ? new SceneView(viewConfig)",
      "        : null;",
      "",
      "    if (!view) {",
      "      console.error(\"ERROR: UNABLE TO CREATE VIEW\");",
      "      return;",
      "    }",
      "",
      "    this.view = view;",
      "  }",
      "}",
      "",
      "export default View;",
      ""
    ],
    "description": "react component "
  }

}