@jswork/antd-components 1.0.78 → 1.0.80

package/src/lib/checkable-dropdown.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Checkbox, Dropdown, Button, MenuProps } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import nx from '@jswork/next';
+import '@jswork/next-dom-event';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+
+const CLASS_NAME = 'ac-checkable-dropdown';
+const locales = { 'zh-CN': { selectAll: '全部' }, 'en-US': { selectAll: 'All' } };
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  lang?: string;
+  items?: any[];
+  value?: any[];
+  width?: number;
+  size?: SizeType;
+  disabled?: boolean;
+  onChange?: StdCallback;
+};
+
+export class AcCheckableDropdown extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static id = 1;
+  static defaultProps = {
+    lang: 'zh-CN',
+    onChange: noop,
+    items: [],
+    value: [],
+    width: 140
+  };
+
+  private readonly overlayClass = `${CLASS_NAME}-overlay--${AcCheckableDropdown.id++}`;
+
+  state = {
+    visible: false,
+    value: this.props.value
+  };
+
+  private overlayRes: any;
+  private winBlankRes: any;
+
+  get indeterminate() {
+    const { value } = this.state;
+    return !!value?.length && value?.length < this.props.items!.length;
+  }
+
+  get label() {
+    const { value } = this.state;
+    const { items } = this.props;
+    const labels = value?.map((val) => items?.find((item) => item.value === val).label);
+    const isAll = value?.length === 0 || value?.length === items?.length;
+    return isAll ? this.t('selectAll') : labels?.join(',');
+  }
+
+  get menuItems() {
+    const { items } = this.props;
+    const _value = this.state.value;
+    return [
+      {
+        key: 'select_all',
+        label: (
+          <Checkbox
+            indeterminate={this.indeterminate}
+            checked={_value?.length === items?.length}
+            onChange={(e) => {
+              const checked = e.target.checked;
+              const val = checked ? items?.map((item) => item.value) : [];
+              this.doChange(val);
+            }}>
+            {this.t('selectAll')}
+          </Checkbox>
+        )
+      },
+      { type: 'divider' },
+      ...items!.map((opt) => {
+        const shouldChecked = _value?.includes(opt.value);
+        return {
+          key: opt.value,
+          label: (
+            <Checkbox
+              onChange={(e) => {
+                const { checked } = e.target;
+                const filtered = this.state.value?.filter((item) => item !== opt.value);
+                const val = checked ? [...filtered!, opt.value] : filtered;
+                this.doChange(val);
+              }}
+              checked={shouldChecked}>
+              {opt.label}
+            </Checkbox>
+          )
+        };
+      })
+    ] as MenuProps['items'];
+  }
+
+  t = (inKey: string) => {
+    const { lang } = this.props;
+    return locales[lang!][inKey] || inKey;
+  };
+
+  doChange = (inValue) => {
+    const { onChange } = this.props;
+    const target = { value: inValue };
+    this.setState(target);
+    onChange!({ target });
+  };
+
+  componentDidMount() {
+    // click blank, close overlay
+    this.winBlankRes = nx.DomEvent.on(window as any, 'click', (e) => {
+      const target = e.target as HTMLElement;
+      const overlay = document.querySelector(`.${this.overlayClass}`) as HTMLDivElement;
+      if (overlay && !overlay.contains(target)) {
+        this.setState({ visible: false });
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    const { visible } = this.state;
+    if (visible) {
+      const overlay = document.querySelector(`.${this.overlayClass}`) as HTMLDivElement;
+      if (overlay) {
+        this.overlayRes = nx.DomEvent.on(overlay, 'mouseleave', () => {
+          this.setState({ visible: false });
+          this.overlayRes?.destroy();
+        });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.winBlankRes?.destroy();
+    this.overlayRes?.destroy();
+  }
+
+  /**
+   * todo: 有朝一日，找出原因
+   * 这里的 button disabled 不能生效，除非在 dropdown 内层套一个 Fragment。
+   */
+  render() {
+    const { width, disabled, size } = this.props;
+    const { visible } = this.state;
+
+    return (
+      <Dropdown
+        disabled={disabled}
+        overlayClassName={this.overlayClass}
+        open={visible}
+        menu={{ items: this.menuItems }}>
+        <>
+          <Button
+            className={`${CLASS_NAME}__btn`}
+            style={{ width }}
+            size={size}
+            disabled={disabled}
+            onMouseEnter={() => this.setState({ visible: true })}>
+            <span className="is-label">{this.label}</span>
+            <DownOutlined />
+          </Button>
+        </>
+      </Dropdown>
+    );
+  }
+}

package/src/lib/checkable-tag-list.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import cx from 'classnames';
+import ReactList from '@jswork/react-list';
+import { Space, Button } from 'antd';
+import { AcCheckableTag } from './checkable-tag';
+
+const CLASS_NAME = 'ac-checkable-tag-list';
+const locales = {
+  'zh-CN': { selectAll: '全部' },
+  'en-US': { selectAll: 'All' }
+};
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+  /**
+   * Main className.
+   */
+  className?: string;
+  /**
+   * The language key.
+   */
+  lang?: string;
+  /**
+   * The component data soruce.
+   */
+  items?: any[];
+  /**
+   * Runtime value.
+   */
+  value?: any[];
+  /**
+   * The event handler for `change`.
+   */
+  onChange?: StdCallback;
+  /**
+   * The disabled state.
+   */
+  disabled?: boolean;
+};
+
+export class AcCheckableTagList extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    lang: 'zh-CN',
+    value: [],
+    onChange: noop
+  };
+
+  state = {
+    value: this.props.value
+  };
+
+  t = (inKey: string) => {
+    const { lang } = this.props;
+    return locales[lang!][inKey] || inKey;
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    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 });
+    });
+  };
+
+  handleClearAll = () => {
+    this.handleChange([]);
+  };
+
+  render() {
+    const { className, items, value, onChange, disabled, ...props } = this.props;
+    const label = this.t('selectAll');
+
+    return (
+      <Space direction="horizontal" className={cx(CLASS_NAME, className)}>
+        <Button
+          disabled={disabled}
+          size="small"
+          onClick={this.handleClearAll}
+          className="ac-is-aside">
+          {label}
+        </Button>
+        <ReactList
+          items={items}
+          template={({ item, index }) => {
+            const _value = this.state.value as any[];
+            const isChecked = _value?.includes(item.value);
+            return (
+              <AcCheckableTag
+                className="ac-is-item"
+                toggleable
+                closeable
+                propagation
+                disabled={disabled}
+                value={isChecked}
+                onChange={(inEvent) => {
+                  const checked = inEvent.target.value;
+                  const curSet = new Set([..._value]);
+                  const method = checked ? 'add' : 'delete';
+                  curSet[method](item.value);
+                  // @ts-ignore
+                  this.handleChange([...curSet]);
+                }}
+                key={index}>
+                {item.label}
+              </AcCheckableTag>
+            );
+          }}
+          {...props}
+        />
+      </Space>
+    );
+  }
+}

