tiny-ui 0.0.95 → 1.0.1

package/components/form/form-instance.ts

@@ -1,97 +0,0 @@
-import { deepCopy } from '../_utils/object';
-import { validate } from './form-helper';
-import { Rule } from './types';
-
-export type FormValues = { [name: string]: any };
-export type FormErrors = { [name: string]: string[] };
-type FormListener = (name: string) => void;
-type FormRules = { [name: string]: Rule[] };
-
-/**
- * The form state, including errors and rules of each form item
- */
-export default class FormInstance {
-  private readonly initValues: FormValues;
-  private values: FormValues;
-  private rules: FormRules = {};
-  private errors: FormErrors = {};
-  private listeners: FormListener[] = [];
-
-  constructor(initValues: FormValues = {}) {
-    this.initValues = initValues;
-    this.values = deepCopy(initValues);
-  }
-
-  getFieldValues(): FormValues {
-    return this.values;
-  }
-
-  getFieldValue(name: string): any {
-    return this.values[name];
-  }
-
-  setFieldValue(name: string, val: any): void {
-    this.values[name] = val;
-    this.notify(name);
-  }
-
-  setFieldValues(values: FormValues = {}): void {
-    Object.keys(values).forEach(name => this.setFieldValue(name, values[name]));
-  }
-
-  getFiledErrors(): FormErrors {
-    return this.errors;
-  }
-
-  getFieldError(name: string): string | undefined {
-    return this.errors[name] && this.errors[name].length > 0 ? this.errors[name][0] : undefined;
-  }
-
-  setFieldError(name: string, errors: string[]): void {
-    this.errors[name] = errors;
-  }
-
-  setFiledRules(name: string, rules: Rule[]): void {
-    this.rules[name] = rules;
-  }
-
-  resetFields(): void {
-    this.errors = {};
-    this.values = deepCopy(this.initValues);
-    this.notify('*');
-  }
-
-  validateField(name: string): void {
-    const rules = this.rules[name];
-    const value = this.values[name];
-    if (rules) {
-      const errMessages: string[] = [];
-      rules.forEach(rule => {
-        const res = validate(value, rule);
-        if (res !== undefined) {
-          errMessages.push(res);
-        }
-      });
-      // update filed errors
-      this.setFieldError(name, errMessages);
-      this.notify(name);
-    }
-  }
-
-  validateFields(): void {
-    Object.keys(this.rules).forEach(name => this.validateField(name));
-  }
-
-  subscribe(listener: FormListener): () => void {
-    this.listeners.push(listener);
-
-    return (): void => {
-      const idx = this.listeners.indexOf(listener);
-      idx > -1 && this.listeners.splice(idx, 1);
-    };
-  }
-
-  notify(name: string): void {
-    this.listeners.forEach((listener) => listener(name));
-  }
-}

package/components/form/form-item.tsx

