@jswork/antd-components 1.0.78 → 1.0.80

package/src/lib/interactive-list.tsx

@@ -0,0 +1,173 @@
+import noop from '@jswork/noop';
+import ReactList from '@jswork/react-list';
+import cx from 'classnames';
+import React, { Component, HTMLAttributes } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+const CLASS_NAME = 'ac-interactive-list';
+
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (
+  item: { item: any; index: number; items: any[] },
+  cb: any
+) => React.ReactNode;
+
+export type ReactInteractiveListProps = {
+  /**
+   * The extended className for component.
+   */
+  className?: string;
+  /**
+   * The minimum size.
+   */
+  min: number;
+  /**
+   * The max size.
+   */
+  max: number;
+  /**
+   * The data source.
+   */
+  items: any[];
+  /**
+   * The data item template.
+   */
+  template: TemplateCallback;
+  /**
+   * The action of `create` component.
+   */
+  templateCreate: (...args) => React.ReactNode;
+  /**
+   * The empty create template.
+   */
+  templateDefault: () => React.ReactNode;
+  /**
+   * The change handler.
+   */
+  onChange: StdCallback;
+  /**
+   * When trigger max/min boundary.
+   */
+  onError: StdCallback;
+  /**
+   * Forwards a ref to the underlying div element.
+   */
+  forwardedRef: any;
+} & HTMLAttributes<any>;
+
+interface ReactInteractiveListState {
+  value: any[];
+}
+
+class ReactInteractiveList extends Component<ReactInteractiveListProps, ReactInteractiveListState> {
+  static displayName = CLASS_NAME;
+  static defaultProps = {
+    min: 0,
+    max: 10,
+    items: [],
+    template: noop,
+    templateCreate: noop,
+    templateDefault: noop,
+    onChange: noop,
+    onError: noop
+  };
+
+  get length() {
+    const { value } = this.state;
+    return value.length;
+  }
+
+  get isLteMin() {
+    const { min } = this.props;
+    return this.length <= min;
+  }
+
+  get isGteMax() {
+    const { max } = this.props;
+    return this.length >= max;
+  }
+
+  get listView() {
+    const { value } = this.state;
+    return <ReactList items={value} template={this.template} />;
+  }
+
+  get createView() {
+    const { value } = this.state;
+    const { templateCreate, templateDefault } = this.props;
+    const cb = () => {
+      if (this.isGteMax) return;
+      value.push(templateDefault());
+      this.handleChange(value);
+    };
+    return templateCreate({ items: value }, cb);
+  }
+
+  constructor(inProps) {
+    super(inProps);
+    const { items } = inProps;
+    this.state = { value: [...items] };
+  }
+
+  shouldComponentUpdate(inProps) {
+    const { items } = inProps;
+    const isEqual = deepEqual(this.state.value, items);
+    if (!isEqual) {
+      this.setState({ value: [...items] });
+    }
+    return true;
+  }
+
+  template = ({ item, index }) => {
+    const { template } = this.props;
+    const { value } = this.state;
+    const cb = () => {
+      if (this.isLteMin) return;
+      value.splice(index, 1);
+      this.handleChange(value);
+    };
+    return template({ item, index, items: value }, cb);
+  };
+
+  handleChange = (inValue) => {
+    const { onChange, onError, min, max } = this.props;
+    const target = { value: inValue };
+    this.setState(target, () => {
+      onChange({ target });
+      this.length < min && onError({ target: { value: 'EQ_MIN' } });
+      this.length > max && onError({ target: { value: 'EQ_MAX' } });
+    });
+  };
+
+  notify = (inValue) => {
+    this.handleChange(inValue);
+  };
+
+  render() {
+    const {
+      className,
+      forwardedRef,
+      min,
+      max,
+      items,
+      template,
+      templateCreate,
+      templateDefault,
+      onChange,
+      onError,
+      ...props
+    } = this.props;
+
+    return (
+      <div className={cx(CLASS_NAME, className)} ref={forwardedRef} {...props}>
+        {this.listView}
+        {this.createView}
+      </div>
+    );
+  }
+}
+
+export const AcInteractiveList = React.forwardRef((props: any, ref) => {
+  return <ReactInteractiveList {...props} ref={ref} />;
+});

package/src/lib/pre-select.tsx

