tiny-ui 0.0.94 → 1.0.0

package/components/tag/types.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface CheckableTagProps extends BaseProps {
-  defaultChecked?: boolean;
-  checked?: boolean;
-  onChange?: (checked: boolean, e: React.MouseEvent) => void;
-  children?: React.ReactNode;
-}
-
-export const PresetColors = [
-  'magenta',
-  'red',
-  'volcano',
-  'orange',
-  'gold',
-  'lime',
-  'green',
-  'cyan',
-  'blue',
-  'geekblue',
-  'purple',
-];
-
-export interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  color?: string;
-  closable?: boolean;
-  onClose?: React.MouseEventHandler;
-  onClick?: React.MouseEventHandler;
-  defaultVisible?: boolean;
-  visible?: boolean;
-  children?: React.ReactNode;
-}

package/components/textarea/demo/basic.md

@@ -1,11 +0,0 @@
-<demo>
-
-### Basic
-
-A simple textarea.
-
-```jsx live
-<Textarea rows={4} placeholder="Leave something here..."/>
-```
-
-</demo>

package/components/textarea/demo/count.md

@@ -1,15 +0,0 @@
-<demo>
-
-### Limit & count
-
-Use `limit` to limit the word amount. Also you can use `counter` to customise limit node.
-
-```jsx live
-<Textarea
-  rows={4}
-  placeholder="This textarea has the charater limit..."
-  limit={50}
-/>
-```
-
-</demo>

package/components/textarea/index.md

@@ -1,42 +0,0 @@
-import Basic from './demo/basic.md'
-import Count from './demo/count.md'
-
-# Textarea
-
-For multi-line input.
-
-## Scenario
-
-Comments, etc.
-
-## Usage
-
-```jsx
-import { Textarea } from 'tiny-ui';
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-  </column>
-  <column>
-    <Count/>
-  </column>
-</layout>
-
-## API
-
-| Property     | Description                      | Type                                         | Default |
-| ------------ | -------------------------------- | -------------------------------------------- | ------- |
-| defaultValue | default value                    | string                                       |         |
-| value        | value                            | string                                       |         |
-| onChange     | textarea onChange callback       | function: (value, event) => void             |         |
-| rows         | rows                             | number                                       |         |
-| limit        | limit the number of character    | number                                       | false   |
-| counter      | customise the count node         | function: (count: number) => React.ReactNode |         |
-| disabled     | disabled the component           | boolean                                      |         |
-| style	       | style object of container object |                                              |         |
-| className    | className of container           | string                                       |         |
-

package/components/textarea/index.tsx

@@ -1,70 +0,0 @@
-import React, { useContext, useState } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { TextareaProps } from './types';
-
-const Textarea = (props: TextareaProps): JSX.Element => {
-  const {
-    disabled = false,
-    prefixCls: customisedCls,
-    limit,
-    counter,
-    defaultValue,
-    value,
-    rows,
-    onChange,
-    className,
-    style,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('textarea', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_disabled`]: disabled,
-  });
-  const [count, setCount] = useState(0);
-
-  const textareaOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setCount(e.currentTarget.value.length);
-    onChange && onChange(e.currentTarget.value, e);
-  };
-
-  if (limit || counter) {
-    return (
-      <span className={`${prefixCls}-container`}>
-        <textarea
-          {...otherProps}
-          maxLength={limit}
-          rows={rows}
-          value={value}
-          defaultValue={defaultValue}
-          disabled={disabled}
-          className={cls}
-          style={style}
-          onChange={textareaOnChange}
-        />
-        <span className={`${prefixCls}__counter`}>
-          {counter && typeof counter === 'function' ? counter(count) : `${count}/${limit}`}
-        </span>
-      </span>
-    );
-  } else {
-    return (
-      <textarea
-        {...props}
-        rows={rows}
-        value={value}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        className={cls}
-        style={style}
-        onChange={textareaOnChange}
-      />
-    );
-  }
-};
-
-Textarea.displayName = 'Textarea';
-
-export default Textarea;

package/components/textarea/style/_index.scss

