tiny-ui 0.0.95 → 1.0.0

package/components/checkbox/index.md

@@ -1,36 +0,0 @@
-import Basic from './demo/basic.md'
-import CheckAll from './demo/check-all.md'
-import Disabled from './demo/disabled.md'
-import Group from './demo/group.md'
-
-# Checkbox
-
-A multiple entry component.
-
-## Scenario
-
-- Used for selecting multiple values from several options.
-- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
-
-## Usage
-
-```jsx
-import { Checkbox } from 'tiny-ui';
-
-const { Group } = Checkbox;
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-    <Group/>
-  </column>
-  <column>
-    <CheckAll/>
-    <Disabled/>
-  </column>
-</layout>
-
-## API

package/components/checkbox/index.tsx

@@ -1,11 +0,0 @@
-import Checkbox from './checkbox';
-import CheckboxGroup from './checkbox-group';
-
-type ICheckbox = typeof Checkbox & {
-  Group: typeof CheckboxGroup;
-};
-
-const DefaultCheckbox = Checkbox as ICheckbox;
-DefaultCheckbox.Group = CheckboxGroup;
-
-export default DefaultCheckbox;

package/components/checkbox/style/_index.scss

@@ -1,139 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-size: $font-size-base;
-  margin-right: 8px;
-  color: rgba(0, 0, 0, 0.75);
-  box-sizing: border-box;
-
-  &:hover {
-    .#{$prefix}-checkbox__inner {
-      border-color: $primary-color;
-    }
-  }
-
-  &__native {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    cursor: pointer;
-    opacity: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__inner {
-    position: relative;
-    box-sizing: border-box;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    border: 1px solid #d9d9d9;
-    background-color: #fff;
-    transition: 200ms;
-    line-height: 1;
-    vertical-align: middle;
-
-    &:before {
-      content: '';
-      position: absolute;
-      display: block;
-      border: 1px solid #fff;
-      margin-top: -1px;
-      left: 3px;
-      right: 3px;
-      top: 50%;
-      transition: all 200ms;
-      transform: scale(0);
-    }
-
-    &:after {
-      transform: rotate(45deg) scaleY(1);
-      pointer-events: none;
-      box-sizing: content-box;
-      border: 2px solid #fff;
-      border-left: 0;
-      border-top: 0;
-      height: 7px;
-      left: 4px;
-      position: absolute;
-      top: 1px;
-      width: 4px;
-      transform-origin: center;
-    }
-
-    & + span {
-      padding: 0 5px 0 8px;
-      line-height: 16px;
-    }
-  }
-
-  &_checked {
-    .#{$prefix}-checkbox {
-      &__inner {
-        background-color: $primary-color;
-        border-color: $primary-color;
-
-        &:after {
-          content: '';
-          transform: rotate(45deg) scale(1);
-        }
-
-        &:before {
-          transform: scale(0);
-        }
-      }
-    }
-  }
-
-  &_indeterminate {
-    .#{$prefix}-checkbox {
-      &__inner {
-        background-color: $primary-color;
-        border-color: $primary-color;
-
-        &:before {
-          transform: scale(1);
-        }
-
-        &:after {
-          transform: rotate(45deg) scale(0);
-        }
-      }
-    }
-  }
-
-  &_disabled {
-    .#{$prefix}-checkbox {
-      &__native {
-        cursor: not-allowed;
-      }
-
-      &__inner {
-        background-color: #f5f5f5;
-        border-color: #d9d9d9 !important;
-
-        &:after {
-          border-color: rgba(0, 0, 0, 0.25);
-        }
-
-        & + span {
-          color: rgba(0, 0, 0, 0.25);
-        }
-      }
-    }
-  }
-
-  &-group {
-    display: inline-block;
-  }
-}

package/components/checkbox/types.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export interface CheckboxGroupProps
-  extends BaseProps,
-    Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
-  defaultValue?: string[];
-  value?: string[];
-  onChange?: (checkedValues: string[]) => void;
-  disabled?: boolean;
-}
-
-
-export interface CheckboxProps
-  extends BaseProps,
-    Omit<React.PropsWithRef<JSX.IntrinsicElements['label']>, 'onChange'> {
-  /** Only required when use checkbox group */
-  value?: string;
-  defaultChecked?: boolean;
-  checked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  checkboxRef?: React.RefObject<HTMLInputElement>;
-}

package/components/col/index.tsx

@@ -1,3 +0,0 @@
-import Col from '../grid/col';
-
-export default Col;

package/components/collapse/collapse-context.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-
-type Props = {
-  activeKeys: string[];
-  onItemClick?: (itemKey: string) => void;
-};
-
-export const CollapseContext = React.createContext<Props>({
-  activeKeys: [],
-});

package/components/collapse/collapse-panel.tsx

@@ -1,93 +0,0 @@
-import React, { useContext, useRef } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { CollapsePanelProps } from './types';
-import { ArrowDown } from '../_utils/components';
-import CollapseTransition from '../collapse-transition';
-import { CollapseContext } from './collapse-context';
-
-/**
- * Allow to parse active status to a node
- * @param node
- * @param isActive
- */
-const richNode = (node: React.ReactNode, isActive: boolean) => {
-  return typeof node === 'function' ? node(isActive) : node;
-};
-
-const CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {
-  const {
-    showArrow = true,
-    itemKey,
-    header,
-    disabled,
-    extra,
-    deletable,
-    onHeaderOnClick,
-    className,
-    style,
-    children,
-    prefixCls: customisedCls,
-  } = props;
-  const itemRef = useRef<HTMLDivElement | null>(null);
-  const configContext = useContext(ConfigContext);
-  const { activeKeys, onItemClick } = useContext(CollapseContext);
-  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);
-  const active = activeKeys.includes(itemKey);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_active`]: active,
-  });
-
-  const headerOnClick = (e: React.MouseEvent) => {
-    if (!disabled) {
-      onHeaderOnClick && onHeaderOnClick(e);
-      onItemClick && onItemClick(itemKey);
-    }
-  };
-
-  /**
-   * Remove a item from collapse only the header is enabled
-   * @param e
-   * @private
-   */
-  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {
-    e.stopPropagation();
-    if (!disabled) {
-      const node = itemRef.current;
-      node && node.parentNode?.removeChild(node);
-    }
-  };
-
-  const renderHeader = () => {
-    const headerCls = classNames(`${prefixCls}__header`, {
-      [`${prefixCls}__header_disabled`]: disabled,
-    });
-    const arrowCls = classNames(`${prefixCls}__arrow`, {
-      [`${prefixCls}__arrow_active`]: active,
-    });
-
-    return (
-      <div className={headerCls} onClick={headerOnClick}>
-        {showArrow && <ArrowDown size={10} className={arrowCls} />}
-        <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>
-        <div className={`${prefixCls}__extra`}>
-          {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className={cls} style={style} ref={itemRef}>
-      {renderHeader()}
-      <CollapseTransition isShow={active}>
-        <div className={`${prefixCls}__content`}>{richNode(children, active)}</div>
-      </CollapseTransition>
-    </div>
-  );
-};
-
-CollapsePanel.displayName = 'CollapsePanel';
-
-export default CollapsePanel;

package/components/collapse/collapse.tsx

@@ -1,100 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { CollapseContext } from './collapse-context';
-import { getPrefixCls } from '../_utils/general';
-import { CollapsePanelProps, CollapseProps } from './types';
-
-/**
- * Format active key to array
- * @param activeKey
- */
-const toArray = (activeKey: string | string[]): string[] => {
-  return Array.isArray(activeKey) ? activeKey : [activeKey];
-};
-
-const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
-  (props: CollapseProps, ref): React.ReactElement => {
-    const {
-      showArrow = true,
-      bordered = true,
-      deletable = false,
-      accordion = false,
-      defaultActiveKey = [],
-      prefixCls: customisedCls,
-      activeKey,
-      onChange,
-      className,
-      children,
-      ...otherProps
-    } = props;
-    let currentActiveKey: string | string[] = defaultActiveKey;
-    if (activeKey) {
-      currentActiveKey = activeKey;
-    }
-    const [activeItems, setActiveItems] = useState<string[]>(toArray(currentActiveKey));
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className, {
-      [`${prefixCls}_borderless`]: !bordered,
-    });
-
-    const updateActiveItems = (items: string[]) => {
-      if (!('activeKey' in props)) {
-        // only for defaultKey
-        setActiveItems(items);
-      }
-      onChange && onChange(items);
-    };
-
-    const handleOnItemClick = (itemKey: string) => {
-      let items = activeItems;
-      if (accordion) {
-        items = items[0] === itemKey ? [] : [itemKey];
-      } else {
-        items = [...activeItems];
-        const index = items.indexOf(itemKey);
-        const isActive = index > -1;
-        if (isActive) {
-          // remove active state
-          items.splice(index, 1);
-        } else {
-          items.push(itemKey);
-        }
-      }
-      updateActiveItems(items);
-    };
-
-    useEffect(() => {
-      // Update state from updated props
-      activeKey && setActiveItems(toArray(activeKey));
-    }, [activeKey]);
-
-    return (
-      <div {...otherProps} ref={ref} className={cls}>
-        <CollapseContext.Provider
-          value={{
-            activeKeys: activeItems,
-            onItemClick: handleOnItemClick,
-          }}>
-          {React.Children.map(children, (child, idx) => {
-            const childElement = child as React.FunctionComponentElement<CollapsePanelProps>;
-            if (childElement.type.displayName === 'CollapsePanel') {
-              const itemProps: Partial<CollapsePanelProps> = {
-                deletable,
-                showArrow,
-                itemKey: `${idx}`,
-              };
-              return React.cloneElement(childElement, itemProps);
-            }
-            return child;
-          })}
-        </CollapseContext.Provider>
-      </div>
-    );
-  }
-);
-
-Collapse.displayName = 'Collapse';
-
-export default Collapse;

