tiny-ui 0.0.95 → 1.0.1

package/components/steps/steps.tsx

@@ -1,67 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { StepsContext } from './steps-context';
-import { StepsItemProps, StepsProps } from './types';
-
-const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
-  (props: StepsProps, ref): React.ReactElement => {
-    const {
-      defaultCurrent = 0,
-      status = 'process',
-      direction = 'horizontal',
-      labelPlacement = 'vertical',
-      onChange,
-      className,
-      children,
-      prefixCls: customisedCls,
-      ...otherProps
-    } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('steps', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className, `${prefixCls}_${direction}`);
-    const [current, setCurrent] = useState<number>(
-      'current' in props ? (props.current as number) : defaultCurrent
-    );
-
-    const itemOnClick = (curr: number) => {
-      !('current' in props) && setCurrent(curr);
-      onChange && onChange(curr);
-    };
-
-    useEffect(() => {
-      'current' in props && setCurrent(props.current as number);
-    }, [props]);
-
-    return (
-      <StepsContext.Provider
-        value={{
-          current,
-          labelPlacement,
-          status,
-          clickable: 'onChange' in props,
-          onClick: itemOnClick,
-        }}>
-        <div {...otherProps} ref={ref} className={cls}>
-          {React.Children.map(children, (child, idx) => {
-            const childElement = child as React.FunctionComponentElement<StepsItemProps>;
-            if (childElement.type.displayName === 'StepsItem') {
-              const childProps: Partial<StepsItemProps> = {
-                stepIndex: idx,
-              };
-              return React.cloneElement(childElement, childProps);
-            } else {
-              console.warn('Steps has a child that is not a Step component.');
-              return null;
-            }
-          })}
-        </div>
-      </StepsContext.Provider>
-    );
-  }
-);
-
-Steps.displayName = 'Steps';
-
-export default Steps;

package/components/steps/style/_index.scss

@@ -1,208 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-steps {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: $font-color;
-  display: flex;
-  width: 100%;
-
-  &_horizontal {
-    .#{$prefix}-steps-item_label-horizontal {
-      display: flex;
-
-      .#{$prefix}-steps-item {
-        &__tail {
-          display: none;
-        }
-
-        &__content {
-          flex: 1;
-          margin: 16px 0 0 12px;
-        }
-
-        &__title {
-          display: flex;
-          align-items: center;
-
-          &:after {
-            content: '';
-            margin: 0 12px;
-            flex: 1;
-            width: 100%;
-            height: 1px;
-            background: #dcdcdc;
-          }
-        }
-      }
-    }
-  }
-
-  &_vertical {
-    flex-direction: column;
-
-    .#{$prefix}-steps-item {
-      display: flex;
-
-      &__head {
-        flex-direction: column;
-      }
-
-      &__tail {
-        min-height: 30px;
-        height: 100%;
-        width: 1px;
-        margin: 8px 0;
-      }
-
-      &__content {
-        margin-top: 0;
-        margin-left: 12px;
-      }
-    }
-  }
-}
-
-.#{$prefix}-steps-item {
-  box-sizing: border-box;
-  flex: 1;
-  overflow: hidden;
-  vertical-align: top;
-
-  &[role='button']:not(&_disabled) {
-    cursor: pointer;
-  }
-
-  &_disabled {
-    cursor: not-allowed;
-  }
-
-  &__head {
-    display: flex;
-    align-items: center;
-  }
-
-  &__icon {
-    width: 32px;
-    height: 32px;
-    border: 1px solid $primary-color;
-    border-radius: 50%;
-    background-color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &_has-icon {
-      border: none;
-      background-color: transparent;
-    }
-  }
-
-  &__tail {
-    margin: 0 12px;
-    flex: 1;
-    height: 1px;
-    width: 100%;
-    background-color: #dcdcdc;
-  }
-
-  &__content {
-    margin-top: 8px;
-  }
-
-  &__title {
-    line-height: 32px;
-    font-size: $steps-title-font-size;
-    color: $steps-title-normal-color;
-  }
-
-  &__desc {
-    color: $steps-desc-normal-color;
-  }
-
-  &:last-child {
-    flex: none;
-
-    .#{$prefix}-steps-item {
-
-      &__tail {
-        display: none;
-      }
-
-      &__title:after {
-        content: none;
-      }
-    }
-  }
-
-  &_process {
-    .#{$prefix}-steps-item {
-      &__icon {
-        background-color: $primary-color;
-        color: #fff;
-
-        &_has-icon {
-          background-color: transparent;
-          color: $primary-color;
-        }
-      }
-
-      &__title {
-        font-weight: 600;
-        color: $steps-title-active-color;
-      }
-
-      &__desc {
-        color: $steps-desc-active-color;
-      }
-    }
-  }
-
-  &_finish {
-    .#{$prefix}-steps-item {
-
-      &__icon {
-        color: $primary-color;
-      }
-
-      &__tail, &__title:after {
-        background-color: $primary-color;
-      }
-    }
-  }
-
-  &_wait {
-    .#{$prefix}-steps-item {
-      &__icon {
-        border-color: $steps-title-wait-color;
-        color: $steps-title-wait-color;
-      }
-
-      &__title {
-        color: $steps-title-wait-color;
-      }
-
-      &__desc {
-        color: $steps-desc-wait-color;
-      }
-    }
-  }
-
-  &_error {
-    .#{$prefix}-steps-item {
-      &__icon {
-        border-color: $steps-title-error-color;
-        color: $steps-title-error-color;
-      }
-
-      &__title {
-        color: $steps-title-error-color;
-      }
-
-      &__desc {
-        color: $steps-desc-error-color;
-      }
-    }
-  }
-}