@@ -1,28 +0,0 @@
-@import '../../style/variables';
-@import '../../input/style/mixin';
-
-.#{$prefix}-textarea {
-  @include input-default();
-  padding: $textarea-padding;
-  overflow: hidden;
-
-  &_disabled {
-    @include input-default-disabled();
-  }
-
-  &-container {
-    position: relative;
-
-    .#{$prefix}-textarea {
-      padding-bottom: 20px;
-
-      &__counter {
-        position: absolute;
-        bottom: 6px;
-        right: 6px;
-        font-size: 14px;
-        color: #666;
-      }
-    }
-  }
-}

package/components/textarea/style/index.tsx

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

package/components/textarea/types.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface TextareaProps extends BaseProps {
-  rows?: number;
-  limit?: number;
-  counter?: (count?: number) => React.ReactNode;
-  defaultValue?: string;
-  value?: string;
-  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  disabled?: boolean;
-}

package/components/time-picker/index.tsx

@@ -1,3 +0,0 @@
-import TimePicker from './time-picker';
-
-export default TimePicker;

package/components/time-picker/style/_index.scss

@@ -1,46 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-time-picker {
-  display: inline-block;
-  font-size: $font-size-base;
-  font-family: $font-family;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-  &__panel {
-    display: inline-block;
-    max-height: 210px;
-    overflow-y: auto;
-    color: rgba(0, 0, 0, 0.65);
-    border-left: 1px solid #e8e8e8;
-
-    &:first-child {
-      border-left: 0;
-    }
-  }
-
-  &__ul {
-    box-sizing: border-box;
-    list-style-type: none;
-    padding: 0 0 180px;
-    margin: 0;
-  }
-
-  &__li {
-    cursor: pointer;
-    box-sizing: border-box;
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    user-select: none;
-    padding: 0 15px 0 10px;
-
-    &:hover {
-      background-color: lighten($primary-color, 40%);
-    }
-
-    &_selected {
-      font-weight: bold;
-      background: #f5f5f5;
-    }
-  }
-}

package/components/time-picker/time-panel.tsx

