@xaypay/tui 0.0.105 → 0.0.106

package/src/components/pagination/paginationRange.js

@@ -1,56 +1,45 @@
-import React, { useMemo } from "react";
+import { useMemo } from 'react'
 
-export const Dots = "...";
+export const Dots = '...'
 
 const range = (start, end) => {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, idx) => idx + start);
-};
-
-export const PaginationRange = ({
-  offset,
-  currentTotalCount,
-  currentPageNumber,
-}) => {
-  const paginationRange = useMemo(() => {
-    const firstPageIndex = 1;
-    const totalPageCount = Math.ceil(currentTotalCount / offset);
-    const lastPageIndex = totalPageCount;
-
-    if (7 >= totalPageCount) {
-      return range(1, totalPageCount);
-    }
-
-    const leftSiblingIndex = Math.max(currentPageNumber - 1, 1);
-    const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount);
-
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-
-      let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4;
-
-      let leftRange = range(1, leftItemCount);
-      return [...leftRange, Dots, totalPageCount];
-
-    } else if (shouldShowLeftDots && !shouldShowRightDots) {
-
-      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3;
-
-      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-      return [firstPageIndex, Dots, ...rightRange];
-
-    } else if (shouldShowLeftDots && shouldShowRightDots) {
-
-      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
-
-    } else {
-      return range(firstPageIndex, totalPageCount);
-    }
-
-  }, [currentTotalCount, offset, currentPageNumber]);
-
-  return paginationRange;
-};
+    const length = end - start + 1
+    return Array.from({ length }, (_, idx) => idx + start)
+}
+
+export const PaginationRange = ({ offset, currentTotalCount, currentPageNumber }) => {
+    const paginationRange = useMemo(() => {
+        const firstPageIndex = 1
+        const totalPageCount = Math.ceil(currentTotalCount / offset)
+        const lastPageIndex = totalPageCount
+
+        if (7 >= totalPageCount) {
+            return range(1, totalPageCount)
+        }
+
+        const leftSiblingIndex = Math.max(currentPageNumber - 1, 1)
+        const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount)
+
+        const shouldShowLeftDots = leftSiblingIndex > 2
+        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2
+
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4
+
+            let leftRange = range(1, leftItemCount)
+            return [...leftRange, Dots, totalPageCount]
+        } else if (shouldShowLeftDots && !shouldShowRightDots) {
+            let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3
+
+            let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount)
+            return [firstPageIndex, Dots, ...rightRange]
+        } else if (shouldShowLeftDots && shouldShowRightDots) {
+            let middleRange = range(leftSiblingIndex, rightSiblingIndex)
+            return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex]
+        } else {
+            return range(firstPageIndex, totalPageCount)
+        }
+    }, [currentTotalCount, offset, currentPageNumber])
+
+    return paginationRange
+}

package/src/components/radio/index.js

@@ -1,68 +1,55 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import styles from "./radio.module.css";
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from './radio.module.css'
 
-export const Radio = ({
-  disabled,
-  defaultChecked,
-  required,
-  className,
-  name,
-  value,
-  jsonData,
-  label,
-  keyNames,
-  ...props
-}) => {
-  const classProps = classNames(styles.checkbox, className);
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+export const Radio = ({ disabled, defaultChecked, required, className, name, value, jsonData, label, ...props }) => {
+    const classProps = classNames(styles.checkbox, className)
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : []
 
-  return (
-    <>
-      {parseData.map((element, id) => {
-        return (
-          <label className={`${styles["radio-wrap"]} radio-wrap-rem`} key={element.value}>
-            <input
-              type="radio"
-              className={classProps}
-              disabled={disabled}
-              required={required}
-              defaultChecked={id === 0 ? defaultChecked : ""}
-              value={value ? value : element.value}
-              name={name ? name : element.name}
-              {...props}
-            />
-            <span className={`${styles["radio-checkmark"]} radio-checkmark-rem`}/>
-            {element.label ? (
-              <span className={styles.labelRadio}>
-                {label ? label : element.label}
-              </span>
-            ) : (
-              ""
-            )}
-          </label>
-        );
-      })}
-    </>
-  );
-};
+    return (
+        <>
+            {parseData.map((element, id) => {
+                return (
+                    <label className={`${styles['radio-wrap']} radio-wrap-rem`} key={element.value}>
+                        <input
+                            type="radio"
+                            className={classProps}
+                            disabled={disabled}
+                            required={required}
+                            defaultChecked={id === 0 ? defaultChecked : ''}
+                            value={value ? value : element.value}
+                            name={name ? name : element.name}
+                            {...props}
+                        />
+                        <span className={`${styles['radio-checkmark']} radio-checkmark-rem`} />
+                        {element.label ? (
+                            <span className={styles.labelRadio}>{label ? label : element.label}</span>
+                        ) : (
+                            ''
+                        )}
+                    </label>
+                )
+            })}
+        </>
+    )
+}
 
 Radio.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  jsonData: PropTypes.string,
-  label: PropTypes.string,
-  keyNames: PropTypes.object,
-};
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    required: PropTypes.bool,
+    defaultChecked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    name: PropTypes.string,
+    value: PropTypes.string,
+    jsonData: PropTypes.string,
+    label: PropTypes.string,
+    keyNames: PropTypes.object,
+}
 
 Radio.defaultProps = {
-  onChange: undefined,
-  jsonData:
-    '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]',
-};
+    onChange: undefined,
+    jsonData:
+        '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]',
+}

package/src/components/radio/radio.stories.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { Radio } from ".";
+import React from 'react'
+import { Radio } from '.'
 export default {
-  component: Radio,
-  title: "Components/Radio",
-};
+    component: Radio,
+    title: 'Components/Radio',
+}
 
-const Template = (args) => <Radio {...args} />;
+const Template = (args) => <Radio {...args} />
 
-export const RadioButton = Template.bind({});
+export const RadioButton = Template.bind({})