tiny-ui 0.0.95 → 1.0.1

package/components/space/demo/align.md

@@ -1,45 +0,0 @@
-<demo>
-
-### Align
-
-Item align.
-
-```jsx live
-() => {
-  const wrapperStyle = {
-    display: 'inline-block',
-    border: '1px solid #6E41BF',
-    padding: 4,
-  };
-  
-  const boxStyle = {
-    display: 'inline-block',
-    padding: '16px 8px 32px',
-    background: 'rgba(150, 150, 150, 0.2)',
-  };
-
-  const [align, setAlign] = React.useState('center');  
-
-  return (
-    <>
-      <Radio.Group value={align} onChange={val => setAlign(val)}>
-        <Radio value="start">Start</Radio>
-        <Radio value="center">Center</Radio>
-        <Radio value="end">End</Radio>
-        <Radio value="baseline">Baseline</Radio>
-      </Radio.Group>
-      <br />
-      <br />
-      <div style={wrapperStyle}>
-        <Space align={align}>
-          center
-          <Button btnType="primary">Primary</Button>
-          <span style={boxStyle}>Block</span>
-        </Space>
-      </div>
-    </>
-  );
-}
-```
-
-</demo>

package/components/space/demo/basic.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Basic Usage
-
-Distribute components in a horizontal space.
-
-```jsx live
-<Space>
-  Space
-  <Button btnType="primary">Button</Button>
-  <Button>Another Button</Button>
-  <PopConfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
-    <Button>Confirm</Button>
-  </PopConfirm>
-</Space>
-```
-
-</demo>

package/components/space/demo/size.md

@@ -1,44 +0,0 @@
-<demo>
-
-### Space Size
-
-`small`, `medium` and `large` preset sizes.
-
-```jsx live
-() => {
-  const [size, setSize] = React.useState('sm');
-  const [numSize, setNumSize] = React.useState(10);
-  
-  return (
-    <>
-      <Divider align="left">Use Preset</Divider>
-      <Radio.Group value={size} onChange={val => setSize(val)}>
-        <Radio value="sm">Small</Radio>
-        <Radio value="md">Medium</Radio>
-        <Radio value="lg">Large</Radio>
-      </Radio.Group>
-      <br />
-      <br />
-      <Space size={size}>
-        <Button btnType="primary">Primary</Button>
-        <Button>Default</Button>
-        <Button btnType="outline">Outline</Button>
-        <Button btnType="link">Link</Button>
-      </Space>
-
-      <br />
-      <br />
-      <Divider align="left">Use Number</Divider>
-      <Slider value={numSize} onChange={(val) => setNumSize(val)}/>
-      <Space size={numSize}>
-        <Button btnType="primary">Primary</Button>
-        <Button>Default</Button>
-        <Button btnType="outline">Outline</Button>
-        <Button btnType="link">Link</Button>
-      </Space>
-    </>
-  );
-}
-```
-
-</demo>

package/components/space/demo/vertical.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Vertical Space
-
-Distribute components in a vertical space.
-
-```jsx live
-<Space direction="vertical" align="start">
-  Space
-  <Button btnType="primary">Button</Button>
-  <Button>Another Button</Button>
-  <PopConfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
-    <Button>Confirm</Button>
-  </PopConfirm>
-</Space>
-```
-
-</demo>

package/components/space/index.md

@@ -1,34 +0,0 @@
-import Basic from './demo/basic.md'
-import Vertical from './demo/vertical.md'
-import Size from './demo/size.md'
-import Align from './demo/align.md'
-
-# Space
-
-Set components spacing.
-
-## Scenario
-
-Avoid components clinging together and set a unified space.
-
-## Usage
-
-```jsx
-import { Space } from 'tiny-ui';
-```
-
-## Examples
-
-<Basic />
-<Vertical />
-<Size />
-<Align />
-
-## API
-
-| Property  | Description       | Type                                                          | Default       |
-| --------- | ----------------- | ------------------------------------------------------------- | ------------- |
-| align     | align items       | enum: `start` &#124; `end` &#124; `center` &#124; `baseline`  | `center`      |
-| direction | space direction	| enum: `horizontal` &#124; `vertical`                          | `horizontal`  |
-| size      | space size        | enum: `sm` &#124; `md` &#124; `lg` &#124; `number`            | `sm`          |
-