package/src/lib/checkable-tag.tsx

@@ -0,0 +1,101 @@
+import React, { ReactNode } from 'react';
+import noop from '@jswork/noop';
+import { Tag } from 'antd';
+import cx from 'classnames';
+import { CheckableTagProps } from 'antd/es/tag';
+import { CloseOutlined } from '@ant-design/icons';
+
+const CLASS_NAME = 'ac-checkable-tag';
+const { CheckableTag } = Tag;
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+/**
+ * @see https://ant.design/components/tag-cn/#Tag.CheckableTag
+ */
+
+type Props = {
+  className?: string;
+  value?: boolean;
+  disabled?: boolean;
+  closeable?: boolean;
+  toggleable?: boolean;
+  propagation?: boolean;
+  onChange?: StdCallback;
+  onCloseClick?: StdCallback;
+} & Omit<CheckableTagProps, 'checked'>;
+
+export class AcCheckableTag extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    value: false,
+    closeable: false,
+    disabled: false,
+    toggleable: false,
+    propagation: false,
+    onChange: noop,
+    onCloseClick: noop
+  };
+
+  state = {
+    value: Boolean(this.props.value)
+  };
+
+  get closeIcon() {
+    const { closeable, toggleable } = this.props;
+    const { value } = this.state;
+    let view: ReactNode = null;
+    if (closeable) view = <CloseOutlined onClick={this.handleCloseClick} />;
+    if (toggleable) view = value ? view : null;
+    return view;
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    if (value !== this.state.value) {
+      this.setState({ value });
+    }
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    const target = { value: inEvent };
+    this.setState(target, () => {
+      onChange!({ target });
+    });
+  };
+
+  handleCloseClick = (inEvent) => {
+    const { propagation, onCloseClick } = this.props;
+    !propagation && inEvent.stopPropagation();
+    onCloseClick!(inEvent);
+  };
+
+  render() {
+    const {
+      className,
+      value,
+      onChange,
+      onCloseClick,
+      children,
+      closeable,
+      toggleable,
+      propagation,
+      ...props
+    } = this.props;
+    const _value = this.state.value;
+
+    return (
+      <CheckableTag
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        checked={_value}
+        {...props}>
+        {children}
+        {this.closeIcon}
+      </CheckableTag>
+    );
+  }
+}

