tiny-ui 0.0.95 → 1.0.1

package/components/date-picker/picker-day.tsx

@@ -1,82 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import { WEEKS, getMonthDaysArray, isSameDate, isToday } from './utils';
-
-export type PickerDayProps = {
-  date: Date;
-  onChange: (date: Date) => void;
-  panelDate: Date;
-  panelOnChange: (panelDate: Date) => void;
-  prefixCls?: string;
-};
-
-const PickerDay = (props: PickerDayProps) => {
-  const { prefixCls = 'ty-date-picker-day', date, onChange, panelDate, panelOnChange } = props;
-  const tbodyEl = useRef<HTMLTableSectionElement | null>(null);
-  const panelDays = getMonthDaysArray(panelDate);
-
-  // Delegate click event
-  const _tbodyOnClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.nodeName === 'DIV') {
-      const dateIdx = parseInt(target.dataset.date!, 10);
-      onChange(panelDays[dateIdx].date);
-      // If the selected date is not in this month, update panel
-      !panelDays[dateIdx].isThisMonth && panelOnChange(panelDays[dateIdx].date);
-    }
-  };
-
-  useEffect(() => {
-    tbodyEl.current &&
-      (tbodyEl.current as HTMLTableSectionElement).addEventListener('click', _tbodyOnClick);
-
-    return () => {
-      tbodyEl.current &&
-        (tbodyEl.current as HTMLTableSectionElement).removeEventListener('click', _tbodyOnClick);
-    };
-  });
-
-  const _renderDays = () => {
-    const trs = [];
-    let idx = 0;
-    for (let i = 0; i < panelDays.length / 7; i++) {
-      const tds = [];
-      for (let j = 0; j < 7; j++, idx++) {
-        const cls = classNames(`${prefixCls}__day-cell`, {
-          [`${prefixCls}__day-cell_active`]: panelDays[idx].isThisMonth,
-          [`${prefixCls}__day-cell_today`]: isToday(panelDays[idx].date),
-          [`${prefixCls}__day-cell_selected`]: isSameDate(date, panelDays[idx].date),
-        });
-        tds.push(
-          <td key={`${idx}_${panelDays[idx].label}`} className={`${prefixCls}__data-item`}>
-            <div className={cls} data-date={idx}>
-              {panelDays[idx].label}
-            </div>
-          </td>
-        );
-      }
-      trs.push(<tr key={`${idx}${i}`}>{tds}</tr>);
-    }
-
-    return trs;
-  };
-
-  return (
-    <div className={prefixCls}>
-      <table className={`${prefixCls}__table`}>
-        <thead>
-          <tr className={`${prefixCls}__head`}>
-            {WEEKS.map(week => (
-              <th key={week} className={`${prefixCls}__head-item`}>
-                <div className={`${prefixCls}__week-cell`}>{week}</div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody ref={tbodyEl}>{_renderDays()}</tbody>
-      </table>
-    </div>
-  );
-};
-
-export default PickerDay;

package/components/date-picker/picker-header.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import {
-  MONTHS,
-  getPrevMonthDate,
-  getNextMonthDate,
-  getPrevYearDate,
-  getNextYearDate,
-} from './utils';
-
-export type PickerHeaderProps = {
-  date: Date;
-  onChange: (date: Date) => void;
-  prefixCls?: string;
-};
-
-const PickerHeader = (props: PickerHeaderProps) => {
-  const { date, onChange, prefixCls } = props;
-
-  return (
-    <div className={prefixCls}>
-      <div className={`${prefixCls}__prev-year`} onClick={() => onChange(getPrevYearDate(date))}>
-        «
-      </div>
-      <div className={`${prefixCls}__prev-month`} onClick={() => onChange(getPrevMonthDate(date))}>
-        ‹
-      </div>
-      <div className={`${prefixCls}__caption`}>
-        <label className={`${prefixCls}__month`}>{MONTHS[date.getMonth()]}</label>
-        <label className={`${prefixCls}__year`}>{date.getFullYear()}</label>
-      </div>
-      <div className={`${prefixCls}__next-month`} onClick={() => onChange(getNextMonthDate(date))}>
-        ›
-      </div>
-      <div className={`${prefixCls}__next-year`} onClick={() => onChange(getNextYearDate(date))}>
-        »
-      </div>
-    </div>
-  );
-};
-
-PickerHeader.defaultProps = {
-  prefixCls: 'ty-date-picker-header',
-};
-
-export default PickerHeader;

package/components/date-picker/picker-month.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const PickerMonth = () => {
-  return <table></table>;
-};
-
-export default PickerMonth;

package/components/date-picker/picker-year.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const PickerYear = () => {
-  return <table></table>;
-};
-
-export default PickerYear;

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

@@ -1,116 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-date-picker {
-  display: inline-block;
-  width: 280px;
-  box-sizing: border-box;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  font-family: $font-family;
-  font-size: $font-size-base;
-}
-
-.#{$prefix}-date-picker-header {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #eee;
-
-  &__caption {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    box-sizing: border-box;
-  }
-
-  &__month,
-  &__year {
-    margin: 0 3px;
-    font-weight: 500;
-  }
-
-  &__prev-month,
-  &__next-month {
-    margin: 0 6px;
-  }
-
-  &__prev-year,
-  &__prev-month,
-  &__next-month,
-  &__next-year {
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 16px;
-  }
-
-  &__prev-year,
-  &__prev-month,
-  &__next-month,
-  &__next-year,
-  &__month,
-  &__year {
-    box-sizing: border-box;
-    cursor: pointer;
-
-    &:hover {
-      color: $primary-color;
-    }
-  }
-}
-
-.#{$prefix}-date-picker-day {
-  padding: 15px 10px;
-
-  &__table {
-    width: 100%;
-  }
-
-  &__head {
-  }
-
-  &__head-item {
-    box-sizing: border-box;
-    font-weight: 400;
-  }
-
-  &__data-item {
-    box-sizing: border-box;
-    text-align: center;
-  }
-
-  &__day-cell,
-  &__week-cell {
-    box-sizing: border-box;
-    user-select: none;
-    margin: 0 auto;
-    line-height: 22px;
-    width: 24px;
-    height: 24px;
-  }
-
-  &__week-cell {
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  &__day-cell {
-    color: rgba(0, 0, 0, 0.25);
-    cursor: pointer;
-    transition: all 300ms;
-    border-radius: 100%;
-    border: 1px solid transparent;
-
-    &_active {
-      color: rgba(0, 0, 0, 0.8);
-    }
-
-    &_today {
-      border-color: $primary-color;
-      color: $primary-color;
-      font-weight: 500;
-    }
-
-    &_selected {
-      background-color: $primary-color;
-      color: #fff;
-    }
-  }
-}

package/components/date-picker/utils.ts

@@ -1,154 +0,0 @@
-export const WEEKS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-export const MONTHS = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec',
-];
-
-const TODAY = new Date();
-export const THIS_YEAR = TODAY.getFullYear();
-export const THIS_MONTH = TODAY.getMonth();
-export const THIS_DAY = TODAY.getDate();
-
-export const isLeapYear = (year: number): boolean => {
-  if (year % 4 === 0 && year % 100 !== 0) {
-    return true;
-  } else if (year % 400 === 0) {
-    return true;
-  }
-  return false;
-};
-
-/**
- * (int) Number days in a month for a given year from 28 - 31
- * @param month
- * @param year
- */
-export const getMonthDays = (year: number = THIS_YEAR, month: number = THIS_MONTH): number => {
-  const day = year && isLeapYear(year) ? 29 : 28;
-  return [31, day, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-};
-
-export const getWeekday = (
-  year: number = THIS_YEAR,
-  month: number = THIS_MONTH,
-  date: number = THIS_DAY
-): number => {
-  return new Date(year, month, date).getDay();
-};
-
-type DayCell = {
-  label: number;
-  date: Date;
-  isThisMonth: boolean;
-};
-
-export const getMonthDaysArray = (date: Date = TODAY): DayCell[] => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const dayArrays: DayCell[] = [];
-  const days = getMonthDays(year, month);
-  const [preYear, preMonth] = getPrevMonthAndYear(year, month);
-  const preDays = getMonthDays(preYear, preMonth);
-  const thisMonthFirstDayInWeek = getWeekday(year, month, 1);
-
-  // last month days
-  for (let i = 0; i < thisMonthFirstDayInWeek; i++) {
-    const day = preDays - thisMonthFirstDayInWeek + i + 1;
-    dayArrays.push({
-      label: day,
-      date: new Date(preYear, preMonth, day),
-      isThisMonth: false,
-    });
-  }
-
-  // this month days
-  for (let i = 1; i <= days; i++) {
-    dayArrays.push({
-      label: i,
-      date: new Date(year, month, i),
-      isThisMonth: true,
-    });
-  }
-
-  // next month days
-  for (let i = 1; i <= 42 - days - thisMonthFirstDayInWeek; i++) {
-    dayArrays.push({
-      label: i,
-      date: new Date(year, month + 1, i),
-      isThisMonth: false,
-    });
-  }
-
-  return dayArrays;
-};
-
-export const isSameDate = (dateA: Date, dateB: Date): boolean => {
-  const dateAYear = dateA.getFullYear();
-  const dateAMonth = dateA.getMonth();
-  const dateADate = dateA.getDate();
-  const dateBYear = dateB.getFullYear();
-  const dateBMonth = dateB.getMonth();
-  const dateBDate = dateB.getDate();
-  return dateAYear === dateBYear && dateAMonth === dateBMonth && dateADate === dateBDate;
-};
-
-export const isToday = (date: Date): boolean => {
-  return isSameDate(new Date(), date);
-};
-
-/**
- * (bool) Checks if a value is a date - this is just a simple check
- * @param date
- */
-export const isDate = (date: Date): boolean => {
-  const isPrototypeDate = Object.prototype.toString.call(date) === '[object Date]';
-  const isValidDate = date && !Number.isNaN(date.valueOf());
-
-  return isPrototypeDate && isValidDate;
-};
-
-export const getPrevMonthDate = (date: Date = TODAY): Date => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const prevMonth = month > 0 ? month - 1 : 11;
-  const prevYear = month > 0 ? year : year - 1;
-
-  return new Date(prevYear, prevMonth, date.getDate());
-};
-
-export const getPrevMonthAndYear = (
-  year: number = THIS_YEAR,
-  month: number = THIS_MONTH
-): [number, number] => {
-  const prevMonth = month > 0 ? month - 1 : 11;
-  const prevYear = month > 0 ? year : year - 1;
-
-  return [prevYear, prevMonth];
-};
-
-export const getNextMonthDate = (date: Date = TODAY): Date => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const nextMonth = month < 11 ? month + 1 : 0;
-  const nextYear = month < 11 ? year : year + 1;
-
-  return new Date(nextYear, nextMonth, date.getDate());
-};
-
-export const getPrevYearDate = (date: Date = TODAY): Date => {
-  return new Date(date.getFullYear() - 1, date.getMonth(), date.getDate());
-};
-
-export const getNextYearDate = (date: Date = TODAY): Date => {
-  return new Date(date.getFullYear() + 1, date.getMonth(), date.getDate());
-};