package/components/space/index.tsx

@@ -1,58 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SizeType } from '../_utils/props';
-import { SpaceProps } from './types';
-
-const spaceSize = {
-  sm: 8,
-  md: 16,
-  lg: 24,
-};
-
-const Space = React.forwardRef<HTMLDivElement, SpaceProps>(
-  (props: SpaceProps, ref): JSX.Element => {
-    const {
-      direction = 'horizontal',
-      align = 'center',
-      className,
-      children,
-      prefixCls: customisedCls,
-      ...otherProps
-    } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('space', configContext.prefixCls, customisedCls);
-    const size = props.size || configContext.space || 'sm';
-    const cls = classNames(
-      prefixCls,
-      className,
-      `${prefixCls}_${direction}`,
-      `${prefixCls}_${align}`
-    );
-
-    const getItemStyle = (idx: number): React.CSSProperties => {
-      if (React.Children.count(children) - 1 !== idx) {
-        return {
-          [direction === 'vertical' ? 'marginBottom' : 'marginRight']:
-            typeof props.size === 'number' ? size : spaceSize[size as SizeType],
-        };
-      }
-      return {};
-    };
-
-    return (
-      <div {...otherProps} ref={ref} className={cls}>
-        {React.Children.map(children, (child, idx) => (
-          <div key={idx} className={`${prefixCls}__item`} style={getItemStyle(idx)}>
-            {child}
-          </div>
-        ))}
-      </div>
-    );
-  }
-);
-
-Space.displayName = 'Space';
-
-export default Space;

package/components/space/style/_index.scss

@@ -1,25 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-space {
-  display: inline-flex;
-
-  &_vertical {
-    flex-direction: column;
-  }
-
-  &_start {
-    align-items: flex-start;
-  }
-
-  &_end {
-    align-items: flex-end;
-  }
-
-  &_center {
-    align-items: center;
-  }
-
-  &_baseline {
-    align-items: baseline;
-  }
-}

package/components/space/types.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { BaseProps, DirectionType, SizeType } from '../_utils/props';
-
-export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
-export type SpaceSize = SizeType | number;
-
-export interface SpaceProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['div']> {
-  align?: SpaceAlign;
-  direction?: DirectionType;
-  size?: SpaceSize;
-}

package/components/split/demo/horizontal.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Horizontal divider
-
-Left & Right.
-
-```jsx live
-<Split mode="horizontal" style={{ height: 200, border: '1px solid #dcdee2' }}>
-  <div>
-    Left
-  </div>
-  <div>
-    Right
-  </div>
-</Split>
-```
-
-</demo>

package/components/split/demo/multiple.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Multiple
-
-Multiple divider.
-
-```jsx live
-<Split style={{ height: 200, border: '1px solid #dcdee2' }}>
-  <div>
-    Left
-  </div>
-  <div>
-    Right
-  </div>
-</Split>
-```
-
-</demo>

package/components/split/demo/nest.md

@@ -1,23 +0,0 @@
-<demo>
-
-### Nest
-
-Can be used nested.
-
-```jsx live
-<Split defaultSize={200} style={{ height: 300, border: '1px solid #dcdee2' }}>
-  <div>
-    Left
-  </div>
-  <Split mode="horizontal">
-    <div>
-      Top
-    </div>
-    <div>
-      Bottom
-    </div>
-  </Split>
-</Split>
-```
-
-</demo>

package/components/split/demo/step.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Step
-
-Allow moving by a certain distance.
-
-```jsx live
-<Split step={30} style={{ height: 200, border: '1px solid #dcdee2' }}>
-  <div>
-    Left
-  </div>
-  <div>
-    Right
-  </div>
-</Split>
-```
-
-</demo>

