@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

package/src/components/input/InputTypes.ts

@@ -1,77 +1,77 @@
-import { TextareaProps, SelectProps } from '@chakra-ui/react';
-import reactSelect from 'react-select';
-import { InputProps } from '.';
-
-export type FieldProps = {
-  rules?: ValidationProps;
-  isInvalid?: boolean;
-  errorText?: string;
-};
-
-export type InputType =
-  | 'text'
-  | 'select'
-  | 'multi-select'
-  | 'pilled-text'
-  | 'textarea'
-  | 'radio'
-  | 'checkbox'
-  | 'switch';
-
-export type FieldOption = {
-  label: string;
-  value: string | 'section_header';
-  sortValue: number;
-};
-
-export type FieldOptions = FieldOption[];
-
-export interface ValidationProps {
-  isRequired: boolean;
-  isInvalid?: boolean;
-  errorText?: string;
-}
-
-export interface InputFieldProps
-  extends Omit<
-      React.DetailedHTMLProps<
-        React.InputHTMLAttributes<HTMLInputElement>,
-        HTMLInputElement
-      >,
-      'color' | 'height' | 'width' | 'size' | 'ref'
-    >,
-    FieldProps,
-    Partial<InputProps> {}
-
-export interface TextareaFieldProps
-  extends Omit<
-      React.DetailedHTMLProps<
-        React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-        HTMLTextAreaElement
-      >,
-      'color' | 'height' | 'width' | 'size' | 'ref'
-    >,
-    FieldProps,
-    Partial<TextareaProps> {}
-
-export interface SelectFieldProps
-  extends Omit<
-      React.DetailedHTMLProps<
-        React.SelectHTMLAttributes<HTMLSelectElement>,
-        HTMLSelectElement
-      >,
-      'color' | 'height' | 'width' | 'size' | 'ref'
-    >,
-    FieldProps,
-    Partial<SelectProps> {}
-
-export interface ReactSelectFieldProps
-  extends Omit<
-      React.DetailedHTMLProps<
-        React.SelectHTMLAttributes<HTMLSelectElement>,
-        HTMLSelectElement
-      >,
-      'color' | 'height' | 'width' | 'size' | 'ref'
-    >,
-    FieldProps,
-    Partial<reactSelect> {}
+import { TextareaProps, SelectProps } from '@chakra-ui/react';
+import reactSelect from 'react-select';
+import { InputProps } from '.';
+
+export type FieldProps = {
+  rules?: ValidationProps;
+  isInvalid?: boolean;
+  errorText?: string;
+};
+
+export type InputType =
+  | 'text'
+  | 'select'
+  | 'multi-select'
+  | 'pilled-text'
+  | 'textarea'
+  | 'radio'
+  | 'checkbox'
+  | 'switch';
+
+export type FieldOption = {
+  label: string;
+  value: string | 'section_header';
+  sortValue: number;
+};
+
+export type FieldOptions = FieldOption[];
+
+export interface ValidationProps {
+  isRequired: boolean;
+  isInvalid?: boolean;
+  errorText?: string;
+}
+
+export interface InputFieldProps
+  extends Omit<
+      React.DetailedHTMLProps<
+        React.InputHTMLAttributes<HTMLInputElement>,
+        HTMLInputElement
+      >,
+      'color' | 'height' | 'width' | 'size' | 'ref'
+    >,
+    FieldProps,
+    Partial<InputProps> {}
+
+export interface TextareaFieldProps
+  extends Omit<
+      React.DetailedHTMLProps<
+        React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+      >,
+      'color' | 'height' | 'width' | 'size' | 'ref'
+    >,
+    FieldProps,
+    Partial<TextareaProps> {}
+
+export interface SelectFieldProps
+  extends Omit<
+      React.DetailedHTMLProps<
+        React.SelectHTMLAttributes<HTMLSelectElement>,
+        HTMLSelectElement
+      >,
+      'color' | 'height' | 'width' | 'size' | 'ref'
+    >,
+    FieldProps,
+    Partial<SelectProps> {}
+
+export interface ReactSelectFieldProps
+  extends Omit<
+      React.DetailedHTMLProps<
+        React.SelectHTMLAttributes<HTMLSelectElement>,
+        HTMLSelectElement
+      >,
+      'color' | 'height' | 'width' | 'size' | 'ref'
+    >,
+    FieldProps,
+    Partial<reactSelect> {}

package/src/components/input/StackedCheckbox/StackedCheckbox.tsx