package/src/lib/checkbox-group.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactList from '@jswork/react-list';
+import noop from '@jswork/noop';
+import { Checkbox } from 'antd';
+import cx from 'classnames';
+import { checkboxKv } from '@jswork/antd-tpls';
+import { CheckboxGroupProps } from 'antd/es/checkbox';
+
+const CLASS_NAME = 'ac-checkbox-group';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (item: { item: any; index: number }) => React.ReactNode;
+
+export type AcCheckboxGroupProps = {
+  className?: string;
+  value?: any[];
+  items?: any[];
+  onChange?: StdCallback;
+  onSearch?: StdCallback;
+  template?: TemplateCallback;
+} & CheckboxGroupProps;
+
+export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    items: [],
+    value: [],
+    template: checkboxKv,
+    onChange: noop,
+    onSearch: noop
+  };
+
+  state = {
+    value: this.props.value
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<AcCheckboxGroupProps>): boolean {
+    const { value } = nextProps;
+    const isNewValue = nextProps.value !== this.props.value;
+    if (isNewValue && this.state.value !== value) {
+      this.setState({ value });
+    }
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange, onSearch } = this.props;
+    const target = { value: inEvent };
+    const stdEvent = { target };
+    this.setState(target, () => {
+      onChange!(stdEvent);
+      onSearch!(stdEvent);
+    });
+  };
+
+  render() {
+    const { className, items, template, onChange, onSearch, children, value, ...props } =
+      this.props;
+    const { value: stateValue } = this.state;
+
+    return (
+      <Checkbox.Group
+        className={cx(CLASS_NAME, className)}
+        value={stateValue}
+        onChange={this.handleChange}
+        {...props}>
+        <ReactList items={items} template={template} />
+      </Checkbox.Group>
+    );
+  }
+}

package/src/lib/checkbox.tsx