package/components/collapse/demo/accordion.md

@@ -1,33 +0,0 @@
-<demo>
-
-### Accordion
-
-Only one panel can be expanded at a time.
-
-```jsx live
-() => {
-  const { Panel } = Collapse;
-  
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-  
-  return (
-    <Collapse accordion defaultActiveKey={'1'}>
-      <Panel header="This is panel header 1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-}
-```
-
-</demo>

package/components/collapse/demo/basic.md

@@ -1,37 +0,0 @@
-<demo>
-
-### Basic Collapse
-
-By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
-
-```jsx live
-() => {
-  const { Panel } = Collapse;
-  
-  const callback = (key) => {
-    console.log(key);
-  }
-  
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-  
-  return (
-    <Collapse defaultActiveKey={['1']} onChange={callback}>
-      <Panel header="This is panel header 1" itemKey="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-}
-```
-
-</demo>

package/components/collapse/demo/borderless.md

@@ -1,33 +0,0 @@
-<demo>
-
-### Borderless
-
-A borderless style of Collapse.
-
-```jsx live
-() => {
-  const { Panel } = Collapse;
-  
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-  
-  return (
-    <Collapse bordered={false}>
-      <Panel header="This is panel header 1" itemKey="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-}
-```
-
-</demo>

package/components/collapse/demo/deletable.md

