@cloud-app-dev/vidc 2.0.0-alpha.1 → 2.0.0-alpha.13

package/es/Box/deps/grid-factory.js

@@ -0,0 +1,72 @@
+export function getGridClassName(grid) {
+  var classNames = [];
+
+  for (var k in grid) {
+    classNames.push("cloudapp-col-".concat(k, "-").concat(grid[k]));
+  }
+
+  return [].concat('cloudapp-col', classNames);
+}
+export function computedGrid(grid) {
+  var contentGrid = {
+    xxl: 0,
+    xl: 0,
+    lg: 0,
+    md: 0,
+    sm: 0,
+    xs: 0
+  };
+
+  if (Array.isArray(grid)) {
+    grid.forEach(function (item) {
+      for (var k in item) {
+        if (contentGrid[k]) {
+          contentGrid[k] = contentGrid[k] - item[k];
+        } else {
+          contentGrid[k] = 24 - item[k];
+        }
+      }
+    });
+  } else {
+    for (var k in grid) {
+      contentGrid[k] = 24 - grid[k];
+    }
+  }
+
+  for (var _k in contentGrid) {
+    if (contentGrid[_k] <= 0) {
+      contentGrid[_k] = 24;
+    }
+  }
+
+  return contentGrid;
+}
+export function computedCuurentGrid() {
+  var width = document.body.clientWidth;
+
+  if (width >= 1600) {
+    return 'xxl';
+  }
+
+  if (width >= 1200 && width < 1600) {
+    return 'xl';
+  }
+
+  if (width >= 992 && width < 1200) {
+    return 'lg';
+  }
+
+  if (width >= 768 && width < 992) {
+    return 'md';
+  }
+
+  if (width >= 576 && width < 768) {
+    return 'sm';
+  }
+
+  if (width < 576) {
+    return 'xs';
+  }
+
+  return undefined;
+}

package/es/Box/deps/simple-grid.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export default _default;

package/es/Box/deps/simple-grid.js

@@ -0,0 +1,8 @@
+export default {
+  xxl: 4,
+  xl: 6,
+  lg: 6,
+  md: 7,
+  sm: 24,
+  xs: 24
+};

package/es/Box/index.css

@@ -0,0 +1,9 @@
+.single-column-layout-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--content-box-bg);
+}
+.single-column-layout-container .single-column-content {
+  margin: 0 auto;
+  height: 100%;
+}

package/es/Box/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.less';
+export interface ContentBoxProps {
+    className?: string;
+    contentGrid?: any;
+    children?: React.ReactNode;
+}
+declare function Box({ className, contentGrid, children }: ContentBoxProps): JSX.Element;
+declare namespace Box {
+    var TwoColumnBox: typeof import("./TwoColumnBox").default;
+    var InfoBox: typeof import("./InfoBox").default;
+    var BetweenBox: typeof import("./BetweenBox").default;
+}
+export default Box;

package/es/Box/index.js

@@ -0,0 +1,28 @@
+import "antd/lib/col/style";
+import _Col from "antd/lib/col";
+import "antd/lib/row/style";
+import _Row from "antd/lib/row";
+import React from 'react';
+import TwoColumnBox from './TwoColumnBox';
+import InfoBox from './InfoBox';
+import defaultContentGrid from './deps/content-grid';
+import BetweenBox from './BetweenBox';
+import "./index.css";
+
+function Box(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$contentGrid = _ref.contentGrid,
+      contentGrid = _ref$contentGrid === void 0 ? defaultContentGrid : _ref$contentGrid,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(_Row, {
+    className: "single-column-layout-container ".concat(className)
+  }, /*#__PURE__*/React.createElement(_Col, Object.assign({
+    className: "single-column-content"
+  }, contentGrid), children));
+}
+
+Box.TwoColumnBox = TwoColumnBox;
+Box.InfoBox = InfoBox;
+Box.BetweenBox = BetweenBox;
+export default Box;

package/es/CheckGroupFixed/index.css