@@ -0,0 +1,59 @@
+import React, { HTMLAttributes } from 'react';
+import noop from '@jswork/noop';
+import { Checkbox, CheckboxProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-checkbox';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: boolean;
+  onChange?: StdCallback;
+} & CheckboxProps &
+  HTMLAttributes<any>;
+
+export class AcCheckbox extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  state = {
+    value: this.props.value
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    if (value !== this.state.value) {
+      this.setState({ value });
+    }
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { checked } = inEvent.target;
+    const { onChange } = this.props;
+    const target = { value: checked };
+
+    this.setState(target, () => {
+      onChange!({ target });
+    });
+  };
+
+  render() {
+    const { className, onChange, value, defaultValue, ...props } = this.props;
+    const _value = this.state.value;
+
+    return (
+      <Checkbox
+        className={cx(CLASS_NAME, className)}
+        checked={_value}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/codeflask.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import ReactCodeflask from '@jswork/react-codeflask';
+
+const CLASS_NAME = 'ac-codeflask';
+
+export class AcCodeFlask extends React.Component {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  render() {
+    return <ReactCodeflask {...this.props} />;
+  }
+}

package/src/lib/confirm-button.tsx

@@ -0,0 +1,87 @@
+import cx from 'classnames';
+import React, { Component } from 'react';
+import { Popconfirm, Button, message } from 'antd';
+import type { PopconfirmProps, ButtonProps } from 'antd';
+
+const CLASS_NAME = 'ac-confirm-button';
+const locals = {
+  'zh-CN': {
+    title: '确认执行这个操作？',
+    msgCancel: '您取消了操作~'
+  },
+  'en-US': {
+    title: 'Are you sure to do this?',
+    msgCancel: 'You canceled the operation~'
+  }
+};
+
+export interface AcConfirmButtonProps extends Omit<PopconfirmProps, 'title'> {
+  className?: string;
+  lang?: string;
+  title?: string;
+  type?: ButtonProps['type'] | 'raw' | 'anchor';
+  childProps?: ButtonProps;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export class AcConfirmButton extends Component<AcConfirmButtonProps> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+
+  static defaultProps = {
+    lang: 'zh-CN',
+    type: 'link',
+    childProps: {}
+  };
+
+  get computedChildren() {
+    const { type, children, childProps } = this.props;
+    switch (type) {
+      case 'raw':
+        return children;
+      case 'anchor':
+        return <a {...childProps}>{children}</a>;
+      default:
+        return (
+          <Button type={type} size="small" {...childProps}>
+            {children}
+          </Button>
+        );
+    }
+  }
+
+  handleCancel = () => {
+    message.info(this.t('msgCancel'));
+  };
+
+  t = (inKey) => {
+    const { lang } = this.props;
+    return nx.get(locals, `${lang}.${inKey}`, inKey);
+  };
+
+  render() {
+    const {
+      className,
+      onClick,
+      type,
+      children,
+      childProps,
+      lang,
+      title: _title,
+      ...props
+    } = this.props;
+
+    const title = _title || locals[lang!].title;
+
+    return (
+      <Popconfirm
+        title={title}
+        onConfirm={(e) => onClick?.(e as any)}
+        onCancel={this.handleCancel}
+        className={cx(CLASS_NAME, className)}
+        {...props}>
+        {this.computedChildren}
+      </Popconfirm>
+    );
+  }
+}

package/src/lib/date-picker.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { DatePicker, DatePickerProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-date-picker';
+const STD_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: any;
+  dayjs?: any;
+  defaultValue?: any;
+  onChange?: StdCallback;
+} & DatePickerProps;
+
+export class AcDatePicker extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps: Props = {
+    onChange: noop,
+    format: STD_FORMAT
+  };
+
+  get values() {
+    const { value, defaultValue } = this.props;
+    let props = {};
+    if (value) props['value'] = this.parse(value);
+    if (defaultValue) props['defaultValue'] = this.parse(defaultValue);
+    return props;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: this.stringify(inEvent) } });
+  };
+
+  parse = (inValue) => {
+    const { format, dayjs } = this.props;
+    return dayjs(inValue, format as string);
+  };
+
+  stringify = (inValue) => {
+    if (!inValue) return null;
+    const { format } = this.props;
+    return inValue.format(format as string);
+  };
+
+  render() {
+    const { className, defaultValue, value, onChange, ...props } = this.props;
+    const rest = { ...props, ...this.values };
+
+    return (
+      <DatePicker className={cx(CLASS_NAME, className)} onChange={this.handleChange} {...rest} />
+    );
+  }
+}