package/components/steps/types.ts

@@ -1,26 +0,0 @@
-import React, { ReactNode } from 'react';
-import { BaseProps, DirectionType } from '../_utils/props';
-
-export type StepsStatus = 'wait' | 'process' | 'finish' | 'error';
-
-export interface StepsProps
-  extends BaseProps,
-    Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
-  current?: number;
-  defaultCurrent?: number;
-  direction?: DirectionType;
-  status?: StepsStatus;
-  labelPlacement?: DirectionType;
-  onChange?: (current: number) => void;
-}
-
-export interface StepsItemProps
-  extends BaseProps,
-    Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'title'> {
-  stepIndex?: number;
-  icon?: ReactNode;
-  title?: ReactNode;
-  description?: ReactNode;
-  status?: StepsStatus;
-  disabled?: boolean;
-}

package/components/sticky/demo/basic.md

@@ -1,23 +0,0 @@
-<demo>
-
-### Basic
-
-The simplest usage.
-
-```jsx live
-<>
-  <Sticky offsetTop={60}>
-    <Button btnType="primary">
-      Affix top
-    </Button>
-  </Sticky>
-  <br />
-  <Sticky offsetBottom={10}>
-    <Button btnType="primary">
-      Affix bottom
-    </Button>
-  </Sticky>
-</>
-```
-
-</demo>

package/components/sticky/demo/callback.md

@@ -1,13 +0,0 @@
-<demo>
-
-### Callback
-
-Callback with affixed state.
-
-```jsx live
-<Sticky offsetTop={120} onChange={affixed => console.log(affixed)}>
-  <Button>100px to affix top</Button>
-</Sticky>
-```
-
-</demo>

package/components/sticky/demo/container.md

@@ -1,34 +0,0 @@
-<demo>
-
-### Container to scroll.
-
-Set a target for `Sticky`, which is listen to scroll event of target element (default is `window`).
-
-```jsx live
-() => {
-  const containerStyle = {
-    height: 130,
-    overflowY: 'scroll',
-  };
-
-  const bgStyle = {
-    paddingTop: 60,
-    height: 500,
-    backgroundColor: '#dfdfdf',
-  };
-
-  const containerRef = React.useRef(null);
-
-  return (
-  <div style={containerStyle} ref={containerRef}>
-    <div style={bgStyle}>
-      <Sticky container={() => containerRef.current}>
-        <Button btnType="primary">Fixed at the top of container</Button>
-      </Sticky>
-    </div>
-  </div>
-  );
-}
-```
-
-</demo>

