Added a form component to @grafana/ui

98d26354 · Torkel Ödegaard · 2dfa3269 · 98d26354 · 98d26354 · 98d26354
Commit 98d26354 authored Dec 25, 2018 by Torkel Ödegaard
14 changed files
--- a/package.json
+++ b/package.json
@@ -20,12 +20,13 @@
    "@types/d3": "^4.10.1",
    "@types/enzyme": "^3.1.13",
    "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
    "@types/node": "^8.0.31",
    "@types/react": "^16.7.6",
    "@types/react-custom-scrollbars": "^4.0.5",
    "@types/react-dom": "^16.0.9",
    "@types/react-select": "^2.0.4",
-    "@types/jquery": "^1.10.35",
+    "@types/classnames": "^2.2.6",
    "angular-mocks": "1.6.6",
    "autoprefixer": "^6.4.0",
    "axios": "^0.17.1",
@@ -94,6 +95,7 @@
    "tslib": "^1.9.3",
    "tslint": "^5.8.0",
    "tslint-loader": "^3.5.3",
+    "tslint-react": "^3.6.0",
    "typescript": "^3.0.3",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "4.19.1",
@@ -146,7 +148,7 @@
    "angular-sanitize": "1.6.6",
    "baron": "^3.0.3",
    "brace": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
    "clipboard": "^1.7.1",
    "d3": "^4.11.0",
    "d3-scale-chromatic": "^1.3.0",
@@ -184,8 +186,7 @@
    "slate-react": "^0.12.4",
    "tether": "^1.4.0",
    "tether-drop": "https://github.com/torkelo/drop/tarball/master",
-    "tinycolor2": "^1.4.1",
+    "tinycolor2": "^1.4.1"
-    "tslint-react": "^3.6.0"
  },
  "resolutions": {
    "caniuse-db": "1.0.30000772",

--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -11,7 +11,8 @@
  "license": "ISC",
  "dependencies": {
    "@torkelo/react-select": "2.1.1",
-    "@types/jquery": "^1.10.35",
+    "classnames": "^2.2.5",
+    "jquery": "^3.2.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "react": "^16.6.3",
@@ -25,6 +26,8 @@
    "@types/jest": "^23.3.2",
    "@types/lodash": "^4.14.119",
    "@types/react": "^16.7.6",
+    "@types/classnames": "^2.2.6",
+    "@types/jquery": "^1.10.35",
    "typescript": "^3.2.2"
  }
 }
--- a/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx
+++ b/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx
+import React, { SFC, ReactNode } from 'react';
+import classNames from 'classnames';
+interface Props {
+  children: ReactNode;
+  htmlFor?: string;
+  className?: string;
+  isFocused?: boolean;
+  isInvalid?: boolean;
+}
+export const GfFormLabel: SFC<Props> = ({ children, isFocused, isInvalid, className, htmlFor, ...rest }) => {
+  const classes = classNames('gf-form-label', className, {
+    'gf-form-label--is-focused': isFocused,
+    'gf-form-label--is-invalid': isInvalid,
+  });
+  return (
+    <label className={classes} {...rest} htmlFor={htmlFor}>
+      {children}
+    </label>
+  );
+};
--- a/packages/grafana-ui/src/forms/index.ts
+++ b/packages/grafana-ui/src/forms/index.ts
+export { GfFormLabel } from './GfFormLabel/GfFormLabel';
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -2,3 +2,4 @@ export * from './components';
 export * from './visualizations';
 export * from './types';
 export * from './utils';
+export * from './forms';
--- a/public/app/core/components/Form/Element.tsx
+++ b/public/app/core/components/Form/Element.tsx
-import React, { PureComponent, ReactNode, ReactElement } from 'react';
-import { Label } from './Label';
-import { uniqueId } from 'lodash';
-interface Props {
-  label?: ReactNode;
-  labelClassName?: string;
-  id?: string;
-  children: ReactElement<any>;
-}
-export class Element extends PureComponent<Props> {
-  elementId: string = this.props.id || uniqueId('form-element-');
-  get elementLabel() {
-    const { label, labelClassName } = this.props;
-    if (label) {
-      return (
-        <Label htmlFor={this.elementId} className={labelClassName}>
-          {label}
-        </Label>
-      );
-    }
-    return null;
-  }
-  get children() {
-    const { children } = this.props;
-    return React.cloneElement(children, { id: this.elementId });
-  }
-  render() {
-    return (
-      <div className="our-custom-wrapper-class">
-        {this.elementLabel}
-        {this.children}
-      </div>
-    );
-  }
-}
--- a/public/app/core/components/Form/Label.tsx
+++ b/public/app/core/components/Form/Label.tsx
-import React, { PureComponent, ReactNode } from 'react';
-interface Props {
-  children: ReactNode;
-  htmlFor?: string;
-  className?: string;
-}
-export class Label extends PureComponent<Props> {
-  render() {
-    const { children, htmlFor, className } = this.props;
-    return (
-      <label className={`custom-label-class ${className || ''}`} htmlFor={htmlFor}>
-        {children}
-      </label>
-    );
-  }
-}
--- a/public/app/core/components/Form/index.ts
+++ b/public/app/core/components/Form/index.ts
-export { Element } from './Element';
 export { Input } from './Input';