package/components/split/demo/vertical.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Vertical divider
-
-Top & Bottom.
-
-```jsx live
-<Split style={{ height: 200, border: '1px solid #dcdee2' }}>
-  <div>
-    Left
-  </div>
-  <div>
-    Right
-  </div>
-</Split>
-```
-
-</demo>

package/components/split/index.md

@@ -1,42 +0,0 @@
-import Horizontal from './demo/horizontal.md'
-import Vertical from './demo/vertical.md'
-import Nest from './demo/nest.md'
-import Step from './demo/step.md'
-
-# Split
-
-Divide one pane into two parts that can be dragged to adjust width or height.
-
-## Scenario
-
-When there multiple contents that need to display together, but some of them need more space to show.
-
-## Usage
-
-```jsx
-import { Split } from 'tiny-ui';
-```
-
-## Examples
-
-<Vertical/>
-<Horizontal/>
-<Nest/>
-<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/index.tsx

@@ -1,3 +0,0 @@
-import Split from './split';
-
-export default Split;

package/components/split/resizer.tsx

@@ -1,51 +0,0 @@
-import React, { useContext, MouseEventHandler } from 'react';
-import classNames from 'classnames';
-import { BaseProps, DirectionType } from '../_utils/props';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-
-export interface ResizerProps
-  extends BaseProps,
-    React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  size: number;
-  mode: DirectionType;
-  onResizerMouseDown: MouseEventHandler<HTMLDivElement>;
-}
-
-const Resizer = (props: ResizerProps): JSX.Element => {
-  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, {
-    [`${prefixCls}_${mode}`]: mode,
-  });
-
-  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}
-      role="presentation"
-      className={cls}
-      style={style}
-      onMouseDown={(e): void => onMouseDown(e)}>
-      <div className={`${prefixCls}__icon`} />
-    </div>
-  );
-};
-
-Resizer.displayName = 'Resizer';
-
-export default Resizer;

package/components/split/split-context.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { DirectionType } from '../_utils/props';
-
-type Props = {
-  mode: DirectionType;
-};
-
-export const SplitContext = React.createContext<Props>({ mode: 'vertical' });

package/components/split/split-pane.tsx

@@ -1,41 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { BaseProps } from '../_utils/props';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SplitContext } from './split-context';
-
-export interface SplitPaneProps
-  extends BaseProps,
-    React.PropsWithRef<JSX.IntrinsicElements['div']> {
-  size?: number;
-}
-
-const SplitPane = React.forwardRef<HTMLDivElement, SplitPaneProps>(
-  (props: SplitPaneProps, ref): JSX.Element => {
-    const { size, className, style, children, prefixCls: customisedCls, ...otherProps } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('split-pane', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className);
-    const { mode } = useContext(SplitContext);
-
-    const paneStyle: React.CSSProperties = {
-      ...style,
-    };
-    if (mode === 'vertical') {
-      paneStyle.width = size;
-    } else {
-      paneStyle.height = size;
-    }
-
-    return (
-      <div ref={ref} {...otherProps} className={cls} style={paneStyle}>
-        {children}
-      </div>
-    );
-  }
-);
-
-SplitPane.displayName = 'SplitPane';
-
-export default SplitPane;

package/components/split/split.tsx