@@ -0,0 +1,49 @@
+.c-check-group-layout {
+  position: relative;
+}
+.c-check-group-layout .c-check-group-box {
+  padding: 10px;
+  display: flex;
+}
+.c-check-group-layout .check-label-box {
+  width: 80px;
+  color: #999;
+}
+.c-check-group-layout .check-content-box {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  height: 30px;
+}
+.c-check-group-layout .check-content-box .cloudapp-checkbox-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+}
+.c-check-group-layout .check-content-box .cloudapp-checkbox-group .cloudapp-checkbox-wrapper {
+  width: 120px;
+  margin-left: 0;
+  height: 30px;
+  display: flex;
+}
+.c-check-group-layout .check-content-box .cloudapp-checkbox-group .cloudapp-checkbox-wrapper > span:not(.cloudapp-checkbox) {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.c-check-group-layout .sider-mask {
+  position: fixed;
+  z-index: 98;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.c-check-group-layout .slice-btn {
+  color: var(--primary);
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+}

package/es/CheckGroupFixed/index.d.ts

@@ -0,0 +1,17 @@
+import './index.less';
+export interface SourceDictType {
+    value?: string | number;
+    label: string;
+    icon?: string;
+}
+interface ICheckGroupFixedProps {
+    label: string;
+    source: SourceDictType[];
+    onChange?: (keys: string[] & number[] & boolean[]) => void;
+    checboxSize?: number;
+    labelSize?: number;
+    cutRow?: number;
+    value?: string[] & number[] & boolean[];
+}
+declare function CheckGroupFixed({ label, source, checboxSize, cutRow, labelSize, value, onChange }: ICheckGroupFixedProps): JSX.Element;
+export default CheckGroupFixed;

package/es/CheckGroupFixed/index.js

@@ -0,0 +1,148 @@
+import "antd/lib/badge/style";
+import _Badge from "antd/lib/badge";
+import "antd/lib/checkbox/style";
+import _Checkbox from "antd/lib/checkbox";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import "./index.css";
+
+function CheckGroupFixed(_ref) {
+  var label = _ref.label,
+      source = _ref.source,
+      _ref$checboxSize = _ref.checboxSize,
+      checboxSize = _ref$checboxSize === void 0 ? 120 : _ref$checboxSize,
+      _ref$cutRow = _ref.cutRow,
+      cutRow = _ref$cutRow === void 0 ? 1 : _ref$cutRow,
+      _ref$labelSize = _ref.labelSize,
+      labelSize = _ref$labelSize === void 0 ? 100 : _ref$labelSize,
+      value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useState = useState({
+    visible: false,
+    sider: false,
+    pos: [0, 0],
+    w: 0,
+    selectKeys: value || []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var domRef = useRef(null);
+  useLayoutEffect(function () {
+    var _a, _b;
+
+    var contentEle = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.check-content-box');
+    var contentRect = (contentEle === null || contentEle === void 0 ? void 0 : contentEle.getBoundingClientRect()) || {
+      width: 0
+    };
+
+    if (contentRect.width < checboxSize * source.length) {
+      var lr = (_b = domRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          visible: true,
+          w: (lr === null || lr === void 0 ? void 0 : lr.width) || 0,
+          pos: [(lr === null || lr === void 0 ? void 0 : lr.x) || 0, (lr === null || lr === void 0 ? void 0 : lr.y) || 0]
+        });
+      });
+    }
+  }, [checboxSize, source.length]);
+  var fixedStyle = useMemo(function () {
+    return state.sider ? {
+      position: 'fixed',
+      width: state.w,
+      height: 'auto',
+      backgroundColor: 'white',
+      zIndex: 99,
+      boxShadow: ' 0 0 10px rgba(0,0,0,0.1)'
+    } : {};
+  }, [state.sider, state.w]);
+
+  _useUpdateEffect(function () {
+    return onChange && onChange(state.selectKeys);
+  }, [state.selectKeys]);
+
+  useLayoutEffect(function () {
+    var dom = domRef.current.querySelector('.check-box-group-layout');
+    dom === null || dom === void 0 ? void 0 : dom.setAttribute('style', "grid-template-columns:repeat(auto-fill, minmax(".concat(checboxSize, "px, 1fr));"));
+  }, [checboxSize]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "c-check-group-layout",
+    ref: domRef,
+    style: {
+      height: state.sider ? cutRow * 30 + 20 : 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "c-check-group-box",
+    style: fixedStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "check-label-box",
+    style: {
+      width: labelSize
+    }
+  }, label, "\uFF1A"), /*#__PURE__*/React.createElement("div", {
+    className: "check-content-box",
+    style: {
+      height: state.sider ? 'auto' : cutRow * 30
+    }
+  }, /*#__PURE__*/React.createElement(_Checkbox.Group, {
+    value: state.selectKeys,
+    className: "check-box-group-layout",
+    onChange: function onChange(keys) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          selectKeys: keys
+        });
+      });
+    }
+  }, source.map(function (v) {
+    return /*#__PURE__*/React.createElement(_Checkbox, {
+      style: {
+        width: checboxSize
+      },
+      key: v.value,
+      value: v.value
+    }, /*#__PURE__*/React.createElement("span", {
+      title: v.label
+    }, v.label));
+  }))), state.visible && /*#__PURE__*/React.createElement(_Badge, {
+    count: state.sider ? 0 : state.selectKeys.length,
+    size: "small",
+    offset: [10, 0]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slice-btn",
+    onClick: function onClick() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          sider: !state.sider
+        });
+      });
+    }
+  }, state.sider ? '收起' : '展开'))), state.sider && /*#__PURE__*/React.createElement("div", {
+    className: "sider-mask",
+    onClick: function onClick() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          sider: false
+        });
+      });
+    }
+  }));
+}
+
+export default CheckGroupFixed;

