Merge pull request #139 from Groww/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/atoms/Popup/Popup.tsx

@@ -26,24 +26,28 @@ class Popup extends React.PureComponent<Props> {
     const {
       visible,
       width,
+      height,
       customStyles,
       closeMaskOnClick,
       closeOnEsc,
       showCloseButton,
       children,
-      popupClass
+      popupClass,
+      animation
     } = this.props;
 
     return (
       <Rodal
         visible={visible}
         onClose={this.onClose}
         width={width}
+        height={height}
         customStyles={customStyles}
         closeMaskOnClick={closeMaskOnClick}
         closeOnEsc={closeOnEsc}
         showCloseButton={showCloseButton}
         popupClass={popupClass}
+        animation={animation}
       >
         {children}
       </Rodal>
@@ -61,19 +65,22 @@ class Popup extends React.PureComponent<Props> {
 
 Popup.defaultProps = {
   width: 400,
-  onLoad: () => { },
-  onUnLoad: () => { },
-  onClose: () => { },
   closeMaskOnClick: true,
   closeOnEsc: true,
-  showCloseButton: true,
   customStyles: {},
-  popupClass: ''
+  animation: 'zoom',
+  showCloseButton: true,
+  popupClass: 'popup-border',
+  onLoad: () => { },
+  onUnLoad: () => { },
+  onClose: () => { }
 } as DefaultProps;
 
 
 type DefaultProps = {
-  width: number;
+  width: number | string;
+  height?: number | string;
+  animation?: string;
   onLoad: () => void;
   onUnLoad: () => void;
   onClose: () => void;

src/components/atoms/Popup/Rodal/Dialog/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+
+const Dialog = (props: Props) => {
+  const animation =
+    (props.animationType === 'enter'
+      ? props.enterAnimation
+      : props.leaveAnimation) || props.animation;
+
+
+  const className = `rodal-dialog rodal-${animation}-${props.animationType}`;
+
+  const { width, height, duration, customStyles } = props;
+
+  const style = {
+    width: width,
+    height: height,
+    animationDuration: duration + 'ms',
+    WebkitAnimationDuration: duration + 'ms'
+    // borderTopLeftRadius: '7px',
+    // borderTopRightRadius: '7px'
+  };
+
+  const mergedStyles = { ...style, ...customStyles };
+
+  return (
+    <div style={mergedStyles}
+      className={className}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+
+type Props = {
+  animation: string;
+  animationType: string;
+  enterAnimation: string;
+  leaveAnimation: string;
+  width: number | string;
+  height: number | string;
+  duration: number;
+  children: React.ReactNode;
+  customStyles: React.CSSProperties;
+}
+
+export default Dialog;

src/components/atoms/Popup/Rodal/Rodal.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
 
+import Dialog from './Dialog';
+
 import './rodal.css';
 
 // env
@@ -9,35 +11,6 @@ const UA = IN_BROWSER && window.navigator.userAgent.toLowerCase();
 const IS_IE_9 = UA && UA.indexOf('msie 9.0') > 0;
 
 
-const Dialog = (props: DialogProps) => {
-  const animation =
-    (props.animationType === 'enter'
-      ? props.enterAnimation
-      : props.leaveAnimation) || props.animation;
-
-  const className = `rodal-dialog rodal-${animation}-${props.animationType}`;
-
-  const { width, height, measure, duration } = props;
-
-  const style = {
-    width: width + measure,
-    height: height + measure,
-    animationDuration: duration + 'ms',
-    WebkitAnimationDuration: duration + 'ms'
-  };
-
-  const mergedStyles = { ...style };
-
-  return (
-    <div style={mergedStyles}
-      className={className}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-
 class Rodal extends React.Component<Props, State> {
   el: HTMLDivElement | null = null;
 
@@ -126,7 +99,6 @@ class Rodal extends React.Component<Props, State> {
       duration,
       className,
       children,
-      customStyles,
       showCloseButton,
       popupClass
     } = this.props;
@@ -154,7 +126,7 @@ class Rodal extends React.Component<Props, State> {
     return (
       <div
         style={style}
-        className={cn('rodal', `rodal-fade-${animationType}`, className)}
+        className={cn('rodal', `rodal-fade-${animationType}`, className, 'rodal-background')}
         onAnimationEnd={this.animationEnd}
         tabIndex={-1}
         ref={
@@ -168,9 +140,7 @@ class Rodal extends React.Component<Props, State> {
         <Dialog {...this.props}
           animationType={animationType}
         >
-          <div className={`child-wrapper ${popupClass}`}
-            style={{ ...customStyles }}
-          >
+          <div className={`child-wrapper ${popupClass}`}>
             {children}
             {CloseButton}
           </div>
@@ -184,46 +154,32 @@ class Rodal extends React.Component<Props, State> {
 Rodal.defaultProps = {
   width: 400,
   height: 240,
-  measure: 'px',
   visible: false,
   showMask: true,
   closeOnEsc: false,
   closeMaskOnClick: true,
   showCloseButton: true,
-  animation: 'zoom',
-  enterAnimation: '',
-  leaveAnimation: '',
-  onAnimationEnd: () => { },
+  animation: 'zoom', // slideup for msite;
   duration: 300,
   className: '',
   customStyles: {},
-  customMaskStyles: {}
+  customMaskStyles: {},
+  popupClass: 'popup-border',
+  enterAnimation: '',
+  leaveAnimation: '',
+  onAnimationEnd: () => { }
 } as DefaultProps;
 
 
-type DialogProps = {
-  animation: string;
-  animationType: string;
-  enterAnimation: string;
-  leaveAnimation: string;
-  width: number;
-  height: number;
-  measure: string;
-  duration: number;
-  children: React.ReactNode;
-}
-
-
 type State = {
   isShow: boolean;
   animationType: string;
 }
 
 
 type DefaultProps = {
-  width: number;
-  height: number;
-  measure: string;
+  width: number | string;
+  height: number | string;
   visible: boolean;
   showMask: boolean;
   closeOnEsc: boolean;

src/components/atoms/Popup/Rodal/rodal.css

@@ -540,3 +540,11 @@
   position: relative;
   width: 100%;
 }
+
+.popup-border {
+  border-radius: 6px;
+}
+
+.rodal-background {
+  background: var(--constantHalfTransparent);
+}

src/components/atoms/ToggleSelection/ToggleSelection.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+
+import './toggleSelection.css';
+
+
+const ToggleSelection = (props: Props) => {
+  const { leftText, rightText, isActive, onChange, parentClass } = props;
+
+  const choiceClasses = 'fs16 fw500 fullWidth absolute-center tc341ChoiceClass ';
+  const activeChoiceClasses = choiceClasses + 'clrGreen tc341ActiveChoice';
+  const inActiveChoiceClasses = choiceClasses + 'clrText tc341InactiveChoice';
+
+  const leftTextClasses = isActive ? activeChoiceClasses : inActiveChoiceClasses;
+  const rightTextClasses = !isActive ? activeChoiceClasses : inActiveChoiceClasses;
+
+
+  const changeChoice = (turnActive: boolean) => {
+    if (onChange && (turnActive !== isActive)) {
+      onChange(isActive);
+    }
+  };
+
+
+  return (
+    <div className={`valign-wrapper tc341ToggleWrapper ${parentClass}`}>
+      <div
+        className={leftTextClasses}
+        onClick={() => changeChoice(true)}
+      >
+        {leftText}
+      </div>
+
+      <div className="tc341Divider"></div>
+
+      <div
+        className={rightTextClasses}
+        onClick={() => changeChoice(false)}
+      >
+        {rightText}
+      </div>
+    </div>
+  );
+
+};
+
+
+const defaultProps: DefaultProps = {
+  parentClass: '',
+  leftText: 'En',
+  rightText: 'हि',
+  activeBackgroundColor: 'var(--primaryClr)',
+  inactiveBackgroundColor: 'var(--subText)'
+};
+
+
+type RequiredProps = {
+  isActive: boolean;
+  onChange: (isActive: boolean) => void;
+}
+
+
+type DefaultProps = {
+  parentClass: string;
+  leftText: React.ReactNode;
+  rightText: React.ReactNode;
+  activeBackgroundColor: string;
+  inactiveBackgroundColor: string;
+}
+
+
+ToggleSelection.defaultProps = defaultProps;
+
+export type Props = RequiredProps & DefaultProps;
+
+export default ToggleSelection;

src/components/atoms/ToggleSelection/index.ts

@@ -0,0 +1 @@
+export { default as ToggleSelection } from './ToggleSelection';

src/components/atoms/ToggleSelection/toggleSelection.css

@@ -0,0 +1,26 @@
+.tc341ToggleWrapper {
+  width: 88px;
+  height: 32px;
+  border-radius: 30px;
+  border: 1px solid var(--primaryClr);
+  justify-content: space-evenly;
+  overflow: hidden;
+}
+
+
+.tc341Divider {
+  height: 100%;
+  width: 1px;
+  background-color: var(--primaryClr);
+  z-index: var(--zindex300);
+}
+
+
+.tc341ActiveChoice {
+  background-color: var(--primaryClr10);
+}
+
+
+.tc341ChoiceClass {
+  height: 100%;
+}