@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/radio/radioGroup.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/radio/constants';
+import { RadioGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation';
+import { RadioChangeEvent } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
+import BaseComponent from '../_base/baseComponent';
+import { ArrayElement } from '../_base/base';
+import { RadioType } from './radio';
+import { RadioGroupButtonSize, RadioMode } from './context';
+export interface OptionItem {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    extra?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare type Options = string[] | Array<OptionItem>;
+export declare type RadioGroupProps = {
+    defaultValue?: any;
+    disabled?: boolean;
+    name?: string;
+    options?: Options;
+    value?: any;
+    onChange?: (event: RadioChangeEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    direction?: ArrayElement<typeof strings.DIRECTION_SET>;
+    mode?: RadioMode;
+    type?: RadioType;
+    buttonSize?: RadioGroupButtonSize;
+    prefixCls?: string;
+};
+export interface RadioGroupState {
+    value?: any;
+}
+declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
+    static propTypes: {
+        defaultValue: PropTypes.Requireable<any>;
+        disabled: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        options: PropTypes.Requireable<any[]>;
+        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
+        value: PropTypes.Requireable<any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        prefixCls: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        direction: PropTypes.Requireable<"horizontal" | "vertical">;
+        mode: PropTypes.Requireable<"" | "advanced">;
+    };
+    static defaultProps: Partial<RadioGroupProps>;
+    constructor(props: RadioGroupProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RadioGroupProps): void;
+    componentWillUnmount(): void;
+    get adapter(): RadioGroupAdapter;
+    onChange: (evt: RadioChangeEvent) => void;
+    getFormatName: () => string;
+    render(): JSX.Element;
+}
+export default RadioGroup;

package/lib/cjs/radio/radioGroup.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodashEs = require("lodash-es");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/radio/constants");
+
+var _radioGroupFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _radio = _interopRequireDefault(require("./radio"));
+
+var _context6 = _interopRequireDefault(require("./context"));
+
+class RadioGroup extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.onChange = evt => {
+      this.foundation.handleChange(evt);
+    };
+
+    this.getFormatName = () => this.props.name || 'default';
+
+    this.state = {
+      value: undefined
+    };
+    this.foundation = new _radioGroupFoundation.default(this.adapter);
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.foundation.handlePropValueChange(this.props.value);
+    }
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setValue: value => {
+        this.setState({
+          value
+        });
+      },
+      getProps: () => this.props,
+      isInProps: name => Boolean(name in this.props),
+      notifyChange: evt => {
+        this.props.onChange && this.props.onChange(evt);
+      }
+    });
+  }
+
+  render() {
+    var _context, _context2, _context3;
+
+    const {
+      children,
+      options,
+      mode,
+      prefixCls,
+      className,
+      style,
+      direction,
+      type,
+      buttonSize
+    } = this.props;
+    const isButtonRadio = type === _constants.strings.TYPE_BUTTON;
+    const isPureCardRadio = type === _constants.strings.TYPE_PURECARD;
+    const isCardRadio = type === _constants.strings.TYPE_CARD || isPureCardRadio;
+    const isDefaultRadio = type === _constants.strings.TYPE_DEFAULT;
+    const prefix = prefixCls || _constants.radioGroupClasses.PREFIX;
+    const prefixClsDisplay = (0, _classnames.default)(className, {
+      [prefix]: true,
+      ["".concat(prefix, "-wrapper")]: true,
+      [(0, _concat.default)(_context = "".concat(prefix, "-")).call(_context, direction)]: direction && !isButtonRadio,
+      [(0, _concat.default)(_context2 = "".concat(prefix, "-")).call(_context2, direction, "-default")]: direction && isDefaultRadio,
+      [(0, _concat.default)(_context3 = "".concat(prefix, "-")).call(_context3, direction, "-card")]: direction && isCardRadio,
+      ["".concat(prefix, "-buttonRadio")]: isButtonRadio
+    });
+    const realValue = this.state.value;
+    let inner;
+
+    if (options) {
+      var _context4;
+
+      inner = (0, _map.default)(_context4 = options || []).call(_context4, (option, index) => {
+        if (typeof option === 'string') {
+          return /*#__PURE__*/_react.default.createElement(_radio.default, {
+            key: index,
+            disabled: this.props.disabled,
+            value: option
+          }, option);
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_radio.default, {
+            key: index,
+            disabled: option.disabled || this.props.disabled,
+            value: option.value,
+            extra: option.extra,
+            className: option.className,
+            style: option.style
+          }, option.label);
+        }
+      });
+    } else if (children) {
+      var _context5;
+
+      inner = (0, _map.default)(_context5 = _react.default.Children).call(_context5, children, (itm, index) => /*#__PURE__*/_react.default.isValidElement(itm) ? /*#__PURE__*/_react.default.cloneElement(itm, {
+        key: index
+      }) : null);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixClsDisplay,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_context6.default.Provider, {
+      value: {
+        radioGroup: {
+          onChange: this.onChange,
+          value: realValue,
+          disabled: this.props.disabled,
+          name: this.getFormatName(),
+          isButtonRadio,
+          isCardRadio,
+          isPureCardRadio,
+          buttonSize,
+          prefixCls
+        },
+        mode
+      }
+    }, inner));
+  }
+
+}
+
+RadioGroup.propTypes = {
+  defaultValue: _propTypes.default.any,
+  disabled: _propTypes.default.bool,
+  name: _propTypes.default.string,
+  options: _propTypes.default.array,
+  buttonSize: _propTypes.default.oneOf(_constants.strings.BUTTON_SIZE),
+  type: _propTypes.default.oneOf([_constants.strings.TYPE_DEFAULT, _constants.strings.TYPE_BUTTON, _constants.strings.TYPE_CARD, _constants.strings.TYPE_PURECARD]),
+  value: _propTypes.default.any,
+  onChange: _propTypes.default.func,
+  children: _propTypes.default.node,
+  prefixCls: _propTypes.default.string,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  direction: _propTypes.default.oneOf(_constants.strings.DIRECTION_SET),
+  mode: _propTypes.default.oneOf(_constants.strings.MODE)
+};
+RadioGroup.defaultProps = {
+  disabled: false,
+  onChange: _lodashEs.noop,
+  direction: _constants.strings.DEFAULT_DIRECTION,
+  mode: '',
+  type: _constants.strings.TYPE_DEFAULT,
+  buttonSize: 'middle'
+};
+var _default = RadioGroup;
+exports.default = _default;

