tiny-ui 0.0.92 → 0.0.95

package/components/popup/index.tsx

@@ -43,6 +43,9 @@ const Popup = (props: PopupProps): JSX.Element => {
   const delayDisplayPopupTimer = useRef<number | undefined>(undefined);
   const delayHidePopupTimer = useRef<number | undefined>(undefined);
   const popperRef = useRef<Instance | undefined>(undefined);
+  const elementProps = {
+    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
+  };
 
   const displayPopup = useCallback(() => {
     setPopupVisible(true);
@@ -255,10 +258,6 @@ const Popup = (props: PopupProps): JSX.Element => {
     </Transition>
   );
 
-  const elementProps = {
-    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
-  };
-
   return (
     <>
       {React.cloneElement(children, elementProps)}

package/components/popup/style/_index.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../style/variables';
 
 .#{$prefix}-popup {
@@ -43,7 +44,7 @@
 
   &[data-popper-placement^='top'] {
     & > .#{$prefix}-popup__arrow {
-      bottom: -$popover-arrow-size / 2;
+      bottom: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
@@ -53,7 +54,7 @@
 
   &[data-popper-placement^='bottom'] {
     > .#{$prefix}-popup__arrow {
-      top: -$popover-arrow-size / 2;
+      top: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: -2px -2px 5px rgba(0, 0, 0, .06);
@@ -63,7 +64,7 @@
 
   &[data-popper-placement^='left'] {
     > .#{$prefix}-popup__arrow {
-      right: -$popover-arrow-size / 2;
+      right: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: 3px -3px 7px rgba(0, 0, 0, .07);
@@ -73,7 +74,7 @@
 
   &[data-popper-placement^='right'] {
     > .#{$prefix}-popup__arrow {
-      left: -$popover-arrow-size / 2;
+      left: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: -3px 3px 7px rgba(0, 0, 0, .07);

package/components/radio/radio.tsx

@@ -46,7 +46,7 @@ const Radio = React.forwardRef<HTMLLabelElement, RadioProps>(
 
     useEffect(() => {
       'value' in radioGroupContext && setChecked(value === radioGroupContext.value);
-      'checked' in props && setChecked(props.checked as boolean);
+      'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);
     }, [props, radioGroupContext, value]);
 
     return (

package/components/split/index.md

@@ -25,3 +25,18 @@ import { Split } from 'tiny-ui';
 <Step/>
 
 ## API
+
+| Property          | Description                               | Type                                  | Default       |
+| ----------------- | ----------------------------------------- | ------------------------------------- | ------------- |
+| mode              | split mode                                | enum: `horizontal` &#124; `vertical`  | `vertical`    |
+| disabled          | disable flag	                            | boolean                               | false         |
+| min               | minimum width / height of the target pane | number &#124; string                  | 50            |
+| max               | maximum width / height of the target pane | number &#124; string                  | 50            |
+| size              | size of target pane                       | number &#124; string                  | -             |
+| defaultSize       | default size of target pane               | number &#124; string                  | -             |
+| step              | drag step                                 | number                                | -             |
+| resizerProps      | resizer props                             | JSX.IntrinsicElements['div']          | -             |
+| resizerSize       | resizer size                              | number                                | 6             |
+| onChange          | callback when the size changed            | (size: number) => void                | -             |
+| onDragStarted     | callback when the resizer starts dragging | () => void                            | -             |
+| onDragFinished    | callback when the resizer ends dragging   | () => void                            | -             |

package/components/split/resizer.tsx

@@ -9,11 +9,18 @@ export interface ResizerProps
     React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
   size: number;
   mode: DirectionType;
-  onMouseDown: MouseEventHandler<HTMLDivElement>;
+  onResizerMouseDown: MouseEventHandler<HTMLDivElement>;
 }
 
 const Resizer = (props: ResizerProps): JSX.Element => {
-  const { size, onMouseDown, prefixCls: customisedCls, mode, className, ...otherProps } = props;
+  const {
+    size,
+    onResizerMouseDown,
+    prefixCls: customisedCls,
+    mode,
+    className,
+    ...otherProps
+  } = props;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('split-bar', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className, {
@@ -21,6 +28,12 @@ const Resizer = (props: ResizerProps): JSX.Element => {
   });
 
   const style: React.CSSProperties = mode === 'vertical' ? { width: size } : { height: size };
+
+  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    props.onMouseDown && props.onMouseDown(e);
+    onResizerMouseDown(e);
+  };
+
   return (
     <div
       {...otherProps}

package/components/split/split.tsx

@@ -61,7 +61,7 @@ const Split = (props: SplitProps): JSX.Element => {
     maxSize = (mode === 'vertical' ? width : height) - maxSize - resizerSize;
   }
 
-  const resizerOnMouseDown = (e: React.MouseEvent<HTMLElement>): void => {
+  const onResizerMouseDown = (e: React.MouseEvent<HTMLElement>): void => {
     isActiveMove.current = true;
     lastPosition.current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
     onDragStarted && onDragStarted();
@@ -158,7 +158,7 @@ const Split = (props: SplitProps): JSX.Element => {
           {...resizerProps}
           size={resizerSize}
           mode={mode}
-          onMouseDown={resizerOnMouseDown}
+          onResizerMouseDown={onResizerMouseDown}
         />
         <Pane style={{ flex: '1 1 0%' }}>{childrenList[1]}</Pane>
       </div>

package/components/split/types.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseProps, DirectionType } from '../_utils/props';
+import { ResizerProps } from './resizer';
 
 export interface SplitProps
   extends BaseProps,
@@ -23,7 +24,7 @@ export interface SplitProps
   defaultSize?: number | string;
 
   /** Resizer's other props */
-  resizerProps?: Record<string, unknown>;
+  resizerProps?: ResizerProps;
 
   /** Drag step */
   step?: number;

package/components/split-button/demo/basic.md

@@ -0,0 +1,36 @@
+<demo>
+
+### Basic
+
+A simple usage.
+
+```jsx live
+() => {
+  const menu = (
+    <Menu onSelect={(key) => Message.info(`you clicked the menu ${key}.`)}>
+      <Menu.Item>1st menu item</Menu.Item>
+      <Menu.Item>2nd menu item</Menu.Item>
+      <Menu.Item>3rd menu item</Menu.Item>
+    </Menu>  
+  );  
+
+  return (
+    <>
+      <SplitButton
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        Click Me
+      </SplitButton>
+      <SplitButton
+        btnType="primary"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        Click Me
+      </SplitButton>
+    </>  
+  );
+}
+
+```
+
+</demo>

package/components/split-button/demo/disabled.md

@@ -0,0 +1,22 @@
+<demo>
+
+### Disabled
+
+Disabled the button.
+
+```jsx live
+<SplitButton
+  disabled
+  onClick={() => Message.info('you clicked the button.')}
+  overlay={(
+    <Menu onSelect={(key) => Message.info(`you clicked the menu ${key}.`)}>
+      <Menu.Item>1st menu item</Menu.Item>
+      <Menu.Item>2nd menu item</Menu.Item>
+      <Menu.Item>3rd menu item</Menu.Item>
+    </Menu>
+  )}>
+  Click Me
+</SplitButton>
+```
+
+</demo>

package/components/split-button/demo/placement.md

@@ -0,0 +1,61 @@
+<demo>
+
+### Placement
+
+Set the placement of the dropdown menu. The default placement is `bottom-end`.
+
+```jsx live
+() => {
+  const menu = (
+    <Menu onSelect={(key) => Message.info(`you clicked the menu ${key}.`)}>
+      <Menu.Item>1st menu item</Menu.Item>
+      <Menu.Item>2nd menu item</Menu.Item>
+      <Menu.Item>3rd menu item</Menu.Item>
+    </Menu>
+  );
+  
+  return (
+    <>
+      <SplitButton
+        dropdownPlacement="top-start"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        TopLeft
+      </SplitButton>
+      <SplitButton
+        dropdownPlacement="top"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        Top
+      </SplitButton>
+      <SplitButton
+        dropdownPlacement="top-end"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        TopRight
+      </SplitButton>
+      <br />
+      <SplitButton
+        dropdownPlacement="bottom-start"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        bottomLeft
+      </SplitButton>
+      <SplitButton
+        dropdownPlacement="bottom"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        bottom
+      </SplitButton>
+      <SplitButton
+        dropdownPlacement="bottom-end"
+        onClick={() => Message.info('you clicked the button.')}
+        overlay={menu}>
+        bottomRight
+      </SplitButton>
+    </>  
+  );
+}
+```
+
+</demo>

package/components/split-button/index.md

@@ -0,0 +1,32 @@
+import Basic from './demo/basic.md'
+import Disabled from './demo/disabled.md'
+import Placement from './demo/placement.md'
+
+# Split Button
+
+A button with a dropdown menu.
+
+## Scenario
+
+The user can select a default value bound to a primary button, 
+or select from a list of mutually exclusive values displayed in a drop-down list bound to a secondary button.
+
+## Usage
+
+```jsx
+import { SplitButton } from 'tiny-ui';
+```
+
+## Examples
+
+<layout>
+  <column>
+    <Basic />
+    <Disabled />
+  </column>
+  <column>
+    <Placement />
+  </column>
+</layout>
+
+## API

package/components/split-button/index.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider/config-context';
+import { getPrefixCls } from '../_utils/general';
+import { ArrowDown } from '../_utils/components';
+import { SplitButtonProps } from './types';
+import ButtonGroup from '../button/button-group';
+import Button from '../button/button';
+import Dropdown from '../dropdown';
+
+const SplitButton = (props: SplitButtonProps): React.ReactElement => {
+  const {
+    size = 'md',
+    btnType = 'default',
+    disabled = false,
+    loading = false,
+    dropdownPlacement = 'bottom-end',
+    dropdownTrigger = 'hover',
+    onClick,
+    overlay,
+    className,
+    children,
+    prefixCls: customisedCls,
+    ...otherProps
+  } = props;
+  const configContext = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('split-button', configContext.prefixCls, customisedCls);
+  const cls = classNames(prefixCls, className);
+
+  return (
+    <ButtonGroup {...otherProps} className={cls} btnType={btnType} disabled={disabled} size={size}>
+      <Button onClick={onClick} loading={loading}>
+        {children}
+      </Button>
+      <Dropdown overlay={overlay} trigger={dropdownTrigger} placement={dropdownPlacement}>
+        <Button
+          className={`${prefixCls}__dropdown-btn`}
+          btnType={btnType}
+          disabled={disabled}
+          size={size}>
+          <ArrowDown size={10} />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>
+  );
+};
+
+SplitButton.displayName = 'SplitButton';
+
+export default SplitButton;

package/components/split-button/style/_index.scss

@@ -0,0 +1,9 @@
+@import '../../style/variables';
+
+.#{$prefix}-split-button {
+
+  &__dropdown-btn{
+    padding: 0 8px;
+    min-width: auto;
+  }
+}

package/components/split-button/style/index.tsx

@@ -0,0 +1,5 @@
+import './index.scss';
+
+// style dependency
+import '../../button/style/index.scss';
+import '../../dropdown/style/index.scss';

package/components/split-button/types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonGroupProps, ButtonType } from '../button/types';
+import { DropdownPlacement, DropdownTrigger } from '../dropdown/types';
+import { MenuProps } from '../menu/types';
+import { SizeType } from '../_utils/props';
+
+export interface SplitButtonProps extends Omit<ButtonGroupProps, 'onClick'> {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  loading?: boolean;
+  disabled?: boolean;
+  size?: SizeType;
+  btnType?: ButtonType;
+  overlay?: React.ReactElement<MenuProps>;
+  dropdownTrigger?: DropdownTrigger;
+  dropdownPlacement?: DropdownPlacement;
+}

package/components/sticky/style/_index.scss

@@ -1,5 +1,8 @@
 @import '../../style/variables';
 
 .#{$prefix}-sticky {
-  transform: translateZ(0);
+
+  &_fixed {
+    position: fixed;
+  }
 }

package/components/style/_animation.scss

@@ -2,6 +2,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -11,6 +12,7 @@
   from {
     transform: rotate(0);
   }
+
   to {
     transform: rotate(-360deg);
   }
@@ -21,6 +23,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.8);
     opacity: 0;

package/components/style/_component.scss

@@ -51,6 +51,7 @@
 @import "../slider/style/index";
 @import "../space/style/index";
 @import "../split/style/index";
+@import "../split-button/style/index";
 @import "../steps/style/index";
 @import "../sticky/style/index";
 @import "../strength-indicator/style/index";
@@ -66,4 +67,3 @@
 @import "../tree/style/index";
 @import "../typography/style/index";
 @import "../upload/style/index";
-@import "../waterfall/style/index";