@@ -1,44 +1,44 @@
-import React from 'react';
-import { Checkbox, Text } from '@chakra-ui/react';
-import { InputFieldProps } from '../InputTypes';
-
-export interface StackedCheckboxProps extends InputFieldProps {
-  label: string;
-  variant: string;
-}
-
-/**
- * A functional React component utilized to render the `StackedCheckbox` component.
- */
-const StackedCheckbox = React.forwardRef<
-  HTMLInputElement,
-  StackedCheckboxProps
->(({ value, label, onChange, disabled, variant }, _ref) => {
-  if (value === null) return null;
-
-  return (
-    <Checkbox
-      ref={_ref}
-      defaultChecked={Boolean(value)}
-      defaultValue={value}
-      onChange={e => {
-        if (onChange) return onChange(e.target.checked as any);
-      }}
-      isChecked={Boolean(value)}
-      disabled={disabled}
-      variant={variant}
-    >
-      {/* solved like this because of bug in chakra
-      https://github.com/chakra-ui/chakra-ui/issues/7328 */}
-      <Text
-        fontSize={variant === 'mobile' ? '17px' : '13px'}
-        alignSelf="center"
-      >
-        {label}
-      </Text>
-      {/* {label} */}
-    </Checkbox>
-  );
-});
-
-export default StackedCheckbox;
+import React from 'react';
+import { Checkbox, Text } from '@chakra-ui/react';
+import { InputFieldProps } from '../InputTypes';
+
+export interface StackedCheckboxProps extends InputFieldProps {
+  label: string;
+  variant: string;
+}
+
+/**
+ * A functional React component utilized to render the `StackedCheckbox` component.
+ */
+const StackedCheckbox = React.forwardRef<
+  HTMLInputElement,
+  StackedCheckboxProps
+>(({ value, label, onChange, disabled, variant }, _ref) => {
+  if (value === null) return null;
+
+  return (
+    <Checkbox
+      ref={_ref}
+      defaultChecked={Boolean(value)}
+      defaultValue={value}
+      onChange={e => {
+        if (onChange) return onChange(e.target.checked as any);
+      }}
+      isChecked={Boolean(value)}
+      disabled={disabled}
+      variant={variant}
+    >
+      {/* solved like this because of bug in chakra
+      https://github.com/chakra-ui/chakra-ui/issues/7328 */}
+      <Text
+        fontSize={variant === 'mobile' ? '17px' : '13px'}
+        alignSelf="center"
+      >
+        {label}
+      </Text>
+      {/* {label} */}
+    </Checkbox>
+  );
+});
+
+export default StackedCheckbox;

package/src/components/input/StackedInput/StackedInput.tsx

@@ -1,55 +1,60 @@
-import React from 'react';
-import { Input, InputGroup } from '@chakra-ui/react';
-import { InputFieldProps } from '../InputTypes';
-
-export interface StackedInputProps extends InputFieldProps {
-  isRequired?: boolean;
-  allowDefault?: boolean;
-  leftElement?: React.ReactNode;
-  rightElement?: React.ReactNode;
-  variant?: string;
-}
-
-/**
- * A functional React component utilized to render the `StackedInput` component.
- */
-const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
-  (
-    {
-      type = 'text',
-      isRequired,
-      rightElement,
-      leftElement,
-      defaultValue,
-      allowDefault,
-      variant,
-      ...props
-    },
-    _ref
-  ) => {
-    return (
-      <InputGroup>
-        {leftElement && leftElement}
-        {variant}
-        <Input
-          type={type}
-          isRequired={isRequired}
-          {...props}
-          ref={_ref}
-          defaultValue={defaultValue}
-          fontSize={variant === 'mobile' ? '17px' : '13px'}
-          variant={variant}
-          onKeyDown={e => {
-            if (e.key === 'Enter' && !allowDefault) {
-              e.stopPropagation();
-              e.preventDefault();
-            }
-          }}
-        />
-        {rightElement && rightElement}
-      </InputGroup>
-    );
-  }
-);
-
-export default StackedInput;
+import React from 'react';
+import { Input, InputGroup } from '@chakra-ui/react';
+import { InputFieldProps } from '../InputTypes';
+
+export interface StackedInputProps extends InputFieldProps {
+  isRequired?: boolean;
+  allowDefault?: boolean;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  variant?: string;
+  label?: string;
+}
+
+/**
+ * A functional React component utilized to render the `StackedInput` component.
+ */
+const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
+  (
+    {
+      type = 'text',
+      isRequired,
+      rightElement,
+      leftElement,
+      defaultValue,
+      allowDefault,
+      variant,
+      label,
+      ...props
+    },
+    _ref
+  ) => {
+    const isMobile = variant === 'mobile';
+    const placeholder = isMobile && label ? label : undefined;
+    return (
+      <InputGroup>
+        {leftElement && leftElement}
+        {label}
+        <Input
+          {...props}
+          placeholder={placeholder}
+          type={type}
+          isRequired={isRequired}
+          ref={_ref}
+          defaultValue={defaultValue}
+          fontSize={isMobile ? '17px' : '13px'}
+          variant={variant}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !allowDefault) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }}
+        />
+        {rightElement && rightElement}
+      </InputGroup>
+    );
+  }
+);
+
+export default StackedInput;