@@ -1,66 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import classNames from 'classnames';
-
-export interface TimePanelProps {
-  value: number;
-  count: number;
-  onChange: (num: number) => void;
-  prefixCls?: string;
-}
-
-const TimePanel = (props: TimePanelProps): React.ReactElement => {
-  const { prefixCls = 'ty-time-picker', value, count, onChange } = props;
-  const [selectedIdx, setSelectedIdx] = useState(-1);
-  const panelRef = useRef<HTMLDivElement | null>(null);
-  const ulRef = useRef<HTMLUListElement | null>(null);
-
-  const scrollToTop = (idx: number, elHeight = 30) => {
-    setSelectedIdx(idx);
-    panelRef.current &&
-      (panelRef.current as HTMLDivElement).scrollTo({
-        top: idx * elHeight,
-        behavior: 'smooth',
-      });
-  };
-
-  const ulOnClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.nodeName === 'LI') {
-      const idx: string | undefined = target.dataset.idx;
-      const elHeight = target.clientHeight;
-      if (idx) {
-        scrollToTop(+idx, elHeight);
-        onChange && onChange(+idx);
-      }
-    }
-  };
-
-  useEffect(() => {
-    scrollToTop(value);
-    ulRef.current && (ulRef.current as HTMLUListElement).addEventListener('click', ulOnClick);
-
-    return () => {
-      ulRef.current && (ulRef.current as HTMLUListElement).removeEventListener('click', ulOnClick);
-    };
-  }, []);
-
-  return (
-    <div className={`${prefixCls}__panel`} ref={panelRef}>
-      <ul className={`${prefixCls}__ul`} ref={ulRef}>
-        {[...Array(count).fill(0)].map((_, idx) => {
-          const cls = classNames(`${prefixCls}__li`, {
-            [`${prefixCls}__li_selected`]: idx === selectedIdx,
-          });
-
-          return (
-            <li key={idx} className={cls} data-idx={idx}>
-              {idx.toString().padStart(2, '0')}
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-export default TimePanel;

package/components/time-picker/time-picker.tsx

@@ -1,50 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import TimePanel from './time-panel';
-import { BaseProps } from '../_utils/props';
-
-export interface TimePickerProps extends BaseProps {
-  defaultValue?: Date;
-  value?: Date;
-  onChange?: (date: Date) => void;
-  children?: React.ReactNode;
-}
-
-const TimePicker = (props: TimePickerProps): React.ReactElement => {
-  const {
-    prefixCls = 'ty-time-picker',
-    defaultValue = new Date(),
-    onChange,
-    className,
-    style,
-  } = props;
-  const cls = classNames(prefixCls, className);
-  const [date, setDate] = useState(props.value ? props.value : defaultValue);
-
-  const updateTime = (type: string, num: number) => {
-    if (type === 'h') {
-      date.setHours(num);
-    } else if (type === 'm') {
-      date.setMinutes(num);
-    } else if (type === 's') {
-      date.setSeconds(num);
-    }
-
-    setDate(date);
-    !props.value && onChange && onChange(date);
-  };
-
-  useEffect(() => {
-    props.value && setDate(props.value);
-  }, [props.value]);
-
-  return (
-    <div className={cls} style={style}>
-      <TimePanel value={date.getHours()} count={24} onChange={hour => updateTime('h', hour)} />
-      <TimePanel value={date.getMinutes()} count={60} onChange={min => updateTime('m', min)} />
-      <TimePanel value={date.getSeconds()} count={60} onChange={sec => updateTime('s', sec)} />
-    </div>
-  );
-};
-
-export default TimePicker;

package/components/timeline/demo/basic.md

@@ -1,16 +0,0 @@
-<demo>
-
-### Basic
-
-Basic timeline.
-
-```jsx live
-<Timeline>
-  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-  <Timeline.Item>Solve initial network problems 2015-09-04</Timeline.Item>
-  <Timeline.Item>Technical testing 2015-09-12</Timeline.Item>
-  <Timeline.Item>Network problems being solved 2015-09-20</Timeline.Item>
-</Timeline>
-```
-
-</demo>

package/components/timeline/demo/centered.md

@@ -1,16 +0,0 @@
-<demo>
-
-### Centered timeline
-
-Center the timeline bar.
-
-```jsx live
-<Timeline position="center">
-  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-  <Timeline.Item>Solve initial network problems 2015-09-04</Timeline.Item>
-  <Timeline.Item>Technical testing 2015-09-12</Timeline.Item>
-  <Timeline.Item>Network problems being solved 2015-09-20</Timeline.Item>
-</Timeline>
-```
-
-</demo>

package/components/timeline/demo/color.md

@@ -1,16 +0,0 @@
-<demo>
-
-### Color
-
-Set the color of dots via `dotStyle`.
-
-```jsx live
-<Timeline>
-  <Timeline.Item dotStyle={{borderColor: '#f30'}}>Create a services site 2015-09-01</Timeline.Item>
-  <Timeline.Item dotStyle={{borderColor: '#52c41a'}}>Solve initial network problems 2015-09-04</Timeline.Item>
-  <Timeline.Item dotStyle={{borderColor: '#1890ff'}}>Technical testing 2015-09-12</Timeline.Item>
-  <Timeline.Item>Network problems being solved 2015-09-20</Timeline.Item>
-</Timeline>
-```
-
-</demo>

package/components/timeline/demo/customised.md

@@ -1,18 +0,0 @@
-<demo>
-
-### Customise Dot
-
-Set a node as an icon or other custom element.
-
-```jsx live
-<Timeline>
-  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-  <Timeline.Item dot={<Icon name="attention" color="#f30" size={24}/>}>
-      Solve initial network problems 2015-09-04
-  </Timeline.Item>
-  <Timeline.Item dot="QA">Technical testing 2015-09-12</Timeline.Item>
-  <Timeline.Item>Network problems being solved 2015-09-20</Timeline.Item>
-</Timeline>
-```
-
-</demo>

package/components/timeline/index.md

@@ -1,54 +0,0 @@
-import Basic from './demo/basic.md'
-import Centered from './demo/centered.md'
-import Color from './demo/color.md'
-import Customised from './demo/customised.md'
-
-# Timeline
-
-Display a timeline.
-
-## Scenario
-
-- When a series of information needs to be ordered by time (ascending or descending).
-
-- When you need a timeline to make a visual connection.
-
-## Usage
-
-```jsx
-import { Timeline } from 'tiny-ui';
-
-const { Item } = Timeline;
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-    <Customised/>
-  </column>
-  <column>
-    <Color/>
-    <Centered/>
-  </column>
-</layout>
-
-## API
-
-### Timeline
-
-| Property  | Description                      | Type                           | Default      |
-| --------- | -------------------------------- | ------------------------------ | ------------ |
-| position  | position of timeline bar         | enum: `left` &#124; `center`   | `left`       |
-| style	    | style object of container	object |                                | -            |
-| className	| className of container           | string                         | -            |
-
-### Timeline.Item
-
-| Property  | Description                      | Type                           | Default      |
-| --------- | -------------------------------- | ------------------------------ | ------------ |
-| dot       | customize timeline dot           | `string` &#124; `ReactNode`    | -            |
-| dotStyle	| style object of dot object       |                                | -            |
-| style	    | style object of container	object |                                | -            |
-| className	| className of container           | string                         | -            |

package/components/timeline/index.tsx

@@ -1,11 +0,0 @@
-import Timeline from './timeline';
-import TimelineItem from './timeline-item';
-
-type ITimeline = typeof Timeline & {
-  Item: typeof TimelineItem;
-};
-
-const DefaultTimeline = Timeline as ITimeline;
-DefaultTimeline.Item = TimelineItem;
-
-export default DefaultTimeline;

package/components/timeline/style/_index.scss

@@ -1,90 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-timeline {
-  box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: $font-size-base;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.#{$prefix}-timeline-item {
-  position: relative;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0 0 20px;
-  font-size: 14px;
-  list-style: none;
-
-  &:last-child {
-    .#{$prefix}-timeline-item__head {
-      &:before {
-        display: none;
-      }
-    }
-  }
-
-  &__head {
-    width: 16px;
-    background-color: #fff;
-    position: absolute;
-    color: $primary-color;
-    height: 100%;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      height: 100%;
-      border-left: 2px solid #e8e8e8;
-    }
-  }
-
-  &__dot-container {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
-  }
-
-  &__dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border: 2px solid $primary-color;
-    border-radius: 100px;
-  }
-
-  &__content {
-    position: relative;
-    top: 0;
-    padding-left: 25px;
-  }
-
-  &_left,
-  &_right {
-    .#{$prefix}-timeline-item__head {
-      left: 50%;
-    }
-  }
-
-  &_left {
-    .#{$prefix}-timeline-item__content {
-      left: 50%;
-      width: 50%;
-    }
-  }
-
-  &_right {
-    .#{$prefix}-timeline-item__content {
-      width: 50%;
-      text-align: right;
-      padding-left: 0;
-      padding-right: 9px;
-    }
-  }
-}

package/components/timeline/timeline-item.tsx

@@ -1,27 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { TimelineItemProps } from './types';
-
-const TimelineItem = (props: TimelineItemProps): React.ReactElement => {
-  const { dot, dotStyle, className, children, prefixCls: customisedCls, ...otherProps } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('timeline-item', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-
-  return (
-    <li {...otherProps} className={cls}>
-      <div className={`${prefixCls}__head`}>
-        <div className={`${prefixCls}__dot-container`}>
-          {dot || <span className={`${prefixCls}__dot`} style={dotStyle} />}
-        </div>
-      </div>
-      <div className={`${prefixCls}__content`}>{children}</div>
-    </li>
-  );
-};
-
-TimelineItem.displayName = 'TimelineItem';
-
-export default TimelineItem;

package/components/timeline/timeline.tsx

@@ -1,39 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { TimelineItemProps, TimelineProps } from './types';
-
-const Timeline = (props: TimelineProps): React.ReactElement => {
-  const { position = 'left', prefixCls: customisedCls, className, children, ...otherProps } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('timeline', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_${position}`]: position,
-  });
-
-  return (
-    <ul {...otherProps} className={cls}>
-      {React.Children.map(children, (child, idx) => {
-        const childElement = child as React.FunctionComponentElement<TimelineItemProps>;
-        if (childElement.type.displayName === 'TimelineItem') {
-          const childProps: Partial<TimelineItemProps> = {
-            className:
-              position === 'center'
-                ? idx % 2 === 0
-                  ? `${prefixCls}-item_left`
-                  : `${prefixCls}-item_right`
-                : childElement.props.className,
-          };
-          return React.cloneElement(childElement, childProps);
-        } else {
-          return null;
-        }
-      })}
-    </ul>
-  );
-};
-
-Timeline.displayName = 'Timeline';
-
-export default Timeline;