package/components/descriptions/col.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { DescriptionsItemProps } from './types';
-
-type Props = {
-  index: number;
-  bordered: boolean;
-  colon: boolean;
-  type: 'label' | 'content' | 'item';
-  prefixCls: string;
-  item: React.ReactElement<DescriptionsItemProps>;
-};
-
-const Col = (props: Props): React.ReactElement => {
-  const { item, colon, type, bordered, prefixCls } = props;
-
-  const { label, children, span = 1 } = item.props;
-  switch (type) {
-    case 'item': {
-      const labelCls = classNames(`${prefixCls}__item-label`, {
-        [`${prefixCls}__item_colon`]: colon,
-      });
-      if (bordered) {
-        return (
-          <>
-            <th className={labelCls} colSpan={1}>
-              {label}
-            </th>
-            <td className={`${prefixCls}__item-content`} colSpan={span * 2 - 1}>
-              {children}
-            </td>
-          </>
-        );
-      } else {
-        return (
-          <td className={`${prefixCls}__item`} colSpan={span}>
-            <span className={labelCls}>{label}</span>
-            <span className={`${prefixCls}__item-content`}>{children}</span>
-          </td>
-        );
-      }
-    }
-    case 'label': {
-      const cls = classNames(
-        { [`${prefixCls}__item`]: !bordered, [`${prefixCls}__item_colon`]: colon },
-        `${prefixCls}__item-label`
-      );
-      return (
-        <th className={cls} colSpan={span}>
-          {label}
-        </th>
-      );
-    }
-    case 'content': {
-      const cls = classNames({ [`${prefixCls}__item`]: !bordered }, `${prefixCls}__item-content`);
-      return (
-        <td className={cls} colSpan={span}>
-          {children}
-        </td>
-      );
-    }
-  }
-};
-
-export default Col;