@@ -0,0 +1,128 @@
+import noop from '@jswork/noop';
+import cx from 'classnames';
+import React from 'react';
+import { AcInput } from './input';
+import { AcSelect } from './select';
+import { AcSearch } from './search';
+
+const CLASS_NAME = 'ac-pre-select';
+const DEFAULT_VALUE = { option: null, keyword: '' };
+
+export interface Value {
+  option: string;
+  keyword: string;
+}
+
+export type AcPreSelectProps = {
+  /**
+   * The extended className for component.
+   */
+  className?: string;
+  /**
+   * Default value.
+   */
+  value?: Value;
+  /**
+   * Select options.
+   */
+  items?: any[];
+  /**
+   * The change handler.
+   */
+  onChange?: Function;
+  /**
+   * The handler for search.
+   */
+  onSearch?: Function;
+  /**
+   * If use search input.
+   */
+  searchable?: boolean;
+  /**
+   * The prefix select options.
+   */
+  selectOptions?: any;
+  /**
+   * The suffix input options.
+   */
+  inputOptions?: any;
+};
+
+export class AcPreSelect extends React.Component<AcPreSelectProps> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static version = '__VERSION__';
+  static defaultProps = {
+    onChange: noop,
+    onSearch: noop,
+    searchable: false
+  };
+
+  state = { value: this.props.value };
+
+  get addonView() {
+    const { items, selectOptions } = this.props;
+    const { value } = this.state;
+
+    return (
+      <AcSelect
+        value={value?.option}
+        items={items}
+        onChange={this.handleChange.bind(this, 'option')}
+        {...selectOptions}
+      />
+    );
+  }
+
+  handleFiledAction = (inField, inEvent, inCallback) => {
+    const { value } = this.state;
+    const _value = value || DEFAULT_VALUE;
+    _value![inField] = inEvent.target.value;
+    const target = { value: _value };
+    this.setState(target);
+    inCallback!({ target });
+  };
+
+  handleChange = (inField, inEvent) => {
+    this.handleFiledAction(inField, inEvent, this.props.onChange);
+    if (inField === 'option') {
+      this.handleFiledAction(inField, inEvent, this.props.onSearch);
+    }
+  };
+
+  handleSearch = (inField, inEvent) => {
+    this.handleFiledAction(inField, inEvent, this.props.onSearch);
+  };
+
+  render() {
+    const {
+      className,
+      value,
+      onChange,
+      onSearch,
+      searchable,
+      selectOptions,
+      inputOptions,
+      ...props
+    } = this.props;
+
+    const AsTag = searchable ? AcSearch : AcInput;
+    const _value = this.state.value;
+    const computedProps = searchable
+      ? { onSearch: this.handleSearch.bind(this, 'keyword') }
+      : null;
+
+    return (
+      <AsTag
+        data-component={CLASS_NAME}
+        className={cx(CLASS_NAME, className)}
+        addonBefore={this.addonView}
+        value={_value?.keyword}
+        onChange={this.handleChange.bind(this, 'keyword')}
+        {...computedProps}
+        {...props}
+        {...inputOptions}
+      />
+    );
+  }
+}

package/src/lib/radio-group.tsx

@@ -0,0 +1,67 @@
+import React, { HTMLAttributes } from 'react';
+import ReactList from '@jswork/react-list';
+import noop from '@jswork/noop';
+import { Radio } from 'antd';
+import cx from 'classnames';
+import { radioKv } from '@jswork/antd-tpls/dist/esm';
+
+const CLASS_NAME = 'ac-radio-group';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (item: { item: any; index: number }, opts?: any) => React.ReactNode;
+
+type Props = {
+  className?: string;
+  value?: any;
+  defaultValue?: any;
+  items?: any[];
+  onChange?: StdCallback;
+  onSearch?: StdCallback;
+  template?: TemplateCallback;
+  templateOptions?: any;
+  buttonStyle?: 'solid' | 'outline';
+} & HTMLAttributes<any>;
+
+export class AcRadioGroup extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    items: [],
+    template: radioKv,
+    onChange: noop,
+    onSearch: noop
+  };
+
+  get templateCallback() {
+    const { template, templateOptions } = this.props;
+    return (item) => template!(item, templateOptions);
+  }
+
+  state = { value: this.props.value };
+
+  static getDerivedStateFromProps(inProps: Readonly<Props>, inState: any) {
+    const { value } = inProps;
+    if (value !== inState.value) return { value };
+    return null;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange, onSearch } = this.props;
+    const { value } = inEvent.target;
+    const target = { value };
+    this.setState(target);
+    onChange!({ target });
+    onSearch!({ target });
+  };
+
+  render() {
+    const { className, items, template, templateOptions, onChange, onSearch, ...props } =
+      this.props;
+
+    return (
+      <Radio.Group className={cx(CLASS_NAME, className)} onChange={this.handleChange} {...props}>
+        <ReactList items={items} template={this.templateCallback} />
+      </Radio.Group>
+    );
+  }
+}

