From 2fa7411d64fe87d30e8ca7e840813af269009f90 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 1 Oct 2019 17:27:18 +0300 Subject: [PATCH 01/20] Reverted --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b219e22..14c3fc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.22", + "version": "0.0.3", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", From dab3c3e75c0504c22709e18bbab3bacb42837a9a Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 1 Oct 2019 17:33:13 +0300 Subject: [PATCH 02/20] Two-way binding for permission field, it is state now --- package.json | 2 +- src/components/chmod-checkbox/chmod-checkbox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 14c3fc9..fe99111 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.3", + "version": "0.0.31", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index ddaba56..2721c5f 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h, State } from "@stencil/core"; import { calculatePermission } from "../../utils/utils"; @Component({ @@ -22,7 +22,7 @@ export class CHModCheckbox { */ @Prop() last: string = "EXECUTE"; - @Prop({ mutable: true, reflect: true }) permission: number = 0; + @State() permission: number = 0; @Prop() isReadChecked: boolean = false; @Prop() isWriteChecked: boolean = false; @Prop() isExecuteChecked: boolean = false; From 4bcb97e496f100fc06af7c03028a7eb66acbe2c4 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 1 Oct 2019 17:42:29 +0300 Subject: [PATCH 03/20] Two-way binding for permission field --- package.json | 2 +- src/components/chmod-checkbox/chmod-checkbox.tsx | 4 ++-- src/index.html | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6f25daf..7f8aa54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.32", + "version": "0.0.33", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index e1e301e..b998658 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, State } from "@stencil/core"; +import { Component, Prop, h } from "@stencil/core"; import { calculatePermission } from "../../utils/utils"; @Component({ @@ -22,7 +22,7 @@ export class CHModCheckbox { */ @Prop() last: string = "EXECUTE"; - @State() permission: number = 0; + @Prop({ mutable: true, reflect: true }) permission: number = 0; @Prop() isReadChecked: boolean = false; @Prop() isWriteChecked: boolean = false; @Prop() isExecuteChecked: boolean = false; diff --git a/src/index.html b/src/index.html index 993318f..49e6937 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,7 @@
- +
From 39d38095b8cf3cc4c4bc8c5fdcc0e9fbea4ec5df Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 10:06:32 +0300 Subject: [PATCH 04/20] Unused codes are removed --- package.json | 2 +- .../chmod-checkbox/chmod-checkbox.tsx | 21 +++++++------------ src/index.html | 1 - src/utils/utils.ts | 6 ------ 4 files changed, 8 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 7f8aa54..36b7f25 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.33", + "version": "0.0.35", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index b998658..6a46232 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h } from "@stencil/core"; +import { Component, Prop, h, State, Listen, Event } from "@stencil/core"; import { calculatePermission } from "../../utils/utils"; @Component({ @@ -7,25 +7,15 @@ import { calculatePermission } from "../../utils/utils"; shadow: true }) export class CHModCheckbox { - /** - * The first name - */ @Prop() first: string = "READ"; - - /** - * The middle name - */ @Prop() middle: string = "WRITE"; - - /** - * The last name - */ @Prop() last: string = "EXECUTE"; - - @Prop({ mutable: true, reflect: true }) permission: number = 0; @Prop() isReadChecked: boolean = false; @Prop() isWriteChecked: boolean = false; @Prop() isExecuteChecked: boolean = false; + @State() permission: number = 0; + + @Event() handleEvent: CustomEvent; render() { return ( @@ -38,6 +28,7 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} + checked={this.isReadChecked} onChange={() => { this.isReadChecked = !this.isReadChecked; this.permission = calculatePermission( @@ -62,6 +53,7 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} + checked={this.isWriteChecked} onChange={() => { this.isWriteChecked = !this.isWriteChecked; this.permission = calculatePermission( @@ -86,6 +78,7 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} + checked={this.isExecuteChecked} onChange={() => { this.isExecuteChecked = !this.isExecuteChecked; this.permission = calculatePermission( diff --git a/src/index.html b/src/index.html index 49e6937..aa5f2b3 100644 --- a/src/index.html +++ b/src/index.html @@ -26,7 +26,6 @@
- diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 752730b..d996a9a 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -20,9 +20,3 @@ export function calculatePermission( console.log("Permission: ", permission); return permission; } - -export function format(first: string, middle: string, last: string): string { - return ( - (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "") - ); -} From c7f6743da54098835445c97a00cde6d47742e1e0 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 10:25:34 +0300 Subject: [PATCH 05/20] Unused @Event is removed --- package.json | 2 +- src/components/chmod-checkbox/chmod-checkbox.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 36b7f25..abc181f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.35", + "version": "0.0.36", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index 6a46232..c51c43c 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, State, Listen, Event } from "@stencil/core"; +import { Component, Prop, h, State } from "@stencil/core"; import { calculatePermission } from "../../utils/utils"; @Component({ @@ -15,8 +15,6 @@ export class CHModCheckbox { @Prop() isExecuteChecked: boolean = false; @State() permission: number = 0; - @Event() handleEvent: CustomEvent; - render() { return (
From 5dffc8766e3a18af080abc5ec7e99e574c216c00 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 10:27:27 +0300 Subject: [PATCH 06/20] Permission has two-way binding --- src/components/chmod-checkbox/chmod-checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index c51c43c..684d717 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -13,7 +13,7 @@ export class CHModCheckbox { @Prop() isReadChecked: boolean = false; @Prop() isWriteChecked: boolean = false; @Prop() isExecuteChecked: boolean = false; - @State() permission: number = 0; + @Prop({ mutable: true, reflect: true }) permission: number = 0; render() { return ( From f07a593c6291e8ef3950c36d57aa4b57a54d24e1 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 10:27:40 +0300 Subject: [PATCH 07/20] New version: 0.0.37 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index abc181f..c7f830f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.36", + "version": "0.0.37", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", From 910e453a4d4015fc49d274e9345267bfd107e5a2 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 14:20:47 +0300 Subject: [PATCH 08/20] Code fixes with documentation --- package.json | 2 +- .../chmod-checkbox/chmod-checkbox.tsx | 34 ++++++++++++++++--- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index c7f830f..767c86d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.37", + "version": "0.0.4", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index 684d717..8459420 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, State } from "@stencil/core"; +import { Component, Prop, h } from "@stencil/core"; import { calculatePermission } from "../../utils/utils"; @Component({ @@ -7,13 +7,40 @@ import { calculatePermission } from "../../utils/utils"; shadow: true }) export class CHModCheckbox { + /** + * The first button text + */ @Prop() first: string = "READ"; + + /** + * The middle button text + */ @Prop() middle: string = "WRITE"; + + /** + * The last button text + */ @Prop() last: string = "EXECUTE"; + + /** + * Main mutable permission value depends on the selection of checkboxes + */ + @Prop({ mutable: true, reflect: true }) permission: number = 0; + + /** + * Stores the checkbox value when first one is changed + */ @Prop() isReadChecked: boolean = false; + + /** + * Stores the checkbox value when middle one is changed + */ @Prop() isWriteChecked: boolean = false; + + /** + * Stores the checkbox value when last one is changed + */ @Prop() isExecuteChecked: boolean = false; - @Prop({ mutable: true, reflect: true }) permission: number = 0; render() { return ( @@ -26,7 +53,6 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} - checked={this.isReadChecked} onChange={() => { this.isReadChecked = !this.isReadChecked; this.permission = calculatePermission( @@ -51,7 +77,6 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} - checked={this.isWriteChecked} onChange={() => { this.isWriteChecked = !this.isWriteChecked; this.permission = calculatePermission( @@ -76,7 +101,6 @@ export class CHModCheckbox { name="check" type="checkbox" value={this.permission} - checked={this.isExecuteChecked} onChange={() => { this.isExecuteChecked = !this.isExecuteChecked; this.permission = calculatePermission( From 06912ac65ee7241e32a55ecde91104d8eb9e34c3 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Wed, 2 Oct 2019 14:32:42 +0300 Subject: [PATCH 09/20] base prop is added. README is updated with how to get a prop's value. --- package.json | 2 +- readme.md | 10 +++++ src/components.d.ts | 38 ++++++++++++++++--- .../chmod-checkbox/chmod-checkbox.tsx | 5 +++ src/index.html | 4 +- 5 files changed, 50 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 767c86d..12640ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.4", + "version": "0.0.41", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/readme.md b/readme.md index 805fbe1..1b55506 100644 --- a/readme.md +++ b/readme.md @@ -62,6 +62,16 @@ Chmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE ``` +## How to get value from a prop? + +```javascript +document.querySelectorAll("chmod-checkbox")[0].base +document.querySelectorAll("chmod-checkbox")[0].permission +document.querySelectorAll("chmod-checkbox")[0].first +document.querySelectorAll("chmod-checkbox")[0].middle +document.querySelectorAll("chmod-checkbox")[0].last + +``` ### Configuration - Props diff --git a/src/components.d.ts b/src/components.d.ts index 799fff1..22f9172 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -10,21 +10,34 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'; export namespace Components { interface ChmodCheckbox { + 'base': string; /** - * The first name + * The first button text */ 'first': string; + /** + * Stores the checkbox value when last one is changed + */ 'isExecuteChecked': boolean; + /** + * Stores the checkbox value when first one is changed + */ 'isReadChecked': boolean; + /** + * Stores the checkbox value when middle one is changed + */ 'isWriteChecked': boolean; /** - * The last name + * The last button text */ 'last': string; /** - * The middle name + * The middle button text */ 'middle': string; + /** + * Main mutable permission value depends on the selection of checkboxes + */ 'permission': number; } } @@ -44,21 +57,34 @@ declare global { declare namespace LocalJSX { interface ChmodCheckbox { + 'base'?: string; /** - * The first name + * The first button text */ 'first'?: string; + /** + * Stores the checkbox value when last one is changed + */ 'isExecuteChecked'?: boolean; + /** + * Stores the checkbox value when first one is changed + */ 'isReadChecked'?: boolean; + /** + * Stores the checkbox value when middle one is changed + */ 'isWriteChecked'?: boolean; /** - * The last name + * The last button text */ 'last'?: string; /** - * The middle name + * The middle button text */ 'middle'?: string; + /** + * Main mutable permission value depends on the selection of checkboxes + */ 'permission'?: number; } diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index 8459420..abf02eb 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -42,6 +42,11 @@ export class CHModCheckbox { */ @Prop() isExecuteChecked: boolean = false; + /** + * + */ + @Prop({ reflect: true }) base: string = ""; + render() { return (
diff --git a/src/index.html b/src/index.html index aa5f2b3..f63bc58 100644 --- a/src/index.html +++ b/src/index.html @@ -17,10 +17,10 @@
- +
- +
From 7e8a57aaf584e21f8eb524b710e3b90ef66306ed Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Sat, 5 Oct 2019 14:46:32 +0300 Subject: [PATCH 10/20] Utils: decoded logic is writtin and working. However, checkbox's close animation is bugged --- package-lock.json | 10 ++-- package.json | 5 +- src/components.d.ts | 24 ---------- .../chmod-checkbox/chmod-checkbox.tsx | 19 ++++---- src/index.html | 2 +- src/utils/utils.ts | 48 ++++++++++++++++--- 6 files changed, 62 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index a042ed5..0a31352 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "chmod-checkbox", - "version": "0.0.1", + "version": "0.0.41", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -19,10 +19,10 @@ "integrity": "sha512-3vmF8zir9FcVY/tYW0/V/pWrYSU684eASmALL2v29PGJvX6/CXh9n8LF7Jy95SpJPij3lisIUXLls7edXy2hYg==", "dev": true }, - "bootstrap": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", - "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "typescript": { "version": "3.6.3", diff --git a/package.json b/package.json index 12640ac..88df983 100644 --- a/package.json +++ b/package.json @@ -25,5 +25,8 @@ "@stencil/core": "^1.3.3", "@stencil/sass": "^1.0.1" }, - "license": "MIT" + "license": "MIT", + "dependencies": { + "lodash": "^4.17.15" + } } diff --git a/src/components.d.ts b/src/components.d.ts index 22f9172..f30f076 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -16,18 +16,6 @@ export namespace Components { */ 'first': string; /** - * Stores the checkbox value when last one is changed - */ - 'isExecuteChecked': boolean; - /** - * Stores the checkbox value when first one is changed - */ - 'isReadChecked': boolean; - /** - * Stores the checkbox value when middle one is changed - */ - 'isWriteChecked': boolean; - /** * The last button text */ 'last': string; @@ -63,18 +51,6 @@ declare namespace LocalJSX { */ 'first'?: string; /** - * Stores the checkbox value when last one is changed - */ - 'isExecuteChecked'?: boolean; - /** - * Stores the checkbox value when first one is changed - */ - 'isReadChecked'?: boolean; - /** - * Stores the checkbox value when middle one is changed - */ - 'isWriteChecked'?: boolean; - /** * The last button text */ 'last'?: string; diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index abf02eb..d4674af 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,5 +1,8 @@ -import { Component, Prop, h } from "@stencil/core"; -import { calculatePermission } from "../../utils/utils"; +import { Component, Prop, h, State } from "@stencil/core"; +import { + calculatePermission, + checkIfDecodePermission +} from "../../utils/utils"; @Component({ tag: "chmod-checkbox", @@ -30,17 +33,17 @@ export class CHModCheckbox { /** * Stores the checkbox value when first one is changed */ - @Prop() isReadChecked: boolean = false; + @State() isReadChecked: boolean = false; /** * Stores the checkbox value when middle one is changed */ - @Prop() isWriteChecked: boolean = false; + @State() isWriteChecked: boolean = false; /** * Stores the checkbox value when last one is changed */ - @Prop() isExecuteChecked: boolean = false; + @State() isExecuteChecked: boolean = false; /** * @@ -57,7 +60,7 @@ export class CHModCheckbox { id="read" name="check" type="checkbox" - value={this.permission} + checked={checkIfDecodePermission(this.permission, ["read"])} onChange={() => { this.isReadChecked = !this.isReadChecked; this.permission = calculatePermission( @@ -81,7 +84,7 @@ export class CHModCheckbox { id="write" name="check" type="checkbox" - value={this.permission} + checked={checkIfDecodePermission(this.permission, ["write"])} onChange={() => { this.isWriteChecked = !this.isWriteChecked; this.permission = calculatePermission( @@ -105,7 +108,7 @@ export class CHModCheckbox { id="execute" name="check" type="checkbox" - value={this.permission} + checked={checkIfDecodePermission(this.permission, ["execute"])} onChange={() => { this.isExecuteChecked = !this.isExecuteChecked; this.permission = calculatePermission( diff --git a/src/index.html b/src/index.html index f63bc58..d3e35b5 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,7 @@
- +
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index d996a9a..7f2edd8 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,8 +1,10 @@ -export function calculatePermission( - type: string, - logic: boolean, - permission: number -) { +import _ from "lodash"; + +export const calculatePermission = ( + type: string = "read", + logic: boolean = true, + permission: number = 0 +) => { switch (type) { case "read": permission = logic === true ? permission + 1 : permission - 1; @@ -17,6 +19,38 @@ export function calculatePermission( return permission; } permission < 0 ? (permission = 0) : permission; - console.log("Permission: ", permission); + console.log("Util Calculated Permission: ", permission); return permission; -} +}; + +export const decodePermission = (permission: number) => { + switch (permission) { + case 0: + return []; + case 1: + return ["read"]; + case 2: + return ["write"]; + case 3: + return ["read", "write"]; + case 4: + return ["execute"]; + case 5: + return ["read", "execute"]; + case 6: + return ["write", "execute"]; + case 7: + return ["read", "write", "execute"]; + default: + return []; + } +}; + +export const checkIfDecodePermission = ( + permission: number, + types: Array +) => { + const founded = _.intersection(decodePermission(permission), types); + if (founded) return founded.length > 0; + return false; +}; From b06c728d355fc705c471e63b6cf9d681aedd1611 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Sat, 5 Oct 2019 15:43:53 +0300 Subject: [PATCH 11/20] Decode is completed but checked bug is still here --- .../chmod-checkbox/chmod-checkbox.tsx | 19 ++++++++++++------ src/index.html | 10 +++++----- src/utils/utils.ts | 20 ++++++++++--------- 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index d4674af..87c8738 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -33,17 +33,23 @@ export class CHModCheckbox { /** * Stores the checkbox value when first one is changed */ - @State() isReadChecked: boolean = false; + @State() + isReadChecked: boolean = checkIfDecodePermission(this.permission, ["read"]); /** * Stores the checkbox value when middle one is changed */ - @State() isWriteChecked: boolean = false; + @State() isWriteChecked: boolean = checkIfDecodePermission(this.permission, [ + "write" + ]); /** * Stores the checkbox value when last one is changed */ - @State() isExecuteChecked: boolean = false; + @State() isExecuteChecked: boolean = checkIfDecodePermission( + this.permission, + ["execute"] + ); /** * @@ -60,9 +66,10 @@ export class CHModCheckbox { id="read" name="check" type="checkbox" - checked={checkIfDecodePermission(this.permission, ["read"])} + checked={this.isReadChecked} onChange={() => { this.isReadChecked = !this.isReadChecked; + console.log("isReadChecked: ", this.isReadChecked); this.permission = calculatePermission( "read", this.isReadChecked, @@ -84,7 +91,7 @@ export class CHModCheckbox { id="write" name="check" type="checkbox" - checked={checkIfDecodePermission(this.permission, ["write"])} + checked={this.isWriteChecked} onChange={() => { this.isWriteChecked = !this.isWriteChecked; this.permission = calculatePermission( @@ -108,7 +115,7 @@ export class CHModCheckbox { id="execute" name="check" type="checkbox" - checked={checkIfDecodePermission(this.permission, ["execute"])} + checked={this.isExecuteChecked} onChange={() => { this.isExecuteChecked = !this.isExecuteChecked; this.permission = calculatePermission( diff --git a/src/index.html b/src/index.html index d3e35b5..a8ef2d1 100644 --- a/src/index.html +++ b/src/index.html @@ -12,18 +12,18 @@
-
+
- +
- +
- +
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 7f2edd8..312d783 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -2,25 +2,27 @@ import _ from "lodash"; export const calculatePermission = ( type: string = "read", - logic: boolean = true, - permission: number = 0 + isChecked: boolean, + permission: number ) => { + let _permission = permission; switch (type) { case "read": - permission = logic === true ? permission + 1 : permission - 1; + _permission = isChecked ? _permission + 1 : _permission - 1; break; case "write": - permission = logic === true ? permission + 2 : permission - 2; + _permission = isChecked ? _permission + 2 : _permission - 2; break; case "execute": - permission = logic === true ? permission + 4 : permission - 4; + _permission = isChecked ? _permission + 4 : _permission - 4; break; default: - return permission; + return _permission; } - permission < 0 ? (permission = 0) : permission; - console.log("Util Calculated Permission: ", permission); - return permission; + _permission < 0 ? (_permission = 0) : _permission; + _permission > 7 ? (_permission = 7) : _permission; + console.log("Util Calculated Permission: ", _permission); + return _permission; }; export const decodePermission = (permission: number) => { From ac0ca90b5aae64536f70f59a7ac83f7dda5a535f Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Mon, 7 Oct 2019 13:05:27 +0300 Subject: [PATCH 12/20] Refactored a bit and checkboxes almost working properly but not good now --- .../chmod-checkbox/chmod-checkbox.scss | 10 ++- .../chmod-checkbox/chmod-checkbox.tsx | 72 +++++-------------- 2 files changed, 26 insertions(+), 56 deletions(-) diff --git a/src/components/chmod-checkbox/chmod-checkbox.scss b/src/components/chmod-checkbox/chmod-checkbox.scss index 06bfd5c..a53f7b7 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.scss +++ b/src/components/chmod-checkbox/chmod-checkbox.scss @@ -91,7 +91,15 @@ label { } input[type="checkbox"] { - display: none; // hide the system checkbox + // opacity: 0; + z-index: 10; + width: 25px; + height: 25px; + border-radius: 50%; + margin-right: -30px; + position: relative; + transform-origin: center; + background-color: transparent; // Let's add some effects after the checkbox is checked &:checked { diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index 87c8738..e25525a 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -30,32 +30,22 @@ export class CHModCheckbox { */ @Prop({ mutable: true, reflect: true }) permission: number = 0; - /** - * Stores the checkbox value when first one is changed - */ - @State() - isReadChecked: boolean = checkIfDecodePermission(this.permission, ["read"]); - - /** - * Stores the checkbox value when middle one is changed - */ - @State() isWriteChecked: boolean = checkIfDecodePermission(this.permission, [ - "write" - ]); - - /** - * Stores the checkbox value when last one is changed - */ - @State() isExecuteChecked: boolean = checkIfDecodePermission( - this.permission, - ["execute"] - ); - /** * */ @Prop({ reflect: true }) base: string = ""; + isChecked = type => { + return checkIfDecodePermission(this.permission, [type]); + }; + + onChange = (event, type) => { + console.log(event); + console.log(event.target.checked); + const checked = event.target.checked; + this.permission = calculatePermission(type, checked, this.permission); + }; + render() { return (
@@ -63,19 +53,9 @@ export class CHModCheckbox {
{ - this.isReadChecked = !this.isReadChecked; - console.log("isReadChecked: ", this.isReadChecked); - this.permission = calculatePermission( - "read", - this.isReadChecked, - this.permission - ); - }} + checked={this.isChecked("read")} + onChange={(event: UIEvent) => this.onChange(event, "read")} />