@jswork/antd-components 1.0.78 → 1.0.80

package/src/lib/editable-tag-group.tsx

@@ -0,0 +1,234 @@
+import cx from 'classnames';
+import React, { createRef } from 'react';
+import noop from '@jswork/noop';
+import AutosizeInput from 'react-input-autosize';
+import { Button, Tag } from 'antd';
+import deepEqual from 'fast-deep-equal';
+import nx from '@jswork/next';
+import _ from 'lodash';
+import '@jswork/next-dom-event';
+import { AcInteractiveList } from './interactive-list';
+
+const CLASS_NAME = 'ac-editable-tag-group';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  /**
+   * The extended className for component.
+   */
+  className?: string;
+  /**
+   * Default value.
+   */
+  value?: any[];
+  /**
+   * The change handler.
+   */
+  onChange?: StdCallback;
+  /**
+   * The minimum tag number.
+   */
+  min?: number;
+  /**
+   * The maximum tags number.
+   */
+  max?: number;
+  /**
+   * If set readOnly.
+   */
+  readOnly?: boolean;
+  /**
+   * If set disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Trigger key, default is `Space`.
+   */
+  triggers?: string[];
+};
+
+export class AcEditableTagGroup extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    value: [],
+    min: 0,
+    max: 10,
+    onChange: noop,
+    triggers: [' ', 'Tab']
+  };
+
+  private inputRef = createRef<HTMLInputElement>();
+  private btnRef = createRef<HTMLButtonElement>();
+  private rootForwardedRef = createRef<HTMLDivElement>();
+  private rootRef = createRef<any>();
+  private imeStartRes;
+  private imeEndRes;
+
+  get latestInput(): HTMLInputElement {
+    const root = this.rootForwardedRef.current!;
+    const selector = `.${CLASS_NAME}__input input`;
+    const els: NodeListOf<HTMLInputElement> = root.querySelectorAll(selector);
+    return els[els.length - 1];
+  }
+
+  state = {
+    value: this.props.value,
+    ime: false
+  };
+
+  template = ({ item, index }, cb) => {
+    // TODO: tag.cloable will create ant-tag-hidden?
+    const { readOnly } = this.props;
+    return (
+      <Tag key={index}>
+        <AutosizeInput
+          ref={this.inputRef}
+          type="text"
+          size="small"
+          value={item}
+          disabled={readOnly}
+          readOnly={readOnly}
+          className={`${CLASS_NAME}__input`}
+          onChange={this.handleInputChange.bind(this, index)}
+          onBlur={this.handleInputBlur}
+          onKeyDown={this.handleInputKeyDown}
+        />
+        {!readOnly && <i className={`${CLASS_NAME}__close`} onClick={cb}></i>}
+      </Tag>
+    );
+  };
+
+  templateCreate = () => {
+    const { readOnly } = this.props;
+    if (readOnly) return null;
+    return (
+      <Button
+        ref={this.btnRef}
+        size="small"
+        type="dashed"
+        onClick={this.actionCreate}
+        className={`${CLASS_NAME}__create`}>
+        <i className={`${CLASS_NAME}__plus`}></i>
+        新增
+      </Button>
+    );
+  };
+
+  /**
+   * Default item's value.
+   */
+  templateDefault = () => {
+    return '';
+  };
+
+  /**
+   * Add new default item.
+   */
+  actionCreate = () => {
+    const { value } = this.state;
+    value!.push(this.templateDefault());
+    this.handleChange(value);
+    this.rootRef.current!.notify(value);
+    this.actionFocusLast();
+  };
+
+  /**
+   * Focus latest input element if exists.
+   * @param inDelay
+   */
+  actionFocusLast = (inDelay?: number) => {
+    const delay = inDelay || 100;
+    setTimeout(() => {
+      this.latestInput?.focus();
+    }, delay);
+  };
+
+  handleInputChange = (inIndex, inEvent) => {
+    const { value } = this.state;
+    value![inIndex] = inEvent.target.value;
+    this.handleChange(value);
+  };
+
+  handleInputBlur = () => {
+    let { value } = this.state;
+    const len = value?.length;
+    setTimeout(() => {
+      value = _.uniq(value);
+      if (document.activeElement !== this.latestInput) {
+        value = value?.filter(Boolean);
+      }
+      this.handleChange(value);
+      if (value?.length !== len) {
+        this.actionFocusLast(100);
+      }
+    }, 10);
+  };
+
+  handleInputKeyDown = (inEvent) => {
+    const { triggers } = this.props;
+    const { ime } = this.state;
+    if (triggers?.includes(inEvent.key)) {
+      if (inEvent.key === ' ' && ime) return;
+      inEvent.preventDefault();
+      this.actionCreate();
+    }
+  };
+
+  handleInterChange = (inEvent) => {
+    const { value } = inEvent.target;
+    this.handleChange(value);
+  };
+
+  handleChange = (inValue, inCallback?) => {
+    const callback = inCallback || noop;
+    const { onChange } = this.props;
+    const value = inValue.map((item) => item.trim());
+    const target = { value };
+    this.setState(target, () => {
+      onChange!({ target });
+      callback(value);
+    });
+  };
+
+  componentDidMount() {
+    const doc = document as any;
+    this.imeStartRes = nx.DomEvent.on(doc, 'compositionstart', () => this.setState({ ime: true }));
+    this.imeEndRes = nx.DomEvent.on(doc, 'compositionend', () => this.setState({ ime: false }));
+  }
+
+  componentWillUnmount() {
+    this.imeStartRes.destroy();
+    this.imeEndRes.destroy();
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    if (!deepEqual(value, this.props.value)) {
+      this.setState({ value: value!.slice() });
+    }
+    return true;
+  }
+
+  render() {
+    const { className, value, onChange, min, max, triggers, ...props } = this.props;
+    const { value: stateValue } = this.state;
+
+    return (
+      <AcInteractiveList
+        className={cx(CLASS_NAME, className)}
+        forwardedRef={this.rootForwardedRef}
+        ref={this.rootRef}
+        min={min}
+        max={max}
+        items={stateValue}
+        template={this.template}
+        templateCreate={this.templateCreate}
+        templateDefault={this.templateDefault}
+        onChange={this.handleInterChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/input-hidden.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CLASS_NAME = 'ac-input-hidden';
+
+export class AcInputHidden extends React.Component {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {};
+
+  render() {
+    return <input type="hidden" {...this.props} />;
+  }
+}

package/src/lib/input-number.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { InputNumber, InputNumberProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-input-number';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: number;
+  onChange?: StdCallback;
+} & InputNumberProps;
+
+export class AcInputNumber extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  state = {
+    value: this.props.value
+  };
+
+  shouldComponentUpdate(inProps: Readonly<Props>): boolean {
+    const { value } = inProps;
+    if (value !== this.props.value) this.setState({ value });
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    const target = { value: inEvent };
+    this.setState(target);
+    onChange!({ target });
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    const { value: stateValue } = this.state;
+    return (
+      <InputNumber
+        className={cx(CLASS_NAME, className)}
+        value={stateValue}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/input-tags.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Tag } from 'antd';
+import cx from 'classnames';
+import fde from 'fast-deep-equal';
+
+const CLASS_NAME = 'ac-input-tags';
+const TRIGGER_KEYS = ['Tab', 'Enter', 'Space'];
+
+// @ https://cdpn.io/iamqamarali/fullpage/qyawoR?anon=true&view=
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  items?: string[];
+  disabled?: boolean;
+  onChange?: StdCallback;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+type State = {
+  items?: string[];
+  inputValue: string;
+  isComposite: boolean;
+};
+
+export class AcInputTags extends React.Component<Props, State> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    items: [],
+    disabled: false,
+    onChange: noop
+  };
+
+  inputRef = React.createRef<HTMLInputElement>();
+
+  constructor(inProps) {
+    super(inProps);
+    const { items } = inProps;
+    this.state = {
+      items,
+      isComposite: false,
+      inputValue: ''
+    };
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { items } = nextProps;
+    if (!fde(items, this.props.items)) {
+      this.setState({ items });
+    }
+    return true;
+  }
+
+  handleInputChange = (inEvent) => {
+    const { value } = inEvent.target;
+    this.setState({ inputValue: value });
+  };
+
+  handleInputKeyAction = (inEvent) => {
+    const { code } = inEvent;
+    const { value } = inEvent.target;
+    const { items, isComposite } = this.state;
+    const val = value.trim();
+    const idx = items!.length - 1;
+    inEvent.stopPropagation();
+
+    if (isComposite) return false;
+    if (code === 'Backspace') return this.handleTagRemove(idx);
+    if (code === 'Tab') inEvent.preventDefault();
+    if (TRIGGER_KEYS.includes(code)) {
+      if (val) {
+        if (!items!.includes(val)) {
+          items!.push(val);
+          this.setState({ inputValue: '' });
+          this.execChange(items!);
+        }
+      }
+    }
+  };
+
+  handleTagRemove = (inIndex, inForce?: boolean) => {
+    const { disabled } = this.props;
+    const { items, inputValue } = this.state;
+    if (disabled) return;
+    const newItems = items!.filter((_, idx) => idx !== inIndex);
+    if (!inputValue || inForce) this.execChange(newItems);
+  };
+
+  handleMouseEnter = () => {
+    this.inputRef.current?.focus();
+  };
+
+  execChange = (inItems) => {
+    const { onChange } = this.props;
+    this.setState({ items: (inItems || []).slice(0) }, () => {
+      this.inputRef.current?.focus();
+      onChange!({ target: { value: inItems } });
+    });
+  };
+
+  render() {
+    const { className, onChange, disabled, ...props } = this.props;
+    const { items, inputValue } = this.state;
+
+    return (
+      <div
+        data-disabled={disabled}
+        className={cx(CLASS_NAME, className)}
+        onMouseOver={this.handleMouseEnter}
+        onClick={this.handleMouseEnter}
+        {...props}>
+        {items!.map((item, idx) => {
+          return (
+            <Tag
+              data-disabled={disabled}
+              className={`${CLASS_NAME}__tag`}
+              closeIcon
+              onClose={this.handleTagRemove.bind(this, idx, true)}
+              key={idx}>
+              {item}
+            </Tag>
+          );
+        })}
+        <input
+          disabled={disabled}
+          autoFocus
+          ref={this.inputRef}
+          onCompositionStart={() => this.setState({ isComposite: true })}
+          onCompositionEnd={() => this.setState({ isComposite: false })}
+          onInput={this.handleInputChange}
+          onKeyDown={this.handleInputKeyAction}
+          value={inputValue}
+          className={cx(`${CLASS_NAME}__input`, className)}
+        />
+      </div>
+    );
+  }
+}

package/src/lib/input-token.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Button, Input, InputProps } from 'antd';
+import { UnlockOutlined, LockOutlined } from '@ant-design/icons';
+import { nanoid } from 'nanoid';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-input-token';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: string;
+  onChange?: StdCallback;
+  autoComplete?: boolean;
+  labelCreate?: string;
+  labelRemove?: string;
+} & InputProps;
+
+export class AcInputToken extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    autoComplete: false,
+    labelCreate: '生成Token',
+    labelRemove: '去掉Token'
+  };
+
+  private rootRef = React.createRef<any>();
+  state = { value: this.props.value };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    if (value !== this.props.value) this.setState({ value });
+    return true;
+  }
+
+  get complete() {
+    return this.props.autoComplete ? 'on' : 'off';
+  }
+
+  get tokenView() {
+    const { labelCreate, labelRemove } = this.props;
+    return (
+      <Button.Group>
+        <Button
+          size="small"
+          icon={<LockOutlined />}
+          className={`${CLASS_NAME}__action`}
+          onClick={this.handleTokenCreate}>
+          {labelCreate}
+        </Button>
+        <Button
+          size="small"
+          icon={<UnlockOutlined />}
+          className={`${CLASS_NAME}__action`}
+          onClick={this.handleTokenRemove}>
+          {labelRemove}
+        </Button>
+      </Button.Group>
+    );
+  }
+
+  handleTokenCreate = () => {
+    this.doChange(nanoid());
+  };
+
+  handleTokenRemove = () => {
+    this.doChange('');
+  };
+
+  handleChange = (inEvent) => {
+    const { value } = inEvent.target;
+    this.doChange(value);
+    this.rootRef.current.input.focus();
+  };
+
+  doChange = (inValue) => {
+    const { onChange } = this.props;
+    const target = { value: inValue };
+    this.setState(target);
+    onChange!({ target });
+  };
+
+  render() {
+    const { className, value, autoComplete, onChange, labelCreate, labelRemove, ...props } =
+      this.props;
+    return (
+      <Input
+        ref={this.rootRef}
+        value={this.state.value}
+        onChange={this.handleChange}
+        addonAfter={this.tokenView}
+        className={cx(CLASS_NAME, className)}
+        autoComplete={this.complete}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/input.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Input, InputProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-input';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  onChange?: StdCallback;
+  autoComplete?: boolean;
+} & InputProps;
+
+export class AcInput extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    autoComplete: false
+  };
+
+  state = { value: this.props.value };
+
+  shouldComponentUpdate(inProps: Readonly<Props>): boolean {
+    const { value } = inProps;
+    if (value !== this.props.value) this.setState({ value });
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    const { value } = inEvent.target;
+    const target = { value };
+    this.setState(target);
+    onChange!({ target });
+  };
+
+  get complete() {
+    return this.props.autoComplete ? 'on' : 'off';
+  }
+
+  render() {
+    const { className, value, autoComplete, onChange, ...props } = this.props;
+    const { value: stateValue } = this.state;
+
+    return (
+      <Input
+        className={cx(CLASS_NAME, className)}
+        autoComplete={this.complete}
+        value={stateValue}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}