@@ -1,171 +0,0 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import Resizer from './resizer';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import Pane from './split-pane';
-import warning from '../_utils/warning';
-import { SplitContext } from './split-context';
-import { SplitProps } from './types';
-
-const Split = (props: SplitProps): JSX.Element => {
-  const {
-    mode = 'vertical',
-    disabled = false,
-    min = 50,
-    max = 50,
-    resizerSize = 6,
-    defaultSize,
-    step,
-    onChange,
-    onDragStarted,
-    onDragFinished,
-    prefixCls: customisedCls,
-    style: defaultStyle,
-    resizerProps,
-    className,
-    children,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('split', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_${mode}`]: mode,
-    [`${prefixCls}_disabled`]: disabled,
-  });
-  const [pane1Size, setPane1Size] = useState<number | undefined>(undefined);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const paneRef = useRef<HTMLDivElement | null>(null);
-  const isActiveMove = useRef(false);
-  const lastPosition = useRef(0);
-  const wrapper = wrapperRef.current;
-
-  const getSizeNumber = useCallback(
-    (size: number | string): number => {
-      if (typeof size === 'string') {
-        if (wrapper) {
-          const { width, height } = wrapper.getBoundingClientRect();
-          return ((mode === 'vertical' ? width : height) * parseFloat(size)) / 100;
-        }
-      } else {
-        return size;
-      }
-      return 0;
-    },
-    [mode, wrapper]
-  );
-  const minSize = getSizeNumber(min);
-  let maxSize = getSizeNumber(max);
-  if (wrapper) {
-    const { width, height } = wrapper.getBoundingClientRect();
-    maxSize = (mode === 'vertical' ? width : height) - maxSize - resizerSize;
-  }
-
-  const onResizerMouseDown = (e: React.MouseEvent<HTMLElement>): void => {
-    isActiveMove.current = true;
-    lastPosition.current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
-    onDragStarted && onDragStarted();
-  };
-
-  const onMouseMove = useCallback(
-    (e: MouseEvent): void => {
-      if (!disabled && isActiveMove.current) {
-        const pane = paneRef.current;
-        if (pane) {
-          if (pane.getBoundingClientRect) {
-            const width = pane.getBoundingClientRect().width;
-            const height = pane.getBoundingClientRect().height;
-            const current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
-            const size = mode === 'vertical' ? width : height;
-            let offset = lastPosition.current - current;
-            if (step) {
-              if (Math.abs(offset) < step) {
-                return;
-              }
-              offset = Math.round((offset / step) * step);
-            }
-
-            let newSize = size - offset;
-            const newPosition = lastPosition.current - offset;
-
-            if (newSize < minSize) {
-              newSize = minSize;
-            } else if (newSize > maxSize) {
-              newSize = maxSize;
-            } else {
-              lastPosition.current = newPosition;
-            }
-
-            !('size' in props) && setPane1Size(newSize);
-            onChange && onChange(newSize);
-          }
-        }
-      }
-    },
-    [props, disabled, maxSize, minSize, mode, onChange, step]
-  );
-
-  const onMouseUp = useCallback((): void => {
-    isActiveMove.current = false;
-    onDragFinished && onDragFinished();
-  }, [onDragFinished]);
-
-  let style: React.CSSProperties;
-  if (mode === 'vertical') {
-    style = {
-      ...defaultStyle,
-    };
-  } else {
-    style = {
-      ...defaultStyle,
-      minHeight: '100%',
-      width: '100%',
-    };
-  }
-
-  useEffect(() => {
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-
-    return (): void => {
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-    };
-  }, [onMouseMove, onMouseUp]);
-
-  useEffect(() => {
-    const initialSize = getSizeNumber(props.size || defaultSize || minSize);
-    setPane1Size(initialSize);
-  }, [getSizeNumber, props.size, defaultSize, minSize]);
-
-  useEffect(() => {
-    if ('size' in props) {
-      const size = getSizeNumber(props.size as number | string);
-      setPane1Size(size);
-    }
-  }, [props, getSizeNumber]);
-
-  warning(React.Children.count(children) > 2, 'There are more than 2 children inside Split.');
-  const childrenList = React.Children.toArray(children).filter((child) => child);
-
-  return (
-    <SplitContext.Provider value={{ mode }}>
-      <div ref={wrapperRef} {...otherProps} className={cls} style={style}>
-        <Pane ref={paneRef} size={pane1Size} style={{ flex: '0 0 auto' }}>
-          {childrenList[0]}
-        </Pane>
-        <Resizer
-          {...resizerProps}
-          size={resizerSize}
-          mode={mode}
-          onResizerMouseDown={onResizerMouseDown}
-        />
-        <Pane style={{ flex: '1 1 0%' }}>{childrenList[1]}</Pane>
-      </div>
-    </SplitContext.Provider>
-  );
-};
-
-Split.displayName = 'Split';
-
-export default Split;