package/components/descriptions/demo/basic.md

@@ -1,17 +0,0 @@
-<demo>
-
-### Basic
-
-A simple usage.
-
-```jsx live
-<Descriptions title="User Info">
-  <Descriptions.Item label="UserName">React</Descriptions.Item>
-  <Descriptions.Item label="Telephone">0200004567</Descriptions.Item>
-  <Descriptions.Item label="Live">Sydney, Australia</Descriptions.Item>
-  <Descriptions.Item label="Remark">Great</Descriptions.Item>
-  <Descriptions.Item label="Address">456P+HW Camperdown, New South Wales</Descriptions.Item>
-</Descriptions>
-```
-
-</demo>

package/components/descriptions/demo/border.md

@@ -1,38 +0,0 @@
-<demo>
-
-### Border
-
-Descriptions with border.
-
-```jsx live
-<Descriptions title="User Info" bordered>
-  <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-  <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-  <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
-  <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
-  <Descriptions.Item label="Usage Time" span={2}>
-    2019-04-24 18:00:00
-  </Descriptions.Item>
-  <Descriptions.Item label="Status" span={3}>
-    <Badge dot processing color="#1890ff"/> Running
-  </Descriptions.Item>
-  <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
-  <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-  <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
-  <Descriptions.Item label="Config Info">
-    Data disk type: MongoDB
-    <br />
-    Database version: 3.4
-    <br />
-    Package: dds.mongo.mid
-    <br />
-    Storage space: 10 GB
-    <br />
-    Replication factor: 3
-    <br />
-    Region: East China 1<br />
-  </Descriptions.Item>
-</Descriptions>
-```
-
-</demo>

