tiny-ui 0.0.95 → 1.0.1

package/components/scroll-indicator/types.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-import { Target } from '../_utils/dom';
-
-export interface ScrollIndicatorProps
-  extends BaseProps,
-    React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  fixed?: boolean;
-  target?: () => Target;
-}

package/components/select/index.tsx

@@ -1,14 +0,0 @@
-import Select from './select';
-import SelectOption from './option';
-import SelectOptGroup from './opt-group';
-
-type ISelect = typeof Select & {
-  Option: typeof SelectOption;
-  OptGroup: typeof SelectOptGroup;
-};
-
-const DefaultSelect = Select as ISelect;
-DefaultSelect.Option = SelectOption;
-DefaultSelect.OptGroup = SelectOptGroup;
-
-export default DefaultSelect;

package/components/select/opt-group.tsx

@@ -1,38 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SelectOptGroupProps, SelectOptionsProps } from './types';
-
-const SelectOptGroup = (props: SelectOptGroupProps): React.ReactElement => {
-  const { prefixCls: customisedCls, label, className, children, ...otherProps } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('select-group', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-
-  return (
-    <li {...otherProps} key={label} className={cls}>
-      <div className={`${prefixCls}__title`}>{label}</div>
-      <ul className={`${prefixCls}__list`}>
-        {React.Children.map(children, (child) => {
-          const childElement = child as React.FunctionComponentElement<SelectOptionsProps>;
-          if (childElement.type.displayName === 'SelectOption') {
-            const childProps = {
-              ...childElement.props,
-            };
-            return React.cloneElement(childElement, childProps);
-          } else {
-            console.warn(
-              'Select has a child that is not neither SelectOption nor SelectOptGroup component.'
-            );
-            return null;
-          }
-        })}
-      </ul>
-    </li>
-  );
-};
-
-SelectOptGroup.displayName = 'SelectOptGroup';
-
-export default SelectOptGroup;

package/components/select/option.tsx

@@ -1,57 +0,0 @@
-import React, { useContext, useState } from 'react';
-import classNames from 'classnames';
-import { SelectContext } from './select-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SelectOptionsProps } from './types';
-
-const SelectOption = (props: SelectOptionsProps): React.ReactElement => {
-  const {
-    disabled = false,
-    prefixCls: customisedCls,
-    value,
-    className,
-    children,
-    ...otherProps
-  } = props;
-  const context = useContext(SelectContext);
-  const isSelect = context.value === value;
-  const [active, setActive] = useState(false);
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('select-option', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_selected`]: isSelect,
-    [`${prefixCls}_active`]: active,
-    [`${prefixCls}_disabled`]: disabled,
-  });
-
-  const onMouseEnter = (): void => {
-    setActive(true);
-  };
-
-  const onMouseLeave = (): void => {
-    setActive(false);
-  };
-
-  const onClick = (): void => {
-    !disabled && context.onSelect(value);
-  };
-
-  return (
-    <li
-      {...otherProps}
-      key={value}
-      className={cls}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      aria-selected={isSelect}
-      aria-disabled={disabled}>
-      {children}
-    </li>
-  );
-};
-
-SelectOption.displayName = 'SelectOption';
-
-export default SelectOption;

package/components/select/select-context.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-type Props = {
-  value?: string | string[];
-  highlightVal?: string;
-  onSelect: (value: string | string[]) => void;
-};
-
-export const SelectContext = React.createContext<Props>({ value: '', onSelect: () => {} });

package/components/select/select.tsx

@@ -1,109 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { useClickOutside } from '../_utils/hooks';
-import { ArrowDown } from '../_utils/components';
-import { SelectContext } from './select-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SelectOptionsProps, SelectProps, SelectValue } from './types';
-import Popup from '../popup';
-import Input from '../input/input';
-
-const Select = (props: SelectProps): React.ReactElement => {
-  const {
-    defaultOpen = false,
-    disabled = false,
-    defaultValue = '',
-    prefixCls: customisedCls,
-    value,
-    onDropdownVisibleChange,
-    placeholder,
-    className,
-    children,
-    dropdownStyle,
-    onSelect,
-    ...otherProps
-  } = props;
-  const [isOpenDropdown, setIsOpenDropdown] = useState('open' in props ? props.open : defaultOpen);
-  const [selectVal, setSelectVal] = useState('value' in props ? value : defaultValue);
-  const ref = useRef<HTMLDivElement | null>(null);
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('select', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-  const arrowCls = classNames(`${prefixCls}__arrow`, {
-    [`${prefixCls}__arrow_reverse`]: isOpenDropdown,
-  });
-  useClickOutside(ref.current as HTMLDivElement, () => {
-    if (!('open' in props)) {
-      setIsOpenDropdown(false);
-      onDropdownVisibleChange && onDropdownVisibleChange(false);
-    }
-  });
-
-  const inputOnClick = (e: React.MouseEvent<HTMLInputElement>): void => {
-    e.preventDefault();
-    if (!('open' in props)) {
-      setIsOpenDropdown(true);
-      onDropdownVisibleChange && onDropdownVisibleChange(true);
-    }
-  };
-
-  const contextValue = {
-    value: selectVal,
-    onSelect: (value: SelectValue): void => {
-      setSelectVal(value);
-      setIsOpenDropdown(false);
-      onSelect && onSelect(value);
-    },
-  };
-
-  useEffect(() => {
-    'open' in props && setIsOpenDropdown(props.open);
-  }, [props]);
-
-  const renderOverlay = (): React.ReactElement => (
-    <SelectContext.Provider value={contextValue}>
-      <ul className={`${prefixCls}__dropdown`} style={dropdownStyle}>
-        {React.Children.map(children, (child) => {
-          const childElement = child as React.FunctionComponentElement<SelectOptionsProps>;
-          const { displayName } = childElement.type;
-          if (displayName === 'SelectOption' || displayName === 'SelectOptGroup') {
-            return React.cloneElement(childElement, childElement.props);
-          } else {
-            console.warn(
-              'Select has a child that is not neither SelectOption nor SelectOptGroup component.'
-            );
-            return null;
-          }
-        })}
-      </ul>
-    </SelectContext.Provider>
-  );
-
-  return (
-    <div {...otherProps} ref={ref} className={cls}>
-      <Popup
-        trigger="manual"
-        placement="bottom"
-        arrow={false}
-        visible={isOpenDropdown}
-        content={renderOverlay()}>
-        <Input
-          value={Array.isArray(selectVal) ? selectVal[0] : selectVal}
-          disabled={disabled}
-          placeholder={placeholder}
-          onClick={inputOnClick}
-          suffix={
-            <span className={arrowCls}>
-              <ArrowDown size={10} />
-            </span>
-          }
-        />
-      </Popup>
-    </div>
-  );
-};
-
-Select.displayName = 'Select';
-
-export default Select;

package/components/select/style/_index.scss

@@ -1,74 +0,0 @@
-@import "../../style/variables";
-
-.#{$prefix}-select {
-
-  &__dropdown {
-    width: 100%;
-    top: calc(100% + 3px);
-    margin: 0;
-    padding: 4px 0;
-    list-style-type: none;
-    background-color: #fff;
-    box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
-    z-index: 10;
-    box-shadow: $select-dropdown-shadow;
-    border-radius: $border-radius;
-    font-size: $font-size-base;
-    max-height: $select-dropdown-max-height;
-  }
-
-  &__arrow {
-    display: inline-block;
-    transition: transform 300ms;
-
-    &_reverse {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.#{$prefix}-select-option {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 22px;
-  cursor: pointer;
-  color: $font-color;
-  transition: all 300ms;
-
-  &_active {
-    background-color: #f5f5f5;
-  }
-
-  &_selected {
-    background-color: lighten($primary-color, 40%);
-    font-weight: $select-selected-font-weight;
-  }
-
-  &_disabled {
-    cursor: not-allowed;
-    background-color: #fff;
-    opacity: .5;
-  }
-}
-
-.#{$prefix}-select-group {
-
-  &__title {
-    font-size: $font-size-sm;
-    cursor: default;
-    color: $gray-600;
-    padding: 7px 12px;
-  }
-
-  &__list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    > .#{$prefix}-select-option {
-      padding-left: 24px;
-    }
-  }
-}

package/components/select/style/index.tsx

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

package/components/select/types.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface SelectOptGroupProps
-  extends BaseProps,
-    React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
-  label?: string;
-  children?: React.ReactNode;
-}
-
-export interface SelectOptionsProps
-  extends BaseProps,
-    React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
-  value: string;
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-export type SelectValue = string | string[];
-
-export interface SelectProps
-  extends BaseProps,
-    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onSelect'> {
-  value?: SelectValue;
-  defaultValue?: SelectValue;
-  onSelect?: (value: SelectValue) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  onDropdownVisibleChange?: (open: boolean) => void;
-  dropdownStyle?: React.CSSProperties;
-  children?: React.ReactNode;
-}

package/components/skeleton/demo/active.md

@@ -1,16 +0,0 @@
-<demo>
-
-### Active
-
-Set `active={true}` to activate the Shimmer effect.
-
-```jsx live
-<>
-  <Skeleton active style={{ width: 300 }}/>
-  <Skeleton active/>
-  <Skeleton active/>
-  <Skeleton active/>
-</>
-```
-
-</demo>

package/components/skeleton/demo/basic.md

@@ -1,16 +0,0 @@
-<demo>
-
-### Basic
-
-Simplest Skeleton usage.
-
-```jsx live
-<>
-  <Skeleton style={{ width: 300 }}/>
-  <Skeleton />
-  <Skeleton />
-  <Skeleton />
-</>
-```
-
-</demo>

package/components/skeleton/demo/combination.md

@@ -1,30 +0,0 @@
-<demo>
-
-### Combination
-
-A complex example.
-
-> Consider using `<ConfigProvider/>` to set `active` prop in once.
-
-```jsx live
-<ConfigProvider shimmer>
-  <Row>
-    <Col span={2}>
-      <Skeleton rounded style={{ width: 50, height: 50}}/>
-    </Col>
-    <Col span={22}>
-      <div>
-        <Skeleton style={{ width: 300 }}/>
-      </div>
-      <div>
-        <Skeleton style={{ width: 300 }}/>
-      </div>
-    </Col>
-  </Row>
-  <Skeleton />
-  <Skeleton />
-  <Skeleton />
-</ConfigProvider>
-```
-
-</demo>

package/components/skeleton/index.md

@@ -1,32 +0,0 @@
-import Basic from './demo/basic.md'
-import Active from './demo/active.md'
-import Combination from './demo/combination.md'
-
-# Skeleton
-
-Provide a placeholder while the content is loading.
-
-## Scenario
-
-- When a resource needs long time to load.
-- When the component contains lots of information, such as List or Card.
-- Only works when loading data for the first time.
-
-## Usage
-
-```jsx
-import { Skeleton } from 'tiny-ui';
-```
-
-## Examples
-
-<Basic/>
-<Active/>
-<Combination/>
-
-## API
-
-| Property          | Description                                       | Type                          | Default   |
-| ----------------- | ------------------------------------------------- | ----------------------------- | --------- |
-| active            | turn on Shimmer effect.                           | boolean                       | false     |
-| rounded           | display a circle skeleton                         | boolean                       | false     |

package/components/skeleton/index.tsx

@@ -1,34 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { SkeletonProps } from './types';
-
-const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-  (props: SkeletonProps, ref): JSX.Element => {
-    const {
-      active = false,
-      rounded = false,
-      className,
-      children,
-      prefixCls: customisedCls,
-      ...otherProps
-    } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('skeleton', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className, {
-      [`${prefixCls}_active`]: configContext.shimmer || active,
-      [`${prefixCls}_rounded`]: rounded,
-    });
-
-    return (
-      <div ref={ref} {...otherProps} className={cls}>
-        {children}
-      </div>
-    );
-  }
-);
-
-Skeleton.displayName = 'Skeleton';
-
-export default Skeleton;

package/components/skeleton/style/_index.scss

@@ -1,42 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-skeleton {
-  display: inline-block;
-  width: 100%;
-  height: 1em;
-  position: relative;
-  overflow: hidden;
-  background-color: #f2f2f2;
-
-  & + & {
-    margin-top: 10px;
-  }
-
-  &:after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(to right, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
-    background-size: 200% 100%;
-    animation: ty-shimmer 1.5s ease infinite;
-  }
-
-  &_rounded {
-    border-radius: 50%;
-  }
-
-  &_active {
-    &:after {
-      content: '';
-    }
-  }
-}
-
-@keyframes ty-shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}

package/components/skeleton/types.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface SkeletonProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['div']> {
-  active?: boolean;
-  rounded?: boolean;
-  children?: React.ReactNode;
-}

package/components/slider/demo/basic.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Basic
-
-A basic example.
-
-```jsx live
-<Slider defaultValue={50}/>
-```
-
-</demo>

package/components/slider/demo/customised-tooltip.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Customise tooltip
-
-Use `tipFormatter` to format content of `Tooltip`.
-
-```jsx live
-<Slider defaultValue={50} tipFormatter={(val) => `${val}%`}/>
-```
-
-</demo>

package/components/slider/demo/disabled.md

@@ -1,14 +0,0 @@
-<demo>
-
-### Disabled Slider
-
-Disabled Sliders.
-
-```jsx live
-<>
-  <Slider disabled defaultValue={50}/>
-  <Slider disabled defaultValue={[20, 45]}/>
-</>
-```
-
-</demo>

package/components/slider/demo/dots.md

@@ -1,15 +0,0 @@
-<demo>
-
-### Dots
-
-Display dots on the slider bar.
-
-```jsx live
-<>
-  <Slider dots step={10} defaultValue={30}/>
-  <Slider dots min={0} max={2} step={0.5} defaultValue={0.5}/>
-  <Slider dots step={10} defaultValue={[20, 80]}/>
-</>
-```
-
-</demo>

package/components/slider/demo/dual.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Dual Slider
-
-Pass a number array to the value to display a dual slider.
-
-```jsx live
-<Slider defaultValue={[30, 70]}/>
-```
-
-</demo>

package/components/slider/demo/marker.md

@@ -1,42 +0,0 @@
-<demo>
-
-### Marker
-
-Display marker on the slider bar.
-
-```jsx live
-() => {
-  const marks = {
-    '-10': {
-      style: { color: '#1890ff' },
-      label: <strong>-10°C</strong>,
-    },
-    0: '0°C',
-    28: '28°C',
-    37: '37°C',
-    100: {
-      style: { color: '#f30' },
-      label: <strong>100°C</strong>,
-    },
-  };
-
-  const marks1 = {
-    0: '0°C',
-    24: '24°C',
-    37: '37°C',
-    100: {
-      style: { color: '#f30' },
-      label: <strong>100°C</strong>,
-    },
-  };
-
-  return (
-    <>
-      <Slider dots marks={marks} step={10} defaultValue={0} min={-10} max={100}/>
-      <Slider marks={marks1} defaultValue={37}/>
-    </>
-  )
-}
-```
-
-</demo>

package/components/slider/demo/tooltip-visible.md

@@ -1,20 +0,0 @@
-<demo>
-
-### Control visible of ToolTip
-
-When `tooltipVisible` is true, `ToolTip` will always show even if dragging or hovering.
-
-```jsx live
-() => {
-    const [show, setShow] = React.useState(true);
-
-    return (
-      <>
-        <Slider tooltipVisible={show} defaultValue={50}/>
-        <span>Tooltip visible:</span> <Switch checked={show} onChange={(checked) => setShow(checked)}/>
-      </>
-    );
-}
-```
-
-</demo>