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

package/lib/cjs/grid/row.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/row.tsx
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/grid/grid.css';
+export declare const RowContext: React.Context<{
+    gutters: Gutter | [Gutter, Gutter];
+}>;
+export declare type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export declare type Gutter = number | Partial<Record<Breakpoint, number>>;
+export interface RowProps {
+    type?: 'flex';
+    align?: 'top' | 'middle' | 'bottom';
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    gutter?: Gutter | [Gutter, Gutter];
+    prefixCls?: string;
+}
+export interface RowState {
+    screens: Partial<Record<Breakpoint, boolean>>;
+}
+declare class Row extends React.Component<RowProps, RowState> {
+    static propTypes: {
+        type: PropTypes.Requireable<string>;
+        align: PropTypes.Requireable<string>;
+        justify: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        gutter: PropTypes.Requireable<number | object>;
+        prefixCls: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+    };
+    static RowContext: {
+        gutters: PropTypes.Requireable<any>;
+    };
+    state: {
+        screens: {
+            xs: boolean;
+            sm: boolean;
+            md: boolean;
+            lg: boolean;
+            xl: boolean;
+            xxl: boolean;
+        };
+    };
+    unRegisters: Array<() => void>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getGutter(): [number, number];
+    render(): JSX.Element;
+}
+export default Row;

package/lib/cjs/grid/row.js

@@ -0,0 +1,207 @@
+"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 = exports.RowContext = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/grid/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/grid/grid.css");
+
+var _utils = require("../_utils");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/**
+ * Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/row.tsx
+ */
+
+
+const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+const RowContext = /*#__PURE__*/_react.default.createContext(null);
+
+exports.RowContext = RowContext;
+const responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)'
+};
+
+class Row extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      screens: {
+        xs: true,
+        sm: true,
+        md: true,
+        lg: true,
+        xl: true,
+        xxl: true
+      }
+    };
+    this.unRegisters = [];
+  }
+
+  componentDidMount() {
+    var _context;
+
+    this.unRegisters = (0, _map.default)(_context = (0, _keys.default)(responsiveMap)).call(_context, screen => (0, _utils.registerMediaQuery)(responsiveMap[screen], {
+      match: () => {
+        if (typeof this.props.gutter !== 'object') {
+          return;
+        }
+
+        this.setState(prevState => ({
+          screens: (0, _assign.default)((0, _assign.default)({}, prevState.screens), {
+            [screen]: true
+          })
+        }));
+      },
+      unmatch: () => {
+        if (typeof this.props.gutter !== 'object') {
+          return;
+        }
+
+        this.setState(prevState => ({
+          screens: (0, _assign.default)((0, _assign.default)({}, prevState.screens), {
+            [screen]: false
+          })
+        }));
+      }
+    }));
+  }
+
+  componentWillUnmount() {
+    var _context2;
+
+    (0, _forEach.default)(_context2 = this.unRegisters).call(_context2, unRegister => unRegister());
+  }
+
+  getGutter() {
+    const {
+      gutter = 0
+    } = this.props;
+    const results = [0, 0];
+    const normalizedGutter = (0, _isArray.default)(gutter) ? (0, _slice.default)(gutter).call(gutter, 0, 2) : [gutter, 0];
+    (0, _forEach.default)(normalizedGutter).call(normalizedGutter, (g, index) => {
+      if (typeof g === 'object') {
+        for (let i = 0; i < responsiveArray.length; i++) {
+          const breakpoint = responsiveArray[i];
+
+          if (this.state.screens[breakpoint] && g[breakpoint] !== undefined) {
+            results[index] = g[breakpoint];
+            break;
+          }
+        }
+      } else {
+        results[index] = g || 0;
+      }
+    });
+    return results;
+  }
+
+  render() {
+    var _context3, _context4, _context5, _context6, _context7;
+
+    const _a = this.props,
+          {
+      prefixCls,
+      type,
+      justify,
+      align,
+      className,
+      style,
+      children
+    } = _a,
+          others = __rest(_a, ["prefixCls", "type", "justify", "align", "className", "style", "children"]);
+
+    const gutters = this.getGutter();
+    const prefix = "".concat(prefixCls, "-row");
+    const classes = (0, _classnames.default)({
+      [prefix]: type !== 'flex',
+      [(0, _concat.default)(_context3 = "".concat(prefix, "-")).call(_context3, type)]: type,
+      [(0, _concat.default)(_context4 = (0, _concat.default)(_context5 = "".concat(prefix, "-")).call(_context5, type, "-")).call(_context4, justify)]: type && justify,
+      [(0, _concat.default)(_context6 = (0, _concat.default)(_context7 = "".concat(prefix, "-")).call(_context7, type, "-")).call(_context6, align)]: type && align
+    }, className);
+    const rowStyle = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, gutters[0] > 0 ? {
+      marginLeft: gutters[0] / -2,
+      marginRight: gutters[0] / -2
+    } : {}), gutters[1] > 0 ? {
+      marginTop: gutters[1] / -2,
+      marginBottom: gutters[1] / -2
+    } : {}), style);
+    const otherProps = (0, _assign.default)({}, others);
+    delete otherProps.gutter;
+    return /*#__PURE__*/_react.default.createElement(RowContext.Provider, {
+      value: {
+        gutters
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, otherProps, {
+      className: classes,
+      style: rowStyle
+    }), children));
+  }
+
+}
+
+Row.propTypes = {
+  type: _propTypes.default.oneOf(['flex']),
+  align: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
+  justify: _propTypes.default.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  children: _propTypes.default.node,
+  gutter: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.number, _propTypes.default.array]),
+  prefixCls: _propTypes.default.string
+};
+Row.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX
+};
+Row.RowContext = {
+  gutters: _propTypes.default.any
+};
+var _default = Row;
+exports.default = _default;

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