package/lib/cjs/radio/radioInner.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+export declare type RadioInnerMode = 'advanced' | '';
+export interface RadioInnerProps extends BaseProps {
+    checked?: boolean;
+    disabled?: boolean;
+    isButtonRadio?: boolean;
+    onChange?: (e: RadioChangeEvent) => void;
+    mode?: RadioInnerMode;
+    autoFocus?: boolean;
+    name?: string;
+    prefixCls?: string;
+    ref?: React.MutableRefObject<RadioInner> | ((instance: RadioInner) => void);
+    isPureCardRadioGroup?: boolean;
+}
+interface RadioInnerState {
+    checked?: boolean;
+}
+declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
+    static contextType: React.Context<import("./context").RadioContextValue>;
+    static propTypes: {
+        checked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        isButtonRadio: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        mode: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onChange: (...args: any[]) => void;
+        isButtonRadio: boolean;
+    };
+    inputEntity: HTMLInputElement;
+    constructor(props: RadioInnerProps);
+    get adapter(): RadioInnerAdapter;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RadioInnerProps): void;
+    componentWillUnmount(): void;
+    blur(): void;
+    focus(): void;
+    onChange(e: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export default RadioInner;

package/lib/cjs/radio/radioInner.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _radioInnerFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/radio/constants");
+
+var _context2 = _interopRequireDefault(require("./context"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _lodashEs = require("lodash-es");
+
+class RadioInner extends _baseComponent.default {
+  constructor(props) {
+    var _context;
+
+    super(props);
+    this.state = {
+      checked: false
+    };
+    this.foundation = new _radioInnerFoundation.default(this.adapter);
+    this.onChange = (0, _bind.default)(_context = this.onChange).call(_context, this);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setNativeControlChecked: checked => {
+        this.setState({
+          checked
+        });
+      },
+      notifyChange: e => {
+        this.props.onChange(e);
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.checked !== this.props.checked) {
+      this.foundation.setChecked(this.props.checked);
+    }
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  blur() {
+    this.inputEntity.blur();
+  }
+
+  focus() {
+    this.inputEntity.focus();
+  }
+
+  onChange(e) {
+    this.foundation.handleChange(e);
+  }
+
+  render() {
+    const {
+      disabled,
+      mode,
+      autoFocus,
+      name,
+      isButtonRadio,
+      isPureCardRadioGroup
+    } = this.props;
+    const {
+      checked
+    } = this.state;
+    const prefix = this.props.prefixCls || _constants.radioClasses.PREFIX;
+    const wrapper = (0, _classnames.default)({
+      ["".concat(prefix, "-inner")]: true,
+      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
+      ["".concat(prefix, "-inner-buttonRadio")]: isButtonRadio,
+      ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
+    });
+    const inner = (0, _classnames.default)({
+      ["".concat(prefix, "-inner-display")]: !isButtonRadio
+    });
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: wrapper
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: ref => {
+        this.inputEntity = ref;
+      },
+      autoFocus: autoFocus,
+      type: mode === 'advanced' ? 'checkbox' : 'radio',
+      checked: Boolean(checked),
+      disabled: disabled,
+      onChange: this.onChange,
+      name: name
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: inner
+    }, checked ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRadio, null) : null));
+  }
+
+}
+
+RadioInner.contextType = _context2.default;
+RadioInner.propTypes = {
+  checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  isButtonRadio: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  mode: _propTypes.default.oneOf(['advanced', ''])
+};
+RadioInner.defaultProps = {
+  onChange: _lodashEs.noop,
+  isButtonRadio: false
+};
+var _default = RadioInner;
+exports.default = _default;

