tiny-ui 0.0.94 → 1.0.0

package/components/tree/tree-instance.ts

@@ -1,190 +0,0 @@
-import React from 'react';
-import { TreeData } from './types';
-
-export type Node = {
-  // data source key provided by user
-  key?: string;
-  // unique key managed by TreeInstance. x-x-x
-  uniqueKey: string;
-  title: React.ReactNode;
-  checked: boolean;
-  indeterminate: boolean;
-  expanded: boolean;
-  disabled: boolean;
-  disableCheckbox: boolean;
-  parentKey: string;
-  icon?: (isExpanded: boolean) => React.ReactNode;
-  children?: Node[];
-};
-
-export class TreeInstance {
-  private readonly treeNodes: Node[];
-
-  constructor(
-    data: TreeData[],
-    defaultCheckedKeys: string[],
-    defaultExpandedKeys: string[],
-    defaultExpandAll: boolean
-  ) {
-    this.treeNodes = this.handleTreeNode(
-      data,
-      defaultCheckedKeys,
-      defaultExpandedKeys,
-      defaultExpandAll,
-      ''
-    );
-  }
-
-  private handleTreeNode(
-    data: TreeData[],
-    defaultCheckedKeys: string[],
-    defaultExpandedKeys: string[],
-    defaultExpandAll: boolean,
-    parentKey: string
-  ): Node[] {
-    return data.map((item, idx) => {
-      const { key, title, children, disableCheckbox, disabled, ...otherProps } = item;
-      const uniqueKey = parentKey ? parentKey + `-${idx}` : `${idx}`;
-      const node: Node = {
-        ...otherProps,
-        key,
-        uniqueKey,
-        title: title || '---',
-        disabled: disabled || false,
-        disableCheckbox: disableCheckbox || false,
-        checked: key ? defaultCheckedKeys.includes(key) : false,
-        indeterminate: false,
-        expanded: defaultExpandAll || (key ? defaultExpandedKeys.includes(key) : false),
-        parentKey,
-      };
-
-      if (children) {
-        node.children = this.handleTreeNode(
-          children,
-          defaultCheckedKeys,
-          defaultExpandedKeys,
-          defaultExpandAll,
-          uniqueKey
-        );
-        const indeterminate = this.isIndeterminate(node);
-        return {
-          ...node,
-          indeterminate,
-        };
-      }
-      return node;
-    });
-  }
-
-  get nodes(): Node[] {
-    return this.treeNodes;
-  }
-
-  getNodeByUniqueKey(uniqueKey: string): Node | undefined {
-    const keys = uniqueKey.split('-').map((item) => parseInt(item));
-
-    let curr: Node[] | undefined = this.treeNodes;
-    let target: Node | undefined = undefined;
-    for (const key of keys) {
-      if (curr) {
-        target = curr[key];
-        curr = target?.children;
-      }
-    }
-
-    return target;
-  }
-
-  isIndeterminate(node: Node): boolean {
-    if (node.children) {
-      if (node.children.some((n) => n.indeterminate)) {
-        return true;
-      }
-      const numOfChecked = node.children.filter((n) => n.checked).length;
-      return numOfChecked > 0 && numOfChecked < node.children.length;
-    }
-    return false;
-  }
-
-  checkChildren(children: Node[], isChecked: boolean): void {
-    children.forEach((child) => {
-      if (child.disabled) {
-        return;
-      }
-
-      child.checked = isChecked;
-      child.indeterminate = this.isIndeterminate(child);
-      if (child.children) {
-        this.checkChildren(child.children, isChecked);
-      }
-    });
-  }
-
-  checkParent(node: Node): void {
-    if (node.disabled) {
-      return;
-    }
-
-    const children = node.children as Node[];
-    const numOfChecked = children.filter((n) => n.checked).length;
-    node.checked = numOfChecked === children.length;
-    node.indeterminate = this.isIndeterminate(node);
-    const parentNode = this.getNodeByUniqueKey(node.parentKey);
-    if (parentNode) {
-      this.checkParent(parentNode);
-    }
-  }
-
-  setNodeChecked(uniqueKey: string, isChecked: boolean): void {
-    const node = this.getNodeByUniqueKey(uniqueKey);
-    if (node) {
-      node.checked = isChecked;
-      // update children node
-      // if children are existing, make them all checked
-      if (node.children) {
-        this.checkChildren(node.children, isChecked);
-      }
-      node.indeterminate = this.isIndeterminate(node);
-      // check parent node
-      // if siblings of current node are all checked, set the parent node checked
-      const parentNode = this.getNodeByUniqueKey(node.parentKey);
-      if (parentNode) {
-        this.checkParent(parentNode);
-      }
-    }
-  }
-
-  setNodeExpanded(uniqueKey: string, isExpanded: boolean): void {
-    const node = this.getNodeByUniqueKey(uniqueKey);
-    if (node) {
-      node.expanded = isExpanded;
-    }
-  }
-
-  /**
-   * Check whether the value of a specific prop is true
-   */
-  private isPropValueTrue(node: Node, prop: string, list: string[]): void {
-    const { key, uniqueKey, children } = node;
-    if ((node as any)[prop]) {
-      list.push(key ? key : uniqueKey);
-    }
-    if (children) {
-      children.forEach((child) => {
-        this.isPropValueTrue(child, prop, list);
-      });
-    }
-  }
-
-  getCheckedKeys(): string[] {
-    const keys: string[] = [];
-    this.nodes.forEach((node) => this.isPropValueTrue(node, 'checked', keys));
-    return keys;
-  }
-
-  getExpandedKeys(): string[] {
-    const keys: string[] = [];
-    this.nodes.forEach((node) => this.isPropValueTrue(node, 'expanded', keys));
-    return keys;
-  }
-}