@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Theme, ButtonProps } from '../button/Button';
+import { IconSize } from '@douyinfe/semi-icons';
+import '@douyinfe/semi-foundation/lib/cjs/button/iconButton.css';
+export declare type HorizontalPaddingType = 'left' | 'right';
+export interface IconButtonProps extends ButtonProps {
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    iconSize?: IconSize;
+    iconStyle?: React.CSSProperties;
+    loading?: boolean;
+    theme?: Theme;
+    style?: React.CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    noHorizontalPadding?: boolean | HorizontalPaddingType | HorizontalPaddingType[];
+    prefixCls?: string;
+}
+declare class IconButton extends PureComponent<IconButtonProps> {
+    static defaultProps: {
+        iconPosition: any;
+        prefixCls: string;
+        loading: boolean;
+        noHorizontalPadding: boolean;
+        onMouseEnter: (...args: any[]) => void;
+        onMouseLeave: (...args: any[]) => void;
+    };
+    static propTypes: {
+        iconStyle: PropTypes.Requireable<object>;
+        style: PropTypes.Requireable<object>;
+        loading: PropTypes.Requireable<boolean>;
+        prefixCls: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        iconSize: PropTypes.Requireable<string>;
+        noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        theme: PropTypes.Requireable<string>;
+        iconPosition: PropTypes.Requireable<unknown>;
+        className: PropTypes.Requireable<string>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    render(): JSX.Element;
+}
+export default IconButton;

package/lib/cjs/iconButton/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/icons/constants");
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _icon = _interopRequireDefault(require("../spin/icon"));
+
+require("@douyinfe/semi-foundation/lib/cjs/button/iconButton.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable eqeqeq */
+
+
+const iconSizes = _constants2.strings.SIZE; // TODO: add a buttonGroup component
+// TODO: icon configuration
+
+class IconButton extends _react.PureComponent {
+  render() {
+    const _a = this.props,
+          {
+      children: originChildren,
+      iconPosition,
+      iconSize,
+      iconStyle,
+      style: originStyle,
+      icon,
+      noHorizontalPadding,
+      theme,
+      className,
+      prefixCls,
+      loading
+    } = _a,
+          otherProps = __rest(_a, ["children", "iconPosition", "iconSize", "iconStyle", "style", "icon", "noHorizontalPadding", "theme", "className", "prefixCls", "loading"]);
+
+    const style = (0, _assign.default)({}, originStyle); // TODO: review check
+
+    if ((0, _isArray.default)(noHorizontalPadding)) {
+      (0, _includes.default)(noHorizontalPadding).call(noHorizontalPadding, 'left') && (style.paddingLeft = 0);
+      (0, _includes.default)(noHorizontalPadding).call(noHorizontalPadding, 'right') && (style.paddingRight = 0);
+    } else if (noHorizontalPadding === true) {
+      style.paddingLeft = 0;
+      style.paddingRight = 0;
+    }
+
+    let finalChildren = null;
+    let IconElem = null;
+
+    if (loading && !otherProps.disabled) {
+      IconElem = /*#__PURE__*/_react.default.createElement(_icon.default, null);
+    } else if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
+      IconElem = icon;
+    }
+
+    const btnTextCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
+      ["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
+    });
+    const children = originChildren != null ? /*#__PURE__*/_react.default.createElement("span", {
+      className: btnTextCls
+    }, originChildren) : null;
+
+    if (iconPosition === 'left') {
+      finalChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, IconElem, children);
+    } else {
+      finalChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, IconElem);
+    }
+
+    const iconBtnCls = (0, _classnames.default)(className, "".concat(prefixCls, "-with-icon"), {
+      ["".concat(prefixCls, "-with-icon-only")]: children == null || children === '',
+      ["".concat(prefixCls, "-loading")]: loading
+    });
+    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _assign.default)({}, otherProps, {
+      className: iconBtnCls,
+      theme: theme,
+      style: style
+    }), finalChildren);
+  }
+
+}
+
+IconButton.defaultProps = {
+  iconPosition: _constants.strings.DEFAULT_ICON_POSITION,
+  prefixCls: _constants.cssClasses.PREFIX,
+  loading: false,
+  noHorizontalPadding: false,
+  onMouseEnter: _noop2.default,
+  onMouseLeave: _noop2.default
+};
+IconButton.propTypes = {
+  iconStyle: _propTypes.default.object,
+  style: _propTypes.default.object,
+  loading: _propTypes.default.bool,
+  prefixCls: _propTypes.default.string,
+  icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.node]),
+  iconSize: _propTypes.default.oneOf(iconSizes),
+  noHorizontalPadding: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.array]),
+  children: _propTypes.default.node,
+  theme: _propTypes.default.string,
+  iconPosition: _propTypes.default.oneOf(_constants.strings.iconPositions),
+  className: _propTypes.default.string,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func
+};
+var _default = IconButton;
+exports.default = _default;

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