package/lib/cjs/rating/index.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import BaseComponent from '../_base/baseComponent';
+import PropTypes from 'prop-types';
+import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
+import Item from './item';
+import RatingFoundation, { RatingAdapter } from '@douyinfe/semi-foundation/lib/cjs/rating/foundation';
+import '@douyinfe/semi-foundation/lib/cjs/rating/rating.css';
+export { RatingItemProps } from './item';
+export interface RatingProps {
+    disabled?: boolean;
+    value?: number;
+    defaultValue?: number;
+    count?: number;
+    allowHalf?: boolean;
+    allowClear?: boolean;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    onChange?: (value: number) => void;
+    onHoverChange?: (value: number) => void;
+    className?: string;
+    character?: React.ReactNode;
+    tabIndex?: number;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onClick?: (e: React.MouseEvent, index: number) => void;
+    autoFocus?: boolean;
+    size?: 'small' | 'default' | number;
+    tooltips?: string[];
+}
+export interface RatingState {
+    value: number;
+    hoverValue: number;
+    focused: boolean;
+    clearedValue: number;
+}
+export default class Rating extends BaseComponent<RatingProps, RatingState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<number>;
+        defaultValue: PropTypes.Requireable<number>;
+        count: PropTypes.Requireable<number>;
+        allowHalf: PropTypes.Requireable<boolean>;
+        allowClear: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        prefixCls: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onHoverChange: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        character: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tabIndex: PropTypes.Requireable<number>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<number | "default" | "small">;
+        tooltips: PropTypes.Requireable<string[]>;
+    };
+    static defaultProps: {
+        defaultValue: number;
+        count: number;
+        allowHalf: boolean;
+        allowClear: boolean;
+        style: {};
+        prefixCls: string;
+        onChange: typeof noop;
+        onHoverChange: typeof noop;
+        tabIndex: number;
+        size: "default";
+    };
+    stars: Record<string, Item>;
+    rate: HTMLUListElement;
+    foundation: RatingFoundation;
+    constructor(props: RatingProps);
+    static getDerivedStateFromProps(nextProps: RatingProps, state: RatingState): RatingState;
+    get adapter(): RatingAdapter<RatingProps, RatingState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onHover: (event: React.MouseEvent, index: number) => void;
+    onMouseLeave: () => void;
+    onClick: RatingProps['onClick'];
+    onFocus: RatingProps['onFocus'];
+    onBlur: RatingProps['onBlur'];
+    onKeyDown: RatingProps['onKeyDown'];
+    focus: () => void;
+    blur: () => void;
+    saveRef: (index: number) => (node: Item) => void;
+    saveRate: (node: HTMLUListElement) => void;
+    render(): JSX.Element;
+}