package/es/Config/index.js

@@ -1,13 +1,70 @@
 import produce from 'immer';
+import { insertThemeStyle } from './utils';
 var Config = {
-  app: produce([], function () {}),
+  app: produce({}, function () {}),
   bs: produce({}, function () {}),
-  feature: produce([], function () {}),
-  pFeature: produce([], function () {}),
-  registerConfig: function registerConfig(key, conf) {
-    Config[key] = produce(Config.AppConfig, function (draft) {
-      draft = conf;
+  features: produce([], function () {}),
+  featureIds: produce([], function () {}),
+  theme: produce({}, function () {}),
+  registerAppConfig: function registerAppConfig() {
+    var app = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    Config.app = produce(Config.app, function (draft) {
+      app.forEach(function (item) {
+        draft[item.routerPrefix] = item;
+      });
     });
+  },
+  registerFeatrueIds: function registerFeatrueIds() {
+    var featureIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    Config.featureIds = produce(Config.featureIds, function (draft) {
+      featureIds.forEach(function (id) {
+        var index = draft.findIndex(function (v) {
+          return v === id;
+        });
+
+        if (index === -1) {
+          draft.push(id);
+        } else {
+          draft[index] = id;
+        }
+      });
+    });
+  },
+  registerBSConfig: function registerBSConfig() {
+    var bs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    Config.bs = produce(Config.bs, function (draft) {
+      Object.keys(bs).forEach(function (key) {
+        draft[key] = bs[key];
+      });
+    });
+  },
+  registerPlatformFeature: function registerPlatformFeature() {
+    var features = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    Config.features = produce(Config.features, function (draft) {
+      features.forEach(function (item) {
+        var index = draft.findIndex(function (v) {
+          return v.id === item.id;
+        });
+
+        if (index === -1) {
+          draft.push(item);
+        } else {
+          draft[index] = item;
+        }
+      });
+    });
+  },
+  registerThemeConfig: function registerThemeConfig() {
+    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    insertThemeStyle(theme);
+    Config.theme = produce(Config.theme, function (draft) {
+      Object.keys(theme).forEach(function (key) {
+        draft[key] = theme[key];
+      });
+    });
+  },
+  getThemeVarValue: function getThemeVarValue(themeKey) {
+    return getComputedStyle(document.querySelector(':root')).getPropertyValue("--".concat(themeKey));
   }
 };
 

package/es/Config/interface.d.ts

@@ -17,23 +17,48 @@ export type FeatureItemType = {
   type: 1 | 2 | 3; //功能类型1：实际菜单，2：权限，3：虚拟分组
   interfaceCodes: string[];
   icon: string;
-  routerUrl: string;
+  routeUrl: string;
   sort: number;
+  children?: FeatureItemType[];
+  parentId?: string;
+  level?: number;
 };
 
 export type BSConfigType = {
   systemLogo: string;
   systemName: string;
+  parterLogo: string[];
+  loginBG: string;
   icp: string[];
   openSocket: boolean;
   chromeDownloadUrl: string;
+  AppTimeOut: number;
+  shortcut: string;
+  download: { chrome: string; player: string };
+  [key: string]: any;
+};
+
+export type ThemeInfoType = {
+  vars: { [key: string]: string[] };
+  style: {
+    menuType: 'inline' | 'horizontal';
+    hasTab: boolean;
+  };
 };
 
+export type ConfigKey = 'app' | 'feature' | 'featureIds' | 'bs' | 'theme';
+
 export type ConfigJOSN = {
-  app: AppItemType[];
-  feature: FeatureItemType[];
-  pFeature: FeatureItemType[];
+  app: { [key: string]: AppItemType };
+  features: FeatureItemType[];
+  featureIds: string[];
   bs: BSConfigType;
-  registerConfig: (key: string, conf: { [key: string]: any }) => void;
+  theme: ThemeInfoType;
+  registerAppConfig: (conf: AppItemType[]) => void;
+  registerFeatrueIds: (conf: string[]) => void;
+  registerBSConfig: (conf: BSConfigType) => void;
+  registerPlatformFeature: (conf: FeatureItemType[]) => void;
+  registerThemeConfig: (conf: ThemeInfoType) => void;
+  getThemeVarValue: (themeKey: string) => string;
   [key: string]: any;
 };

package/es/Config/utils.d.ts

@@ -1,11 +1,2 @@
-import { ConfigJOSN } from './interface';
-export declare function formartThemeConfig(options: ConfigJOSN): {
-    [x: string]: any;
-    app: import("./interface").AppItemType[];
-    feature: import("./interface").FeatureItemType[];
-    pFeature: import("./interface").FeatureItemType[];
-    bs: import("./interface").BSConfigType;
-    registerConfig: (key: string, conf: {
-        [key: string]: any;
-    }) => void;
-};
+import { ThemeInfoType } from './interface';
+export declare function insertThemeStyle(options: ThemeInfoType): void;

package/es/Config/utils.js

@@ -20,13 +20,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 var style = document.createElement('style');
 var isInit = false;
-export function formartThemeConfig(options) {
+export function insertThemeStyle(options) {
   var _ref;
 
   var tplStr = ':root{<content>}';
-  var data = Object.assign({}, options);
-  data.vars = {};
-  data.style = {};
 
   var attrArr = (_ref = []).concat.apply(_ref, _toConsumableArray(Object.values(options.vars)));
 
@@ -43,12 +40,4 @@ export function formartThemeConfig(options) {
     isInit = true;
     document.head.appendChild(style);
   }
-
-  if (options.style) {
-    Object.keys(options.style).forEach(function (k) {
-      data.style[k] = options.style[k];
-    });
-  }
-
-  return data;
 }

package/es/ConfigContext/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export interface IConfigContextProps {
+    /**
+     * @description 用于获取微应用顶层的dom节点
+     */
     root: HTMLElement;
 }
 declare const ConfigContext: React.Context<IConfigContextProps>;

package/es/DeviceIcon/icon.js

@@ -1,8 +1,8 @@
-import _Dict from "@cloud-app-dev/basic-components/es/Dict";
-
+import Dict from '../Dict';
 /**根据设备类型和状态获取设备展示图标 */
+
 export var getCameraTypeIcon = function getCameraTypeIcon(type, status) {
-  var _Dict$device = _Dict.device,
+  var _Dict$device = Dict.device,
       znxj = _Dict$device.znxj,
       qj = _Dict$device.qj,
       db = _Dict$device.db,
@@ -13,7 +13,7 @@ export var getCameraTypeIcon = function getCameraTypeIcon(type, status) {
       xfs = _Dict$device.xfs,
       znjg = _Dict$device.znjg,
       qt = _Dict$device.qt;
-  var _Dict$device2 = _Dict.device,
+  var _Dict$device2 = Dict.device,
       ptjk = _Dict$device2.ptjk,
       rlzp = _Dict$device2.rlzp,
       zpj = _Dict$device2.zpj,
@@ -127,7 +127,7 @@ export var getCameraTypeIcon = function getCameraTypeIcon(type, status) {
   }
 
   if (Object.keys(option).length === 0) {
-    console.debug('未获取到设备类型！返回默认');
+    console.debug('未获取到设备类型!,返回默认');
     option.color = !onLine ? '#ccc' : 'rgba(255, 156, 84, 1)';
     option.bgColor = !onLine ? '#ccc' : '#29CCCC';
     option.icon = 'icon-S_Point_CameraSmart';

package/es/DeviceIcon/index.js

@@ -1,6 +1,6 @@
-import _IconFont from "@cloud-app-dev/basic-components/es/IconFont";
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
+import IconFont from '../IconFont';
 import { getCameraTypeIcon } from './icon';
 import "./index.css";
 
@@ -27,7 +27,7 @@ function DeviceIcon(_a) {
   var iconClassName = useMemo(function () {
     return onLine ? onlineClass : offlineClass;
   }, [offlineClass, onLine, onlineClass]);
-  return /*#__PURE__*/React.createElement(_IconFont, Object.assign({
+  return /*#__PURE__*/React.createElement(IconFont, Object.assign({
     style: style,
     type: options.icon,
     className: "".concat(iconClassName, " ").concat(className ? className : '')

package/es/DeviceSelect/TreeType.d.ts

@@ -0,0 +1,6 @@
+interface ITreeTypeProps {
+    mode: string;
+    onChange: (mode: string) => void;
+}
+declare function TreeType({ mode, onChange }: ITreeTypeProps): JSX.Element;
+export default TreeType;

package/es/DeviceSelect/TreeType.js

@@ -0,0 +1,36 @@
+import "antd/lib/menu/style";
+import _Menu from "antd/lib/menu";
+import "antd/lib/dropdown/style";
+import _Dropdown from "antd/lib/dropdown";
+import React from 'react';
+import IconFont from '../IconFont';
+
+function TreeType(_ref) {
+  var mode = _ref.mode,
+      onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement(_Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(_Menu, {
+      onClick: function onClick(info) {
+        return onChange(info.key);
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Item, {
+      style: {
+        fontSize: 12
+      },
+      key: "Bz"
+    }, "\u8BBE\u5907\u4E1A\u52A1\u6811"), /*#__PURE__*/React.createElement(_Menu.Item, {
+      style: {
+        fontSize: 12
+      },
+      key: "Place"
+    }, "\u884C\u653F\u533A\u5212"))
+  }, /*#__PURE__*/React.createElement("span", null, mode === 'Place' ? '行政区划' : '设备业务树', " ", /*#__PURE__*/React.createElement(IconFont, {
+    style: {
+      position: 'relative',
+      top: 1
+    },
+    type: "icon-S_Arrow_BigDown"
+  })));
+}
+
+export default TreeType;

package/es/DeviceSelect/demo.js

@@ -10,11 +10,11 @@ function App() {
     style: {
       padding: 20,
       width: 1000,
-      height: 500
+      height: 700
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: 400
+      height: 660
     }
   }, /*#__PURE__*/React.createElement(DeviceSelect, null))));
 }

package/es/DeviceSelect/index.css

@@ -1,6 +1,11 @@
 .vidc-device-select-layout {
   height: 100%;
+  display: flex;
 }
-.vidc-device-select-layout > .cloudapp-col {
+.vidc-device-select-layout > div {
   height: 100%;
+  flex: 1;
+}
+.vidc-device-select-layout > div:first-child.bc-type-tree-layout {
+  border-right: none;
 }

package/es/DeviceSelect/index.d.ts

@@ -4,4 +4,9 @@ interface IDeviceSelectProps {
     selectDevices?: DeviceItemType[];
 }
 declare function DeviceSelect({ selectDevices }: IDeviceSelectProps): JSX.Element;
+declare namespace DeviceSelect {
+    var defaultProps: {
+        className: string;
+    };
+}
 export default DeviceSelect;