@@ -0,0 +1,3 @@
+import Icon, { IconProps, IconSize } from '@douyinfe/semi-icons';
+export { IconProps, IconSize };
+export default Icon;

package/lib/cjs/icons/index.js

@@ -0,0 +1,16 @@
+"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 _semiIcons = _interopRequireDefault(require("@douyinfe/semi-icons"));
+
+var _default = _semiIcons.default;
+exports.default = _default;

package/lib/cjs/index.d.ts

@@ -0,0 +1,79 @@
+import './_base/base.css';
+export { default as Anchor } from './anchor';
+export { default as AutoComplete } from './autoComplete';
+export { default as Avatar } from './avatar';
+export { default as AvatarGroup } from './avatar/avatarGroup';
+export { default as BackTop } from './backtop';
+export { default as Badge } from './badge';
+export { default as Banner } from './banner';
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button/buttonGroup';
+export { default as Calendar } from './calendar';
+export { default as Card } from './card';
+export { default as CardGroup } from './card/cardGroup';
+export { default as Cascader } from './cascader';
+export { default as Checkbox } from './checkbox';
+export { default as CheckboxGroup } from './checkbox/checkboxGroup';
+export { default as Collapse } from './collapse';
+export { default as Collapsible } from './collapsible';
+export { default as ConfigProvider } from './configProvider';
+export { default as DatePicker } from './datePicker';
+export { default as Descriptions } from './descriptions';
+export { default as Empty } from './empty';
+export { default as Modal } from './modal';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown/dropdownMenu';
+export { default as DropdownItem } from './dropdown/dropdownItem';
+export { default as DropdownDivider } from './dropdown/dropdownDivider';
+export { Row, Col } from './grid';
+export { Layout } from './layout';
+export { default as List } from './list';
+export { default as IconButton } from './iconButton';
+export { default as Icon } from './icons';
+export { default as Input } from './input';
+export { default as InputGroup } from './input/inputGroup';
+export { default as TextArea } from './input/textarea';
+export { default as InputNumber } from './inputNumber';
+export { default as Nav } from './navigation';
+export { default as NavItem } from './navigation/Item';
+export { default as SubNav } from './navigation/SubNav';
+export { default as Notification } from './notification';
+export { default as OverflowList } from './overflowList';
+export { default as Pagination } from './pagination';
+export { default as Popconfirm } from './popconfirm';
+export { default as Popover } from './popover';
+export { default as Progress } from './progress';
+export { default as Radio } from './radio';
+export { default as RadioGroup } from './radio/radioGroup';
+export { default as Rating } from './rating';
+export { default as ScrollList } from './scrollList';
+export { default as ScrollItem } from './scrollList/scrollItem';
+export { default as Select } from './select';
+export { default as SideSheet } from './sideSheet';
+export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
+export { default as Space } from './space';
+export { default as Spin } from './spin';
+export { default as SplitButtonGroup } from './button/splitButtonGroup';
+export { default as Step } from './steps/step';
+export { default as Steps } from './steps';
+export { default as Switch } from './switch';
+export { default as Table } from './table';
+export { default as Tabs } from './tabs';
+export { default as TabPane } from './tabs/TabPane';
+export { default as Tag } from './tag';
+export { default as TagGroup } from './tag/group';
+export { default as TagInput } from './tagInput';
+export { default as Timeline } from './timeline';
+export { default as TimePicker } from './timePicker';
+export { default as Toast, ToastFactory } from './toast';
+export { default as Tooltip } from './tooltip';
+export { default as Tree } from './tree';
+export { default as TreeSelect } from './treeSelect';
+export { default as Upload } from './upload';
+export { default as Typography } from './typography';
+export { default as Transfer } from './transfer';
+export { default as LocaleProvider } from './locale/localeProvider';
+/** Form */
+export { Form, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi, withField, ArrayField, } from './form';