package/components/tree/tree-node.tsx

@@ -1,101 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { BaseProps } from '../_utils/props';
-import { TreeArrow } from '../_utils/components';
-import CollapseTransition from '../collapse-transition';
-import Checkbox from '../checkbox/checkbox';
-import { Node } from './tree-instance';
-
-interface TreeNodeProps extends BaseProps {
-  node: Node;
-  level: number;
-  treeClassName: string;
-  onCheckboxChange: (uniqueKey: string, e: React.ChangeEvent<HTMLInputElement>) => void;
-  onExpandChange: (key: string, isExpanded: boolean, e: React.MouseEvent) => void;
-  // tree props
-  indent: number;
-  blockNode: boolean;
-  checkable: boolean;
-  disabled: boolean;
-  icon?: (isExpanded: boolean) => React.ReactNode;
-}
-
-const TreeNode = (props: TreeNodeProps): JSX.Element => {
-  const {
-    indent,
-    blockNode,
-    level,
-    node,
-    checkable,
-    className,
-    treeClassName,
-    onCheckboxChange,
-    onExpandChange,
-    prefixCls: customisedCls,
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('tree-node', configContext.prefixCls, customisedCls);
-  const { title, checked, icon, expanded, disableCheckbox, indeterminate } = node;
-  const nodeIcon = icon || props.icon;
-  const disabled = node.disabled || props.disabled;
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_block`]: blockNode,
-    [`${prefixCls}_disabled`]: disabled,
-  });
-
-  const switcherOnClick = (e: React.MouseEvent<HTMLSpanElement>) => {
-    e.stopPropagation();
-    onExpandChange(node.uniqueKey, !expanded, e);
-  };
-
-  const checkboxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    onCheckboxChange(node.uniqueKey, e);
-  };
-
-  return (
-    <li className={cls}>
-      <div className={`${prefixCls}__title`} style={{ paddingLeft: indent * level }}>
-        <span className={`${prefixCls}__switcher`} onClick={switcherOnClick}>
-          {node.children &&
-            (nodeIcon ? (
-              nodeIcon(expanded)
-            ) : (
-              <TreeArrow
-                className={classNames(`${prefixCls}__arrow`, {
-                  [`${prefixCls}__arrow_active`]: expanded,
-                })}
-              />
-            ))}
-        </span>
-        {checkable && (
-          <Checkbox
-            checked={checked}
-            indeterminate={indeterminate}
-            onChange={checkboxOnChange}
-            disabled={disabled || disableCheckbox}
-          />
-        )}
-        <span className={`${prefixCls}__label`} onClick={switcherOnClick}>
-          {title}
-        </span>
-      </div>
-      {node.children && (
-        <CollapseTransition isShow={expanded}>
-          <ul className={treeClassName} aria-level={level + 1}>
-            {node.children &&
-              node.children.map((node) => (
-                <TreeNode {...props} key={node.uniqueKey} node={node} level={level + 1} />
-              ))}
-          </ul>
-        </CollapseTransition>
-      )}
-    </li>
-  );
-};
-
-TreeNode.displayName = 'TreeNode';
-
-export default TreeNode;

package/components/tree/tree.tsx

@@ -1,71 +0,0 @@
-import React, { useContext, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { TreeProps } from './types';
-import { TreeInstance } from './tree-instance';
-import TreeNode from './tree-node';
-
-const Tree = React.forwardRef<HTMLUListElement, TreeProps>(
-  (props: TreeProps, ref): JSX.Element => {
-    const {
-      data = [],
-      defaultCheckedKeys = [],
-      defaultExpandedKeys = [],
-      defaultExpandAll = false,
-      indent = 20,
-      blockNode = true,
-      checkable = false,
-      disabled = false,
-      onCheck,
-      onExpand,
-      className,
-      prefixCls: customisedCls,
-    } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('tree', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className);
-    const treeInstance = useRef(
-      new TreeInstance(data, defaultCheckedKeys, defaultExpandedKeys, defaultExpandAll)
-    );
-    const [treeNodes, setTreeNodes] = useState(treeInstance.current.nodes);
-
-    const onCheckboxChange = (key: string, e: React.ChangeEvent<HTMLInputElement>) => {
-      const tree = treeInstance.current;
-      tree.setNodeChecked(key, e.currentTarget.checked);
-      setTreeNodes([...treeInstance.current.nodes]);
-      onCheck && onCheck(tree.getCheckedKeys(), e);
-    };
-
-    const onExpandChange = (key: string, isExpanded: boolean, e: React.MouseEvent) => {
-      const tree = treeInstance.current;
-      tree.setNodeExpanded(key, isExpanded);
-      setTreeNodes([...treeInstance.current.nodes]);
-      onExpand && onExpand(tree.getExpandedKeys(), e);
-    };
-
-    return (
-      <ul className={cls} ref={ref} aria-level={0}>
-        {treeNodes.map((item) => (
-          <TreeNode
-            {...props}
-            key={item.uniqueKey}
-            node={item}
-            level={0}
-            indent={indent}
-            blockNode={blockNode}
-            checkable={checkable}
-            disabled={disabled}
-            treeClassName={cls}
-            onCheckboxChange={onCheckboxChange}
-            onExpandChange={onExpandChange}
-          />
-        ))}
-      </ul>
-    );
-  }
-);
-
-Tree.displayName = 'Tree';
-
-export default Tree;

package/components/tree/types.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export type TreeData = {
-  key?: string;
-  title?: React.ReactNode;
-  disableCheckbox?: boolean;
-  disabled?: boolean;
-  icon?: (isExpanded: boolean) => React.ReactNode;
-  children?: TreeData[];
-};
-
-export interface TreeProps
-  extends BaseProps,
-    Omit<React.PropsWithRef<JSX.IntrinsicElements['ul']>, 'onSelect'> {
-  data?: TreeData[];
-  indent?: number;
-  checkable?: boolean;
-  blockNode?: boolean;
-  disabled?: boolean;
-  defaultCheckedKeys?: string[];
-  defaultExpandedKeys?: string[];
-  defaultExpandAll?: boolean;
-  icon?: (isExpanded: boolean) => React.ReactNode;
-  onCheck?: (checkedKeys: string[], e: React.ChangeEvent) => void;
-  onExpand?: (expandedKeys: string[], e: React.MouseEvent) => void;
-}

package/components/typography/demo/basic.md

@@ -1,49 +0,0 @@
-<demo>
-
-### Basic
-
-Display the document sample.
-
-```jsx live
-() => {
-  const { Heading, Paragraph, Text } = Typography;
-  return (
-    <>  
-      <Heading>Introduction</Heading>
-      <Paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus turpis massa tincidunt dui ut ornare lectus sit. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Massa enim nec dui nunc mattis enim. Aliquet risus feugiat in ante metus dictum at. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. 
-      </Paragraph>
-      <Paragraph>
-        Metus aliquam eleifend mi in nulla posuere. <Text italic>Nisl tincidunt eget nullam non nisi est sit amet.</Text> Diam sit amet nisl suscipit. In ante metus dictum at tempor commodo. Amet luctus venenatis lectus magna. Velit egestas dui id ornare arcu. Enim ut tellus elementum sagittis. Vitae aliquet nec ullamcorper sit amet risus nullam. Nisl nunc mi ipsum faucibus vitae. Nunc mi ipsum faucibus vitae. Dictum at tempor commodo ullamcorper a lacus vestibulum.
-      </Paragraph>
-
-      <Heading level={2}>Guidelines & Resources</Heading>
-      <Paragraph>
-        In object-oriented computer programming, <Text strong>SOLID</Text> is a mnemonic acronym for five design principles intended to make software designs more understandable, flexible and maintainable.
-      </Paragraph>
-
-      <Typography>
-        <ul>
-          <li>
-            <a href="https://en.wikipedia.org/wiki/Single-responsibility_principle">Single-responsibility principle</a>
-          </li>
-          <li>
-            <a href="https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle">Open–closed principle</a>
-          </li>
-          <li>
-            <a href="https://en.wikipedia.org/wiki/Behavioral_subtyping">Liskov substitution principle</a>
-          </li>
-          <li>
-            <a href="https://en.wikipedia.org/wiki/Interface_segregation_principle">Interface segregation principle</a>
-          </li>
-          <li>
-            <a href="https://en.wikipedia.org/wiki/Dependency_inversion_principle">Dependency inversion principle</a>
-          </li>
-        </ul>
-      </Typography>
-    </>
-  );
-}
-```
-
-</demo>

package/components/typography/demo/heading.md

@@ -1,23 +0,0 @@
-<demo>
-
-### Heading
-
-Display title in different levels.
-
-```jsx live
-() => {
-  const { Heading } = Typography;
-  return (
-    <>  
-      <Heading>H1.Heading</Heading>
-      <Heading level={2}>H2.Heading</Heading>
-      <Heading level={3}>H3.Heading</Heading>
-      <Heading level={4}>H4.Heading</Heading>
-      <Heading level={5}>H5.Heading</Heading>
-      <Heading level={6}>H6.Heading</Heading>
-    </>
-  );
-}
-```
-
-</demo>

package/components/typography/demo/text.md

@@ -1,34 +0,0 @@
-<demo>
-
-### Text
-
-HTML contains several elements for defining text with a special meaning. `Text` component provides a wrapper for them.
-
-```jsx live
-() => {
-  const { Text } = Typography;
-  return (
-    <>  
-      <Text>I am a text</Text>
-      <br/>
-      <Text underline>I am a text</Text>
-      <br/>
-      <Text del>I am a text</Text>
-      <br/>
-      <Text strong>I am a text</Text>
-      <br/>
-      <Text italic>I am a text</Text>
-      <br/>
-      <Text mark>I am a text</Text>
-      <br/>
-      <Text code>I am a text</Text>
-      <br/>
-      <Text>I am a Text<Text sup>sup</Text></Text>
-      <br/>
-      <Text>I am a Text<Text sub>sub</Text></Text>
-    </>
-  );
-}
-```
-
-</demo>

package/components/typography/heading.tsx

@@ -1,42 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { HeadingProps } from './types';
-
-const headingGenerator = (htmlType: string, displayName: string) => {
-  const Component = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-    (props: HeadingProps, ref): JSX.Element => {
-      const { prefixCls: customisedCls, className, children, ...otherProps } = props;
-      const configContext = useContext(ConfigContext);
-      const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
-      const cls = classNames(prefixCls, className);
-
-      return React.createElement(
-        htmlType,
-        {
-          ...otherProps,
-          ref,
-          className: cls,
-        },
-        children
-      );
-    }
-  );
-
-  Component.displayName = displayName;
-
-  return Component;
-};
-
-const Heading = (props: HeadingProps): JSX.Element | null => {
-  const { level = 1, ...otherProps } = props;
-  if (level < 1 || level > 6) {
-    console.warn('The heading level parameter is invalid.');
-    return null;
-  }
-  const Component = headingGenerator(`h${level}`, `H${level}`);
-  return <Component {...otherProps} />;
-};
-
-export default Heading;

package/components/typography/index.md

@@ -1,25 +0,0 @@
-import Basic from './demo/basic.md'
-import Heading from './demo/heading.md'
-import Text from './demo/text.md'
-
-# Typography
-
-Basic text writing, including headings, body text, lists, and more.
-
-## Scenario
-
-Display a title or paragraph contents.
-
-## Usage
-
-```jsx
-import { Typography } from 'tiny-ui';
-
-const { Heading, Paragraph, Text } = Typography;
-```
-
-## Examples
-
-<Basic/>
-<Heading/>
-<Text/>

package/components/typography/index.tsx

@@ -1,17 +0,0 @@
-import Heading from './heading';
-import Typography from './typography';
-import Paragraph from './paragraph';
-import Text from './text';
-
-type ITypography = typeof Typography & {
-  Heading: typeof Heading;
-  Paragraph: typeof Paragraph;
-  Text: typeof Text;
-};
-
-const DefaultTypo = Typography as ITypography;
-DefaultTypo.Heading = Heading;
-DefaultTypo.Paragraph = Paragraph;
-DefaultTypo.Text = Text;
-
-export default DefaultTypo;

package/components/typography/paragraph.tsx

@@ -1,23 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { ParagraphProps } from './types';
-
-const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  (props: ParagraphProps, ref): JSX.Element => {
-    const { className, children, prefixCls: customisedCls, ...otherProps } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
-    const cls = classNames(className, prefixCls);
-    return (
-      <p ref={ref} className={cls} {...otherProps}>
-        {children}
-      </p>
-    );
-  }
-);
-
-Paragraph.displayName = 'Paragraph';
-
-export default Paragraph;