tiny-ui 0.0.95 → 1.0.1

package/components/popup/style/_index.scss

@@ -1,85 +0,0 @@
-@use 'sass:math';
-@import '../../style/variables';
-
-.#{$prefix}-popup {
-  box-sizing: border-box;
-  border-radius: $popover-border-radius;
-  white-space: nowrap;
-  font-size: $font-size-base;
-  text-align: left;
-  box-shadow: $popover-box-shadow;
-  z-index: 999;
-
-  &__arrow, &__arrow:before {
-    width: $popover-arrow-size;
-    height: $popover-arrow-size;
-    box-sizing: border-box;
-    position: absolute;
-  }
-
-  &__arrow:before {
-    content: '';
-    transform: rotate(45deg);
-  }
-
-  &_light {
-    background-color: #fff;
-    color: rgba(0, 0, 0, 0.65);
-    .#{$prefix}-popup {
-      &__arrow:before {
-        background: #fff;
-      }
-    }
-  }
-
-  &_dark {
-    background-color: #262626;
-    color: #fff;
-    .#{$prefix}-popup {
-      &__arrow:before {
-        background: #262626;
-      }
-    }
-  }
-
-  &[data-popper-placement^='top'] {
-    & > .#{$prefix}-popup__arrow {
-      bottom: math.div(-$popover-arrow-size, 2);
-
-      &:before {
-        box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-
-  &[data-popper-placement^='bottom'] {
-    > .#{$prefix}-popup__arrow {
-      top: math.div(-$popover-arrow-size, 2);
-
-      &:before {
-        box-shadow: -2px -2px 5px rgba(0, 0, 0, .06);
-      }
-    }
-  }
-
-  &[data-popper-placement^='left'] {
-    > .#{$prefix}-popup__arrow {
-      right: math.div(-$popover-arrow-size, 2);
-
-      &:before {
-        box-shadow: 3px -3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-
-  &[data-popper-placement^='right'] {
-    > .#{$prefix}-popup__arrow {
-      left: math.div(-$popover-arrow-size, 2);
-
-      &:before {
-        box-shadow: -3px 3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-}
-

package/components/popup/style/index.tsx

@@ -1,4 +0,0 @@
-import './index.scss';
-
-// style dependency
-import '../../popup/style/index.scss';

package/components/popup/types.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export type TriggerType = 'hover' | 'focus' | 'click' | 'contextmenu' | 'manual';
-export type PopoverTheme = 'light' | 'dark';
-export type Placement =
-  | 'top-start'
-  | 'top'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left'
-  | 'left-end'
-  | 'right-start'
-  | 'right'
-  | 'right-end';
-
-export interface PopupProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  disabled?: boolean;
-  content?: React.ReactNode;
-  placement?: Placement;
-  visible?: boolean;
-  defaultVisible?: boolean;
-  onVisibleChange?: (visible: boolean) => void;
-
-  /** Determine whether using a portal to wrap the content */
-  usePortal?: boolean;
-
-  /** Provide white and black backgrounds */
-  theme?: PopoverTheme;
-
-  flip?: boolean;
-
-  /** Determine whether display an arrow */
-  arrow?: boolean;
-
-  /** The distance between popup window and trigger target */
-  offset?: number;
-
-  /** Delay in seconds, before tooltip is shown on mouse enter */
-  mouseEnterDelay?: number;
-
-  /** Delay in seconds, before tooltip is hidden on mouse leave */
-  mouseLeaveDelay?: number;
-
-  /** Trigger mode */
-  trigger?: TriggerType;
-
-  /** Determine using a bidirectional effect of the zoom animation */
-  biZoom?: boolean;
-
-  children: React.ReactElement;
-}

package/components/portal/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-export interface PortalProps {
-  container?: HTMLElement;
-  children?: React.ReactNode;
-}
-
-const Portal = (props: PortalProps): React.ReactPortal => {
-  const { container = document.body, children } = props;
-  return ReactDOM.createPortal(children, container);
-};
-
-export default Portal;

package/components/progress/bar.tsx

@@ -1,94 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { BarProps, strokePresetColors } from './types';
-
-const Bar = (props: BarProps): React.ReactElement => {
-  const {
-    percent = 0,
-    showInfo = true,
-    strokeWidth = 8,
-    strokeLinecap = 'round',
-    strokeColor = 'primary',
-    innerText = false,
-    prefixCls: customisedCls,
-    format,
-    backgroundType,
-    className,
-    style,
-    ...otherProps
-  } = props;
-  let percentage: number = percent > 100 ? 100 : percent;
-  percentage = percentage < 0 ? 0 : percentage;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('progress-bar', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, `${prefixCls}_${strokeLinecap}`);
-
-  const strokeBgCls = classNames(`${prefixCls}__bg`, {
-    [`${prefixCls}__bg_${strokeColor}`]:
-      !Array.isArray(strokeColor) && strokePresetColors.includes(strokeColor),
-  });
-
-  const background = Array.isArray(strokeColor)
-    ? `linear-gradient(to right, ${strokeColor.join(',')})`
-    : strokePresetColors.includes(strokeColor)
-    ? ''
-    : strokeColor;
-
-  const effectCls = classNames(`${prefixCls}__effect`, {
-    [`${prefixCls}__effect_${backgroundType}`]: backgroundType,
-  });
-
-  const _renderLabel = () => {
-    if (showInfo && !innerText) {
-      return format ? (
-        format(percentage)
-      ) : (
-        <span className={`${prefixCls}__text`}>{percentage}%</span>
-      );
-    }
-    return null;
-  };
-
-  const _renderInnerLabel = () => {
-    if (showInfo && innerText) {
-      return format ? (
-        format(percentage)
-      ) : (
-        <div className={`${prefixCls}__inner-text`} style={{ lineHeight: `${strokeWidth}px` }}>
-          {percentage}%
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div
-      {...otherProps}
-      role="progressbar"
-      aria-valuemax={100}
-      aria-valuemin={0}
-      aria-valuenow={percentage}
-      className={cls}
-      style={style}>
-      <div className={`${prefixCls}__inner`} style={{ height: strokeWidth }}>
-        <div
-          className={strokeBgCls}
-          style={{
-            width: `${percentage}%`,
-            background,
-          }}>
-          <div className={effectCls} />
-          {_renderInnerLabel()}
-        </div>
-      </div>
-      {_renderLabel()}
-    </div>
-  );
-};
-
-Bar.displayName = 'Bar';
-
-export default Bar;

package/components/progress/circle.tsx

@@ -1,89 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { CircleProps, strokePresetColors } from './types';
-
-const Circle = (props: CircleProps): React.ReactElement => {
-  const {
-    percent = 0,
-    strokeWidth = 8,
-    width = 120,
-    strokeLinecap = 'round',
-    strokeColor = 'primary',
-    reverse = false,
-    prefixCls: customisedCls,
-    format,
-    className,
-    style,
-    textStyle,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('progress-circle', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-  let percentage: number = percent > 100 ? 100 : percent;
-  percentage = percentage < 0 ? 0 : percentage;
-
-  const strokeBgCls = classNames(`${prefixCls}__path`, {
-    [`${prefixCls}__path_${strokeColor}`]: strokePresetColors.includes(strokeColor),
-  });
-
-  const relativeStrokeWidth = (): string => {
-    return ((strokeWidth / width) * 100).toFixed(1);
-  };
-
-  const trackPath = (): string => {
-    const radius: number = 50 - parseFloat(relativeStrokeWidth()) / 2;
-    return `M 50 50 m 0 -${radius} a ${radius} ${radius}
-         0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
-  };
-
-  const _perimeter = (): number => {
-    const radius: number = 50 - parseFloat(relativeStrokeWidth()) / 2;
-    return 2 * Math.PI * radius;
-  };
-
-  const _circlePathStyle = (): React.CSSProperties => {
-    const perimeter = _perimeter();
-    const strokeDash = reverse ? percentage / 100 + 1 : 1 - percentage / 100;
-    return {
-      strokeDasharray: `${perimeter}px, ${perimeter}px`,
-      strokeDashoffset: strokeDash * perimeter + 'px',
-    };
-  };
-
-  const renderLabel = (): React.ReactNode => {
-    return (
-      <div className={`${prefixCls}__text`} style={textStyle}>
-        {format ? format(percent) : `${percentage}%`}
-      </div>
-    );
-  };
-
-  return (
-    <div
-      {...otherProps}
-      className={cls}
-      style={{ width, height: width, ...style }}
-      aria-valuemax={100}
-      aria-valuemin={0}
-      aria-valuenow={percentage}>
-      <svg viewBox="0 0 100 100" width={width} height={width}>
-        <path className={`${prefixCls}__bg`} d={trackPath()} strokeWidth={relativeStrokeWidth()} />
-        <path
-          className={strokeBgCls}
-          d={trackPath()}
-          strokeLinecap={strokeLinecap}
-          strokeWidth={relativeStrokeWidth()}
-          style={_circlePathStyle()}
-        />
-      </svg>
-      {renderLabel()}
-    </div>
-  );
-};
-
-Circle.displayName = 'Circle';
-
-export default Circle;

package/components/progress/demo/active.md

@@ -1,20 +0,0 @@
-<demo>
-
-### Active Background Style
-
-Set `backgroundType` to display different bar backgrounds.
-
-```jsx live
-() => {
-  const { Bar } = Progress;
-  
-  return (
-    <div>
-      <Bar percent={50} backgroundType="impulse"/>
-      <Bar percent={50} backgroundType="striped"/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/demo/custom-text.md

@@ -1,48 +0,0 @@
-<demo>
-
-### Custom text format
-
-Set a custom text by setting the `format` prop.
-
-```jsx live
-() => {
-  const { Bar, Circle } = Progress;
-  const { Group } = Button;
-  
-  let label = '';
-  
-  const _barText = (val) => {
-  
-    if (val < 100)
-      label = `${val} Days`;
-    else 
-      label = 'Done';
-      
-    return (
-      <span style={{ margin: '0 5px' }}>{label}</span>
-    );
-  };
-  
-  const Wrapper = () => {
-    const [percent, setPercent] = React.useState(90);
-  
-    return (
-      <div>
-        <Group style={{ marginBottom: 20 }}>
-          <Button onClick={() => (percent > 0) && setPercent(percent - 10)}>-</Button>
-          <Button onClick={() => (percent < 100) && setPercent(percent + 10)}>+</Button>
-        </Group>
-        
-        <Bar percent={percent} format={_barText} />
-        <Circle percent={percent} format={_barText} />
-      </div>
-    );
-  };
-
-  return (
-    <Wrapper />
-  );  
-}
-```
-
-</demo>

package/components/progress/demo/dynamic.md

@@ -1,34 +0,0 @@
-<demo>
-
-### Dynamic progress
-
-Control the value.
-
-```jsx live
-() => {
-  const { Bar, Circle } = Progress;
-  const { Group } = Button;
-  
-  const Wrapper = () => {
-    const [percent, setPercent] = React.useState(0);
-  
-    return (
-      <div>
-        <Group style={{ marginBottom: 20 }}>
-          <Button onClick={() => (percent > 0) && setPercent(percent - 10)}>-</Button>
-          <Button onClick={() => (percent < 100) && setPercent(percent + 10)}>+</Button>
-        </Group>
-        
-        <Bar percent={percent} />
-        <Circle percent={percent} />
-      </div>
-    );
-  };
-  
-  return (
-    <Wrapper />
-  );
-}
-```
-
-</demo>

package/components/progress/demo/internal-text.md

@@ -1,23 +0,0 @@
-<demo>
-
-### Internal Text
-
-Set `innerText` to display the text inside the bar.
-
-```jsx live
-() => {
-  const { Bar } = Progress;
-  
-  return (
-    <div>
-      <Bar percent={0} innerText strokeWidth={15} style={{marginBottom: 10}}/>
-      <Bar percent={30} strokeColor="yellow" innerText strokeWidth={15} style={{marginBottom: 10}}/>
-      <Bar percent={50} strokeColor="green" innerText strokeWidth={15} style={{marginBottom: 10}}/>
-      <Bar percent={70} strokeColor="red" innerText strokeWidth={15} style={{marginBottom: 10}}/>
-      <Bar percent={100} strokeColor="blue" innerText strokeWidth={15} style={{marginBottom: 10}}/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/demo/linear-gradient.md

@@ -1,22 +0,0 @@
-<demo>
-
-### Custom linear gradient
-
-A package of `linear-gradient`. Pass a color array to set the `strokeColor`.
-
-> More linear gradient color presets, please visit [Awesome Gradient](https://wangdicoder.github.io/awesome-gradient/).
-
-```jsx live
-() => {
-  const { Bar } = Progress;
-  
-  return (
-    <div>
-      <Bar percent={90} strokeColor={['#108ee9', '#87d068']} backgroundType="impulse"/>
-      <Bar percent={90} strokeColor={['#FDBE2F', '#E64778', '#8927EA']}/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/demo/progress-bar.md

@@ -1,24 +0,0 @@
-<demo>
-
-### Progress bar
-
-A standard progress bar.
-
-```jsx live
-() => {
-  const { Bar } = Progress;
-  
-  return (
-    <div>
-      <Bar percent={10} />
-      <Bar percent={30} strokeColor="yellow"/>
-      <Bar percent={50} strokeColor="green"/>
-      <Bar percent={70} strokeColor="red"/>
-      <Bar percent={100} strokeColor="blue"/>
-      <Bar percent={100} strokeColor="blue" showInfo={false} style={{ marginTop: 5 }}/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/demo/progress-circle.md

@@ -1,28 +0,0 @@
-<demo>
-
-### Progress circular
-
-A circular progress.
-
-```jsx live
-() => {
-  const { Circle } = Progress;
-  
-  const style = {
-      marginRight: '10px',
-  };
-  
-  return (
-    <div>
-      <Circle percent={10} style={style}/>
-      <Circle percent={30} strokeColor="yellow" style={style}/>
-      <Circle percent={50} strokeColor="red" style={style}/>
-      <Circle percent={70} strokeColor="blue" style={style}/>
-      <Circle percent={100} strokeColor="blue" style={style}/>
-      <Circle percent={100} strokeColor="green"/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/demo/reverse.md

@@ -1,38 +0,0 @@
-<demo>
-
-### Reverse direction
-
-Set `reverse` to control the direction.
-
-> This is only for **Circle** progress.
-
-```jsx live
-() => {
-  const { Bar, Circle } = Progress;
-  const { Group } = Button;
-  
-  const Wrapper = () => {
-    const [percent, setPercent] = React.useState(0);
-  
-    return (
-      <div>
-        <Group style={{ marginBottom: 20 }}>
-          <Button onClick={() => (percent > 0) && setPercent(percent - 10)}>-</Button>
-          <Button onClick={() => (percent < 100) && setPercent(percent + 10)}>+</Button>
-        </Group>
-        
-        <br/>
-        
-        <Circle percent={percent} reverse/>
-        <Circle percent={percent} style={{ marginLeft: 10 }}/>
-      </div>
-    );
-  };
-  
-  return (
-    <Wrapper />
-  );
-}
-```
-
-</demo>

package/components/progress/demo/square-linecaps.md

@@ -1,20 +0,0 @@
-<demo>
-
-### Square linecaps
-
-By setting `strokeLinecap="square"`, you can change the linecaps from round to square.
-
-```jsx live
-() => {
-  const { Bar, Circle } = Progress;
-  
-  return (
-    <div>
-      <Bar percent={80} strokeLinecap="square"/>
-      <Circle percent={80} strokeLinecap="square"/>
-    </div>
-  );
-}
-```
-
-</demo>

package/components/progress/index.md

@@ -1,54 +0,0 @@
-import Active from './demo/active.md'
-import CustomText from './demo/custom-text.md'
-import Dynamic from './demo/dynamic.md'
-import InternalText from './demo/internal-text.md'
-import LinearGradient from './demo/linear-gradient.md'
-import ProgressBar from './demo/progress-bar.md'
-import ProgressCircle from './demo/progress-circle.md'
-import Reverse from './demo/reverse.md'
-import SquareLinecaps from './demo/square-linecaps.md'
-
-# Progress
-
-Display the current progress of an operation flow.
-
-## Scenario
-If it will take a long time to complete an operation, you can use Progress to show the current progress and status.
-- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
-- When you need to display the completion percentage of an operation.
-
-## Usage
-
-```jsx
-import { Progress } from 'tiny-ui';
-
-const { Bar, Circle } = Progress;
-```
-
-## Examples
-
-<layout>
-  <column>
-    <ProgressBar/>
-    <ProgressCircle/>
-    <InternalText/>
-    <Active/>
-    <LinearGradient/>
-  </column>
-  <column>
-    <Dynamic/>
-    <CustomText/>
-    <Reverse/>
-    <SquareLinecaps/>
-  </column>
-</layout>
-
-## API
-
-| Property  | Description                      | Type                               | Default |
-| --------- | -------------------------------- | ---------------------------------- | ------- |
-| size      | selection size                   | enum: `sm` &#124; `md` &#124; `lg` | `md`    |
-| disabled  | disable to select                | boolean                            | false   |
-| style	    | style object of container	object | CSSProperties                      | -       |
-| className	| className of container           | string                             | -       |
-

package/components/progress/index.tsx

@@ -1,9 +0,0 @@
-import Circle from './circle';
-import Bar from './bar';
-
-const Progress = {
-  Circle,
-  Bar,
-};
-
-export default Progress;