From a5b5dc9c201ac963a4f82f48f954e131bc1187e0 Mon Sep 17 00:00:00 2001 From: Ahmed Khan Date: Tue, 30 Apr 2019 12:46:48 +0500 Subject: [PATCH 1/2] Select Functionality added for Object/Arrays along with Icon --- src/js/components/VariableEditor.js | 24 +++++++++++++++++++++++- src/js/components/VariableMeta.js | 27 ++++++++++++++++++++++++++- src/js/components/icons.js | 21 +++++++++++++++++++++ src/js/themes/getStyle.js | 8 ++++++++ src/js/themes/styleConstants.js | 2 +- src/style/scss/global.scss | 9 +++++++++ 6 files changed, 88 insertions(+), 3 deletions(-) diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js index 60497bac..95bb55cd 100644 --- a/src/js/components/VariableEditor.js +++ b/src/js/components/VariableEditor.js @@ -22,7 +22,7 @@ import { } from './DataTypes/DataTypes'; //clibboard icon -import { Edit, CheckCircle, RemoveCircle as Remove } from './icons'; +import { Edit, CheckCircle, RemoveCircle as Remove, SelectCircle as Select } from './icons'; //theme import Theme from './../themes/getStyle'; @@ -128,10 +128,32 @@ class VariableEditor extends React.PureComponent { {onDelete !== false && editMode == false ? this.getRemoveIcon() : null} + {onSelect !== false ? this.getSelectObject() : null} ); } + getSelectObject = () => { + const { variable, namespace, theme, onSelect } = this.props; + + return ( + + { + onSelect({ + name, + type: typeof src, + namespace, + value: src + }); + }} + /> + + ); + } + render = () => { const { theme, onDelete, onAdd, + onSelect, enableClipboard, src, namespace @@ -130,6 +154,7 @@ export default class extends React.PureComponent { {/* copy add/remove icons */} {onAdd !== false ? this.getAddAttribute() : null} {onDelete !== false ? this.getRemoveObject() : null} + {onSelect !== false ? this.getSelectObject() : null} ); } diff --git a/src/js/components/icons.js b/src/js/components/icons.js index 16491f0a..cf16d0d9 100644 --- a/src/js/components/icons.js +++ b/src/js/components/icons.js @@ -181,6 +181,27 @@ export class AddCircle extends React.PureComponent { } } +export class SelectCircle extends React.PureComponent { + render() { + const {props} = this; + const {style, ...rest} = props; + + return ( + + + + + + + + ); + } +} + export class Add extends React.PureComponent { render() { const {props} = this; diff --git a/src/js/themes/getStyle.js b/src/js/themes/getStyle.js index b00afed3..073a75b8 100644 --- a/src/js/themes/getStyle.js +++ b/src/js/themes/getStyle.js @@ -256,6 +256,14 @@ const getDefaultThemeStyling = theme => { fontSize: constants.iconFontSize, marginRight: constants.iconMarginRight }, + selectVarIcon: { + verticalAlign: 'top', + display: 'inline-block', + color: colors.editVariable.addIcon, + cursor: constants.iconCursor, + fontSize: constants.iconFontSize, + marginRight: constants.iconMarginRight + }, addVarIcon: { verticalAlign: 'top', display: 'inline-block', diff --git a/src/js/themes/styleConstants.js b/src/js/themes/styleConstants.js index 0754d3ac..ca82d905 100644 --- a/src/js/themes/styleConstants.js +++ b/src/js/themes/styleConstants.js @@ -77,7 +77,7 @@ export default { editInputFontFamily: 'monospace', iconCursor: 'pointer', - iconFontSize: '15px', + iconFontSize: '17px', iconPaddingRight: '1px', dateValueMarginLeft: '2px', diff --git a/src/style/scss/global.scss b/src/style/scss/global.scss index 8f65e092..da491ade 100644 --- a/src/style/scss/global.scss +++ b/src/style/scss/global.scss @@ -9,6 +9,9 @@ .click-to-remove { display: none; } + .click-to-select { + display: none; + } .click-to-edit { display: none; } @@ -24,6 +27,9 @@ & > .click-to-remove { display: inline-block; } + & > .click-to-select { + display: inline-block; + } } } @@ -39,6 +45,9 @@ &:hover .click-to-remove { display: inline-block; } + &:hover .click-to-select { + display: inline-block; + } &:hover .click-to-edit { display: inline-block; } From 3568ef8e110aabcecbc2f37c5bdc5ec2f5a5e83d Mon Sep 17 00:00:00 2001 From: Ahmed Khan Date: Fri, 5 Mar 2021 16:32:24 +0500 Subject: [PATCH 2/2] Linting Fix --- src/js/components/VariableEditor.js | 9 +++++++-- src/js/components/VariableMeta.js | 10 +++++----- src/js/components/icons.js | 9 +++++---- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js index 26ad02d4..b7388edc 100644 --- a/src/js/components/VariableEditor.js +++ b/src/js/components/VariableEditor.js @@ -22,7 +22,12 @@ import { } from './DataTypes/DataTypes'; //clibboard icon -import { Edit, CheckCircle, RemoveCircle as Remove, SelectCircle as Select } from './icons'; +import { + Edit, + CheckCircle, + RemoveCircle as Remove, + SelectCircle as Select +} from './icons'; //theme import Theme from './../themes/getStyle'; @@ -168,7 +173,7 @@ class VariableEditor extends React.PureComponent { /> ); - } + }; getEditIcon = () => { const { variable, theme } = this.props; diff --git a/src/js/components/VariableMeta.js b/src/js/components/VariableMeta.js index 9c63599b..b62a2b14 100644 --- a/src/js/components/VariableMeta.js +++ b/src/js/components/VariableMeta.js @@ -6,7 +6,9 @@ import { toType } from './../helpers/util'; //icons import { - RemoveCircle as Remove, AddCircle as Add, SelectCircle as Select + RemoveCircle as Remove, + AddCircle as Add, + SelectCircle as Select } from './icons'; //theme @@ -109,9 +111,7 @@ export default class extends React.PureComponent { }; getSelectObject = () => { - const { - theme, namespace, name, src, onSelect - } = this.props; + const { theme, namespace, name, src, onSelect } = this.props; return ( @@ -129,7 +129,7 @@ export default class extends React.PureComponent { /> ); - } + }; render = () => { const { diff --git a/src/js/components/icons.js b/src/js/components/icons.js index 3c54d92f..5f21391b 100644 --- a/src/js/components/icons.js +++ b/src/js/components/icons.js @@ -202,18 +202,19 @@ export class AddCircle extends React.PureComponent { export class SelectCircle extends React.PureComponent { render() { - const {props} = this; - const {style, ...rest} = props; + const { props } = this; + const { style, ...rest } = props; return ( - - +