Merge pull request #16 from 3Alan/new-ui

style: new ui style

src/components/button/index.stories.tsx

@@ -15,13 +15,6 @@ export default {
         disable: true
       }
     },
-    drawnStyle: {
-      options: ['hachure', 'solid', 'zigzag', 'cross-hatch', 'dots', 'sunburst', 'dashed', 'zigzag-line'],
-      control: { type: 'select' }
-    },
-    roughness: {
-      control: { type: 'range', min: 0, max: 3, step: 0.1 }
-    },
     showShadow: {
       control: 'boolean'
     },

src/components/button/index.tsx

@@ -1,23 +1,15 @@
 import React, { FC, useMemo, useCallback, memo } from 'react';
 import classNames from 'classnames';
-
+import { Options } from 'roughjs/bin/core';
 import RoughWrap, { RoughWrapProps } from '../roughWrap';
 
 export interface ButtonProps extends Pick<RoughWrapProps, 'showShadow' | 'radius'> {
   size?: 'small' | 'default' | 'large';
   type?: 'standard' | 'primary';
   disabled?: boolean;
   className?: string;
-  /**
-   * 手绘风格
-   */
-  drawnStyle?: 'hachure' | 'solid' | 'zigzag' | 'cross-hatch' | 'dots' | 'sunburst' | 'dashed' | 'zigzag-line';
-  /**
-   * 潦草程度 推荐：0-10
-   */
-  roughness?: number;
-  /** 边框宽度 */
-  borderWidth?: number;
+  /** roughjs 相关参数 */
+  roughProps?: Options;
   onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
@@ -42,19 +34,7 @@ export const typeStyle = {
 export const Button: FC<
   ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type' | 'disabled'>
 > = (props) => {
-  const {
-    children,
-    type = 'primary',
-    className,
-    size,
-    disabled,
-    drawnStyle,
-    roughness,
-    radius,
-    borderWidth,
-    showShadow,
-    ...restProps
-  } = props;
+  const { children, type = 'primary', className, size, disabled, radius, showShadow, roughProps, ...restProps } = props;
 
   const classes = classNames(
     cls,
@@ -65,15 +45,17 @@ export const Button: FC<
     className
   );
 
-  const roughProps = useMemo(
+  const finalRoughProps = useMemo(
     () => ({
+      fillStyle: 'solid',
+      roughness: 0,
+      strokeWidth: 1,
+      ...roughProps,
       fill: disabled ? '#D1D5DB' : typeStyle[type].fill,
       stroke: disabled ? '#9CA3AF' : typeStyle[type].stroke,
-      fillStyle: drawnStyle,
-      roughness,
-      strokeWidth: borderWidth
+      radius: '4 4 4 4'
     }),
-    [type, drawnStyle, disabled]
+    [type, disabled]
   );
 
   const onEnterEffect = useCallback(() => {
@@ -86,14 +68,14 @@ export const Button: FC<
     if (!disabled) {
       /// TODO: hover effect
     }
-  }, [disabled, drawnStyle]);
+  }, [disabled]);
 
   return (
     <RoughWrap
       customElement="button"
       shape="roundedRectTangle"
       radius={radius}
-      roughProps={roughProps}
+      roughProps={finalRoughProps}
       className={classes}
       style={{ color: disabled ? '#9CA3AF' : typeStyle[type].color }}
       disabled={disabled}
@@ -110,11 +92,8 @@ export const Button: FC<
 Button.defaultProps = {
   type: 'primary',
   size: 'default',
-  drawnStyle: 'solid',
-  roughness: 0,
   disabled: false,
-  className: '',
-  borderWidth: 1
+  className: ''
 };
 
 export default memo(Button);

src/components/guide/__tests__/index.tsx

@@ -12,7 +12,6 @@ if (!SVGElement.prototype.getTotalLength) {
 const steps: StepItem[] = [
   {
     selector: '#one',
-    spotType: 'box',
     spotColor: 'red',
     content: 'step1'
   },

src/components/guide/index.tsx

@@ -122,9 +122,6 @@ export const Guide: FC<GuideProps> = (props) => {
         onClose={handleClose}
         placement="bottom"
         style={popoverStyle}
-        roughness={0.5}
-        fill="#fff"
-        fillStyle="solid"
         wrapClassName={`${cls}-wrap`}
         className={`${cls}-popover-content`}
       >

src/components/input/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FC, FocusEvent, InputHTMLAttributes } from 'react';
+import { FC, FocusEvent, InputHTMLAttributes, useState } from 'react';
 import { RoughWrap } from '../roughWrap';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -11,12 +11,17 @@ const cls = 'alan-input';
 
 export const Input: FC<InputProps> = (props) => {
   const { className, label, onFocus, ...restProps } = props;
+  const [roughProps, setRoughProps] = useState({
+    stroke: '#1F2937'
+  });
 
   const onInternalFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setRoughProps({ stroke: '#3B82F6' });
     onFocus?.(e);
   };
 
   const onInternalBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setRoughProps({ stroke: '#1F2937' });
     onFocus?.(e);
   };
 
@@ -25,12 +30,14 @@ export const Input: FC<InputProps> = (props) => {
       shape="roundedRectTangle"
       radius="9 9 9 9"
       contentClassName={`${cls}-wrap`}
-      roughProps={{ roughness: 0, stroke: '#1F2937', fillStyle: 'solid' }}
+      roughProps={{ roughness: 0, fillStyle: 'solid', ...roughProps }}
       customElement="div"
       className={classNames(cls, className)}
     >
       <div className={`${cls}-content-wrap`}>
-        <span className={`${cls}-label`}>{label}</span>
+        <span className={`${cls}-label`} style={{ color: roughProps.stroke }}>
+          {label}
+        </span>
         <input data-testid="input" {...restProps} onFocus={onInternalFocus} onBlur={onInternalBlur} />
       </div>
     </RoughWrap>

src/components/modal/index.scss

@@ -6,30 +6,28 @@ $prefix-cls: alan-modal;
   left: 50%;
   transform: translate(-50%);
   padding: 30px;
-  background-color: #fff;
   outline: 0;
   z-index: $z-60;
   text-align: center;
   display: flex;
   justify-content: center;
-  width: 450px;
+  width: 400px;
   max-height: 400px;
-  overflow: auto;
 
   &-content {
-    overflow: auto;
     background-color: #fff;
     height: 100%;
+    width: 100%;
   }
 
   &-close {
     position: absolute;
-    right: 5px;
+    right: 35px;
     top: 5px;
     cursor: pointer;
   }
 
-  .alan-rough-wrap-child {
+  > .alan-rough-wrap-child {
     position: initial;
   }
 }

src/components/modal/index.stories.tsx

@@ -1,21 +1,22 @@
-import { useState } from 'react';
-import Modal from './index';
-import Button from '../button';
-
-export default {
-  title: 'Components/Modal',
-  component: Modal
-};
-
-export const modal = () => {
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setVisible(true)}>open</Button>
-      <Modal visible={visible} onClose={() => setVisible(false)}>
-        awesome modal
-      </Modal>
-    </>
-  );
-};
+import { useState } from 'react';
+import Modal from './index';
+import Button from '../button';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal
+};
+
+export const modal = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>open</Button>
+      <Modal visible={visible} onClose={() => setVisible(false)}>
+        awesome modal
+        <Button>button</Button>
+      </Modal>
+    </>
+  );
+};

