[refactor] rewrite BG Icon & Input Group components

EasyWebApp · Jan 21, 2024 · cd52a81 · cd52a81
1 parent e2af9e9
commit cd52a81
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.7",
+    "version": "2.0.0-beta.8",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -29,7 +29,7 @@
         "dom-renderer": "^2.0.6",
         "mobx": "^6.12.0",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.7",
+        "web-cell": "^3.0.0-rc.8",
         "web-utility": "^4.1.3"
     },
     "peerDependencies": {
@@ -70,7 +70,7 @@
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.7",
-        "typedoc-plugin-mdn-links": "^3.1.12",
+        "typedoc-plugin-mdn-links": "^3.1.13",
         "typescript": "~5.3.3"
     },
     "scripts": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/source/Button.tsx b/source/Button.tsx
@@ -18,12 +18,18 @@ export const Button: FC<ButtonProps> = ({
     className,
     href,
     variant,
+    size,
     active,
     children,
     ...props
 }) => {
     const { disabled, tabIndex } = props,
-        Class = classNames('btn', variant && `btn-${variant}`, className);
+        Class = classNames(
+            'btn',
+            variant && `btn-${variant}`,
+            size && `btn-${size}`,
+            className
+        );
 
     return href ? (
         <a

diff --git a/source/Form.tsx b/source/Form.tsx
@@ -38,6 +38,38 @@ export const FloatingLabel: FC<FloatingLabelProps> = ({
     </div>
 );
 
+export interface InputGroupProps extends WebCellProps<HTMLDivElement> {
+    size?: 'sm' | 'lg';
+}
+
+export const InputGroup: FC<InputGroupProps> = ({
+    className = '',
+    size,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'input-group',
+            size && `input-group-${size}`,
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export const InputGroupText: FC<WebCellProps<HTMLSpanElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <span className={`input-group-text ${className}`} {...props}>
+        {children}
+    </span>
+);
+
 export type FormControlTag = 'input' | 'textarea' | 'select';
 
 export type FormControlProps<T extends FormControlTag> = WebCellProps &

diff --git a/source/Icon.tsx b/source/Icon.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { WebCellProps } from 'web-cell';
+import { FC, WebCellProps } from 'web-cell';
 
 import { Color } from './type';
 
@@ -9,27 +9,50 @@ export interface IconProps extends WebCellProps {
     size?: number;
 }
 
-export function Icon({
+export const Icon: FC<IconProps> = ({
     className,
     style,
     color,
     name,
     size,
     children,
     ...rest
-}: IconProps) {
-    return (
-        <i
-            className={classNames(
-                `bi-${name}`,
-                color && `text-${color}`,
-                className
-            )}
-            style={{
-                ...style,
-                fontSize: size ? `${size}rem` : undefined
-            }}
-            {...rest}
-        />
-    );
+}) => (
+    <i
+        className={classNames(
+            `bi-${name}`,
+            color && `text-${color}`,
+            className
+        )}
+        style={{
+            ...style,
+            fontSize: size ? `${size}rem` : undefined
+        }}
+        {...rest}
+    />
+);
+
+export interface BGIconProps extends IconProps {
+    type?: 'square' | 'circle';
 }
+
+export const BGIcon: FC<BGIconProps> = ({
+    className = '',
+    type = 'square',
+    color = 'primary',
+    children,
+    ...props
+}) => (
+    <span
+        className={classNames(
+            'd-inline-block',
+            'p-3',
+            `bg-${color}`,
+            `rounded${type === 'square' ? '' : '-circle'}`,
+            className
+        )}
+        {...props}
+    >
+        <Icon color={color === 'light' ? 'dark' : 'light'} {...props} />
+    </span>
+);