react-restyle-components 0.1.58 → 0.1.60

package/src/core-components/atoms/form/form.component.tsx

@@ -0,0 +1,604 @@
+import React, {useState, useEffect, Ref} from 'react';
+import classNames from 'classnames';
+
+interface LabelProps {
+  htmlFor: string;
+  hasError?: boolean;
+  style?: any;
+  children?: React.ReactNode;
+}
+
+export const Label: React.FunctionComponent<LabelProps> = (props) => (
+  <>
+    <label
+      htmlFor={props.htmlFor}
+      className={`${
+        props.hasError ? 'text-red-400' : 'text-current'
+      } block text-3xs font-medium  mb-1`}
+      style={{...props.style}}
+    >
+      {props.children}
+    </label>
+  </>
+);
+
+interface InputWrapperProps {
+  id?: string;
+  label?: string;
+  className?: string;
+  hasError?: boolean;
+  style?: any;
+  ref?: any;
+  children?: React.ReactNode;
+}
+
+export const InputWrapper: React.FunctionComponent<InputWrapperProps> = (
+  props: InputWrapperProps
+) => (
+  <div className={props.className} ref={props.ref}>
+    <Label
+      htmlFor={props.id || ''}
+      hasError={props.hasError}
+      style={{...props.style}}
+    >
+      <span className="dark:text-white w-10">{props.label}</span>
+    </Label>
+    {props.children}
+  </div>
+);
+
+interface InputProps extends InputWrapperProps {
+  value?: any;
+  defaultValue?: any;
+  name?: string;
+  placeholder?: string;
+  type?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  labelClassName?: string;
+  rows?: number;
+  style?: any;
+  wrapperStyle?: any;
+  hasError?: boolean;
+  pattern?: any;
+  maxLength?: number;
+  isAutoFocus?: boolean;
+  input2isBlurEnable?: boolean;
+  onChange?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  onKeyDown?: (e: any) => void;
+  onKeyUp?: (e: any) => void;
+  inputRef?: any;
+}
+
+export const Input = React.forwardRef((props: InputProps, ref: Ref<any>) => {
+  const handleKeyPress = (e) => {
+    const key = e.key;
+    const regex = props.pattern;
+    if (regex && !regex?.test(key)) {
+      e.preventDefault();
+    }
+  };
+  return (
+    <InputWrapper
+      label={props.label}
+      id={props.id}
+      hasError={props.hasError}
+      style={props.wrapperStyle}
+      className={props.labelClassName}
+    >
+      <input
+        type={props.type || 'text'}
+        id={props.id}
+        ref={props.inputRef}
+        data-testid="INPT"
+        autoFocus={props?.isAutoFocus || false}
+        name={props.name}
+        style={props.style}
+        defaultValue={props.defaultValue}
+        placeholder={props.placeholder}
+        required={props.required || false}
+        disabled={props.disabled || false}
+        autoComplete="given-name"
+        maxLength={props.maxLength}
+        value={props.value}
+        onChange={(e) => props.onChange && props.onChange(e.target.value)}
+        onKeyPress={(e) => handleKeyPress(e)}
+        className={`${
+          props.className
+        } leading-4 p-2  dark:bg-boxdark  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${
+          props.hasError ? 'border-red ' : 'border-gray-300'
+        } rounded-md `}
+        onBlur={(e) => props.onBlur && props.onBlur(e.target.value)}
+        onKeyDown={props.onKeyDown && props.onKeyDown}
+      />
+    </InputWrapper>
+  );
+});
+
+export const InputPassword = React.forwardRef(
+  (props: InputProps, ref: Ref<any>) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleMouseDown = () => {
+      setShowPassword(true);
+    };
+
+    const handleMouseUp = () => {
+      setShowPassword(false);
+    };
+
+    return (
+      <InputWrapper
+        label={props.label}
+        id={props.id}
+        hasError={props.hasError}
+        style={props.wrapperStyle}
+        className={props.labelClassName}
+      >
+        <div className="flex items-center relative">
+          <input
+            type={showPassword ? 'text' : 'password'}
+            id={props.id}
+            ref={props.inputRef}
+            data-testid="INPT"
+            autoFocus={props?.isAutoFocus || false}
+            name={props.name}
+            style={props.style}
+            defaultValue={props.defaultValue}
+            placeholder={props.placeholder}
+            required={props.required || false}
+            disabled={props.disabled || false}
+            autoComplete="given-name"
+            maxLength={props.maxLength}
+            value={props.value}
+            onChange={(e) => props.onChange && props.onChange(e.target.value)}
+            // onKeyPress={e => handleKeyPress(e)}
+            className={`${
+              props.className
+            } leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${
+              props.hasError ? 'border-red ' : 'border-gray-300'
+            } rounded-md dark:bg-boxdark`}
+            onBlur={(e) => props.onBlur && props.onBlur(e.target.value)}
+            onKeyDown={props.onKeyDown && props.onKeyDown}
+          />
+          <div className="flex absolute right-3">
+            <svg
+              className="h-6 dark:bg-boxdark"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 576 512"
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+            >
+              {showPassword ? (
+                <path
+                  fill="currentColor"
+                  d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
+                />
+              ) : (
+                <path
+                  fill="currentColor"
+                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                />
+              )}
+            </svg>
+          </div>
+        </div>
+      </InputWrapper>
+    );
+  }
+);
+
+export const Input1 = React.forwardRef((props: InputProps, ref: Ref<any>) => {
+  const handleKeyPress = (e) => {
+    const key = e.key;
+    const regex = props.pattern;
+    if (regex && !regex?.test(key)) {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      id={props.id}
+      hasError={props.hasError}
+      style={props.wrapperStyle}
+      className={props.labelClassName}
+    >
+      <input
+        type={props.type || 'text'}
+        id={props.id}
+        ref={props.inputRef}
+        data-testid="INPT"
+        autoFocus={props?.isAutoFocus || false}
+        name={props.name}
+        style={props.style}
+        defaultValue={props.defaultValue}
+        placeholder={props.placeholder}
+        required={props.required || false}
+        disabled={props.disabled || false}
+        autoComplete="given-name"
+        maxLength={props.maxLength}
+        value={props.value}
+        onChange={(e) => props.onChange && props.onChange(e.target.value)}
+        onKeyPress={(e) => handleKeyPress(e)}
+        className={`${
+          props.className
+        } leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${
+          props.hasError ? 'border-red ' : 'border-gray-300'
+        } rounded-md dark:text-black`}
+        onBlur={(e) => props.onBlur && props.onBlur(e)}
+        onKeyDown={props.onKeyDown}
+      />
+    </InputWrapper>
+  );
+});
+
+export const Input2 = React.forwardRef((props: InputProps, ref: Ref<any>) => {
+  const [isBlur, setIsBlur] = useState(true);
+  const handleKeyPress = (e) => {
+    const key = e.key;
+    const regex = props.pattern;
+    if (regex && !regex?.test(key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleBlur = (value: string) => {
+    props.onBlur && isBlur && props.onBlur(value);
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      id={props.id}
+      hasError={props.hasError}
+      style={props.wrapperStyle}
+      className={props.labelClassName}
+    >
+      <input
+        type={props.type || 'text'}
+        id={props.id}
+        ref={props.inputRef}
+        data-testid="INPT"
+        autoFocus={props?.isAutoFocus || false}
+        name={props.name}
+        style={props.style}
+        defaultValue={props.defaultValue}
+        placeholder={props.placeholder}
+        required={props.required || false}
+        disabled={props.disabled || false}
+        autoComplete="given-name"
+        maxLength={props.maxLength}
+        value={props.value}
+        onChange={(e) => {
+          setIsBlur(true);
+          props.onChange && props.onChange(e.target.value);
+        }}
+        onKeyPress={(e) => handleKeyPress(e)}
+        className={`${
+          props.className
+        } leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${
+          props.hasError ? 'border-red ' : 'border-gray-300'
+        } rounded-md dark:text-black`}
+        onKeyDown={(e: any) => {
+          if (e.keyCode == 13) {
+            setIsBlur(false);
+            props.onBlur && props.onBlur(e.target.value);
+          }
+          props.onKeyDown && props.onKeyDown(e);
+        }}
+        onBlur={(e) => {
+          handleBlur(e.target.value);
+        }}
+      />
+    </InputWrapper>
+  );
+});
+
+export const MultilineInput = (props: InputProps) => (
+  <InputWrapper label={props.label} id={props.id} className={props.className}>
+    <textarea
+      id={props.id}
+      autoComplete="given-name"
+      value={props.value}
+      disabled={props.disabled}
+      style={props.style}
+      rows={props.rows}
+      onKeyUp={props.onKeyUp && props.onKeyUp}
+      placeholder={props.placeholder}
+      onChange={(e) => props.onChange && props.onChange(e.target.value)}
+      onBlur={(e) => props.onBlur && props.onBlur(e.target.value)}
+      className={`leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${
+        props.hasError ? 'border-red ' : 'border-gray-300'
+      } rounded-md dark:bg-boxdark`}
+      defaultValue={props.defaultValue}
+    />
+  </InputWrapper>
+);
+
+export const MultilineInput1 = (props: InputProps) => (
+  <InputWrapper label={props.label} id={props.id} className={props.className}>
+    <textarea
+      id={props.id}
+      autoComplete="given-name"
+      value={props.value}
+      disabled={props.disabled}
+      style={props.style}
+      rows={props.rows}
+      placeholder={props.placeholder}
+      onChange={(e) => props.onChange && props.onChange(e.target.value)}
+      onBlur={(e) => props.onBlur && props.onBlur(e)}
+      className={`leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${
+        props.hasError ? 'border-red ' : 'border-gray-300'
+      } rounded-md`}
+      defaultValue={props.defaultValue}
+    />
+  </InputWrapper>
+);
+
+interface InputRadioProps extends InputWrapperProps {
+  values?: any[];
+  value?: string;
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  labelStyle?: any;
+  onChange?: (e: any) => void;
+}
+
+export const InputRadio = (props: InputRadioProps) => (
+  <InputWrapper label={props.label} id={props.id} style={props.labelStyle}>
+    {props.values?.map((item, key) => (
+      <div
+        className="flex items-center gap-2"
+        key={key}
+        onClick={() => {
+          props.onChange && props.onChange(item.value);
+        }}
+      >
+        <input
+          key={key}
+          type="radio"
+          id={props.id}
+          name={props.name}
+          value={item.value}
+          checked={item.value == props.value ? true : false}
+          onChange={() => props.onChange && props.onChange(item.value)}
+          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        />
+        <Label htmlFor={props.id || ''} style={{marginTop: 6}}>
+          {item.label}
+        </Label>
+      </div>
+    ))}
+  </InputWrapper>
+);
+
+interface InputDateProps extends InputWrapperProps {
+  value?: any;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  hasError?: boolean;
+  format?: string;
+  use12Hours?: boolean;
+  isCalenderOpen?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  onChange?: (e: any) => void;
+  onCalendarToggle?: (status: boolean) => void;
+  onFocusRemove?: (date: any) => void;
+}
+
+export const InputDate = ({
+  name,
+  value,
+  placeholder,
+  use12Hours = true,
+  label,
+  id,
+  hasError,
+  disabled,
+  format,
+  onChange,
+  onFocusRemove,
+}: InputDateProps) => (
+  <InputWrapper label={label} id={id} hasError={hasError}>
+    <input
+      type="date"
+      id={id}
+      name={name}
+      disabled={disabled || false}
+      value={value}
+      onChange={(e) => onChange && onChange(e)}
+      className={`leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${
+        hasError ? 'border-red ' : 'border-gray-300'
+      } rounded-md`}
+    />
+  </InputWrapper>
+);
+
+export const CheckBox = (props) => {
+  return (
+    <div>
+      <input
+        key={props.id}
+        onClick={props.handleCheckChieldElement}
+        type="checkbox"
+        checked={props.isChecked}
+        value={props.value}
+      />{' '}
+      {props.value}
+    </div>
+  );
+};
+
+interface InputFileProps extends InputWrapperProps {
+  value?: any;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  accept?: string;
+  multiple?: boolean;
+  hasError?: boolean;
+  onChange?: (e: any) => void;
+}
+
+export const InputFile = (props: InputFileProps) => (
+  <InputWrapper label={props.label} id={props.id}>
+    <input
+      type="file"
+      id={props.id}
+      name={props.name}
+      disabled={props.disabled || false}
+      accept={props.accept}
+      value={props.value}
+      onChange={(e) => props.onChange && props.onChange(e)}
+      className={`leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${
+        props.hasError ? 'border-red ' : 'border-gray-300'
+      } rounded-md`}
+      multiple={props.multiple}
+    />
+  </InputWrapper>
+);
+
+interface ToggleProps extends InputWrapperProps {
+  disabled?: boolean;
+  isToggleLabel?: boolean;
+  defaultChecked?: boolean;
+  className?: string;
+  icons?: any;
+  value?: boolean;
+  name?: string;
+  onChange?: (e: boolean) => void;
+  style?: any;
+}
+
+export const Toggle = (props: ToggleProps) => {
+  const [toggle, setToggle] = useState(props.value);
+  const {onChange, disabled, className, isToggleLabel = true} = props;
+
+  useEffect(() => {
+    setToggle(props.value);
+  }, [props.value]);
+
+  const triggerToggle = () => {
+    if (disabled) {
+      return;
+    }
+    setToggle(!toggle);
+    if (typeof onChange === 'function') {
+      onChange(!toggle);
+    }
+  };
+
+  const toggleClasses = classNames(
+    'wrg-toggle ',
+    {
+      'wrg-toggle--checked': toggle,
+      'wrg-toggle--disabled': disabled,
+    },
+    className
+  );
+
+  return (
+    <InputWrapper label={props.label} id={props.id} style={props.style}>
+      <div onClick={triggerToggle} className={toggleClasses}>
+        <div
+          className={
+            'wrg-toggle-container ' +
+            (toggle ? 'bg-green-700' : 'bg-black dark:bg-white')
+          }
+        >
+          {isToggleLabel && (
+            <>
+              <div className="wrg-toggle-check">
+                <span className="text-white ml-1">Yes</span>
+              </div>
+              <div className="wrg-toggle-uncheck">
+                <span className="dark:text-black">No</span>
+              </div>
+            </>
+          )}
+        </div>
+        <div
+          className={`wrg-toggle-circle  dark:bg-black ${
+            toggle ? 'ml-1' : 'mr-1'
+          }  `}
+        ></div>
+        <input
+          type="checkbox"
+          aria-label="Toggle Button"
+          className="wrg-toggle-input"
+        />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export const DeliveryScheduleToggle = (props: ToggleProps) => {
+  const [toggle, setToggle] = useState(props.value);
+  const {onChange, disabled, className, isToggleLabel = true} = props;
+
+  useEffect(() => {
+    setToggle(props.value);
+  }, [props.value]);
+
+  const triggerToggle = () => {
+    if (disabled) {
+      return;
+    }
+    setToggle(!toggle);
+    if (typeof onChange === 'function') {
+      onChange(!toggle);
+    }
+  };
+
+  const toggleClasses = classNames(
+    'wrg-toggle1 ',
+    {
+      'wrg-toggle--checked1': toggle,
+      'wrg-toggle--disabled1': disabled,
+    },
+    className
+  );
+
+  return (
+    <InputWrapper label={props.label} id={props.id} style={props.style}>
+      <div onClick={triggerToggle} className={toggleClasses}>
+        <div
+          className={
+            'wrg-toggle-container1 ' +
+            (toggle ? 'bg-green-700' : 'bg-black dark:bg-white')
+          }
+        >
+          {isToggleLabel && (
+            <>
+              <div className="wrg-toggle-check1">
+                <span className="text-white ml-1">Departments</span>
+              </div>
+              <div className="wrg-toggle-uncheck1">
+                <span className="dark:text-black">Patients</span>
+              </div>
+            </>
+          )}
+        </div>
+        <div
+          className={`wrg-toggle-circle1  dark:bg-black ${
+            toggle ? 'ml-1' : 'mr-1'
+          }  `}
+        ></div>
+        <input
+          type="checkbox"
+          aria-label="Toggle Button"
+          className="wrg-toggle-input1"
+        />
+      </div>
+    </InputWrapper>
+  );
+};