@@ -1,33 +0,0 @@
-<demo>
-
-### Deletable
-
-`Panel` can be deleted. 
-
-```jsx live
-() => {
-  const { Panel } = Collapse;
-  
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-  
-  return (
-    <Collapse deletable defaultActiveKey={['1', '2']} >
-      <Panel header="This is panel header 1" itemKey="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-}
-```
-
-</demo>

package/components/collapse/demo/nested.md

@@ -1,37 +0,0 @@
-<demo>
-
-### Nested panel
-
-`Collapse` is nested inside the `Collapse`.
-
-```jsx live
-() => {
-  const { Panel } = Collapse;
-  
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-  
-  return (
-    <Collapse defaultActiveKey={'1'}>
-      <Panel header="This is panel header 1" itemKey="1">
-        <Collapse defaultActiveKey="1">
-          <Panel header="This is panel nest panel" itemKey="1">
-            <p>{text}</p>
-          </Panel>
-        </Collapse>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-}
-```
-
-</demo>

package/components/collapse/index.md

@@ -1,64 +0,0 @@
-import Accordion from './demo/accordion.md'
-import Basic from './demo/basic.md'
-import Borderless from './demo/borderless.md'
-import Deletable from './demo/deletable.md'
-import Nested from './demo/nested.md'
-
-# Collapse
-
-A content area which can be collapsed and expanded.
-
-## Scenario
-
-Can be used to group or hide complex regions to keep the page clean.
-
-`Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.
-
-## Usage
-
-```jsx
-import { Collapse } from 'tiny-ui';
-
-const { Panel } = Collapse;
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-    <Accordion/>
-    <Nested/>
-  </column>
-  <column>
-    <Borderless/>
-    <Deletable/>
-  </column>
-</layout>
-
-## API
-
-### Collapse
-
-| Property          | Description                                               | Type                              | Default   |
-| ----------------- | --------------------------------------------------------- | --------------------------------- | --------- |
-| defaultActiveKey  | initial active panel                                      | string &#124; string[]            | []        |
-| activeKey         | keys of the active panel                                  | string &#124; string[]            | -         |
-| accordion         | accordion mode                                            | boolean                           | false     |
-| deletable         | panel can be deleted                                      | boolean                           | false     |
-| showArrow         | display arrow icon                                        | boolean                           | true      |
-| bordered          | render borders around the collapse block                  | boolean                           | true      |
-| onChange          | callback function executed when active panel is changed   | (keys: string | string[]) => void | -         |
-
-### Collapse.Panel
-
-| Property          | Description                                   | Type                              | Default   |
-| ----------------- | --------------------------------------------- | --------------------------------- | --------- |
-| itemKey           | unique key identifying the panel              | string                            | -         |
-| header            | title of the panel                            | ReactNode                         | -         |
-| disabled          | panel cannot be opened or closed if set true  | boolean                           | -         |
-| extra             | extra element in the corner                   | ReactNode                         | -         |
-| deletable         | whether the panel can be deleted              | boolean                           | -         |
-| showArrow         | display arrow icon                            | boolean                           | -         |
-| onHeaderOnClick   | callback when the header is clicked           | (e: React.MouseEvent) => void     | -         |
-

package/components/collapse/index.tsx

@@ -1,11 +0,0 @@
-import Collapse from './collapse';
-import CollapsePanel from './collapse-panel';
-
-type ICollapse = typeof Collapse & {
-  Panel: typeof CollapsePanel;
-};
-
-const DefaultCollapse = Collapse as ICollapse;
-DefaultCollapse.Panel = CollapsePanel;
-
-export default DefaultCollapse;