@@ -1,147 +0,0 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react';
-import classNames from 'classnames';
-import { FormInstanceContext } from './form-instance-context';
-import { FormOptionsContext } from './form-options-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { FormItemProps } from './types';
-import { getPropName, getValueFromEvent } from './form-helper';
-import Row from '../grid/row';
-import Col from '../grid/col';
-import Transition from '../transition';
-
-const FormItem = (props: FormItemProps): JSX.Element => {
-  const {
-    colon = true,
-    valueGetter = getValueFromEvent,
-    valuePropName = 'value',
-    name,
-    label,
-    helper,
-    notice,
-    rules,
-    className,
-    style,
-    children,
-    labelCol: itemLabelCol,
-    wrapperCol: itemWrapperCol,
-    prefixCls: customisedCls,
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('form-item', configContext.prefixCls, customisedCls);
-  const form = React.useContext(FormInstanceContext);
-  const { wrapperCol, labelCol, validateTrigger, layout } = React.useContext(FormOptionsContext);
-  const [value, setValue] = useState(name ? form.getFieldValue(name) : undefined);
-  const [error, setError] = useState<string | undefined>(
-    name ? form.getFieldError(name) : undefined
-  );
-  const [hasErrLabel, setHasErrLabel] = useState(false);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_has-error`]: !!error,
-    [`${prefixCls}_with-err-label`]: hasErrLabel,
-  });
-  const isRequired =
-    'required' in props ? props.required : (rules && rules.some((rule) => rule.required)) || false;
-
-  // get onChange event from all components which support onChange callback
-  const onChange = useCallback(
-    (...args: any[]) => {
-      if (name) {
-        form.setFieldValue(name, valueGetter(...args));
-        validateTrigger === 'onChange' && form.validateField(name);
-      }
-    },
-    [name, form, valueGetter, validateTrigger]
-  );
-
-  // get onBlur event from input
-  const onBlur = useCallback(() => {
-    name && validateTrigger === 'onBlur' && form.validateField(name);
-  }, [name, form, validateTrigger]);
-
-  let child: any = children;
-  const prop = getPropName(valuePropName, child && child.type);
-  const childProps = { [prop]: value, onChange, onBlur };
-  child = React.cloneElement(child, childProps);
-
-  const labelCls = classNames({
-    [`${prefixCls}__label_required`]: label && isRequired,
-    [`${prefixCls}__label_colon`]: label && colon,
-  });
-
-  const getSpanAndOffset = (col: number | { span: number; offset: number }): [number, number] => {
-    if (typeof col === 'number') {
-      return [col, 0];
-    } else {
-      return [col.span, col.offset];
-    }
-  };
-
-  const getCol = (
-    col: number | { span: number; offset: number },
-    isSelf?: boolean
-  ): [number, number] => {
-    if (isSelf) {
-      return getSpanAndOffset(col);
-    }
-
-    if (layout === 'vertical') {
-      return [24, 0];
-    } else {
-      return getSpanAndOffset(col);
-    }
-  };
-
-  const [labelSpan, labelOffset] = itemLabelCol ? getCol(itemLabelCol, true) : getCol(labelCol);
-  const [wrapperSpan, wrapperOffset] = itemWrapperCol
-    ? getCol(itemWrapperCol, true)
-    : getCol(wrapperCol);
-
-  useEffect(() => {
-    if (!name) {
-      return;
-    }
-
-    rules && form.setFiledRules(name, rules);
-
-    return form.subscribe((n) => {
-      if (name === '*' || n === name || n === '*') {
-        setValue(form.getFieldValue(name));
-        setError(form.getFieldError(name));
-      }
-    });
-  }, [form, name, rules]);
-
-  useEffect(() => {
-    if (error) {
-      setHasErrLabel(true);
-    }
-  }, [error]);
-
-  return (
-    <Row className={cls} style={style}>
-      <Col span={labelSpan} offset={labelOffset} className={`${prefixCls}__label`}>
-        <label
-          htmlFor={name}
-          title={typeof label === 'string' ? label : undefined}
-          className={labelCls}>
-          {label}
-        </label>
-      </Col>
-      <Col span={wrapperSpan} offset={wrapperOffset} className={`${prefixCls}__controls`}>
-        <div className={`${prefixCls}__input`}>
-          <div className={`${prefixCls}__input-content`}>{child}</div>
-        </div>
-        {notice && <div className={`${prefixCls}__notice`}>{notice}</div>}
-        {helper && <div className={`${prefixCls}__helper`}>{helper}</div>}
-        <Transition in={!!error} animation="slide-down" onExited={() => setHasErrLabel(false)}>
-          <div className={`${prefixCls}__error`}>{error}</div>
-        </Transition>
-      </Col>
-    </Row>
-  );
-};
-
-FormItem.displayName = 'FormItem';
-
-export default FormItem;

package/components/form/form-options-context.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { FormOptionsProps } from './types';
-
-export const FormOptionsContext = React.createContext<FormOptionsProps>({
-  labelCol: 8,
-  wrapperCol: 16,
-  validateTrigger: 'onChange',
-  layout: 'horizontal',
-});

package/components/form/form.tsx

@@ -1,62 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { FormInstanceContext } from './form-instance-context';
-import { FormOptionsContext } from './form-options-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { FormProps } from './types';
-import FormInstance from './form-instance';
-
-const Form = (props: FormProps): JSX.Element => {
-  const {
-    initialValues = {},
-    labelCol = { span: 8, offset: 0 },
-    wrapperCol = { span: 16, offset: 0 },
-    validateTrigger = 'onChange',
-    layout = 'horizontal',
-    form,
-    onFinish,
-    onFinishFailed,
-    className,
-    children,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('form', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, `${prefixCls}_${layout}`);
-  // If you want to control the form outside, namely get the form instance, just pass a form store.
-  // Otherwise, the form component will manage the state internally.
-  const formRef = React.useRef(form ? form : new FormInstance(initialValues));
-
-  const formOnSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const formIns = formRef.current;
-    formIns.validateFields();
-    const values = formIns.getFieldValues();
-    const errors = formIns.getFiledErrors();
-    if (Object.keys(errors).some((key) => errors[key].length > 0)) {
-      onFinishFailed && onFinishFailed({ values, errors });
-    } else {
-      onFinish && onFinish(values);
-    }
-  };
-
-  const formOnReset = () => {
-    formRef.current.resetFields();
-  };
-
-  return (
-    <FormInstanceContext.Provider value={formRef.current}>
-      <FormOptionsContext.Provider value={{ labelCol, wrapperCol, validateTrigger, layout }}>
-        <form {...otherProps} className={cls} onSubmit={formOnSubmit} onReset={formOnReset}>
-          {children}
-        </form>
-      </FormOptionsContext.Provider>
-    </FormInstanceContext.Provider>
-  );
-};
-
-Form.displayName = 'Form';
-
-export default Form;

package/components/form/index.md

@@ -1,100 +0,0 @@
-import Basic from './demo/basic.md'
-import Extra from './demo/extra.md'
-import Layout from './demo/layout.md'
-import Method from './demo/method.md'
-import ComplexLayout from './demo/complex-layout.md'
-import ValidateTrigger from './demo/validate-trigger.md'
-import Modal from './demo/modal.md'
-import OtherControls from './demo/other-controls.md'
-
-# Form
-
-Form data management, including data collection, verification, and styles.
-
-## Scenario
-
-- When you need to create an instance or collect information.
-- When you need to validate fields in certain rules.
-
-## Usages
-
-```jsx
-import { Form } from 'tiny-ui';
-
-const { Item, useForm, FormInstance } = Form;
-```
-
-## Examples
-
-<Basic />
-<Extra />
-<Layout />
-<Method />
-<ComplexLayout />
-<ValidateTrigger />
-<Modal />
-<OtherControls />
-
-## API
-
-### Form
-
-| Property          | Description                                                                                   | Type                                              | Default       |
-| ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------- |
-| form              | form control instance created by `Form.useForm()`. Automatically created when not provided    | `FormInstance`                                    | -             |
-| initialValues     | set value by Form initialisation or reset                                                     | object                                            | false         |
-| labelCol          | label layout, like `<Col>` component                                                          | number &#124; { span: number, offset: number }    | 8             |
-| wrapperCol        | the layout for input controls, same as `labelCol`                                             | number &#124; { span: number, offset: number }    | 16            |
-| validateTrigger   | config field validate trigger                                                                 | `onChange` &#124; `onBlur` &#124; `onSubmit`      | `onChange`    |
-| layout            | form layout                                                                                   | `horizontal` &#124; `vertical` &#124; `inline`    | `horizontal`  |
-| onFinish          | trigger after submitting the form and verifying data successfully                             | (values) => void                                  | -             |
-| onFinishFailed    | trigger after submitting the form and verifying data unsuccessfully                           | (values, errors) => void                          | -             |
-
-### Form.Item
-
-Form field component for data bidirectional binding, validation and layout.
-
-| Property          | Description                                                               | Type                                              | Default   |
-| ----------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | --------- |
-| name              | field name                                                                | string                                            | -         |
-| required          | display required style. It will be generated by the validation rule       | boolean                                           | -         |
-| colon             | display `:` after the label text                                          | boolean                                           | true      |
-| label             | label text                                                                | string                                            | -         |
-| rules             | rules for field validation                                                | `Rule`[]                                          | -         |
-| helper            | the prompt message                                                        | ReactNode                                         | -         |
-| notice            | similar with `help`, but more impressive                                  | ReactNode                                         | -         |
-| valuePropName     | props of children node. For example, the prop of `Switch` is 'checked'.   | string                                            | 'value'   |
-| valueGetter       | specify how to get value from event or other `onChange` arguments         | (..args: any[]) => any                            | -         |
-| labelCol          | the layout of label                                                       | number &#124; { span: number, offset: number }    | -         |
-| wrapperCol        | the layout of controls                                                    | number &#124; { span: number, offset: number }    | -         |
-
-### FormInstance
-
-| Method            | Description                                       | Type                                      |
-| ----------------- | ------------------------------------------------- | ----------------------------------------- |
-| getFieldValues    | get values by a set of field names                | () => { [name: string]: any }             |
-| getFieldValue     | get the value by the field name                   | (name: string) => any                     |
-| setFieldValues    | set values by a set of field names                | ({ [name: string]: any }) => void         |
-| setFieldValue     | set the value by the field name                   | (name: string, value: any) => void        |
-| getFiledErrors    | get errors by a set of field names                | () => { [name: string]: string[] }        |
-| getFieldError     | get the error messages by the field name          | (name: string) => string[]                |
-| setFieldError     | set the error messages by the field name          | (name: string, errors: string[]) => void  |
-| resetFields       | reset fields to initialValues                     | () => void                                |
-| validateFields    | validate all fields                               | (name: string) => void                    |
-| validateField     | validate a field by the field name                | () => void                                |
-
-### Rule
-
-| Property          | Description                                               | Type                                          |
-| ----------------- | --------------------------------------------------------- | --------------------------------------------- |
-| type              | specific type                                             | `string` &#124; `number` &#124; `boolean`     |
-| message           | error message. auto generate by template if not provided  | string                                        |
-| max               | type required: max length of string, number, array        | number                                        |
-| min               | type required: min length of string, number, array        | number                                        |
-| required          | required field                                            | boolean                                       |
-| enum              | match enum value                                          | any[]                                         |
-| len               | length of string, number, array                           | number                                        |
-| pattern           | regex pattern                                             | RegExp                                        |
-| transform         | transform value to the rule before validation             | (value) => any                                |
-| validator         | customize validation rule                                 | (value) => boolean &#124; `Promise<boolean>`  |
-| whitespace        | failed if only has whitespace                             | boolean                                       |

package/components/form/index.tsx

@@ -1,17 +0,0 @@
-import Form from './form';
-import FormItem from './form-item';
-import useForm from './use-form';
-import FormInstance from './form-instance';
-
-type IForm = typeof Form & {
-  Item: typeof FormItem;
-  useForm: typeof useForm;
-  FormInstance: typeof FormInstance;
-};
-
-const DefaultForm = Form as IForm;
-DefaultForm.Item = FormItem;
-DefaultForm.useForm = useForm;
-DefaultForm.FormInstance = FormInstance;
-
-export default DefaultForm;

package/components/form/style/_index.scss

@@ -1,93 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-form {
-
-  &_vertical {
-    .#{$prefix}-form-item__label {
-      text-align: left;
-    }
-  }
-
-  &_inline {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-
-.#{$prefix}-form-item {
-  margin-bottom: 22px;
-  vertical-align: top;
-
-  &__label {
-    line-height: 30px;
-    text-align: right;
-    vertical-align: top;
-    color: rgba(0, 0, 0, 0.85);
-    font-size: $font-size-base;
-
-    &_required:before {
-      content: '*';
-      margin-right: 3px;
-      color: rgb(255, 77, 79);
-    }
-
-    &_colon:after {
-      content: ':';
-      margin: 0 8px 0 2px;
-    }
-  }
-
-  &__input {
-    position: relative;
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-  }
-
-  &__input-content {
-    flex: auto;
-    max-width: 100%;
-  }
-
-  &__error {
-    min-height: 22px;
-    line-height: 22px;
-    font-size: 13px;
-    color: #ff4d4f;
-  }
-
-  &__helper {
-    min-height: 22px;
-    line-height: 22px;
-    font-size: 13px;
-    color: #999;
-  }
-
-  &__notice {
-    font-size: 13px;
-    border-radius: $border-radius;
-    background: #fff7cc;
-    color: #555;
-    padding: 5px;
-    margin-top: 5px;
-  }
-
-  &_with-err-label {
-    margin-bottom: 0;
-  }
-
-  &_has-error {
-    .#{$prefix}-input__input, .#{$prefix}-input-number__input, .#{$prefix}-textarea {
-      border-color: #ff4d4f;
-
-      &:not([disabled]):hover{
-        border-color: #ff4d4f;
-      }
-
-      &:focus{
-        border-color: #ff7875;
-        box-shadow: 0 0 0 2px rgba(255,77,79,.2);
-      }
-    }
-  }
-}

package/components/form/style/index.tsx

@@ -1,3 +0,0 @@
-import './index.scss';
-
-import '../../transition/style/index.scss';

package/components/form/types.ts

@@ -1,74 +0,0 @@
-import { BaseProps, DirectionType } from '../_utils/props';
-import React from 'react';
-import FormInstance, { FormErrors, FormValues } from './form-instance';
-
-export type Rule = {
-  // specific type
-  type?: 'string' | 'number' | 'boolean';
-
-  // error message. auto generate by template if not provided
-  message?: string;
-
-  // type required: max length of string, number, array
-  max?: number;
-
-  // type required: min length of string, number, array
-  min?: number;
-
-  // required field
-  required?: boolean;
-
-  // match enum value
-  enum?: any[];
-
-  // length of string, number, array
-  len?: number;
-
-  // regex pattern
-  pattern?: RegExp;
-
-  // transform value to the rule before validation
-  transform?: (value: any) => any;
-
-  // customize validation rule.
-  validator?: (value: any) => boolean | Promise<boolean>;
-
-  // failed if only has whitespace
-  whitespace?: boolean;
-};
-
-export interface FormItemProps extends BaseProps {
-  name?: string;
-  required?: boolean;
-  colon?: boolean;
-  label?: React.ReactNode;
-  rules?: Rule[];
-  helper?: React.ReactNode;
-  notice?: React.ReactNode;
-  valuePropName?: string;
-  valueGetter?: (...args: any[]) => any;
-  labelCol?: number | { span: number; offset: number };
-  wrapperCol?: number | { span: number; offset: number };
-  children?: React.ReactNode;
-}
-
-export type FormLayout = DirectionType | 'inline';
-
-export type ValidateTrigger = 'onChange' | 'onBlur' | 'onSubmit';
-
-export interface FormOptionsProps {
-  labelCol: number | { span: number; offset: number };
-  wrapperCol: number | { span: number; offset: number };
-  validateTrigger: ValidateTrigger;
-  layout: FormLayout;
-}
-
-export interface FormProps
-  extends BaseProps,
-    Partial<FormOptionsProps>,
-    React.PropsWithRef<JSX.IntrinsicElements['form']> {
-  form?: FormInstance;
-  initialValues?: FormValues;
-  onFinish?: (values: FormValues) => void;
-  onFinishFailed?: ({ values, errors }: { values: FormValues; errors: FormErrors }) => void;
-}

package/components/form/use-form.ts

@@ -1,5 +0,0 @@
-import FormInstance, { FormValues } from './form-instance';
-
-export default function useForm(initialValues: FormValues = {}): [FormInstance] {
-  return [new FormInstance(initialValues)];
-}

package/components/grid/col.tsx

@@ -1,61 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { ColProps, ColSize } from './types';
-
-const ScreenTypes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-
-const Col = (props: ColProps): React.ReactElement => {
-  const {
-    span = 24,
-    offset = 0,
-    order = 0,
-    prefixCls: customisedCls,
-    className,
-    style,
-    children,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('col', configContext.prefixCls, customisedCls);
-
-  let sizeClassObj = {};
-  ScreenTypes.forEach((size) => {
-    let sizeProps: ColSize = {};
-    // Prevent the error that expression of type 'string' can't be used to index type 'ColProps'.
-    const propSize = (props as any)[size];
-    if (typeof propSize === 'number') {
-      sizeProps.span = propSize;
-    } else if (typeof propSize === 'object') {
-      sizeProps = propSize || {};
-    }
-    sizeClassObj = {
-      ...sizeClassObj,
-      [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-      [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
-        sizeProps.offset || sizeProps.offset === 0,
-    };
-  });
-  const cls = classNames(
-    prefixCls,
-    className,
-    {
-      [`${prefixCls}-${span}`]: span,
-      [`${prefixCls}-offset-${offset}`]: offset,
-      [`${prefixCls}-order-${order}`]: order,
-    },
-    sizeClassObj
-  );
-
-  return (
-    <div {...otherProps} className={cls} style={style}>
-      {children}
-    </div>
-  );
-};
-
-Col.displayName = 'Col';
-
-export default Col;