refactor(button):重构按钮(#826)

uiwjs · May 20, 2022 · 3b3a4a6 · 3b3a4a6
1 parent 5ede608
commit 3b3a4a6
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 155 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "watch:uiw": "lerna exec --scope uiw -- tsbb watch",
     "watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
     "watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
-    "watch": "lerna exec  --scope @uiw/react-date-picker -- tsbb watch",
+    "watch": "lerna exec  --scope @uiw/react-button -- tsbb watch",
     "//-----------": "//-----------",
     "build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
     "start": "lerna exec --scope website -- npm run start",

diff --git a/packages/react-button/README.md b/packages/react-button/README.md
@@ -25,7 +25,7 @@ import { Button, Divider, Icon } from 'uiw';
 
 const Demo = ()=>(
   <div>
-    <Button type="primary">主要按钮</Button>
+    <Button type="primary" >主要按钮</Button>
     <Button type="success">成功按钮</Button>
     <Button type="warning">警告按钮</Button>
     <Button type="danger">错误按钮</Button>
@@ -209,7 +209,7 @@ const Demo = ()=>(
     <ButtonGroup style={{ marginTop: 5 }}>
       <Button disabled type="light">按钮</Button>
       <Button disabled type="light">按钮</Button>
-      <Button type="light">按钮</Button>
+      <Button disabled type="light">按钮</Button>
       <Button disabled type="light">按钮</Button>
     </ButtonGroup>
     <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
@@ -224,7 +224,7 @@ const Demo = ()=>(
     <ButtonGroup style={{ marginTop: 5 }}>
       <Button disabled icon={<Icon type="copy" />}  type="primary">复制</Button>
       <Button disabled icon={<Icon type="delete" />}   type="primary">删除</Button>
-      <Button icon={<Icon type="file-add" />}  type="primary">添加文件</Button>
+      <Button disabled icon={<Icon type="file-add" />}  type="primary">添加文件</Button>
       <Button disabled icon={<Icon type="map" />}  type="primary">地图</Button>
       <Button disabled icon={<Icon type="linux" />} type="primary">Linux</Button>
       <Button disabled icon={<Icon type="apple" />} type="primary">Apple</Button>

diff --git a/packages/react-button/src/index.tsx b/packages/react-button/src/index.tsx
@@ -10,6 +10,7 @@ export interface ButtonProps extends IProps, Omit<HTMLButtonProps, 'size'> {
   loading?: boolean;
   block?: boolean;
   icon?: React.ReactNode;
+  focus?: boolean;
   /**
    * 按钮类型
    * @mytag {@link link }
@@ -59,7 +60,24 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     .trim();
 
   return (
-    <WarpButton {...others} as="button" ref={ref} type={htmlType} disabled={disabled || loading} className={cls}>
+    <WarpButton
+      {...others}
+      as="button"
+      ref={ref}
+      type={htmlType}
+      disabled={disabled || loading}
+      className={cls}
+      param={{
+        focus: !!props.focus,
+        type,
+        size,
+        basic,
+        loading,
+        disabled: disabled || loading,
+        active,
+        block,
+      }}
+    >
       {icon}
       {children &&
         React.Children.map(children, (child: React.ReactNode) => {

diff --git a/packages/react-button/src/style/Variant.ts b/packages/react-button/src/style/Variant.ts
@@ -1,14 +1,30 @@
 import { getThemeVariantValue } from '@uiw/utils';
-import { css } from 'styled-components';
-
+import { css, ThemedCssFunction } from 'styled-components';
+import { ButtonBaseProps } from '.';
 type Options = {
   type: string;
-  defaultTheme?: Record<string, string | number>;
-  theme?: Record<string, string | number>;
+} & ButtonBaseProps;
+
+/**
+ * @description: 生成公共css
+ * @param {string} style 样式
+ * @param {string} attrName 属性名
+ * @param {boolean} fig  直接生成
+ * @param {string} lastName 生成对象
+ */
+export const getCommonCss = (style: string, attrName: string, fig?: boolean, lastName?: string) => {
+  const com = css`
+    ${attrName && `${attrName}{${style}}`}
+    ${fig && lastName && `${lastName}{${style}}`}
+    ${fig && !lastName && style}
+  `;
+  return com;
 };
 
 export const buttonVariant = (options: Options) => {
-  const { type } = options;
+  const { type, param } = options;
+  const { basic, focus, active, disabled } = param || {};
+
   const color = getThemeVariantValue(options, `color${type}`);
   const backgroundColor = getThemeVariantValue(options, `backgroundColor${type}`);
   const backgroundColorHover = getThemeVariantValue(options, `backgroundColor${type}Hover`);
@@ -24,49 +40,173 @@ export const buttonVariant = (options: Options) => {
     color: ${color};
     background-color: ${backgroundColor};
     z-index: 1;
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 2px ${boxShadowColorFocus};
-    }
     &:hover {
-      color: ${color};
       background-color: ${backgroundColorHover};
       z-index: 2;
     }
-    &:active,
-    &.active {
+    ${getCommonCss(
+      `
+      outline: 0;
+      box-shadow: 0 0 0 2px  ${boxShadowColorFocus};
+        `,
+      '&:focus',
+      focus,
+    )}
+    ${getCommonCss(
+      `
       color: ${color};
       background-color: ${backgroundColorActive};
       background-image: none;
-    }
+  `,
+      ' &:active',
+      active,
+    )}
     &.disabled,
     &[disabled] {
       background-color: ${backgroundColorDisabled};
       z-index: 0;
     }
-    &.w-btn-basic {
-      background-color: transparent !important;
-      box-shadow: inset 0 0 0 ${boxShadowColorBasic};
-      color: ${backgroundColor};
-      &:hover {
-        background-color: ${backgroundColorBasicHover} !important;
-      }
-      &:active,
-      &.active {
-        color: ${backgroundColor};
-        background-color: ${backgroundColorBasicActive} !important;
-        background-image: none;
-      }
-      &.disabled,
-      &[disabled] {
+    ${getCommonCss(
+      `
+      background-color: ${backgroundColorDisabled};
+      z-index: 0;
+  `,
+      ' &[disabled]',
+      disabled,
+    )}
+    ${basic &&
+    css`
+      & {
         background-color: transparent !important;
-        color: ${colorBasicDisabled};
+        box-shadow: inset 0 0 0 ${boxShadowColorBasic};
+        color: ${backgroundColor};
+        &:hover {
+          background-color: ${backgroundColorBasicHover} !important;
+        }
+        ${getCommonCss(
+          `
+          color: ${backgroundColor};
+          background-color: ${backgroundColorBasicActive} !important;
+          background-image: none;
+        `,
+          ' &:active',
+          active,
+        )}
+        ${getCommonCss(
+          `
+          background-color: transparent !important;
+          color: ${colorBasicDisabled};
+          `,
+          '&[disabled]',
+          disabled,
+        )}
       }
-    }
+    `}
   `;
 };
 
+export const buttonTypes = (props: ButtonBaseProps) => {
+  const { type, focus, basic, active, disabled } = props.param || {};
+
+  switch (type) {
+    case 'primary':
+      return buttonVariant({ ...props, type: 'Primary' });
+    case 'success':
+      return buttonVariant({ ...props, type: 'Success' });
+    case 'danger':
+      return buttonVariant({ ...props, type: 'Error' });
+    case 'dark':
+      return buttonVariant({ ...props, type: 'Dark' });
+    case 'light':
+      return css`
+        box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
+          inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
+          inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
+        ${buttonVariant({ ...props, type: 'Light' })}
+        ${getCommonCss(
+          `
+              outline: 0;
+              box-shadow: inset 0 1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
+                inset 1px -1px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
+                inset -1px 0px 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')},
+                0 0 0 2px ${getThemeVariantValue(props, 'boxShadowColorLight4')};
+        `,
+          '&:focus',
+          focus,
+        )}
+        ${basic &&
+        css`
+          color: ${getThemeVariantValue(props, 'colorLightBasic')} !important;
+          &:focus {
+            box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
+          }
+          ${focus &&
+          css`
+            box-shadow: inset 0 0 0 0 ${getThemeVariantValue(props, 'boxShadowColorLightDefault')};
+          `}
+          &:hover {
+            background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicHover')} !important;
+          }
+          ${getCommonCss(
+            `
+              color: ${getThemeVariantValue(props, 'colorLightBasic')};
+              background-color: ${getThemeVariantValue(props, 'backgroundColorLightBasicActive')} !important;
+              background-image: none;
+                `,
+            '&:active',
+            active,
+          )}
+          ${getCommonCss(
+            `
+                background-color: transparent !important;
+                color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
+                `,
+            '&[disabled]',
+            disabled,
+          )}
+        `}
+        ${getCommonCss(
+          `
+          color: ${getThemeVariantValue(props, 'colorLightBasicDisabled')};
+          z-index: 0;
+          `,
+          '&[disabled]',
+          disabled,
+        )}
+      `;
+    case 'link':
+      return css`
+        ${buttonVariant({ ...props, type: 'Link' })};
+        color: ${getThemeVariantValue(props, 'colorLink')} !important;
+        &:hover:not([disabled]) {
+          color: ${getThemeVariantValue(props, 'colorLinkNotDisabled')};
+          text-decoration: underline;
+        }
+        ${getCommonCss(
+          `
+          color: ${getThemeVariantValue(props, 'colorLinkNotDisabledActive')};
+          box-shadow: none;
+          text-decoration: underline;
+          `,
+          '&:not([disabled]):active',
+          disabled,
+          '&:not([disabled]) ',
+        )}
+        &[disabled] {
+          z-index: 0;
+        }
+        ${disabled &&
+        css`
+          z-index: 0;
+        `}
+      `;
+    case 'warning':
+      return buttonVariant({ ...props, type: 'Warning' });
+    default:
+      return css``;
+  }
+};
+
 export const buttonSize = (fontSize: string, iconSize: string, lineHeight: string | number, minHeight: string) => {
   return css`
     font-size: ${fontSize};
@@ -77,3 +217,24 @@ export const buttonSize = (fontSize: string, iconSize: string, lineHeight: strin
     }
   `;
 };
+const getSize = (props: ButtonBaseProps, type: string) => {
+  const fontSize = getThemeVariantValue(props, `fontSize${type}`);
+  const minHeight = getThemeVariantValue(props, `minHeightButton${type}`);
+  const fontSizeIcon = getThemeVariantValue(props, `fontSizeButtonIcon${type}`);
+  return buttonSize(`${fontSize}`, `${fontSizeIcon}`, fontSize, `${minHeight}`);
+};
+export const buttonSizeCss = (props: ButtonBaseProps) => {
+  const { size } = props.param || {};
+  switch (size) {
+    case 'large':
+      return getSize(props, 'Large');
+    case 'small':
+      return css`
+        padding: 0 6px;
+        min-width: ${getThemeVariantValue(props, 'minHeightButtonSmall')};
+        ${getSize(props, 'Small')}
+      `;
+    default:
+      return css``;
+  }
+};