@devtron-labs/devtron-fe-common-lib 0.0.6-beta-21 → 0.0.6-beta-22

package/dist/Common/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import { Component } from 'react';
+export declare enum CHECKBOX_VALUE {
+    CHECKED = "CHECKED",
+    INTERMEDIATE = "INTERMEDIATE"
+}
+export interface CheckboxProps {
+    onChange: (event: any) => void;
+    isChecked: boolean;
+    value: 'CHECKED' | 'INTERMEDIATE';
+    disabled?: boolean;
+    tabIndex?: number;
+    rootClassName?: string;
+    onClick?: (event: any) => void;
+    id?: string;
+}
+export declare class Checkbox extends Component<CheckboxProps> {
+    render(): JSX.Element;
+}

package/dist/Common/index.d.ts

@@ -23,3 +23,4 @@ export * from './Dialogs';
 export * from './MultiSelectCustomization';
 export { default as InfoColourBar } from './InfoColorBar/InfoColourbar';
 export * from './Common.service';
+export * from './Checkbox';

package/dist/index.js

@@ -16314,8 +16314,36 @@ var getTeamListMin = function () {
     });
 };
 
+exports.CHECKBOX_VALUE = void 0;
+(function (CHECKBOX_VALUE) {
+    CHECKBOX_VALUE["CHECKED"] = "CHECKED";
+    CHECKBOX_VALUE["INTERMEDIATE"] = "INTERMEDIATE";
+})(exports.CHECKBOX_VALUE || (exports.CHECKBOX_VALUE = {}));
+/*
+Valid States of Checkbox:
+1. disabled: true, checked: false, value: XXX
+2. disabled: true, checked: true, value: INTERMIDIATE
+3. disabled: true, checked: true, value: CHECKED
+4. disabled: true, checked: false, value: XXX
+5. disabled: false, checked: true,  value: INTERMIDIATE
+6. disabled: false, checked: true,  value: CHECKED
+*/
+var Checkbox = /** @class */ (function (_super) {
+    __extends(Checkbox, _super);
+    function Checkbox() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Checkbox.prototype.render = function () {
+        var _a;
+        var rootClassName = "".concat(this.props.rootClassName ? this.props.rootClassName : '');
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("label", __assign({ className: "dc__position-rel flex left cursor ".concat(rootClassName), onClick: (_a = this.props) === null || _a === void 0 ? void 0 : _a.onClick }, { children: [jsxRuntime.jsx("input", { type: "checkbox", className: 'form__checkbox', disabled: this.props.disabled, value: this.props.value, onChange: this.props.onChange, tabIndex: this.props.tabIndex, checked: this.props.isChecked, id: this.props.id }), jsxRuntime.jsx("span", { className: "form__checkbox-container" }), jsxRuntime.jsx("span", __assign({ className: "form__checkbox-label" }, { children: this.props.children }))] })) }));
+    };
+    return Checkbox;
+}(React.Component));
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
+exports.Checkbox = Checkbox;
 exports.ClearIndicator = ClearIndicator;
 exports.ConditionalWrap = ConditionalWrap;
 exports.ConfirmationDialog = ConfirmationDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-21",
+    "version": "0.0.6-beta-22",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+
+export enum CHECKBOX_VALUE {
+    CHECKED = 'CHECKED',
+    INTERMEDIATE = 'INTERMEDIATE',
+}
+export interface CheckboxProps {
+    onChange: (event) => void
+    isChecked: boolean
+    value: 'CHECKED' | 'INTERMEDIATE'
+    disabled?: boolean
+    tabIndex?: number
+    rootClassName?: string
+    onClick?: (event) => void
+    id?: string
+}
+
+/*
+Valid States of Checkbox:
+1. disabled: true, checked: false, value: XXX
+2. disabled: true, checked: true, value: INTERMIDIATE
+3. disabled: true, checked: true, value: CHECKED
+4. disabled: true, checked: false, value: XXX
+5. disabled: false, checked: true,  value: INTERMIDIATE
+6. disabled: false, checked: true,  value: CHECKED
+*/
+export class Checkbox extends Component<CheckboxProps> {
+    render() {
+        let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`
+        return (
+            <>
+                <label className={`dc__position-rel flex left cursor ${rootClassName}`} onClick={this.props?.onClick}>
+                    <input
+                        type="checkbox"
+                        className={'form__checkbox'}
+                        disabled={this.props.disabled}
+                        value={this.props.value}
+                        onChange={this.props.onChange}
+                        tabIndex={this.props.tabIndex}
+                        checked={this.props.isChecked}
+                        id={this.props.id}
+                    />
+                    <span className="form__checkbox-container"></span>
+                    <span className={`form__checkbox-label`}>{this.props.children}</span>
+                </label>
+            </>
+        )
+    }
+}

package/src/Common/index.ts

@@ -22,4 +22,5 @@ export * from './CustomTagSelector'
 export * from './Dialogs'
 export * from './MultiSelectCustomization'
 export {default as InfoColourBar} from './InfoColorBar/InfoColourbar'
-export * from './Common.service'
+export * from './Common.service'
+export * from './Checkbox'