package/components/descriptions/demo/size.md

@@ -1,56 +0,0 @@
-<demo>
-
-### Size
-
-Customised sizes to fit in a variety of containers.
-
-```jsx live
-() => {
-  const [size, setSize] = React.useState('md');
-
-  return (
-    <div>
-      <Radio.Group onChange={(val) => setSize(val)} value={size}>
-        <Radio value="sm">Small</Radio>
-        <Radio value="md">Medium</Radio>
-        <Radio value="lg">Large</Radio>
-      </Radio.Group>
-      <br />
-      <br />
-      <Descriptions bordered title="Customised Size" size={size}>
-        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-        <Descriptions.Item label="Config Info">
-          Data disk type: MongoDB
-          <br />
-          Database version: 3.4
-          <br />
-          Package: dds.mongo.mid
-          <br />
-          Storage space: 10 GB
-          <br />
-          Replication factor: 3
-          <br />
-          Region: East China 1<br />
-        </Descriptions.Item>
-      </Descriptions>
-      <br />
-      <br />
-      <Descriptions title="Customised Size" size={size}>
-        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-      </Descriptions>
-    </div>
-  );
-};
-```
-
-</demo>

package/components/descriptions/demo/vertical-border.md

@@ -1,38 +0,0 @@
-<demo>
-
-### Border
-
-Descriptions with border.
-
-```jsx live
-<Descriptions title="User Info" bordered layout="vertical">
-  <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-  <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-  <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
-  <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
-  <Descriptions.Item label="Usage Time" span={2}>
-    2019-04-24 18:00:00
-  </Descriptions.Item>
-  <Descriptions.Item label="Status" span={3}>
-    <Badge dot processing color="#1890ff"/> Running
-  </Descriptions.Item>
-  <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
-  <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-  <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
-  <Descriptions.Item label="Config Info">
-    Data disk type: MongoDB
-    <br />
-    Database version: 3.4
-    <br />
-    Package: dds.mongo.mid
-    <br />
-    Storage space: 10 GB
-    <br />
-    Replication factor: 3
-    <br />
-    Region: East China 1<br />
-  </Descriptions.Item>
-</Descriptions>
-```
-
-</demo>

package/components/descriptions/demo/vertical.md

@@ -1,17 +0,0 @@
-<demo>
-
-### Vertical
-
-Vertical layout.
-
-```jsx live
-<Descriptions title="User Info" layout="vertical">
-  <Descriptions.Item label="UserName">React</Descriptions.Item>
-  <Descriptions.Item label="Telephone">0200004567</Descriptions.Item>
-  <Descriptions.Item label="Live">Sydney, Australia</Descriptions.Item>
-  <Descriptions.Item label="Remark">Great</Descriptions.Item>
-  <Descriptions.Item label="Address">456P+HW Camperdown, New South Wales</Descriptions.Item>
-</Descriptions>
-```
-
-</demo>

package/components/descriptions/descriptions-item.tsx

@@ -1,9 +0,0 @@
-import { DescriptionsItemProps } from './types';
-
-const DescriptionsItem = (props: DescriptionsItemProps): JSX.Element => {
-  return props.children as JSX.Element;
-};
-
-DescriptionsItem.displayName = 'DescriptionsItem';
-
-export default DescriptionsItem;