package/components/sticky/index.md

@@ -1,40 +0,0 @@
-import Basic from './demo/basic.md'
-import Container from './demo/container.md'
-import Callback from './demo/callback.md'
-
-# Sticky
-
-Wrap around another component to make it stick the viewport.
-
-## Scenario
-
-On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
-
-## Usage
-
-```jsx
-import { Sticky } from 'tiny-ui';
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic />
-    <Container />
-  </column>
-  <column>
-    <Callback />
-  </column>
-</layout>
-
-## API
-
-| Property          | Description                                   | Type                          | Default       |
-| ----------------- | --------------------------------------------- | ----------------------------- | ------------- |
-| offsetBottom      | offset from the bottom of the viewport.       | number                        | 0             |
-| offsetTop         | offset from the top of the viewport.          | number                        | -             |
-| container         | specifies the scrollable area DOM node.       | () => HTMLElement             | () => window  |
-| onChange          | callback for when sticky state is changed.    | (stuck: boolean) => void     | -             |
-
-**Note: ** Children of `Sticky` must not have the property `position: absolute`.

package/components/sticky/index.tsx

@@ -1,167 +0,0 @@
-import React, { CSSProperties, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { getRect, getScroll, getNodeHeight } from '../_utils/dom';
-import { StickyProps } from './types';
-
-const Sticky = (props: StickyProps): JSX.Element => {
-  const {
-    offsetTop,
-    offsetBottom,
-    container = () => window,
-    onChange,
-    className,
-    style,
-    children,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('sticky', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-  const placeholderRef = useRef<HTMLDivElement | null>(null);
-  const stickyRef = useRef<HTMLDivElement | null>(null);
-  const [stickyStyle, setStickyStyle] = useState<CSSProperties>({});
-  const [placeholderStyle, setPlaceholderStyle] = useState<CSSProperties>({});
-  const [stickyContainer, setStickyContainer] = useState(container());
-
-  const getStickyMode = () => {
-    const mode = {
-      top: false,
-      bottom: false,
-      offset: 0,
-    };
-
-    if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
-      mode.top = true;
-    } else if (typeof offsetTop === 'number') {
-      mode.top = true;
-      mode.bottom = false;
-      mode.offset = offsetTop || 0;
-    } else if (typeof offsetBottom === 'number') {
-      mode.bottom = true;
-      mode.top = false;
-      mode.offset = offsetBottom || 0;
-    }
-
-    return mode;
-  };
-  const [stickyMode] = useState(getStickyMode());
-
-  const getOffset = useCallback((placeholderNode, stickyContainer): {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  } => {
-    const rect = placeholderNode.getBoundingClientRect();
-    const containerRect = getRect(stickyContainer);
-    const containerScrollTop = getScroll(stickyContainer, true);
-    const containerScrollLeft = getScroll(stickyContainer, false);
-
-    return {
-      top: rect.top - containerRect.top + containerScrollTop,
-      left: rect.left - containerRect.left + containerScrollLeft,
-      width: rect.width,
-      height: rect.height,
-    };
-  }, []);
-
-  const updateStickyStyle = useCallback(
-    (stickyStyle: CSSProperties, stuck = false) => {
-      setStickyStyle({ ...stickyStyle });
-
-      if (stuck) {
-        onChange && onChange(true);
-      } else if (!stickyStyle) {
-        onChange && onChange(false);
-      }
-    },
-    [onChange]
-  );
-
-  const updatePlaceholderStyle = (placeholderStyle: CSSProperties) => {
-    setPlaceholderStyle({ ...placeholderStyle });
-  };
-
-  const updateNodePosition = useCallback(() => {
-    const placeholderNode = placeholderRef.current;
-    const stickyNode = stickyRef.current;
-    if (!placeholderNode || !stickyContainer || !stickyNode) {
-      return;
-    }
-
-    const containerScrollTop = getScroll(stickyContainer, true);
-    const placeholderOffset = getOffset(placeholderNode, stickyContainer);
-    const containerHeight = getNodeHeight(stickyContainer);
-    const placeholderHeight = placeholderNode.offsetHeight;
-    const containerRect = getRect(stickyContainer);
-    const stickyHeight = stickyNode.offsetHeight;
-
-    const stickyStyle: CSSProperties = {
-      width: placeholderOffset.width,
-    };
-    const placeholderStyle: CSSProperties = {
-      width: placeholderOffset.width,
-      height: stickyHeight,
-    };
-    if (stickyMode.top && containerScrollTop > placeholderOffset.top - stickyMode.offset) {
-      // sticky top
-      stickyStyle.position = 'fixed';
-      stickyStyle.top = stickyMode.offset + containerRect.top;
-      updateStickyStyle(stickyStyle, true);
-      updatePlaceholderStyle(placeholderStyle);
-    } else if (
-      stickyMode.bottom &&
-      containerScrollTop <
-        placeholderOffset.top + placeholderHeight + stickyMode.offset - containerHeight
-    ) {
-      // sticky bottom
-      stickyStyle.height = placeholderHeight;
-      stickyStyle.position = 'fixed';
-      stickyStyle.bottom = stickyMode.offset;
-
-      updateStickyStyle(stickyStyle, true);
-      updatePlaceholderStyle(placeholderStyle);
-    } else {
-      updateStickyStyle({});
-      updatePlaceholderStyle({});
-    }
-  }, [stickyContainer, updateStickyStyle, stickyMode, getOffset]);
-
-  /**
-   * If the container is changed, update the listeners
-   */
-  useEffect(() => {
-    const stickyContainer = container();
-    if (!stickyContainer) {
-      return;
-    }
-    setStickyContainer(stickyContainer);
-
-    stickyContainer.addEventListener('scroll', updateNodePosition);
-    stickyContainer.addEventListener('resize', updateNodePosition);
-
-    return () => {
-      stickyContainer.removeEventListener('scroll', updateNodePosition);
-      stickyContainer.removeEventListener('resize', updateNodePosition);
-    };
-  }, [updateNodePosition, container]);
-
-  useEffect(() => {
-    updateNodePosition();
-  }, [updateNodePosition]);
-
-  return (
-    <div ref={placeholderRef} style={placeholderStyle}>
-      <div {...otherProps} className={cls} ref={stickyRef} style={{ ...stickyStyle, ...style }}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-Sticky.displayName = 'Sticky';
-
-export default Sticky;

package/components/sticky/style/_index.scss

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

package/components/sticky/types.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-import { Target } from '../_utils/dom';
-
-export interface StickyProps
-  extends BaseProps,
-    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onChange'> {
-  offsetTop?: number;
-  offsetBottom?: number;
-  container?: () => Target;
-  onChange?: (stuck: boolean) => void;
-}

package/components/strength-indicator/demo/basic.md

@@ -1,40 +0,0 @@
-<demo>
-
-### Basic
-
-A simple usage.
-
-```jsx live
-class BasicExample extends React.PureComponent{
-
-  constructor() {
-    super();
-    this.state = {
-      current: 1,
-    };
-    this.btnOnClick = this.btnOnClick.bind(this);
-  }
-
-  btnOnClick() {
-    let { current } = this.state;
-    if(current < 3) {
-      current++;
-    } else {
-      current = 0;
-    }
-    this.setState({ current });
-  };
-
-  render(){
-    return (
-      <div>
-        <StrengthIndicator current={this.state.current}/>
-        <br />
-        <Button btnType="primary" onClick={this.btnOnClick}>Next</Button>
-      </div>
-    );
-  }
-}
-```
-
-</demo>

package/components/strength-indicator/demo/label.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Label
-
-Display labels.
-
-```jsx live
-<StrengthIndicator labels current={2}/>
-```
-
-</demo>