tiny-ui 0.0.95 → 1.0.0

package/components/icon/demo/icons.tsx

@@ -1,283 +0,0 @@
-import React from 'react';
-import Icon from '../index';
-
-const list = [
-  'accessible',
-  'add-file',
-  'add-list',
-  'add-team',
-  'add-user',
-  'address-book',
-  'android',
-  'apple',
-  'approval',
-  'archive',
-  'arrow-down',
-  'arrow-down-circle',
-  'arrow-left',
-  'arrow-left-circle',
-  'arrow-right',
-  'arrow-right-circle',
-  'arrow-up',
-  'arrow-up-circle',
-  'arrow-up-left',
-  'arrow-up-left-circle',
-  'arrow-up-right',
-  'arrow-up-right-circle',
-  'arrow-down-left',
-  'arrow-down-left-circle',
-  'arrow-down-right',
-  'arrow-down-right-circle',
-  'attention',
-  'audio',
-  'audio-file',
-  'audio-fill',
-  'audio-mute',
-  'back',
-  'bearish',
-  'behance',
-  'bookmark',
-  'branch',
-  'briefcase',
-  'broadcast',
-  'brush',
-  'bullish',
-  'business',
-  'business-card',
-  'calculator',
-  'calendar',
-  'callback',
-  'cancel-file',
-  'candle-sticks',
-  'check-circle',
-  'check-circle1',
-  'check-file',
-  'check-fill',
-  'check-square',
-  'checkmark',
-  'chrome',
-  'circle-share',
-  'close',
-  'close-circle',
-  'close-fill',
-  'cloud-download',
-  'cloud-upload',
-  'code',
-  'collect',
-  'colorlens',
-  'comment',
-  'comment-square',
-  'conference',
-  'copyright',
-  'create-archive',
-  'credit-card',
-  'css',
-  'currency-exchange',
-  'cursor',
-  'customer-service',
-  'customer-support',
-  'del-team',
-  'del-user',
-  'delete-archive',
-  'delete-file',
-  'delivered',
-  'delivery',
-  'department',
-  'desktop',
-  'diploma',
-  'dislike',
-  'doc-file',
-  'document',
-  'donate',
-  'down',
-  'down-fill',
-  'download',
-  'dropbox',
-  'edit-file',
-  'education',
-  'expired',
-  'external',
-  'eye',
-  'eye-close',
-  'face',
-  'facebook',
-  'faq',
-  'favourite-file',
-  'feedback',
-  'file',
-  'file-zip',
-  'fire',
-  'fire-fill',
-  'forbid',
-  'fork',
-  'frame',
-  'gif',
-  'gift',
-  'github',
-  'google',
-  'hand-cursor',
-  'heart',
-  'heart-fill',
-  'hierarchy',
-  'home',
-  'html',
-  'id-card',
-  'idea',
-  'image-file',
-  'info',
-  'info-fill',
-  'inspection',
-  'instagram',
-  'internal',
-  'key',
-  'laptop',
-  'left',
-  'left-fill',
-  'library',
-  'link',
-  'linkedin',
-  'lock',
-  'loader',
-  'loader-circle',
-  'loader-quarter',
-  'loader-3quarter',
-  'login',
-  'maintain',
-  'manager',
-  'medal',
-  'medium',
-  'minus',
-  'minus-circle',
-  'minus-fill',
-  'money-token',
-  'money-transfer',
-  'multiple-inputs',
-  'music',
-  'news',
-  'no-idea',
-  'note',
-  'online-support',
-  'open-archive',
-  'opened-folder',
-  'org-unit',
-  'organization',
-  'overtime',
-  'package',
-  'paid',
-  'parking',
-  'picture',
-  'pie-chart',
-  'play-fill',
-  'plus',
-  'plus-circle',
-  'plus-fill',
-  'priority-high',
-  'priority-medium',
-  'priority-low',
-  'privacy',
-  'process',
-  'projector',
-  'psd',
-  'puzzle',
-  'qrcode',
-  'question-fill',
-  'questions',
-  'rating',
-  'reading',
-  'redo',
-  'registration-circle',
-  'resize-all',
-  'resize-diagonal',
-  'resize-hr',
-  'resize-ver',
-  'right',
-  'right-fill',
-  'ruler',
-  'scan',
-  'search',
-  'search-reverse',
-  'setting',
-  'settings',
-  'share',
-  'shop',
-  'signature',
-  'skin',
-  'skype',
-  'slack',
-  'speaker',
-  'split-horizontal',
-  'split-vertical',
-  'star',
-  'star-fill',
-  'statistics',
-  'structure',
-  'support',
-  'survey',
-  'switch',
-  'switch-user',
-  'sync',
-  'tags',
-  'team',
-  'todo-list',
-  'trademark',
-  'trash',
-  'twitter',
-  'undo',
-  'unlock',
-  'up',
-  'up-fill',
-  'upload',
-  'user',
-  'video-file',
-  'view-file',
-  'vip',
-  'voice-person',
-  'wallet',
-  'warn-fill',
-  'warning',
-  'wechat',
-  'weibo',
-  'wifi',
-  'word',
-  'work',
-  'xls',
-  'youtube',
-  'zoomin',
-  'zoomout',
-];
-
-const IconList = (): JSX.Element => {
-  return (
-    <ul
-      style={{
-        listStyle: 'none',
-        display: 'flex',
-        flexWrap: 'wrap',
-        padding: 0,
-        margin: 0,
-        borderTop: '1px solid #eaeefb',
-        borderLeft: '1px solid #eaeefb',
-      }}>
-      {list.map((name) => (
-        <li
-          key={name}
-          style={{
-            width: '16.66%',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#454545',
-            borderRight: '1px solid #eaeefb',
-            borderBottom: '1px solid #eaeefb',
-            padding: '20px 0',
-          }}>
-          <Icon name={name} size={30} />
-          <span style={{ marginTop: 8 }}>{name}</span>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export default IconList;

package/components/icon/demo/spin.md

@@ -1,17 +0,0 @@
-<demo>
-
-### Spin
-
-Rotate the icon with animation.
-
-```jsx live
-<>
-  <Icon spin name="loader" size={30}/>
-  <Icon spin name="loader-quarter" size={30}/>
-  <Icon spin name="loader-3quarter" size={30}/>
-  <Icon spin name="loader-circle" size={30}/>
-  <Icon spin name="sync" size={30}/>
-</>
-```
-
-</demo>

package/components/icon/index.md

@@ -1,38 +0,0 @@
-import Basic from './demo/basic.md'
-import Spin from './demo/spin.md'
-import IconList from './demo/icons.tsx'
-
-# Icon
-
-Element provides a set of common icons.
-
-## Usage
-
-```jsx
-import { Icon } from 'tiny-ui';
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic />
-  </column>
-  <column>
-    <Spin />
-  </column>
-</layout>
-
-
-## List of icons
-
-<IconList />
-
-## API
-
-| Property  | Description                   | Type          | Default       |
-| --------- | ----------------------------- | ------------- | ------------- |
-| name      | icon name                     | string        | -             |
-| size      | icon size                     | number        | -             |
-| color     | icon color                    | string        | -             |
-| spin      | rotate icon with animation.   | boolean       | false         |

package/components/icon/index.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { IconProps } from './types';
-
-const Icon = (props: IconProps): JSX.Element => {
-  const {
-    name,
-    color,
-    size,
-    style,
-    spin,
-    className,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('icon', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, `ty--${name}`, {
-    [`${prefixCls}_spin`]: spin,
-  });
-  return <i className={cls} style={{ color, fontSize: size, ...style }} {...otherProps} />;
-};
-
-Icon.displayName = 'Icon';
-
-export default Icon;

package/components/icon/style/_index.scss

@@ -1,16 +0,0 @@
-@import '../../style/variables';
-@import '../../style/font';
-
-.#{$prefix}-icon {
-  font-family: 'tiny' !important;
-  line-height: 1;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &_spin:before {
-    display: inline-block;
-    animation: ty-rotate 1s linear infinite;
-  }
-}

package/components/icon/types.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export interface IconProps extends React.PropsWithoutRef<JSX.IntrinsicElements['i']> {
-  name: string;
-  color?: string;
-  size?: string | number;
-  style?: React.CSSProperties;
-  spin?: boolean;
-  className?: string;
-  prefixCls?: string;
-}

package/components/image/demo/basic.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Basic
-
-A basic usage displaying an image.
-
-```jsx live
-<Image width="100%" src="https://cdn.pixabay.com/photo/2019/12/30/20/35/snow-4730565__340.jpg"/>
-```
-
-</demo>

package/components/image/demo/fallback.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Fallback
-
-Providing a fallback image for when there is an error loading the src of the image.
-
-```jsx live
-<Image src="" fallback="https://via.placeholder.com/150"/>
-```
-
-</demo>

package/components/image/demo/lazy.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Lazy Load
-
-Set `lazy` and `placehoulder` properties to implement the lazy load. 
-
-```jsx live
-<div style={{ height: 250, overflowY: 'scroll' }}>
-  <p>Scroll up to make images into the view area.</p>
-  <div style={{ height: 350 }}/>
-  <Image lazy round src="https://github.com/wangdicoder/tiny-ui/blob/master/site/public/avatar/avatar3.png?raw=true" placeholder="https://github.com/wangdicoder/tiny-ui/blob/master/site/public/avatar/avatar3_blur.png?raw=true"/>
-  <div style={{ height: 350 }}/>
-  <Image lazy width={300} height={200} src="https://github.com/wangdicoder/tiny-ui/blob/master/site/public/avatar/plants.jpg?raw=true" placeholder="https://github.com/wangdicoder/tiny-ui/blob/master/site/public/avatar/plants_blur.png?raw=true"/>
-  <div style={{ height: 100 }}/>
-</div>
-```
-
-</demo>

package/components/image/demo/round.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Rounded Image
-
-Display a rounded image.
-
-```jsx live
-<Image round src="/avatar/avatar2.png"/>
-```
-
-</demo>

package/components/image/demo/size.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Size
-
-The size of the image can be adjusted using the `width` and `height` prop.
-
-```jsx live
-<Image width={250} height={150} src="https://cdn.pixabay.com/photo/2019/12/21/18/31/discus-fish-4711042__340.jpg"/>
-```
-
-</demo>

package/components/image/index.md

@@ -1,49 +0,0 @@
-import Basic from './demo/basic.md'
-import Size from './demo/size.md'
-import Round from './demo/round.md'
-import Lazy from './demo/lazy.md'
-import Fallback from './demo/fallback.md'
-
-# Image
-
-The Image component is used to display images.
-
-## Scenario
-
-Display an image.
-
-## Usage
-
-```jsx
-import { Image } from 'tiny-ui';
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-    <Size/>
-  </column>
-  <column>
-    <Round/>
-    <Lazy/>
-    <Fallback/>
-  </column>
-</layout>
-
-## API
-
-| Property      | Description                               | Type                  | Default   |
-| ------------- | ----------------------------------------- | --------------------- | --------- |
-| src           | The path to the image source              | string                | -         |
-| alt           | The alt text that describes the image     | string                | -         |
-| placeholder   | Used when lazy loading                    | string                | -         |
-| width         | Image width                               | string &#124; number  | -         |
-| height        | Image height                              | string &#124; number  | -         |
-| round         | Rounded image                             | boolean               | false     |
-| lazy          | Determine the image lazy loads            | boolean               | false     |
-| fallback      | Image placeholder when an error loading   | string                | -         |
-| objectFit     | Image fit mode                            |                       | -         |
-| style	        | Style object of container object          |                       | -         |
-| className	    | ClassName of container                    | string                | -         |

package/components/image/index.tsx

@@ -1,57 +0,0 @@
-import React, { useContext, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { ImageProps } from './types';
-
-const Image = (props: ImageProps): JSX.Element => {
-  const {
-    alt = 'image',
-    objectFit = 'cover',
-    round = false,
-    lazy = false,
-    src,
-    placeholder,
-    fallback,
-    className,
-    style,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('image', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, { [`${prefixCls}_round`]: round });
-  const ref = useRef<HTMLImageElement | null>(null);
-
-  useEffect(() => {
-    if (lazy && 'IntersectionObserver' in window) {
-      const observer = new IntersectionObserver((entries, observer) => {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            const lazyImage = entry.target as HTMLImageElement;
-            lazyImage.src = src || fallback || '';
-            observer.unobserve(lazyImage);
-          }
-        });
-      });
-
-      const imgNode = ref.current;
-      imgNode && observer.observe(imgNode);
-    }
-  }, [fallback, lazy, src]);
-
-  return (
-    <img
-      {...otherProps}
-      ref={ref}
-      className={cls}
-      style={{ ...style, objectFit }}
-      src={lazy ? placeholder : src ? src : fallback}
-      alt={alt}
-    />
-  );
-};
-
-Image.displayName = 'Image';
-
-export default Image;

package/components/image/style/_index.scss

@@ -1,9 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-image {
-  box-sizing: border-box;
-
-  &_round {
-    border-radius: 50%;
-  }
-}

package/components/image/types.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface ImageProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['img']> {
-  src?: string;
-  placeholder?: string;
-  alt?: string;
-  width?: number | string;
-  height?: number | string;
-  round?: boolean;
-  lazy?: boolean;
-  fallback?: string;
-  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-}

package/components/index.ts

@@ -1,76 +0,0 @@
-import 'intersection-observer';
-
-export { default as Alert } from './alert';
-export { default as Anchor } from './anchor';
-export { default as AspectRatio } from './aspect-ratio';
-export { default as Autocomplete } from './autocomplete';
-export { default as Avatar } from './avatar';
-export { default as BackTop } from './back-top';
-export { default as Badge } from './badge';
-export { default as Breadcrumb } from './breadcrumb';
-export { default as Button } from './button';
-export { default as Card } from './card';
-// export { default as Carousel } from './carousel';
-export { default as Checkbox } from './checkbox';
-export { default as ConfigProvider } from './config-provider';
-export { default as CopyToClipboard } from './copy-to-clipboard';
-export { default as Col } from './col';
-export { default as Collapse } from './collapse';
-export { default as Countdown } from './countdown';
-// export { default as DatePicker } from './date-picker';
-export { default as Descriptions } from './descriptions';
-export { default as Divider } from './divider';
-export { default as Dropdown } from './dropdown';
-export { default as Drawer } from './drawer';
-export { default as Empty } from './empty';
-export { default as Flip } from './flip';
-export { default as Form } from './form';
-export { default as Icon } from './icon';
-export { default as Image } from './image';
-export { default as Input } from './input';
-export { default as InputNumber } from './input-number';
-export { default as InputPassword } from './input-password';
-export { default as IntlProvider } from './intl-provider';
-export { default as Keyboard } from './keyboard';
-export { default as Layout } from './layout';
-export { default as Link } from './link';
-export { default as Loader } from './loader';
-export { default as LoadingBar } from './loading-bar';
-export { default as Menu } from './menu';
-export { default as Message } from './message';
-export { default as NativeSelect } from './native-select';
-export { default as Row } from './row';
-export { default as Modal } from './modal';
-export { default as Notification } from './notification';
-export { default as Overlay } from './overlay';
-export { default as Popover } from './popover';
-export { default as Pagination } from './pagination';
-export { default as PopConfirm } from './pop-confirm';
-export { default as Progress } from './progress';
-export { default as Radio } from './radio';
-export { default as Rate } from './rate';
-export { default as Result } from './result';
-export { default as ScrollIndicator } from './scroll-indicator';
-export { default as Select } from './select';
-export { default as Skeleton } from './skeleton';
-export { default as Slider } from './slider';
-export { default as Split } from './split';
-export { default as SplitButton } from './split-button';
-export { default as Space } from './space';
-export { default as Steps } from './steps';
-export { default as Sticky } from './sticky';
-export { default as StrengthIndicator } from './strength-indicator';
-export { default as Switch } from './switch';
-// export { default as Tabs } from './tabs';
-export { default as Tag } from './tag';
-export { default as Textarea } from './textarea';
-export { default as Timeline } from './timeline';
-// export { default as TimePicker } from './time-picker';
-export { default as Tooltip } from './tooltip';
-export { default as Transfer } from './transfer';
-export { default as Transition } from './transition';
-export { default as Tree } from './tree';
-export { default as Typography } from './typography';
-export { default as Upload } from './upload';
-
-export { withLocale } from './intl-provider/with-locale';