From babbb9f5b5caf3016efa5d7295e0bb90530fe996 Mon Sep 17 00:00:00 2001 From: swaraj Date: Wed, 17 Jan 2024 17:00:32 +0530 Subject: [PATCH 1/6] converted toggle switch to styled component --- .../component/ToggleSwitch/ToggleSwitch.js | 284 ++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 __application/component/ToggleSwitch/ToggleSwitch.js diff --git a/__application/component/ToggleSwitch/ToggleSwitch.js b/__application/component/ToggleSwitch/ToggleSwitch.js new file mode 100644 index 0000000..5b68b34 --- /dev/null +++ b/__application/component/ToggleSwitch/ToggleSwitch.js @@ -0,0 +1,284 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ +import React from 'react'; +import styled, { css } from 'styled-components'; +import PropTypes from 'prop-types'; + +/* +Toggle Switch Component +Note: id, checked and onChange are required for ToggleSwitch component to function. +The props name, small, disabled +and optionLabels are optional. +Usage: setValue(checked)}} /> +*/ + +const ToggleWrapper = styled.div` + position: relative; + margin-right: 10px; + width: ${(props) => props.small ? '40px' : '75px'}; + display: inline-block; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + text-align: left; + + ${(props) => props.small && css` + + & .toggle-switch-inner:after { + content: ""; + height: 20px; + line-height: 20px; + } + + & .toggle-switch-inner:before { + content: ""; + height: 20px; + line-height: 20px; + } + + & .toggle-switch-switch { + width: 16px; + right: 20px; + margin: 2px; + } + `} + + // @media screen and (max-width: 991px) { + // .toggle-switch { + // transform: scale(0.9); + // } + // } + // @media screen and (max-width: 767px) { + // .toggle-switch { + // transform: scale(0.825); + // } + // } + // @media screen and (max-width: 575px) { + // .toggle-switch { + // transform: scale(0.75); + // } + // } +`; + +const StyledCheckBox = styled.input.attrs({ type: 'checkbox' })` + display: none; + &:checked { + + { + .toggle-switch-label { + .toggle-switch-inner { + margin-left: 0; + } + .toggle-switch-switch { + right: 0px; + } + } + } + } +`; + +const StyledLabel = styled.label` + display: block; + overflow: hidden; + cursor: pointer; + border: 0 solid #bbb; + border-radius: 20px; + margin: 0; + + &:focus { + outline: none; + > span { + box-shadow: 0 0 2px 5px red; + } + } + > span { + &:focus { + outline: none; + } + } +`; + +const StyledSwitchInner = styled.span` + display: block; + width: 200%; + margin-left: -100%; + transition: margin 0.3s ease-in 0s; + + &:before { + display: block; + float: left; + width: 50%; + height: 34px; + padding: 0; + line-height: 34px; + font-size: 12px; + color: white; + font-weight: bold; + box-sizing: border-box; + content: attr(data-yes); + text-transform: uppercase; + padding-left: 10px; + background-color: #2f855a; + color: #fff; + } + + &:after { + display: block; + float: left; + width: 50%; + height: 34px; + padding: 0; + line-height: 34px; + font-size: 12px; + color: white; + font-weight: bold; + box-sizing: border-box; + content: attr(data-no); + text-transform: uppercase; + padding-right: 10px; + background-color: #bbb; + color: #fff; + text-align: right; + } + ${(props) => props.disabled && css` + background-color: #ddd; + cursor: not-allowed; + &:before { + background-color: #ddd; + cursor: not-allowed; + } + `} +`; + +const StyledSwitchOuter = styled.span` + display: block; + width: 24px; + margin: 5px; + background: #fff; + position: absolute; + top: 0; + bottom: 0; + right: 40px; + border: 0 solid #bbb; + border-radius: 20px; + transition: all 0.3s ease-in 0s; + ${(props) => props.disabled && css` + background-color: #ddd; + cursor: not-allowed; + &:before { + background-color: #ddd; + cursor: not-allowed; + } + `} +`; + +function ToggleSwitch({ + id, + name, + checked, + onChange, + optionLabels, + small, + disabled, +}) { + function handleKeyPress(e) { + if (e.keyCode !== 32) return; + + e.preventDefault(); + onChange(!checked); + } + + return ( + <> + + onChange(e.target.checked)} + disabled={disabled} + /> + {id ? ( + handleKeyPress(e)} + htmlFor={id} + className="toggle-switch-label" + > + + + + ) : null} + + + {/*
+ onChange(e.target.checked)} + disabled={disabled} + /> + {id ? ( + + ) : null} +
*/} + + ); +} + +// Set optionLabels for rendering. +ToggleSwitch.defaultProps = { + optionLabels: ['Yes', 'No'], + name: 'switch', + small: false, + disabled: false, +}; + +ToggleSwitch.propTypes = { + id: PropTypes.string.isRequired, + checked: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + name: PropTypes.string, + optionLabels: PropTypes.array, + small: PropTypes.bool, + disabled: PropTypes.bool, +}; + +export default ToggleSwitch; From f26592d2ac0ed04fee49cbe1211be6b35bcaf0c4 Mon Sep 17 00:00:00 2001 From: swaraj Date: Wed, 17 Jan 2024 17:02:34 +0530 Subject: [PATCH 2/6] removed commented code --- .../component/ToggleSwitch/ToggleSwitch.js | 101 ++++++------------ 1 file changed, 30 insertions(+), 71 deletions(-) diff --git a/__application/component/ToggleSwitch/ToggleSwitch.js b/__application/component/ToggleSwitch/ToggleSwitch.js index 5b68b34..2c117a4 100644 --- a/__application/component/ToggleSwitch/ToggleSwitch.js +++ b/__application/component/ToggleSwitch/ToggleSwitch.js @@ -189,77 +189,36 @@ function ToggleSwitch({ } return ( - <> - - onChange(e.target.checked)} - disabled={disabled} - /> - {id ? ( - handleKeyPress(e)} - htmlFor={id} - className="toggle-switch-label" - > - - - - ) : null} - - - {/*
- onChange(e.target.checked)} - disabled={disabled} - /> - {id ? ( - - ) : null} -
*/} - + + onChange(e.target.checked)} + disabled={disabled} + /> + {id ? ( + handleKeyPress(e)} + htmlFor={id} + className="toggle-switch-label" + > + + + + ) : null} + ); } From 5f2515b4790a63cd61c315788becea10bcd6b303 Mon Sep 17 00:00:00 2001 From: Himanshu Gupta Date: Thu, 18 Jan 2024 03:11:02 +0530 Subject: [PATCH 3/6] feat(configColor): added dark color --- __application/component/Button/Button.js | 110 +++++++++++------------ __appset/configColor.js | 31 ++++--- __appset/themePrepare.js | 11 ++- package-lock.json | 2 +- package.json | 3 +- 5 files changed, 82 insertions(+), 75 deletions(-) diff --git a/__application/component/Button/Button.js b/__application/component/Button/Button.js index d8953f6..41f1852 100644 --- a/__application/component/Button/Button.js +++ b/__application/component/Button/Button.js @@ -1,55 +1,55 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import cx from 'classnames'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React from "react" +import PropTypes from "prop-types" +import styled from "styled-components" +import cx from "classnames" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" const styles = { - size: { s: 'xs', m: 's', l: 's' }, - padding: { s: [1, 2], m: [1.5, 2], l: [2, 2] }, + "size": { "s": "xs", "m": "s", "l": "s" }, + "padding": { "s": [1, 2], "m": [1.5, 2], "l": [2, 2] }, pointerEvents(props) { if (props.disabled) { - return 'none'; + return "none" } - return ''; + return "" }, opacity(props) { if (props.disabled) { - return '0.5'; + return "0.5" } - return ''; + return "" }, - hover: { + "hover": { color(props) { - if (props.kind === 'filled') { - return props.theme.color.white; + if (props.kind === "filled") { + return props.theme.color.white } - if (props.kind === 'outlined') { - return props.theme.color.white; + if (props.kind === "outlined") { + return props.theme.color.white } - return ''; + return "" }, backgroundColor(props) { - if (props.kind === 'filled') { - return props.theme.color[`${props.color}Dark`]; + if (props.kind === "filled") { + return props.theme.color[`${props.color}Dark`] } - if (props.kind === 'outlined') { - return props.theme.color[props.color]; + if (props.kind === "outlined") { + return props.theme.color[props.color] } - return ''; + return "" }, borderColor(props) { - if (props.kind === 'filled') { - return props.theme.color[`${props.color}Dark`]; + if (props.kind === "filled") { + return props.theme.color[`${props.color}Dark`] } - if (props.kind === 'outlined') { - return props.theme.color[props.color]; + if (props.kind === "outlined") { + return props.theme.color[props.color] } - return ''; - }, - }, -}; + return "" + } + } +} const StyledButton = styled( ({ @@ -60,7 +60,7 @@ const StyledButton = styled( fluid, isLoading, ...props - }) =>