src/components/modal/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { FaTimes } from 'react-icons/fa';
+import { BiX } from 'react-icons/bi';
 import Mask from '../mask';
 import RoughWrap from '../roughWrap';
 import { useOnClickOutside } from '../../utils/hooks';
@@ -45,11 +45,18 @@ export const Modal: FC<ModalProps> = (props) => {
     return (
       <>
         {mask && <Mask />}
-        <RoughWrap className={cls} ref={modalRef} customElement="div" shape="rectTangle">
+        <RoughWrap
+          roughProps={{ roughness: 0, fill: '#fff', fillStyle: 'solid', stroke: '#374151' }}
+          className={cls}
+          ref={modalRef}
+          customElement="div"
+          shape="roundedRectTangle"
+          radius="12 12 12 12"
+        >
           <div className={`${cls}-content`}>{children}</div>
 
           <div data-testid="close" className={`${cls}-close`} onClick={onClose}>
-            <Icon item={FaTimes} />
+            <Icon item={BiX} fillStyle="solid" roughness={0} fill="#374151" />
           </div>
         </RoughWrap>
       </>

src/components/pagination/index.tsx

@@ -113,9 +113,10 @@ export const Pagination: FC<PaginationProps> = (props) => {
       <RoughWrap
         className={classNames({ [`${cls}-disabled`]: disabled || current === 1 })}
         onClick={onPrev}
-        roughProps={{ ...buttonProps(current === 1), roughness: 0.5 }}
+        roughProps={{ ...buttonProps(current === 1), roughness: 0 }}
         customElement="li"
-        shape="rectTangle"
+        shape="roundedRectTangle"
+        radius="5 5 5 5"
       >
         {'<'}
       </RoughWrap>
@@ -131,8 +132,9 @@ export const Pagination: FC<PaginationProps> = (props) => {
           key={item}
           title={item}
           customElement="li"
-          shape="rectTangle"
-          roughProps={{ ...activeProps(item), roughness: 0.5 }}
+          shape="roundedRectTangle"
+          radius="5 5 5 5"
+          roughProps={{ ...activeProps(item), roughness: 0 }}
           onClick={() => onPagerClick(item)}
         >
           {item}
@@ -142,9 +144,10 @@ export const Pagination: FC<PaginationProps> = (props) => {
       <RoughWrap
         onClick={onNext}
         className={classNames({ [`${cls}-disabled`]: disabled || current === totalPage })}
-        roughProps={{ ...buttonProps(current === totalPage), roughness: 0.5 }}
+        roughProps={{ ...buttonProps(current === totalPage), roughness: 0 }}
         customElement="li"
-        shape="rectTangle"
+        shape="roundedRectTangle"
+        radius="5 5 5 5"
       >
         {'>'}
       </RoughWrap>

src/components/roughWrap/PopoverWrap.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useImperativeHandle, AllHTMLAttributes, forwardRef, CSSProperties, useRef, LegacyRef, memo } from 'react';
 import { Options } from 'roughjs/bin/core';
 import { useSize } from 'ahooks';
-import { FaTimes } from 'react-icons/fa';
+import { BiX } from 'react-icons/bi';
 import { getPopoverPath, getSafeSize } from '../../utils';
 import Icon from '../icon';
 import ReactRough, { Polygon } from '../rough';
@@ -37,15 +37,15 @@ export const PopoverWrap = forwardRef<unknown, PopoverWrapProps>((props, ref) =>
     >
       {closeable && (
         <div onClick={onClose} className={`${cls}-close`}>
-          <Icon item={FaTimes} width={12} height={12} />
+          <Icon item={BiX} width={16} height={16} fillStyle="solid" roughness={0} fill="#374151" />
         </div>
       )}
 
       <div className={classNames(`${cls}-popover`, className)}>{children}</div>
 
       {/* +15为小箭头的安全大小 */}
       <ReactRough width={safeWidth} height={safeHeight} renderer="svg">
-        <Polygon points={placementPath} {...roughOptions} />
+        <Polygon points={placementPath} {...{ roughness: 0, fill: '#fff', fillStyle: 'solid' }} {...roughOptions} />
       </ReactRough>
     </div>
   );

src/components/roughWrap/index.scss

@@ -46,6 +46,6 @@ $prefix-cls: alan-rough-wrap;
     width: 10px;
     height: 10px;
     right: 10px;
-    top: 10px;
+    top: 6px;
   }
 }

src/components/roughWrap/index.tsx

@@ -37,9 +37,10 @@ export const RoughWrap = forwardRef<unknown, RoughWrapProps>((props: RoughWrapPr
     radius = '0 0 0 0',
     ...resetProps
   } = props;
-  const mountRef = useRef<HTMLDivElement>(null);
+  const mountRef = useRef<HTMLElement>();
+  const element = (ref || mountRef) as MutableRefObject<HTMLElement>;
+  const size = useSize(element);
   const isEllipse = shape === 'ellipse';
-  const size = useSize(mountRef);
   const { width = 0, height = 0 } = size || {};
   const ShapeComponent = Shapes[shape];
   const borderWidth = 1;
@@ -51,9 +52,7 @@ export const RoughWrap = forwardRef<unknown, RoughWrapProps>((props: RoughWrapPr
 
   const childrenElement = (
     <>
-      <div ref={mountRef} className={classNames(contentClassName, `${cls}-child`)}>
-        {children}
-      </div>
+      <div className={classNames(contentClassName, `${cls}-child`)}>{children}</div>
 
       {/* 注意children和ReactRough的层级（z-index）关系 */}
       <ReactRough className={`${cls}-svg`} width={wrapWidth} height={wrapHeight} renderer="svg">
@@ -85,7 +84,7 @@ export const RoughWrap = forwardRef<unknown, RoughWrapProps>((props: RoughWrapPr
   return createElement(
     customElement,
     {
-      ref: mountRef,
+      ref: element,
       className: classNames(cls, className),
       ...resetProps
     },