package/src/lib/range-picker.tsx

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

package/src/lib/rate.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Rate, RateProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-rate';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: number;
+  onChange?: StdCallback;
+} & RateProps;
+
+export class AcRate extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inEvent } });
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    return (
+      <Rate
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/search.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Input } from 'antd';
+import cx from 'classnames';
+import { SearchProps } from 'antd/es/input';
+
+const CLASS_NAME = 'ac-search';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: boolean;
+  onChange?: StdCallback;
+  onSearch?: StdCallback;
+  autoComplete?: boolean;
+} & SearchProps;
+
+export class AcSearch extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    onSearch: noop,
+    autoComplete: false,
+    placeholder: '输入关键字搜索'
+  };
+
+  get complete() {
+    return this.props.autoComplete ? 'on' : 'off';
+  }
+
+  handleSearch = (inEvent) => {
+    const { onSearch } = this.props;
+    onSearch!({ target: { value: inEvent } });
+  };
+
+  render() {
+    const { className, value, autoComplete, onSearch, ...props } = this.props;
+    return (
+      <Input.Search
+        className={cx(CLASS_NAME, className)}
+        autoComplete={this.complete}
+        onSearch={this.handleSearch}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/select.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactList from '@jswork/react-list';
+import noop from '@jswork/noop';
+import { Select, SelectProps } from 'antd';
+import cx from 'classnames';
+import { selectKv, kv as KvTmpl } from '@jswork/antd-tpls';
+
+const CLASS_NAME = 'ac-select';
+const DEFAULT_KV = {
+  label: 'label',
+  value: 'value'
+};
+
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (item: { item: any; index: number }) => React.ReactNode;
+
+type Props = {
+  className?: string;
+  items?: any[];
+  kv?: Record<string, string>;
+  onChange?: StdCallback;
+  onSearch?: StdCallback;
+  template?: TemplateCallback;
+} & Omit<SelectProps, 'options'>;
+
+export class AcSelect extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    placeholder: '请选择',
+    items: [],
+    kv: DEFAULT_KV,
+    template: selectKv,
+    onChange: noop,
+    onSearch: noop
+  };
+
+  state = {
+    value: this.props.value
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    const isNewValue = this.props.value !== value;
+    if (isNewValue && value !== this.state.value) {
+      this.setState({ value });
+    }
+    return true;
+  }
+
+  handleChange = (inValue) => {
+    const { onChange, onSearch } = this.props;
+    const target = { value: inValue };
+    const stdEvent: StdEventTarget = { target: { value: inValue } };
+    this.setState(target, () => {
+      onChange!(stdEvent);
+      onSearch!(stdEvent);
+    });
+  };
+
+  template = (args) => {
+    const { template, kv } = this.props;
+    if (kv === DEFAULT_KV) return template!(args);
+    return KvTmpl(args, {
+      component: Select.Option,
+      ...kv
+    });
+  };
+
+  render() {
+    const { className, onChange, onSearch, value, template, ...props } = this.props;
+    const { value: _value } = this.state;
+    return (
+      <ReactList
+        allowEmpty
+        as={Select}
+        onChange={this.handleChange}
+        className={cx(CLASS_NAME, className)}
+        value={_value}
+        template={this.template}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/slider-range.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Slider } from 'antd';
+import cx from 'classnames';
+import { SliderRangeProps } from 'antd/es/slider';
+
+const CLASS_NAME = 'ac-slider-range';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  range?: true;
+  onChange?: StdCallback;
+} & Omit<SliderRangeProps, 'range'>;
+
+export class AcSliderRange extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inEvent } });
+  };
+
+  render() {
+    const { className, range, onChange, ...props } = this.props;
+    return (
+      <Slider
+        range={true}
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/slider.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Slider, SliderSingleProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-slider';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  onChange?: StdCallback;
+} & SliderSingleProps;
+
+export class AcSlider extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inEvent } });
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    return (
+      <Slider
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}