-export { Label } from './Label';
--- a/public/app/features/alerting/AlertRuleItem.tsx
+++ b/public/app/features/alerting/AlertRuleItem.tsx
 import React, { PureComponent } from 'react';
 import Highlighter from 'react-highlight-words';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import { AlertRule } from '../../types';
 export interface Props {
@@ -23,7 +23,7 @@ class AlertRuleItem extends PureComponent<Props> {
  render() {
    const { rule, onTogglePause } = this.props;
-    const stateClass = classNames({
+    const iconClassName = classNames({
      fa: true,
      'fa-play': rule.state === 'paused',
      'fa-pause': rule.state !== 'paused',
@@ -55,7 +55,7 @@ class AlertRuleItem extends PureComponent<Props> {
            title="Pausing an alert rule prevents it from executing"
            onClick={onTogglePause}
          >
-            <i className={stateClass} />
+            <i className={iconClassName} />
          </button>
          <a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
            <i className="icon-gf icon-gf-settings" />

--- a/public/app/features/dashboard/dashgrid/QueryOptions.tsx
+++ b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
@@ -10,6 +10,7 @@ import { Input } from 'app/core/components/Form';
 import { EventsWithValidation } from 'app/core/components/Form/Input';
 import { InputStatus } from 'app/core/components/Form/Input';
 import DataSourceOption from './DataSourceOption';
+import { GfFormLabel } from '@grafana/ui';
 // Types
 import { PanelModel } from '../panel_model';
@@ -163,7 +164,7 @@ export class QueryOptions extends PureComponent<Props, State> {
        {this.renderOptions()}
        <div className="gf-form">
-          <span className="gf-form-label">Relative time</span>
+          <GfFormLabel>Relative time</GfFormLabel>
          <Input
            type="text"
            className="width-6"

--- a/public/app/features/datasources/DataSourcesList.tsx
+++ b/public/app/features/datasources/DataSourcesList.tsx
 import React, { PureComponent } from 'react';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import DataSourcesListItem from './DataSourcesListItem';
 import { DataSource } from 'app/types';
 import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';

--- a/public/app/features/plugins/PluginList.tsx
+++ b/public/app/features/plugins/PluginList.tsx
 import React, { SFC } from 'react';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import PluginListItem from './PluginListItem';
 import { Plugin } from 'app/types';
 import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';

--- a/public/app/features/users/UsersActionBar.tsx
+++ b/public/app/features/users/UsersActionBar.tsx
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import { setUsersSearchQuery } from './state/actions';
 import { getInviteesCount, getUsersSearchQuery } from './state/selectors';

--- a/yarn.lock
+++ b/yarn.lock
@@ -804,6 +804,11 @@
  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.9.tgz#b5990152604c2ada749b7f88cab3476f21f39d7b"
  integrity sha512-q6LuBI0t5u04f0Q4/R+cGBqIbZMtJkVvCSF+nTfFBBdQqQvJR/mNHeWjRkszyLl7oyf2rDoKUYMEjTw5AV0hiw==
+"@types/classnames@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.6.tgz#dbe8a666156d556ed018e15a4c65f08937c3f628"
+  integrity sha512-XHcYvVdbtAxVstjKxuULYqYaWIzHR15yr1pZj4fnGChuBVJlIAp9StJna0ZJNSgxPh4Nac2FL4JM3M11Tm6fqQ==
 "@types/d3-array@*":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.3.tgz#dd141e3ba311485fffbf0792a1b01a7f2ec12dc1"
@@ -1093,7 +1098,7 @@
  dependencies:
    "@types/react" "*"
-"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
+"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
  version "16.7.6"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
  integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
@@ -3163,7 +3168,7 @@ caniuse-api@^1.5.2:
    lodash.memoize "^4.1.2"
    lodash.uniq "^4.5.0"
-caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
  version "1.0.30000772"
  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
  integrity sha1-UarokXaChureSj2DGep21qAbUSs=