From 98d26354c14db5f1a86e2026a53519daf5d683df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 25 Dec 2018 11:42:23 +0100 Subject: [PATCH] Added a form component to @grafana/ui --- package.json | 9 ++-- packages/grafana-ui/package.json | 5 ++- .../src/forms/GfFormLabel/GfFormLabel.tsx | 23 ++++++++++ packages/grafana-ui/src/forms/index.ts | 1 + packages/grafana-ui/src/index.ts | 1 + public/app/core/components/Form/Element.tsx | 43 ------------------- public/app/core/components/Form/Label.tsx | 19 -------- public/app/core/components/Form/index.ts | 2 - .../app/features/alerting/AlertRuleItem.tsx | 6 +-- .../dashboard/dashgrid/QueryOptions.tsx | 3 +- .../features/datasources/DataSourcesList.tsx | 2 +- public/app/features/plugins/PluginList.tsx | 2 +- public/app/features/users/UsersActionBar.tsx | 2 +- yarn.lock | 9 +++- 14 files changed, 49 insertions(+), 78 deletions(-) create mode 100644 packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx create mode 100644 packages/grafana-ui/src/forms/index.ts delete mode 100644 public/app/core/components/Form/Element.tsx delete mode 100644 public/app/core/components/Form/Label.tsx diff --git a/package.json b/package.json index 189ff637d4b..481ec1959ed 100644 --- 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", - "tslint-react": "^3.6.0" + "tinycolor2": "^1.4.1" }, "resolutions": { "caniuse-db": "1.0.30000772", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index fcba8f5f87d..2fb210e3b46 100644 --- 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" } } diff --git a/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx b/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx new file mode 100644 index 00000000000..8b80de64696 --- /dev/null +++ b/packages/grafana-ui/src/forms/GfFormLabel/GfFormLabel.tsx @@ -0,0 +1,23 @@ +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 = ({ 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 ( + + ); +}; diff --git a/packages/grafana-ui/src/forms/index.ts b/packages/grafana-ui/src/forms/index.ts new file mode 100644 index 00000000000..bb6998b0025 --- /dev/null +++ b/packages/grafana-ui/src/forms/index.ts @@ -0,0 +1 @@ +export { GfFormLabel } from './GfFormLabel/GfFormLabel'; diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts index f26af66035b..b22152497b9 100644 --- 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'; diff --git a/public/app/core/components/Form/Element.tsx b/public/app/core/components/Form/Element.tsx deleted file mode 100644 index 997d7f0e717..00000000000 --- a/public/app/core/components/Form/Element.tsx +++ /dev/null @@ -1,43 +0,0 @@ -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; -} - -export class Element extends PureComponent { - elementId: string = this.props.id || uniqueId('form-element-'); - - get elementLabel() { - const { label, labelClassName } = this.props; - - if (label) { - return ( - - ); - } - - return null; - } - - get children() { - const { children } = this.props; - - return React.cloneElement(children, { id: this.elementId }); - } - - render() { - return ( -
- {this.elementLabel} - {this.children} -
- ); - } -} diff --git a/public/app/core/components/Form/Label.tsx b/public/app/core/components/Form/Label.tsx deleted file mode 100644 index 385a1b325be..00000000000 --- a/public/app/core/components/Form/Label.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { PureComponent, ReactNode } from 'react'; - -interface Props { - children: ReactNode; - htmlFor?: string; - className?: string; -} - -export class Label extends PureComponent { - render() { - const { children, htmlFor, className } = this.props; - - return ( - - ); - } -} diff --git a/public/app/core/components/Form/index.ts b/public/app/core/components/Form/index.ts index e4c8197aaa9..6322cf3241a 100644 --- a/public/app/core/components/Form/index.ts +++ b/public/app/core/components/Form/index.ts @@ -1,3 +1 @@ -export { Element } from './Element'; export { Input } from './Input'; -export { Label } from './Label'; diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx index f47a6348303..86bb0207460 100644 --- a/public/app/features/alerting/AlertRuleItem.tsx +++ b/public/app/features/alerting/AlertRuleItem.tsx @@ -1,6 +1,6 @@ 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 { 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 { title="Pausing an alert rule prevents it from executing" onClick={onTogglePause} > - + diff --git a/public/app/features/dashboard/dashgrid/QueryOptions.tsx b/public/app/features/dashboard/dashgrid/QueryOptions.tsx index dd084418c40..fad70d92990 100644 --- 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 { {this.renderOptions()}
- Relative time + Relative time